aliveicon 1.0.32 → 1.1.0

package/README.md

@@ -1,58 +1,52 @@
 # aliveicon
 
-> Beautiful, animated line icons — they draw themselves on hover, click, or page load.
+> Animated line icons for React. They draw themselves on hover, click, or page load.
 
 <p align="left">
   <a href="https://www.npmjs.com/package/aliveicon"><img src="https://img.shields.io/npm/v/aliveicon.svg?color=blue" alt="npm version" /></a>
   <a href="https://www.npmjs.com/package/aliveicon"><img src="https://img.shields.io/npm/dm/aliveicon.svg?color=blue" alt="npm downloads" /></a>
   <a href="https://github.com/Hemang-patel-9/aliveicon/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/aliveicon.svg?color=green" alt="license" /></a>
-  <img src="https://img.shields.io/badge/icons-515%2B-orange" alt="icon count" />
+  <img src="https://img.shields.io/badge/icons-520-orange" alt="icon count" />
   <img src="https://img.shields.io/badge/types-included-blue" alt="typescript" />
 </p>
 
-`aliveicon` is a collection of **515+ ready-to-use animated SVG icons** for React. Every icon is a real component that "draws" its stroke with a smooth path animation powered by [Framer Motion](https://www.framer.com/motion/). Drop one into your app and it comes alive on hover, on click, or as soon as it mounts — no extra wiring required.
+`aliveicon` is a set of **520 animated SVG icons** for React. Each icon is a component that animates its strokes with [Framer Motion](https://motion.dev). Drop one in and it comes alive on hover, on click, or as soon as it mounts.
 
 ---
 
 ## ✨ Features
 
-- 🎬 **Animated out of the box** — icons draw their outlines using Framer Motion path animations.
-- 🖱️ **Trigger however you like** — animate on hover, on click, on mount, or loop continuously.
-- 🎨 **Inherits your color** — icons use `currentColor`, so they match your text color automatically.
-- 📏 **Resizable** — set any pixel size with a single `size` prop.
-- 🌳 **Tree-shakeable ESM + CJS builds** — import only the icons you use.
-- 🔠 **TypeScript first** — full type definitions and IntelliSense for every prop.
-- ⚛️ **React 18+, Javsacript & Next.js ready** — components are marked `'use client'` and work in the App Router.
+- 🎬 **Animated out of the box**: strokes draw, bounce, spin or wiggle using Framer Motion.
+- 🖱️ **Trigger it your way**: hover, click, mount, loop while hovered, or drive it from a parent through a `ref`.
+- 🎨 **Inherits your color**: icons use `currentColor`, so they match the surrounding text.
+- 📏 **One `size` prop** sets the width and height in pixels.
+- 🌳 **Tree-shakeable**: each icon is its own module, so your bundle only contains the icons you import.
+- 🔠 **TypeScript**: full prop types, plus `AnimatedIconProps` and `AnimatedIconHandle` for your own code.
+- ⚛️ **React 18/19 and Next.js App Router**: every module ships with `'use client'`, so you can import icons from Server Components.
 
 ---
 
 ## 📦 Installation
 
 ```bash
-npm install aliveicon
+npm install aliveicon framer-motion
 ```
 
 ```bash
-# or with your package manager of choice
-yarn add aliveicon
-pnpm add aliveicon
-bun add aliveicon
+# or
+yarn add aliveicon framer-motion
+pnpm add aliveicon framer-motion
+bun add aliveicon framer-motion
 ```
 
 ### Peer dependencies
 
-`aliveicon` relies on the following packages already being installed in your project:
-
 | Package | Version |
 | ------- | ------- |
 | `react` | `>=18.0.0` |
 | `react-dom` | `>=18.0.0` |
 | `framer-motion` | `>=10.0.0` |
 
-```bash
-npm install react react-dom framer-motion
-```
-
 ---
 
 ## 🚀 Quick start
@@ -66,100 +60,98 @@ export default function App() {
       {/* Animates on hover by default */}
       <Activity size={32} />
 
-      {/* Keeps looping while hovered */}
+      {/* Keeps looping while hovered, stops when the pointer leaves */}
       <BellRing size={32} loopOnHover />
 
-      {/* Plays the animation when clicked */}
+      {/* Plays when clicked */}
       <Rocket size={32} animateOnClick />
     </div>
   );
 }
 ```
 
-That's it. By default an icon plays its animation whenever the user hovers over it.
-
 ---
 
 ## 🎛️ Props
 
-Every icon shares the same API. All props are optional, and any extra props (`onClick`, `aria-label`, `id`, …) are forwarded to the wrapping `<div>`.
+Every icon has the same API. All props are optional, and any other props (`onClick`, `aria-label`, `id`, …) are passed to the wrapping `<div>`.
 
 | Prop | Type | Default | Description |
 | ---- | ---- | ------- | ----------- |
-| `size` | `number` | `28` | Width and height of the icon, in pixels. |
-| `hoverable` | `boolean` | `true` | Play the animation when the user hovers over the icon. |
-| `loopOnHover` | `boolean` | `false` | Keep replaying the animation for as long as the icon is hovered. |
-| `animateOnClick` | `boolean` | `false` | Play the animation when the icon is clicked. |
-| `autoAnimateOnLoad` | `boolean` | `false` | Play the animation once, automatically, when the component mounts. |
-| `className` | `string` | — | Extra classes merged onto the wrapper (deduped via `tailwind-merge`). |
-| `style` | `React.CSSProperties` | — | Inline styles applied to the wrapper element. |
-| `...props` | `React.HTMLAttributes<HTMLDivElement>` | — | Any other div attributes — `onClick`, `onMouseEnter`, `aria-*`, etc. |
+| `size` | `number` | `28` | Width and height in pixels. |
+| `hoverable` | `boolean` | `true` | Play when the pointer enters the icon. Ignored while a `ref` is attached (see below). |
+| `loopOnHover` | `boolean` | `false` | Keep replaying while hovered; stops when the pointer leaves. |
+| `animateOnClick` | `boolean` | `false` | Play when the icon is clicked. |
+| `autoAnimateOnLoad` | `boolean` | `false` | Play once when the component mounts. |
+| `className` | `string` | — | Classes for the wrapper. Merged with [`tailwind-merge`](https://github.com/dcastil/tailwind-merge), so conflicting Tailwind classes resolve cleanly. |
+| `style` | `React.CSSProperties` | — | Inline styles for the wrapper. |
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | — | Any other div attribute. |
 
 ---
 
-## 🎨 Styling & color
+## 🕹️ Controlling an icon from a parent
 
-Icons are drawn with `stroke="currentColor"`, so they take on the **text color** of their container. Change the color the same way you'd change text color:
+Pass a `ref` to start and stop the animation yourself, for example when the whole button is hovered rather than just the icon:
 
 ```tsx
-{/* Inline style */}
-<Activity style={{ color: '#e11d48' }} />
+import { useRef } from 'react';
+import { ArchiveX, type AnimatedIconHandle } from 'aliveicon';
 
-{/* Inherit from a parent */}
-<div style={{ color: 'tomato' }}>
-  <Activity />
-</div>
+export function DeleteButton() {
+  const icon = useRef<AnimatedIconHandle>(null);
 
-{/* Tailwind utility classes */}
-<Activity className="text-emerald-500" />
+  return (
+    <button
+      onMouseEnter={() => icon.current?.startAnimation()}
+      onMouseLeave={() => icon.current?.stopAnimation()}
+    >
+      <ArchiveX ref={icon} size={18} /> Delete
+    </button>
+  );
+}
 ```
 
-### Sizing
+| Method | What it does |
+| ------ | ------------ |
+| `startAnimation()` | Plays the animation once, then returns to rest. |
+| `stopAnimation()` | Stops any running animation and returns to rest. |
 
-```tsx
-<Activity size={16} />
-<Activity size={24} />
-<Activity size={48} />
-```
+While a `ref` is attached the icon ignores its own hover, so the parent is in charge. `animateOnClick` and `autoAnimateOnLoad` still work.
 
 ---
 
-## 🧩 Usage examples
+## 🎨 Styling & color
 
-**Animate automatically on page load**
+Icons are drawn with `stroke="currentColor"`, so they take the **text color** of their container:
 
 ```tsx
-<Rocket autoAnimateOnLoad />
-```
+<Activity style={{ color: '#e11d48' }} />
 
-**Loop the animation while hovering**
+<div style={{ color: 'tomato' }}>
+  <Activity />
+</div>
 
-```tsx
-<Bell loopOnHover />
+<Activity className="text-emerald-500" />
 ```
 
-**Animate on click instead of hover**
+---
 
-```tsx
-<Heart hoverable={false} animateOnClick />
-```
+## ♿ Accessibility
 
-**Use inside a button with your own handler**
+The SVG inside each icon has `aria-hidden="true"`, so screen readers skip decorative icons. When an icon carries meaning on its own, label the wrapper:
 
 ```tsx
-<button onClick={() => console.log('clicked')}>
-  <Trash animateOnClick aria-label="Delete" />
-</button>
+<Bell role="img" aria-label="Notifications" />
 ```
 
 ---
 
 ## 📚 Available icons
 
-`aliveicon` currently ships **515+ icons** and is actively growing. Import any icon by its named export (PascalCase):
+`aliveicon` ships **520 icons**, and more are being added. Import any icon by its PascalCase name:
 
 ```tsx
-import { CircleCheck, ChartLine, ShieldAlert } from 'aliveicon';
+import { CircleCheck, ChartLine, Wifi } from 'aliveicon';
 ```
 
 | Group | Count | Examples |
@@ -169,8 +161,9 @@ import { CircleCheck, ChartLine, ShieldAlert } from 'aliveicon';
 | **C** | 140 | `Calendar`, `Camera`, `Car`, `ChartLine`, `Check`, `ChevronDown`, `Circle`, `Clock` |
 | **N** | 16 | `Navigation`, `Network`, `Newspaper`, `Notebook`, `Nut` |
 | **O** | 10 | `Octagon`, `Omega`, `Option`, `Orbit`, `Origami` |
-| **Q** | 2 | `Quote`, `QRCode` |
+| **Q** | 2 | `Quote`, `QrCode` |
 | **R** | 50 | `Rabbit`, `Radar`, `Radio`, `Receipt`, `RefreshCw`, `Rocket`, `RotateCcw` |
+| **S** | 1 | `SquareActivity` |
 | **U** | 35 | `Umbrella`, `Undo`, `Upload`, `User`, `Users`, `Utensils` |
 | **V** | 20 | `Variable`, `Vault`, `Video`, `Volume`, `Vote` |
 | **W** | 33 | `Wallet`, `Wand`, `Watch`, `Waves`, `Webcam`, `Wifi`, `Wind`, `Wrench` |
@@ -178,16 +171,50 @@ import { CircleCheck, ChartLine, ShieldAlert } from 'aliveicon';
 | **Y** | 1 | `YouTube` |
 | **Z** | 4 | `Zap`, `ZapOff`, `ZoomIn`, `ZoomOut` |
 
-> The full, type-checked list of exports lives in [`src/index.ts`](src/index.ts). Your editor's autocomplete will surface every available icon as you type.
+The full list lives in [`src/index.ts`](src/index.ts), and your editor's autocomplete will show every icon as you type.
+
+### Renamed icons
+
+These names were misspelled in earlier versions. The old names still work but are deprecated and will be removed in the next major version.
+
+| Old name | Use instead |
+| -------- | ----------- |
+| `AccessibilityActivity` | `Accessibility` |
+| `AudioWaveForm` | `AudioWaveform` |
+| `BadgeIndianRuppee` | `BadgeIndianRupee` |
+| `BookMark`, `BookMarkCheck`, `BookMarkMinus` | `Bookmark`, `BookmarkCheck`, `BookmarkMinus` |
+| `CCTV` | `Cctv` |
+| `QRCode` | `QrCode` |
+| `USB` | `Usb` |
+| `WebhooksOff` | `WebhookOff` |
 
 ---
 
 ## 🎬 How the animation works
 
-Each icon is an inline SVG whose stroke paths are rendered as Framer Motion `motion.path` elements. When triggered, the icon animates its `pathLength`, `pathOffset`, and `opacity` to redraw the outline from scratch, then settles back into its resting state. Triggers (`hover`, `click`, `mount`, `loop`) simply decide *when* that animation runs, using Framer Motion's `useAnimation` controls under the hood.
+Each icon is an inline SVG whose strokes are Framer Motion elements (`motion.path`, `motion.circle`, …) with two variants: a resting state and an `animate` state. A shared hook, `useAnimatedIcon`, decides *when* to play: on hover, click, mount, in a loop, or when a parent calls the `ref` methods. It plays the `animate` variant and then settles back to rest.
 
 ---
 
+## 🤝 Contributing
+
+```bash
+npm install
+npm run check   # index up to date, icon lint, formatting, type-check
+npm run build
+npm test        # renders every icon from the built package
+```
+
+New icons go in `src/icons/<first letter>/<IconName>.tsx` and use `useAnimatedIcon` from `src/lib`. Run `npm run generate` afterwards to add them to `src/index.ts`.
+
+See [CONTRIBUTING.md](CONTRIBUTING.md) for the full guide, and please follow the [Code of Conduct](CODE_OF_CONDUCT.md). Security issues go through [SECURITY.md](SECURITY.md).
+
+---
+
+## 🙏 Credits
+
+Icon shapes are based on [Lucide](https://lucide.dev) (ISC). See [THIRD_PARTY_NOTICES.md](THIRD_PARTY_NOTICES.md).
+
 ## 📄 License
 
-[MIT](LICENSE) © Hemang Baldha
+[MIT](LICENSE) © Hemang Baldha

package/THIRD_PARTY_NOTICES.md

@@ -0,0 +1,57 @@
+# Third-party notices
+
+aliveicon's icon shapes are based on [Lucide](https://lucide.dev) (ISC License),
+which in turn includes icons derived from [Feather](https://feathericons.com) (MIT License).
+The animations, components and packaging are aliveicon's own work, released under the
+MIT License in [LICENSE](LICENSE).
+
+Brand icons (`Chrome`, `XTwitter`, `YouTube`) depict trademarks that belong to their
+respective owners. Their inclusion does not imply endorsement.
+
+---
+
+## Lucide
+
+```
+ISC License
+
+Copyright (c) 2026 Lucide Icons and Contributors
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+```
+
+## Feather (portions of Lucide)
+
+```
+The MIT License (MIT)
+
+Copyright (c) 2013-present Cole Bemis
+
+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:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+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
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+```

package/dist/cjs/aliases.js

@@ -0,0 +1,48 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Accessibility = require('./icons/a/Accessibility.js');
+var AudioWaveform = require('./icons/a/AudioWaveform.js');
+var BadgeIndianRupee = require('./icons/b/BadgeIndianRupee.js');
+var Bookmark = require('./icons/b/Bookmark.js');
+var BookmarkCheck = require('./icons/b/BookmarkCheck.js');
+var BookmarkMinus = require('./icons/b/BookmarkMinus.js');
+var Cctv = require('./icons/c/Cctv.js');
+var QrCode = require('./icons/q/QrCode.js');
+var Usb = require('./icons/u/Usb.js');
+var WebhookOff = require('./icons/w/WebhookOff.js');
+
+/** @deprecated use Accessibility */
+const AccessibilityActivity = Accessibility.Accessibility;
+/** @deprecated use AudioWaveform */
+const AudioWaveForm = AudioWaveform.AudioWaveform;
+/** @deprecated use BadgeIndianRupee */
+const BadgeIndianRuppee = BadgeIndianRupee.BadgeIndianRupee;
+/** @deprecated use Bookmark */
+const BookMark = Bookmark.Bookmark;
+/** @deprecated use BookmarkCheck */
+const BookMarkCheck = BookmarkCheck.BookmarkCheck;
+/** @deprecated use BookmarkMinus */
+const BookMarkMinus = BookmarkMinus.BookmarkMinus;
+/** @deprecated use Cctv */
+const CCTV = Cctv.Cctv;
+/** @deprecated use QrCode */
+const QRCode = QrCode.QrCode;
+/** @deprecated use Usb */
+const USB = Usb.Usb;
+/** @deprecated use WebhookOff */
+const WebhooksOff = WebhookOff.WebhookOff;
+
+exports.AccessibilityActivity = AccessibilityActivity;
+exports.AudioWaveForm = AudioWaveForm;
+exports.BadgeIndianRuppee = BadgeIndianRuppee;
+exports.BookMark = BookMark;
+exports.BookMarkCheck = BookMarkCheck;
+exports.BookMarkMinus = BookMarkMinus;
+exports.CCTV = CCTV;
+exports.QRCode = QRCode;
+exports.USB = USB;
+exports.WebhooksOff = WebhooksOff;
+//# sourceMappingURL=aliases.js.map

package/dist/cjs/aliases.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"aliases.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/icons/a/AArrowDown.js

@@ -0,0 +1,73 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var framerMotion = require('framer-motion');
+var React = require('react');
+var cn = require('../../lib/cn.js');
+var useAnimatedIcon = require('../../lib/use-animated-icon.js');
+
+const bounceVariant = {
+    normal: {
+        scale: 1,
+        transition: {
+            type: 'spring',
+            stiffness: 200,
+            damping: 15,
+        },
+    },
+    animate: {
+        scale: 1.2,
+        transition: {
+            type: 'spring',
+            stiffness: 300,
+            damping: 10,
+        },
+    },
+};
+const lineVariants = {
+    normal: {
+        opacity: 1,
+        pathLength: 1,
+        pathOffset: 0,
+        transition: {
+            duration: 0.4,
+            opacity: { duration: 0.1 },
+        },
+    },
+    animate: {
+        opacity: [0, 1],
+        pathLength: [0, 1],
+        pathOffset: [1, 0],
+        transition: {
+            duration: 0.6,
+            ease: 'easeInOut',
+            opacity: { duration: 0.1 },
+        },
+    },
+};
+const bouncePathVariants = {
+    hidden: {
+        pathLength: 0,
+        opacity: 0,
+    },
+    visible: (i) => ({
+        pathLength: 1,
+        opacity: 1,
+        transition: {
+            pathLength: { delay: i * 0.1, duration: 0.4, ease: 'easeInOut' },
+            opacity: { delay: i * 0.1, duration: 0.2 },
+        },
+    }),
+};
+const paths = ['M3.5 13h6', 'm2 16 4.5-9 4.5 9', 'M18 7v9', 'm14 12 4 4 4-4'];
+const AArrowDown = React.forwardRef(({ className, size = 28, style, isBounce = false, ...props }, ref) => {
+    const { controls, iconProps } = useAnimatedIcon.useAnimatedIcon(ref, props);
+    return (jsxRuntime.jsx("div", { className: cn.cn('inline-block', className), style: { width: size, height: size, ...style }, ...iconProps, children: jsxRuntime.jsx(framerMotion.motion.svg, { "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "100%", height: "100%", variants: isBounce ? bounceVariant : undefined, animate: isBounce ? controls : undefined, initial: isBounce ? 'normal' : undefined, children: paths.map((d, i) => (jsxRuntime.jsx(framerMotion.motion.path, { d: d, variants: isBounce ? bouncePathVariants : lineVariants, initial: isBounce ? 'hidden' : 'normal', animate: isBounce ? 'visible' : controls, custom: i }, i))) }) }));
+});
+AArrowDown.displayName = 'AArrowDown';
+
+exports.AArrowDown = AArrowDown;
+//# sourceMappingURL=AArrowDown.js.map

package/dist/cjs/icons/a/AArrowDown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AArrowDown.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/icons/a/AArrowUp.js

@@ -0,0 +1,73 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var framerMotion = require('framer-motion');
+var React = require('react');
+var cn = require('../../lib/cn.js');
+var useAnimatedIcon = require('../../lib/use-animated-icon.js');
+
+const bounceVariant = {
+    normal: {
+        scale: 1,
+        transition: {
+            type: 'spring',
+            stiffness: 200,
+            damping: 15,
+        },
+    },
+    animate: {
+        scale: 1.2,
+        transition: {
+            type: 'spring',
+            stiffness: 300,
+            damping: 10,
+        },
+    },
+};
+const lineVariants = {
+    normal: {
+        opacity: 1,
+        pathLength: 1,
+        pathOffset: 0,
+        transition: {
+            duration: 0.4,
+            opacity: { duration: 0.1 },
+        },
+    },
+    animate: {
+        opacity: [0, 1],
+        pathLength: [0, 1],
+        pathOffset: [1, 0],
+        transition: {
+            duration: 0.6,
+            ease: 'easeInOut',
+            opacity: { duration: 0.1 },
+        },
+    },
+};
+const bouncePathVariants = {
+    hidden: {
+        pathLength: 0,
+        opacity: 0,
+    },
+    visible: (i) => ({
+        pathLength: 1,
+        opacity: 1,
+        transition: {
+            pathLength: { delay: i * 0.1, duration: 0.4, ease: 'easeInOut' },
+            opacity: { delay: i * 0.1, duration: 0.2 },
+        },
+    }),
+};
+const paths = ['M3.5 13h6', 'm2 16 4.5-9 4.5 9', 'M18 16V7', 'm22 12-4-4-4 4'];
+const AArrowUp = React.forwardRef(({ className, size = 28, style, isBounce = false, ...props }, ref) => {
+    const { controls, iconProps } = useAnimatedIcon.useAnimatedIcon(ref, props);
+    return (jsxRuntime.jsx("div", { className: cn.cn('inline-block', className), style: { width: size, height: size, ...style }, ...iconProps, children: jsxRuntime.jsx(framerMotion.motion.svg, { "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "100%", height: "100%", variants: isBounce ? bounceVariant : undefined, animate: isBounce ? controls : undefined, initial: isBounce ? 'normal' : undefined, children: paths.map((d, i) => (jsxRuntime.jsx(framerMotion.motion.path, { d: d, variants: isBounce ? bouncePathVariants : lineVariants, initial: isBounce ? 'hidden' : 'normal', animate: isBounce ? 'visible' : controls, custom: i }, i))) }) }));
+});
+AArrowUp.displayName = 'AArrowUp';
+
+exports.AArrowUp = AArrowUp;
+//# sourceMappingURL=AArrowUp.js.map

package/dist/cjs/icons/a/AArrowUp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AArrowUp.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/icons/a/Accessibility.js

@@ -0,0 +1,61 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var framerMotion = require('framer-motion');
+var React = require('react');
+var cn = require('../../lib/cn.js');
+var useAnimatedIcon = require('../../lib/use-animated-icon.js');
+
+const circleVariants = {
+    normal: {
+        scale: 1,
+        opacity: 1,
+        transition: { duration: 0.4 },
+    },
+    animate: {
+        scale: [1, 1.2, 1],
+        opacity: [1, 0.8, 1],
+        transition: {
+            duration: 0.6,
+            times: [0, 0.5, 1],
+            ease: 'easeInOut',
+        },
+    },
+};
+const pathVariants = {
+    normal: {
+        opacity: 1,
+        pathLength: 1,
+        pathOffset: 0,
+        transition: {
+            duration: 0.4,
+            opacity: { duration: 0.1 },
+        },
+    },
+    animate: {
+        opacity: [0, 1],
+        pathLength: [0, 1],
+        pathOffset: [1, 0],
+        transition: {
+            duration: 0.6,
+            ease: 'linear',
+            opacity: { duration: 0.1 },
+        },
+    },
+};
+const Accessibility = React.forwardRef(({ className, size = 28, style, ...props }, ref) => {
+    const { controls, iconProps } = useAnimatedIcon.useAnimatedIcon(ref, props);
+    return (jsxRuntime.jsx("div", { className: cn.cn('rounded-md', className), style: {
+            width: size,
+            height: size,
+            display: 'inline-block',
+            ...style,
+        }, ...iconProps, children: jsxRuntime.jsxs("svg", { "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "100%", height: "100%", children: [jsxRuntime.jsx(framerMotion.motion.circle, { cx: "16", cy: "4", r: "1", variants: circleVariants, animate: controls, initial: "normal" }), jsxRuntime.jsx(framerMotion.motion.path, { d: "m18 19 1-7-6 1", variants: pathVariants, animate: controls, initial: "normal", style: { strokeDasharray: 1 } }), jsxRuntime.jsx(framerMotion.motion.path, { d: "m5 8 3-3 5.5 3-2.36 3.5", variants: pathVariants, animate: controls, initial: "normal", style: { strokeDasharray: 1 } }), jsxRuntime.jsx(framerMotion.motion.path, { d: "M4.24 14.5a5 5 0 0 0 6.88 6", variants: pathVariants, animate: controls, initial: "normal", style: { strokeDasharray: 1 } }), jsxRuntime.jsx(framerMotion.motion.path, { d: "M13.76 17.5a5 5 0 0 0-6.88-6", variants: pathVariants, animate: controls, initial: "normal", style: { strokeDasharray: 1 } })] }) }));
+});
+Accessibility.displayName = 'Accessibility';
+
+exports.Accessibility = Accessibility;
+//# sourceMappingURL=Accessibility.js.map

package/dist/cjs/icons/a/Accessibility.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accessibility.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/icons/a/Activity.js

@@ -0,0 +1,45 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var framerMotion = require('framer-motion');
+var React = require('react');
+var cn = require('../../lib/cn.js');
+var useAnimatedIcon = require('../../lib/use-animated-icon.js');
+
+const pathVariants = {
+    normal: {
+        opacity: 1,
+        pathLength: 1,
+        pathOffset: 0,
+        transition: {
+            duration: 0.4,
+            opacity: { duration: 0.1 },
+        },
+    },
+    animate: {
+        opacity: [0, 1],
+        pathLength: [0, 1],
+        pathOffset: [1, 0],
+        transition: {
+            duration: 0.6,
+            ease: 'linear',
+            opacity: { duration: 0.1 },
+        },
+    },
+};
+const Activity = React.forwardRef(({ className, size = 28, style, ...props }, ref) => {
+    const { controls, iconProps } = useAnimatedIcon.useAnimatedIcon(ref, props);
+    return (jsxRuntime.jsx("div", { className: cn.cn('rounded-md', className), style: {
+            width: size,
+            height: size,
+            display: 'inline-block',
+            ...style,
+        }, ...iconProps, children: jsxRuntime.jsx("svg", { "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "100%", height: "100%", children: jsxRuntime.jsx(framerMotion.motion.path, { d: "M17 12h-2l-2 5-2-10-2 5H7", variants: pathVariants, animate: controls, initial: "normal", style: { strokeDasharray: 1 } }) }) }));
+});
+Activity.displayName = 'Activity';
+
+exports.Activity = Activity;
+//# sourceMappingURL=Activity.js.map