@bioturing/components 0.32.0 → 0.32.2

package/dist/components/hooks/base-ui.js

@@ -1,46 +1,43 @@
 "use client";
-import { useLayoutEffect as p, useEffect as m, useRef as c, useCallback as h } from "react";
+import { useLayoutEffect as p, useEffect as m, useRef as r, useCallback as h } from "react";
 import { flushSync as A } from "react-dom";
 const l = typeof window < "u" ? p : m;
-function a(t) {
-  const e = c(t);
+function a(e) {
+  const t = r(e);
   return l(() => {
-    e.current = t;
+    t.current = e;
   }), h(
-    (...i) => {
-      var n;
-      return (n = e.current) == null ? void 0 : n.call(e, ...i);
-    },
+    (...c) => t.current?.(...c),
     []
   );
 }
-function E(t) {
-  const e = c(t);
+function E(e) {
+  const t = r(e);
   return l(() => {
-    e.current = t;
-  }), e;
+    t.current = e;
+  }), t;
 }
-function R(t, {
-  waitForNextTick: e = !1,
-  subtree: i = !1
+function R(e, {
+  waitForNextTick: t = !1,
+  subtree: c = !1
 }) {
-  const n = c(-1), u = c(-1), s = a(() => {
-    cancelAnimationFrame(n.current), clearTimeout(u.current);
+  const s = r(-1), u = r(-1), i = a(() => {
+    cancelAnimationFrame(s.current), clearTimeout(u.current);
   });
-  return m(() => s, [s]), a((o) => {
-    s();
-    const r = t.current;
-    r && (typeof r.getAnimations != "function" ? o() : n.current = requestAnimationFrame(() => {
+  return m(() => i, [i]), a((o) => {
+    i();
+    const n = e.current;
+    n && (typeof n.getAnimations != "function" ? o() : s.current = requestAnimationFrame(() => {
       function f() {
-        r && Promise.allSettled(
-          r.getAnimations({
-            subtree: i
+        n && Promise.allSettled(
+          n.getAnimations({
+            subtree: c
           }).map((d) => d.finished)
         ).then(() => {
           A(o);
         });
       }
-      e ? u.current = window.setTimeout(f) : f();
+      t ? u.current = window.setTimeout(f) : f();
     }));
   });
 }

package/dist/components/hooks/base-ui.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-ui.js","sources":["../../../src/components/hooks/base-ui.ts"],"sourcesContent":["\"use client\";\nimport { useLayoutEffect, useEffect, useRef, useCallback } from \"react\";\nimport { flushSync } from \"react-dom\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype AnyFunction = (...args: any[]) => any;\n\nexport const useEnhancedEffect =\n  typeof window !== \"undefined\" ? useLayoutEffect : useEffect;\n\nexport function useEventCallback<Fn extends AnyFunction>(fn?: Fn) {\n  const ref = useRef(fn);\n  useEnhancedEffect(() => {\n    ref.current = fn;\n  });\n  return useCallback<AnyFunction>(\n    (...args) => ref.current?.(...args),\n    []\n  ) as Fn;\n}\n\nexport function useLatestRef<T>(value: T) {\n  const ref = useRef(value);\n  useEnhancedEffect(() => {\n    ref.current = value;\n  });\n  return ref;\n}\n\nexport function useAnimationsFinished(\n  ref: React.RefObject<HTMLElement | null>,\n  {\n    waitForNextTick = false,\n    subtree = false,\n  }: {\n    waitForNextTick?: boolean;\n    subtree?: boolean;\n  }\n) {\n  const frameRef = useRef(-1);\n  const timeoutRef = useRef(-1);\n\n  const cancelTasks = useEventCallback(() => {\n    cancelAnimationFrame(frameRef.current);\n    clearTimeout(timeoutRef.current);\n  });\n\n  useEffect(() => cancelTasks, [cancelTasks]);\n\n  return useEventCallback((fnToExecute: () => void) => {\n    cancelTasks();\n\n    const element = ref.current;\n\n    if (!element) {\n      return;\n    }\n\n    if (typeof element.getAnimations !== \"function\") {\n      fnToExecute();\n    } else {\n      frameRef.current = requestAnimationFrame(() => {\n        function exec() {\n          if (!element) {\n            return;\n          }\n\n          Promise.allSettled(\n            element\n              .getAnimations({\n                subtree,\n              })\n              .map((anim) => anim.finished)\n          ).then(() => {\n            // Synchronously flush the unmounting of the component so that the browser doesn't\n            // paint: https://github.com/mui/base-ui/issues/979\n            flushSync(fnToExecute);\n          });\n        }\n\n        // `open: true` animations need to wait for the next tick to be detected\n        if (waitForNextTick) {\n          timeoutRef.current = window.setTimeout(exec);\n        } else {\n          exec();\n        }\n      });\n    }\n  });\n}\n"],"names":["useEnhancedEffect","useLayoutEffect","useEffect","useEventCallback","fn","ref","useRef","useCallback","args","_a","useLatestRef","value","useAnimationsFinished","waitForNextTick","subtree","frameRef","timeoutRef","cancelTasks","fnToExecute","element","exec","anim","flushSync"],"mappings":";;;AAOO,MAAMA,IACX,OAAO,SAAW,MAAcC,IAAkBC;AAE7C,SAASC,EAAyCC,GAAS;AAC1D,QAAAC,IAAMC,EAAOF,CAAE;AACrB,SAAAJ,EAAkB,MAAM;AACtB,IAAAK,EAAI,UAAUD;AAAA,EAAA,CACf,GACMG;AAAA,IACL,IAAIC,MAAS;;AAAA,cAAAC,IAAAJ,EAAI,YAAJ,gBAAAI,EAAA,KAAAJ,GAAc,GAAGG;AAAA;AAAA,IAC9B,CAAA;AAAA,EACF;AACF;AAEO,SAASE,EAAgBC,GAAU;AAClC,QAAAN,IAAMC,EAAOK,CAAK;AACxB,SAAAX,EAAkB,MAAM;AACtB,IAAAK,EAAI,UAAUM;AAAA,EAAA,CACf,GACMN;AACT;AAEO,SAASO,EACdP,GACA;AAAA,EACE,iBAAAQ,IAAkB;AAAA,EAClB,SAAAC,IAAU;AACZ,GAIA;AACM,QAAAC,IAAWT,EAAO,EAAE,GACpBU,IAAaV,EAAO,EAAE,GAEtBW,IAAcd,EAAiB,MAAM;AACzC,yBAAqBY,EAAS,OAAO,GACrC,aAAaC,EAAW,OAAO;AAAA,EAAA,CAChC;AAED,SAAAd,EAAU,MAAMe,GAAa,CAACA,CAAW,CAAC,GAEnCd,EAAiB,CAACe,MAA4B;AACvC,IAAAD,EAAA;AAEZ,UAAME,IAAUd,EAAI;AAEpB,IAAKc,MAID,OAAOA,EAAQ,iBAAkB,aACvBD,EAAA,IAEHH,EAAA,UAAU,sBAAsB,MAAM;AAC7C,eAASK,IAAO;AACd,QAAKD,KAIG,QAAA;AAAA,UACNA,EACG,cAAc;AAAA,YACb,SAAAL;AAAA,UACD,CAAA,EACA,IAAI,CAACO,MAASA,EAAK,QAAQ;AAAA,QAChC,EAAE,KAAK,MAAM;AAGX,UAAAC,EAAUJ,CAAW;AAAA,QAAA,CACtB;AAAA,MAAA;AAIH,MAAIL,IACSG,EAAA,UAAU,OAAO,WAAWI,CAAI,IAEtCA,EAAA;AAAA,IACP,CACD;AAAA,EACH,CACD;AACH;"}
+{"version":3,"file":"base-ui.js","sources":["../../../src/components/hooks/base-ui.ts"],"sourcesContent":["\"use client\";\nimport { useLayoutEffect, useEffect, useRef, useCallback } from \"react\";\nimport { flushSync } from \"react-dom\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype AnyFunction = (...args: any[]) => any;\n\nexport const useEnhancedEffect =\n  typeof window !== \"undefined\" ? useLayoutEffect : useEffect;\n\nexport function useEventCallback<Fn extends AnyFunction>(fn?: Fn) {\n  const ref = useRef(fn);\n  useEnhancedEffect(() => {\n    ref.current = fn;\n  });\n  return useCallback<AnyFunction>(\n    (...args) => ref.current?.(...args),\n    []\n  ) as Fn;\n}\n\nexport function useLatestRef<T>(value: T) {\n  const ref = useRef(value);\n  useEnhancedEffect(() => {\n    ref.current = value;\n  });\n  return ref;\n}\n\nexport function useAnimationsFinished(\n  ref: React.RefObject<HTMLElement | null>,\n  {\n    waitForNextTick = false,\n    subtree = false,\n  }: {\n    waitForNextTick?: boolean;\n    subtree?: boolean;\n  }\n) {\n  const frameRef = useRef(-1);\n  const timeoutRef = useRef(-1);\n\n  const cancelTasks = useEventCallback(() => {\n    cancelAnimationFrame(frameRef.current);\n    clearTimeout(timeoutRef.current);\n  });\n\n  useEffect(() => cancelTasks, [cancelTasks]);\n\n  return useEventCallback((fnToExecute: () => void) => {\n    cancelTasks();\n\n    const element = ref.current;\n\n    if (!element) {\n      return;\n    }\n\n    if (typeof element.getAnimations !== \"function\") {\n      fnToExecute();\n    } else {\n      frameRef.current = requestAnimationFrame(() => {\n        function exec() {\n          if (!element) {\n            return;\n          }\n\n          Promise.allSettled(\n            element\n              .getAnimations({\n                subtree,\n              })\n              .map((anim) => anim.finished)\n          ).then(() => {\n            // Synchronously flush the unmounting of the component so that the browser doesn't\n            // paint: https://github.com/mui/base-ui/issues/979\n            flushSync(fnToExecute);\n          });\n        }\n\n        // `open: true` animations need to wait for the next tick to be detected\n        if (waitForNextTick) {\n          timeoutRef.current = window.setTimeout(exec);\n        } else {\n          exec();\n        }\n      });\n    }\n  });\n}\n"],"names":["useEnhancedEffect","useLayoutEffect","useEffect","useEventCallback","fn","ref","useRef","useCallback","args","useLatestRef","value","useAnimationsFinished","waitForNextTick","subtree","frameRef","timeoutRef","cancelTasks","fnToExecute","element","exec","anim","flushSync"],"mappings":";;;AAOO,MAAMA,IACX,OAAO,SAAW,MAAcC,IAAkBC;AAE7C,SAASC,EAAyCC,GAAS;AAChE,QAAMC,IAAMC,EAAOF,CAAE;AACrB,SAAAJ,EAAkB,MAAM;AACtB,IAAAK,EAAI,UAAUD;AAAA,EAChB,CAAC,GACMG;AAAA,IACL,IAAIC,MAASH,EAAI,UAAU,GAAGG,CAAI;AAAA,IAClC,CAAA;AAAA,EAAC;AAEL;AAEO,SAASC,EAAgBC,GAAU;AACxC,QAAML,IAAMC,EAAOI,CAAK;AACxB,SAAAV,EAAkB,MAAM;AACtB,IAAAK,EAAI,UAAUK;AAAA,EAChB,CAAC,GACML;AACT;AAEO,SAASM,EACdN,GACA;AAAA,EACE,iBAAAO,IAAkB;AAAA,EAClB,SAAAC,IAAU;AACZ,GAIA;AACA,QAAMC,IAAWR,EAAO,EAAE,GACpBS,IAAaT,EAAO,EAAE,GAEtBU,IAAcb,EAAiB,MAAM;AACzC,yBAAqBW,EAAS,OAAO,GACrC,aAAaC,EAAW,OAAO;AAAA,EACjC,CAAC;AAED,SAAAb,EAAU,MAAMc,GAAa,CAACA,CAAW,CAAC,GAEnCb,EAAiB,CAACc,MAA4B;AACnD,IAAAD,EAAA;AAEA,UAAME,IAAUb,EAAI;AAEpB,IAAKa,MAID,OAAOA,EAAQ,iBAAkB,aACnCD,EAAA,IAEAH,EAAS,UAAU,sBAAsB,MAAM;AAC7C,eAASK,IAAO;AACd,QAAKD,KAIL,QAAQ;AAAA,UACNA,EACG,cAAc;AAAA,YACb,SAAAL;AAAA,UAAA,CACD,EACA,IAAI,CAACO,MAASA,EAAK,QAAQ;AAAA,QAAA,EAC9B,KAAK,MAAM;AAGX,UAAAC,EAAUJ,CAAW;AAAA,QACvB,CAAC;AAAA,MACH;AAGA,MAAIL,IACFG,EAAW,UAAU,OAAO,WAAWI,CAAI,IAE3CA,EAAA;AAAA,IAEJ,CAAC;AAAA,EAEL,CAAC;AACH;"}

package/dist/components/hooks/index.d.ts

@@ -0,0 +1,11 @@
+export * from './antd';
+export * from './base-ui';
+export * from './useControlledState';
+export * from './useCharts';
+export * from './useCSSVariables';
+export * from './useHover';
+export * from './useDraggable';
+export * from './useBreakpoint';
+export * from './useWindowSize';
+export * from './useResizeObserver';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,sBAAsB,CAAC;AACrC,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC"}

package/dist/components/hooks/useBreakpoint.d.ts

@@ -0,0 +1,39 @@
+type Breakpoint = "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+export declare const BREAKPOINTS: {
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    "2xl": number;
+};
+/**
+ * A responsive breakpoint hook using window.matchMedia for optimal performance.
+ *
+ * @param ssrBreakpoint - The breakpoint to use during SSR and before hydration.
+ *                       Defaults to "lg" for better SEO (search engines typically use desktop viewports).
+ *
+ * @example
+ * ```tsx
+ * // Default: uses "lg" for SSR
+ * const bp = useBreakpoint();
+ *
+ * // Custom SSR breakpoint
+ * const bp = useBreakpoint("md");
+ *
+ * // Usage
+ * bp.breakpoint     // Current breakpoint: "sm" | "md" | "lg" | "xl" | "2xl"
+ * bp.up("md")       // true if screen >= 768px
+ * bp.down("lg")     // true if screen < 1024px
+ * bp.between("md", "xl")  // true if 768px <= screen < 1280px
+ * bp.only("lg")     // true if screen is exactly in "lg" range
+ * ```
+ */
+export declare const useBreakpoint: (ssrBreakpoint?: Breakpoint) => {
+    breakpoint: Breakpoint;
+    up: (bp: Breakpoint) => boolean;
+    down: (bp: Breakpoint) => boolean;
+    between: (minBp: Breakpoint, maxBp: Breakpoint) => boolean;
+    only: (bp: Breakpoint) => boolean;
+};
+export {};
+//# sourceMappingURL=useBreakpoint.d.ts.map

package/dist/components/hooks/useBreakpoint.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBreakpoint.d.ts","sourceRoot":"","sources":["../../../src/components/hooks/useBreakpoint.ts"],"names":[],"mappings":"AAGA,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,CAAC;AAE5D,eAAO,MAAM,WAAW;;;;;;CAMvB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,aAAa,GAAI,gBAAe,UAAiB;;aAoDhC,UAAU;eAUR,UAAU;qBAUJ,UAAU,SAAS,UAAU;eAUnC,UAAU;CAiCzC,CAAC"}

package/dist/components/hooks/useBreakpoint.js

@@ -1,24 +1,23 @@
 "use client";
-import { useState as r, useMemo as M, useEffect as x, useCallback as w } from "react";
+import { useState as c, useMemo as y, useEffect as r, useCallback as m } from "react";
 const e = {
   sm: 640,
   md: 768,
   lg: 1024,
   xl: 1280,
   "2xl": 1536
-}, q = (h = "lg") => {
-  const [i, l] = r(h), [d, u] = r(!1), a = M(() => {
+}, q = (x = "lg") => {
+  const [i, h] = c(x), [d, l] = c(!1), a = y(() => {
     const t = {};
     return typeof window < "u" && (t.sm = window.matchMedia(`(max-width: ${e.md - 1}px)`), t.md = window.matchMedia(`(min-width: ${e.md}px) and (max-width: ${e.lg - 1}px)`), t.lg = window.matchMedia(`(min-width: ${e.lg}px) and (max-width: ${e.xl - 1}px)`), t.xl = window.matchMedia(`(min-width: ${e.xl}px) and (max-width: ${e["2xl"] - 1}px)`), t["2xl"] = window.matchMedia(`(min-width: ${e["2xl"]}px)`)), t;
   }, []);
-  x(() => {
-    u(!0);
-  }, []), x(() => {
+  r(() => {
+    l(!0);
+  }, []), r(() => {
     if (typeof window > "u" || !d) return;
     const t = () => {
-      var m, o, s, c;
       let n = "sm";
-      (m = a["2xl"]) != null && m.matches ? n = "2xl" : (o = a.xl) != null && o.matches ? n = "xl" : (s = a.lg) != null && s.matches ? n = "lg" : (c = a.md) != null && c.matches ? n = "md" : n = "sm", l(n);
+      a["2xl"]?.matches ? n = "2xl" : a.xl?.matches ? n = "xl" : a.lg?.matches ? n = "lg" : a.md?.matches ? n = "md" : n = "sm", h(n);
     };
     return t(), Object.values(a).forEach((n) => {
       n && n.addEventListener("change", t);
@@ -28,19 +27,19 @@ const e = {
       });
     };
   }, [a, d]);
-  const f = w((t) => typeof window > "u" || !d ? e[i] >= e[t] : window.matchMedia(`(min-width: ${e[t]}px)`).matches, [d, i]), p = w((t) => typeof window > "u" || !d ? e[i] < e[t] : window.matchMedia(`(max-width: ${e[t] - 1}px)`).matches, [d, i]), $ = w((t, n) => typeof window > "u" || !d ? e[i] >= e[t] && e[i] < e[n] : window.matchMedia(`(min-width: ${e[t]}px) and (max-width: ${e[n] - 1}px)`).matches, [d, i]), y = w((t) => {
+  const u = m((t) => typeof window > "u" || !d ? e[i] >= e[t] : window.matchMedia(`(min-width: ${e[t]}px)`).matches, [d, i]), f = m((t) => typeof window > "u" || !d ? e[i] < e[t] : window.matchMedia(`(max-width: ${e[t] - 1}px)`).matches, [d, i]), p = m((t, n) => typeof window > "u" || !d ? e[i] >= e[t] && e[i] < e[n] : window.matchMedia(`(min-width: ${e[t]}px) and (max-width: ${e[n] - 1}px)`).matches, [d, i]), $ = m((t) => {
     if (typeof window > "u" || !d)
       return i === t;
-    const n = Object.keys(e), m = n.indexOf(t), o = n[m + 1];
+    const n = Object.keys(e), o = n.indexOf(t), w = n[o + 1];
     let s;
-    return m === 0 ? s = `(max-width: ${e.md - 1}px)` : o ? s = `(min-width: ${e[t]}px) and (max-width: ${e[o] - 1}px)` : s = `(min-width: ${e[t]}px)`, window.matchMedia(s).matches;
+    return o === 0 ? s = `(max-width: ${e.md - 1}px)` : w ? s = `(min-width: ${e[t]}px) and (max-width: ${e[w] - 1}px)` : s = `(min-width: ${e[t]}px)`, window.matchMedia(s).matches;
   }, [d, i]);
   return {
     breakpoint: i,
-    up: f,
-    down: p,
-    between: $,
-    only: y
+    up: u,
+    down: f,
+    between: p,
+    only: $
   };
 };
 export {

package/dist/components/hooks/useBreakpoint.js.map

@@ -1 +1 @@
-{"version":3,"file":"useBreakpoint.js","sources":["../../../src/components/hooks/useBreakpoint.ts"],"sourcesContent":["\"use client\";\nimport { useEffect, useState, useCallback, useMemo } from \"react\";\n\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\";\n\nexport const BREAKPOINTS = {\n  sm: 640,\n  md: 768,\n  lg: 1024,\n  xl: 1280,\n  \"2xl\": 1536,\n};\n\n/**\n * A responsive breakpoint hook using window.matchMedia for optimal performance.\n *\n * @param ssrBreakpoint - The breakpoint to use during SSR and before hydration.\n *                       Defaults to \"lg\" for better SEO (search engines typically use desktop viewports).\n *\n * @example\n * ```tsx\n * // Default: uses \"lg\" for SSR\n * const bp = useBreakpoint();\n *\n * // Custom SSR breakpoint\n * const bp = useBreakpoint(\"md\");\n *\n * // Usage\n * bp.breakpoint     // Current breakpoint: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\"\n * bp.up(\"md\")       // true if screen >= 768px\n * bp.down(\"lg\")     // true if screen < 1024px\n * bp.between(\"md\", \"xl\")  // true if 768px <= screen < 1280px\n * bp.only(\"lg\")     // true if screen is exactly in \"lg\" range\n * ```\n */\nexport const useBreakpoint = (ssrBreakpoint: Breakpoint = \"lg\") => {\n  const [breakpoint, setBreakpoint] = useState<Breakpoint>(ssrBreakpoint);\n  const [isHydrated, setIsHydrated] = useState(false);\n\n  // Generate media queries\n  const mediaQueries = useMemo(() => {\n    const queries: Record<Breakpoint, MediaQueryList> = {} as any;\n    if (typeof window !== 'undefined') {\n      queries.sm = window.matchMedia(`(max-width: ${BREAKPOINTS.md - 1}px)`);\n      queries.md = window.matchMedia(`(min-width: ${BREAKPOINTS.md}px) and (max-width: ${BREAKPOINTS.lg - 1}px)`);\n      queries.lg = window.matchMedia(`(min-width: ${BREAKPOINTS.lg}px) and (max-width: ${BREAKPOINTS.xl - 1}px)`);\n      queries.xl = window.matchMedia(`(min-width: ${BREAKPOINTS.xl}px) and (max-width: ${BREAKPOINTS[\"2xl\"] - 1}px)`);\n      queries[\"2xl\"] = window.matchMedia(`(min-width: ${BREAKPOINTS[\"2xl\"]}px)`);\n    }\n    return queries;\n  }, []);\n\n  useEffect(() => {\n    setIsHydrated(true);\n  }, []);\n\n  useEffect(() => {\n    if (typeof window === 'undefined' || !isHydrated) return;\n\n    const updateBreakpoint = () => {\n      let currentBp: Breakpoint = \"sm\";\n\n      if (mediaQueries[\"2xl\"]?.matches) currentBp = \"2xl\";\n      else if (mediaQueries.xl?.matches) currentBp = \"xl\";\n      else if (mediaQueries.lg?.matches) currentBp = \"lg\";\n      else if (mediaQueries.md?.matches) currentBp = \"md\";\n      else currentBp = \"sm\";\n\n      setBreakpoint(currentBp);\n    };\n\n    // Initial check\n    updateBreakpoint();\n\n    // Add listeners\n    Object.values(mediaQueries).forEach(mq => {\n      if (mq) mq.addEventListener('change', updateBreakpoint);\n    });\n\n    return () => {\n      Object.values(mediaQueries).forEach(mq => {\n        if (mq) mq.removeEventListener('change', updateBreakpoint);\n      });\n    };\n  }, [mediaQueries, isHydrated]);\n\n  // Min width check: is current width >= breakpoint\n  const up = useCallback((bp: Breakpoint) => {\n    if (typeof window === 'undefined' || !isHydrated) {\n      // SSR fallback: check if ssrBreakpoint >= bp\n      return BREAKPOINTS[breakpoint] >= BREAKPOINTS[bp];\n    }\n    const mq = window.matchMedia(`(min-width: ${BREAKPOINTS[bp]}px)`);\n    return mq.matches;\n  }, [isHydrated, breakpoint]);\n\n  // Max width check: is current width < breakpoint\n  const down = useCallback((bp: Breakpoint) => {\n    if (typeof window === 'undefined' || !isHydrated) {\n      // SSR fallback: check if ssrBreakpoint < bp\n      return BREAKPOINTS[breakpoint] < BREAKPOINTS[bp];\n    }\n    const mq = window.matchMedia(`(max-width: ${BREAKPOINTS[bp] - 1}px)`);\n    return mq.matches;\n  }, [isHydrated, breakpoint]);\n\n  // Range check: is current width between min and max breakpoints\n  const between = useCallback((minBp: Breakpoint, maxBp: Breakpoint) => {\n    if (typeof window === 'undefined' || !isHydrated) {\n      // SSR fallback: check if minBp <= ssrBreakpoint < maxBp\n      return BREAKPOINTS[breakpoint] >= BREAKPOINTS[minBp] && BREAKPOINTS[breakpoint] < BREAKPOINTS[maxBp];\n    }\n    const mq = window.matchMedia(`(min-width: ${BREAKPOINTS[minBp]}px) and (max-width: ${BREAKPOINTS[maxBp] - 1}px)`);\n    return mq.matches;\n  }, [isHydrated, breakpoint]);\n\n  // Only check: is current width only within this breakpoint range\n  const only = useCallback((bp: Breakpoint) => {\n    if (typeof window === 'undefined' || !isHydrated) {\n      // SSR fallback: check if ssrBreakpoint === bp\n      return breakpoint === bp;\n    }\n\n    const breakpointKeys = Object.keys(BREAKPOINTS) as Breakpoint[];\n    const currentIndex = breakpointKeys.indexOf(bp);\n    const nextBp = breakpointKeys[currentIndex + 1];\n\n    let query: string;\n    if (currentIndex === 0) {\n      // For 'sm', check if width < md\n      query = `(max-width: ${BREAKPOINTS.md - 1}px)`;\n    } else if (!nextBp) {\n      // For highest breakpoint, check if width >= current\n      query = `(min-width: ${BREAKPOINTS[bp]}px)`;\n    } else {\n      // For middle breakpoints, check range\n      query = `(min-width: ${BREAKPOINTS[bp]}px) and (max-width: ${BREAKPOINTS[nextBp] - 1}px)`;\n    }\n\n    const mq = window.matchMedia(query);\n    return mq.matches;\n  }, [isHydrated, breakpoint]);\n\n  return {\n    breakpoint,\n    up,\n    down,\n    between,\n    only,\n  };\n};\n"],"names":["BREAKPOINTS","useBreakpoint","ssrBreakpoint","breakpoint","setBreakpoint","useState","isHydrated","setIsHydrated","mediaQueries","useMemo","queries","useEffect","updateBreakpoint","currentBp","_a","_b","_c","_d","mq","up","useCallback","bp","down","between","minBp","maxBp","only","breakpointKeys","currentIndex","nextBp","query"],"mappings":"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"}
+{"version":3,"file":"useBreakpoint.js","sources":["../../../src/components/hooks/useBreakpoint.ts"],"sourcesContent":["\"use client\";\nimport { useEffect, useState, useCallback, useMemo } from \"react\";\n\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\";\n\nexport const BREAKPOINTS = {\n  sm: 640,\n  md: 768,\n  lg: 1024,\n  xl: 1280,\n  \"2xl\": 1536,\n};\n\n/**\n * A responsive breakpoint hook using window.matchMedia for optimal performance.\n *\n * @param ssrBreakpoint - The breakpoint to use during SSR and before hydration.\n *                       Defaults to \"lg\" for better SEO (search engines typically use desktop viewports).\n *\n * @example\n * ```tsx\n * // Default: uses \"lg\" for SSR\n * const bp = useBreakpoint();\n *\n * // Custom SSR breakpoint\n * const bp = useBreakpoint(\"md\");\n *\n * // Usage\n * bp.breakpoint     // Current breakpoint: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\"\n * bp.up(\"md\")       // true if screen >= 768px\n * bp.down(\"lg\")     // true if screen < 1024px\n * bp.between(\"md\", \"xl\")  // true if 768px <= screen < 1280px\n * bp.only(\"lg\")     // true if screen is exactly in \"lg\" range\n * ```\n */\nexport const useBreakpoint = (ssrBreakpoint: Breakpoint = \"lg\") => {\n  const [breakpoint, setBreakpoint] = useState<Breakpoint>(ssrBreakpoint);\n  const [isHydrated, setIsHydrated] = useState(false);\n\n  // Generate media queries\n  const mediaQueries = useMemo(() => {\n    const queries: Record<Breakpoint, MediaQueryList> = {} as any;\n    if (typeof window !== 'undefined') {\n      queries.sm = window.matchMedia(`(max-width: ${BREAKPOINTS.md - 1}px)`);\n      queries.md = window.matchMedia(`(min-width: ${BREAKPOINTS.md}px) and (max-width: ${BREAKPOINTS.lg - 1}px)`);\n      queries.lg = window.matchMedia(`(min-width: ${BREAKPOINTS.lg}px) and (max-width: ${BREAKPOINTS.xl - 1}px)`);\n      queries.xl = window.matchMedia(`(min-width: ${BREAKPOINTS.xl}px) and (max-width: ${BREAKPOINTS[\"2xl\"] - 1}px)`);\n      queries[\"2xl\"] = window.matchMedia(`(min-width: ${BREAKPOINTS[\"2xl\"]}px)`);\n    }\n    return queries;\n  }, []);\n\n  useEffect(() => {\n    setIsHydrated(true);\n  }, []);\n\n  useEffect(() => {\n    if (typeof window === 'undefined' || !isHydrated) return;\n\n    const updateBreakpoint = () => {\n      let currentBp: Breakpoint = \"sm\";\n\n      if (mediaQueries[\"2xl\"]?.matches) currentBp = \"2xl\";\n      else if (mediaQueries.xl?.matches) currentBp = \"xl\";\n      else if (mediaQueries.lg?.matches) currentBp = \"lg\";\n      else if (mediaQueries.md?.matches) currentBp = \"md\";\n      else currentBp = \"sm\";\n\n      setBreakpoint(currentBp);\n    };\n\n    // Initial check\n    updateBreakpoint();\n\n    // Add listeners\n    Object.values(mediaQueries).forEach(mq => {\n      if (mq) mq.addEventListener('change', updateBreakpoint);\n    });\n\n    return () => {\n      Object.values(mediaQueries).forEach(mq => {\n        if (mq) mq.removeEventListener('change', updateBreakpoint);\n      });\n    };\n  }, [mediaQueries, isHydrated]);\n\n  // Min width check: is current width >= breakpoint\n  const up = useCallback((bp: Breakpoint) => {\n    if (typeof window === 'undefined' || !isHydrated) {\n      // SSR fallback: check if ssrBreakpoint >= bp\n      return BREAKPOINTS[breakpoint] >= BREAKPOINTS[bp];\n    }\n    const mq = window.matchMedia(`(min-width: ${BREAKPOINTS[bp]}px)`);\n    return mq.matches;\n  }, [isHydrated, breakpoint]);\n\n  // Max width check: is current width < breakpoint\n  const down = useCallback((bp: Breakpoint) => {\n    if (typeof window === 'undefined' || !isHydrated) {\n      // SSR fallback: check if ssrBreakpoint < bp\n      return BREAKPOINTS[breakpoint] < BREAKPOINTS[bp];\n    }\n    const mq = window.matchMedia(`(max-width: ${BREAKPOINTS[bp] - 1}px)`);\n    return mq.matches;\n  }, [isHydrated, breakpoint]);\n\n  // Range check: is current width between min and max breakpoints\n  const between = useCallback((minBp: Breakpoint, maxBp: Breakpoint) => {\n    if (typeof window === 'undefined' || !isHydrated) {\n      // SSR fallback: check if minBp <= ssrBreakpoint < maxBp\n      return BREAKPOINTS[breakpoint] >= BREAKPOINTS[minBp] && BREAKPOINTS[breakpoint] < BREAKPOINTS[maxBp];\n    }\n    const mq = window.matchMedia(`(min-width: ${BREAKPOINTS[minBp]}px) and (max-width: ${BREAKPOINTS[maxBp] - 1}px)`);\n    return mq.matches;\n  }, [isHydrated, breakpoint]);\n\n  // Only check: is current width only within this breakpoint range\n  const only = useCallback((bp: Breakpoint) => {\n    if (typeof window === 'undefined' || !isHydrated) {\n      // SSR fallback: check if ssrBreakpoint === bp\n      return breakpoint === bp;\n    }\n\n    const breakpointKeys = Object.keys(BREAKPOINTS) as Breakpoint[];\n    const currentIndex = breakpointKeys.indexOf(bp);\n    const nextBp = breakpointKeys[currentIndex + 1];\n\n    let query: string;\n    if (currentIndex === 0) {\n      // For 'sm', check if width < md\n      query = `(max-width: ${BREAKPOINTS.md - 1}px)`;\n    } else if (!nextBp) {\n      // For highest breakpoint, check if width >= current\n      query = `(min-width: ${BREAKPOINTS[bp]}px)`;\n    } else {\n      // For middle breakpoints, check range\n      query = `(min-width: ${BREAKPOINTS[bp]}px) and (max-width: ${BREAKPOINTS[nextBp] - 1}px)`;\n    }\n\n    const mq = window.matchMedia(query);\n    return mq.matches;\n  }, [isHydrated, breakpoint]);\n\n  return {\n    breakpoint,\n    up,\n    down,\n    between,\n    only,\n  };\n};\n"],"names":["BREAKPOINTS","useBreakpoint","ssrBreakpoint","breakpoint","setBreakpoint","useState","isHydrated","setIsHydrated","mediaQueries","useMemo","queries","useEffect","updateBreakpoint","currentBp","mq","up","useCallback","bp","down","between","minBp","maxBp","only","breakpointKeys","currentIndex","nextBp","query"],"mappings":";;AAKO,MAAMA,IAAc;AAAA,EACzB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,OAAO;AACT,GAwBaC,IAAgB,CAACC,IAA4B,SAAS;AACjE,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAAqBH,CAAa,GAChE,CAACI,GAAYC,CAAa,IAAIF,EAAS,EAAK,GAG5CG,IAAeC,EAAQ,MAAM;AACjC,UAAMC,IAA8C,CAAA;AACpD,WAAI,OAAO,SAAW,QACpBA,EAAQ,KAAK,OAAO,WAAW,eAAeV,EAAY,KAAK,CAAC,KAAK,GACrEU,EAAQ,KAAK,OAAO,WAAW,eAAeV,EAAY,EAAE,uBAAuBA,EAAY,KAAK,CAAC,KAAK,GAC1GU,EAAQ,KAAK,OAAO,WAAW,eAAeV,EAAY,EAAE,uBAAuBA,EAAY,KAAK,CAAC,KAAK,GAC1GU,EAAQ,KAAK,OAAO,WAAW,eAAeV,EAAY,EAAE,uBAAuBA,EAAY,KAAK,IAAI,CAAC,KAAK,GAC9GU,EAAQ,KAAK,IAAI,OAAO,WAAW,eAAeV,EAAY,KAAK,CAAC,KAAK,IAEpEU;AAAA,EACT,GAAG,CAAA,CAAE;AAEL,EAAAC,EAAU,MAAM;AACd,IAAAJ,EAAc,EAAI;AAAA,EACpB,GAAG,CAAA,CAAE,GAELI,EAAU,MAAM;AACd,QAAI,OAAO,SAAW,OAAe,CAACL,EAAY;AAElD,UAAMM,IAAmB,MAAM;AAC7B,UAAIC,IAAwB;AAE5B,MAAIL,EAAa,KAAK,GAAG,UAASK,IAAY,QACrCL,EAAa,IAAI,UAASK,IAAY,OACtCL,EAAa,IAAI,UAASK,IAAY,OACtCL,EAAa,IAAI,UAASK,IAAY,OAC1CA,IAAY,MAEjBT,EAAcS,CAAS;AAAA,IACzB;AAGA,WAAAD,EAAA,GAGA,OAAO,OAAOJ,CAAY,EAAE,QAAQ,CAAAM,MAAM;AACxC,MAAIA,KAAIA,EAAG,iBAAiB,UAAUF,CAAgB;AAAA,IACxD,CAAC,GAEM,MAAM;AACX,aAAO,OAAOJ,CAAY,EAAE,QAAQ,CAAAM,MAAM;AACxC,QAAIA,KAAIA,EAAG,oBAAoB,UAAUF,CAAgB;AAAA,MAC3D,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAACJ,GAAcF,CAAU,CAAC;AAG7B,QAAMS,IAAKC,EAAY,CAACC,MAClB,OAAO,SAAW,OAAe,CAACX,IAE7BN,EAAYG,CAAU,KAAKH,EAAYiB,CAAE,IAEvC,OAAO,WAAW,eAAejB,EAAYiB,CAAE,CAAC,KAAK,EACtD,SACT,CAACX,GAAYH,CAAU,CAAC,GAGrBe,IAAOF,EAAY,CAACC,MACpB,OAAO,SAAW,OAAe,CAACX,IAE7BN,EAAYG,CAAU,IAAIH,EAAYiB,CAAE,IAEtC,OAAO,WAAW,eAAejB,EAAYiB,CAAE,IAAI,CAAC,KAAK,EAC1D,SACT,CAACX,GAAYH,CAAU,CAAC,GAGrBgB,IAAUH,EAAY,CAACI,GAAmBC,MAC1C,OAAO,SAAW,OAAe,CAACf,IAE7BN,EAAYG,CAAU,KAAKH,EAAYoB,CAAK,KAAKpB,EAAYG,CAAU,IAAIH,EAAYqB,CAAK,IAE1F,OAAO,WAAW,eAAerB,EAAYoB,CAAK,CAAC,uBAAuBpB,EAAYqB,CAAK,IAAI,CAAC,KAAK,EACtG,SACT,CAACf,GAAYH,CAAU,CAAC,GAGrBmB,IAAON,EAAY,CAACC,MAAmB;AAC3C,QAAI,OAAO,SAAW,OAAe,CAACX;AAEpC,aAAOH,MAAec;AAGxB,UAAMM,IAAiB,OAAO,KAAKvB,CAAW,GACxCwB,IAAeD,EAAe,QAAQN,CAAE,GACxCQ,IAASF,EAAeC,IAAe,CAAC;AAE9C,QAAIE;AACJ,WAAIF,MAAiB,IAEnBE,IAAQ,eAAe1B,EAAY,KAAK,CAAC,QAC/ByB,IAKVC,IAAQ,eAAe1B,EAAYiB,CAAE,CAAC,uBAAuBjB,EAAYyB,CAAM,IAAI,CAAC,QAHpFC,IAAQ,eAAe1B,EAAYiB,CAAE,CAAC,OAM7B,OAAO,WAAWS,CAAK,EACxB;AAAA,EACZ,GAAG,CAACpB,GAAYH,CAAU,CAAC;AAE3B,SAAO;AAAA,IACL,YAAAA;AAAA,IACA,IAAAY;AAAA,IACA,MAAAG;AAAA,IACA,SAAAC;AAAA,IACA,MAAAG;AAAA,EAAA;AAEJ;"}

package/dist/components/hooks/useCSSVariables.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Get CSS variables from the document
+ * @param variables CSS variable names
+ * @returns CSS variable values
+ */
+export declare const useCSSVariables: (variables: string | string[]) => Record<string, string>;
+//# sourceMappingURL=useCSSVariables.d.ts.map

package/dist/components/hooks/useCSSVariables.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCSSVariables.d.ts","sourceRoot":"","sources":["../../../src/components/hooks/useCSSVariables.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAAI,WAAW,MAAM,GAAG,MAAM,EAAE,2BAQ3D,CAAC"}

package/dist/components/hooks/useCSSVariables.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCSSVariables.js","sources":["../../../src/components/hooks/useCSSVariables.ts"],"sourcesContent":["\"use client\";\n\n/**\n * Get CSS variables from the document\n * @param variables CSS variable names\n * @returns CSS variable values\n */\nexport const useCSSVariables = (variables: string | string[]) => {\n  const variablesList = Array.isArray(variables) ? variables : [variables];\n  const el = window.getComputedStyle(document.body);\n  return variablesList.reduce((acc, variable) => {\n    const variableName = variable.startsWith(\"--\") ? variable : `--${variable}`;\n    acc[variableName] = el.getPropertyValue(variableName);\n    return acc;\n  }, {} as Record<string, string>);\n};\n"],"names":["useCSSVariables","variables","variablesList","el","acc","variable","variableName"],"mappings":";AAOa,MAAAA,IAAkB,CAACC,MAAiC;AAC/D,QAAMC,IAAgB,MAAM,QAAQD,CAAS,IAAIA,IAAY,CAACA,CAAS,GACjEE,IAAK,OAAO,iBAAiB,SAAS,IAAI;AAChD,SAAOD,EAAc,OAAO,CAACE,GAAKC,MAAa;AAC7C,UAAMC,IAAeD,EAAS,WAAW,IAAI,IAAIA,IAAW,KAAKA,CAAQ;AACzE,WAAAD,EAAIE,CAAY,IAAIH,EAAG,iBAAiBG,CAAY,GAC7CF;AAAA,EACT,GAAG,EAA4B;AACjC;"}
+{"version":3,"file":"useCSSVariables.js","sources":["../../../src/components/hooks/useCSSVariables.ts"],"sourcesContent":["\"use client\";\n\n/**\n * Get CSS variables from the document\n * @param variables CSS variable names\n * @returns CSS variable values\n */\nexport const useCSSVariables = (variables: string | string[]) => {\n  const variablesList = Array.isArray(variables) ? variables : [variables];\n  const el = window.getComputedStyle(document.body);\n  return variablesList.reduce((acc, variable) => {\n    const variableName = variable.startsWith(\"--\") ? variable : `--${variable}`;\n    acc[variableName] = el.getPropertyValue(variableName);\n    return acc;\n  }, {} as Record<string, string>);\n};\n"],"names":["useCSSVariables","variables","variablesList","el","acc","variable","variableName"],"mappings":";AAOO,MAAMA,IAAkB,CAACC,MAAiC;AAC/D,QAAMC,IAAgB,MAAM,QAAQD,CAAS,IAAIA,IAAY,CAACA,CAAS,GACjEE,IAAK,OAAO,iBAAiB,SAAS,IAAI;AAChD,SAAOD,EAAc,OAAO,CAACE,GAAKC,MAAa;AAC7C,UAAMC,IAAeD,EAAS,WAAW,IAAI,IAAIA,IAAW,KAAKA,CAAQ;AACzE,WAAAD,EAAIE,CAAY,IAAIH,EAAG,iBAAiBG,CAAY,GAC7CF;AAAA,EACT,GAAG,CAAA,CAA4B;AACjC;"}

package/dist/components/hooks/useCharts.d.ts

@@ -0,0 +1,41 @@
+import { SequentialPaletteName, CategoricalPaletteName, Theme } from '../../tokens';
+export interface UseChartsOptions {
+    /**
+     * The palette to use for the charts.
+     * @default "cloudscape"
+     */
+    palette?: SequentialPaletteName | CategoricalPaletteName;
+    /**
+     * The theme to use for the charts.
+     * @default "light"
+     */
+    theme?: Theme;
+}
+/**
+ * Get chart colors and axis configuration based on the current theme.
+ * @param options
+ * @returns
+ */
+export declare const useCharts: (options?: UseChartsOptions) => {
+    axisLineColor: string;
+    splitLineColor: string;
+    axisLabelColor: string;
+    chartColors: string[];
+    echartsAxisConfig: {
+        axisLine: {
+            lineStyle: {
+                color: string;
+            };
+        };
+        splitLine: {
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisLabel: {
+            color: string;
+            fontFamily: string;
+        };
+    };
+};
+//# sourceMappingURL=useCharts.d.ts.map

package/dist/components/hooks/useCharts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCharts.d.ts","sourceRoot":"","sources":["../../../src/components/hooks/useCharts.ts"],"names":[],"mappings":"AAIA,OAAO,EACL,qBAAqB,EACrB,sBAAsB,EAKtB,KAAK,EACN,MAAM,cAAc,CAAC;AAGtB,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,OAAO,CAAC,EAAE,qBAAqB,GAAG,sBAAsB,CAAC;IACzD;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;CACf;AAED;;;;GAIG;AACH,eAAO,MAAM,SAAS,GACpB,UAAS,gBAGR;;;;;;;;;;;;;;;;;;;;;CAsCF,CAAC"}

package/dist/components/hooks/useCharts.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCharts.js","sources":["../../../src/components/hooks/useCharts.ts"],"sourcesContent":["import { useDS } from \"../ds-root/context\";\nimport { getTokensByTheme } from \"../../tokens/utils\";\nimport { chartColorTokens } from \"../../tokens/charts/palettes/cloudscape\";\n\nimport {\n  SequentialPaletteName,\n  CategoricalPaletteName,\n  CATEGORICAL_PALETTE_NAMES,\n  getCategoricalChartColors,\n  getSequentialChartColors,\n  SEQUENTIAL_PALETTE_NAMES,\n  Theme,\n} from \"../../tokens\";\nimport { useMemo } from \"react\";\n\nexport interface UseChartsOptions {\n  /**\n   * The palette to use for the charts.\n   * @default \"cloudscape\"\n   */\n  palette?: SequentialPaletteName | CategoricalPaletteName;\n  /**\n   * The theme to use for the charts.\n   * @default \"light\"\n   */\n  theme?: Theme;\n}\n\n/**\n * Get chart colors and axis configuration based on the current theme.\n * @param options\n * @returns\n */\nexport const useCharts = (\n  options: UseChartsOptions = {\n    palette: \"cloudscape\",\n    theme: undefined,\n  }\n) => {\n  const { theme: themeContext } = useDS();\n  const theme = options.theme || themeContext;\n\n  const chartInfo = useMemo(() => {\n    const themedChartColorTokens = getTokensByTheme(chartColorTokens, theme);\n    const axisLineColor = themedChartColorTokens[\"colorChartsLineAxis\"];\n    const splitLineColor = themedChartColorTokens[\"colorChartsLineGrid\"];\n    const axisLabelColor = themedChartColorTokens[\"colorChartsLabelAxis\"];\n\n    const palette = options.palette;\n\n    const chartColors = CATEGORICAL_PALETTE_NAMES.includes(\n      palette as CategoricalPaletteName\n    )\n      ? getCategoricalChartColors(palette as CategoricalPaletteName, theme)\n      : SEQUENTIAL_PALETTE_NAMES.includes(palette as SequentialPaletteName)\n      ? getSequentialChartColors(palette as SequentialPaletteName, theme)\n      : [];\n    const echartsAxisConfig = {\n      axisLine: { lineStyle: { color: axisLineColor } },\n      splitLine: { lineStyle: { color: splitLineColor } },\n      axisLabel: {\n        color: axisLabelColor,\n        fontFamily: \"InterVariable, Inter, Helvetica, Arial, sans-serif\",\n      },\n    };\n    return {\n      axisLineColor,\n      splitLineColor,\n      axisLabelColor,\n      chartColors,\n      echartsAxisConfig,\n    };\n  }, [theme, options.palette]);\n\n  return chartInfo;\n};\n"],"names":["useCharts","options","themeContext","useDS","theme","useMemo","themedChartColorTokens","getTokensByTheme","chartColorTokens","axisLineColor","splitLineColor","axisLabelColor","palette","chartColors","CATEGORICAL_PALETTE_NAMES","getCategoricalChartColors","SEQUENTIAL_PALETTE_NAMES","getSequentialChartColors"],"mappings":";;;;;AAiCa,MAAAA,IAAY,CACvBC,IAA4B;AAAA,EAC1B,SAAS;AAAA,EACT,OAAO;AACT,MACG;AACH,QAAM,EAAE,OAAOC,EAAa,IAAIC,EAAM,GAChCC,IAAQH,EAAQ,SAASC;AAkCxB,SAhCWG,EAAQ,MAAM;AACxB,UAAAC,IAAyBC,EAAiBC,GAAkBJ,CAAK,GACjEK,IAAgBH,EAAuB,qBACvCI,IAAiBJ,EAAuB,qBACxCK,IAAiBL,EAAuB,sBAExCM,IAAUX,EAAQ,SAElBY,IAAcC,EAA0B;AAAA,MAC5CF;AAAA,IAEE,IAAAG,EAA0BH,GAAmCR,CAAK,IAClEY,EAAyB,SAASJ,CAAgC,IAClEK,EAAyBL,GAAkCR,CAAK,IAChE,CAAC;AASE,WAAA;AAAA,MACL,eAAAK;AAAA,MACA,gBAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,aAAAE;AAAA,MACA,mBAbwB;AAAA,QACxB,UAAU,EAAE,WAAW,EAAE,OAAOJ,IAAgB;AAAA,QAChD,WAAW,EAAE,WAAW,EAAE,OAAOC,IAAiB;AAAA,QAClD,WAAW;AAAA,UACT,OAAOC;AAAA,UACP,YAAY;AAAA,QAAA;AAAA,MAEhB;AAAA,IAOA;AAAA,EACC,GAAA,CAACP,GAAOH,EAAQ,OAAO,CAAC;AAG7B;"}
+{"version":3,"file":"useCharts.js","sources":["../../../src/components/hooks/useCharts.ts"],"sourcesContent":["import { useDS } from \"../ds-root/context\";\nimport { getTokensByTheme } from \"../../tokens/utils\";\nimport { chartColorTokens } from \"../../tokens/charts/palettes/cloudscape\";\n\nimport {\n  SequentialPaletteName,\n  CategoricalPaletteName,\n  CATEGORICAL_PALETTE_NAMES,\n  getCategoricalChartColors,\n  getSequentialChartColors,\n  SEQUENTIAL_PALETTE_NAMES,\n  Theme,\n} from \"../../tokens\";\nimport { useMemo } from \"react\";\n\nexport interface UseChartsOptions {\n  /**\n   * The palette to use for the charts.\n   * @default \"cloudscape\"\n   */\n  palette?: SequentialPaletteName | CategoricalPaletteName;\n  /**\n   * The theme to use for the charts.\n   * @default \"light\"\n   */\n  theme?: Theme;\n}\n\n/**\n * Get chart colors and axis configuration based on the current theme.\n * @param options\n * @returns\n */\nexport const useCharts = (\n  options: UseChartsOptions = {\n    palette: \"cloudscape\",\n    theme: undefined,\n  }\n) => {\n  const { theme: themeContext } = useDS();\n  const theme = options.theme || themeContext;\n\n  const chartInfo = useMemo(() => {\n    const themedChartColorTokens = getTokensByTheme(chartColorTokens, theme);\n    const axisLineColor = themedChartColorTokens[\"colorChartsLineAxis\"];\n    const splitLineColor = themedChartColorTokens[\"colorChartsLineGrid\"];\n    const axisLabelColor = themedChartColorTokens[\"colorChartsLabelAxis\"];\n\n    const palette = options.palette;\n\n    const chartColors = CATEGORICAL_PALETTE_NAMES.includes(\n      palette as CategoricalPaletteName\n    )\n      ? getCategoricalChartColors(palette as CategoricalPaletteName, theme)\n      : SEQUENTIAL_PALETTE_NAMES.includes(palette as SequentialPaletteName)\n      ? getSequentialChartColors(palette as SequentialPaletteName, theme)\n      : [];\n    const echartsAxisConfig = {\n      axisLine: { lineStyle: { color: axisLineColor } },\n      splitLine: { lineStyle: { color: splitLineColor } },\n      axisLabel: {\n        color: axisLabelColor,\n        fontFamily: \"InterVariable, Inter, Helvetica, Arial, sans-serif\",\n      },\n    };\n    return {\n      axisLineColor,\n      splitLineColor,\n      axisLabelColor,\n      chartColors,\n      echartsAxisConfig,\n    };\n  }, [theme, options.palette]);\n\n  return chartInfo;\n};\n"],"names":["useCharts","options","themeContext","useDS","theme","useMemo","themedChartColorTokens","getTokensByTheme","chartColorTokens","axisLineColor","splitLineColor","axisLabelColor","palette","chartColors","CATEGORICAL_PALETTE_NAMES","getCategoricalChartColors","SEQUENTIAL_PALETTE_NAMES","getSequentialChartColors"],"mappings":";;;;;AAiCO,MAAMA,IAAY,CACvBC,IAA4B;AAAA,EAC1B,SAAS;AAAA,EACT,OAAO;AACT,MACG;AACH,QAAM,EAAE,OAAOC,EAAA,IAAiBC,EAAA,GAC1BC,IAAQH,EAAQ,SAASC;AAkC/B,SAhCkBG,EAAQ,MAAM;AAC9B,UAAMC,IAAyBC,EAAiBC,GAAkBJ,CAAK,GACjEK,IAAgBH,EAAuB,qBACvCI,IAAiBJ,EAAuB,qBACxCK,IAAiBL,EAAuB,sBAExCM,IAAUX,EAAQ,SAElBY,IAAcC,EAA0B;AAAA,MAC5CF;AAAA,IAAA,IAEEG,EAA0BH,GAAmCR,CAAK,IAClEY,EAAyB,SAASJ,CAAgC,IAClEK,EAAyBL,GAAkCR,CAAK,IAChE,CAAA;AASJ,WAAO;AAAA,MACL,eAAAK;AAAA,MACA,gBAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,aAAAE;AAAA,MACA,mBAbwB;AAAA,QACxB,UAAU,EAAE,WAAW,EAAE,OAAOJ,IAAc;AAAA,QAC9C,WAAW,EAAE,WAAW,EAAE,OAAOC,IAAe;AAAA,QAChD,WAAW;AAAA,UACT,OAAOC;AAAA,UACP,YAAY;AAAA,QAAA;AAAA,MACd;AAAA,IAOA;AAAA,EAEJ,GAAG,CAACP,GAAOH,EAAQ,OAAO,CAAC;AAG7B;"}

package/dist/components/hooks/useControlledState.d.ts

@@ -0,0 +1,13 @@
+/**
+ * A hook that manages state that can be either controlled or uncontrolled.
+ *
+ * @param value - The controlled value
+ * @param onChange - Callback when the value changes
+ * @param defaultValue - Default value for uncontrolled state
+ * @returns [currentValue, setValue] - Current value and setter function
+ */
+export declare function useControlledState<T, K extends unknown[] = []>(value?: T, onChange?: ((value: T, ...args: K | []) => void) | React.Dispatch<React.SetStateAction<T>>, defaultValue?: T): [
+    T | undefined,
+    (value: T | ((prev: T | undefined) => T), ...args: K | []) => void
+];
+//# sourceMappingURL=useControlledState.d.ts.map

package/dist/components/hooks/useControlledState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useControlledState.d.ts","sourceRoot":"","sources":["../../../src/components/hooks/useControlledState.ts"],"names":[],"mappings":"AAOA;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,CAAC,SAAS,OAAO,EAAE,GAAG,EAAE,EAC5D,KAAK,CAAC,EAAE,CAAC,EACT,QAAQ,CAAC,EACL,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC,GAAG,EAAE,KAAK,IAAI,CAAC,GACrC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,EAC3C,YAAY,CAAC,EAAE,CAAC,GACf;IACD,CAAC,GAAG,SAAS;IACb,CAAC,KAAK,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,GAAG,SAAS,KAAK,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC,GAAG,EAAE,KAAK,IAAI;CACnE,CAkDA"}

package/dist/components/hooks/useControlledState.js.map

@@ -1 +1 @@
-{"version":3,"file":"useControlledState.js","sources":["../../../src/components/hooks/useControlledState.ts"],"sourcesContent":["\"use client\";\nimport { useCallback, useState } from \"react\";\n\n// Ref:\n// https://github.com/adobe/react-spectrum/blob/main/packages/%40react-stately/utils/src/useControlledState.ts\n// https://github.com/chakra-ui/chakra-ui/tree/main/packages/hooks/use-controllable-state\n\n/**\n * A hook that manages state that can be either controlled or uncontrolled.\n *\n * @param value - The controlled value\n * @param onChange - Callback when the value changes\n * @param defaultValue - Default value for uncontrolled state\n * @returns [currentValue, setValue] - Current value and setter function\n */\nexport function useControlledState<T, K extends unknown[] = []>(\n  value?: T,\n  onChange?:\n    | ((value: T, ...args: K | []) => void)\n    | React.Dispatch<React.SetStateAction<T>>,\n  defaultValue?: T\n): [\n  T | undefined,\n  (value: T | ((prev: T | undefined) => T), ...args: K | []) => void\n] {\n  const [internalState, setInternalState] = useState<T | undefined>(\n    defaultValue\n  );\n\n  const isControlled = value !== undefined;\n  const currentValue = isControlled ? value : internalState;\n\n  // This is a generic setter function that works with both controlled and uncontrolled modes\n  // and preserves the ability to pass additional arguments to the onChange handler\n  const setValue = useCallback(\n    function setValue(\n      nextValue: T | ((prev: T | undefined) => T),\n      ...args: K | []\n    ): void {\n      // If nextValue is a function, call it with the current value\n      const resolvedValue =\n        typeof nextValue === \"function\"\n          ? (nextValue as (prev: T | undefined) => T)(currentValue)\n          : nextValue;\n\n      // Only update internal state if we're not controlled\n      if (!isControlled) {\n        setInternalState(resolvedValue);\n      }\n\n      // Call onChange if provided\n      if (onChange) {\n        if (typeof onChange === \"function\") {\n          // Check if onChange is the multi-argument form\n          if (onChange.length > 1) {\n            // It's the form: (value: T, ...args: K) => void\n            // Use a type assertion to handle the variable arguments\n            (onChange as (value: T, ...args: K) => void)(\n              resolvedValue,\n              ...(args as K)\n            );\n          } else {\n            // It's the React.Dispatch form or a simple (value: T) => void\n            (onChange as React.Dispatch<React.SetStateAction<T>>)(\n              resolvedValue\n            );\n          }\n        }\n      }\n    },\n    [isControlled, onChange, currentValue]\n  );\n\n  return [currentValue, setValue];\n}\n"],"names":["useControlledState","value","onChange","defaultValue","internalState","setInternalState","useState","isControlled","currentValue","setValue","useCallback","nextValue","args","resolvedValue"],"mappings":";;AAegB,SAAAA,EACdC,GACAC,GAGAC,GAIA;AACM,QAAA,CAACC,GAAeC,CAAgB,IAAIC;AAAA,IACxCH;AAAA,EACF,GAEMI,IAAeN,MAAU,QACzBO,IAAeD,IAAeN,IAAQG,GAItCK,IAAWC;AAAA,IACf,SACEC,MACGC,GACG;AAEN,YAAMC,IACJ,OAAOF,KAAc,aAChBA,EAAyCH,CAAY,IACtDG;AAGN,MAAKJ,KACHF,EAAiBQ,CAAa,GAI5BX,KACE,OAAOA,KAAa,eAElBA,EAAS,SAAS,IAGnBA;AAAA,QACCW;AAAA,QACA,GAAID;AAAA,MACN,IAGCV;AAAA,QACCW;AAAA,MACF;AAAA,IAIR;AAAA,IACA,CAACN,GAAcL,GAAUM,CAAY;AAAA,EACvC;AAEO,SAAA,CAACA,GAAcC,CAAQ;AAChC;"}
+{"version":3,"file":"useControlledState.js","sources":["../../../src/components/hooks/useControlledState.ts"],"sourcesContent":["\"use client\";\nimport { useCallback, useState } from \"react\";\n\n// Ref:\n// https://github.com/adobe/react-spectrum/blob/main/packages/%40react-stately/utils/src/useControlledState.ts\n// https://github.com/chakra-ui/chakra-ui/tree/main/packages/hooks/use-controllable-state\n\n/**\n * A hook that manages state that can be either controlled or uncontrolled.\n *\n * @param value - The controlled value\n * @param onChange - Callback when the value changes\n * @param defaultValue - Default value for uncontrolled state\n * @returns [currentValue, setValue] - Current value and setter function\n */\nexport function useControlledState<T, K extends unknown[] = []>(\n  value?: T,\n  onChange?:\n    | ((value: T, ...args: K | []) => void)\n    | React.Dispatch<React.SetStateAction<T>>,\n  defaultValue?: T\n): [\n  T | undefined,\n  (value: T | ((prev: T | undefined) => T), ...args: K | []) => void\n] {\n  const [internalState, setInternalState] = useState<T | undefined>(\n    defaultValue\n  );\n\n  const isControlled = value !== undefined;\n  const currentValue = isControlled ? value : internalState;\n\n  // This is a generic setter function that works with both controlled and uncontrolled modes\n  // and preserves the ability to pass additional arguments to the onChange handler\n  const setValue = useCallback(\n    function setValue(\n      nextValue: T | ((prev: T | undefined) => T),\n      ...args: K | []\n    ): void {\n      // If nextValue is a function, call it with the current value\n      const resolvedValue =\n        typeof nextValue === \"function\"\n          ? (nextValue as (prev: T | undefined) => T)(currentValue)\n          : nextValue;\n\n      // Only update internal state if we're not controlled\n      if (!isControlled) {\n        setInternalState(resolvedValue);\n      }\n\n      // Call onChange if provided\n      if (onChange) {\n        if (typeof onChange === \"function\") {\n          // Check if onChange is the multi-argument form\n          if (onChange.length > 1) {\n            // It's the form: (value: T, ...args: K) => void\n            // Use a type assertion to handle the variable arguments\n            (onChange as (value: T, ...args: K) => void)(\n              resolvedValue,\n              ...(args as K)\n            );\n          } else {\n            // It's the React.Dispatch form or a simple (value: T) => void\n            (onChange as React.Dispatch<React.SetStateAction<T>>)(\n              resolvedValue\n            );\n          }\n        }\n      }\n    },\n    [isControlled, onChange, currentValue]\n  );\n\n  return [currentValue, setValue];\n}\n"],"names":["useControlledState","value","onChange","defaultValue","internalState","setInternalState","useState","isControlled","currentValue","setValue","useCallback","nextValue","args","resolvedValue"],"mappings":";;AAeO,SAASA,EACdC,GACAC,GAGAC,GAIA;AACA,QAAM,CAACC,GAAeC,CAAgB,IAAIC;AAAA,IACxCH;AAAA,EAAA,GAGII,IAAeN,MAAU,QACzBO,IAAeD,IAAeN,IAAQG,GAItCK,IAAWC;AAAA,IACf,SACEC,MACGC,GACG;AAEN,YAAMC,IACJ,OAAOF,KAAc,aAChBA,EAAyCH,CAAY,IACtDG;AAGN,MAAKJ,KACHF,EAAiBQ,CAAa,GAI5BX,KACE,OAAOA,KAAa,eAElBA,EAAS,SAAS,IAGnBA;AAAA,QACCW;AAAA,QACA,GAAID;AAAA,MAAA,IAILV;AAAA,QACCW;AAAA,MAAA;AAAA,IAKV;AAAA,IACA,CAACN,GAAcL,GAAUM,CAAY;AAAA,EAAA;AAGvC,SAAO,CAACA,GAAcC,CAAQ;AAChC;"}

package/dist/components/hooks/useDraggable.d.ts

@@ -0,0 +1,4 @@
+export declare function useDraggable(enabled?: boolean): {
+    ref: (element: HTMLElement | null) => () => void;
+};
+//# sourceMappingURL=useDraggable.d.ts.map

package/dist/components/hooks/useDraggable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDraggable.d.ts","sourceRoot":"","sources":["../../../src/components/hooks/useDraggable.ts"],"names":[],"mappings":"AAGA,wBAAgB,YAAY,CAAC,OAAO,GAAE,OAAc;mBAChB,WAAW,GAAG,IAAI;EAyMrD"}

package/dist/components/hooks/useDraggable.js

@@ -1,16 +1,15 @@
 "use client";
 import { useCallback as H } from "react";
-function T(d = !0) {
+function T(u = !0) {
   return { ref: H((n) => {
-    if (!n || !d) return;
-    let i = !1, m = 0, f = 0, v = 0, p = 0, o = null;
-    n.addEventListener("mousedown", h);
+    if (!n || !u) return;
+    let i = !1, d = 0, m = 0, f = 0, v = 0, o = null;
+    n.addEventListener("mousedown", p);
     function z(t) {
-      var s, c;
       let e = t;
       for (; e && e !== n; ) {
-        if (e.classList.contains("resize-handle") || e.classList.contains("ds-resizable-resize-handle") || e.getAttribute("data-resize-handle") || (s = e.getAttribute("data-testid")) != null && s.includes("resize") || e.getAttribute("data-placement") || // Resizable handles have data-placement
-        (c = e.style.cursor) != null && c.includes("resize") || // Check for react-use-resizable specific classes/attributes
+        if (e.classList.contains("resize-handle") || e.classList.contains("ds-resizable-resize-handle") || e.getAttribute("data-resize-handle") || e.getAttribute("data-testid")?.includes("resize") || e.getAttribute("data-placement") || // Resizable handles have data-placement
+        e.style.cursor?.includes("resize") || // Check for react-use-resizable specific classes/attributes
         e.classList.contains("resizable-handle") || e.hasAttribute("data-resizable-handle") || // Check for common resize cursor styles
         ["n-resize", "s-resize", "e-resize", "w-resize", "ne-resize", "nw-resize", "se-resize", "sw-resize"].includes(e.style.cursor))
           return !0;
@@ -28,28 +27,28 @@ function T(d = !0) {
     function L(t, e, s) {
       t.style.transform = `translate(${e}px, ${s}px)`;
     }
-    function h(t) {
+    function p(t) {
       const e = t.target;
       if (z(e))
         return;
       if (n.closest("[data-resizable]")) {
-        const r = n.getBoundingClientRect(), E = t.clientX - r.left, b = t.clientY - r.top, l = 8, w = b <= l, x = b >= r.height - l, S = E <= l, A = E >= r.width - l, D = n.querySelector('.ds-resizable-resize-handle[data-placement*="top"]'), X = n.querySelector('.ds-resizable-resize-handle[data-placement*="bottom"]'), Y = n.querySelector('.ds-resizable-resize-handle[data-placement*="left"]'), q = n.querySelector('.ds-resizable-resize-handle[data-placement*="right"]');
+        const r = n.getBoundingClientRect(), E = t.clientX - r.left, b = t.clientY - r.top, c = 8, w = b <= c, x = b >= r.height - c, S = E <= c, A = E >= r.width - c, D = n.querySelector('.ds-resizable-resize-handle[data-placement*="top"]'), X = n.querySelector('.ds-resizable-resize-handle[data-placement*="bottom"]'), Y = n.querySelector('.ds-resizable-resize-handle[data-placement*="left"]'), q = n.querySelector('.ds-resizable-resize-handle[data-placement*="right"]');
         if (w && D || x && X || S && Y || A && q)
           return;
       }
-      t.preventDefault(), t.stopPropagation(), i = !0, m = t.clientX, f = t.clientY;
+      t.preventDefault(), t.stopPropagation(), i = !0, d = t.clientX, m = t.clientY;
       const s = y(n);
-      v = s.x, p = s.y, document.body.style.cursor = "grabbing", document.body.style.userSelect = "none", n.querySelectorAll('button, a, input, select, textarea, [role="button"]').forEach((r) => {
+      f = s.x, v = s.y, document.body.style.cursor = "grabbing", document.body.style.userSelect = "none", n.querySelectorAll('button, a, input, select, textarea, [role="button"]').forEach((r) => {
         r.style.pointerEvents = "auto";
-      }), document.addEventListener("mousemove", u, { passive: !1 }), document.addEventListener("mouseup", a), document.addEventListener("touchmove", g, { passive: !1 }), document.addEventListener("touchend", a);
+      }), document.addEventListener("mousemove", l, { passive: !1 }), document.addEventListener("mouseup", a), document.addEventListener("touchmove", h, { passive: !1 }), document.addEventListener("touchend", a);
     }
-    function u(t) {
+    function l(t) {
       !i || !n || (t.preventDefault(), o && cancelAnimationFrame(o), o = requestAnimationFrame(() => {
-        const e = t.clientX - m, s = t.clientY - f, c = v + e, r = p + s;
-        L(n, c, r);
+        const e = t.clientX - d, s = t.clientY - m, g = f + e, r = v + s;
+        L(n, g, r);
       }));
     }
-    function g(t) {
+    function h(t) {
       if (!i || !n) return;
       t.preventDefault();
       const e = t.touches[0];
@@ -59,17 +58,17 @@ function T(d = !0) {
         clientY: e.clientY,
         bubbles: !0
       });
-      u(s);
+      l(s);
     }
     function a() {
       i && (i = !1, o && (cancelAnimationFrame(o), o = null), document.body.style.cursor = "", document.body.style.userSelect = "", n && n.querySelectorAll('button, a, input, select, textarea, [role="button"]').forEach((e) => {
         e.style.pointerEvents = "";
-      }), document.removeEventListener("mousemove", u), document.removeEventListener("mouseup", a), document.removeEventListener("touchmove", g), document.removeEventListener("touchend", a));
+      }), document.removeEventListener("mousemove", l), document.removeEventListener("mouseup", a), document.removeEventListener("touchmove", h), document.removeEventListener("touchend", a));
     }
     return () => {
-      n.removeEventListener("mousedown", h), a();
+      n.removeEventListener("mousedown", p), a();
     };
-  }, [d]) };
+  }, [u]) };
 }
 export {
   T as useDraggable

package/dist/components/hooks/useDraggable.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDraggable.js","sources":["../../../src/components/hooks/useDraggable.ts"],"sourcesContent":["\"use client\";\nimport { useCallback } from \"react\";\n\nexport function useDraggable(enabled: boolean = true) {\n  const ref = useCallback((element: HTMLElement | null) => {\n    if (!element || !enabled) return;\n    \n    let isDragging = false;\n    let startX = 0;\n    let startY = 0;\n    let initialLeft = 0;\n    let initialTop = 0;\n    let rafId: number | null = null;\n\n    element.addEventListener(\"mousedown\", dragMouseDown);\n\n    function isResizeHandle(target: HTMLElement): boolean {\n      // Check if the element or any of its parents is a resize handle\n      let current = target;\n      while (current && current !== element) {\n        // Check for various resize handle indicators\n        if (\n          current.classList.contains('resize-handle') ||\n          current.classList.contains('ds-resizable-resize-handle') ||\n          current.getAttribute('data-resize-handle') ||\n          current.getAttribute('data-testid')?.includes('resize') ||\n          current.getAttribute('data-placement') || // Resizable handles have data-placement\n          current.style.cursor?.includes('resize') ||\n          // Check for react-use-resizable specific classes/attributes\n          current.classList.contains('resizable-handle') ||\n          current.hasAttribute('data-resizable-handle') ||\n          // Check for common resize cursor styles\n          ['n-resize', 's-resize', 'e-resize', 'w-resize', 'ne-resize', 'nw-resize', 'se-resize', 'sw-resize'].includes(current.style.cursor)\n        ) {\n          return true;\n        }\n        current = current.parentElement as HTMLElement;\n      }\n      return false;\n    }\n\n    function getElementPosition(el: HTMLElement) {\n      const style = window.getComputedStyle(el);\n      const matrix = new DOMMatrix(style.transform);\n      return {\n        x: matrix.m41 || parseInt(style.left) || 0,\n        y: matrix.m42 || parseInt(style.top) || 0\n      };\n    }\n\n    function setElementPosition(el: HTMLElement, x: number, y: number) {\n      // Use transform for better performance and smoother animation\n      el.style.transform = `translate(${x}px, ${y}px)`;\n    }\n\n    function dragMouseDown(e: MouseEvent) {\n      const target = e.target as HTMLElement;\n      \n      // Check if the click is on a resize handle\n      if (isResizeHandle(target)) {\n        return; // Don't start dragging\n      }\n      \n      // Let resize handles take priority - if we reach this point and there's a resizable container,\n      // we should check if there are actual resize handles present before preventing drag\n      if (element.closest('[data-resizable]')) {\n        const rect = element.getBoundingClientRect();\n        const x = e.clientX - rect.left;\n        const y = e.clientY - rect.top;\n        const handleSize = 8;\n        \n        // Only prevent drag if we're near an edge AND there are actual resize handles\n        const nearTopEdge = y <= handleSize;\n        const nearBottomEdge = y >= rect.height - handleSize;\n        const nearLeftEdge = x <= handleSize;\n        const nearRightEdge = x >= rect.width - handleSize;\n        \n        // Check if resize handles exist for the edges we're near\n        const hasTopHandle = element.querySelector('.ds-resizable-resize-handle[data-placement*=\"top\"]');\n        const hasBottomHandle = element.querySelector('.ds-resizable-resize-handle[data-placement*=\"bottom\"]');\n        const hasLeftHandle = element.querySelector('.ds-resizable-resize-handle[data-placement*=\"left\"]');\n        const hasRightHandle = element.querySelector('.ds-resizable-resize-handle[data-placement*=\"right\"]');\n        \n        if (\n          (nearTopEdge && hasTopHandle) ||\n          (nearBottomEdge && hasBottomHandle) ||\n          (nearLeftEdge && hasLeftHandle) ||\n          (nearRightEdge && hasRightHandle)\n        ) {\n          return; // Let resize handle it\n        }\n      }\n      \n      e.preventDefault();\n      e.stopPropagation();\n      \n      isDragging = true;\n      \n      // Store initial mouse position\n      startX = e.clientX;\n      startY = e.clientY;\n      \n      // Get initial element position\n      const pos = getElementPosition(element);\n      initialLeft = pos.x;\n      initialTop = pos.y;\n      \n      // Set initial cursor style and prevent text selection\n      document.body.style.cursor = 'grabbing';\n      document.body.style.userSelect = 'none';\n      \n      // Only disable pointer events on content areas, not buttons/interactive elements\n      const interactiveElements = element.querySelectorAll('button, a, input, select, textarea, [role=\"button\"]');\n      interactiveElements.forEach(el => {\n        (el as HTMLElement).style.pointerEvents = 'auto';\n      });\n      \n      // Add move and up listeners\n      document.addEventListener(\"mousemove\", elementDrag, { passive: false });\n      document.addEventListener(\"mouseup\", closeDragElement);\n      \n      // Add touch events for mobile support\n      document.addEventListener(\"touchmove\", handleTouchMove, { passive: false });\n      document.addEventListener(\"touchend\", closeDragElement);\n    }\n\n    function elementDrag(e: MouseEvent) {\n      if (!isDragging || !element) return;\n      \n      e.preventDefault();\n      \n      // Cancel any previous animation frame\n      if (rafId) {\n        cancelAnimationFrame(rafId);\n      }\n      \n      // Use requestAnimationFrame for smooth animation\n      rafId = requestAnimationFrame(() => {\n        const deltaX = e.clientX - startX;\n        const deltaY = e.clientY - startY;\n        \n        const newX = initialLeft + deltaX;\n        const newY = initialTop + deltaY;\n        \n        // Apply position directly without bounds checking\n        setElementPosition(element, newX, newY);\n      });\n    }\n\n    function handleTouchMove(e: TouchEvent) {\n      if (!isDragging || !element) return;\n      \n      e.preventDefault();\n      \n      const touch = e.touches[0];\n      if (!touch) return;\n      \n      // Convert touch event to mouse-like event\n      const mouseEvent = new MouseEvent('mousemove', {\n        clientX: touch.clientX,\n        clientY: touch.clientY,\n        bubbles: true\n      });\n      \n      elementDrag(mouseEvent);\n    }\n\n    function closeDragElement() {\n      if (!isDragging) return;\n      \n      isDragging = false;\n      \n      // Cancel any pending animation frame\n      if (rafId) {\n        cancelAnimationFrame(rafId);\n        rafId = null;\n      }\n      \n      // Restore styles\n      document.body.style.cursor = '';\n      document.body.style.userSelect = '';\n      \n      // Restore pointer events for interactive elements\n      if (element) {\n        const interactiveElements = element.querySelectorAll('button, a, input, select, textarea, [role=\"button\"]');\n        interactiveElements.forEach(el => {\n          (el as HTMLElement).style.pointerEvents = '';\n        });\n      }\n      \n      // Remove event listeners\n      document.removeEventListener(\"mousemove\", elementDrag);\n      document.removeEventListener(\"mouseup\", closeDragElement);\n      document.removeEventListener(\"touchmove\", handleTouchMove);\n      document.removeEventListener(\"touchend\", closeDragElement);\n    }\n\n    // Cleanup function\n    return () => {\n      element.removeEventListener(\"mousedown\", dragMouseDown);\n      closeDragElement();\n    };\n  }, [enabled]);\n  \n  return { ref };\n}\n"],"names":["useDraggable","enabled","useCallback","element","isDragging","startX","startY","initialLeft","initialTop","rafId","dragMouseDown","isResizeHandle","target","current","_a","_b","getElementPosition","el","style","matrix","setElementPosition","x","y","e","rect","handleSize","nearTopEdge","nearBottomEdge","nearLeftEdge","nearRightEdge","hasTopHandle","hasBottomHandle","hasLeftHandle","hasRightHandle","pos","elementDrag","closeDragElement","handleTouchMove","deltaX","deltaY","newX","newY","touch","mouseEvent"],"mappings":"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"}
+{"version":3,"file":"useDraggable.js","sources":["../../../src/components/hooks/useDraggable.ts"],"sourcesContent":["\"use client\";\nimport { useCallback } from \"react\";\n\nexport function useDraggable(enabled: boolean = true) {\n  const ref = useCallback((element: HTMLElement | null) => {\n    if (!element || !enabled) return;\n    \n    let isDragging = false;\n    let startX = 0;\n    let startY = 0;\n    let initialLeft = 0;\n    let initialTop = 0;\n    let rafId: number | null = null;\n\n    element.addEventListener(\"mousedown\", dragMouseDown);\n\n    function isResizeHandle(target: HTMLElement): boolean {\n      // Check if the element or any of its parents is a resize handle\n      let current = target;\n      while (current && current !== element) {\n        // Check for various resize handle indicators\n        if (\n          current.classList.contains('resize-handle') ||\n          current.classList.contains('ds-resizable-resize-handle') ||\n          current.getAttribute('data-resize-handle') ||\n          current.getAttribute('data-testid')?.includes('resize') ||\n          current.getAttribute('data-placement') || // Resizable handles have data-placement\n          current.style.cursor?.includes('resize') ||\n          // Check for react-use-resizable specific classes/attributes\n          current.classList.contains('resizable-handle') ||\n          current.hasAttribute('data-resizable-handle') ||\n          // Check for common resize cursor styles\n          ['n-resize', 's-resize', 'e-resize', 'w-resize', 'ne-resize', 'nw-resize', 'se-resize', 'sw-resize'].includes(current.style.cursor)\n        ) {\n          return true;\n        }\n        current = current.parentElement as HTMLElement;\n      }\n      return false;\n    }\n\n    function getElementPosition(el: HTMLElement) {\n      const style = window.getComputedStyle(el);\n      const matrix = new DOMMatrix(style.transform);\n      return {\n        x: matrix.m41 || parseInt(style.left) || 0,\n        y: matrix.m42 || parseInt(style.top) || 0\n      };\n    }\n\n    function setElementPosition(el: HTMLElement, x: number, y: number) {\n      // Use transform for better performance and smoother animation\n      el.style.transform = `translate(${x}px, ${y}px)`;\n    }\n\n    function dragMouseDown(e: MouseEvent) {\n      const target = e.target as HTMLElement;\n      \n      // Check if the click is on a resize handle\n      if (isResizeHandle(target)) {\n        return; // Don't start dragging\n      }\n      \n      // Let resize handles take priority - if we reach this point and there's a resizable container,\n      // we should check if there are actual resize handles present before preventing drag\n      if (element.closest('[data-resizable]')) {\n        const rect = element.getBoundingClientRect();\n        const x = e.clientX - rect.left;\n        const y = e.clientY - rect.top;\n        const handleSize = 8;\n        \n        // Only prevent drag if we're near an edge AND there are actual resize handles\n        const nearTopEdge = y <= handleSize;\n        const nearBottomEdge = y >= rect.height - handleSize;\n        const nearLeftEdge = x <= handleSize;\n        const nearRightEdge = x >= rect.width - handleSize;\n        \n        // Check if resize handles exist for the edges we're near\n        const hasTopHandle = element.querySelector('.ds-resizable-resize-handle[data-placement*=\"top\"]');\n        const hasBottomHandle = element.querySelector('.ds-resizable-resize-handle[data-placement*=\"bottom\"]');\n        const hasLeftHandle = element.querySelector('.ds-resizable-resize-handle[data-placement*=\"left\"]');\n        const hasRightHandle = element.querySelector('.ds-resizable-resize-handle[data-placement*=\"right\"]');\n        \n        if (\n          (nearTopEdge && hasTopHandle) ||\n          (nearBottomEdge && hasBottomHandle) ||\n          (nearLeftEdge && hasLeftHandle) ||\n          (nearRightEdge && hasRightHandle)\n        ) {\n          return; // Let resize handle it\n        }\n      }\n      \n      e.preventDefault();\n      e.stopPropagation();\n      \n      isDragging = true;\n      \n      // Store initial mouse position\n      startX = e.clientX;\n      startY = e.clientY;\n      \n      // Get initial element position\n      const pos = getElementPosition(element);\n      initialLeft = pos.x;\n      initialTop = pos.y;\n      \n      // Set initial cursor style and prevent text selection\n      document.body.style.cursor = 'grabbing';\n      document.body.style.userSelect = 'none';\n      \n      // Only disable pointer events on content areas, not buttons/interactive elements\n      const interactiveElements = element.querySelectorAll('button, a, input, select, textarea, [role=\"button\"]');\n      interactiveElements.forEach(el => {\n        (el as HTMLElement).style.pointerEvents = 'auto';\n      });\n      \n      // Add move and up listeners\n      document.addEventListener(\"mousemove\", elementDrag, { passive: false });\n      document.addEventListener(\"mouseup\", closeDragElement);\n      \n      // Add touch events for mobile support\n      document.addEventListener(\"touchmove\", handleTouchMove, { passive: false });\n      document.addEventListener(\"touchend\", closeDragElement);\n    }\n\n    function elementDrag(e: MouseEvent) {\n      if (!isDragging || !element) return;\n      \n      e.preventDefault();\n      \n      // Cancel any previous animation frame\n      if (rafId) {\n        cancelAnimationFrame(rafId);\n      }\n      \n      // Use requestAnimationFrame for smooth animation\n      rafId = requestAnimationFrame(() => {\n        const deltaX = e.clientX - startX;\n        const deltaY = e.clientY - startY;\n        \n        const newX = initialLeft + deltaX;\n        const newY = initialTop + deltaY;\n        \n        // Apply position directly without bounds checking\n        setElementPosition(element, newX, newY);\n      });\n    }\n\n    function handleTouchMove(e: TouchEvent) {\n      if (!isDragging || !element) return;\n      \n      e.preventDefault();\n      \n      const touch = e.touches[0];\n      if (!touch) return;\n      \n      // Convert touch event to mouse-like event\n      const mouseEvent = new MouseEvent('mousemove', {\n        clientX: touch.clientX,\n        clientY: touch.clientY,\n        bubbles: true\n      });\n      \n      elementDrag(mouseEvent);\n    }\n\n    function closeDragElement() {\n      if (!isDragging) return;\n      \n      isDragging = false;\n      \n      // Cancel any pending animation frame\n      if (rafId) {\n        cancelAnimationFrame(rafId);\n        rafId = null;\n      }\n      \n      // Restore styles\n      document.body.style.cursor = '';\n      document.body.style.userSelect = '';\n      \n      // Restore pointer events for interactive elements\n      if (element) {\n        const interactiveElements = element.querySelectorAll('button, a, input, select, textarea, [role=\"button\"]');\n        interactiveElements.forEach(el => {\n          (el as HTMLElement).style.pointerEvents = '';\n        });\n      }\n      \n      // Remove event listeners\n      document.removeEventListener(\"mousemove\", elementDrag);\n      document.removeEventListener(\"mouseup\", closeDragElement);\n      document.removeEventListener(\"touchmove\", handleTouchMove);\n      document.removeEventListener(\"touchend\", closeDragElement);\n    }\n\n    // Cleanup function\n    return () => {\n      element.removeEventListener(\"mousedown\", dragMouseDown);\n      closeDragElement();\n    };\n  }, [enabled]);\n  \n  return { ref };\n}\n"],"names":["useDraggable","enabled","useCallback","element","isDragging","startX","startY","initialLeft","initialTop","rafId","dragMouseDown","isResizeHandle","target","current","getElementPosition","el","style","matrix","setElementPosition","x","y","e","rect","handleSize","nearTopEdge","nearBottomEdge","nearLeftEdge","nearRightEdge","hasTopHandle","hasBottomHandle","hasLeftHandle","hasRightHandle","pos","elementDrag","closeDragElement","handleTouchMove","deltaX","deltaY","newX","newY","touch","mouseEvent"],"mappings":"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"}

package/dist/components/hooks/useHover.d.ts

@@ -0,0 +1,5 @@
+export declare function useHover<T extends HTMLElement>(): [
+    (node: T) => void,
+    boolean
+];
+//# sourceMappingURL=useHover.d.ts.map

package/dist/components/hooks/useHover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHover.d.ts","sourceRoot":"","sources":["../../../src/components/hooks/useHover.ts"],"names":[],"mappings":"AAIA,wBAAgB,QAAQ,CAAC,CAAC,SAAS,WAAW,KAAK;IACjD,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI;IACjB,OAAO;CACR,CAoCA"}

package/dist/components/hooks/useHover.js

@@ -1,26 +1,25 @@
 "use client";
-import { useState as v, useRef as E, useCallback as n } from "react";
-function l() {
-  const [c, u] = v(!1), t = E(null), r = n(() => {
-    u(!0);
-  }, []), s = n(() => {
-    u(!1);
+import { useState as c, useRef as v, useCallback as s } from "react";
+function i() {
+  const [u, o] = c(!1), e = v(null), n = s(() => {
+    o(!0);
+  }, []), r = s(() => {
+    o(!1);
   }, []);
-  return [n(
-    (e) => {
-      var o;
-      ((o = t.current) == null ? void 0 : o.nodeType) === Node.ELEMENT_NODE && (t.current.removeEventListener(
+  return [s(
+    (t) => {
+      e.current?.nodeType === Node.ELEMENT_NODE && (e.current.removeEventListener(
         "mouseenter",
-        r
-      ), t.current.removeEventListener(
+        n
+      ), e.current.removeEventListener(
         "mouseleave",
-        s
-      )), (e == null ? void 0 : e.nodeType) === Node.ELEMENT_NODE && (e.addEventListener("mouseenter", r), e.addEventListener("mouseleave", s)), t.current = e;
+        r
+      )), t?.nodeType === Node.ELEMENT_NODE && (t.addEventListener("mouseenter", n), t.addEventListener("mouseleave", r)), e.current = t;
     },
-    [r, s]
-  ), c];
+    [n, r]
+  ), u];
 }
 export {
-  l as useHover
+  i as useHover
 };
 //# sourceMappingURL=useHover.js.map