nfx-ui 0.20.0 → 0.22.0

package/dist/animations/info-circle-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"info-circle-icon.js","names":[],"sources":["../../src/animations/info-circle-icon.tsx"],"sourcesContent":["import { forwardRef, useImperativeHandle, useCallback } from \"react\";\nimport type { AnimatedIconHandle, AnimatedIconProps } from \"./types\";\nimport { motion, useAnimate } from \"motion/react\";\n\nconst InfoCircleIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(\n  (\n    { size = 24, color = \"currentColor\", strokeWidth = 2, className = \"\" },\n    ref,\n  ) => {\n    const [scope, animate] = useAnimate();\n\n    const start = useCallback(async () => {\n      await animate(\n        \".info-circle-i\",\n        {\n          pathLength: [0, 1],\n        },\n        {\n          duration: 0.3,\n          ease: \"easeOut\",\n        },\n      );\n\n      animate(\n        \".info-line-i\",\n        {\n          pathLength: [0, 1],\n        },\n        {\n          duration: 0.4,\n          ease: \"easeOut\",\n        },\n      );\n    }, [animate]);\n\n    const stop = useCallback(() => {\n      animate(\n        \".info-circle-i, .info-line-i\",\n        { pathLength: 1 },\n        { duration: 0.2, ease: \"easeInOut\" },\n      );\n    }, [animate]);\n\n    useImperativeHandle(ref, () => ({\n      startAnimation: start,\n      stopAnimation: 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 stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n        <motion.path\n          d=\"M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0\"\n          className=\"info-circle\"\n        />\n        <motion.path d=\"M12 9h.01\" className=\"info-circle-i\" />\n        <motion.path d=\"M11 12h1v4h1\" className=\"info-line-i\" />\n      </motion.svg>\n    );\n  },\n);\n\nInfoCircleIcon.displayName = \"InfoCircleIcon\";\nexport default InfoCircleIcon;\n"],"mappings":";;;;AAIA,IAAM,IAAiB,GAEnB,EAAE,UAAO,IAAI,WAAQ,gBAAgB,iBAAc,GAAG,eAAY,MAClE,MACG;CACH,IAAM,CAAC,GAAO,KAAW,EAAW,GAE9B,IAAQ,EAAY,YAAY;EAYpC,AAXA,MAAM,EACJ,kBACA,EACE,YAAY,CAAC,GAAG,CAAC,EACnB,GACA;GACE,UAAU;GACV,MAAM;EACR,CACF,GAEA,EACE,gBACA,EACE,YAAY,CAAC,GAAG,CAAC,EACnB,GACA;GACE,UAAU;GACV,MAAM;EACR,CACF;CACF,GAAG,CAAC,CAAO,CAAC,GAEN,IAAO,QAAkB;EAC7B,EACE,gCACA,EAAE,YAAY,EAAE,GAChB;GAAE,UAAU;GAAK,MAAM;EAAY,CACrC;CACF,GAAG,CAAC,CAAO,CAAC;CAOZ,OALA,EAAoB,UAAY;EAC9B,gBAAgB;EAChB,eAAe;CACjB,EAAE,GAGA,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;IAAa,QAAO;IAAO,GAAE;IAAgB,MAAK;GAAQ,CAAA;GAC1D,kBAAC,EAAO,MAAR;IACE,GAAE;IACF,WAAU;GACX,CAAA;GACD,kBAAC,EAAO,MAAR;IAAa,GAAE;IAAY,WAAU;GAAiB,CAAA;GACtD,kBAAC,EAAO,MAAR;IAAa,GAAE;IAAe,WAAU;GAAe,CAAA;EAC7C;;AAEhB,CACF;AAEA,EAAe,cAAc"}

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

@@ -0,0 +1,4 @@
+import { AnimatedIconHandle, AnimatedIconProps } from './types';
+declare const InstagramIcon: import('react').ForwardRefExoticComponent<AnimatedIconProps & import('react').RefAttributes<AnimatedIconHandle>>;
+export default InstagramIcon;
+//# sourceMappingURL=instagram-icon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"instagram-icon.d.ts","sourceRoot":"","sources":["../../src/animations/instagram-icon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAGrE,QAAA,MAAM,aAAa,kHAyElB,CAAC;AAGF,eAAe,aAAa,CAAC"}

package/dist/animations/instagram-icon.js

@@ -0,0 +1,79 @@
+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/instagram-icon.tsx
+var s = e(({ size: e = 24, color: s = "currentColor", strokeWidth: c = 2, className: l = "" }, u) => {
+	let [d, f] = i(), p = t(async () => {
+		f(".ig-body", { scale: [
+			1,
+			1.05,
+			1
+		] }, {
+			duration: .3,
+			ease: "easeOut"
+		}), await f(".ig-lens", { scale: [
+			1,
+			1.2,
+			1
+		] }, {
+			duration: .25,
+			ease: "easeOut"
+		}), f(".ig-dot", { opacity: [
+			1,
+			0,
+			1
+		] }, {
+			duration: .2,
+			ease: "easeInOut"
+		});
+	}, [f]), m = t(() => {
+		f(".ig-body, .ig-lens, .ig-dot", {
+			scale: 1,
+			opacity: 1
+		}, {
+			duration: .2,
+			ease: "easeInOut"
+		});
+	}, [f]);
+	return n(u, () => ({
+		startAnimation: p,
+		stopAnimation: m
+	})), /* @__PURE__ */ a(r.div, {
+		ref: d,
+		className: `inline-flex cursor-pointer ${l}`,
+		onHoverStart: p,
+		onHoverEnd: m,
+		children: /* @__PURE__ */ o("svg", {
+			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",
+			children: [
+				/* @__PURE__ */ a(r.path, {
+					className: "ig-body",
+					style: { transformOrigin: "50% 50%" },
+					d: "M4 8a4 4 0 0 1 4 -4h8a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-8a4 4 0 0 1 -4 -4z"
+				}),
+				/* @__PURE__ */ a(r.path, {
+					className: "ig-lens",
+					style: { transformOrigin: "50% 50%" },
+					d: "M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"
+				}),
+				/* @__PURE__ */ a(r.path, {
+					className: "ig-dot",
+					d: "M16.5 7.5v.01"
+				})
+			]
+		})
+	});
+});
+s.displayName = "InstagramIcon";
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=instagram-icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"instagram-icon.js","names":[],"sources":["../../src/animations/instagram-icon.tsx"],"sourcesContent":["import { forwardRef, useImperativeHandle, useCallback } from \"react\";\nimport type { AnimatedIconHandle, AnimatedIconProps } from \"./types\";\nimport { motion, useAnimate } from \"motion/react\";\n\nconst InstagramIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(\n  (\n    { size = 24, color = \"currentColor\", strokeWidth = 2, className = \"\" },\n    ref,\n  ) => {\n    const [scope, animate] = useAnimate();\n\n    const start = useCallback(async () => {\n      animate(\n        \".ig-body\",\n        { scale: [1, 1.05, 1] },\n        { duration: 0.3, ease: \"easeOut\" },\n      );\n      await animate(\n        \".ig-lens\",\n        { scale: [1, 1.2, 1] },\n        { duration: 0.25, ease: \"easeOut\" },\n      );\n      animate(\n        \".ig-dot\",\n        { opacity: [1, 0, 1] },\n        { duration: 0.2, ease: \"easeInOut\" },\n      );\n    }, [animate]);\n\n    const stop = useCallback(() => {\n      animate(\n        \".ig-body, .ig-lens, .ig-dot\",\n        { scale: 1, opacity: 1 },\n        { duration: 0.2, ease: \"easeInOut\" },\n      );\n    }, [animate]);\n\n    useImperativeHandle(ref, () => ({\n      startAnimation: start,\n      stopAnimation: stop,\n    }));\n\n    return (\n      <motion.div\n        ref={scope}\n        className={`inline-flex cursor-pointer ${className}`}\n        onHoverStart={start}\n        onHoverEnd={stop}\n      >\n        <svg\n          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        >\n          <motion.path\n            className=\"ig-body\"\n            style={{ transformOrigin: \"50% 50%\" }}\n            d=\"M4 8a4 4 0 0 1 4 -4h8a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-8a4 4 0 0 1 -4 -4z\"\n          />\n\n          <motion.path\n            className=\"ig-lens\"\n            style={{ transformOrigin: \"50% 50%\" }}\n            d=\"M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0\"\n          />\n\n          <motion.path className=\"ig-dot\" d=\"M16.5 7.5v.01\" />\n        </svg>\n      </motion.div>\n    );\n  },\n);\n\nInstagramIcon.displayName = \"InstagramIcon\";\nexport default InstagramIcon;\n"],"mappings":";;;;AAIA,IAAM,IAAgB,GAElB,EAAE,UAAO,IAAI,WAAQ,gBAAgB,iBAAc,GAAG,eAAY,MAClE,MACG;CACH,IAAM,CAAC,GAAO,KAAW,EAAW,GAE9B,IAAQ,EAAY,YAAY;EAWpC,AAVA,EACE,YACA,EAAE,OAAO;GAAC;GAAG;GAAM;EAAC,EAAE,GACtB;GAAE,UAAU;GAAK,MAAM;EAAU,CACnC,GACA,MAAM,EACJ,YACA,EAAE,OAAO;GAAC;GAAG;GAAK;EAAC,EAAE,GACrB;GAAE,UAAU;GAAM,MAAM;EAAU,CACpC,GACA,EACE,WACA,EAAE,SAAS;GAAC;GAAG;GAAG;EAAC,EAAE,GACrB;GAAE,UAAU;GAAK,MAAM;EAAY,CACrC;CACF,GAAG,CAAC,CAAO,CAAC,GAEN,IAAO,QAAkB;EAC7B,EACE,+BACA;GAAE,OAAO;GAAG,SAAS;EAAE,GACvB;GAAE,UAAU;GAAK,MAAM;EAAY,CACrC;CACF,GAAG,CAAC,CAAO,CAAC;CAOZ,OALA,EAAoB,UAAY;EAC9B,gBAAgB;EAChB,eAAe;CACjB,EAAE,GAGA,kBAAC,EAAO,KAAR;EACE,KAAK;EACL,WAAW,8BAA8B;EACzC,cAAc;EACd,YAAY;EAEZ,UAAA,kBAAC,OAAD;GACE,OAAM;GACN,OAAO;GACP,QAAQ;GACR,SAAQ;GACR,MAAK;GACL,QAAQ;GACK;GACb,eAAc;GACd,gBAAe;GATjB,UAAA;IAWE,kBAAC,EAAO,MAAR;KACE,WAAU;KACV,OAAO,EAAE,iBAAiB,UAAU;KACpC,GAAE;IACH,CAAA;IAED,kBAAC,EAAO,MAAR;KACE,WAAU;KACV,OAAO,EAAE,iBAAiB,UAAU;KACpC,GAAE;IACH,CAAA;IAED,kBAAC,EAAO,MAAR;KAAa,WAAU;KAAS,GAAE;IAAiB,CAAA;GAChD;;CACK,CAAA;AAEhB,CACF;AAEA,EAAc,cAAc"}

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

@@ -0,0 +1,4 @@
+import { AnimatedIconHandle, AnimatedIconProps } from './types';
+declare const JavascriptIcon: import('react').ForwardRefExoticComponent<AnimatedIconProps & import('react').RefAttributes<AnimatedIconHandle>>;
+export default JavascriptIcon;
+//# sourceMappingURL=javascript-icon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"javascript-icon.d.ts","sourceRoot":"","sources":["../../src/animations/javascript-icon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAGrE,QAAA,MAAM,cAAc,kHAoEnB,CAAC;AAGF,eAAe,cAAc,CAAC"}

package/dist/animations/javascript-icon.js

@@ -0,0 +1,80 @@
+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/javascript-icon.tsx
+var s = e(({ size: e = 24, color: s = "currentColor", strokeWidth: c = 2, className: l = "" }, u) => {
+	let [d, f] = i(), p = t(async () => {
+		f(".js-text", {
+			pathLength: [0, 1],
+			opacity: [0, 1]
+		}, {
+			duration: .6,
+			ease: "easeOut"
+		}), await f(".border", { rotate: [
+			0,
+			5,
+			-5,
+			0
+		] }, {
+			duration: .5,
+			ease: "easeInOut"
+		});
+	}, [f]), m = t(() => {
+		f(".js-text, .border", {
+			pathLength: 1,
+			opacity: 1,
+			rotate: 0
+		}, { duration: .2 });
+	}, [f]);
+	return n(u, () => ({
+		startAnimation: p,
+		stopAnimation: m
+	})), /* @__PURE__ */ o(r.svg, {
+		ref: d,
+		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: p,
+		onHoverEnd: m,
+		children: [
+			/* @__PURE__ */ a("path", {
+				stroke: "none",
+				d: "M0 0h24v24H0z",
+				fill: "none"
+			}),
+			/* @__PURE__ */ a(r.path, {
+				className: "border",
+				style: { transformOrigin: "center" },
+				d: "M20 4l-2 14.5l-6 2l-6 -2l-2 -14.5z"
+			}),
+			/* @__PURE__ */ a(r.path, {
+				className: "js-text",
+				initial: {
+					pathLength: 1,
+					opacity: 1
+				},
+				d: "M7.5 8h3v8l-2 -1"
+			}),
+			/* @__PURE__ */ a(r.path, {
+				className: "js-text",
+				initial: {
+					pathLength: 1,
+					opacity: 1
+				},
+				d: "M16.5 8h-2.5a.5 .5 0 0 0 -.5 .5v3a.5 .5 0 0 0 .5 .5h1.423a.5 .5 0 0 1 .495 .57l-.418 2.93l-2 .5"
+			})
+		]
+	});
+});
+s.displayName = "JavascriptIcon";
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=javascript-icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"javascript-icon.js","names":[],"sources":["../../src/animations/javascript-icon.tsx"],"sourcesContent":["import { forwardRef, useImperativeHandle, useCallback } from \"react\";\nimport type { AnimatedIconHandle, AnimatedIconProps } from \"./types\";\nimport { motion, useAnimate } from \"motion/react\";\n\nconst JavascriptIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(\n  (\n    { size = 24, color = \"currentColor\", strokeWidth = 2, className = \"\" },\n    ref,\n  ) => {\n    const [scope, animate] = useAnimate();\n\n    const start = useCallback(async () => {\n      animate(\n        \".js-text\",\n        { pathLength: [0, 1], opacity: [0, 1] },\n        { duration: 0.6, ease: \"easeOut\" },\n      );\n      await animate(\n        \".border\",\n        { rotate: [0, 5, -5, 0] },\n        { duration: 0.5, ease: \"easeInOut\" },\n      );\n    }, [animate]);\n\n    const stop = useCallback(() => {\n      animate(\n        \".js-text, .border\",\n        { pathLength: 1, opacity: 1, rotate: 0 },\n        { duration: 0.2 },\n      );\n    }, [animate]);\n\n    useImperativeHandle(ref, () => ({\n      startAnimation: start,\n      stopAnimation: 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        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n        <motion.path\n          className=\"border\"\n          style={{ transformOrigin: \"center\" }}\n          d=\"M20 4l-2 14.5l-6 2l-6 -2l-2 -14.5z\"\n        />\n        <motion.path\n          className=\"js-text\"\n          initial={{ pathLength: 1, opacity: 1 }}\n          d=\"M7.5 8h3v8l-2 -1\"\n        />\n        <motion.path\n          className=\"js-text\"\n          initial={{ pathLength: 1, opacity: 1 }}\n          d=\"M16.5 8h-2.5a.5 .5 0 0 0 -.5 .5v3a.5 .5 0 0 0 .5 .5h1.423a.5 .5 0 0 1 .495 .57l-.418 2.93l-2 .5\"\n        />\n      </motion.svg>\n    );\n  },\n);\n\nJavascriptIcon.displayName = \"JavascriptIcon\";\nexport default JavascriptIcon;\n"],"mappings":";;;;AAIA,IAAM,IAAiB,GAEnB,EAAE,UAAO,IAAI,WAAQ,gBAAgB,iBAAc,GAAG,eAAY,MAClE,MACG;CACH,IAAM,CAAC,GAAO,KAAW,EAAW,GAE9B,IAAQ,EAAY,YAAY;EAMpC,AALA,EACE,YACA;GAAE,YAAY,CAAC,GAAG,CAAC;GAAG,SAAS,CAAC,GAAG,CAAC;EAAE,GACtC;GAAE,UAAU;GAAK,MAAM;EAAU,CACnC,GACA,MAAM,EACJ,WACA,EAAE,QAAQ;GAAC;GAAG;GAAG;GAAI;EAAC,EAAE,GACxB;GAAE,UAAU;GAAK,MAAM;EAAY,CACrC;CACF,GAAG,CAAC,CAAO,CAAC,GAEN,IAAO,QAAkB;EAC7B,EACE,qBACA;GAAE,YAAY;GAAG,SAAS;GAAG,QAAQ;EAAE,GACvC,EAAE,UAAU,GAAI,CAClB;CACF,GAAG,CAAC,CAAO,CAAC;CAOZ,OALA,EAAoB,UAAY;EAC9B,gBAAgB;EAChB,eAAe;CACjB,EAAE,GAGA,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,QAAD;IAAM,QAAO;IAAO,GAAE;IAAgB,MAAK;GAAQ,CAAA;GACnD,kBAAC,EAAO,MAAR;IACE,WAAU;IACV,OAAO,EAAE,iBAAiB,SAAS;IACnC,GAAE;GACH,CAAA;GACD,kBAAC,EAAO,MAAR;IACE,WAAU;IACV,SAAS;KAAE,YAAY;KAAG,SAAS;IAAE;IACrC,GAAE;GACH,CAAA;GACD,kBAAC,EAAO,MAAR;IACE,WAAU;IACV,SAAS;KAAE,YAAY;KAAG,SAAS;IAAE;IACrC,GAAE;GACH,CAAA;EACS;;AAEhB,CACF;AAEA,EAAe,cAAc"}

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

@@ -0,0 +1,4 @@
+import { AnimatedIconHandle, AnimatedIconProps } from './types';
+declare const KeyframesIcon: import('react').ForwardRefExoticComponent<AnimatedIconProps & import('react').RefAttributes<AnimatedIconHandle>>;
+export default KeyframesIcon;
+//# sourceMappingURL=keyframes-icon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"keyframes-icon.d.ts","sourceRoot":"","sources":["../../src/animations/keyframes-icon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAGrE,QAAA,MAAM,aAAa,kHAyElB,CAAC;AAGF,eAAe,aAAa,CAAC"}

package/dist/animations/keyframes-icon.js

@@ -0,0 +1,81 @@
+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/keyframes-icon.tsx
+var s = e(({ size: e = 24, color: s = "currentColor", strokeWidth: c = 2, className: l = "" }, u) => {
+	let [d, f] = i(), p = t(async () => {
+		f(".frame-1", { x: [
+			0,
+			-2,
+			0
+		] }, {
+			duration: .4,
+			ease: "easeInOut"
+		}), f(".frame-2", { x: [
+			0,
+			2,
+			0
+		] }, {
+			duration: .4,
+			ease: "easeInOut",
+			delay: .1
+		}), f(".frame-3", { x: [
+			0,
+			4,
+			0
+		] }, {
+			duration: .4,
+			ease: "easeInOut",
+			delay: .2
+		});
+	}, [f]), m = t(() => {
+		f(".frame-1, .frame-2, .frame-3", { x: 0 }, {
+			duration: .2,
+			ease: "easeOut"
+		});
+	}, [f]);
+	return n(u, () => ({
+		startAnimation: p,
+		stopAnimation: m
+	})), /* @__PURE__ */ a(r.div, {
+		ref: d,
+		className: `inline-flex cursor-pointer items-center justify-center ${l}`,
+		onHoverStart: p,
+		onHoverEnd: m,
+		children: /* @__PURE__ */ o("svg", {
+			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",
+			children: [
+				/* @__PURE__ */ a("path", {
+					stroke: "none",
+					d: "M0 0h24v24H0z",
+					fill: "none"
+				}),
+				/* @__PURE__ */ a(r.path, {
+					className: "frame-1",
+					d: "M9.225 18.412a1.595 1.595 0 0 1 -1.225 .588c-.468 0 -.914 -.214 -1.225 -.588l-4.361 -5.248a1.844 1.844 0 0 1 0 -2.328l4.361 -5.248a1.595 1.595 0 0 1 1.225 -.588c.468 0 .914 .214 1.225 .588l4.361 5.248a1.844 1.844 0 0 1 0 2.328l-4.361 5.248z"
+				}),
+				/* @__PURE__ */ a(r.path, {
+					className: "frame-2",
+					d: "M17 5l4.586 5.836a1.844 1.844 0 0 1 0 2.328l-4.586 5.836"
+				}),
+				/* @__PURE__ */ a(r.path, {
+					className: "frame-3",
+					d: "M13 5l4.586 5.836a1.844 1.844 0 0 1 0 2.328l-4.586 5.836"
+				})
+			]
+		})
+	});
+});
+s.displayName = "KeyframesIcon";
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=keyframes-icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"keyframes-icon.js","names":[],"sources":["../../src/animations/keyframes-icon.tsx"],"sourcesContent":["import { forwardRef, useImperativeHandle, useCallback } from \"react\";\nimport type { AnimatedIconHandle, AnimatedIconProps } from \"./types\";\nimport { motion, useAnimate } from \"motion/react\";\n\nconst KeyframesIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(\n  (\n    { size = 24, color = \"currentColor\", strokeWidth = 2, className = \"\" },\n    ref,\n  ) => {\n    const [scope, animate] = useAnimate();\n\n    const start = useCallback(async () => {\n      animate(\n        \".frame-1\",\n        { x: [0, -2, 0] },\n        { duration: 0.4, ease: \"easeInOut\" },\n      );\n      animate(\n        \".frame-2\",\n        { x: [0, 2, 0] },\n        { duration: 0.4, ease: \"easeInOut\", delay: 0.1 },\n      );\n      animate(\n        \".frame-3\",\n        { x: [0, 4, 0] },\n        { duration: 0.4, ease: \"easeInOut\", delay: 0.2 },\n      );\n    }, [animate]);\n\n    const stop = useCallback(() => {\n      animate(\n        \".frame-1, .frame-2, .frame-3\",\n        { x: 0 },\n        { duration: 0.2, ease: \"easeOut\" },\n      );\n    }, [animate]);\n\n    useImperativeHandle(ref, () => ({\n      startAnimation: start,\n      stopAnimation: stop,\n    }));\n\n    return (\n      <motion.div\n        ref={scope}\n        className={`inline-flex cursor-pointer items-center justify-center ${className}`}\n        onHoverStart={start}\n        onHoverEnd={stop}\n      >\n        <svg\n          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        >\n          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n          <motion.path\n            className=\"frame-1\"\n            d=\"M9.225 18.412a1.595 1.595 0 0 1 -1.225 .588c-.468 0 -.914 -.214 -1.225 -.588l-4.361 -5.248a1.844 1.844 0 0 1 0 -2.328l4.361 -5.248a1.595 1.595 0 0 1 1.225 -.588c.468 0 .914 .214 1.225 .588l4.361 5.248a1.844 1.844 0 0 1 0 2.328l-4.361 5.248z\"\n          />\n          <motion.path\n            className=\"frame-2\"\n            d=\"M17 5l4.586 5.836a1.844 1.844 0 0 1 0 2.328l-4.586 5.836\"\n          />\n          <motion.path\n            className=\"frame-3\"\n            d=\"M13 5l4.586 5.836a1.844 1.844 0 0 1 0 2.328l-4.586 5.836\"\n          />\n        </svg>\n      </motion.div>\n    );\n  },\n);\n\nKeyframesIcon.displayName = \"KeyframesIcon\";\nexport default KeyframesIcon;\n"],"mappings":";;;;AAIA,IAAM,IAAgB,GAElB,EAAE,UAAO,IAAI,WAAQ,gBAAgB,iBAAc,GAAG,eAAY,MAClE,MACG;CACH,IAAM,CAAC,GAAO,KAAW,EAAW,GAE9B,IAAQ,EAAY,YAAY;EAWpC,AAVA,EACE,YACA,EAAE,GAAG;GAAC;GAAG;GAAI;EAAC,EAAE,GAChB;GAAE,UAAU;GAAK,MAAM;EAAY,CACrC,GACA,EACE,YACA,EAAE,GAAG;GAAC;GAAG;GAAG;EAAC,EAAE,GACf;GAAE,UAAU;GAAK,MAAM;GAAa,OAAO;EAAI,CACjD,GACA,EACE,YACA,EAAE,GAAG;GAAC;GAAG;GAAG;EAAC,EAAE,GACf;GAAE,UAAU;GAAK,MAAM;GAAa,OAAO;EAAI,CACjD;CACF,GAAG,CAAC,CAAO,CAAC,GAEN,IAAO,QAAkB;EAC7B,EACE,gCACA,EAAE,GAAG,EAAE,GACP;GAAE,UAAU;GAAK,MAAM;EAAU,CACnC;CACF,GAAG,CAAC,CAAO,CAAC;CAOZ,OALA,EAAoB,UAAY;EAC9B,gBAAgB;EAChB,eAAe;CACjB,EAAE,GAGA,kBAAC,EAAO,KAAR;EACE,KAAK;EACL,WAAW,0DAA0D;EACrE,cAAc;EACd,YAAY;EAEZ,UAAA,kBAAC,OAAD;GACE,OAAM;GACN,OAAO;GACP,QAAQ;GACR,SAAQ;GACR,MAAK;GACL,QAAQ;GACK;GACb,eAAc;GACd,gBAAe;GATjB,UAAA;IAWE,kBAAC,QAAD;KAAM,QAAO;KAAO,GAAE;KAAgB,MAAK;IAAQ,CAAA;IACnD,kBAAC,EAAO,MAAR;KACE,WAAU;KACV,GAAE;IACH,CAAA;IACD,kBAAC,EAAO,MAAR;KACE,WAAU;KACV,GAAE;IACH,CAAA;IACD,kBAAC,EAAO,MAAR;KACE,WAAU;KACV,GAAE;IACH,CAAA;GACE;;CACK,CAAA;AAEhB,CACF;AAEA,EAAc,cAAc"}

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

@@ -0,0 +1,4 @@
+import { AnimatedIconHandle, AnimatedIconProps } from './types';
+declare const LayersIcon: import('react').ForwardRefExoticComponent<AnimatedIconProps & import('react').RefAttributes<AnimatedIconHandle>>;
+export default LayersIcon;
+//# sourceMappingURL=layers-icon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"layers-icon.d.ts","sourceRoot":"","sources":["../../src/animations/layers-icon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAGrE,QAAA,MAAM,UAAU,kHAkEf,CAAC;AAIF,eAAe,UAAU,CAAC"}

package/dist/animations/layers-icon.js

@@ -0,0 +1,68 @@
+import { forwardRef as e, useImperativeHandle as t } from "react";
+import { motion as n, useAnimate as r } from "motion/react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/animations/layers-icon.tsx
+var o = e(({ size: e = 24, color: o = "currentColor", strokeWidth: s = 2, className: c = "" }, l) => {
+	let [u, d] = r(), f = async () => {
+		await d(".top-block", { x: -20 }, {
+			duration: .4,
+			ease: [
+				.4,
+				0,
+				.2,
+				1
+			]
+		});
+	}, p = async () => {
+		await d(".top-block", { x: 0 }, {
+			duration: .4,
+			ease: [
+				.4,
+				0,
+				.2,
+				1
+			]
+		});
+	};
+	return t(l, () => ({
+		startAnimation: f,
+		stopAnimation: p
+	})), /* @__PURE__ */ a(n.svg, {
+		ref: u,
+		onHoverStart: () => {
+			f();
+		},
+		onHoverEnd: () => {
+			p();
+		},
+		width: e,
+		height: e,
+		viewBox: "0 0 120 120",
+		fill: "none",
+		strokeWidth: s,
+		xmlns: "http://www.w3.org/2000/svg",
+		className: `cursor-pointer ${c}`,
+		style: { overflow: "visible" },
+		children: [/* @__PURE__ */ i(n.rect, {
+			className: "top-block",
+			x: "44",
+			y: "22",
+			width: "56",
+			height: "36",
+			rx: "10",
+			fill: o
+		}), /* @__PURE__ */ i("rect", {
+			x: "20",
+			y: "62",
+			width: "64",
+			height: "40",
+			rx: "12",
+			fill: o
+		})]
+	});
+});
+o.displayName = "LayersIcon";
+//#endregion
+export { o as default };
+
+//# sourceMappingURL=layers-icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"layers-icon.js","names":[],"sources":["../../src/animations/layers-icon.tsx"],"sourcesContent":["import { forwardRef, useImperativeHandle } from \"react\";\nimport type { AnimatedIconHandle, AnimatedIconProps } from \"./types\";\nimport { motion, useAnimate } from \"motion/react\";\n\nconst LayersIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(\n  (\n    { size = 24, color = \"currentColor\", strokeWidth = 2, className = \"\" },\n    ref,\n  ) => {\n    const [scope, animate] = useAnimate();\n\n    const start = async () => {\n      await animate(\n        \".top-block\",\n        { x: -20 },\n        { duration: 0.4, ease: [0.4, 0, 0.2, 1] },\n      );\n    };\n\n    const stop = async () => {\n      await animate(\n        \".top-block\",\n        { x: 0 },\n        { duration: 0.4, ease: [0.4, 0, 0.2, 1] },\n      );\n    };\n\n    useImperativeHandle(ref, () => ({\n      startAnimation: start,\n      stopAnimation: stop,\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        width={size}\n        height={size}\n        viewBox=\"0 0 120 120\"\n        fill=\"none\"\n        strokeWidth={strokeWidth}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        className={`cursor-pointer ${className}`}\n        style={{ overflow: \"visible\" }}\n      >\n        {/* Top block */}\n        <motion.rect\n          className=\"top-block\"\n          x=\"44\"\n          y=\"22\"\n          width=\"56\"\n          height=\"36\"\n          rx=\"10\"\n          fill={color}\n        />\n\n        {/* Bottom block */}\n        <rect x=\"20\" y=\"62\" width=\"64\" height=\"40\" rx=\"12\" fill={color} />\n      </motion.svg>\n    );\n  },\n);\n\nLayersIcon.displayName = \"LayersIcon\";\n\nexport default LayersIcon;\n"],"mappings":";;;;AAIA,IAAM,IAAa,GAEf,EAAE,UAAO,IAAI,WAAQ,gBAAgB,iBAAc,GAAG,eAAY,MAClE,MACG;CACH,IAAM,CAAC,GAAO,KAAW,EAAW,GAE9B,IAAQ,YAAY;EACxB,MAAM,EACJ,cACA,EAAE,GAAG,IAAI,GACT;GAAE,UAAU;GAAK,MAAM;IAAC;IAAK;IAAG;IAAK;GAAC;EAAE,CAC1C;CACF,GAEM,IAAO,YAAY;EACvB,MAAM,EACJ,cACA,EAAE,GAAG,EAAE,GACP;GAAE,UAAU;GAAK,MAAM;IAAC;IAAK;IAAG;IAAK;GAAC;EAAE,CAC1C;CACF;CAeA,OAbA,EAAoB,UAAY;EAC9B,gBAAgB;EAChB,eAAe;CACjB,EAAE,GAWA,kBAAC,EAAO,KAAR;EACE,KAAK;EACL,oBAX2B;GAC7B,EAAM;EACR;EAUI,kBARyB;GAC3B,EAAK;EACP;EAOI,OAAO;EACP,QAAQ;EACR,SAAQ;EACR,MAAK;EACQ;EACb,OAAM;EACN,WAAW,kBAAkB;EAC7B,OAAO,EAAE,UAAU,UAAU;EAX/B,UAAA,CAcE,kBAAC,EAAO,MAAR;GACE,WAAU;GACV,GAAE;GACF,GAAE;GACF,OAAM;GACN,QAAO;GACP,IAAG;GACH,MAAM;EACP,CAAA,GAGD,kBAAC,QAAD;GAAM,GAAE;GAAK,GAAE;GAAK,OAAM;GAAK,QAAO;GAAK,IAAG;GAAK,MAAM;EAAQ,CAAA,CACvD;;AAEhB,CACF;AAEA,EAAW,cAAc"}

package/dist/animations/layout-bottombar-collapse-icon.d.ts

@@ -0,0 +1,4 @@
+import { AnimatedIconHandle, AnimatedIconProps } from './types';
+declare const LayoutBottombarCollapseIcon: import('react').ForwardRefExoticComponent<AnimatedIconProps & import('react').RefAttributes<AnimatedIconHandle>>;
+export default LayoutBottombarCollapseIcon;
+//# sourceMappingURL=layout-bottombar-collapse-icon.d.ts.map

package/dist/animations/layout-bottombar-collapse-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-bottombar-collapse-icon.d.ts","sourceRoot":"","sources":["../../src/animations/layout-bottombar-collapse-icon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAGrE,QAAA,MAAM,2BAA2B,kHAsE/B,CAAC;AAGH,eAAe,2BAA2B,CAAC"}

package/dist/animations/layout-bottombar-collapse-icon.js

@@ -0,0 +1,54 @@
+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/layout-bottombar-collapse-icon.tsx
+var s = e(({ size: e = 24, color: s = "currentColor", className: c = "" }, l) => {
+	let [u, d] = i(), f = t(async () => {
+		d(".chevron", { y: 2 }, {
+			duration: .3,
+			ease: "easeOut"
+		}), d(".bottombar", { opacity: .6 }, {
+			duration: .3,
+			ease: "easeInOut"
+		});
+	}, [d]), p = t(async () => {
+		d(".chevron, .bottombar", {
+			y: 0,
+			opacity: 1
+		}, {
+			duration: .25,
+			ease: "easeInOut"
+		});
+	}, [d]);
+	return n(l, () => ({
+		startAnimation: f,
+		stopAnimation: p
+	})), /* @__PURE__ */ o(r.svg, {
+		ref: u,
+		xmlns: "http://www.w3.org/2000/svg",
+		width: e,
+		height: e,
+		viewBox: "0 0 24 24",
+		fill: s,
+		className: `cursor-pointer ${c}`,
+		onHoverStart: f,
+		onHoverEnd: p,
+		children: [
+			/* @__PURE__ */ a("path", {
+				stroke: "none",
+				d: "M0 0h24v24H0z",
+				fill: "none"
+			}),
+			/* @__PURE__ */ a("path", { d: "M18 3a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h12zm0 2h-12a1 1 0 0 0 -.993 .883l-.007 .117v9h14v-9a1 1 0 0 0 -.883 -.993l-.117 -.007z" }),
+			/* @__PURE__ */ a(r.g, {
+				className: "chevron",
+				children: /* @__PURE__ */ a("path", { d: "M10.613 8.21l.094 .083l1.293 1.292l1.293 -1.292a1 1 0 0 1 1.32 -.083l.094 .083a1 1 0 0 1 .083 1.32l-.083 .094l-2 2a1 1 0 0 1 -1.32 .083l-.094 -.083l-2 -2a1 1 0 0 1 1.32 -1.497z" })
+			})
+		]
+	});
+});
+s.displayName = "LayoutBottombarCollapseIcon";
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=layout-bottombar-collapse-icon.js.map

package/dist/animations/layout-bottombar-collapse-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-bottombar-collapse-icon.js","names":[],"sources":["../../src/animations/layout-bottombar-collapse-icon.tsx"],"sourcesContent":["import { forwardRef, useImperativeHandle, useCallback } from \"react\";\nimport type { AnimatedIconHandle, AnimatedIconProps } from \"./types\";\nimport { motion, useAnimate } from \"motion/react\";\n\nconst LayoutBottombarCollapseIcon = forwardRef<\n  AnimatedIconHandle,\n  AnimatedIconProps\n>(({ size = 24, color = \"currentColor\", className = \"\" }, ref) => {\n  const [scope, animate] = useAnimate();\n\n  const start = useCallback(async () => {\n    animate(\n      \".chevron\",\n      {\n        y: 2,\n      },\n      {\n        duration: 0.3,\n        ease: \"easeOut\",\n      },\n    );\n\n    animate(\n      \".bottombar\",\n      {\n        opacity: 0.6,\n      },\n      {\n        duration: 0.3,\n        ease: \"easeInOut\",\n      },\n    );\n  }, [animate]);\n\n  const stop = useCallback(async () => {\n    animate(\n      \".chevron, .bottombar\",\n      {\n        y: 0,\n        opacity: 1,\n      },\n      {\n        duration: 0.25,\n        ease: \"easeInOut\",\n      },\n    );\n  }, [animate]);\n\n  useImperativeHandle(ref, () => ({\n    startAnimation: start,\n    stopAnimation: 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={color}\n      className={`cursor-pointer ${className}`}\n      onHoverStart={start}\n      onHoverEnd={stop}\n    >\n      <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n\n      <path d=\"M18 3a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h12zm0 2h-12a1 1 0 0 0 -.993 .883l-.007 .117v9h14v-9a1 1 0 0 0 -.883 -.993l-.117 -.007z\" />\n\n      <motion.g className=\"chevron\">\n        <path d=\"M10.613 8.21l.094 .083l1.293 1.292l1.293 -1.292a1 1 0 0 1 1.32 -.083l.094 .083a1 1 0 0 1 .083 1.32l-.083 .094l-2 2a1 1 0 0 1 -1.32 .083l-.094 -.083l-2 -2a1 1 0 0 1 1.32 -1.497z\" />\n      </motion.g>\n    </motion.svg>\n  );\n});\n\nLayoutBottombarCollapseIcon.displayName = \"LayoutBottombarCollapseIcon\";\nexport default LayoutBottombarCollapseIcon;\n"],"mappings":";;;;AAIA,IAAM,IAA8B,GAGjC,EAAE,UAAO,IAAI,WAAQ,gBAAgB,eAAY,MAAM,MAAQ;CAChE,IAAM,CAAC,GAAO,KAAW,EAAW,GAE9B,IAAQ,EAAY,YAAY;EAYpC,AAXA,EACE,YACA,EACE,GAAG,EACL,GACA;GACE,UAAU;GACV,MAAM;EACR,CACF,GAEA,EACE,cACA,EACE,SAAS,GACX,GACA;GACE,UAAU;GACV,MAAM;EACR,CACF;CACF,GAAG,CAAC,CAAO,CAAC,GAEN,IAAO,EAAY,YAAY;EACnC,EACE,wBACA;GACE,GAAG;GACH,SAAS;EACX,GACA;GACE,UAAU;GACV,MAAM;EACR,CACF;CACF,GAAG,CAAC,CAAO,CAAC;CAOZ,OALA,EAAoB,UAAY;EAC9B,gBAAgB;EAChB,eAAe;CACjB,EAAE,GAGA,kBAAC,EAAO,KAAR;EACE,KAAK;EACL,OAAM;EACN,OAAO;EACP,QAAQ;EACR,SAAQ;EACR,MAAM;EACN,WAAW,kBAAkB;EAC7B,cAAc;EACd,YAAY;EATd,UAAA;GAWE,kBAAC,QAAD;IAAM,QAAO;IAAO,GAAE;IAAgB,MAAK;GAAQ,CAAA;GAEnD,kBAAC,QAAD,EAAM,GAAE,kPAAmP,CAAA;GAE3P,kBAAC,EAAO,GAAR;IAAU,WAAU;IAClB,UAAA,kBAAC,QAAD,EAAM,GAAE,mLAAoL,CAAA;GACpL,CAAA;EACA;;AAEhB,CAAC;AAED,EAA4B,cAAc"}

package/dist/animations/layout-dashboard-icon.d.ts

@@ -0,0 +1,4 @@
+import { AnimatedIconHandle, AnimatedIconProps } from './types';
+declare const LayoutDashboardIcon: import('react').ForwardRefExoticComponent<AnimatedIconProps & import('react').RefAttributes<AnimatedIconHandle>>;
+export default LayoutDashboardIcon;
+//# sourceMappingURL=layout-dashboard-icon.d.ts.map

package/dist/animations/layout-dashboard-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-dashboard-icon.d.ts","sourceRoot":"","sources":["../../src/animations/layout-dashboard-icon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAGrE,QAAA,MAAM,mBAAmB,kHA+FxB,CAAC;AAIF,eAAe,mBAAmB,CAAC"}

package/dist/animations/layout-dashboard-icon.js

@@ -0,0 +1,114 @@
+import { forwardRef as e, useImperativeHandle as t } from "react";
+import { motion as n, useAnimate as r } from "motion/react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/animations/layout-dashboard-icon.tsx
+var o = e(({ size: e = 40, className: o = "", strokeWidth: s = 2, color: c = "currentColor" }, l) => {
+	let [u, d] = r(), f = async () => {
+		d(".rect-1", { x: 10 }, {
+			duration: .3,
+			ease: "easeInOut"
+		}), d(".rect-2", {
+			y: 12,
+			x: -1
+		}, {
+			duration: .3,
+			ease: "easeInOut"
+		}), d(".rect-3", { x: -10 }, {
+			duration: .3,
+			ease: "easeInOut"
+		}), d(".rect-4", {
+			y: -12,
+			x: 1
+		}, {
+			duration: .3,
+			ease: "easeInOut"
+		});
+	}, p = async () => {
+		d(".rect-1, .rect-2, .rect-3, .rect-4", {
+			scale: 1,
+			x: 0,
+			y: 0
+		}, {
+			duration: .2,
+			ease: "easeInOut"
+		});
+	};
+	return t(l, () => ({
+		startAnimation: f,
+		stopAnimation: p
+	})), /* @__PURE__ */ a(n.svg, {
+		ref: u,
+		onHoverStart: f,
+		onHoverEnd: p,
+		xmlns: "http://www.w3.org/2000/svg",
+		width: e,
+		height: e,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		color: c,
+		strokeWidth: s,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		className: `cursor-pointer ${o}`,
+		initial: {
+			x: 0,
+			y: 0
+		},
+		children: [
+			/* @__PURE__ */ i(n.rect, {
+				initial: {
+					x: 0,
+					y: 0
+				},
+				className: "rect-1",
+				width: "7",
+				height: "9",
+				x: "3",
+				y: "3",
+				rx: "1"
+			}),
+			/* @__PURE__ */ i(n.rect, {
+				initial: {
+					x: 0,
+					y: 0
+				},
+				className: "rect-2",
+				width: "7",
+				height: "5",
+				x: "14",
+				y: "3",
+				rx: "1"
+			}),
+			/* @__PURE__ */ i(n.rect, {
+				initial: {
+					x: 0,
+					y: 0
+				},
+				className: "rect-3",
+				width: "7",
+				height: "9",
+				x: "14",
+				y: "12",
+				rx: "1"
+			}),
+			/* @__PURE__ */ i(n.rect, {
+				initial: {
+					x: 0,
+					y: 0
+				},
+				className: "rect-4",
+				width: "7",
+				height: "5",
+				x: "3",
+				y: "16",
+				rx: "1"
+			})
+		]
+	});
+});
+o.displayName = "LayoutDashboardIcon";
+//#endregion
+export { o as default };
+
+//# sourceMappingURL=layout-dashboard-icon.js.map

package/dist/animations/layout-dashboard-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-dashboard-icon.js","names":[],"sources":["../../src/animations/layout-dashboard-icon.tsx"],"sourcesContent":["import { forwardRef, useImperativeHandle } from \"react\";\nimport type { AnimatedIconHandle, AnimatedIconProps } from \"./types\";\nimport { motion, useAnimate } from \"motion/react\";\n\nconst LayoutDashboardIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(\n  (\n    { size = 40, className = \"\", strokeWidth = 2, color = \"currentColor\" },\n    ref,\n  ) => {\n    const [scope, animate] = useAnimate();\n\n    const start = async () => {\n      animate(\".rect-1\", { x: 10 }, { duration: 0.3, ease: \"easeInOut\" });\n\n      animate(\n        \".rect-2\",\n        { y: 12, x: -1 },\n        { duration: 0.3, ease: \"easeInOut\" },\n      );\n      animate(\".rect-3\", { x: -10 }, { duration: 0.3, ease: \"easeInOut\" });\n      animate(\n        \".rect-4\",\n        { y: -12, x: 1 },\n        { duration: 0.3, ease: \"easeInOut\" },\n      );\n    };\n\n    const stop = async () => {\n      animate(\n        \".rect-1, .rect-2, .rect-3, .rect-4\",\n        { scale: 1, x: 0, y: 0 },\n        { duration: 0.2, ease: \"easeInOut\" },\n      );\n    };\n\n    useImperativeHandle(ref, () => {\n      return {\n        startAnimation: start,\n        stopAnimation: stop,\n      };\n    });\n\n    return (\n      <motion.svg\n        ref={scope}\n        onHoverStart={start}\n        onHoverEnd={stop}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width={size}\n        height={size}\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        color={color}\n        strokeWidth={strokeWidth}\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className={`cursor-pointer ${className}`}\n        initial={{ x: 0, y: 0 }}\n      >\n        <motion.rect\n          initial={{ x: 0, y: 0 }}\n          className=\"rect-1\"\n          width=\"7\"\n          height=\"9\"\n          x=\"3\"\n          y=\"3\"\n          rx=\"1\"\n        />\n        <motion.rect\n          initial={{ x: 0, y: 0 }}\n          className=\"rect-2\"\n          width=\"7\"\n          height=\"5\"\n          x=\"14\"\n          y=\"3\"\n          rx=\"1\"\n        />\n        <motion.rect\n          initial={{ x: 0, y: 0 }}\n          className=\"rect-3\"\n          width=\"7\"\n          height=\"9\"\n          x=\"14\"\n          y=\"12\"\n          rx=\"1\"\n        />\n        <motion.rect\n          initial={{ x: 0, y: 0 }}\n          className=\"rect-4\"\n          width=\"7\"\n          height=\"5\"\n          x=\"3\"\n          y=\"16\"\n          rx=\"1\"\n        />\n      </motion.svg>\n    );\n  },\n);\n\nLayoutDashboardIcon.displayName = \"LayoutDashboardIcon\";\n\nexport default LayoutDashboardIcon;\n"],"mappings":";;;;AAIA,IAAM,IAAsB,GAExB,EAAE,UAAO,IAAI,eAAY,IAAI,iBAAc,GAAG,WAAQ,kBACtD,MACG;CACH,IAAM,CAAC,GAAO,KAAW,EAAW,GAE9B,IAAQ,YAAY;EASxB,AARA,EAAQ,WAAW,EAAE,GAAG,GAAG,GAAG;GAAE,UAAU;GAAK,MAAM;EAAY,CAAC,GAElE,EACE,WACA;GAAE,GAAG;GAAI,GAAG;EAAG,GACf;GAAE,UAAU;GAAK,MAAM;EAAY,CACrC,GACA,EAAQ,WAAW,EAAE,GAAG,IAAI,GAAG;GAAE,UAAU;GAAK,MAAM;EAAY,CAAC,GACnE,EACE,WACA;GAAE,GAAG;GAAK,GAAG;EAAE,GACf;GAAE,UAAU;GAAK,MAAM;EAAY,CACrC;CACF,GAEM,IAAO,YAAY;EACvB,EACE,sCACA;GAAE,OAAO;GAAG,GAAG;GAAG,GAAG;EAAE,GACvB;GAAE,UAAU;GAAK,MAAM;EAAY,CACrC;CACF;CASA,OAPA,EAAoB,UACX;EACL,gBAAgB;EAChB,eAAe;CACjB,EACD,GAGC,kBAAC,EAAO,KAAR;EACE,KAAK;EACL,cAAc;EACd,YAAY;EACZ,OAAM;EACN,OAAO;EACP,QAAQ;EACR,SAAQ;EACR,MAAK;EACL,QAAO;EACA;EACM;EACb,eAAc;EACd,gBAAe;EACf,WAAW,kBAAkB;EAC7B,SAAS;GAAE,GAAG;GAAG,GAAG;EAAE;EAfxB,UAAA;GAiBE,kBAAC,EAAO,MAAR;IACE,SAAS;KAAE,GAAG;KAAG,GAAG;IAAE;IACtB,WAAU;IACV,OAAM;IACN,QAAO;IACP,GAAE;IACF,GAAE;IACF,IAAG;GACJ,CAAA;GACD,kBAAC,EAAO,MAAR;IACE,SAAS;KAAE,GAAG;KAAG,GAAG;IAAE;IACtB,WAAU;IACV,OAAM;IACN,QAAO;IACP,GAAE;IACF,GAAE;IACF,IAAG;GACJ,CAAA;GACD,kBAAC,EAAO,MAAR;IACE,SAAS;KAAE,GAAG;KAAG,GAAG;IAAE;IACtB,WAAU;IACV,OAAM;IACN,QAAO;IACP,GAAE;IACF,GAAE;IACF,IAAG;GACJ,CAAA;GACD,kBAAC,EAAO,MAAR;IACE,SAAS;KAAE,GAAG;KAAG,GAAG;IAAE;IACtB,WAAU;IACV,OAAM;IACN,QAAO;IACP,GAAE;IACF,GAAE;IACF,IAAG;GACJ,CAAA;EACS;;AAEhB,CACF;AAEA,EAAoB,cAAc"}

package/dist/animations/layout-sidebar-right-collapse-icon.d.ts

@@ -0,0 +1,4 @@
+import { AnimatedIconHandle, AnimatedIconProps } from './types';
+declare const LayoutSidebarRightCollapseIcon: import('react').ForwardRefExoticComponent<AnimatedIconProps & import('react').RefAttributes<AnimatedIconHandle>>;
+export default LayoutSidebarRightCollapseIcon;
+//# sourceMappingURL=layout-sidebar-right-collapse-icon.d.ts.map

package/dist/animations/layout-sidebar-right-collapse-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-sidebar-right-collapse-icon.d.ts","sourceRoot":"","sources":["../../src/animations/layout-sidebar-right-collapse-icon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAErE,QAAA,MAAM,8BAA8B,kHA8DnC,CAAC;AAIF,eAAe,8BAA8B,CAAC"}