@bioturing/components 0.31.0 → 0.32.1

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":";;AAGO,SAASA,EAAaC,IAAmB,IAAM;AAyMpD,SAAO,EAAE,KAxMGC,EAAY,CAACC,MAAgC;AACvD,QAAI,CAACA,KAAW,CAACF,EAAS;AAE1B,QAAIG,IAAa,IACbC,IAAS,GACTC,IAAS,GACTC,IAAc,GACdC,IAAa,GACbC,IAAuB;AAE3B,IAAAN,EAAQ,iBAAiB,aAAaO,CAAa;AAEnD,aAASC,EAAeC,GAA8B;AAEpD,UAAIC,IAAUD;AACd,aAAOC,KAAWA,MAAYV,KAAS;AAErC,YACEU,EAAQ,UAAU,SAAS,eAAe,KAC1CA,EAAQ,UAAU,SAAS,4BAA4B,KACvDA,EAAQ,aAAa,oBAAoB,KACzCA,EAAQ,aAAa,aAAa,GAAG,SAAS,QAAQ,KACtDA,EAAQ,aAAa,gBAAgB;AAAA,QACrCA,EAAQ,MAAM,QAAQ,SAAS,QAAQ;AAAA,QAEvCA,EAAQ,UAAU,SAAS,kBAAkB,KAC7CA,EAAQ,aAAa,uBAAuB;AAAA,QAE5C,CAAC,YAAY,YAAY,YAAY,YAAY,aAAa,aAAa,aAAa,WAAW,EAAE,SAASA,EAAQ,MAAM,MAAM;AAElI,iBAAO;AAET,QAAAA,IAAUA,EAAQ;AAAA,MACpB;AACA,aAAO;AAAA,IACT;AAEA,aAASC,EAAmBC,GAAiB;AAC3C,YAAMC,IAAQ,OAAO,iBAAiBD,CAAE,GAClCE,IAAS,IAAI,UAAUD,EAAM,SAAS;AAC5C,aAAO;AAAA,QACL,GAAGC,EAAO,OAAO,SAASD,EAAM,IAAI,KAAK;AAAA,QACzC,GAAGC,EAAO,OAAO,SAASD,EAAM,GAAG,KAAK;AAAA,MAAA;AAAA,IAE5C;AAEA,aAASE,EAAmBH,GAAiBI,GAAWC,GAAW;AAEjE,MAAAL,EAAG,MAAM,YAAY,aAAaI,CAAC,OAAOC,CAAC;AAAA,IAC7C;AAEA,aAASV,EAAcW,GAAe;AACpC,YAAMT,IAASS,EAAE;AAGjB,UAAIV,EAAeC,CAAM;AACvB;AAKF,UAAIT,EAAQ,QAAQ,kBAAkB,GAAG;AACvC,cAAMmB,IAAOnB,EAAQ,sBAAA,GACfgB,IAAIE,EAAE,UAAUC,EAAK,MACrBF,IAAIC,EAAE,UAAUC,EAAK,KACrBC,IAAa,GAGbC,IAAcJ,KAAKG,GACnBE,IAAiBL,KAAKE,EAAK,SAASC,GACpCG,IAAeP,KAAKI,GACpBI,IAAgBR,KAAKG,EAAK,QAAQC,GAGlCK,IAAezB,EAAQ,cAAc,oDAAoD,GACzF0B,IAAkB1B,EAAQ,cAAc,uDAAuD,GAC/F2B,IAAgB3B,EAAQ,cAAc,qDAAqD,GAC3F4B,IAAiB5B,EAAQ,cAAc,sDAAsD;AAEnG,YACGqB,KAAeI,KACfH,KAAkBI,KAClBH,KAAgBI,KAChBH,KAAiBI;AAElB;AAAA,MAEJ;AAEA,MAAAV,EAAE,eAAA,GACFA,EAAE,gBAAA,GAEFjB,IAAa,IAGbC,IAASgB,EAAE,SACXf,IAASe,EAAE;AAGX,YAAMW,IAAMlB,EAAmBX,CAAO;AACtC,MAAAI,IAAcyB,EAAI,GAClBxB,IAAawB,EAAI,GAGjB,SAAS,KAAK,MAAM,SAAS,YAC7B,SAAS,KAAK,MAAM,aAAa,QAGL7B,EAAQ,iBAAiB,qDAAqD,EACtF,QAAQ,CAAAY,MAAM;AAC/B,QAAAA,EAAmB,MAAM,gBAAgB;AAAA,MAC5C,CAAC,GAGD,SAAS,iBAAiB,aAAakB,GAAa,EAAE,SAAS,IAAO,GACtE,SAAS,iBAAiB,WAAWC,CAAgB,GAGrD,SAAS,iBAAiB,aAAaC,GAAiB,EAAE,SAAS,IAAO,GAC1E,SAAS,iBAAiB,YAAYD,CAAgB;AAAA,IACxD;AAEA,aAASD,EAAYZ,GAAe;AAClC,MAAI,CAACjB,KAAc,CAACD,MAEpBkB,EAAE,eAAA,GAGEZ,KACF,qBAAqBA,CAAK,GAI5BA,IAAQ,sBAAsB,MAAM;AAClC,cAAM2B,IAASf,EAAE,UAAUhB,GACrBgC,IAAShB,EAAE,UAAUf,GAErBgC,IAAO/B,IAAc6B,GACrBG,IAAO/B,IAAa6B;AAG1B,QAAAnB,EAAmBf,GAASmC,GAAMC,CAAI;AAAA,MACxC,CAAC;AAAA,IACH;AAEA,aAASJ,EAAgBd,GAAe;AACtC,UAAI,CAACjB,KAAc,CAACD,EAAS;AAE7B,MAAAkB,EAAE,eAAA;AAEF,YAAMmB,IAAQnB,EAAE,QAAQ,CAAC;AACzB,UAAI,CAACmB,EAAO;AAGZ,YAAMC,IAAa,IAAI,WAAW,aAAa;AAAA,QAC7C,SAASD,EAAM;AAAA,QACf,SAASA,EAAM;AAAA,QACf,SAAS;AAAA,MAAA,CACV;AAED,MAAAP,EAAYQ,CAAU;AAAA,IACxB;AAEA,aAASP,IAAmB;AAC1B,MAAK9B,MAELA,IAAa,IAGTK,MACF,qBAAqBA,CAAK,GAC1BA,IAAQ,OAIV,SAAS,KAAK,MAAM,SAAS,IAC7B,SAAS,KAAK,MAAM,aAAa,IAG7BN,KAC0BA,EAAQ,iBAAiB,qDAAqD,EACtF,QAAQ,CAAAY,MAAM;AAC/B,QAAAA,EAAmB,MAAM,gBAAgB;AAAA,MAC5C,CAAC,GAIH,SAAS,oBAAoB,aAAakB,CAAW,GACrD,SAAS,oBAAoB,WAAWC,CAAgB,GACxD,SAAS,oBAAoB,aAAaC,CAAe,GACzD,SAAS,oBAAoB,YAAYD,CAAgB;AAAA,IAC3D;AAGA,WAAO,MAAM;AACX,MAAA/B,EAAQ,oBAAoB,aAAaO,CAAa,GACtDwB,EAAA;AAAA,IACF;AAAA,EACF,GAAG,CAACjC,CAAO,CAAC,EAEH;AACX;"}

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

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

@@ -1 +1 @@
-{"version":3,"file":"useHover.js","sources":["../../../src/components/hooks/useHover.ts"],"sourcesContent":["\"use client\";\n\nimport { useState, useCallback, useRef } from \"react\";\n\nexport function useHover<T extends HTMLElement>(): [\n  (node: T) => void,\n  boolean\n] {\n  const [hovering, setHovering] = useState(false);\n  const previousNode = useRef(null);\n\n  const handleMouseEnter = useCallback(() => {\n    setHovering(true);\n  }, []);\n\n  const handleMouseLeave = useCallback(() => {\n    setHovering(false);\n  }, []);\n\n  const customRef = useCallback(\n    (node: T) => {\n      if (previousNode.current?.nodeType === Node.ELEMENT_NODE) {\n        previousNode.current.removeEventListener(\n          \"mouseenter\",\n          handleMouseEnter\n        );\n        previousNode.current.removeEventListener(\n          \"mouseleave\",\n          handleMouseLeave\n        );\n      }\n\n      if (node?.nodeType === Node.ELEMENT_NODE) {\n        node.addEventListener(\"mouseenter\", handleMouseEnter);\n        node.addEventListener(\"mouseleave\", handleMouseLeave);\n      }\n\n      previousNode.current = node;\n    },\n    [handleMouseEnter, handleMouseLeave]\n  );\n\n  return [customRef, hovering];\n}\n"],"names":["useHover","hovering","setHovering","useState","previousNode","useRef","handleMouseEnter","useCallback","handleMouseLeave","node","_a"],"mappings":";;AAIO,SAASA,IAGd;AACA,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAS,EAAK,GACxCC,IAAeC,EAAO,IAAI,GAE1BC,IAAmBC,EAAY,MAAM;AACzC,IAAAL,EAAY,EAAI;AAAA,EAClB,GAAG,EAAE,GAECM,IAAmBD,EAAY,MAAM;AACzC,IAAAL,EAAY,EAAK;AAAA,EACnB,GAAG,EAAE;AAyBE,SAAA,CAvBWK;AAAA,IAChB,CAACE,MAAY;;AACX,QAAIC,IAAAN,EAAa,YAAb,gBAAAM,EAAsB,cAAa,KAAK,iBAC1CN,EAAa,QAAQ;AAAA,QACnB;AAAA,QACAE;AAAA,MACF,GACAF,EAAa,QAAQ;AAAA,QACnB;AAAA,QACAI;AAAA,MACF,KAGEC,KAAA,gBAAAA,EAAM,cAAa,KAAK,iBACrBA,EAAA,iBAAiB,cAAcH,CAAgB,GAC/CG,EAAA,iBAAiB,cAAcD,CAAgB,IAGtDJ,EAAa,UAAUK;AAAA,IACzB;AAAA,IACA,CAACH,GAAkBE,CAAgB;AAAA,EACrC,GAEmBP,CAAQ;AAC7B;"}
+{"version":3,"file":"useHover.js","sources":["../../../src/components/hooks/useHover.ts"],"sourcesContent":["\"use client\";\n\nimport { useState, useCallback, useRef } from \"react\";\n\nexport function useHover<T extends HTMLElement>(): [\n  (node: T) => void,\n  boolean\n] {\n  const [hovering, setHovering] = useState(false);\n  const previousNode = useRef(null);\n\n  const handleMouseEnter = useCallback(() => {\n    setHovering(true);\n  }, []);\n\n  const handleMouseLeave = useCallback(() => {\n    setHovering(false);\n  }, []);\n\n  const customRef = useCallback(\n    (node: T) => {\n      if (previousNode.current?.nodeType === Node.ELEMENT_NODE) {\n        previousNode.current.removeEventListener(\n          \"mouseenter\",\n          handleMouseEnter\n        );\n        previousNode.current.removeEventListener(\n          \"mouseleave\",\n          handleMouseLeave\n        );\n      }\n\n      if (node?.nodeType === Node.ELEMENT_NODE) {\n        node.addEventListener(\"mouseenter\", handleMouseEnter);\n        node.addEventListener(\"mouseleave\", handleMouseLeave);\n      }\n\n      previousNode.current = node;\n    },\n    [handleMouseEnter, handleMouseLeave]\n  );\n\n  return [customRef, hovering];\n}\n"],"names":["useHover","hovering","setHovering","useState","previousNode","useRef","handleMouseEnter","useCallback","handleMouseLeave","node"],"mappings":";;AAIO,SAASA,IAGd;AACA,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAS,EAAK,GACxCC,IAAeC,EAAO,IAAI,GAE1BC,IAAmBC,EAAY,MAAM;AACzC,IAAAL,EAAY,EAAI;AAAA,EAClB,GAAG,CAAA,CAAE,GAECM,IAAmBD,EAAY,MAAM;AACzC,IAAAL,EAAY,EAAK;AAAA,EACnB,GAAG,CAAA,CAAE;AAyBL,SAAO,CAvBWK;AAAA,IAChB,CAACE,MAAY;AACX,MAAIL,EAAa,SAAS,aAAa,KAAK,iBAC1CA,EAAa,QAAQ;AAAA,QACnB;AAAA,QACAE;AAAA,MAAA,GAEFF,EAAa,QAAQ;AAAA,QACnB;AAAA,QACAI;AAAA,MAAA,IAIAC,GAAM,aAAa,KAAK,iBAC1BA,EAAK,iBAAiB,cAAcH,CAAgB,GACpDG,EAAK,iBAAiB,cAAcD,CAAgB,IAGtDJ,EAAa,UAAUK;AAAA,IACzB;AAAA,IACA,CAACH,GAAkBE,CAAgB;AAAA,EAAA,GAGlBP,CAAQ;AAC7B;"}

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

@@ -0,0 +1,9 @@
+type ObserverRect = Omit<DOMRectReadOnly, 'toJSON'>;
+export declare function useResizeObserver<T extends HTMLElement = any>(options?: ResizeObserverOptions): readonly [import('react').RefObject<T>, ObserverRect];
+export declare function useElementSize<T extends HTMLElement = any>(options?: ResizeObserverOptions): {
+    ref: import('react').RefObject<T>;
+    width: number;
+    height: number;
+};
+export {};
+//# sourceMappingURL=useResizeObserver.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useResizeObserver.d.ts","sourceRoot":"","sources":["../../../src/components/hooks/useResizeObserver.ts"],"names":[],"mappings":"AAGA,KAAK,YAAY,GAAG,IAAI,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC;AAapD,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,WAAW,GAAG,GAAG,EAAE,OAAO,CAAC,EAAE,qBAAqB,yDA0D7F;AAED,wBAAgB,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,GAAG,EAAE,OAAO,CAAC,EAAE,qBAAqB;;;;EAG1F"}

package/dist/components/hooks/useResizeObserver.js

@@ -1,6 +1,6 @@
 "use client";
-import { useRef as l, useState as R, useMemo as d, useEffect as z } from "react";
-const S = {
+import { useRef as u, useState as a, useMemo as h, useEffect as R } from "react";
+const b = {
   x: 0,
   y: 0,
   width: 0,
@@ -10,43 +10,42 @@ const S = {
   bottom: 0,
   right: 0
 };
-function x(o) {
-  const n = l(0), e = l(null), [r, u] = R(S), c = d(
-    () => typeof window < "u" ? new ResizeObserver((m) => {
-      const t = m[0];
-      t && (cancelAnimationFrame(n.current), n.current = requestAnimationFrame(() => {
-        var s, f;
-        if (e.current) {
-          const i = ((s = t.borderBoxSize) == null ? void 0 : s[0]) || ((f = t.contentBoxSize) == null ? void 0 : f[0]);
-          if (i) {
-            const a = i.inlineSize, h = i.blockSize;
-            u({
-              width: a,
-              height: h,
-              x: t.contentRect.x,
-              y: t.contentRect.y,
-              top: t.contentRect.top,
-              left: t.contentRect.left,
-              bottom: t.contentRect.bottom,
-              right: t.contentRect.right
+function d(c) {
+  const n = u(0), t = u(null), [o, i] = a(b), s = h(
+    () => typeof window < "u" ? new ResizeObserver((f) => {
+      const e = f[0];
+      e && (cancelAnimationFrame(n.current), n.current = requestAnimationFrame(() => {
+        if (t.current) {
+          const r = e.borderBoxSize?.[0] || e.contentBoxSize?.[0];
+          if (r) {
+            const l = r.inlineSize, m = r.blockSize;
+            i({
+              width: l,
+              height: m,
+              x: e.contentRect.x,
+              y: e.contentRect.y,
+              top: e.contentRect.top,
+              left: e.contentRect.left,
+              bottom: e.contentRect.bottom,
+              right: e.contentRect.right
             });
           } else
-            u(t.contentRect);
+            i(e.contentRect);
         }
       }));
     }) : null,
     []
   );
-  return z(() => (e.current && (c == null || c.observe(e.current, o)), () => {
-    c == null || c.disconnect(), n.current && cancelAnimationFrame(n.current);
-  }), [e.current]), [e, r];
+  return R(() => (t.current && s?.observe(t.current, c), () => {
+    s?.disconnect(), n.current && cancelAnimationFrame(n.current);
+  }), [t.current]), [t, o];
 }
-function g(o) {
-  const [n, { width: e, height: r }] = x(o);
-  return { ref: n, width: e, height: r };
+function S(c) {
+  const [n, { width: t, height: o }] = d(c);
+  return { ref: n, width: t, height: o };
 }
 export {
-  g as useElementSize,
-  x as useResizeObserver
+  S as useElementSize,
+  d as useResizeObserver
 };
 //# sourceMappingURL=useResizeObserver.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useResizeObserver.js","sources":["../../../src/components/hooks/useResizeObserver.ts"],"sourcesContent":["\"use client\";\nimport { useEffect, useMemo, useRef, useState } from 'react';\n\ntype ObserverRect = Omit<DOMRectReadOnly, 'toJSON'>;\n\nconst defaultState: ObserverRect = {\n  x: 0,\n  y: 0,\n  width: 0,\n  height: 0,\n  top: 0,\n  left: 0,\n  bottom: 0,\n  right: 0,\n};\n\nexport function useResizeObserver<T extends HTMLElement = any>(options?: ResizeObserverOptions) {\n  const frameID = useRef(0);\n  const ref = useRef<T>(null);\n\n  const [rect, setRect] = useState<ObserverRect>(defaultState);\n\n  const observer = useMemo(\n    () =>\n      typeof window !== 'undefined'\n        ? new ResizeObserver((entries) => {\n            const entry = entries[0];\n\n            if (entry) {\n              cancelAnimationFrame(frameID.current);\n\n              frameID.current = requestAnimationFrame(() => {\n                if (ref.current) {\n                  const boxSize = entry.borderBoxSize?.[0] || entry.contentBoxSize?.[0];\n                  if (boxSize) {\n                    const width = boxSize.inlineSize;\n                    const height = boxSize.blockSize;\n\n                    setRect({\n                      width,\n                      height,\n                      x: entry.contentRect.x,\n                      y: entry.contentRect.y,\n                      top: entry.contentRect.top,\n                      left: entry.contentRect.left,\n                      bottom: entry.contentRect.bottom,\n                      right: entry.contentRect.right,\n                    });\n                  } else {\n                    setRect(entry.contentRect);\n                  }\n                }\n              });\n            }\n          })\n        : null,\n    []\n  );\n\n  useEffect(() => {\n    if (ref.current) {\n      observer?.observe(ref.current, options);\n    }\n\n    return () => {\n      observer?.disconnect();\n\n      if (frameID.current) {\n        cancelAnimationFrame(frameID.current);\n      }\n    };\n  }, [ref.current]);\n\n  return [ref, rect] as const;\n}\n\nexport function useElementSize<T extends HTMLElement = any>(options?: ResizeObserverOptions) {\n  const [ref, { width, height }] = useResizeObserver<T>(options);\n  return { ref, width, height };\n}\n"],"names":["defaultState","useResizeObserver","options","frameID","useRef","ref","rect","setRect","useState","observer","useMemo","entries","entry","boxSize","_a","_b","width","height","useEffect","useElementSize"],"mappings":";;AAKA,MAAMA,IAA6B;AAAA,EACjC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AACT;AAEO,SAASC,EAA+CC,GAAiC;AACxF,QAAAC,IAAUC,EAAO,CAAC,GAClBC,IAAMD,EAAU,IAAI,GAEpB,CAACE,GAAMC,CAAO,IAAIC,EAAuBR,CAAY,GAErDS,IAAWC;AAAA,IACf,MACE,OAAO,SAAW,MACd,IAAI,eAAe,CAACC,MAAY;AACxB,YAAAC,IAAQD,EAAQ,CAAC;AAEvB,MAAIC,MACF,qBAAqBT,EAAQ,OAAO,GAE5BA,EAAA,UAAU,sBAAsB,MAAM;;AAC5C,YAAIE,EAAI,SAAS;AACf,gBAAMQ,MAAUC,IAAAF,EAAM,kBAAN,gBAAAE,EAAsB,SAAMC,IAAAH,EAAM,mBAAN,gBAAAG,EAAuB;AACnE,cAAIF,GAAS;AACX,kBAAMG,IAAQH,EAAQ,YAChBI,IAASJ,EAAQ;AAEf,YAAAN,EAAA;AAAA,cACN,OAAAS;AAAA,cACA,QAAAC;AAAA,cACA,GAAGL,EAAM,YAAY;AAAA,cACrB,GAAGA,EAAM,YAAY;AAAA,cACrB,KAAKA,EAAM,YAAY;AAAA,cACvB,MAAMA,EAAM,YAAY;AAAA,cACxB,QAAQA,EAAM,YAAY;AAAA,cAC1B,OAAOA,EAAM,YAAY;AAAA,YAAA,CAC1B;AAAA,UAAA;AAED,YAAAL,EAAQK,EAAM,WAAW;AAAA,QAC3B;AAAA,MACF,CACD;AAAA,IAEJ,CAAA,IACD;AAAA,IACN,CAAA;AAAA,EACF;AAEA,SAAAM,EAAU,OACJb,EAAI,YACII,KAAA,QAAAA,EAAA,QAAQJ,EAAI,SAASH,KAG1B,MAAM;AACX,IAAAO,KAAA,QAAAA,EAAU,cAENN,EAAQ,WACV,qBAAqBA,EAAQ,OAAO;AAAA,EAExC,IACC,CAACE,EAAI,OAAO,CAAC,GAET,CAACA,GAAKC,CAAI;AACnB;AAEO,SAASa,EAA4CjB,GAAiC;AACrF,QAAA,CAACG,GAAK,EAAE,OAAAW,GAAO,QAAAC,GAAQ,IAAIhB,EAAqBC,CAAO;AACtD,SAAA,EAAE,KAAAG,GAAK,OAAAW,GAAO,QAAAC,EAAO;AAC9B;"}
+{"version":3,"file":"useResizeObserver.js","sources":["../../../src/components/hooks/useResizeObserver.ts"],"sourcesContent":["\"use client\";\nimport { useEffect, useMemo, useRef, useState } from 'react';\n\ntype ObserverRect = Omit<DOMRectReadOnly, 'toJSON'>;\n\nconst defaultState: ObserverRect = {\n  x: 0,\n  y: 0,\n  width: 0,\n  height: 0,\n  top: 0,\n  left: 0,\n  bottom: 0,\n  right: 0,\n};\n\nexport function useResizeObserver<T extends HTMLElement = any>(options?: ResizeObserverOptions) {\n  const frameID = useRef(0);\n  const ref = useRef<T>(null);\n\n  const [rect, setRect] = useState<ObserverRect>(defaultState);\n\n  const observer = useMemo(\n    () =>\n      typeof window !== 'undefined'\n        ? new ResizeObserver((entries) => {\n            const entry = entries[0];\n\n            if (entry) {\n              cancelAnimationFrame(frameID.current);\n\n              frameID.current = requestAnimationFrame(() => {\n                if (ref.current) {\n                  const boxSize = entry.borderBoxSize?.[0] || entry.contentBoxSize?.[0];\n                  if (boxSize) {\n                    const width = boxSize.inlineSize;\n                    const height = boxSize.blockSize;\n\n                    setRect({\n                      width,\n                      height,\n                      x: entry.contentRect.x,\n                      y: entry.contentRect.y,\n                      top: entry.contentRect.top,\n                      left: entry.contentRect.left,\n                      bottom: entry.contentRect.bottom,\n                      right: entry.contentRect.right,\n                    });\n                  } else {\n                    setRect(entry.contentRect);\n                  }\n                }\n              });\n            }\n          })\n        : null,\n    []\n  );\n\n  useEffect(() => {\n    if (ref.current) {\n      observer?.observe(ref.current, options);\n    }\n\n    return () => {\n      observer?.disconnect();\n\n      if (frameID.current) {\n        cancelAnimationFrame(frameID.current);\n      }\n    };\n  }, [ref.current]);\n\n  return [ref, rect] as const;\n}\n\nexport function useElementSize<T extends HTMLElement = any>(options?: ResizeObserverOptions) {\n  const [ref, { width, height }] = useResizeObserver<T>(options);\n  return { ref, width, height };\n}\n"],"names":["defaultState","useResizeObserver","options","frameID","useRef","ref","rect","setRect","useState","observer","useMemo","entries","entry","boxSize","width","height","useEffect","useElementSize"],"mappings":";;AAKA,MAAMA,IAA6B;AAAA,EACjC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AACT;AAEO,SAASC,EAA+CC,GAAiC;AAC9F,QAAMC,IAAUC,EAAO,CAAC,GAClBC,IAAMD,EAAU,IAAI,GAEpB,CAACE,GAAMC,CAAO,IAAIC,EAAuBR,CAAY,GAErDS,IAAWC;AAAA,IACf,MACE,OAAO,SAAW,MACd,IAAI,eAAe,CAACC,MAAY;AAC9B,YAAMC,IAAQD,EAAQ,CAAC;AAEvB,MAAIC,MACF,qBAAqBT,EAAQ,OAAO,GAEpCA,EAAQ,UAAU,sBAAsB,MAAM;AAC5C,YAAIE,EAAI,SAAS;AACf,gBAAMQ,IAAUD,EAAM,gBAAgB,CAAC,KAAKA,EAAM,iBAAiB,CAAC;AACpE,cAAIC,GAAS;AACX,kBAAMC,IAAQD,EAAQ,YAChBE,IAASF,EAAQ;AAEvB,YAAAN,EAAQ;AAAA,cACN,OAAAO;AAAA,cACA,QAAAC;AAAA,cACA,GAAGH,EAAM,YAAY;AAAA,cACrB,GAAGA,EAAM,YAAY;AAAA,cACrB,KAAKA,EAAM,YAAY;AAAA,cACvB,MAAMA,EAAM,YAAY;AAAA,cACxB,QAAQA,EAAM,YAAY;AAAA,cAC1B,OAAOA,EAAM,YAAY;AAAA,YAAA,CAC1B;AAAA,UACH;AACE,YAAAL,EAAQK,EAAM,WAAW;AAAA,QAE7B;AAAA,MACF,CAAC;AAAA,IAEL,CAAC,IACD;AAAA,IACN,CAAA;AAAA,EAAC;AAGH,SAAAI,EAAU,OACJX,EAAI,WACNI,GAAU,QAAQJ,EAAI,SAASH,CAAO,GAGjC,MAAM;AACX,IAAAO,GAAU,WAAA,GAENN,EAAQ,WACV,qBAAqBA,EAAQ,OAAO;AAAA,EAExC,IACC,CAACE,EAAI,OAAO,CAAC,GAET,CAACA,GAAKC,CAAI;AACnB;AAEO,SAASW,EAA4Cf,GAAiC;AAC3F,QAAM,CAACG,GAAK,EAAE,OAAAS,GAAO,QAAAC,GAAQ,IAAId,EAAqBC,CAAO;AAC7D,SAAO,EAAE,KAAAG,GAAK,OAAAS,GAAO,QAAAC,EAAA;AACvB;"}

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

@@ -0,0 +1,13 @@
+import * as React from "react";
+export type TransitionStatus = "starting" | "ending" | "idle" | undefined;
+/**
+ * Provides a status string for CSS animations.
+ * @param open - a boolean that determines if the element is open.
+ * @param enableIdleState - a boolean that enables the `'idle'` state between `'starting'` and `'ending'`
+ */
+export declare function useTransitionStatus(open: boolean, enableIdleState?: boolean, deferEndingState?: boolean): {
+    mounted: boolean;
+    setMounted: React.Dispatch<React.SetStateAction<boolean>>;
+    transitionStatus: TransitionStatus;
+};
+//# sourceMappingURL=useTransitionStatus.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTransitionStatus.d.ts","sourceRoot":"","sources":["../../../src/components/hooks/useTransitionStatus.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;AAE1E;;;;GAIG;AACH,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,OAAO,EACb,eAAe,GAAE,OAAe,EAChC,gBAAgB,GAAE,OAAe;;;;EA6ElC"}

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

@@ -1 +1 @@
-{"version":3,"file":"useTransitionStatus.js","sources":["../../../src/components/hooks/useTransitionStatus.ts"],"sourcesContent":["\"use client\";\nimport * as React from \"react\";\nimport * as ReactDOM from \"react-dom\";\nimport { useIsoLayoutEffect } from \"@base-ui-components/utils/useIsoLayoutEffect\";\nimport { AnimationFrame } from \"@base-ui-components/utils/useAnimationFrame\";\n\nexport type TransitionStatus = \"starting\" | \"ending\" | \"idle\" | undefined;\n\n/**\n * Provides a status string for CSS animations.\n * @param open - a boolean that determines if the element is open.\n * @param enableIdleState - a boolean that enables the `'idle'` state between `'starting'` and `'ending'`\n */\nexport function useTransitionStatus(\n  open: boolean,\n  enableIdleState: boolean = false,\n  deferEndingState: boolean = false\n) {\n  const [transitionStatus, setTransitionStatus] =\n    React.useState<TransitionStatus>(\n      open && enableIdleState ? \"idle\" : undefined\n    );\n  const [mounted, setMounted] = React.useState(open);\n\n  if (open && !mounted) {\n    setMounted(true);\n    setTransitionStatus(\"starting\");\n  }\n\n  if (!open && mounted && transitionStatus !== \"ending\" && !deferEndingState) {\n    setTransitionStatus(\"ending\");\n  }\n\n  if (!open && !mounted && transitionStatus === \"ending\") {\n    setTransitionStatus(undefined);\n  }\n\n  useIsoLayoutEffect(() => {\n    if (!open && mounted && transitionStatus !== \"ending\" && deferEndingState) {\n      const frame = AnimationFrame.request(() => {\n        setTransitionStatus(\"ending\");\n      });\n\n      return () => {\n        AnimationFrame.cancel(frame);\n      };\n    }\n\n    return undefined;\n  }, [open, mounted, transitionStatus, deferEndingState]);\n\n  useIsoLayoutEffect(() => {\n    if (!open || enableIdleState) {\n      return undefined;\n    }\n\n    const frame = AnimationFrame.request(() => {\n      ReactDOM.flushSync(() => {\n        setTransitionStatus(undefined);\n      });\n    });\n\n    return () => {\n      AnimationFrame.cancel(frame);\n    };\n  }, [enableIdleState, open]);\n\n  useIsoLayoutEffect(() => {\n    if (!open || !enableIdleState) {\n      return undefined;\n    }\n\n    if (open && mounted && transitionStatus !== \"idle\") {\n      setTransitionStatus(\"starting\");\n    }\n\n    const frame = AnimationFrame.request(() => {\n      setTransitionStatus(\"idle\");\n    });\n\n    return () => {\n      AnimationFrame.cancel(frame);\n    };\n  }, [enableIdleState, open, mounted, setTransitionStatus, transitionStatus]);\n\n  return React.useMemo(\n    () => ({\n      mounted,\n      setMounted,\n      transitionStatus,\n    }),\n    [mounted, transitionStatus]\n  );\n}\n"],"names":["useTransitionStatus","open","enableIdleState","deferEndingState","transitionStatus","setTransitionStatus","React","mounted","setMounted","useIsoLayoutEffect","frame","AnimationFrame","ReactDOM"],"mappings":";;;;;AAaO,SAASA,EACdC,GACAC,IAA2B,IAC3BC,IAA4B,IAC5B;AACA,QAAM,CAACC,GAAkBC,CAAmB,IAC1CC,EAAM;AAAA,IACJL,KAAQC,IAAkB,SAAS;AAAA,EACrC,GACI,CAACK,GAASC,CAAU,IAAIF,EAAM,SAASL,CAAI;AAE7C,SAAAA,KAAQ,CAACM,MACXC,EAAW,EAAI,GACfH,EAAoB,UAAU,IAG5B,CAACJ,KAAQM,KAAWH,MAAqB,YAAY,CAACD,KACxDE,EAAoB,QAAQ,GAG1B,CAACJ,KAAQ,CAACM,KAAWH,MAAqB,YAC5CC,EAAoB,MAAS,GAG/BI,EAAmB,MAAM;AACvB,QAAI,CAACR,KAAQM,KAAWH,MAAqB,YAAYD,GAAkB;AACnE,YAAAO,IAAQC,EAAe,QAAQ,MAAM;AACzC,QAAAN,EAAoB,QAAQ;AAAA,MAAA,CAC7B;AAED,aAAO,MAAM;AACX,QAAAM,EAAe,OAAOD,CAAK;AAAA,MAC7B;AAAA,IAAA;AAAA,KAID,CAACT,GAAMM,GAASH,GAAkBD,CAAgB,CAAC,GAEtDM,EAAmB,MAAM;AACnB,QAAA,CAACR,KAAQC;AACJ;AAGH,UAAAQ,IAAQC,EAAe,QAAQ,MAAM;AACzC,MAAAC,EAAS,UAAU,MAAM;AACvB,QAAAP,EAAoB,MAAS;AAAA,MAAA,CAC9B;AAAA,IAAA,CACF;AAED,WAAO,MAAM;AACX,MAAAM,EAAe,OAAOD,CAAK;AAAA,IAC7B;AAAA,EAAA,GACC,CAACR,GAAiBD,CAAI,CAAC,GAE1BQ,EAAmB,MAAM;AACnB,QAAA,CAACR,KAAQ,CAACC;AACL;AAGL,IAAAD,KAAQM,KAAWH,MAAqB,UAC1CC,EAAoB,UAAU;AAG1B,UAAAK,IAAQC,EAAe,QAAQ,MAAM;AACzC,MAAAN,EAAoB,MAAM;AAAA,IAAA,CAC3B;AAED,WAAO,MAAM;AACX,MAAAM,EAAe,OAAOD,CAAK;AAAA,IAC7B;AAAA,EAAA,GACC,CAACR,GAAiBD,GAAMM,GAASF,GAAqBD,CAAgB,CAAC,GAEnEE,EAAM;AAAA,IACX,OAAO;AAAA,MACL,SAAAC;AAAA,MACA,YAAAC;AAAA,MACA,kBAAAJ;AAAA,IAAA;AAAA,IAEF,CAACG,GAASH,CAAgB;AAAA,EAC5B;AACF;"}
+{"version":3,"file":"useTransitionStatus.js","sources":["../../../src/components/hooks/useTransitionStatus.ts"],"sourcesContent":["\"use client\";\nimport * as React from \"react\";\nimport * as ReactDOM from \"react-dom\";\nimport { useIsoLayoutEffect } from \"@base-ui-components/utils/useIsoLayoutEffect\";\nimport { AnimationFrame } from \"@base-ui-components/utils/useAnimationFrame\";\n\nexport type TransitionStatus = \"starting\" | \"ending\" | \"idle\" | undefined;\n\n/**\n * Provides a status string for CSS animations.\n * @param open - a boolean that determines if the element is open.\n * @param enableIdleState - a boolean that enables the `'idle'` state between `'starting'` and `'ending'`\n */\nexport function useTransitionStatus(\n  open: boolean,\n  enableIdleState: boolean = false,\n  deferEndingState: boolean = false\n) {\n  const [transitionStatus, setTransitionStatus] =\n    React.useState<TransitionStatus>(\n      open && enableIdleState ? \"idle\" : undefined\n    );\n  const [mounted, setMounted] = React.useState(open);\n\n  if (open && !mounted) {\n    setMounted(true);\n    setTransitionStatus(\"starting\");\n  }\n\n  if (!open && mounted && transitionStatus !== \"ending\" && !deferEndingState) {\n    setTransitionStatus(\"ending\");\n  }\n\n  if (!open && !mounted && transitionStatus === \"ending\") {\n    setTransitionStatus(undefined);\n  }\n\n  useIsoLayoutEffect(() => {\n    if (!open && mounted && transitionStatus !== \"ending\" && deferEndingState) {\n      const frame = AnimationFrame.request(() => {\n        setTransitionStatus(\"ending\");\n      });\n\n      return () => {\n        AnimationFrame.cancel(frame);\n      };\n    }\n\n    return undefined;\n  }, [open, mounted, transitionStatus, deferEndingState]);\n\n  useIsoLayoutEffect(() => {\n    if (!open || enableIdleState) {\n      return undefined;\n    }\n\n    const frame = AnimationFrame.request(() => {\n      ReactDOM.flushSync(() => {\n        setTransitionStatus(undefined);\n      });\n    });\n\n    return () => {\n      AnimationFrame.cancel(frame);\n    };\n  }, [enableIdleState, open]);\n\n  useIsoLayoutEffect(() => {\n    if (!open || !enableIdleState) {\n      return undefined;\n    }\n\n    if (open && mounted && transitionStatus !== \"idle\") {\n      setTransitionStatus(\"starting\");\n    }\n\n    const frame = AnimationFrame.request(() => {\n      setTransitionStatus(\"idle\");\n    });\n\n    return () => {\n      AnimationFrame.cancel(frame);\n    };\n  }, [enableIdleState, open, mounted, setTransitionStatus, transitionStatus]);\n\n  return React.useMemo(\n    () => ({\n      mounted,\n      setMounted,\n      transitionStatus,\n    }),\n    [mounted, transitionStatus]\n  );\n}\n"],"names":["useTransitionStatus","open","enableIdleState","deferEndingState","transitionStatus","setTransitionStatus","React","mounted","setMounted","useIsoLayoutEffect","frame","AnimationFrame","ReactDOM"],"mappings":";;;;;AAaO,SAASA,EACdC,GACAC,IAA2B,IAC3BC,IAA4B,IAC5B;AACA,QAAM,CAACC,GAAkBC,CAAmB,IAC1CC,EAAM;AAAA,IACJL,KAAQC,IAAkB,SAAS;AAAA,EAAA,GAEjC,CAACK,GAASC,CAAU,IAAIF,EAAM,SAASL,CAAI;AAEjD,SAAIA,KAAQ,CAACM,MACXC,EAAW,EAAI,GACfH,EAAoB,UAAU,IAG5B,CAACJ,KAAQM,KAAWH,MAAqB,YAAY,CAACD,KACxDE,EAAoB,QAAQ,GAG1B,CAACJ,KAAQ,CAACM,KAAWH,MAAqB,YAC5CC,EAAoB,MAAS,GAG/BI,EAAmB,MAAM;AACvB,QAAI,CAACR,KAAQM,KAAWH,MAAqB,YAAYD,GAAkB;AACzE,YAAMO,IAAQC,EAAe,QAAQ,MAAM;AACzC,QAAAN,EAAoB,QAAQ;AAAA,MAC9B,CAAC;AAED,aAAO,MAAM;AACX,QAAAM,EAAe,OAAOD,CAAK;AAAA,MAC7B;AAAA,IACF;AAAA,EAGF,GAAG,CAACT,GAAMM,GAASH,GAAkBD,CAAgB,CAAC,GAEtDM,EAAmB,MAAM;AACvB,QAAI,CAACR,KAAQC;AACX;AAGF,UAAMQ,IAAQC,EAAe,QAAQ,MAAM;AACzC,MAAAC,EAAS,UAAU,MAAM;AACvB,QAAAP,EAAoB,MAAS;AAAA,MAC/B,CAAC;AAAA,IACH,CAAC;AAED,WAAO,MAAM;AACX,MAAAM,EAAe,OAAOD,CAAK;AAAA,IAC7B;AAAA,EACF,GAAG,CAACR,GAAiBD,CAAI,CAAC,GAE1BQ,EAAmB,MAAM;AACvB,QAAI,CAACR,KAAQ,CAACC;AACZ;AAGF,IAAID,KAAQM,KAAWH,MAAqB,UAC1CC,EAAoB,UAAU;AAGhC,UAAMK,IAAQC,EAAe,QAAQ,MAAM;AACzC,MAAAN,EAAoB,MAAM;AAAA,IAC5B,CAAC;AAED,WAAO,MAAM;AACX,MAAAM,EAAe,OAAOD,CAAK;AAAA,IAC7B;AAAA,EACF,GAAG,CAACR,GAAiBD,GAAMM,GAASF,GAAqBD,CAAgB,CAAC,GAEnEE,EAAM;AAAA,IACX,OAAO;AAAA,MACL,SAAAC;AAAA,MACA,YAAAC;AAAA,MACA,kBAAAJ;AAAA,IAAA;AAAA,IAEF,CAACG,GAASH,CAAgB;AAAA,EAAA;AAE9B;"}

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

@@ -0,0 +1,5 @@
+export declare function useWindowSize(): {
+    width: any;
+    height: any;
+};
+//# sourceMappingURL=useWindowSize.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useWindowSize.d.ts","sourceRoot":"","sources":["../../../src/components/hooks/useWindowSize.ts"],"names":[],"mappings":"AAGA,wBAAgB,aAAa;;;EAuB5B"}

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

@@ -1 +1 @@
-{"version":3,"file":"useWindowSize.js","sources":["../../../src/components/hooks/useWindowSize.ts"],"sourcesContent":["\"use client\";\nimport React from 'react';\n\nexport function useWindowSize() {\n  const [size, setSize] = React.useState({\n    width: null,\n    height: null,\n  });\n\n  React.useLayoutEffect(() => {\n    const handleResize = () => {\n      setSize({\n        width: window.innerWidth,\n        height: window.innerHeight,\n      });\n    };\n\n    handleResize();\n    window.addEventListener(\"resize\", handleResize);\n\n    return () => {\n      window.removeEventListener(\"resize\", handleResize);\n    };\n  }, []);\n\n  return size;\n}\n"],"names":["useWindowSize","size","setSize","React","handleResize"],"mappings":";;AAGO,SAASA,IAAgB;AAC9B,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAAM,SAAS;AAAA,IACrC,OAAO;AAAA,IACP,QAAQ;AAAA,EAAA,CACT;AAEDA,SAAAA,EAAM,gBAAgB,MAAM;AAC1B,UAAMC,IAAe,MAAM;AACjB,MAAAF,EAAA;AAAA,QACN,OAAO,OAAO;AAAA,QACd,QAAQ,OAAO;AAAA,MAAA,CAChB;AAAA,IACH;AAEa,WAAAE,EAAA,GACN,OAAA,iBAAiB,UAAUA,CAAY,GAEvC,MAAM;AACJ,aAAA,oBAAoB,UAAUA,CAAY;AAAA,IACnD;AAAA,EACF,GAAG,EAAE,GAEEH;AACT;"}
+{"version":3,"file":"useWindowSize.js","sources":["../../../src/components/hooks/useWindowSize.ts"],"sourcesContent":["\"use client\";\nimport React from 'react';\n\nexport function useWindowSize() {\n  const [size, setSize] = React.useState({\n    width: null,\n    height: null,\n  });\n\n  React.useLayoutEffect(() => {\n    const handleResize = () => {\n      setSize({\n        width: window.innerWidth,\n        height: window.innerHeight,\n      });\n    };\n\n    handleResize();\n    window.addEventListener(\"resize\", handleResize);\n\n    return () => {\n      window.removeEventListener(\"resize\", handleResize);\n    };\n  }, []);\n\n  return size;\n}\n"],"names":["useWindowSize","size","setSize","React","handleResize"],"mappings":";;AAGO,SAASA,IAAgB;AAC9B,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAAM,SAAS;AAAA,IACrC,OAAO;AAAA,IACP,QAAQ;AAAA,EAAA,CACT;AAEDA,SAAAA,EAAM,gBAAgB,MAAM;AAC1B,UAAMC,IAAe,MAAM;AACzB,MAAAF,EAAQ;AAAA,QACN,OAAO,OAAO;AAAA,QACd,QAAQ,OAAO;AAAA,MAAA,CAChB;AAAA,IACH;AAEA,WAAAE,EAAA,GACA,OAAO,iBAAiB,UAAUA,CAAY,GAEvC,MAAM;AACX,aAAO,oBAAoB,UAAUA,CAAY;AAAA,IACnD;AAAA,EACF,GAAG,CAAA,CAAE,GAEEH;AACT;"}

package/dist/components/icon-button/component.d.ts

@@ -0,0 +1,45 @@
+import { default as React, ElementType, Ref, ComponentPropsWithRef } from 'react';
+import { TooltipProps } from '../tooltip';
+import { WithRenderPropProps, ElementTypeToDOMType } from '../utils';
+export type IconButtonProps<E extends ElementType = "button"> = WithRenderPropProps<E, {
+    loading: boolean;
+}> & {
+    /**
+     * Label text or element to display within tooltip
+     * @default undefined
+     */
+    label?: React.ReactNode;
+    /**
+     * Size of the icon button: small (1.25rem) or medium (1.5rem)
+     * @default medium
+     */
+    size?: "small" | "medium";
+    /**
+     * Whether to apply negative margin for better visual alignment
+     * @default true
+     */
+    negativeMargin?: boolean;
+    /**
+     * Whether to show loading state
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Props to pass to the Tooltip component when wrapping the button
+     */
+    tooltipProps?: TooltipProps;
+    /**
+     * Whether to show active state
+     * @default false
+     */
+    active?: boolean;
+};
+/**
+ * Implementation of the IconButton component
+ */
+declare const IconButtonImpl: <E extends ElementType = "button">({ label, size, negativeMargin, children, className, tooltipProps, active, as, href, target, rel, download, hrefLang, referrerPolicy, loading, render, ...rest }: IconButtonProps<E>, ref: Ref<ElementTypeToDOMType<E>>) => import("react/jsx-runtime").JSX.Element;
+export declare const IconButton: <E extends ElementType = "button">(props: IconButtonProps<E> & {
+    ref?: ComponentPropsWithRef<E>["ref"];
+}) => ReturnType<typeof IconButtonImpl>;
+export {};
+//# sourceMappingURL=component.d.ts.map

package/dist/components/icon-button/component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/component.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAEZ,KAAK,WAAW,EAChB,KAAK,GAAG,EACR,qBAAqB,EACtB,MAAM,OAAO,CAAC;AACf,OAAO,EAAW,YAAY,EAAE,MAAM,YAAY,CAAC;AACnD,OAAO,EAGL,mBAAmB,EAEnB,oBAAoB,EACrB,MAAM,UAAU,CAAC;AAIlB,OAAO,aAAa,CAAC;AAGrB,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,WAAW,GAAG,QAAQ,IAC1D,mBAAmB,CAAC,CAAC,EAAE;IAAE,OAAO,EAAE,OAAO,CAAA;CAAE,CAAC,GAAG;IAC7C;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEJ;;GAEG;AACH,QAAA,MAAM,cAAc,GAAI,CAAC,SAAS,WAAW,GAAG,QAAQ,EACtD,iKAmBG,eAAe,CAAC,CAAC,CAAC,EACrB,KAAK,GAAG,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC,4CAqDlC,CAAC;AAGF,eAAO,MAAM,UAAU,EAAiC,CACtD,CAAC,SAAS,WAAW,GAAG,QAAQ,EAEhC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,qBAAqB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA;CAAE,KAClE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC"}

package/dist/components/icon-button/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/icon-button/component.tsx"],"sourcesContent":["\"use client\";\nimport React, {\n  forwardRef,\n  type ElementType,\n  type Ref,\n  ComponentPropsWithRef,\n} from \"react\";\nimport { Tooltip, TooltipProps } from \"../tooltip\";\nimport {\n  useCls,\n  clsx,\n  WithRenderPropProps,\n  WithRenderProp,\n  ElementTypeToDOMType,\n} from \"../utils\";\nimport { Spin } from \"../spin\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\n// Base props without href/as handling\nexport type IconButtonProps<E extends ElementType = \"button\"> =\n  WithRenderPropProps<E, { loading: boolean }> & {\n    /**\n     * Label text or element to display within tooltip\n     * @default undefined\n     */\n    label?: React.ReactNode;\n    /**\n     * Size of the icon button: small (1.25rem) or medium (1.5rem)\n     * @default medium\n     */\n    size?: \"small\" | \"medium\";\n    /**\n     * Whether to apply negative margin for better visual alignment\n     * @default true\n     */\n    negativeMargin?: boolean;\n    /**\n     * Whether to show loading state\n     * @default false\n     */\n    loading?: boolean;\n    /**\n     * Props to pass to the Tooltip component when wrapping the button\n     */\n    tooltipProps?: TooltipProps;\n    /**\n     * Whether to show active state\n     * @default false\n     */\n    active?: boolean;\n  };\n\n/**\n * Implementation of the IconButton component\n */\nconst IconButtonImpl = <E extends ElementType = \"button\">(\n  {\n    label,\n    size = \"medium\",\n    negativeMargin = true,\n    children,\n    className,\n    tooltipProps = {},\n    active = false,\n    as,\n    href,\n    // Extract anchor-specific props\n    target,\n    rel,\n    download,\n    hrefLang,\n    referrerPolicy,\n    loading,\n    render,\n    ...rest\n  }: IconButtonProps<E>,\n  ref: Ref<ElementTypeToDOMType<E>>\n) => {\n  const cls = useCls();\n  const buttonClasses = clsx(\n    cls(\n      \"icon-button\",\n      `icon-button-${size}`,\n      active && \"icon-button-active\",\n      negativeMargin && \"icon-button-negative-margin\"\n    ),\n    className\n  );\n\n  // Use a type assertion for the component to avoid TypeScript errors\n  const Component = (as || (href ? \"a\" : \"button\")) as ElementType;\n\n  const elementProps = {\n    ref,\n    className: buttonClasses,\n    ...(Component === \"button\" && { type: \"button\" }),\n    ...(Component === \"a\"\n      ? {\n          ...(href && { href }),\n          ...(target !== undefined && { target }),\n          ...(rel !== undefined && { rel }),\n          ...(download !== undefined && { download }),\n          ...(hrefLang !== undefined && { hrefLang }),\n          ...(referrerPolicy !== undefined && { referrerPolicy }),\n        }\n      : {}),\n    \"data-loading\": loading,\n    children: loading ? <Spin /> : children,\n    ...rest,\n  };\n\n  const element = (\n    <WithRenderProp\n      as={Component}\n      render={render}\n      {...elementProps}\n      state={{\n        loading,\n      }}\n    />\n  );\n\n  return label ? (\n    <Tooltip title={label} arrow={false} {...tooltipProps}>\n      {element}\n    </Tooltip>\n  ) : (\n    element\n  );\n};\n\n// Export with correct typing\nexport const IconButton = forwardRef(IconButtonImpl) as <\n  E extends ElementType = \"button\"\n>(\n  props: IconButtonProps<E> & { ref?: ComponentPropsWithRef<E>[\"ref\"] }\n) => ReturnType<typeof IconButtonImpl>;\n"],"names":["IconButtonImpl","label","size","negativeMargin","children","className","tooltipProps","active","as","href","target","rel","download","hrefLang","referrerPolicy","loading","render","rest","ref","cls","useCls","buttonClasses","clsx","Component","elementProps","jsx","Spin","element","WithRenderProp","Tooltip","IconButton","forwardRef"],"mappings":";;;;;;;;;AAyDA,MAAMA,IAAiB,CACrB;AAAA,EACE,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,gBAAAC,IAAiB;AAAA,EACjB,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC,IAAe,CAAC;AAAA,EAChB,QAAAC,IAAS;AAAA,EACT,IAAAC;AAAA,EACA,MAAAC;AAAA;AAAA,EAEA,QAAAC;AAAA,EACA,KAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,GAAGC;AACL,GACAC,MACG;AACH,QAAMC,IAAMC,EAAO,GACbC,IAAgBC;AAAA,IACpBH;AAAA,MACE;AAAA,MACA,eAAejB,CAAI;AAAA,MACnBK,KAAU;AAAA,MACVJ,KAAkB;AAAA,IACpB;AAAA,IACAE;AAAA,EACF,GAGMkB,IAAaf,MAAOC,IAAO,MAAM,WAEjCe,IAAe;AAAA,IACnB,KAAAN;AAAA,IACA,WAAWG;AAAA,IACX,GAAIE,MAAc,YAAY,EAAE,MAAM,SAAS;AAAA,IAC/C,GAAIA,MAAc,MACd;AAAA,MACE,GAAId,KAAQ,EAAE,MAAAA,EAAK;AAAA,MACnB,GAAIC,MAAW,UAAa,EAAE,QAAAA,EAAO;AAAA,MACrC,GAAIC,MAAQ,UAAa,EAAE,KAAAA,EAAI;AAAA,MAC/B,GAAIC,MAAa,UAAa,EAAE,UAAAA,EAAS;AAAA,MACzC,GAAIC,MAAa,UAAa,EAAE,UAAAA,EAAS;AAAA,MACzC,GAAIC,MAAmB,UAAa,EAAE,gBAAAA,EAAe;AAAA,IAAA,IAEvD,CAAC;AAAA,IACL,gBAAgBC;AAAA,IAChB,UAAUA,IAAW,gBAAAU,EAAAC,GAAA,CAAA,CAAK,IAAKtB;AAAA,IAC/B,GAAGa;AAAA,EACL,GAEMU,IACJ,gBAAAF;AAAA,IAACG;AAAA,IAAA;AAAA,MACC,IAAIL;AAAA,MACJ,QAAAP;AAAA,MACC,GAAGQ;AAAA,MACJ,OAAO;AAAA,QACL,SAAAT;AAAA,MAAA;AAAA,IACF;AAAA,EACF;AAGK,SAAAd,IACJ,gBAAAwB,EAAAI,GAAA,EAAQ,OAAO5B,GAAO,OAAO,IAAQ,GAAGK,GACtC,UAAAqB,EAAA,CACH,IAEAA;AAEJ,GAGaG,IAAaC,EAAW/B,CAAc;"}
+{"version":3,"file":"component.js","sources":["../../../src/components/icon-button/component.tsx"],"sourcesContent":["\"use client\";\nimport React, {\n  forwardRef,\n  type ElementType,\n  type Ref,\n  ComponentPropsWithRef,\n} from \"react\";\nimport { Tooltip, TooltipProps } from \"../tooltip\";\nimport {\n  useCls,\n  clsx,\n  WithRenderPropProps,\n  WithRenderProp,\n  ElementTypeToDOMType,\n} from \"../utils\";\nimport { Spin } from \"../spin\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\n// Base props without href/as handling\nexport type IconButtonProps<E extends ElementType = \"button\"> =\n  WithRenderPropProps<E, { loading: boolean }> & {\n    /**\n     * Label text or element to display within tooltip\n     * @default undefined\n     */\n    label?: React.ReactNode;\n    /**\n     * Size of the icon button: small (1.25rem) or medium (1.5rem)\n     * @default medium\n     */\n    size?: \"small\" | \"medium\";\n    /**\n     * Whether to apply negative margin for better visual alignment\n     * @default true\n     */\n    negativeMargin?: boolean;\n    /**\n     * Whether to show loading state\n     * @default false\n     */\n    loading?: boolean;\n    /**\n     * Props to pass to the Tooltip component when wrapping the button\n     */\n    tooltipProps?: TooltipProps;\n    /**\n     * Whether to show active state\n     * @default false\n     */\n    active?: boolean;\n  };\n\n/**\n * Implementation of the IconButton component\n */\nconst IconButtonImpl = <E extends ElementType = \"button\">(\n  {\n    label,\n    size = \"medium\",\n    negativeMargin = true,\n    children,\n    className,\n    tooltipProps = {},\n    active = false,\n    as,\n    href,\n    // Extract anchor-specific props\n    target,\n    rel,\n    download,\n    hrefLang,\n    referrerPolicy,\n    loading,\n    render,\n    ...rest\n  }: IconButtonProps<E>,\n  ref: Ref<ElementTypeToDOMType<E>>\n) => {\n  const cls = useCls();\n  const buttonClasses = clsx(\n    cls(\n      \"icon-button\",\n      `icon-button-${size}`,\n      active && \"icon-button-active\",\n      negativeMargin && \"icon-button-negative-margin\"\n    ),\n    className\n  );\n\n  // Use a type assertion for the component to avoid TypeScript errors\n  const Component = (as || (href ? \"a\" : \"button\")) as ElementType;\n\n  const elementProps = {\n    ref,\n    className: buttonClasses,\n    ...(Component === \"button\" && { type: \"button\" }),\n    ...(Component === \"a\"\n      ? {\n          ...(href && { href }),\n          ...(target !== undefined && { target }),\n          ...(rel !== undefined && { rel }),\n          ...(download !== undefined && { download }),\n          ...(hrefLang !== undefined && { hrefLang }),\n          ...(referrerPolicy !== undefined && { referrerPolicy }),\n        }\n      : {}),\n    \"data-loading\": loading,\n    children: loading ? <Spin /> : children,\n    ...rest,\n  };\n\n  const element = (\n    <WithRenderProp\n      as={Component}\n      render={render}\n      {...elementProps}\n      state={{\n        loading,\n      }}\n    />\n  );\n\n  return label ? (\n    <Tooltip title={label} arrow={false} {...tooltipProps}>\n      {element}\n    </Tooltip>\n  ) : (\n    element\n  );\n};\n\n// Export with correct typing\nexport const IconButton = forwardRef(IconButtonImpl) as <\n  E extends ElementType = \"button\"\n>(\n  props: IconButtonProps<E> & { ref?: ComponentPropsWithRef<E>[\"ref\"] }\n) => ReturnType<typeof IconButtonImpl>;\n"],"names":["IconButtonImpl","label","size","negativeMargin","children","className","tooltipProps","active","as","href","target","rel","download","hrefLang","referrerPolicy","loading","render","rest","ref","cls","useCls","buttonClasses","clsx","Component","elementProps","jsx","Spin","element","WithRenderProp","Tooltip","IconButton","forwardRef"],"mappings":";;;;;;;;;AAyDA,MAAMA,IAAiB,CACrB;AAAA,EACE,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,gBAAAC,IAAiB;AAAA,EACjB,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC,IAAe,CAAA;AAAA,EACf,QAAAC,IAAS;AAAA,EACT,IAAAC;AAAA,EACA,MAAAC;AAAA;AAAA,EAEA,QAAAC;AAAA,EACA,KAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,GAAGC;AACL,GACAC,MACG;AACH,QAAMC,IAAMC,EAAA,GACNC,IAAgBC;AAAA,IACpBH;AAAA,MACE;AAAA,MACA,eAAejB,CAAI;AAAA,MACnBK,KAAU;AAAA,MACVJ,KAAkB;AAAA,IAAA;AAAA,IAEpBE;AAAA,EAAA,GAIIkB,IAAaf,MAAOC,IAAO,MAAM,WAEjCe,IAAe;AAAA,IACnB,KAAAN;AAAA,IACA,WAAWG;AAAA,IACX,GAAIE,MAAc,YAAY,EAAE,MAAM,SAAA;AAAA,IACtC,GAAIA,MAAc,MACd;AAAA,MACE,GAAId,KAAQ,EAAE,MAAAA,EAAA;AAAA,MACd,GAAIC,MAAW,UAAa,EAAE,QAAAA,EAAA;AAAA,MAC9B,GAAIC,MAAQ,UAAa,EAAE,KAAAA,EAAA;AAAA,MAC3B,GAAIC,MAAa,UAAa,EAAE,UAAAA,EAAA;AAAA,MAChC,GAAIC,MAAa,UAAa,EAAE,UAAAA,EAAA;AAAA,MAChC,GAAIC,MAAmB,UAAa,EAAE,gBAAAA,EAAA;AAAA,IAAe,IAEvD,CAAA;AAAA,IACJ,gBAAgBC;AAAA,IAChB,UAAUA,IAAU,gBAAAU,EAACC,GAAA,CAAA,CAAK,IAAKtB;AAAA,IAC/B,GAAGa;AAAA,EAAA,GAGCU,IACJ,gBAAAF;AAAA,IAACG;AAAA,IAAA;AAAA,MACC,IAAIL;AAAA,MACJ,QAAAP;AAAA,MACC,GAAGQ;AAAA,MACJ,OAAO;AAAA,QACL,SAAAT;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAIJ,SAAOd,IACL,gBAAAwB,EAACI,GAAA,EAAQ,OAAO5B,GAAO,OAAO,IAAQ,GAAGK,GACtC,UAAAqB,EAAA,CACH,IAEAA;AAEJ,GAGaG,IAAaC,EAAW/B,CAAc;"}

package/dist/components/icon-button/index.d.ts

@@ -0,0 +1,2 @@
+export * from './component';
+//# sourceMappingURL=index.d.ts.map