nfx-ui 0.17.0 → 0.22.0

package/README.md

@@ -1,323 +1,119 @@
 # NFX-UI — Unified Frontend UI Library
 
-**NFX-UI** is the shared frontend UI library of the NebulaForgeX ecosystem. It provides React components, design tokens, theme system, layout primitives, i18n, and utilities for a consistent look and behavior across NFX Console and other applications. Built with **React 18/19**, **TypeScript**, and **Vite** (library mode), NFX-UI is distributed as ESM/CJS with inlined styles and full type definitions—no separate CSS import required.
+**NFX-UI 1.0** is the shared frontend UI library of the NebulaForgeX ecosystem. Chrome follows **CityPulso PulsoLink-Package** (Radix Themes + `react-pro-sidebar`). Hosts compose Radix primitives themselves; NFX-UI ships theme, language, layout, modal, and preference chrome.
 
-<div align="center">
-  <img src="https://github.com/NebulaForgeX/NFX-UI/raw/main/docs/image1.png" alt="NFX-UI Logo" width="200">
-</div>
+**NFX-UI 1.0** 是 NebulaForgeX 的共享前端 UI 库。壳层对齐 **CityPulso PulsoLink-Package**（Radix Themes + `react-pro-sidebar`）。宿主自己组合 Radix 原语；NFX-UI 提供主题、语言、布局、模态框与偏好设置壳。
 
----
-
-## How to use in your app
-
-### 1. Install
-
-- **Option A:** After publishing to npm, run `npm install nfx-ui` in your app.
-- **Option B:** When unpublished, run `npm run build` and `npm link` in NFX-UI, then `npm link nfx-ui` in your app.
-- If your environment requires a script (e.g. `source /volume1/use-menv.sh`) before npm, run it first.
-
-```bash
-# Option A (in your app)
-npm install nfx-ui
-
-# Option B
-# Step 1: in NFX-UI repo
-cd /path/to/NFX-UI
-npm run link
-
-# Step 2: in your app
-cd /path/to/your-app
-npm link nfx-ui
-```
-
-### 2. Peer dependencies
-
-Your project must have `react` and `react-dom` (^18.0.0 or ^19.0.0). For themes, charts, etc., you may need `lucide-react`, `recharts`, `@tanstack/react-query`, `zustand` (see NFX-UI `package.json` peerDependencies).
-
-### 3. Usage
-
-Use **subpath imports**; no separate CSS import. Components have typed props; use `import type { ... } from "nfx-ui/..."` for types; styles are inlined.
-
-```tsx
-import { ThemeProvider } from "nfx-ui/themes";
-import { LanguageProvider } from "nfx-ui/languages";
-import { LayoutProvider } from "nfx-ui/layouts";
-import { Button, Input } from "nfx-ui/components";
-import type { LanguageEnum } from "nfx-ui/languages";
-import type { ApiErrorBody } from "nfx-ui/types";
-
-export function App() {
-  return (
-    <ThemeProvider defaultTheme="default">
-      <LanguageProvider>
-        <LayoutProvider>
-          <Button>Confirm</Button>
-          <Input placeholder="Enter" />
-        </LayoutProvider>
-      </LanguageProvider>
-    </ThemeProvider>
-  );
-}
-```
-
-### 4. Full steps in another project
+Hosts: Identity, Vault, Documentation, Storages. Not LSR / PQTTEC / SJGZ.
 
-1. **Environment:** If required, run `source /volume1/use-menv.sh` (or your local equivalent) before any npm commands.
-2. **Install or link:** Published: `npm install nfx-ui`. Unpublished: run `npm run link` in NFX-UI, then `npm link nfx-ui` in this project.
-3. **Peer deps:** Ensure `react` and `react-dom` (v18 or v19) are in your project.
-4. **Optional runtime deps:** When using themes, icons, charts, etc., install `lucide-react`, `@tanstack/react-query`, `recharts`, `zustand` in your app (versions compatible with NFX-UI’s `package.json`).
-5. **Wrap with Providers:** Wrap your root with `ThemeProvider`, `LanguageProvider`, `LayoutProvider`, etc. (see code above).
-6. **Import by subpath:** `import { Button } from "nfx-ui/components"`, `import { useTheme } from "nfx-ui/themes"`, etc.; use `import type { ... } from "nfx-ui/types"` for types.
-7. **Build & run:** Use your usual scripts (`npm run dev` / `npm run build`); the bundler will resolve nfx-ui and tree-shake unused exports.
+宿主：Identity、Vault、Documentation、Storages。不含 LSR / PQTTEC / SJGZ。
 
 ---
 
-## What’s included
-
-Main modules and contents below; full component and API docs: [docs/](./docs/).
-
-| Module        | Contents |
-|---------------|----------|
-| **themes**    | ThemeProvider, useTheme, theme vars |
-| **languages** | LanguageProvider, i18n, useLanguageLabel, useThemeLabel |
-| **layouts**   | LayoutProvider, Sidebar, Header, Footer, Background |
-| **components**| Button, Input, Dropdown, Slider, VirtualList, SlideDownSwitcher, etc. |
-| **animations**| WaveBackground, ECGLoading, TruckLoading, BounceLoading, etc. |
-| **hooks**     | makeUnifiedQuery, makeUnifiedInfiniteQuery |
-| **preference**| User preference (e.g. profile.preference) |
-| **types**     | Shared TypeScript types |
-| **utils**     | getApiErrorMessage, formatDisplayDate, retry, etc. |
-| **constants** | Query key factories, defineEnum |
-
----
-
-## Development (this repo)
-
-### Setup
-
-This repo is library-only: no dev server or demo; test via `npm link` in a real app. Run `npm install` after clone.
-
-```bash
-npm install
-```
-
-### Build
-
-Run `npm run build`. Output in `dist/`: ESM (`.mjs`), CJS (`.cjs`), and `.d.ts`; styles inlined.
-
-```bash
-npm run build
-```
-
-### Build messages and warnings
-
-You may see these during build; both are safe to ignore:
-1. **TypeScript version:** vite-plugin-dts uses an older TS in API Extractor; the “consider upgrading API Extractor” message does not affect type output.
-2. **PLUGIN_TIMINGS:** Plugin timing breakdown; informational only.
-
-### Test locally (npm link)
-
-1. In NFX-UI: `npm run link`.
-2. In your app: `npm link nfx-ui`.
-3. After changing NFX-UI, run `npm run build` in NFX-UI again.
-
-### Lint & format
-
-`npm run lint` for ESLint; `npm run lint:code-format` for Prettier check; `npm run format` for Prettier write.
-
-```bash
-npm run lint
-npm run lint:code-format
-npm run format
-```
+## Install / 安装
 
----
-
-## Project structure
+Host apps use the local package:
 
-`src/` contains entry and modules; path alias `@/` (points to `src/`) is used in this repo.
+宿主使用本地包：
 
+```json
+"nfx-ui": "file:../../NFX-UI"
 ```
-src/
-├── designs/       # layouts, components, animations
-├── languages/      # i18n, LanguageProvider, useLanguageLabel, etc.
-├── themes/         # ThemeProvider, useTheme, theme data
-├── hooks/          # makeUnifiedQuery, makeUnifiedInfiniteQuery
-├── preference/     # User preference
-├── types/          # Shared types
-├── utils/          # Helpers
-├── constants/      # Query keys, enums
-├── stores/         # Zustand stores
-├── events/         # EventEmitter
-├── apis/           # API path helpers
-└── ...
-```
-
----
-
-## License
-
-[MIT](LICENSE) — see [LICENSE](LICENSE) for details.
-
----
 
----
+Peer versions follow PulsoLink-WEB (do not `ncu` past them independently):
 
-# NFX-UI — 统一前端 UI 库
+对等依赖版本对齐 PulsoLink-WEB（不要单独 `ncu` 越过）：
 
-**NFX-UI** 是 NebulaForgeX 生态的统一前端 UI 库，提供 React 组件、设计令牌、主题系统、布局基元、多语言与工具函数，为 NFX 控制台及其他应用提供一致的外观与交互。基于 **React 18/19**、**TypeScript** 与 **Vite**（库模式）构建，以 ESM/CJS 发布，样式内联、类型完整，使用方无需单独引入 CSS。
+- `react` / `react-dom` `^19.2.8`
+- `react-router` `^8.3.1` (not `react-router-dom`)
+- `@radix-ui/themes` `^3.3.0`, `radix-ui` `^1.6.7`, `@radix-ui/react-icons` `^1.3.2`
+- `lucide-react` `^1.41.0`
+- `vite` `^8.2.2`, `typescript` `~6.0.3`
 
 ---
 
-## 外部项目如何使用
-
-### 1. 安装
-
-- **方式 A**：发布到 npm 后，在业务项目中执行 `npm install nfx-ui`。
-- **方式 B**：未发布时，在 NFX-UI 目录执行 `npm run build` 与 `npm link`，在业务项目目录执行 `npm link nfx-ui`。
-- 若本机约定先加载环境（如 `source /volume1/use-menv.sh`），请在执行任何 npm 命令前先执行。
-
-```bash
-# 方式 A（在业务项目）
-npm install nfx-ui
-
-# 方式 B
-# 步骤 1：在 NFX-UI 仓库
-cd /path/to/NFX-UI
-npm run link
-
-# 步骤 2：在要使用 NFX-UI 的项目
-cd /path/to/your-app
-npm link nfx-ui
-```
-
-### 2. 依赖要求
-
-你的项目需已安装 `react`、`react-dom`（^18.0.0 或 ^19.0.0）。若使用主题、图表等，可能还需按需安装 `lucide-react`、`recharts`、`@tanstack/react-query`、`zustand` 等（见 NFX-UI 的 `package.json` peerDependencies）。
-
-### 3. 在代码里使用
-
-使用**子路径导入**，无需单独引入 CSS。组件直接使用即有 props 类型提示；类型通过 `import type { ... } from "nfx-ui/..."` 获取；样式已内联。
+## Host bootstrap / 宿主接入
 
 ```tsx
-import { ThemeProvider } from "nfx-ui/themes";
-import { LanguageProvider } from "nfx-ui/languages";
-import { LayoutProvider } from "nfx-ui/layouts";
-import { Button, Input } from "nfx-ui/components";
-import type { LanguageEnum } from "nfx-ui/languages";
-import type { ApiErrorBody } from "nfx-ui/types";
+import { LanguageEnum } from "nfx-ui/enums";
+import { LanguageProvider, ThemeProvider, ModalProvider } from "nfx-ui/providers";
+import { LayoutFrame, LayoutProvider, Sidebar, Header, Main, PageFrame } from "nfx-ui/layouts";
+import { PreferencesPopover, ThemeSettings, PageHeader, EmptyState } from "nfx-ui/components";
+import { usePreferenceStore } from "nfx-ui/stores";
+import { configurePreferenceSync, useSyncPreference, useApplyPreferenceOnLoad } from "nfx-ui/hooks";
+import { showInfo, showError, showSuccess, showConfirm } from "nfx-ui/stores";
+import "@radix-ui/themes/styles.css";
+import "nfx-ui/themes/fonts";
+import "nfx-ui/themes/styles.css";
 
 export function App() {
   return (
-    <ThemeProvider defaultTheme="default">
-      <LanguageProvider>
+    <LanguageProvider getBuiltinBundles={getBuiltinI18nBundles}>
+      <ThemeProvider>
         <LayoutProvider>
-          <Button>确定</Button>
-          <Input placeholder="请输入" />
+          <ModalProvider>
+            <LayoutFrame items={menuItems}>{/* pages */}</LayoutFrame>
+          </ModalProvider>
         </LayoutProvider>
-      </LanguageProvider>
-    </ThemeProvider>
+      </ThemeProvider>
+    </LanguageProvider>
   );
 }
 ```
 
-### 4. 其他项目中的完整步骤示例
-
-在「别的项目」里从零用上 NFX-UI 的推荐顺序：
+- `ThemeProvider` does **not** take `defaultTheme`. Theme lives on preference: `{ accent, gray, appearance, radius, scaling, panelBackground, fontFamily }`.
+- `ThemeProvider` **不再**接收 `defaultTheme`。主题在 preference 的 theme 对象上。
+- Fonts: import `"nfx-ui/themes/fonts"` (source, not bundled into every lib entry).
+- 字体：`"nfx-ui/themes/fonts"`（源码入口，不要打进每个 lib chunk）。
+- Page chrome: `PageFrame` + `PageHeader` (`icon` is required) + Radix `Card` / `Flex` / `Button` / `TextField`.
+- 页面壳：`PageFrame` + `PageHeader`（必须有 `icon`）+ Radix 原语。
+- Auth screens copy PulsoLink `AuthShell`. Theme/language UI is `PreferencesPopover` / `ThemeSettings`.
+- 登录页拷 PulsoLink `AuthShell`。主题/语言用 `PreferencesPopover` / `ThemeSettings`。
+- Queries: `useUnifiedQuery` / `useUnifiedInfiniteQuery` from `nfx-ui/hooks` (or `nfx-ui/utils`). Pages never call axios.
 
-1. **确保环境**：若团队要求，先执行 `source /volume1/use-menv.sh`（或你本机的等价命令）。
-2. **安装或链接**：已发布：`npm install nfx-ui`。未发布：在 NFX-UI 里执行 `npm run link`，再在本项目执行 `npm link nfx-ui`。
-3. **确认 peer**：项目里已有 `react`、`react-dom`（版本 18 或 19）。
-4. **按需装运行时依赖**：用到主题/图标/图表等时，在业务项目安装 `lucide-react`、`@tanstack/react-query`、`recharts`、`zustand` 等（与 NFX-UI 的 `package.json` 一致或兼容）。
-5. **在入口外包一层 Provider**：在根组件外包上 `ThemeProvider`、`LanguageProvider`、`LayoutProvider` 等（见上面代码）。
-6. **按子路径引入**：`import { Button } from "nfx-ui/components"`，`import { useTheme } from "nfx-ui/themes"` 等；类型用 `import type { ... } from "nfx-ui/types"`。
-7. **构建与运行**：按你项目原有方式（如 `npm run dev` / `npm run build`）即可，打包器会从 nfx-ui 解析并做 tree-shaking。
+```tsx
+import { Button, TextField, Flex, Card } from "@radix-ui/themes";
+```
 
 ---
 
-## 包含模块
+## Modules / 模块
 
-下表为包内主要模块与内容；完整组件与 API 见 [docs/](./docs/)。
+| Module | Contents |
+|--------|----------|
+| **enums** | Language, appearance, accent, radius, dashboard background |
+| **providers** | ThemeProvider, LanguageProvider, ModalProvider |
+| **themes** | Radix mappings, fonts, CSS |
+| **languages** | i18n init, createI18nResources, labels |
+| **layouts** | LayoutFrame, Sidebar (`react-pro-sidebar`), Header, Main, PageFrame, UserTopBar |
+| **components** | PreferencesPopover, ThemeSettings, PageHeader, EmptyState, LucideIcon, Logo, VirtualList + Radix re-exports |
+| **stores** | preference + modal (`showInfo` / `showSuccess` / `showError` / `showConfirm` / `showLoading`) |
+| **hooks** | useUnifiedQuery, useSyncPreference, useApplyPreferenceOnLoad, configurePreferenceSync |
+| **animations** | WaveBackground, ECGLoading, TruckLoading, … |
+| **types / utils / constants** | Shared types and helpers |
 
-| 模块         | 内容 |
-|--------------|------|
-| **themes**   | ThemeProvider、useTheme、主题变量 |
-| **languages**| LanguageProvider、i18n、useLanguageLabel、useThemeLabel |
-| **layouts**  | LayoutProvider、Sidebar、Header、Footer、Background |
-| **components** | Button、Input、Dropdown、Slider、VirtualList、SlideDownSwitcher 等 |
-| **animations** | WaveBackground、ECGLoading、TruckLoading、BounceLoading 等 |
-| **hooks**    | makeUnifiedQuery、makeUnifiedInfiniteQuery |
-| **preference** | 用户偏好（如 profile.preference） |
-| **types**    | 共享 TypeScript 类型 |
-| **utils**    | getApiErrorMessage、formatDisplayDate、retry 等 |
-| **constants**| Query key 工厂、defineEnum 等 |
+`useTheme().setTheme` takes `Partial<ResolvedThemePreference>`. Preference persist key is `nfx-preference`.
 
 ---
 
-## 本仓库开发
+## Development / 开发
 
-### 安装依赖
+This repo is library-only. Build with `npm run build`. Output in `dist/`. Font CSS must not be injected into every lib entry.
 
-本仓库为纯库，无 dev 服务器或 demo，需在真实应用中通过 `npm link` 测试。克隆后执行 `npm install` 安装依赖。
+本仓库仅库模式。`npm run build` 输出到 `dist/`。字体 CSS 不得注入每个入口。
 
 ```bash
 npm install
-```
-
-### 构建
-
-执行 `npm run build`，产物在 `dist/`：ESM（.mjs）、CJS（.cjs）、类型（.d.ts），样式已内联。
-
-```bash
 npm run build
-```
-
-### 构建时的提示与警告
-
-构建过程中可能出现以下提示，均可忽略，不影响产物：
-1. **TypeScript 版本提示**：vite-plugin-dts 内置的 API Extractor 使用较旧 TS 版本，项目使用 5.9.x 时会提示 “consider upgrading API Extractor”，类型仍会正确生成。
-2. **PLUGIN_TIMINGS**：Vite 输出的插件耗时统计，仅作参考，无需处理。
-
-### 本地联调（npm link）
-
-1. 在 NFX-UI 目录执行 `npm run link`。
-2. 在消费项目中执行 `npm link nfx-ui`。
-3. 修改 NFX-UI 后需在 NFX-UI 目录再次执行 `npm run build` 才能生效。
-
-### 代码检查与格式化
-
-`npm run lint` 运行 ESLint；`npm run lint:code-format` 检查 Prettier；`npm run format` 执行 Prettier 格式化。
-
-```bash
 npm run lint
-npm run lint:code-format
-npm run format
 ```
 
----
-
-## 项目结构
-
-`src/` 下为入口与各模块；本仓库内使用路径别名 `@/`（指向 `src/`）。
+Test via host `file:../../NFX-UI`. Do not modify `Example/` (CityPulso PulsoLink is source of truth only).
 
-```
-src/
-├── designs/       # layouts、components、animations
-├── languages/     # i18n、LanguageProvider、useLanguageLabel 等
-├── themes/        # ThemeProvider、useTheme、主题数据
-├── hooks/         # makeUnifiedQuery、makeUnifiedInfiniteQuery
-├── preference/    # 用户偏好
-├── types/         # 共享类型
-├── utils/         # 工具函数
-├── constants/     # Query keys、枚举等
-├── stores/        # Zustand stores
-├── events/        # EventEmitter
-├── apis/          # API path 等
-└── ...
-```
+用宿主 `file:../../NFX-UI` 验证。不要改 `Example/`（CityPulso PulsoLink 只作对照源）。
 
 ---
 
-## 许可证
+## License
 
-[MIT](LICENSE) — 详见 [LICENSE](LICENSE)。
+[MIT](LICENSE)

package/dist/animations/accessibility-icon.d.ts

@@ -0,0 +1,13 @@
+import { AnimatedIconHandle, AnimatedIconProps, IconEasing } from './types';
+type CustomAnimation = {
+    rotateFrom: number;
+    rotateTo: number;
+    duration: number;
+    ease: IconEasing;
+    personDuration: number;
+    personEase: IconEasing;
+    exitDuration: number;
+};
+declare const AccessibilityIcon: import('react').ForwardRefExoticComponent<AnimatedIconProps & CustomAnimation & import('react').RefAttributes<AnimatedIconHandle>>;
+export default AccessibilityIcon;
+//# sourceMappingURL=accessibility-icon.d.ts.map

package/dist/animations/accessibility-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accessibility-icon.d.ts","sourceRoot":"","sources":["../../src/animations/accessibility-icon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,kBAAkB,EAClB,iBAAiB,EACjB,UAAU,EACX,MAAM,SAAS,CAAC;AAGjB,KAAK,eAAe,GAAG;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,UAAU,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,UAAU,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,QAAA,MAAM,iBAAiB,oIA0FtB,CAAC;AAIF,eAAe,iBAAiB,CAAC"}

package/dist/animations/accessibility-icon.js

@@ -0,0 +1,70 @@
+import { forwardRef as e, useImperativeHandle as t, useRef as n } from "react";
+import { motion as r, useAnimate as i } from "motion/react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/animations/accessibility-icon.tsx
+var s = e(({ size: e = 24, color: s = "currentColor", strokeWidth: c = 2, className: l = "", rotateFrom: u = 0, rotateTo: d = 360, duration: f = 1, ease: p = "easeInOut", personDuration: m = .6, personEase: h = "easeInOut", exitDuration: g = .3 }, _) => {
+	let [v, y] = i(), b = n([]), x = async () => {
+		b.current.forEach((e) => e.stop()), b.current = [], b.current.push(y(".wheel", { rotate: [u, d] }, {
+			duration: f,
+			ease: p,
+			repeat: Infinity
+		})), y(".person", { y: [
+			0,
+			-2,
+			0
+		] }, {
+			duration: m,
+			ease: h
+		});
+	}, S = () => {
+		b.current.forEach((e) => e.stop()), b.current = [], y(".wheel", { rotate: 0 }, { duration: g }), y(".person", { y: 0 }, { duration: g });
+	};
+	return t(_, () => ({
+		startAnimation: x,
+		stopAnimation: S
+	})), /* @__PURE__ */ o(r.svg, {
+		ref: v,
+		onHoverStart: () => {
+			x();
+		},
+		onHoverEnd: () => {
+			S();
+		},
+		xmlns: "http://www.w3.org/2000/svg",
+		width: e,
+		height: e,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: s,
+		strokeWidth: c,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		className: `cursor-pointer ${l} `,
+		children: [
+			/* @__PURE__ */ a(r.circle, {
+				className: "person",
+				cx: "16",
+				cy: "4",
+				r: "1"
+			}),
+			/* @__PURE__ */ a(r.path, {
+				className: "person",
+				d: "m18 19 1-7-6 1"
+			}),
+			/* @__PURE__ */ a(r.path, {
+				className: "person",
+				d: "m5 8 3-3 5.5 3-2.36 3.5"
+			}),
+			/* @__PURE__ */ o(r.g, {
+				className: "wheel",
+				style: { transformOrigin: "8.5px 17.5px" },
+				children: [/* @__PURE__ */ a("path", { d: "M4.24 14.5a5 5 0 0 0 6.88 6" }), /* @__PURE__ */ a("path", { d: "M13.76 17.5a5 5 0 0 0-6.88-6" })]
+			})
+		]
+	});
+});
+s.displayName = "AccessibilityIcon";
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=accessibility-icon.js.map

package/dist/animations/accessibility-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accessibility-icon.js","names":[],"sources":["../../src/animations/accessibility-icon.tsx"],"sourcesContent":["import { forwardRef, useImperativeHandle, useRef } from \"react\";\nimport type {\n  AnimatedIconHandle,\n  AnimatedIconProps,\n  IconEasing,\n} from \"./types\";\nimport { motion, useAnimate } from \"motion/react\";\n\ntype CustomAnimation = {\n  rotateFrom: number;\n  rotateTo: number;\n  duration: number;\n  ease: IconEasing;\n  personDuration: number;\n  personEase: IconEasing;\n  exitDuration: number;\n};\n\nconst AccessibilityIcon = forwardRef<\n  AnimatedIconHandle,\n  AnimatedIconProps & CustomAnimation\n>(\n  (\n    {\n      size = 24,\n      color = \"currentColor\",\n      strokeWidth = 2,\n      className = \"\",\n      rotateFrom = 0,\n      rotateTo = 360,\n      duration = 1,\n      ease = \"easeInOut\",\n      personDuration = 0.6,\n      personEase = \"easeInOut\",\n      exitDuration = 0.3,\n    },\n    ref,\n  ) => {\n    const [scope, animate] = useAnimate();\n    const animationControls = useRef<Array<ReturnType<typeof animate>>>([]);\n\n    const start = async () => {\n      animationControls.current.forEach((control) => control.stop());\n      animationControls.current = [];\n\n      animationControls.current.push(\n        animate(\n          \".wheel\",\n          { rotate: [rotateFrom, rotateTo] },\n          { duration: duration, ease: ease, repeat: Infinity },\n        ),\n      );\n      animate(\n        \".person\",\n        { y: [0, -2, 0] },\n        { duration: personDuration, ease: personEase },\n      );\n    };\n\n    const stop = () => {\n      animationControls.current.forEach((control) => control.stop());\n      animationControls.current = [];\n\n      animate(\".wheel\", { rotate: 0 }, { duration: exitDuration });\n      animate(\".person\", { y: 0 }, { duration: exitDuration });\n    };\n\n    useImperativeHandle(ref, () => {\n      return {\n        startAnimation: start,\n        stopAnimation: stop,\n      };\n    });\n\n    const handleHoverStart = () => {\n      start();\n    };\n\n    const handleHoverEnd = () => {\n      stop();\n    };\n\n    return (\n      <motion.svg\n        ref={scope}\n        onHoverStart={handleHoverStart}\n        onHoverEnd={handleHoverEnd}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width={size}\n        height={size}\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke={color}\n        strokeWidth={strokeWidth}\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className={`cursor-pointer ${className} `}\n      >\n        <motion.circle className=\"person\" cx=\"16\" cy=\"4\" r=\"1\" />\n        <motion.path className=\"person\" d=\"m18 19 1-7-6 1\" />\n        <motion.path className=\"person\" d=\"m5 8 3-3 5.5 3-2.36 3.5\" />\n        <motion.g className=\"wheel\" style={{ transformOrigin: \"8.5px 17.5px\" }}>\n          <path d=\"M4.24 14.5a5 5 0 0 0 6.88 6\" />\n          <path d=\"M13.76 17.5a5 5 0 0 0-6.88-6\" />\n        </motion.g>\n      </motion.svg>\n    );\n  },\n);\n\nAccessibilityIcon.displayName = \"AccessibilityIcon\";\n\nexport default AccessibilityIcon;\n"],"mappings":";;;;AAkBA,IAAM,IAAoB,GAKtB,EACE,UAAO,IACP,WAAQ,gBACR,iBAAc,GACd,eAAY,IACZ,gBAAa,GACb,cAAW,KACX,cAAW,GACX,UAAO,aACP,oBAAiB,IACjB,gBAAa,aACb,kBAAe,MAEjB,MACG;CACH,IAAM,CAAC,GAAO,KAAW,EAAW,GAC9B,IAAoB,EAA0C,CAAC,CAAC,GAEhE,IAAQ,YAAY;EAWxB,AAVA,EAAkB,QAAQ,SAAS,MAAY,EAAQ,KAAK,CAAC,GAC7D,EAAkB,UAAU,CAAC,GAE7B,EAAkB,QAAQ,KACxB,EACE,UACA,EAAE,QAAQ,CAAC,GAAY,CAAQ,EAAE,GACjC;GAAY;GAAgB;GAAM,QAAQ;EAAS,CACrD,CACF,GACA,EACE,WACA,EAAE,GAAG;GAAC;GAAG;GAAI;EAAC,EAAE,GAChB;GAAE,UAAU;GAAgB,MAAM;EAAW,CAC/C;CACF,GAEM,UAAa;EAKjB,AAJA,EAAkB,QAAQ,SAAS,MAAY,EAAQ,KAAK,CAAC,GAC7D,EAAkB,UAAU,CAAC,GAE7B,EAAQ,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,UAAU,EAAa,CAAC,GAC3D,EAAQ,WAAW,EAAE,GAAG,EAAE,GAAG,EAAE,UAAU,EAAa,CAAC;CACzD;CAiBA,OAfA,EAAoB,UACX;EACL,gBAAgB;EAChB,eAAe;CACjB,EACD,GAWC,kBAAC,EAAO,KAAR;EACE,KAAK;EACL,oBAX2B;GAC7B,EAAM;EACR;EAUI,kBARyB;GAC3B,EAAK;EACP;EAOI,OAAM;EACN,OAAO;EACP,QAAQ;EACR,SAAQ;EACR,MAAK;EACL,QAAQ;EACK;EACb,eAAc;EACd,gBAAe;EACf,WAAW,kBAAkB,EAAU;EAbzC,UAAA;GAeE,kBAAC,EAAO,QAAR;IAAe,WAAU;IAAS,IAAG;IAAK,IAAG;IAAI,GAAE;GAAK,CAAA;GACxD,kBAAC,EAAO,MAAR;IAAa,WAAU;IAAS,GAAE;GAAkB,CAAA;GACpD,kBAAC,EAAO,MAAR;IAAa,WAAU;IAAS,GAAE;GAA2B,CAAA;GAC7D,kBAAC,EAAO,GAAR;IAAU,WAAU;IAAQ,OAAO,EAAE,iBAAiB,eAAe;IAArE,UAAA,CACE,kBAAC,QAAD,EAAM,GAAE,8BAA+B,CAAA,GACvC,kBAAC,QAAD,EAAM,GAAE,+BAAgC,CAAA,CAChC;;EACA;;AAEhB,CACF;AAEA,EAAkB,cAAc"}

package/dist/animations/airplane-icon.d.ts

@@ -0,0 +1,9 @@
+import { AnimatedIconHandle, AnimatedIconProps } from './types';
+type CustomAnimation = {
+    airPlaneDuration: number;
+    windDuration: number;
+    exitDuration: number;
+};
+declare const AirplaneIcon: import('react').ForwardRefExoticComponent<AnimatedIconProps & CustomAnimation & import('react').RefAttributes<AnimatedIconHandle>>;
+export default AirplaneIcon;
+//# sourceMappingURL=airplane-icon.d.ts.map

package/dist/animations/airplane-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"airplane-icon.d.ts","sourceRoot":"","sources":["../../src/animations/airplane-icon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAGrE,KAAK,eAAe,GAAG;IACrB,gBAAgB,EAAE,MAAM,CAAC;IACzB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,QAAA,MAAM,YAAY,oIA0GjB,CAAC;AAGF,eAAe,YAAY,CAAC"}

package/dist/animations/airplane-icon.js

@@ -0,0 +1,99 @@
+import { forwardRef as e, useCallback as t, useImperativeHandle as n } from "react";
+import { motion as r, useAnimate as i } from "motion/react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/animations/airplane-icon.tsx
+var s = e(({ size: e = 24, color: s = "currentColor", strokeWidth: c = 2, className: l = "", airPlaneDuration: u = .3, windDuration: d = .8, exitDuration: f = .3 }, p) => {
+	let [m, h] = i(), g = t(async () => {
+		h(".airplane", {
+			x: [
+				0,
+				.5,
+				0
+			],
+			y: [
+				0,
+				-.5,
+				0
+			]
+		}, { duration: u }), h(".wind1", {
+			x: -12,
+			y: 24,
+			opacity: 1
+		}, {
+			duration: d,
+			ease: "easeOut"
+		}), h(".wind2", {
+			x: 0,
+			y: 26,
+			opacity: 1
+		}, {
+			duration: d,
+			ease: "easeOut",
+			delay: .2
+		});
+	}, [
+		h,
+		u,
+		d
+	]), _ = t(async () => {
+		h(".airplane", {
+			x: 0,
+			y: 0
+		}, { duration: f }), h(".wind1", {
+			opacity: 0,
+			x: 12,
+			y: -4
+		}, { duration: f }), h(".wind2", {
+			opacity: 0,
+			x: 26,
+			y: 8
+		}, { duration: f });
+	}, [h, f]);
+	return n(p, () => ({
+		startAnimation: g,
+		stopAnimation: _
+	}), [g, _]), /* @__PURE__ */ o(r.svg, {
+		ref: m,
+		xmlns: "http://www.w3.org/2000/svg",
+		width: e,
+		height: e,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: s,
+		strokeWidth: c,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		className: `cursor-pointer ${l}`,
+		onHoverStart: g,
+		onHoverEnd: _,
+		children: [
+			/* @__PURE__ */ a(r.path, {
+				className: "airplane",
+				d: "M13.617 1.53c.926-.747 1.964-.793 3.097-.777.587.009.88.013 1.115.104.373.145.67.442.815.815.09.235.095.528.104 1.115.016 1.133-.03 2.17-.778 3.097-.63.78-1.714 1.188-2.235 2.05-.398.656-.213 1.337-.042 2.038l1.28 5.245c.255 1.046.06 1.715-.67 2.446-.39.39-.713.37-1.028-.133l-3.862-6.154-1.845 1.466c-.67.532-1.003.798-1.18 1.172-.41.876-.15 2.192-.136 3.142.008.525-.446 1.56-1.088 1.594-.396.022-.531-.452-.66-.743l-1.232-2.802c-.294-.67-.306-.682-.976-.976l-2.802-1.233c-.29-.128-.765-.263-.743-.66.035-.641 1.07-1.095 1.594-1.087.95.013 2.266.274 3.142-.137.374-.176.64-.51 1.172-1.18l1.466-1.844L1.97 4.226c-.503-.316-.522-.64-.133-1.028.73-.73 1.4-.925 2.446-.67l5.245 1.28c.7.17 1.382.356 2.039-.042.86-.52 1.269-1.604 2.049-2.235"
+			}),
+			/* @__PURE__ */ a(r.path, {
+				className: "wind1",
+				initial: {
+					opacity: 0,
+					x: 10,
+					y: -6
+				},
+				d: "m.5 3.5 3-3"
+			}),
+			/* @__PURE__ */ a(r.path, {
+				className: "wind2",
+				initial: {
+					opacity: 0,
+					x: 26,
+					y: 8
+				},
+				d: "m.5 3.5 3-3"
+			})
+		]
+	});
+});
+s.displayName = "AirplaneIcon";
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=airplane-icon.js.map

package/dist/animations/airplane-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"airplane-icon.js","names":[],"sources":["../../src/animations/airplane-icon.tsx"],"sourcesContent":["import { forwardRef, useImperativeHandle, useCallback } from \"react\";\nimport type { AnimatedIconHandle, AnimatedIconProps } from \"./types\";\nimport { motion, useAnimate } from \"motion/react\";\n\ntype CustomAnimation = {\n  airPlaneDuration: number;\n  windDuration: number;\n  exitDuration: number;\n};\n\nconst AirplaneIcon = forwardRef<\n  AnimatedIconHandle,\n  AnimatedIconProps & CustomAnimation\n>(\n  (\n    {\n      size = 24,\n      color = \"currentColor\",\n      strokeWidth = 2,\n      className = \"\",\n      airPlaneDuration = 0.3,\n      windDuration = 0.8,\n      exitDuration = 0.3,\n    },\n    ref,\n  ) => {\n    const [scope, animate] = useAnimate();\n\n    const start = useCallback(async () => {\n      // Subtle vibration for the plane\n      animate(\n        \".airplane\",\n        { x: [0, 0.5, 0], y: [0, -0.5, 0] },\n        { duration: airPlaneDuration },\n      );\n\n      // Streak 1: Upper Wing (Top-right streak)\n      animate(\n        \".wind1\",\n        {\n          x: -12,\n          y: 24,\n          opacity: 1,\n        },\n        { duration: windDuration, ease: \"easeOut\" },\n      );\n\n      // Streak 2: Lower Wing (Middle-left streak)\n      animate(\n        \".wind2\",\n        {\n          x: 0,\n          y: 26,\n          opacity: 1,\n        },\n        { duration: windDuration, ease: \"easeOut\", delay: 0.2 },\n      );\n    }, [animate, airPlaneDuration, windDuration]);\n\n    const stop = useCallback(async () => {\n      animate(\".airplane\", { x: 0, y: 0 }, { duration: exitDuration });\n      animate(\n        \".wind1\",\n        { opacity: 0, x: 12, y: -4 },\n        { duration: exitDuration },\n      );\n      animate(\n        \".wind2\",\n        { opacity: 0, x: 26, y: 8 },\n        { duration: exitDuration },\n      );\n    }, [animate, exitDuration]);\n\n    useImperativeHandle(\n      ref,\n      () => ({\n        startAnimation: start,\n        stopAnimation: stop,\n      }),\n      [start, stop],\n    );\n\n    return (\n      <motion.svg\n        ref={scope}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width={size}\n        height={size}\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke={color}\n        strokeWidth={strokeWidth}\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className={`cursor-pointer ${className}`}\n        onHoverStart={start}\n        onHoverEnd={stop}\n      >\n        <motion.path\n          className=\"airplane\"\n          d=\"M13.617 1.53c.926-.747 1.964-.793 3.097-.777.587.009.88.013 1.115.104.373.145.67.442.815.815.09.235.095.528.104 1.115.016 1.133-.03 2.17-.778 3.097-.63.78-1.714 1.188-2.235 2.05-.398.656-.213 1.337-.042 2.038l1.28 5.245c.255 1.046.06 1.715-.67 2.446-.39.39-.713.37-1.028-.133l-3.862-6.154-1.845 1.466c-.67.532-1.003.798-1.18 1.172-.41.876-.15 2.192-.136 3.142.008.525-.446 1.56-1.088 1.594-.396.022-.531-.452-.66-.743l-1.232-2.802c-.294-.67-.306-.682-.976-.976l-2.802-1.233c-.29-.128-.765-.263-.743-.66.035-.641 1.07-1.095 1.594-1.087.95.013 2.266.274 3.142-.137.374-.176.64-.51 1.172-1.18l1.466-1.844L1.97 4.226c-.503-.316-.522-.64-.133-1.028.73-.73 1.4-.925 2.446-.67l5.245 1.28c.7.17 1.382.356 2.039-.042.86-.52 1.269-1.604 2.049-2.235\"\n        />\n\n        <motion.path\n          className=\"wind1\"\n          initial={{ opacity: 0, x: 10, y: -6 }}\n          d=\"m.5 3.5 3-3\"\n        ></motion.path>\n        <motion.path\n          className=\"wind2\"\n          initial={{ opacity: 0, x: 26, y: 8 }}\n          d=\"m.5 3.5 3-3\"\n        ></motion.path>\n      </motion.svg>\n    );\n  },\n);\n\nAirplaneIcon.displayName = \"AirplaneIcon\";\nexport default AirplaneIcon;\n"],"mappings":";;;;AAUA,IAAM,IAAe,GAKjB,EACE,UAAO,IACP,WAAQ,gBACR,iBAAc,GACd,eAAY,IACZ,sBAAmB,IACnB,kBAAe,IACf,kBAAe,MAEjB,MACG;CACH,IAAM,CAAC,GAAO,KAAW,EAAW,GAE9B,IAAQ,EAAY,YAAY;EAoBpC,AAlBA,EACE,aACA;GAAE,GAAG;IAAC;IAAG;IAAK;GAAC;GAAG,GAAG;IAAC;IAAG;IAAM;GAAC;EAAE,GAClC,EAAE,UAAU,EAAiB,CAC/B,GAGA,EACE,UACA;GACE,GAAG;GACH,GAAG;GACH,SAAS;EACX,GACA;GAAE,UAAU;GAAc,MAAM;EAAU,CAC5C,GAGA,EACE,UACA;GACE,GAAG;GACH,GAAG;GACH,SAAS;EACX,GACA;GAAE,UAAU;GAAc,MAAM;GAAW,OAAO;EAAI,CACxD;CACF,GAAG;EAAC;EAAS;EAAkB;CAAY,CAAC,GAEtC,IAAO,EAAY,YAAY;EAOnC,AANA,EAAQ,aAAa;GAAE,GAAG;GAAG,GAAG;EAAE,GAAG,EAAE,UAAU,EAAa,CAAC,GAC/D,EACE,UACA;GAAE,SAAS;GAAG,GAAG;GAAI,GAAG;EAAG,GAC3B,EAAE,UAAU,EAAa,CAC3B,GACA,EACE,UACA;GAAE,SAAS;GAAG,GAAG;GAAI,GAAG;EAAE,GAC1B,EAAE,UAAU,EAAa,CAC3B;CACF,GAAG,CAAC,GAAS,CAAY,CAAC;CAW1B,OATA,EACE,UACO;EACL,gBAAgB;EAChB,eAAe;CACjB,IACA,CAAC,GAAO,CAAI,CACd,GAGE,kBAAC,EAAO,KAAR;EACE,KAAK;EACL,OAAM;EACN,OAAO;EACP,QAAQ;EACR,SAAQ;EACR,MAAK;EACL,QAAQ;EACK;EACb,eAAc;EACd,gBAAe;EACf,WAAW,kBAAkB;EAC7B,cAAc;EACd,YAAY;EAbd,UAAA;GAeE,kBAAC,EAAO,MAAR;IACE,WAAU;IACV,GAAE;GACH,CAAA;GAED,kBAAC,EAAO,MAAR;IACE,WAAU;IACV,SAAS;KAAE,SAAS;KAAG,GAAG;KAAI,GAAG;IAAG;IACpC,GAAE;GACU,CAAA;GACd,kBAAC,EAAO,MAAR;IACE,WAAU;IACV,SAAS;KAAE,SAAS;KAAG,GAAG;KAAI,GAAG;IAAE;IACnC,GAAE;GACU,CAAA;EACJ;;AAEhB,CACF;AAEA,EAAa,cAAc"}

package/dist/animations/alarm-clock-plus-icon.d.ts

@@ -0,0 +1,11 @@
+import { AnimatedIconHandle, AnimatedIconProps, IconEasing } from './types';
+type CustomStyleProps = {
+    stiffness?: number;
+    damping?: number;
+    durationY?: number;
+    durationX?: number;
+    ease?: IconEasing;
+};
+declare const AlarmClockPlusIcon: import('react').ForwardRefExoticComponent<AnimatedIconProps & CustomStyleProps & import('react').RefAttributes<AnimatedIconHandle>>;
+export default AlarmClockPlusIcon;
+//# sourceMappingURL=alarm-clock-plus-icon.d.ts.map

package/dist/animations/alarm-clock-plus-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alarm-clock-plus-icon.d.ts","sourceRoot":"","sources":["../../src/animations/alarm-clock-plus-icon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,kBAAkB,EAClB,iBAAiB,EACjB,UAAU,EACX,MAAM,SAAS,CAAC;AAGjB,KAAK,gBAAgB,GAAG;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB,CAAC;AAEF,QAAA,MAAM,kBAAkB,qIAsIvB,CAAC;AAIF,eAAe,kBAAkB,CAAC"}