@neasg/design-system 0.1.3 → 0.2.1

package/README.md

@@ -15,29 +15,101 @@ npm run storybook
 
 ```ts
 import "@neasg/design-system/styles.css";
-import { Button, Badge } from "@neasg/design-system";
+import { Badge, Button, Typography } from "@neasg/design-system";
 ```
 
-For Tailwind-based apps, include the package build output in your content globs so the component utility classes are not purged:
+For Tailwind-based apps, prefer the exported preset so you inherit the shared colors, font tokens, radius tokens, container sizing, and motion defaults:
 
 ```ts
 // tailwind.config.ts
-content: [
-  "./app/**/*.{ts,tsx}",
-  "./components/**/*.{ts,tsx}",
-  "./node_modules/@neasg/design-system/dist/**/*.js"
-]
+import type { Config } from "tailwindcss";
+import neaTailwindPreset, {
+  neaDesignSystemContent,
+} from "@neasg/design-system/tailwind-preset";
+
+const config: Config = {
+  presets: [neaTailwindPreset],
+  content: [
+    "./app/**/*.{ts,tsx}",
+    "./components/**/*.{ts,tsx}",
+    ...neaDesignSystemContent,
+  ],
+};
 ```
 
 Theme tokens are provided through the exported stylesheet. Import `@neasg/design-system/styles.css` once at your app root before rendering package components.
 
-## Available Exports
+If you want to change the package base font size, override `--font-size-root` after importing the stylesheet:
+
+```css
+:root {
+  --font-size-root: 15px;
+}
+```
+
+If you want the package font token to resolve to the actual Inter font in Next.js, load it into `--font-sans`:
+
+```ts
+import { Inter } from "next/font/google";
+
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-sans",
+});
+```
+
+The package currently includes:
+
+- theme tokens for colors, typography, font weights, border radius, shared spacing, and dashboard layout sizing/padding
+- typography primitives for titles, headings, body copy, labels, and captions
+- dashboard layout primitives for sidebar + content
+- page header with title, subtitle, and breadcrumbs
+- draggable tabs for overview/case tab strips
+- prescriptive table and pagination components with built-in sorting, loading skeletons, and table-level pagination wiring
+
+## Package Rules
+
+- Use `@neasg/design-system` as the source of truth for shared UI.
+- Prefer package components before creating app-local duplicates.
+- If a reusable pattern is missing, extract it into the design system instead of leaving it app-local.
+- This design system is light-theme only. Do not add dark theme tokens, dark variants, or a theme toggle unless product direction changes.
+
+## AI Usage
+
+If you are using an AI coding assistant, give it these instructions explicitly:
+
+```text
+Use @neasg/design-system as the source of truth for shared UI.
+
+- Prefer components from @neasg/design-system before creating app-local UI.
+- Import package components directly when they already exist instead of building app-local copies.
+- Prefer this import pattern:
+  import { Button, Input, PageHeader, Table, Typography } from "@neasg/design-system";
+- Use the package theme tokens and Tailwind preset instead of inventing ad hoc colors, spacing, or radius values.
+- Do not introduce dark theme support. This design system is light-theme only.
+- If a needed shared pattern is missing, extract it into @neasg/design-system rather than building a duplicate local component.
+```
+
+## Common Exports
 
 - `@neasg/design-system`
 - `@neasg/design-system/button`
 - `@neasg/design-system/badge`
+- `@neasg/design-system/breadcrumb`
+- `@neasg/design-system/email-input`
+- `@neasg/design-system/input`
+- `@neasg/design-system/otp-input`
+- `@neasg/design-system/phone-input`
+- `@neasg/design-system/textarea`
+- `@neasg/design-system/select`
+- `@neasg/design-system/draggable-tabs`
+- `@neasg/design-system/layout`
+- `@neasg/design-system/page-header`
+- `@neasg/design-system/pagination`
 - `@neasg/design-system/table`
+- `@neasg/design-system/tailwind-preset`
 - `@neasg/design-system/tabs`
+- `@neasg/design-system/typography`
 - `@neasg/design-system/tooltip`
 - `@neasg/design-system/theme`
 - `@neasg/design-system/styles.css`
@@ -53,12 +125,28 @@ One-time setup:
 
 Release flow:
 
-```bash
-npm version patch
-git push origin main --follow-tags
-```
-
-Pushing a `v*` tag triggers `.github/workflows/publish.yml`, which runs tests, builds the package, and publishes it to npm.
+1. Make sure all your changes are committed and pushed to `main`.
+2. Bump the version — this updates `package.json` and creates a git tag automatically:
+   ```bash
+   npm version patch   # 0.2.0 → 0.2.1
+   npm version minor   # 0.2.0 → 0.3.0
+   npm version major   # 0.2.0 → 1.0.0
+   npm version 0.5.0   # set an exact version
+   ```
+3. Push the commit and tag together:
+   ```bash
+   git push origin main --follow-tags
+   ```
+4. The `v*` tag triggers `.github/workflows/publish.yml`, which runs tests, builds, and publishes to npm.
+
+> **Note:** If GPG signing fails on step 2, you can do it manually:
+> ```bash
+> npm version 0.2.0 --no-git-tag-version
+> git add package.json package-lock.json
+> git commit -m "0.2.0"
+> git tag v0.2.0
+> git push origin main --follow-tags
+> ```
 
 ## Storybook Deployment
 

package/dist/animated-icons/arrow-down.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from "react";
+export interface ArrowDownIconHandle {
+    startAnimation: () => void;
+    stopAnimation: () => void;
+}
+interface ArrowDownIconProps extends HTMLAttributes<HTMLDivElement> {
+    size?: number;
+}
+declare const ArrowDownIcon: import("react").ForwardRefExoticComponent<ArrowDownIconProps & import("react").RefAttributes<ArrowDownIconHandle>>;
+export { ArrowDownIcon };

package/dist/animated-icons/arrow-down.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion, useAnimation } from "motion/react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import { cn } from "../lib/utils";
+const PATH_VARIANTS = {
+    normal: { d: "m19 12-7 7-7-7", translateY: 0 },
+    animate: {
+        d: "m19 12-7 7-7-7",
+        translateY: [0, -3, 0],
+        transition: {
+            duration: 0.4,
+        },
+    },
+};
+const SECOND_PATH_VARIANTS = {
+    normal: { d: "M12 5v14" },
+    animate: {
+        d: ["M12 5v14", "M12 5v9", "M12 5v14"],
+        transition: {
+            duration: 0.4,
+        },
+    },
+};
+const ArrowDownIcon = forwardRef(({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start("animate"),
+            stopAnimation: () => controls.start("normal"),
+        };
+    });
+    const handleMouseEnter = useCallback((e) => {
+        if (isControlledRef.current) {
+            onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
+        }
+        else {
+            controls.start("animate");
+        }
+    }, [controls, onMouseEnter]);
+    const handleMouseLeave = useCallback((e) => {
+        if (isControlledRef.current) {
+            onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
+        }
+        else {
+            controls.start("normal");
+        }
+    }, [controls, onMouseLeave]);
+    return (_jsx("div", { className: cn(className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props, children: _jsxs("svg", { fill: "none", height: size, stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", viewBox: "0 0 24 24", width: size, xmlns: "http://www.w3.org/2000/svg", children: [_jsx(motion.path, { animate: controls, d: "m19 12-7 7-7-7", variants: PATH_VARIANTS }), _jsx(motion.path, { animate: controls, d: "M12 5v14", variants: SECOND_PATH_VARIANTS })] }) }));
+});
+ArrowDownIcon.displayName = "ArrowDownIcon";
+export { ArrowDownIcon };

package/dist/animated-icons/arrow-up.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from "react";
+export interface ArrowUpIconHandle {
+    startAnimation: () => void;
+    stopAnimation: () => void;
+}
+interface ArrowUpIconProps extends HTMLAttributes<HTMLDivElement> {
+    size?: number;
+}
+declare const ArrowUpIcon: import("react").ForwardRefExoticComponent<ArrowUpIconProps & import("react").RefAttributes<ArrowUpIconHandle>>;
+export { ArrowUpIcon };

package/dist/animated-icons/arrow-up.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion, useAnimation } from "motion/react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import { cn } from "../lib/utils";
+const PATH_VARIANTS = {
+    normal: { d: "m5 12 7-7 7 7", translateY: 0 },
+    animate: {
+        d: "m5 12 7-7 7 7",
+        translateY: [0, 3, 0],
+        transition: {
+            duration: 0.4,
+        },
+    },
+};
+const SECOND_PATH_VARIANTS = {
+    normal: { d: "M12 19V5" },
+    animate: {
+        d: ["M12 19V5", "M12 19V10", "M12 19V5"],
+        transition: {
+            duration: 0.4,
+        },
+    },
+};
+const ArrowUpIcon = forwardRef(({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start("animate"),
+            stopAnimation: () => controls.start("normal"),
+        };
+    });
+    const handleMouseEnter = useCallback((e) => {
+        if (isControlledRef.current) {
+            onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
+        }
+        else {
+            controls.start("animate");
+        }
+    }, [controls, onMouseEnter]);
+    const handleMouseLeave = useCallback((e) => {
+        if (isControlledRef.current) {
+            onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
+        }
+        else {
+            controls.start("normal");
+        }
+    }, [controls, onMouseLeave]);
+    return (_jsx("div", { className: cn(className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props, children: _jsxs("svg", { fill: "none", height: size, stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", viewBox: "0 0 24 24", width: size, xmlns: "http://www.w3.org/2000/svg", children: [_jsx(motion.path, { animate: controls, d: "m5 12 7-7 7 7", variants: PATH_VARIANTS }), _jsx(motion.path, { animate: controls, d: "M12 19V5", variants: SECOND_PATH_VARIANTS })] }) }));
+});
+ArrowUpIcon.displayName = "ArrowUpIcon";
+export { ArrowUpIcon };

package/dist/animated-icons/bell.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from "react";
+export interface BellIconHandle {
+    startAnimation: () => void;
+    stopAnimation: () => void;
+}
+interface BellIconProps extends HTMLAttributes<HTMLDivElement> {
+    size?: number;
+}
+declare const BellIcon: import("react").ForwardRefExoticComponent<BellIconProps & import("react").RefAttributes<BellIconHandle>>;
+export { BellIcon };

package/dist/animated-icons/bell.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion, useAnimation } from "motion/react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import { cn } from "../lib/utils";
+const SVG_VARIANTS = {
+    normal: { rotate: 0 },
+    animate: { rotate: [0, -10, 10, -10, 0] },
+};
+const BellIcon = forwardRef(({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start("animate"),
+            stopAnimation: () => controls.start("normal"),
+        };
+    });
+    const handleMouseEnter = useCallback((e) => {
+        if (isControlledRef.current) {
+            onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
+        }
+        else {
+            controls.start("animate");
+        }
+    }, [controls, onMouseEnter]);
+    const handleMouseLeave = useCallback((e) => {
+        if (isControlledRef.current) {
+            onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
+        }
+        else {
+            controls.start("normal");
+        }
+    }, [controls, onMouseLeave]);
+    return (_jsx("div", { className: cn(className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props, children: _jsxs(motion.svg, { animate: controls, fill: "none", height: size, stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", transition: {
+                duration: 0.5,
+                ease: "easeInOut",
+            }, variants: SVG_VARIANTS, viewBox: "0 0 24 24", width: size, xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" }), _jsx("path", { d: "M10.3 21a1.94 1.94 0 0 0 3.4 0" })] }) }));
+});
+BellIcon.displayName = "BellIcon";
+export { BellIcon };

package/dist/animated-icons/bold.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from "react";
+export interface BoldIconHandle {
+    startAnimation: () => void;
+    stopAnimation: () => void;
+}
+interface BoldIconProps extends HTMLAttributes<HTMLDivElement> {
+    size?: number;
+}
+declare const BoldIcon: import("react").ForwardRefExoticComponent<BoldIconProps & import("react").RefAttributes<BoldIconHandle>>;
+export { BoldIcon };

package/dist/animated-icons/bold.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { motion, useAnimation } from "motion/react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import { cn } from "../lib/utils";
+const SVG_VARIANTS = {
+    normal: { scale: 1, fontWeight: 700 },
+    animate: {
+        scale: [1, 1.2, 1],
+        transition: {
+            duration: 0.3,
+            ease: "easeInOut",
+        },
+    },
+};
+const BoldIcon = forwardRef(({ onMouseEnter, onMouseLeave, className, size = 24, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start("animate"),
+            stopAnimation: () => controls.start("normal"),
+        };
+    });
+    const handleMouseEnter = useCallback((e) => {
+        if (isControlledRef.current) {
+            onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
+        }
+        else {
+            controls.start("animate");
+        }
+    }, [controls, onMouseEnter]);
+    const handleMouseLeave = useCallback((e) => {
+        if (isControlledRef.current) {
+            onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
+        }
+        else {
+            controls.start("normal");
+        }
+    }, [controls, onMouseLeave]);
+    return (_jsx("div", { className: cn(className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props, children: _jsx(motion.svg, { animate: controls, fill: "none", height: size, stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", variants: SVG_VARIANTS, viewBox: "0 0 24 24", width: size, xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8" }) }) }));
+});
+BoldIcon.displayName = "BoldIcon";
+export { BoldIcon };

package/dist/animated-icons/book-open.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from "react";
+export interface BookOpenIconHandle {
+    startAnimation: () => void;
+    stopAnimation: () => void;
+}
+interface BookOpenIconProps extends HTMLAttributes<HTMLDivElement> {
+    size?: number;
+}
+declare const BookOpenIcon: import("react").ForwardRefExoticComponent<BookOpenIconProps & import("react").RefAttributes<BookOpenIconHandle>>;
+export { BookOpenIcon };

package/dist/animated-icons/book-open.js

@@ -0,0 +1,55 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion, useAnimation } from "motion/react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import { cn } from "../lib/utils";
+const LEFT_PAGE_VARIANTS = {
+    normal: { rotateY: 0 },
+    animate: {
+        rotateY: [0, -10, 0],
+        transition: {
+            duration: 0.4,
+            ease: "easeInOut",
+        },
+    },
+};
+const RIGHT_PAGE_VARIANTS = {
+    normal: { rotateY: 0 },
+    animate: {
+        rotateY: [0, 10, 0],
+        transition: {
+            duration: 0.4,
+            ease: "easeInOut",
+        },
+    },
+};
+const BookOpenIcon = forwardRef(({ onMouseEnter, onMouseLeave, className, size = 24, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start("animate"),
+            stopAnimation: () => controls.start("normal"),
+        };
+    });
+    const handleMouseEnter = useCallback((e) => {
+        if (isControlledRef.current) {
+            onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
+        }
+        else {
+            controls.start("animate");
+        }
+    }, [controls, onMouseEnter]);
+    const handleMouseLeave = useCallback((e) => {
+        if (isControlledRef.current) {
+            onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
+        }
+        else {
+            controls.start("normal");
+        }
+    }, [controls, onMouseLeave]);
+    return (_jsx("div", { className: cn(className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props, children: _jsxs("svg", { fill: "none", height: size, stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", viewBox: "0 0 24 24", width: size, xmlns: "http://www.w3.org/2000/svg", children: [_jsx(motion.path, { animate: controls, d: "M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z", variants: LEFT_PAGE_VARIANTS }), _jsx(motion.path, { animate: controls, d: "M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z", variants: RIGHT_PAGE_VARIANTS })] }) }));
+});
+BookOpenIcon.displayName = "BookOpenIcon";
+export { BookOpenIcon };

package/dist/animated-icons/building.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from "react";
+export interface BuildingIconHandle {
+    startAnimation: () => void;
+    stopAnimation: () => void;
+}
+interface BuildingIconProps extends HTMLAttributes<HTMLDivElement> {
+    size?: number;
+}
+declare const BuildingIcon: import("react").ForwardRefExoticComponent<BuildingIconProps & import("react").RefAttributes<BuildingIconHandle>>;
+export { BuildingIcon };

package/dist/animated-icons/building.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion, useAnimation } from "motion/react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import { cn } from "../lib/utils";
+const SVG_VARIANTS = {
+    normal: { scale: 1, y: 0 },
+    animate: {
+        scale: [1, 1.05, 1],
+        y: [0, -1, 0],
+        transition: {
+            duration: 0.4,
+            ease: "easeInOut",
+        },
+    },
+};
+const BuildingIcon = forwardRef(({ onMouseEnter, onMouseLeave, className, size = 24, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start("animate"),
+            stopAnimation: () => controls.start("normal"),
+        };
+    });
+    const handleMouseEnter = useCallback((e) => {
+        if (isControlledRef.current) {
+            onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
+        }
+        else {
+            controls.start("animate");
+        }
+    }, [controls, onMouseEnter]);
+    const handleMouseLeave = useCallback((e) => {
+        if (isControlledRef.current) {
+            onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
+        }
+        else {
+            controls.start("normal");
+        }
+    }, [controls, onMouseLeave]);
+    return (_jsx("div", { className: cn(className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props, children: _jsxs(motion.svg, { animate: controls, fill: "none", height: size, stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", variants: SVG_VARIANTS, viewBox: "0 0 24 24", width: size, xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z" }), _jsx("path", { d: "M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2" }), _jsx("path", { d: "M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2" }), _jsx("path", { d: "M10 6h4" }), _jsx("path", { d: "M10 10h4" }), _jsx("path", { d: "M10 14h4" }), _jsx("path", { d: "M10 18h4" })] }) }));
+});
+BuildingIcon.displayName = "BuildingIcon";
+export { BuildingIcon };

package/dist/animated-icons/check.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from "react";
+export interface CheckIconHandle {
+    startAnimation: () => void;
+    stopAnimation: () => void;
+}
+interface CheckIconProps extends HTMLAttributes<HTMLDivElement> {
+    size?: number;
+}
+declare const CheckIcon: import("react").ForwardRefExoticComponent<CheckIconProps & import("react").RefAttributes<CheckIconHandle>>;
+export { CheckIcon };

package/dist/animated-icons/check.js

@@ -0,0 +1,55 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { motion, useAnimation } from "motion/react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import { cn } from "../lib/utils";
+const PATH_VARIANTS = {
+    normal: {
+        opacity: 1,
+        pathLength: 1,
+        scale: 1,
+        transition: {
+            duration: 0.3,
+            opacity: { duration: 0.1 },
+        },
+    },
+    animate: {
+        opacity: [0, 1],
+        pathLength: [0, 1],
+        scale: [0.5, 1],
+        transition: {
+            duration: 0.4,
+            opacity: { duration: 0.1 },
+        },
+    },
+};
+const CheckIcon = forwardRef(({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start("animate"),
+            stopAnimation: () => controls.start("normal"),
+        };
+    });
+    const handleMouseEnter = useCallback((e) => {
+        if (isControlledRef.current) {
+            onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
+        }
+        else {
+            controls.start("animate");
+        }
+    }, [controls, onMouseEnter]);
+    const handleMouseLeave = useCallback((e) => {
+        if (isControlledRef.current) {
+            onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
+        }
+        else {
+            controls.start("normal");
+        }
+    }, [controls, onMouseLeave]);
+    return (_jsx("div", { className: cn(className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props, children: _jsx("svg", { fill: "none", height: size, stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", viewBox: "0 0 24 24", width: size, xmlns: "http://www.w3.org/2000/svg", children: _jsx(motion.path, { animate: controls, d: "M4 12 9 17L20 6", initial: "normal", variants: PATH_VARIANTS }) }) }));
+});
+CheckIcon.displayName = "CheckIcon";
+export { CheckIcon };

package/dist/animated-icons/chevron-down.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from "react";
+export interface ChevronDownIconHandle {
+    startAnimation: () => void;
+    stopAnimation: () => void;
+}
+interface ChevronDownIconProps extends HTMLAttributes<HTMLDivElement> {
+    size?: number;
+}
+declare const ChevronDownIcon: import("react").ForwardRefExoticComponent<ChevronDownIconProps & import("react").RefAttributes<ChevronDownIconHandle>>;
+export { ChevronDownIcon };

package/dist/animated-icons/chevron-down.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { motion, useAnimation } from "motion/react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import { cn } from "../lib/utils";
+const DEFAULT_TRANSITION = {
+    times: [0, 0.4, 1],
+    duration: 0.5,
+};
+const ChevronDownIcon = forwardRef(({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start("animate"),
+            stopAnimation: () => controls.start("normal"),
+        };
+    });
+    const handleMouseEnter = useCallback((e) => {
+        if (isControlledRef.current) {
+            onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
+        }
+        else {
+            controls.start("animate");
+        }
+    }, [controls, onMouseEnter]);
+    const handleMouseLeave = useCallback((e) => {
+        if (isControlledRef.current) {
+            onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
+        }
+        else {
+            controls.start("normal");
+        }
+    }, [controls, onMouseLeave]);
+    return (_jsx("div", { className: cn(className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props, children: _jsx("svg", { fill: "none", height: size, stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", viewBox: "0 0 24 24", width: size, xmlns: "http://www.w3.org/2000/svg", children: _jsx(motion.path, { animate: controls, d: "m6 9 6 6 6-6", transition: DEFAULT_TRANSITION, variants: {
+                    normal: { y: 0 },
+                    animate: { y: [0, 2, 0] },
+                } }) }) }));
+});
+ChevronDownIcon.displayName = "ChevronDownIcon";
+export { ChevronDownIcon };

package/dist/animated-icons/chevron-left.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from "react";
+export interface ChevronLeftIconHandle {
+    startAnimation: () => void;
+    stopAnimation: () => void;
+}
+interface ChevronLeftIconProps extends HTMLAttributes<HTMLDivElement> {
+    size?: number;
+}
+declare const ChevronLeftIcon: import("react").ForwardRefExoticComponent<ChevronLeftIconProps & import("react").RefAttributes<ChevronLeftIconHandle>>;
+export { ChevronLeftIcon };