@otl-core/next-navigation 1.1.18 → 1.1.20

package/dist/components/icons/chevron-icon.d.ts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface ChevronIconProps {
+    isOpen: boolean;
+    className?: string;
+    size?: number;
+}
+declare function ChevronIcon({ isOpen, className, size, }: ChevronIconProps): react_jsx_runtime.JSX.Element;
+
+export { ChevronIcon };

package/dist/components/icons/chevron-icon.js

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+function ChevronIcon({
+  isOpen,
+  className = "",
+  size = 24
+}) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      style: {
+        transform: isOpen ? "rotate(180deg)" : "rotate(0deg)",
+        transition: "transform 200ms ease-in-out"
+      },
+      children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
+    }
+  );
+}
+export {
+  ChevronIcon
+};
+//# sourceMappingURL=chevron-icon.js.map

package/dist/components/icons/chevron-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/icons/chevron-icon.tsx"],"sourcesContent":["interface ChevronIconProps {\n  isOpen: boolean;\n  className?: string;\n  size?: number;\n}\n\nexport function ChevronIcon({\n  isOpen,\n  className = \"\",\n  size = 24,\n}: ChevronIconProps) {\n  return (\n    <svg\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className={className}\n      style={{\n        transform: isOpen ? \"rotate(180deg)\" : \"rotate(0deg)\",\n        transition: \"transform 200ms ease-in-out\",\n      }}\n    >\n      <polyline points=\"6 9 12 15 18 9\" />\n    </svg>\n  );\n}\n"],"mappings":"AA2BM;AArBC,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,YAAY;AAAA,EACZ,OAAO;AACT,GAAqB;AACnB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,QAAO;AAAA,MACP,aAAY;AAAA,MACZ,eAAc;AAAA,MACd,gBAAe;AAAA,MACf;AAAA,MACA,OAAO;AAAA,QACL,WAAW,SAAS,mBAAmB;AAAA,QACvC,YAAY;AAAA,MACd;AAAA,MAEA,8BAAC,cAAS,QAAO,kBAAiB;AAAA;AAAA,EACpC;AAEJ;","names":[]}

package/dist/components/icons/grid-icon.d.ts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface GridIconProps {
+    isOpen: boolean;
+    className?: string;
+    size?: number;
+    animationDuration?: number;
+    animationTiming?: string;
+}
+declare function GridIcon({ isOpen, className, size, animationDuration, animationTiming, }: GridIconProps): react_jsx_runtime.JSX.Element;
+
+export { GridIcon };

package/dist/components/icons/grid-icon.js

@@ -0,0 +1,95 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+function GridIcon({
+  isOpen,
+  className = "",
+  size = 24,
+  animationDuration = 300,
+  animationTiming = "ease-in-out"
+}) {
+  const duration = `${animationDuration}ms`;
+  const hasMountedRef = useRef(false);
+  useEffect(() => {
+    hasMountedRef.current = true;
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className,
+      style: {
+        width: size,
+        height: size,
+        position: "relative",
+        // @ts-expect-error - CSS custom property
+        "--square-size": "40%"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: "25%",
+              top: "25%",
+              width: "40%",
+              height: "40%",
+              backgroundColor: "currentColor",
+              transform: "translate(-50%, -50%)",
+              animation: hasMountedRef.current ? `${isOpen ? "grid-tl-open" : "grid-tl-close"} ${duration} ${animationTiming} forwards` : "none"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: "75%",
+              top: "25%",
+              width: "40%",
+              height: "40%",
+              backgroundColor: "currentColor",
+              transform: "translate(-50%, -50%)",
+              animation: hasMountedRef.current ? `${isOpen ? "grid-tr-hide" : "grid-tr-show"} ${duration} ${animationTiming} forwards` : "none"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: "25%",
+              top: "75%",
+              width: "40%",
+              height: "40%",
+              backgroundColor: "currentColor",
+              transform: "translate(-50%, -50%)",
+              animation: hasMountedRef.current ? `${isOpen ? "grid-bl-hide" : "grid-bl-show"} ${duration} ${animationTiming} forwards` : "none"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: "75%",
+              top: "75%",
+              width: "40%",
+              height: "40%",
+              backgroundColor: "currentColor",
+              transform: "translate(-50%, -50%)",
+              animation: hasMountedRef.current ? `${isOpen ? "grid-br-open" : "grid-br-close"} ${duration} ${animationTiming} forwards` : "none"
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  GridIcon
+};
+//# sourceMappingURL=grid-icon.js.map

package/dist/components/icons/grid-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/icons/grid-icon.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef } from \"react\";\n\ninterface GridIconProps {\n  isOpen: boolean;\n  className?: string;\n  size?: number;\n  animationDuration?: number;\n  animationTiming?: string;\n}\n\nexport function GridIcon({\n  isOpen,\n  className = \"\",\n  size = 24,\n  animationDuration = 300,\n  animationTiming = \"ease-in-out\",\n}: GridIconProps) {\n  const duration = `${animationDuration}ms`;\n  const hasMountedRef = useRef(false);\n\n  useEffect(() => {\n    hasMountedRef.current = true;\n  }, []);\n\n  return (\n    <div\n      className={className}\n      style={{\n        width: size,\n        height: size,\n        position: \"relative\",\n        // @ts-expect-error - CSS custom property\n        \"--square-size\": \"40%\",\n      }}\n    >\n      <div\n        style={{\n          position: \"absolute\",\n          left: \"25%\",\n          top: \"25%\",\n          width: \"40%\",\n          height: \"40%\",\n          backgroundColor: \"currentColor\",\n          transform: \"translate(-50%, -50%)\",\n          animation: hasMountedRef.current\n            ? `${isOpen ? \"grid-tl-open\" : \"grid-tl-close\"} ${duration} ${animationTiming} forwards`\n            : \"none\",\n        }}\n      />\n      <div\n        style={{\n          position: \"absolute\",\n          left: \"75%\",\n          top: \"25%\",\n          width: \"40%\",\n          height: \"40%\",\n          backgroundColor: \"currentColor\",\n          transform: \"translate(-50%, -50%)\",\n          animation: hasMountedRef.current\n            ? `${isOpen ? \"grid-tr-hide\" : \"grid-tr-show\"} ${duration} ${animationTiming} forwards`\n            : \"none\",\n        }}\n      />\n      <div\n        style={{\n          position: \"absolute\",\n          left: \"25%\",\n          top: \"75%\",\n          width: \"40%\",\n          height: \"40%\",\n          backgroundColor: \"currentColor\",\n          transform: \"translate(-50%, -50%)\",\n          animation: hasMountedRef.current\n            ? `${isOpen ? \"grid-bl-hide\" : \"grid-bl-show\"} ${duration} ${animationTiming} forwards`\n            : \"none\",\n        }}\n      />\n      <div\n        style={{\n          position: \"absolute\",\n          left: \"75%\",\n          top: \"75%\",\n          width: \"40%\",\n          height: \"40%\",\n          backgroundColor: \"currentColor\",\n          transform: \"translate(-50%, -50%)\",\n          animation: hasMountedRef.current\n            ? `${isOpen ? \"grid-br-open\" : \"grid-br-close\"} ${duration} ${animationTiming} forwards`\n            : \"none\",\n        }}\n      />\n    </div>\n  );\n}\n"],"mappings":";AA2BI,SAUE,KAVF;AAzBJ,SAAS,WAAW,cAAc;AAU3B,SAAS,SAAS;AAAA,EACvB;AAAA,EACA,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,oBAAoB;AAAA,EACpB,kBAAkB;AACpB,GAAkB;AAChB,QAAM,WAAW,GAAG,iBAAiB;AACrC,QAAM,gBAAgB,OAAO,KAAK;AAElC,YAAU,MAAM;AACd,kBAAc,UAAU;AAAA,EAC1B,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,UAAU;AAAA;AAAA,QAEV,iBAAiB;AAAA,MACnB;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,UAAU;AAAA,cACV,MAAM;AAAA,cACN,KAAK;AAAA,cACL,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,iBAAiB;AAAA,cACjB,WAAW;AAAA,cACX,WAAW,cAAc,UACrB,GAAG,SAAS,iBAAiB,eAAe,IAAI,QAAQ,IAAI,eAAe,cAC3E;AAAA,YACN;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,UAAU;AAAA,cACV,MAAM;AAAA,cACN,KAAK;AAAA,cACL,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,iBAAiB;AAAA,cACjB,WAAW;AAAA,cACX,WAAW,cAAc,UACrB,GAAG,SAAS,iBAAiB,cAAc,IAAI,QAAQ,IAAI,eAAe,cAC1E;AAAA,YACN;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,UAAU;AAAA,cACV,MAAM;AAAA,cACN,KAAK;AAAA,cACL,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,iBAAiB;AAAA,cACjB,WAAW;AAAA,cACX,WAAW,cAAc,UACrB,GAAG,SAAS,iBAAiB,cAAc,IAAI,QAAQ,IAAI,eAAe,cAC1E;AAAA,YACN;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,UAAU;AAAA,cACV,MAAM;AAAA,cACN,KAAK;AAAA,cACL,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,iBAAiB;AAAA,cACjB,WAAW;AAAA,cACX,WAAW,cAAc,UACrB,GAAG,SAAS,iBAAiB,eAAe,IAAI,QAAQ,IAAI,eAAe,cAC3E;AAAA,YACN;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/icons/hamburger-icon.d.ts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface HamburgerIconProps {
+    isOpen: boolean;
+    className?: string;
+    size?: number;
+    animationDuration?: number;
+    animationTiming?: string;
+}
+declare function HamburgerIcon({ isOpen, className, size, animationDuration, animationTiming, }: HamburgerIconProps): react_jsx_runtime.JSX.Element;
+
+export { HamburgerIcon };

package/dist/components/icons/hamburger-icon.js

@@ -0,0 +1,78 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+function HamburgerIcon({
+  isOpen,
+  className = "",
+  size = 24,
+  animationDuration = 300,
+  animationTiming = "ease-in-out"
+}) {
+  const duration = `${animationDuration}ms`;
+  const hasMountedRef = useRef(false);
+  useEffect(() => {
+    hasMountedRef.current = true;
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className,
+      style: {
+        width: size,
+        height: size,
+        position: "relative"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: 0,
+              top: "25%",
+              width: size,
+              height: "12.5%",
+              backgroundColor: "currentColor",
+              transform: "translateY(-50%)",
+              animation: hasMountedRef.current ? `${isOpen ? "hamburger-top-open" : "hamburger-top-close"} ${duration} ${animationTiming} forwards` : "none"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: 0,
+              top: "50%",
+              width: size,
+              height: "12.5%",
+              backgroundColor: "currentColor",
+              transform: "translateY(-50%)",
+              animation: hasMountedRef.current ? `${isOpen ? "hamburger-middle-hide" : "hamburger-middle-show"} ${duration} ${animationTiming} forwards` : "none"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: 0,
+              top: "75%",
+              width: size,
+              height: "12.5%",
+              backgroundColor: "currentColor",
+              transform: "translateY(-50%)",
+              animation: hasMountedRef.current ? `${isOpen ? "hamburger-bottom-open" : "hamburger-bottom-close"} ${duration} ${animationTiming} forwards` : "none"
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  HamburgerIcon
+};
+//# sourceMappingURL=hamburger-icon.js.map

package/dist/components/icons/hamburger-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/icons/hamburger-icon.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef } from \"react\";\n\ninterface HamburgerIconProps {\n  isOpen: boolean;\n  className?: string;\n  size?: number;\n  animationDuration?: number;\n  animationTiming?: string;\n}\n\nexport function HamburgerIcon({\n  isOpen,\n  className = \"\",\n  size = 24,\n  animationDuration = 300,\n  animationTiming = \"ease-in-out\",\n}: HamburgerIconProps) {\n  const duration = `${animationDuration}ms`;\n  const hasMountedRef = useRef(false);\n\n  useEffect(() => {\n    hasMountedRef.current = true;\n  }, []);\n\n  return (\n    <div\n      className={className}\n      style={{\n        width: size,\n        height: size,\n        position: \"relative\",\n      }}\n    >\n      <div\n        style={{\n          position: \"absolute\",\n          left: 0,\n          top: \"25%\",\n          width: size,\n          height: \"12.5%\",\n          backgroundColor: \"currentColor\",\n          transform: \"translateY(-50%)\",\n          animation: hasMountedRef.current\n            ? `${isOpen ? \"hamburger-top-open\" : \"hamburger-top-close\"} ${duration} ${animationTiming} forwards`\n            : \"none\",\n        }}\n      />\n      <div\n        style={{\n          position: \"absolute\",\n          left: 0,\n          top: \"50%\",\n          width: size,\n          height: \"12.5%\",\n          backgroundColor: \"currentColor\",\n          transform: \"translateY(-50%)\",\n          animation: hasMountedRef.current\n            ? `${isOpen ? \"hamburger-middle-hide\" : \"hamburger-middle-show\"} ${duration} ${animationTiming} forwards`\n            : \"none\",\n        }}\n      />\n      <div\n        style={{\n          position: \"absolute\",\n          left: 0,\n          top: \"75%\",\n          width: size,\n          height: \"12.5%\",\n          backgroundColor: \"currentColor\",\n          transform: \"translateY(-50%)\",\n          animation: hasMountedRef.current\n            ? `${isOpen ? \"hamburger-bottom-open\" : \"hamburger-bottom-close\"} ${duration} ${animationTiming} forwards`\n            : \"none\",\n        }}\n      />\n    </div>\n  );\n}\n"],"mappings":";AA2BI,SAQE,KARF;AAzBJ,SAAS,WAAW,cAAc;AAU3B,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,oBAAoB;AAAA,EACpB,kBAAkB;AACpB,GAAuB;AACrB,QAAM,WAAW,GAAG,iBAAiB;AACrC,QAAM,gBAAgB,OAAO,KAAK;AAElC,YAAU,MAAM;AACd,kBAAc,UAAU;AAAA,EAC1B,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,UAAU;AAAA,MACZ;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,UAAU;AAAA,cACV,MAAM;AAAA,cACN,KAAK;AAAA,cACL,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,iBAAiB;AAAA,cACjB,WAAW;AAAA,cACX,WAAW,cAAc,UACrB,GAAG,SAAS,uBAAuB,qBAAqB,IAAI,QAAQ,IAAI,eAAe,cACvF;AAAA,YACN;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,UAAU;AAAA,cACV,MAAM;AAAA,cACN,KAAK;AAAA,cACL,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,iBAAiB;AAAA,cACjB,WAAW;AAAA,cACX,WAAW,cAAc,UACrB,GAAG,SAAS,0BAA0B,uBAAuB,IAAI,QAAQ,IAAI,eAAe,cAC5F;AAAA,YACN;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,UAAU;AAAA,cACV,MAAM;AAAA,cACN,KAAK;AAAA,cACL,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,iBAAiB;AAAA,cACjB,WAAW;AAAA,cACX,WAAW,cAAc,UACrB,GAAG,SAAS,0BAA0B,wBAAwB,IAAI,QAAQ,IAAI,eAAe,cAC7F;AAAA,YACN;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/icons/kebab-icon.d.ts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface KebabIconProps {
+    isOpen: boolean;
+    className?: string;
+    size?: number;
+    animationDuration?: number;
+    animationTiming?: string;
+}
+declare function KebabIcon({ isOpen, className, size, animationDuration, animationTiming, }: KebabIconProps): react_jsx_runtime.JSX.Element;
+
+export { KebabIcon };

package/dist/components/icons/kebab-icon.js

@@ -0,0 +1,81 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+function KebabIcon({
+  isOpen,
+  className = "",
+  size = 24,
+  animationDuration = 300,
+  animationTiming = "ease-in-out"
+}) {
+  const duration = `${animationDuration}ms`;
+  const hasMountedRef = useRef(false);
+  useEffect(() => {
+    hasMountedRef.current = true;
+  }, []);
+  const dotSize = size * 0.125;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className,
+      style: {
+        width: size,
+        height: size,
+        position: "relative",
+        // @ts-expect-error - CSS custom property
+        "--dot-width": "12.5%"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: "50%",
+              top: "25%",
+              width: "12.5%",
+              height: dotSize,
+              backgroundColor: "currentColor",
+              transform: "translate(-50%, -50%)",
+              animation: hasMountedRef.current ? `${isOpen ? "kebab-top-open" : "kebab-top-close"} ${duration} ${animationTiming} forwards` : "none"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: "50%",
+              top: "50%",
+              width: "12.5%",
+              height: dotSize,
+              backgroundColor: "currentColor",
+              transform: "translate(-50%, -50%)",
+              animation: hasMountedRef.current ? `${isOpen ? "kebab-middle-hide" : "kebab-middle-show"} ${duration} ${animationTiming} forwards` : "none"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: "50%",
+              top: "75%",
+              width: "12.5%",
+              height: dotSize,
+              backgroundColor: "currentColor",
+              transform: "translate(-50%, -50%)",
+              animation: hasMountedRef.current ? `${isOpen ? "kebab-bottom-open" : "kebab-bottom-close"} ${duration} ${animationTiming} forwards` : "none"
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  KebabIcon
+};
+//# sourceMappingURL=kebab-icon.js.map

package/dist/components/icons/kebab-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/icons/kebab-icon.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef } from \"react\";\n\ninterface KebabIconProps {\n  isOpen: boolean;\n  className?: string;\n  size?: number;\n  animationDuration?: number;\n  animationTiming?: string;\n}\n\nexport function KebabIcon({\n  isOpen,\n  className = \"\",\n  size = 24,\n  animationDuration = 300,\n  animationTiming = \"ease-in-out\",\n}: KebabIconProps) {\n  const duration = `${animationDuration}ms`;\n  const hasMountedRef = useRef(false);\n\n  useEffect(() => {\n    hasMountedRef.current = true;\n  }, []);\n\n  const dotSize = size * 0.125;\n\n  return (\n    <div\n      className={className}\n      style={{\n        width: size,\n        height: size,\n        position: \"relative\",\n        // @ts-expect-error - CSS custom property\n        \"--dot-width\": \"12.5%\",\n      }}\n    >\n      <div\n        style={{\n          position: \"absolute\",\n          left: \"50%\",\n          top: \"25%\",\n          width: \"12.5%\",\n          height: dotSize,\n          backgroundColor: \"currentColor\",\n          transform: \"translate(-50%, -50%)\",\n          animation: hasMountedRef.current\n            ? `${isOpen ? \"kebab-top-open\" : \"kebab-top-close\"} ${duration} ${animationTiming} forwards`\n            : \"none\",\n        }}\n      />\n      <div\n        style={{\n          position: \"absolute\",\n          left: \"50%\",\n          top: \"50%\",\n          width: \"12.5%\",\n          height: dotSize,\n          backgroundColor: \"currentColor\",\n          transform: \"translate(-50%, -50%)\",\n          animation: hasMountedRef.current\n            ? `${isOpen ? \"kebab-middle-hide\" : \"kebab-middle-show\"} ${duration} ${animationTiming} forwards`\n            : \"none\",\n        }}\n      />\n      <div\n        style={{\n          position: \"absolute\",\n          left: \"50%\",\n          top: \"75%\",\n          width: \"12.5%\",\n          height: dotSize,\n          backgroundColor: \"currentColor\",\n          transform: \"translate(-50%, -50%)\",\n          animation: hasMountedRef.current\n            ? `${isOpen ? \"kebab-bottom-open\" : \"kebab-bottom-close\"} ${duration} ${animationTiming} forwards`\n            : \"none\",\n        }}\n      />\n    </div>\n  );\n}\n"],"mappings":";AA6BI,SAUE,KAVF;AA3BJ,SAAS,WAAW,cAAc;AAU3B,SAAS,UAAU;AAAA,EACxB;AAAA,EACA,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,oBAAoB;AAAA,EACpB,kBAAkB;AACpB,GAAmB;AACjB,QAAM,WAAW,GAAG,iBAAiB;AACrC,QAAM,gBAAgB,OAAO,KAAK;AAElC,YAAU,MAAM;AACd,kBAAc,UAAU;AAAA,EAC1B,GAAG,CAAC,CAAC;AAEL,QAAM,UAAU,OAAO;AAEvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,UAAU;AAAA;AAAA,QAEV,eAAe;AAAA,MACjB;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,UAAU;AAAA,cACV,MAAM;AAAA,cACN,KAAK;AAAA,cACL,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,iBAAiB;AAAA,cACjB,WAAW;AAAA,cACX,WAAW,cAAc,UACrB,GAAG,SAAS,mBAAmB,iBAAiB,IAAI,QAAQ,IAAI,eAAe,cAC/E;AAAA,YACN;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,UAAU;AAAA,cACV,MAAM;AAAA,cACN,KAAK;AAAA,cACL,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,iBAAiB;AAAA,cACjB,WAAW;AAAA,cACX,WAAW,cAAc,UACrB,GAAG,SAAS,sBAAsB,mBAAmB,IAAI,QAAQ,IAAI,eAAe,cACpF;AAAA,YACN;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,UAAU;AAAA,cACV,MAAM;AAAA,cACN,KAAK;AAAA,cACL,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,iBAAiB;AAAA,cACjB,WAAW;AAAA,cACX,WAAW,cAAc,UACrB,GAAG,SAAS,sBAAsB,oBAAoB,IAAI,QAAQ,IAAI,eAAe,cACrF;AAAA,YACN;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/icons/meatballs-icon.d.ts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface MeatballsIconProps {
+    isOpen: boolean;
+    className?: string;
+    size?: number;
+    animationDuration?: number;
+    animationTiming?: string;
+}
+declare function MeatballsIcon({ isOpen, className, size, animationDuration, animationTiming, }: MeatballsIconProps): react_jsx_runtime.JSX.Element;
+
+export { MeatballsIcon };

package/dist/components/icons/meatballs-icon.js

@@ -0,0 +1,81 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+function MeatballsIcon({
+  isOpen,
+  className = "",
+  size = 24,
+  animationDuration = 300,
+  animationTiming = "ease-in-out"
+}) {
+  const duration = `${animationDuration}ms`;
+  const hasMountedRef = useRef(false);
+  useEffect(() => {
+    hasMountedRef.current = true;
+  }, []);
+  const dotSize = size * 0.125;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className,
+      style: {
+        width: size,
+        height: size,
+        position: "relative",
+        // @ts-expect-error - CSS custom property
+        "--dot-height": "12.5%"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: "25%",
+              top: "50%",
+              width: dotSize,
+              height: "12.5%",
+              backgroundColor: "currentColor",
+              transform: "translate(-50%, -50%)",
+              animation: hasMountedRef.current ? `${isOpen ? "meatballs-left-open" : "meatballs-left-close"} ${duration} ${animationTiming} forwards` : "none"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: "50%",
+              top: "50%",
+              width: dotSize,
+              height: "12.5%",
+              backgroundColor: "currentColor",
+              transform: "translate(-50%, -50%)",
+              animation: hasMountedRef.current ? `${isOpen ? "meatballs-middle-hide" : "meatballs-middle-show"} ${duration} ${animationTiming} forwards` : "none"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: "75%",
+              top: "50%",
+              width: dotSize,
+              height: "12.5%",
+              backgroundColor: "currentColor",
+              transform: "translate(-50%, -50%)",
+              animation: hasMountedRef.current ? `${isOpen ? "meatballs-right-open" : "meatballs-right-close"} ${duration} ${animationTiming} forwards` : "none"
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  MeatballsIcon
+};
+//# sourceMappingURL=meatballs-icon.js.map

package/dist/components/icons/meatballs-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/icons/meatballs-icon.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef } from \"react\";\n\ninterface MeatballsIconProps {\n  isOpen: boolean;\n  className?: string;\n  size?: number;\n  animationDuration?: number;\n  animationTiming?: string;\n}\n\nexport function MeatballsIcon({\n  isOpen,\n  className = \"\",\n  size = 24,\n  animationDuration = 300,\n  animationTiming = \"ease-in-out\",\n}: MeatballsIconProps) {\n  const duration = `${animationDuration}ms`;\n  const hasMountedRef = useRef(false);\n\n  useEffect(() => {\n    hasMountedRef.current = true;\n  }, []);\n\n  const dotSize = size * 0.125;\n\n  return (\n    <div\n      className={className}\n      style={{\n        width: size,\n        height: size,\n        position: \"relative\",\n        // @ts-expect-error - CSS custom property\n        \"--dot-height\": \"12.5%\",\n      }}\n    >\n      <div\n        style={{\n          position: \"absolute\",\n          left: \"25%\",\n          top: \"50%\",\n          width: dotSize,\n          height: \"12.5%\",\n          backgroundColor: \"currentColor\",\n          transform: \"translate(-50%, -50%)\",\n          animation: hasMountedRef.current\n            ? `${isOpen ? \"meatballs-left-open\" : \"meatballs-left-close\"} ${duration} ${animationTiming} forwards`\n            : \"none\",\n        }}\n      />\n      <div\n        style={{\n          position: \"absolute\",\n          left: \"50%\",\n          top: \"50%\",\n          width: dotSize,\n          height: \"12.5%\",\n          backgroundColor: \"currentColor\",\n          transform: \"translate(-50%, -50%)\",\n          animation: hasMountedRef.current\n            ? `${isOpen ? \"meatballs-middle-hide\" : \"meatballs-middle-show\"} ${duration} ${animationTiming} forwards`\n            : \"none\",\n        }}\n      />\n      <div\n        style={{\n          position: \"absolute\",\n          left: \"75%\",\n          top: \"50%\",\n          width: dotSize,\n          height: \"12.5%\",\n          backgroundColor: \"currentColor\",\n          transform: \"translate(-50%, -50%)\",\n          animation: hasMountedRef.current\n            ? `${isOpen ? \"meatballs-right-open\" : \"meatballs-right-close\"} ${duration} ${animationTiming} forwards`\n            : \"none\",\n        }}\n      />\n    </div>\n  );\n}\n"],"mappings":";AA6BI,SAUE,KAVF;AA3BJ,SAAS,WAAW,cAAc;AAU3B,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,oBAAoB;AAAA,EACpB,kBAAkB;AACpB,GAAuB;AACrB,QAAM,WAAW,GAAG,iBAAiB;AACrC,QAAM,gBAAgB,OAAO,KAAK;AAElC,YAAU,MAAM;AACd,kBAAc,UAAU;AAAA,EAC1B,GAAG,CAAC,CAAC;AAEL,QAAM,UAAU,OAAO;AAEvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,UAAU;AAAA;AAAA,QAEV,gBAAgB;AAAA,MAClB;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,UAAU;AAAA,cACV,MAAM;AAAA,cACN,KAAK;AAAA,cACL,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,iBAAiB;AAAA,cACjB,WAAW;AAAA,cACX,WAAW,cAAc,UACrB,GAAG,SAAS,wBAAwB,sBAAsB,IAAI,QAAQ,IAAI,eAAe,cACzF;AAAA,YACN;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,UAAU;AAAA,cACV,MAAM;AAAA,cACN,KAAK;AAAA,cACL,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,iBAAiB;AAAA,cACjB,WAAW;AAAA,cACX,WAAW,cAAc,UACrB,GAAG,SAAS,0BAA0B,uBAAuB,IAAI,QAAQ,IAAI,eAAe,cAC5F;AAAA,YACN;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,UAAU;AAAA,cACV,MAAM;AAAA,cACN,KAAK;AAAA,cACL,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,iBAAiB;AAAA,cACjB,WAAW;AAAA,cACX,WAAW,cAAc,UACrB,GAAG,SAAS,yBAAyB,uBAAuB,IAAI,QAAQ,IAAI,eAAe,cAC3F;AAAA,YACN;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/icons/plus-icon.d.ts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface PlusIconProps {
+    isOpen: boolean;
+    className?: string;
+    size?: number;
+    animationDuration?: number;
+    animationTiming?: string;
+}
+declare function PlusIcon({ isOpen, className, size, animationDuration, animationTiming, }: PlusIconProps): react_jsx_runtime.JSX.Element;
+
+export { PlusIcon };

package/dist/components/icons/plus-icon.js

@@ -0,0 +1,64 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+function PlusIcon({
+  isOpen,
+  className = "",
+  size = 24,
+  animationDuration = 300,
+  animationTiming = "ease-in-out"
+}) {
+  const duration = `${animationDuration}ms`;
+  const hasMountedRef = useRef(false);
+  useEffect(() => {
+    hasMountedRef.current = true;
+  }, []);
+  const lineThickness = size * 0.125;
+  const lineLength = size;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className,
+      style: {
+        width: size,
+        height: size,
+        position: "relative"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: "50%",
+              top: "50%",
+              width: lineThickness,
+              height: lineLength,
+              backgroundColor: "currentColor",
+              transform: isOpen ? "translate(-50%, -50%) rotate(90deg)" : "translate(-50%, -50%) rotate(0deg)",
+              transition: hasMountedRef.current ? `transform ${duration} ${animationTiming}` : "none"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: "50%",
+              top: "50%",
+              width: lineLength,
+              height: lineThickness,
+              backgroundColor: "currentColor",
+              transform: "translate(-50%, -50%)"
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  PlusIcon
+};
+//# sourceMappingURL=plus-icon.js.map

package/dist/components/icons/plus-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/icons/plus-icon.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef } from \"react\";\n\ninterface PlusIconProps {\n  isOpen: boolean;\n  className?: string;\n  size?: number;\n  animationDuration?: number;\n  animationTiming?: string;\n}\n\nexport function PlusIcon({\n  isOpen,\n  className = \"\",\n  size = 24,\n  animationDuration = 300,\n  animationTiming = \"ease-in-out\",\n}: PlusIconProps) {\n  const duration = `${animationDuration}ms`;\n  const hasMountedRef = useRef(false);\n\n  useEffect(() => {\n    hasMountedRef.current = true;\n  }, []);\n\n  const lineThickness = size * 0.125;\n  const lineLength = size;\n\n  return (\n    <div\n      className={className}\n      style={{\n        width: size,\n        height: size,\n        position: \"relative\",\n      }}\n    >\n      <div\n        style={{\n          position: \"absolute\",\n          left: \"50%\",\n          top: \"50%\",\n          width: lineThickness,\n          height: lineLength,\n          backgroundColor: \"currentColor\",\n          transform: isOpen\n            ? \"translate(-50%, -50%) rotate(90deg)\"\n            : \"translate(-50%, -50%) rotate(0deg)\",\n          transition: hasMountedRef.current\n            ? `transform ${duration} ${animationTiming}`\n            : \"none\",\n        }}\n      />\n      <div\n        style={{\n          position: \"absolute\",\n          left: \"50%\",\n          top: \"50%\",\n          width: lineLength,\n          height: lineThickness,\n          backgroundColor: \"currentColor\",\n          transform: \"translate(-50%, -50%)\",\n        }}\n      />\n    </div>\n  );\n}\n"],"mappings":";AA8BI,SAQE,KARF;AA5BJ,SAAS,WAAW,cAAc;AAU3B,SAAS,SAAS;AAAA,EACvB;AAAA,EACA,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,oBAAoB;AAAA,EACpB,kBAAkB;AACpB,GAAkB;AAChB,QAAM,WAAW,GAAG,iBAAiB;AACrC,QAAM,gBAAgB,OAAO,KAAK;AAElC,YAAU,MAAM;AACd,kBAAc,UAAU;AAAA,EAC1B,GAAG,CAAC,CAAC;AAEL,QAAM,gBAAgB,OAAO;AAC7B,QAAM,aAAa;AAEnB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,UAAU;AAAA,MACZ;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,UAAU;AAAA,cACV,MAAM;AAAA,cACN,KAAK;AAAA,cACL,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,iBAAiB;AAAA,cACjB,WAAW,SACP,wCACA;AAAA,cACJ,YAAY,cAAc,UACtB,aAAa,QAAQ,IAAI,eAAe,KACxC;AAAA,YACN;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,UAAU;AAAA,cACV,MAAM;AAAA,cACN,KAAK;AAAA,cACL,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,iBAAiB;AAAA,cACjB,WAAW;AAAA,YACb;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/icons/toggle-icon-map.d.ts

@@ -0,0 +1,14 @@
+import * as React$1 from 'react';
+import { ToggleIconType } from '@otl-core/cms-types';
+
+interface ToggleIconProps {
+    isOpen: boolean;
+    className?: string;
+    size?: number;
+    animationDuration?: number;
+    animationTiming?: string;
+}
+declare const toggleIconMap: Map<ToggleIconType, React$1.ComponentType<ToggleIconProps>>;
+declare function getToggleIcon(type: ToggleIconType): React.ComponentType<ToggleIconProps> | undefined;
+
+export { getToggleIcon, toggleIconMap };

package/dist/components/icons/toggle-icon-map.js

@@ -0,0 +1,22 @@
+import { ChevronIcon } from "./chevron-icon";
+import { GridIcon } from "./grid-icon";
+import { HamburgerIcon } from "./hamburger-icon";
+import { KebabIcon } from "./kebab-icon";
+import { MeatballsIcon } from "./meatballs-icon";
+import { PlusIcon } from "./plus-icon";
+const toggleIconMap = /* @__PURE__ */ new Map([
+  ["hamburger", HamburgerIcon],
+  ["kebab", KebabIcon],
+  ["meatballs", MeatballsIcon],
+  ["grid", GridIcon],
+  ["chevron", ChevronIcon],
+  ["plus", PlusIcon]
+]);
+function getToggleIcon(type) {
+  return toggleIconMap.get(type);
+}
+export {
+  getToggleIcon,
+  toggleIconMap
+};
+//# sourceMappingURL=toggle-icon-map.js.map

package/dist/components/icons/toggle-icon-map.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/icons/toggle-icon-map.tsx"],"sourcesContent":["import type { ToggleIconType } from \"@otl-core/cms-types\";\nimport { ChevronIcon } from \"./chevron-icon\";\nimport { GridIcon } from \"./grid-icon\";\nimport { HamburgerIcon } from \"./hamburger-icon\";\nimport { KebabIcon } from \"./kebab-icon\";\nimport { MeatballsIcon } from \"./meatballs-icon\";\nimport { PlusIcon } from \"./plus-icon\";\n\ninterface ToggleIconProps {\n  isOpen: boolean;\n  className?: string;\n  size?: number;\n  animationDuration?: number;\n  animationTiming?: string;\n}\n\nexport const toggleIconMap = new Map<\n  ToggleIconType,\n  React.ComponentType<ToggleIconProps>\n>([\n  [\"hamburger\", HamburgerIcon],\n  [\"kebab\", KebabIcon],\n  [\"meatballs\", MeatballsIcon],\n  [\"grid\", GridIcon],\n  [\"chevron\", ChevronIcon],\n  [\"plus\", PlusIcon],\n]);\n\nexport function getToggleIcon(\n  type: ToggleIconType,\n): React.ComponentType<ToggleIconProps> | undefined {\n  return toggleIconMap.get(type);\n}\n"],"mappings":"AACA,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB;AAC1B,SAAS,qBAAqB;AAC9B,SAAS,gBAAgB;AAUlB,MAAM,gBAAgB,oBAAI,IAG/B;AAAA,EACA,CAAC,aAAa,aAAa;AAAA,EAC3B,CAAC,SAAS,SAAS;AAAA,EACnB,CAAC,aAAa,aAAa;AAAA,EAC3B,CAAC,QAAQ,QAAQ;AAAA,EACjB,CAAC,WAAW,WAAW;AAAA,EACvB,CAAC,QAAQ,QAAQ;AACnB,CAAC;AAEM,SAAS,cACd,MACkD;AAClD,SAAO,cAAc,IAAI,IAAI;AAC/B;","names":[]}

package/dist/components/icons/toggle-icon.d.ts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ToggleIconType } from '@otl-core/cms-types';
+
+interface ToggleIconProps {
+    type: ToggleIconType;
+    isOpen: boolean;
+    className?: string;
+    size?: number;
+    animationDuration?: number;
+    animationTiming?: string;
+}
+declare function ToggleIcon({ type, isOpen, className, size, animationDuration, animationTiming, }: ToggleIconProps): react_jsx_runtime.JSX.Element;
+
+export { ToggleIcon };