arxatec-ui 0.1.60 → 0.1.63

package/dist/components/animated_icons/components/book_text/index.d.ts

@@ -1,10 +1,7 @@
 import { HTMLAttributes } from 'react';
-export interface BookTextIconHandle {
-    startAnimation: () => void;
-    stopAnimation: () => void;
-}
-interface BookTextIconProps extends HTMLAttributes<HTMLDivElement> {
+import { AnimatedIconHandle } from '../../hooks/use_animated_icon';
+interface Props extends HTMLAttributes<HTMLDivElement> {
     size?: number;
 }
-declare const BookTextIcon: import('react').ForwardRefExoticComponent<BookTextIconProps & import('react').RefAttributes<BookTextIconHandle>>;
+declare const BookTextIcon: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<AnimatedIconHandle>>;
 export { BookTextIcon };

package/dist/components/animated_icons/components/book_text/index.js

@@ -1,28 +1,27 @@
+"use client";
 import { cn as e } from "../../../../utilities/class/index.js";
-import { forwardRef as t, useCallback as n, useImperativeHandle as r, useRef as i } from "react";
-import { motion as a, useAnimation as o } from "motion/react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useAnimatedIconHandle as t } from "../../hooks/use_animated_icon_handle/index.js";
+import { forwardRef as n } from "react";
+import { motion as r, useAnimation as i } from "motion/react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/components/animated_icons/components/book_text/index.tsx
-var l = t(({ onMouseEnter: t, onMouseLeave: l, className: u, size: d = 28, ...f }, p) => {
-	let m = o(), h = i(!1);
-	r(p, () => (h.current = !0, {
-		startAnimation: () => m.start("animate"),
-		stopAnimation: () => m.start("normal")
-	}));
-	let g = n((e) => {
-		h.current ? t?.(e) : m.start("animate");
-	}, [m, t]), _ = n((e) => {
-		h.current ? l?.(e) : m.start("normal");
-	}, [m, l]);
-	return /* @__PURE__ */ s("div", {
-		className: e(u),
-		onMouseEnter: g,
-		onMouseLeave: _,
-		...f,
-		children: /* @__PURE__ */ c(a.svg, {
-			animate: m,
+var s = n(({ onMouseEnter: n, onMouseLeave: s, className: c, size: l = 28, ...u }, d) => {
+	let f = i(), p = t({
+		ref: d,
+		onMouseEnter: n,
+		onMouseLeave: s,
+		start: () => f.start("animate"),
+		stop: () => f.start("normal")
+	});
+	return /* @__PURE__ */ a("div", {
+		"data-slot": "animated-icon",
+		className: e(c),
+		...p,
+		...u,
+		children: /* @__PURE__ */ o(r.svg, {
+			animate: f,
 			fill: "none",
-			height: d,
+			height: l,
 			stroke: "currentColor",
 			strokeLinecap: "round",
 			strokeLinejoin: "round",
@@ -65,18 +64,18 @@ var l = t(({ onMouseEnter: t, onMouseLeave: l, className: u, size: d = 28, ...f
 				}
 			},
 			viewBox: "0 0 24 24",
-			width: d,
+			width: l,
 			xmlns: "http://www.w3.org/2000/svg",
 			children: [
-				/* @__PURE__ */ s("path", { d: "M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20" }),
-				/* @__PURE__ */ s("path", { d: "M8 11h8" }),
-				/* @__PURE__ */ s("path", { d: "M8 7h6" })
+				/* @__PURE__ */ a("path", { d: "M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20" }),
+				/* @__PURE__ */ a("path", { d: "M8 11h8" }),
+				/* @__PURE__ */ a("path", { d: "M8 7h6" })
 			]
 		})
 	});
 });
-l.displayName = "BookTextIcon";
+s.displayName = "BookTextIcon";
 //#endregion
-export { l as BookTextIcon };
+export { s as BookTextIcon };
 
 //# sourceMappingURL=index.js.map

package/dist/components/animated_icons/components/book_text/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/animated_icons/components/book_text/index.tsx"],"sourcesContent":["import { motion, useAnimation } from \"motion/react\";\nimport type { HTMLAttributes } from \"react\";\nimport { forwardRef, useCallback, useImperativeHandle, useRef } from \"react\";\n\nimport { cn } from \"@/utilities/index\";\n\nexport interface BookTextIconHandle {\n  startAnimation: () => void;\n  stopAnimation: () => void;\n}\n\ninterface BookTextIconProps extends HTMLAttributes<HTMLDivElement> {\n  size?: number;\n}\n\nconst BookTextIcon = forwardRef<BookTextIconHandle, BookTextIconProps>(\n  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {\n    const controls = useAnimation();\n    const isControlledRef = useRef(false);\n\n    useImperativeHandle(ref, () => {\n      isControlledRef.current = true;\n\n      return {\n        startAnimation: () => controls.start(\"animate\"),\n        stopAnimation: () => controls.start(\"normal\"),\n      };\n    });\n\n    const handleMouseEnter = useCallback(\n      (e: React.MouseEvent<HTMLDivElement>) => {\n        if (isControlledRef.current) {\n          onMouseEnter?.(e);\n        } else {\n          controls.start(\"animate\");\n        }\n      },\n      [controls, onMouseEnter]\n    );\n\n    const handleMouseLeave = useCallback(\n      (e: React.MouseEvent<HTMLDivElement>) => {\n        if (isControlledRef.current) {\n          onMouseLeave?.(e);\n        } else {\n          controls.start(\"normal\");\n        }\n      },\n      [controls, onMouseLeave]\n    );\n\n    return (\n      <div\n        className={cn(className)}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        {...props}\n      >\n        <motion.svg\n          animate={controls}\n          fill=\"none\"\n          height={size}\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          variants={{\n            animate: {\n              scale: [1, 1.04, 1],\n              rotate: [0, -8, 8, -8, 0],\n              y: [0, -2, 0],\n              transition: {\n                duration: 0.6,\n                ease: \"easeInOut\",\n                times: [0, 0.2, 0.5, 0.8, 1],\n              },\n            },\n            normal: {\n              scale: 1,\n              rotate: 0,\n              y: 0,\n            },\n          }}\n          viewBox=\"0 0 24 24\"\n          width={size}\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20\" />\n          <path d=\"M8 11h8\" />\n          <path d=\"M8 7h6\" />\n        </motion.svg>\n      </div>\n    );\n  }\n);\n\nBookTextIcon.displayName = \"BookTextIcon\";\n\nexport { BookTextIcon };\n"],"mappings":";;;;;AAeA,IAAM,IAAe,GAClB,EAAE,iBAAc,iBAAc,cAAW,UAAO,IAAI,GAAG,KAAS,MAAQ;CACvE,IAAM,IAAW,GAAc,EACzB,IAAkB,EAAO,GAAM;AAErC,GAAoB,UAClB,EAAgB,UAAU,IAEnB;EACL,sBAAsB,EAAS,MAAM,UAAU;EAC/C,qBAAqB,EAAS,MAAM,SAAS;EAC9C,EACD;CAEF,IAAM,IAAmB,GACtB,MAAwC;AACvC,EAAI,EAAgB,UAClB,IAAe,EAAE,GAEjB,EAAS,MAAM,UAAU;IAG7B,CAAC,GAAU,EAAa,CACzB,EAEK,IAAmB,GACtB,MAAwC;AACvC,EAAI,EAAgB,UAClB,IAAe,EAAE,GAEjB,EAAS,MAAM,SAAS;IAG5B,CAAC,GAAU,EAAa,CACzB;AAED,QACE,kBAAC,OAAD;EACE,WAAW,EAAG,EAAU;EACxB,cAAc;EACd,cAAc;EACd,GAAI;YAEJ,kBAAC,EAAO,KAAR;GACE,SAAS;GACT,MAAK;GACL,QAAQ;GACR,QAAO;GACP,eAAc;GACd,gBAAe;GACf,aAAY;GACZ,UAAU;IACR,SAAS;KACP,OAAO;MAAC;MAAG;MAAM;MAAE;KACnB,QAAQ;MAAC;MAAG;MAAI;MAAG;MAAI;MAAE;KACzB,GAAG;MAAC;MAAG;MAAI;MAAE;KACb,YAAY;MACV,UAAU;MACV,MAAM;MACN,OAAO;OAAC;OAAG;OAAK;OAAK;OAAK;OAAE;MAC7B;KACF;IACD,QAAQ;KACN,OAAO;KACP,QAAQ;KACR,GAAG;KACJ;IACF;GACD,SAAQ;GACR,OAAO;GACP,OAAM;aA3BR;IA6BE,kBAAC,QAAD,EAAM,GAAE,0FAA2F,CAAA;IACnG,kBAAC,QAAD,EAAM,GAAE,WAAY,CAAA;IACpB,kBAAC,QAAD,EAAM,GAAE,UAAW,CAAA;IACR;;EACT,CAAA;EAGX;AAED,EAAa,cAAc"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/animated_icons/components/book_text/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { motion, useAnimation } from \"motion/react\";\nimport type { HTMLAttributes } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { cn } from \"@/utilities/index\";\n\nimport type { AnimatedIconHandle } from \"../../hooks/use_animated_icon\";\nimport { useAnimatedIconHandle } from \"../../hooks/use_animated_icon_handle\";\n\ninterface Props extends HTMLAttributes<HTMLDivElement> {\n  size?: number;\n}\n\nconst BookTextIcon = forwardRef<AnimatedIconHandle, Props>(\n  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {\n    const controls = useAnimation();\n    const hoverHandlers = useAnimatedIconHandle({\n      ref,\n      onMouseEnter,\n      onMouseLeave,\n      start: () => controls.start(\"animate\"),\n      stop: () => controls.start(\"normal\"),\n    });\n\n    return (\n      <div\n        data-slot=\"animated-icon\"\n        className={cn(className)}\n        {...hoverHandlers}\n        {...props}\n      >\n        <motion.svg\n          animate={controls}\n          fill=\"none\"\n          height={size}\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          variants={{\n            animate: {\n              scale: [1, 1.04, 1],\n              rotate: [0, -8, 8, -8, 0],\n              y: [0, -2, 0],\n              transition: {\n                duration: 0.6,\n                ease: \"easeInOut\",\n                times: [0, 0.2, 0.5, 0.8, 1],\n              },\n            },\n            normal: {\n              scale: 1,\n              rotate: 0,\n              y: 0,\n            },\n          }}\n          viewBox=\"0 0 24 24\"\n          width={size}\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20\" />\n          <path d=\"M8 11h8\" />\n          <path d=\"M8 7h6\" />\n        </motion.svg>\n      </div>\n    );\n  }\n);\n\nBookTextIcon.displayName = \"BookTextIcon\";\n\nexport { BookTextIcon };\n"],"mappings":";;;;;;;AAeA,IAAM,IAAe,GAClB,EAAE,iBAAc,iBAAc,cAAW,UAAO,IAAI,GAAG,KAAS,MAAQ;CACvE,IAAM,IAAW,GAAc,EACzB,IAAgB,EAAsB;EAC1C;EACA;EACA;EACA,aAAa,EAAS,MAAM,UAAU;EACtC,YAAY,EAAS,MAAM,SAAS;EACrC,CAAC;AAEF,QACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EAAG,EAAU;EACxB,GAAI;EACJ,GAAI;YAEJ,kBAAC,EAAO,KAAR;GACE,SAAS;GACT,MAAK;GACL,QAAQ;GACR,QAAO;GACP,eAAc;GACd,gBAAe;GACf,aAAY;GACZ,UAAU;IACR,SAAS;KACP,OAAO;MAAC;MAAG;MAAM;MAAE;KACnB,QAAQ;MAAC;MAAG;MAAI;MAAG;MAAI;MAAE;KACzB,GAAG;MAAC;MAAG;MAAI;MAAE;KACb,YAAY;MACV,UAAU;MACV,MAAM;MACN,OAAO;OAAC;OAAG;OAAK;OAAK;OAAK;OAAE;MAC7B;KACF;IACD,QAAQ;KACN,OAAO;KACP,QAAQ;KACR,GAAG;KACJ;IACF;GACD,SAAQ;GACR,OAAO;GACP,OAAM;aA3BR;IA6BE,kBAAC,QAAD,EAAM,GAAE,0FAA2F,CAAA;IACnG,kBAAC,QAAD,EAAM,GAAE,WAAY,CAAA;IACpB,kBAAC,QAAD,EAAM,GAAE,UAAW,CAAA;IACR;;EACT,CAAA;EAGX;AAED,EAAa,cAAc"}

package/dist/components/animated_icons/components/calendar_days/constants/index.d.ts

@@ -0,0 +1,6 @@
+import { Variants } from 'motion/react';
+export declare const DOTS: {
+    cx: number;
+    cy: number;
+}[];
+export declare const VARIANTS: Variants;

package/dist/components/animated_icons/components/calendar_days/constants/index.js

@@ -0,0 +1,52 @@
+//#region src/components/animated_icons/components/calendar_days/constants/index.ts
+var e = [
+	{
+		cx: 8,
+		cy: 14
+	},
+	{
+		cx: 12,
+		cy: 14
+	},
+	{
+		cx: 16,
+		cy: 14
+	},
+	{
+		cx: 8,
+		cy: 18
+	},
+	{
+		cx: 12,
+		cy: 18
+	},
+	{
+		cx: 16,
+		cy: 18
+	}
+], t = {
+	normal: {
+		opacity: 1,
+		transition: { duration: .2 }
+	},
+	animate: (e) => ({
+		opacity: [
+			1,
+			.3,
+			1
+		],
+		transition: {
+			delay: e * .1,
+			duration: .4,
+			times: [
+				0,
+				.5,
+				1
+			]
+		}
+	})
+};
+//#endregion
+export { e as DOTS, t as VARIANTS };
+
+//# sourceMappingURL=index.js.map

package/dist/components/animated_icons/components/calendar_days/constants/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../../src/components/animated_icons/components/calendar_days/constants/index.ts"],"sourcesContent":["import type { Variants } from \"motion/react\";\n\nexport const DOTS = [\n  { cx: 8, cy: 14 },\n  { cx: 12, cy: 14 },\n  { cx: 16, cy: 14 },\n  { cx: 8, cy: 18 },\n  { cx: 12, cy: 18 },\n  { cx: 16, cy: 18 },\n];\n\nexport const VARIANTS: Variants = {\n  normal: {\n    opacity: 1,\n    transition: {\n      duration: 0.2,\n    },\n  },\n  animate: (i: number) => ({\n    opacity: [1, 0.3, 1],\n    transition: {\n      delay: i * 0.1,\n      duration: 0.4,\n      times: [0, 0.5, 1],\n    },\n  }),\n};\n"],"mappings":";AAEA,IAAa,IAAO;CAClB;EAAE,IAAI;EAAG,IAAI;EAAI;CACjB;EAAE,IAAI;EAAI,IAAI;EAAI;CAClB;EAAE,IAAI;EAAI,IAAI;EAAI;CAClB;EAAE,IAAI;EAAG,IAAI;EAAI;CACjB;EAAE,IAAI;EAAI,IAAI;EAAI;CAClB;EAAE,IAAI;EAAI,IAAI;EAAI;CACnB,EAEY,IAAqB;CAChC,QAAQ;EACN,SAAS;EACT,YAAY,EACV,UAAU,IACX;EACF;CACD,UAAU,OAAe;EACvB,SAAS;GAAC;GAAG;GAAK;GAAE;EACpB,YAAY;GACV,OAAO,IAAI;GACX,UAAU;GACV,OAAO;IAAC;IAAG;IAAK;IAAE;GACnB;EACF;CACF"}

package/dist/components/animated_icons/components/calendar_days/index.d.ts

@@ -1,10 +1,7 @@
 import { HTMLAttributes } from 'react';
-export interface CalendarDaysIconHandle {
-    startAnimation: () => void;
-    stopAnimation: () => void;
-}
-interface CalendarDaysIconProps extends HTMLAttributes<HTMLDivElement> {
+import { AnimatedIconHandle } from '../../hooks/use_animated_icon';
+interface Props extends HTMLAttributes<HTMLDivElement> {
     size?: number;
 }
-declare const CalendarDaysIcon: import('react').ForwardRefExoticComponent<CalendarDaysIconProps & import('react').RefAttributes<CalendarDaysIconHandle>>;
+declare const CalendarDaysIcon: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<AnimatedIconHandle>>;
 export { CalendarDaysIcon };

package/dist/components/animated_icons/components/calendar_days/index.js

@@ -1,80 +1,33 @@
 "use client";
 import { cn as e } from "../../../../utilities/class/index.js";
-import { forwardRef as t, useCallback as n, useImperativeHandle as r, useRef as i } from "react";
+import { useAnimatedIconHandle as t } from "../../hooks/use_animated_icon_handle/index.js";
+import { DOTS as n, VARIANTS as r } from "./constants/index.js";
+import { forwardRef as i } from "react";
 import { AnimatePresence as a, motion as o, useAnimation as s } from "motion/react";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/components/animated_icons/components/calendar_days/index.tsx
-var u = [
-	{
-		cx: 8,
-		cy: 14
-	},
-	{
-		cx: 12,
-		cy: 14
-	},
-	{
-		cx: 16,
-		cy: 14
-	},
-	{
-		cx: 8,
-		cy: 18
-	},
-	{
-		cx: 12,
-		cy: 18
-	},
-	{
-		cx: 16,
-		cy: 18
-	}
-], d = {
-	normal: {
-		opacity: 1,
-		transition: { duration: .2 }
-	},
-	animate: (e) => ({
-		opacity: [
-			1,
-			.3,
-			1
-		],
-		transition: {
-			delay: e * .1,
-			duration: .4,
-			times: [
-				0,
-				.5,
-				1
-			]
-		}
-	})
-}, f = t(({ onMouseEnter: t, onMouseLeave: f, className: p, size: m = 28, ...h }, g) => {
-	let _ = s(), v = i(!1);
-	r(g, () => (v.current = !0, {
-		startAnimation: () => _.start("animate"),
-		stopAnimation: () => _.start("normal")
-	}));
-	let y = n((e) => {
-		v.current ? t?.(e) : _.start("animate");
-	}, [_, t]), b = n((e) => {
-		v.current ? f?.(e) : _.start("normal");
-	}, [_, f]);
+var u = i(({ onMouseEnter: i, onMouseLeave: u, className: d, size: f = 28, ...p }, m) => {
+	let h = s(), g = t({
+		ref: m,
+		onMouseEnter: i,
+		onMouseLeave: u,
+		start: () => h.start("animate"),
+		stop: () => h.start("normal")
+	});
 	return /* @__PURE__ */ c("div", {
-		className: e(p),
-		onMouseEnter: y,
-		onMouseLeave: b,
-		...h,
+		"data-slot": "animated-icon",
+		className: e(d),
+		...g,
+		...p,
 		children: /* @__PURE__ */ l("svg", {
 			fill: "none",
-			height: m,
+			height: f,
 			stroke: "currentColor",
 			strokeLinecap: "round",
 			strokeLinejoin: "round",
 			strokeWidth: "2",
 			viewBox: "0 0 24 24",
-			width: m,
+			width: f,
 			xmlns: "http://www.w3.org/2000/svg",
 			children: [
 				/* @__PURE__ */ c("path", { d: "M8 2v4" }),
@@ -87,8 +40,8 @@ var u = [
 					y: "4"
 				}),
 				/* @__PURE__ */ c("path", { d: "M3 10h18" }),
-				/* @__PURE__ */ c(a, { children: u.map((e, t) => /* @__PURE__ */ c(o.circle, {
-					animate: _,
+				/* @__PURE__ */ c(a, { children: n.map((e, t) => /* @__PURE__ */ c(o.circle, {
+					animate: h,
 					custom: t,
 					cx: e.cx,
 					cy: e.cy,
@@ -96,14 +49,14 @@ var u = [
 					initial: "normal",
 					r: "1",
 					stroke: "none",
-					variants: d
+					variants: r
 				}, `${e.cx}-${e.cy}`)) })
 			]
 		})
 	});
 });
-f.displayName = "CalendarDaysIcon";
+u.displayName = "CalendarDaysIcon";
 //#endregion
-export { f as CalendarDaysIcon };
+export { u as CalendarDaysIcon };
 
 //# sourceMappingURL=index.js.map

package/dist/components/animated_icons/components/calendar_days/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/animated_icons/components/calendar_days/index.tsx"],"sourcesContent":["\"use client\";\n\nimport type { Variants } from \"motion/react\";\nimport { AnimatePresence, motion, useAnimation } from \"motion/react\";\nimport type { HTMLAttributes } from \"react\";\nimport { forwardRef, useCallback, useImperativeHandle, useRef } from \"react\";\n\nimport { cn } from \"@/utilities/index\";\n\nexport interface CalendarDaysIconHandle {\n  startAnimation: () => void;\n  stopAnimation: () => void;\n}\n\ninterface CalendarDaysIconProps extends HTMLAttributes<HTMLDivElement> {\n  size?: number;\n}\n\nconst DOTS = [\n  { cx: 8, cy: 14 },\n  { cx: 12, cy: 14 },\n  { cx: 16, cy: 14 },\n  { cx: 8, cy: 18 },\n  { cx: 12, cy: 18 },\n  { cx: 16, cy: 18 },\n];\n\nconst VARIANTS: Variants = {\n  normal: {\n    opacity: 1,\n    transition: {\n      duration: 0.2,\n    },\n  },\n  animate: (i: number) => ({\n    opacity: [1, 0.3, 1],\n    transition: {\n      delay: i * 0.1,\n      duration: 0.4,\n      times: [0, 0.5, 1],\n    },\n  }),\n};\n\nconst CalendarDaysIcon = forwardRef<\n  CalendarDaysIconHandle,\n  CalendarDaysIconProps\n>(({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {\n  const controls = useAnimation();\n  const isControlledRef = useRef(false);\n\n  useImperativeHandle(ref, () => {\n    isControlledRef.current = true;\n    return {\n      startAnimation: () => controls.start(\"animate\"),\n      stopAnimation: () => controls.start(\"normal\"),\n    };\n  });\n\n  const handleMouseEnter = useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      if (isControlledRef.current) {\n        onMouseEnter?.(e);\n      } else {\n        controls.start(\"animate\");\n      }\n    },\n    [controls, onMouseEnter]\n  );\n\n  const handleMouseLeave = useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      if (isControlledRef.current) {\n        onMouseLeave?.(e);\n      } else {\n        controls.start(\"normal\");\n      }\n    },\n    [controls, onMouseLeave]\n  );\n\n  return (\n    <div\n      className={cn(className)}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      {...props}\n    >\n      <svg\n        fill=\"none\"\n        height={size}\n        stroke=\"currentColor\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeWidth=\"2\"\n        viewBox=\"0 0 24 24\"\n        width={size}\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path d=\"M8 2v4\" />\n        <path d=\"M16 2v4\" />\n        <rect height=\"18\" rx=\"2\" width=\"18\" x=\"3\" y=\"4\" />\n        <path d=\"M3 10h18\" />\n        <AnimatePresence>\n          {DOTS.map((dot, index) => (\n            <motion.circle\n              animate={controls}\n              custom={index}\n              cx={dot.cx}\n              cy={dot.cy}\n              fill=\"currentColor\"\n              initial=\"normal\"\n              key={`${dot.cx}-${dot.cy}`}\n              r=\"1\"\n              stroke=\"none\"\n              variants={VARIANTS}\n            />\n          ))}\n        </AnimatePresence>\n      </svg>\n    </div>\n  );\n});\n\nCalendarDaysIcon.displayName = \"CalendarDaysIcon\";\n\nexport { CalendarDaysIcon };\n"],"mappings":";;;;;;AAkBA,IAAM,IAAO;CACX;EAAE,IAAI;EAAG,IAAI;EAAI;CACjB;EAAE,IAAI;EAAI,IAAI;EAAI;CAClB;EAAE,IAAI;EAAI,IAAI;EAAI;CAClB;EAAE,IAAI;EAAG,IAAI;EAAI;CACjB;EAAE,IAAI;EAAI,IAAI;EAAI;CAClB;EAAE,IAAI;EAAI,IAAI;EAAI;CACnB,EAEK,IAAqB;CACzB,QAAQ;EACN,SAAS;EACT,YAAY,EACV,UAAU,IACX;EACF;CACD,UAAU,OAAe;EACvB,SAAS;GAAC;GAAG;GAAK;GAAE;EACpB,YAAY;GACV,OAAO,IAAI;GACX,UAAU;GACV,OAAO;IAAC;IAAG;IAAK;IAAE;GACnB;EACF;CACF,EAEK,IAAmB,GAGtB,EAAE,iBAAc,iBAAc,cAAW,UAAO,IAAI,GAAG,KAAS,MAAQ;CACzE,IAAM,IAAW,GAAc,EACzB,IAAkB,EAAO,GAAM;AAErC,GAAoB,UAClB,EAAgB,UAAU,IACnB;EACL,sBAAsB,EAAS,MAAM,UAAU;EAC/C,qBAAqB,EAAS,MAAM,SAAS;EAC9C,EACD;CAEF,IAAM,IAAmB,GACtB,MAAwC;AACvC,EAAI,EAAgB,UAClB,IAAe,EAAE,GAEjB,EAAS,MAAM,UAAU;IAG7B,CAAC,GAAU,EAAa,CACzB,EAEK,IAAmB,GACtB,MAAwC;AACvC,EAAI,EAAgB,UAClB,IAAe,EAAE,GAEjB,EAAS,MAAM,SAAS;IAG5B,CAAC,GAAU,EAAa,CACzB;AAED,QACE,kBAAC,OAAD;EACE,WAAW,EAAG,EAAU;EACxB,cAAc;EACd,cAAc;EACd,GAAI;YAEJ,kBAAC,OAAD;GACE,MAAK;GACL,QAAQ;GACR,QAAO;GACP,eAAc;GACd,gBAAe;GACf,aAAY;GACZ,SAAQ;GACR,OAAO;GACP,OAAM;aATR;IAWE,kBAAC,QAAD,EAAM,GAAE,UAAW,CAAA;IACnB,kBAAC,QAAD,EAAM,GAAE,WAAY,CAAA;IACpB,kBAAC,QAAD;KAAM,QAAO;KAAK,IAAG;KAAI,OAAM;KAAK,GAAE;KAAI,GAAE;KAAM,CAAA;IAClD,kBAAC,QAAD,EAAM,GAAE,YAAa,CAAA;IACrB,kBAAC,GAAD,EAAA,UACG,EAAK,KAAK,GAAK,MACd,kBAAC,EAAO,QAAR;KACE,SAAS;KACT,QAAQ;KACR,IAAI,EAAI;KACR,IAAI,EAAI;KACR,MAAK;KACL,SAAQ;KAER,GAAE;KACF,QAAO;KACP,UAAU;KACV,EAJK,GAAG,EAAI,GAAG,GAAG,EAAI,KAItB,CACF,EACc,CAAA;IACd;;EACF,CAAA;EAER;AAEF,EAAiB,cAAc"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/animated_icons/components/calendar_days/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { AnimatePresence, motion, useAnimation } from \"motion/react\";\nimport type { HTMLAttributes } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { cn } from \"@/utilities/index\";\n\nimport { DOTS, VARIANTS } from \"./constants\";\n\nimport type { AnimatedIconHandle } from \"../../hooks/use_animated_icon\";\nimport { useAnimatedIconHandle } from \"../../hooks/use_animated_icon_handle\";\n\ninterface Props extends HTMLAttributes<HTMLDivElement> {\n  size?: number;\n}\n\nconst CalendarDaysIcon = forwardRef<AnimatedIconHandle, Props>(\n  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {\n    const controls = useAnimation();\n    const hoverHandlers = useAnimatedIconHandle({\n      ref,\n      onMouseEnter,\n      onMouseLeave,\n      start: () => controls.start(\"animate\"),\n      stop: () => controls.start(\"normal\"),\n    });\n\n    return (\n      <div\n        data-slot=\"animated-icon\"\n        className={cn(className)}\n        {...hoverHandlers}\n        {...props}\n      >\n        <svg\n          fill=\"none\"\n          height={size}\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          width={size}\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M8 2v4\" />\n          <path d=\"M16 2v4\" />\n          <rect height=\"18\" rx=\"2\" width=\"18\" x=\"3\" y=\"4\" />\n          <path d=\"M3 10h18\" />\n          <AnimatePresence>\n            {DOTS.map((dot, index) => (\n              <motion.circle\n                animate={controls}\n                custom={index}\n                cx={dot.cx}\n                cy={dot.cy}\n                fill=\"currentColor\"\n                initial=\"normal\"\n                key={`${dot.cx}-${dot.cy}`}\n                r=\"1\"\n                stroke=\"none\"\n                variants={VARIANTS}\n              />\n            ))}\n          </AnimatePresence>\n        </svg>\n      </div>\n    );\n  }\n);\n\nCalendarDaysIcon.displayName = \"CalendarDaysIcon\";\n\nexport { CalendarDaysIcon };\n"],"mappings":";;;;;;;;AAiBA,IAAM,IAAmB,GACtB,EAAE,iBAAc,iBAAc,cAAW,UAAO,IAAI,GAAG,KAAS,MAAQ;CACvE,IAAM,IAAW,GAAc,EACzB,IAAgB,EAAsB;EAC1C;EACA;EACA;EACA,aAAa,EAAS,MAAM,UAAU;EACtC,YAAY,EAAS,MAAM,SAAS;EACrC,CAAC;AAEF,QACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EAAG,EAAU;EACxB,GAAI;EACJ,GAAI;YAEJ,kBAAC,OAAD;GACE,MAAK;GACL,QAAQ;GACR,QAAO;GACP,eAAc;GACd,gBAAe;GACf,aAAY;GACZ,SAAQ;GACR,OAAO;GACP,OAAM;aATR;IAWE,kBAAC,QAAD,EAAM,GAAE,UAAW,CAAA;IACnB,kBAAC,QAAD,EAAM,GAAE,WAAY,CAAA;IACpB,kBAAC,QAAD;KAAM,QAAO;KAAK,IAAG;KAAI,OAAM;KAAK,GAAE;KAAI,GAAE;KAAM,CAAA;IAClD,kBAAC,QAAD,EAAM,GAAE,YAAa,CAAA;IACrB,kBAAC,GAAD,EAAA,UACG,EAAK,KAAK,GAAK,MACd,kBAAC,EAAO,QAAR;KACE,SAAS;KACT,QAAQ;KACR,IAAI,EAAI;KACR,IAAI,EAAI;KACR,MAAK;KACL,SAAQ;KAER,GAAE;KACF,QAAO;KACP,UAAU;KACV,EAJK,GAAG,EAAI,GAAG,GAAG,EAAI,KAItB,CACF,EACc,CAAA;IACd;;EACF,CAAA;EAGX;AAED,EAAiB,cAAc"}

package/dist/components/animated_icons/components/chart_pie/constants/index.d.ts

@@ -0,0 +1,2 @@
+import { Variants } from 'motion/react';
+export declare const PATH_VARIANTS: Variants;

package/dist/components/animated_icons/components/chart_pie/constants/index.js

@@ -0,0 +1,15 @@
+//#region src/components/animated_icons/components/chart_pie/constants/index.ts
+var e = {
+	normal: {
+		translateX: 0,
+		translateY: 0
+	},
+	animate: {
+		translateX: 1.1,
+		translateY: -1.1
+	}
+};
+//#endregion
+export { e as PATH_VARIANTS };
+
+//# sourceMappingURL=index.js.map

package/dist/components/animated_icons/components/chart_pie/constants/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../../src/components/animated_icons/components/chart_pie/constants/index.ts"],"sourcesContent":["import type { Variants } from \"motion/react\";\n\nexport const PATH_VARIANTS: Variants = {\n  normal: { translateX: 0, translateY: 0 },\n  animate: { translateX: 1.1, translateY: -1.1 },\n};\n"],"mappings":";AAEA,IAAa,IAA0B;CACrC,QAAQ;EAAE,YAAY;EAAG,YAAY;EAAG;CACxC,SAAS;EAAE,YAAY;EAAK,YAAY;EAAM;CAC/C"}

package/dist/components/animated_icons/components/chart_pie/index.d.ts

@@ -1,10 +1,7 @@
 import { HTMLAttributes } from 'react';
-export interface ChartPieIconHandle {
-    startAnimation: () => void;
-    stopAnimation: () => void;
-}
-interface ChartPieIconProps extends HTMLAttributes<HTMLDivElement> {
+import { AnimatedIconHandle } from '../../hooks/use_animated_icon';
+interface Props extends HTMLAttributes<HTMLDivElement> {
     size?: number;
 }
-declare const ChartPieIcon: import('react').ForwardRefExoticComponent<ChartPieIconProps & import('react').RefAttributes<ChartPieIconHandle>>;
+declare const ChartPieIcon: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<AnimatedIconHandle>>;
 export { ChartPieIcon };

package/dist/components/animated_icons/components/chart_pie/index.js

@@ -1,46 +1,36 @@
 "use client";
 import { cn as e } from "../../../../utilities/class/index.js";
-import { forwardRef as t, useCallback as n, useImperativeHandle as r, useRef as i } from "react";
-import { motion as a, useAnimation as o } from "motion/react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useAnimatedIconHandle as t } from "../../hooks/use_animated_icon_handle/index.js";
+import { PATH_VARIANTS as n } from "./constants/index.js";
+import { forwardRef as r } from "react";
+import { motion as i, useAnimation as a } from "motion/react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/components/animated_icons/components/chart_pie/index.tsx
-var l = {
-	normal: {
-		translateX: 0,
-		translateY: 0
-	},
-	animate: {
-		translateX: 1.1,
-		translateY: -1.1
-	}
-}, u = t(({ onMouseEnter: t, onMouseLeave: u, className: d, size: f = 28, ...p }, m) => {
-	let h = o(), g = i(!1);
-	r(m, () => (g.current = !0, {
-		startAnimation: () => h.start("animate"),
-		stopAnimation: () => h.start("normal")
-	}));
-	let _ = n((e) => {
-		g.current ? t?.(e) : h.start("animate");
-	}, [h, t]), v = n((e) => {
-		g.current ? u?.(e) : h.start("normal");
-	}, [h, u]);
-	return /* @__PURE__ */ s("div", {
-		className: e(d),
-		onMouseEnter: _,
-		onMouseLeave: v,
-		...p,
-		children: /* @__PURE__ */ c("svg", {
+var c = r(({ onMouseEnter: r, onMouseLeave: c, className: l, size: u = 28, ...d }, f) => {
+	let p = a(), m = t({
+		ref: f,
+		onMouseEnter: r,
+		onMouseLeave: c,
+		start: () => p.start("animate"),
+		stop: () => p.start("normal")
+	});
+	return /* @__PURE__ */ o("div", {
+		"data-slot": "animated-icon",
+		className: e(l),
+		...m,
+		...d,
+		children: /* @__PURE__ */ s("svg", {
 			fill: "none",
-			height: f,
+			height: u,
 			stroke: "currentColor",
 			strokeLinecap: "round",
 			strokeLinejoin: "round",
 			strokeWidth: "2",
 			viewBox: "0 0 24 24",
-			width: f,
+			width: u,
 			xmlns: "http://www.w3.org/2000/svg",
-			children: [/* @__PURE__ */ s(a.path, {
-				animate: h,
+			children: [/* @__PURE__ */ o(i.path, {
+				animate: p,
 				d: "M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z",
 				transition: {
 					type: "spring",
@@ -48,13 +38,13 @@ var l = {
 					damping: 15,
 					bounce: .6
 				},
-				variants: l
-			}), /* @__PURE__ */ s("path", { d: "M21.21 15.89A10 10 0 1 1 8 2.83" })]
+				variants: n
+			}), /* @__PURE__ */ o("path", { d: "M21.21 15.89A10 10 0 1 1 8 2.83" })]
 		})
 	});
 });
-u.displayName = "ChartPieIcon";
+c.displayName = "ChartPieIcon";
 //#endregion
-export { u as ChartPieIcon };
+export { c as ChartPieIcon };
 
 //# sourceMappingURL=index.js.map

package/dist/components/animated_icons/components/chart_pie/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/animated_icons/components/chart_pie/index.tsx"],"sourcesContent":["\"use client\";\n\nimport type { Variants } from \"motion/react\";\nimport { motion, useAnimation } from \"motion/react\";\nimport type { HTMLAttributes } from \"react\";\nimport { forwardRef, useCallback, useImperativeHandle, useRef } from \"react\";\n\nimport { cn } from \"@/utilities/index\";\n\nexport interface ChartPieIconHandle {\n  startAnimation: () => void;\n  stopAnimation: () => void;\n}\n\ninterface ChartPieIconProps extends HTMLAttributes<HTMLDivElement> {\n  size?: number;\n}\n\nconst PATH_VARIANTS: Variants = {\n  normal: { translateX: 0, translateY: 0 },\n  animate: { translateX: 1.1, translateY: -1.1 },\n};\n\nconst ChartPieIcon = forwardRef<ChartPieIconHandle, ChartPieIconProps>(\n  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {\n    const controls = useAnimation();\n    const isControlledRef = useRef(false);\n\n    useImperativeHandle(ref, () => {\n      isControlledRef.current = true;\n\n      return {\n        startAnimation: () => controls.start(\"animate\"),\n        stopAnimation: () => controls.start(\"normal\"),\n      };\n    });\n\n    const handleMouseEnter = useCallback(\n      (e: React.MouseEvent<HTMLDivElement>) => {\n        if (isControlledRef.current) {\n          onMouseEnter?.(e);\n        } else {\n          controls.start(\"animate\");\n        }\n      },\n      [controls, onMouseEnter]\n    );\n\n    const handleMouseLeave = useCallback(\n      (e: React.MouseEvent<HTMLDivElement>) => {\n        if (isControlledRef.current) {\n          onMouseLeave?.(e);\n        } else {\n          controls.start(\"normal\");\n        }\n      },\n      [controls, onMouseLeave]\n    );\n\n    return (\n      <div\n        className={cn(className)}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        {...props}\n      >\n        <svg\n          fill=\"none\"\n          height={size}\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          width={size}\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <motion.path\n            animate={controls}\n            d=\"M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z\"\n            transition={{\n              type: \"spring\",\n              stiffness: 250,\n              damping: 15,\n              bounce: 0.6,\n            }}\n            variants={PATH_VARIANTS}\n          />\n          <path d=\"M21.21 15.89A10 10 0 1 1 8 2.83\" />\n        </svg>\n      </div>\n    );\n  }\n);\n\nChartPieIcon.displayName = \"ChartPieIcon\";\n\nexport { ChartPieIcon };\n"],"mappings":";;;;;;AAkBA,IAAM,IAA0B;CAC9B,QAAQ;EAAE,YAAY;EAAG,YAAY;EAAG;CACxC,SAAS;EAAE,YAAY;EAAK,YAAY;EAAM;CAC/C,EAEK,IAAe,GAClB,EAAE,iBAAc,iBAAc,cAAW,UAAO,IAAI,GAAG,KAAS,MAAQ;CACvE,IAAM,IAAW,GAAc,EACzB,IAAkB,EAAO,GAAM;AAErC,GAAoB,UAClB,EAAgB,UAAU,IAEnB;EACL,sBAAsB,EAAS,MAAM,UAAU;EAC/C,qBAAqB,EAAS,MAAM,SAAS;EAC9C,EACD;CAEF,IAAM,IAAmB,GACtB,MAAwC;AACvC,EAAI,EAAgB,UAClB,IAAe,EAAE,GAEjB,EAAS,MAAM,UAAU;IAG7B,CAAC,GAAU,EAAa,CACzB,EAEK,IAAmB,GACtB,MAAwC;AACvC,EAAI,EAAgB,UAClB,IAAe,EAAE,GAEjB,EAAS,MAAM,SAAS;IAG5B,CAAC,GAAU,EAAa,CACzB;AAED,QACE,kBAAC,OAAD;EACE,WAAW,EAAG,EAAU;EACxB,cAAc;EACd,cAAc;EACd,GAAI;YAEJ,kBAAC,OAAD;GACE,MAAK;GACL,QAAQ;GACR,QAAO;GACP,eAAc;GACd,gBAAe;GACf,aAAY;GACZ,SAAQ;GACR,OAAO;GACP,OAAM;aATR,CAWE,kBAAC,EAAO,MAAR;IACE,SAAS;IACT,GAAE;IACF,YAAY;KACV,MAAM;KACN,WAAW;KACX,SAAS;KACT,QAAQ;KACT;IACD,UAAU;IACV,CAAA,EACF,kBAAC,QAAD,EAAM,GAAE,mCAAoC,CAAA,CACxC;;EACF,CAAA;EAGX;AAED,EAAa,cAAc"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/animated_icons/components/chart_pie/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { motion, useAnimation } from \"motion/react\";\nimport type { HTMLAttributes } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { cn } from \"@/utilities/index\";\n\nimport { PATH_VARIANTS } from \"./constants\";\n\nimport type { AnimatedIconHandle } from \"../../hooks/use_animated_icon\";\nimport { useAnimatedIconHandle } from \"../../hooks/use_animated_icon_handle\";\n\ninterface Props extends HTMLAttributes<HTMLDivElement> {\n  size?: number;\n}\n\nconst ChartPieIcon = forwardRef<AnimatedIconHandle, Props>(\n  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {\n    const controls = useAnimation();\n    const hoverHandlers = useAnimatedIconHandle({\n      ref,\n      onMouseEnter,\n      onMouseLeave,\n      start: () => controls.start(\"animate\"),\n      stop: () => controls.start(\"normal\"),\n    });\n\n    return (\n      <div\n        data-slot=\"animated-icon\"\n        className={cn(className)}\n        {...hoverHandlers}\n        {...props}\n      >\n        <svg\n          fill=\"none\"\n          height={size}\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          width={size}\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <motion.path\n            animate={controls}\n            d=\"M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z\"\n            transition={{\n              type: \"spring\",\n              stiffness: 250,\n              damping: 15,\n              bounce: 0.6,\n            }}\n            variants={PATH_VARIANTS}\n          />\n          <path d=\"M21.21 15.89A10 10 0 1 1 8 2.83\" />\n        </svg>\n      </div>\n    );\n  }\n);\n\nChartPieIcon.displayName = \"ChartPieIcon\";\n\nexport { ChartPieIcon };\n"],"mappings":";;;;;;;;AAiBA,IAAM,IAAe,GAClB,EAAE,iBAAc,iBAAc,cAAW,UAAO,IAAI,GAAG,KAAS,MAAQ;CACvE,IAAM,IAAW,GAAc,EACzB,IAAgB,EAAsB;EAC1C;EACA;EACA;EACA,aAAa,EAAS,MAAM,UAAU;EACtC,YAAY,EAAS,MAAM,SAAS;EACrC,CAAC;AAEF,QACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EAAG,EAAU;EACxB,GAAI;EACJ,GAAI;YAEJ,kBAAC,OAAD;GACE,MAAK;GACL,QAAQ;GACR,QAAO;GACP,eAAc;GACd,gBAAe;GACf,aAAY;GACZ,SAAQ;GACR,OAAO;GACP,OAAM;aATR,CAWE,kBAAC,EAAO,MAAR;IACE,SAAS;IACT,GAAE;IACF,YAAY;KACV,MAAM;KACN,WAAW;KACX,SAAS;KACT,QAAQ;KACT;IACD,UAAU;IACV,CAAA,EACF,kBAAC,QAAD,EAAM,GAAE,mCAAoC,CAAA,CACxC;;EACF,CAAA;EAGX;AAED,EAAa,cAAc"}

package/dist/components/animated_icons/components/circle_help/constants/index.d.ts

@@ -0,0 +1,2 @@
+import { Variants } from 'motion/react';
+export declare const VARIANTS: Variants;

package/dist/components/animated_icons/components/circle_help/constants/index.js

@@ -0,0 +1,15 @@
+//#region src/components/animated_icons/components/circle_help/constants/index.ts
+var e = {
+	normal: { rotate: 0 },
+	animate: { rotate: [
+		0,
+		-10,
+		10,
+		-10,
+		0
+	] }
+};
+//#endregion
+export { e as VARIANTS };
+
+//# sourceMappingURL=index.js.map

package/dist/components/animated_icons/components/circle_help/constants/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../../src/components/animated_icons/components/circle_help/constants/index.ts"],"sourcesContent":["import type { Variants } from \"motion/react\";\n\nexport const VARIANTS: Variants = {\n  normal: { rotate: 0 },\n  animate: { rotate: [0, -10, 10, -10, 0] },\n};\n"],"mappings":";AAEA,IAAa,IAAqB;CAChC,QAAQ,EAAE,QAAQ,GAAG;CACrB,SAAS,EAAE,QAAQ;EAAC;EAAG;EAAK;EAAI;EAAK;EAAE,EAAE;CAC1C"}

package/dist/components/animated_icons/components/circle_help/index.d.ts

@@ -1,10 +1,7 @@
 import { HTMLAttributes } from 'react';
-export interface CircleHelpIconHandle {
-    startAnimation: () => void;
-    stopAnimation: () => void;
-}
-interface CircleHelpIconProps extends HTMLAttributes<HTMLDivElement> {
+import { AnimatedIconHandle } from '../../hooks/use_animated_icon';
+interface Props extends HTMLAttributes<HTMLDivElement> {
     size?: number;
 }
-declare const CircleHelpIcon: import('react').ForwardRefExoticComponent<CircleHelpIconProps & import('react').RefAttributes<CircleHelpIconHandle>>;
+declare const CircleHelpIcon: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<AnimatedIconHandle>>;
 export { CircleHelpIcon };

package/dist/components/animated_icons/components/circle_help/index.js

@@ -1,62 +1,52 @@
 "use client";
 import { cn as e } from "../../../../utilities/class/index.js";
-import { forwardRef as t, useCallback as n, useImperativeHandle as r, useRef as i } from "react";
-import { motion as a, useAnimation as o } from "motion/react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useAnimatedIconHandle as t } from "../../hooks/use_animated_icon_handle/index.js";
+import { VARIANTS as n } from "./constants/index.js";
+import { forwardRef as r } from "react";
+import { motion as i, useAnimation as a } from "motion/react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/components/animated_icons/components/circle_help/index.tsx
-var l = {
-	normal: { rotate: 0 },
-	animate: { rotate: [
-		0,
-		-10,
-		10,
-		-10,
-		0
-	] }
-}, u = t(({ onMouseEnter: t, onMouseLeave: u, className: d, size: f = 28, ...p }, m) => {
-	let h = o(), g = i(!1);
-	r(m, () => (g.current = !0, {
-		startAnimation: () => h.start("animate"),
-		stopAnimation: () => h.start("normal")
-	}));
-	let _ = n((e) => {
-		g.current ? t?.(e) : h.start("animate");
-	}, [h, t]), v = n((e) => {
-		g.current ? u?.(e) : h.start("normal");
-	}, [h, u]);
-	return /* @__PURE__ */ s("div", {
-		className: e(d),
-		onMouseEnter: _,
-		onMouseLeave: v,
-		...p,
-		children: /* @__PURE__ */ c("svg", {
+var c = r(({ onMouseEnter: r, onMouseLeave: c, className: l, size: u = 28, ...d }, f) => {
+	let p = a(), m = t({
+		ref: f,
+		onMouseEnter: r,
+		onMouseLeave: c,
+		start: () => p.start("animate"),
+		stop: () => p.start("normal")
+	});
+	return /* @__PURE__ */ o("div", {
+		"data-slot": "animated-icon",
+		className: e(l),
+		...m,
+		...d,
+		children: /* @__PURE__ */ s("svg", {
 			fill: "none",
-			height: f,
+			height: u,
 			stroke: "currentColor",
 			strokeLinecap: "round",
 			strokeLinejoin: "round",
 			strokeWidth: "2",
 			viewBox: "0 0 24 24",
-			width: f,
+			width: u,
 			xmlns: "http://www.w3.org/2000/svg",
-			children: [/* @__PURE__ */ s("circle", {
+			children: [/* @__PURE__ */ o("circle", {
 				cx: "12",
 				cy: "12",
 				r: "10"
-			}), /* @__PURE__ */ c(a.g, {
-				animate: h,
+			}), /* @__PURE__ */ s(i.g, {
+				animate: p,
 				transition: {
 					duration: .5,
 					ease: "easeInOut"
 				},
-				variants: l,
-				children: [/* @__PURE__ */ s("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }), /* @__PURE__ */ s("path", { d: "M12 17h.01" })]
+				variants: n,
+				children: [/* @__PURE__ */ o("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }), /* @__PURE__ */ o("path", { d: "M12 17h.01" })]
 			})]
 		})
 	});
 });
-u.displayName = "CircleHelpIcon";
+c.displayName = "CircleHelpIcon";
 //#endregion
-export { u as CircleHelpIcon };
+export { c as CircleHelpIcon };
 
 //# sourceMappingURL=index.js.map