@bioturing/components 0.29.2 → 0.31.0

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

@@ -0,0 +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;"}

package/dist/components/hooks/useWindowSize.js

@@ -0,0 +1,23 @@
+"use client";
+import t from "react";
+function o() {
+  const [i, n] = t.useState({
+    width: null,
+    height: null
+  });
+  return t.useLayoutEffect(() => {
+    const e = () => {
+      n({
+        width: window.innerWidth,
+        height: window.innerHeight
+      });
+    };
+    return e(), window.addEventListener("resize", e), () => {
+      window.removeEventListener("resize", e);
+    };
+  }, []), i;
+}
+export {
+  o as useWindowSize
+};
+//# sourceMappingURL=useWindowSize.js.map

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

@@ -0,0 +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;"}

package/dist/components/keyboard-shortcut/component.js

@@ -0,0 +1,72 @@
+import { jsx as t, jsxs as u } from "react/jsx-runtime";
+import h from "react";
+import './style.css';/* empty css          */
+import { useCls as i } from "../utils/antdUtils.js";
+import { clsx as m } from "../utils/cn.js";
+const g = ({
+  keys: o,
+  className: c,
+  style: s,
+  size: n = "medium",
+  children: l
+}) => {
+  const r = i(), p = (e) => {
+    const a = {
+      meta: "⌘",
+      cmd: "⌘",
+      command: "⌘",
+      ctrl: "Ctrl",
+      control: "Ctrl",
+      shift: "⇧",
+      alt: "⌥",
+      option: "⌥",
+      enter: "↵",
+      return: "↵",
+      space: "Space",
+      tab: "⇥",
+      escape: "Esc",
+      esc: "Esc",
+      delete: "⌫",
+      backspace: "⌫",
+      arrowup: "↑",
+      arrowdown: "↓",
+      arrowleft: "←",
+      arrowright: "→",
+      up: "↑",
+      down: "↓",
+      left: "←",
+      right: "→"
+    }, d = e.toLowerCase();
+    return a[d] || e.toUpperCase();
+  };
+  return l ? /* @__PURE__ */ t(
+    "span",
+    {
+      className: m(
+        r("keyboard-shortcut"),
+        r(`keyboard-shortcut-${n}`),
+        c
+      ),
+      style: s,
+      children: /* @__PURE__ */ t("kbd", { className: r("keyboard-shortcut-key"), children: l })
+    }
+  ) : !o || o.length === 0 ? null : /* @__PURE__ */ t(
+    "span",
+    {
+      className: m(
+        r("keyboard-shortcut"),
+        r(`keyboard-shortcut-${n}`),
+        c
+      ),
+      style: s,
+      children: o.map((e, a) => /* @__PURE__ */ u(h.Fragment, { children: [
+        /* @__PURE__ */ t("kbd", { className: r("keyboard-shortcut-key"), children: p(e) }),
+        a < o.length - 1 && /* @__PURE__ */ t("span", { className: r("keyboard-shortcut-separator"), children: "+" })
+      ] }, a))
+    }
+  );
+};
+export {
+  g as KeyboardShortcut
+};
+//# sourceMappingURL=component.js.map

package/dist/components/keyboard-shortcut/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","sources":["../../../src/components/keyboard-shortcut/component.tsx"],"sourcesContent":["import React from \"react\";\nimport { useCls, clsx } from \"../utils\";\nimport \"./style.css\";\n\nexport interface KeyboardShortcutProps {\n  /** The keyboard shortcut keys to display (optional if using children) */\n  keys?: string[];\n  /** Custom className */\n  className?: string;\n  /** Custom style */\n  style?: React.CSSProperties;\n  /** Size variant */\n  size?: \"small\" | \"medium\" | \"large\";\n  /** Children to display as keyboard shortcuts */\n  children?: React.ReactNode;\n}\n\nexport const KeyboardShortcut: React.FC<KeyboardShortcutProps> = ({\n  keys,\n  className,\n  style,\n  size = \"medium\",\n  children,\n}) => {\n  const cls = useCls();\n\n  const formatKey = (key: string): string => {\n    // Common key mappings for better display\n    const keyMap: Record<string, string> = {\n      meta: \"⌘\",\n      cmd: \"⌘\",\n      command: \"⌘\",\n      ctrl: \"Ctrl\",\n      control: \"Ctrl\",\n      shift: \"⇧\",\n      alt: \"⌥\",\n      option: \"⌥\",\n      enter: \"↵\",\n      return: \"↵\",\n      space: \"Space\",\n      tab: \"⇥\",\n      escape: \"Esc\",\n      esc: \"Esc\",\n      delete: \"⌫\",\n      backspace: \"⌫\",\n      arrowup: \"↑\",\n      arrowdown: \"↓\",\n      arrowleft: \"←\",\n      arrowright: \"→\",\n      up: \"↑\",\n      down: \"↓\",\n      left: \"←\",\n      right: \"→\",\n    };\n\n    const lowerKey = key.toLowerCase();\n    return keyMap[lowerKey] || key.toUpperCase();\n  };\n\n  // If children are provided, use them directly\n  if (children) {\n    return (\n      <span\n        className={clsx(\n          cls(\"keyboard-shortcut\"),\n          cls(`keyboard-shortcut-${size}`),\n          className\n        )}\n        style={style}\n      >\n        <kbd className={cls(\"keyboard-shortcut-key\")}>\n          {children}\n        </kbd>\n      </span>\n    );\n  }\n\n  // If no keys provided, return null\n  if (!keys || keys.length === 0) {\n    return null;\n  }\n\n  return (\n    <span\n      className={clsx(\n        cls(\"keyboard-shortcut\"),\n        cls(`keyboard-shortcut-${size}`),\n        className\n      )}\n      style={style}\n    >\n      {keys.map((key, index) => (\n        <React.Fragment key={index}>\n          <kbd className={cls(\"keyboard-shortcut-key\")}>\n            {formatKey(key)}\n          </kbd>\n          {index < keys.length - 1 && (\n            <span className={cls(\"keyboard-shortcut-separator\")}>+</span>\n          )}\n        </React.Fragment>\n      ))}\n    </span>\n  );\n};"],"names":["KeyboardShortcut","keys","className","style","size","children","cls","useCls","formatKey","key","keyMap","lowerKey","jsx","clsx","index","jsxs","React"],"mappings":";;;;;AAiBO,MAAMA,IAAoD,CAAC;AAAA,EAChE,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,UAAAC;AACF,MAAM;AACJ,QAAMC,IAAMC,EAAO,GAEbC,IAAY,CAACC,MAAwB;AAEzC,UAAMC,IAAiC;AAAA,MACrC,MAAM;AAAA,MACN,KAAK;AAAA,MACL,SAAS;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,MACT,OAAO;AAAA,MACP,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,SAAS;AAAA,MACT,WAAW;AAAA,MACX,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,IACT,GAEMC,IAAWF,EAAI,YAAY;AACjC,WAAOC,EAAOC,CAAQ,KAAKF,EAAI,YAAY;AAAA,EAC7C;AAGA,SAAIJ,IAEA,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACTP,EAAI,mBAAmB;AAAA,QACvBA,EAAI,qBAAqBF,CAAI,EAAE;AAAA,QAC/BF;AAAA,MACF;AAAA,MACA,OAAAC;AAAA,MAEA,4BAAC,OAAI,EAAA,WAAWG,EAAI,uBAAuB,GACxC,UAAAD,EACH,CAAA;AAAA,IAAA;AAAA,EACF,IAKA,CAACJ,KAAQA,EAAK,WAAW,IACpB,OAIP,gBAAAW;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACTP,EAAI,mBAAmB;AAAA,QACvBA,EAAI,qBAAqBF,CAAI,EAAE;AAAA,QAC/BF;AAAA,MACF;AAAA,MACA,OAAAC;AAAA,MAEC,UAAAF,EAAK,IAAI,CAACQ,GAAKK,MACb,gBAAAC,EAAAC,EAAM,UAAN,EACC,UAAA;AAAA,QAAA,gBAAAJ,EAAC,SAAI,WAAWN,EAAI,uBAAuB,GACxC,UAAAE,EAAUC,CAAG,GAChB;AAAA,QACCK,IAAQb,EAAK,SAAS,KACrB,gBAAAW,EAAC,UAAK,WAAWN,EAAI,6BAA6B,GAAG,UAAC,IAAA,CAAA;AAAA,MAAA,EAAA,GALrCQ,CAOrB,CACD;AAAA,IAAA;AAAA,EACH;AAEJ;"}

package/dist/components/keyboard-shortcut/style.css

@@ -0,0 +1 @@
+@layer components{.ds-keyboard-shortcut{display:inline-flex;align-items:center;font-family:var(--ds-font-family)}.ds-keyboard-shortcut-small{gap:.25rem}.ds-keyboard-shortcut-medium,.ds-keyboard-shortcut-large{gap:var(--ds-padding-xs)}.ds-keyboard-shortcut-key{display:inline-flex;align-items:center;justify-content:center;font-family:var(--ds-font-family);font-weight:500;background:var(--ds-color-fill-secondary);border:1px solid var(--ds-color-border);border-radius:var(--ds-border-radius-sm);color:var(--ds-color-text);white-space:nowrap;-webkit-user-select:none;user-select:none;line-height:1}.ds-keyboard-shortcut-separator{color:var(--ds-color-text-secondary);font-size:.75rem;font-weight:400}.ds-keyboard-shortcut-small .ds-keyboard-shortcut-key{padding:.125rem .375rem;font-size:.6875rem;min-width:1.125rem;height:1.125rem}.ds-keyboard-shortcut-medium .ds-keyboard-shortcut-key{padding:.1875rem .5rem;font-size:.75rem;min-width:1.375rem;height:1.375rem}.ds-keyboard-shortcut-large .ds-keyboard-shortcut-key{padding:.25rem .625rem;font-size:.8125rem;min-width:1.625rem;height:1.625rem}.dark .ds-keyboard-shortcut-key{background:var(--ds-color-fill-tertiary);border-color:var(--ds-color-border)}}

package/dist/components/loader/component.js

@@ -0,0 +1,15 @@
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as t } from "react";
+import './style.css';/* empty css          */
+import { useCls as m } from "../utils/antdUtils.js";
+const d = t(
+  ({ text: r = "Loading", ...o }, s) => {
+    const a = m();
+    return /* @__PURE__ */ e("span", { ref: s, role: "status", className: a("loader"), ...o, children: r });
+  }
+);
+d.displayName = "Loader";
+export {
+  d as Loader
+};
+//# sourceMappingURL=component.js.map

package/dist/components/loader/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","sources":["../../../src/components/loader/component.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { useCls } from \"../utils\";\n\nimport \"./style.css\";\n\nexport interface LoaderProps extends React.ComponentPropsWithoutRef<\"span\"> {\n  text?: string;\n}\n\nexport const Loader = forwardRef<HTMLSpanElement, LoaderProps>(\n  ({ text = \"Loading\", ...rest }: LoaderProps, ref) => {\n    const cls = useCls();\n    return (\n      <span ref={ref} role=\"status\" className={cls(\"loader\")} {...rest}>\n        {text}\n      </span>\n    );\n  },\n);\n\nLoader.displayName = \"Loader\";\n"],"names":["Loader","forwardRef","text","rest","ref","cls","useCls","jsx"],"mappings":";;;;AASO,MAAMA,IAASC;AAAA,EACpB,CAAC,EAAE,MAAAC,IAAO,WAAW,GAAGC,EAAA,GAAqBC,MAAQ;AACnD,UAAMC,IAAMC,EAAO;AAEjB,WAAA,gBAAAC,EAAC,QAAK,EAAA,KAAAH,GAAU,MAAK,UAAS,WAAWC,EAAI,QAAQ,GAAI,GAAGF,GACzD,UACHD,EAAA,CAAA;AAAA,EAAA;AAGN;AAEAF,EAAO,cAAc;"}

package/dist/components/loader/style.css

@@ -0,0 +1 @@
+@layer components{@keyframes ds-loader-dots{0%,20%{content:"."}40%{content:".."}60%{content:"..."}90%,to{content:""}}.ds-loader:after{animation:ds-loader-dots 1.5s linear infinite;content:""}}

package/dist/components/modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/modal/index.ts"],"sourcesContent":["\"use client\";\nimport useApp from \"antd/es/app/useApp\";\nimport { Modal as MainModal } from \"./Modal\";\nimport {\n  confirm,\n  info,\n  success,\n  error,\n  warning,\n  open,\n  destroyAll,\n  type ModalFuncProps,\n} from \"./functions\";\nimport { ModalProvider, type ModalProviderProps } from \"./ModalProvider\";\n\nimport \"./style.css\";\n\nconst useModal = () => {\n  return useApp().modal;\n};\n\n// Export the Modal component with static methods\nexport const Modal = Object.assign(MainModal, {\n  Provider: ModalProvider,\n  open,\n  info,\n  success,\n  error,\n  warning,\n  confirm,\n  destroyAll,\n  useModal,\n});\n\nexport { ModalFuncProps, ModalProviderProps };\n"],"names":["useModal","useApp","Modal","MainModal","ModalProvider","open","info","success","error","warning","confirm","destroyAll"],"mappings":";;;;;;AAiBA,MAAMA,IAAW,MACRC,EAAS,EAAA,OAILC,IAAQ,OAAO,OAAOC,GAAW;AAAA,EAC5C,UAAUC;AAAA,EACV,MAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAX;AACF,CAAC;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/modal/index.ts"],"sourcesContent":["\"use client\";\nimport useApp from \"antd/es/app/useApp\";\nimport { Modal as MainModal, type ModalProps } from \"./Modal\";\nimport {\n  confirm,\n  info,\n  success,\n  error,\n  warning,\n  open,\n  destroyAll,\n  type ModalFuncProps,\n} from \"./functions\";\nimport { ModalProvider, type ModalProviderProps } from \"./ModalProvider\";\n\nimport \"./style.css\";\n\nconst useModal = () => {\n  return useApp().modal;\n};\n\n// Export the Modal component with static methods\nexport const Modal = Object.assign(MainModal, {\n  Provider: ModalProvider,\n  open,\n  info,\n  success,\n  error,\n  warning,\n  confirm,\n  destroyAll,\n  useModal,\n});\n\nexport { ModalProps, ModalFuncProps, ModalProviderProps };\n"],"names":["useModal","useApp","Modal","MainModal","ModalProvider","open","info","success","error","warning","confirm","destroyAll"],"mappings":";;;;;;AAiBA,MAAMA,IAAW,MACRC,EAAS,EAAA,OAILC,IAAQ,OAAO,OAAOC,GAAW;AAAA,EAC5C,UAAUC;AAAA,EACV,MAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAX;AACF,CAAC;"}

package/dist/components/popup-panel/style.css

@@ -1 +1 @@
-@layer components{.ds-popup-panel-root{z-index:1030}.ds-popup-panel{box-shadow:var(--ds-box-shadow-secondary);border-radius:var(--ds-border-radius);background:var(--ds-color-bg-elevated);list-style:none;color:var(--ds-color-text);font-size:var(--ds-font-size);font-family:var(--ds-font-family);transition-property:transform,scale,opacity;transition-duration:.2s;transition-timing-function:var(--ds-motion-ease-out);transform-origin:var(--transform-origin);width:min(var(--size-width),var(--available-width));max-width:var(--available-width);max-height:var(--available-height);height:max-content;display:flex;flex-direction:column}.ds-popup-panel[data-ending-style],.ds-popup-panel[data-starting-style]{transform:scale(.9);opacity:0}.ds-popup-panel:focus{outline:none}.ds-popup-panel-header{border-bottom:1px solid var(--ds-color-split);margin-bottom:0;padding:calc(var(--ds-popup-panel-padding) / 2) var(--ds-popup-panel-padding);flex:0}.ds-popup-panel-title-wrapper{font-weight:500;font-size:var(--ds-font-size);line-height:var(--ds-line-height);color:var(--ds-color-text)}.ds-popup-panel-footer{border-top:1px solid var(--ds-color-split);margin-top:0;padding:calc(var(--ds-popup-panel-padding) / 2) var(--ds-popup-panel-padding);flex:0}.ds-popup-panel-content{display:flex;flex-direction:column;flex:1;overflow:auto}.ds-popup-panel-content .ds-popup-panel-content-inner{flex:1;padding:var(--ds-popup-panel-padding)}}
+@layer components{.ds-popup-panel-root{z-index:var(--ds-z-index-popover)}.ds-popup-panel{box-shadow:var(--ds-box-shadow-secondary);border-radius:var(--ds-border-radius);background:var(--ds-color-bg-elevated);list-style:none;color:var(--ds-color-text);font-size:var(--ds-font-size);font-family:var(--ds-font-family);transition-property:transform,scale,opacity;transition-duration:.2s;transition-timing-function:var(--ds-motion-ease-out);transform-origin:var(--transform-origin);width:min(var(--size-width),var(--available-width));max-width:var(--available-width);max-height:var(--available-height);height:max-content;display:flex;flex-direction:column}.ds-popup-panel[data-ending-style],.ds-popup-panel[data-starting-style]{transform:scale(.9);opacity:0}.ds-popup-panel:focus{outline:none}.ds-popup-panel-header{border-bottom:1px solid var(--ds-color-split);margin-bottom:0;padding:calc(var(--ds-popup-panel-padding) / 2) var(--ds-popup-panel-padding);flex:0}.ds-popup-panel-title-wrapper{font-weight:500;font-size:var(--ds-font-size);line-height:var(--ds-line-height);color:var(--ds-color-text)}.ds-popup-panel-footer{border-top:1px solid var(--ds-color-split);margin-top:0;padding:calc(var(--ds-popup-panel-padding) / 2) var(--ds-popup-panel-padding);flex:0}.ds-popup-panel-content{display:flex;flex-direction:column;flex:1;overflow:auto}.ds-popup-panel-content .ds-popup-panel-content-inner{flex:1;padding:var(--ds-popup-panel-padding)}}

package/dist/components/resizable/component.js

@@ -1,77 +1,94 @@
 "use client";
 import { jsx as n } from "react/jsx-runtime";
-import U, { useState as R, useCallback as X, useEffect as W, isValidElement as Y } from "react";
-import { useResizable as Z } from "react-use-resizable";
-import K from "merge-refs";
-import { mergeProps as A } from "@base-ui-components/react";
+import N, { useState as R, useCallback as ee, useEffect as I, isValidElement as te } from "react";
+import { useResizable as re } from "react-use-resizable";
+import oe from "merge-refs";
+import { mergeProps as ie } from "@base-ui-components/react";
 import './style.css';/* empty css          */
 import { getReactElementProp as x } from "../utils/reactElement.js";
-import { useCls as s } from "../utils/antdUtils.js";
-import { clsx as h, cn as a } from "../utils/cn.js";
-import { WithRenderProp as N } from "../utils/WithRenderProp.js";
-const ue = ({
+import { useCls as ne } from "../utils/antdUtils.js";
+import { clsx as h, cn as le } from "../utils/cn.js";
+import { WithRenderProp as fe } from "../utils/WithRenderProp.js";
+const ye = ({
   children: p,
   resizable: c = !1,
-  handles: o = { bottom: !0, right: !0, left: !0, top: !0 },
+  handles: i = { bottom: !0, right: !0, left: !0, top: !0 },
   absolutePositioning: V = !1,
   classNames: t,
-  className: m,
-  style: I,
-  resetKey: B,
-  maxWidth: _,
-  maxHeight: $,
-  minWidth: j,
-  minHeight: q,
-  onResize: F,
-  maintainAspectRatio: r = !1,
-  ...G
+  className: _,
+  style: $,
+  resetKey: W,
+  // Use Resizable Props
+  maxHeight: j,
+  maxWidth: q,
+  minHeight: F,
+  minWidth: G,
+  lockHorizontal: J,
+  lockVertical: L,
+  onResize: M,
+  onDragEnd: B,
+  onDragStart: D,
+  disabled: O,
+  maintainAspectRatio: o = !1,
+  interval: Q,
+  initialHeight: T,
+  initialWidth: U,
+  // other With Render Props
+  ...X
 }) => {
-  const l = s(), [u, J] = R(null), [b, v] = R(), [H, y] = R(), [P, D] = R(!1), L = X(
+  const l = ne(), [u, Y] = R(null), [b, H] = R(), [v, y] = R(), [w, S] = R(!1), Z = ee(
     (e) => {
-      if (J(e), e && !b && !H) {
-        const i = e.getBoundingClientRect();
-        i.width > 0 && i.height > 0 && r && (v(i.width), y(i.height));
+      if (Y(e), e && !b && !v) {
+        const r = e.getBoundingClientRect();
+        r.width > 0 && r.height > 0 && o && (H(r.width), y(r.height));
       }
     },
-    [b, H, r]
+    [b, v, o]
   );
-  W(() => {
-    if (B !== void 0 && u) {
+  I(() => {
+    if (W !== void 0 && u) {
       u.style.width = "", u.style.height = "";
       const e = u.getBoundingClientRect();
-      e.width > 0 && e.height > 0 && (r ? (v(e.width), y(e.height)) : (v(void 0), y(void 0)));
+      e.width > 0 && e.height > 0 && (o ? (H(e.width), y(e.height)) : (H(void 0), y(void 0)));
     }
-  }, [B, u, r]);
-  const w = Z({
-    initialWidth: r ? b : void 0,
-    initialHeight: r ? H : void 0,
-    maxWidth: _,
-    maxHeight: $,
-    minWidth: j,
-    minHeight: q,
-    onResize: F,
-    maintainAspectRatio: r,
-    onDragStart: () => {
-      if (D(!0), u) {
-        const e = u.getBoundingClientRect();
-        e.width > 0 && !b && v(e.width), e.height > 0 && !H && y(e.height);
+  }, [W, u, o]);
+  const P = re({
+    initialWidth: o ? b : U,
+    initialHeight: o ? v : T,
+    maxHeight: j,
+    maxWidth: q,
+    minHeight: F,
+    minWidth: G,
+    lockHorizontal: J,
+    lockVertical: L,
+    onResize: M,
+    disabled: O,
+    maintainAspectRatio: o,
+    interval: Q,
+    onDragStart: (e) => {
+      if (S(!0), u) {
+        const r = u.getBoundingClientRect();
+        r.width > 0 && !b && H(r.width), r.height > 0 && !v && y(r.height);
       }
+      D && D(e);
     },
-    onDragEnd: () => D(!1)
-  }), S = Y(p);
-  W(() => {
-    P ? document.body.style.userSelect = "none" : document.body.style.userSelect = "";
-  }, [P]);
-  const { ref: M, ...O } = w.getRootProps(), d = w.getHandleProps, g = w.rootRef, C = (e, i) => {
+    onDragEnd: (e) => {
+      S(!1), B && B(e);
+    }
+  }), m = te(p);
+  I(() => {
+    w ? document.body.style.userSelect = "none" : document.body.style.userSelect = "";
+  }, [w]);
+  const { ref: K, ...A } = P.getRootProps(), f = P.getHandleProps, g = P.rootRef, C = (e, r) => {
     if (!e.current || !V) return;
-    const { widthDiff: E } = i;
+    const { widthDiff: E } = r;
     e.current.style.left = `${parseInt(e.current.style.left || "0") - E}px`;
-  }, k = (e, i) => {
+  }, k = (e, r) => {
     if (!e.current || !V) return;
-    const { heightDiff: E } = i;
+    const { heightDiff: E } = r;
     e.current.style.top = `${parseInt(e.current.style.top || "0") - E}px`;
-  }, Q = c ? [
-    o.top && !r && /* @__PURE__ */ n(
+  }, s = c ? [
+    i.top && !o && /* @__PURE__ */ n(
       "div",
       {
         className: h(
@@ -79,7 +96,7 @@ const ue = ({
           t == null ? void 0 : t.resizeHandle
         ),
         "data-placement": "top-center",
-        ...d({
+        ...f({
           reverse: !0,
           lockHorizontal: !0,
           onResize: (e) => k(g, e)
@@ -87,7 +104,7 @@ const ue = ({
       },
       "top"
     ),
-    o.bottom && !r && /* @__PURE__ */ n(
+    i.bottom && !o && /* @__PURE__ */ n(
       "div",
       {
         className: h(
@@ -95,13 +112,13 @@ const ue = ({
           t == null ? void 0 : t.resizeHandle
         ),
         "data-placement": "bottom-left",
-        ...d({
+        ...f({
           lockHorizontal: !0
         })
       },
       "bottom"
     ),
-    o.left && !r && /* @__PURE__ */ n(
+    i.left && !o && /* @__PURE__ */ n(
       "div",
       {
         className: h(
@@ -109,7 +126,7 @@ const ue = ({
           t == null ? void 0 : t.resizeHandle
         ),
         "data-placement": "top-left",
-        ...d({
+        ...f({
           reverse: !0,
           lockVertical: !0,
           onResize: (e) => C(g, e)
@@ -117,7 +134,7 @@ const ue = ({
       },
       "left"
     ),
-    o.right && !r && /* @__PURE__ */ n(
+    i.right && !o && /* @__PURE__ */ n(
       "div",
       {
         className: h(
@@ -125,14 +142,14 @@ const ue = ({
           t == null ? void 0 : t.resizeHandle
         ),
         "data-placement": "top-right",
-        ...d({
+        ...f({
           lockVertical: !0
         })
       },
       "right"
     ),
     // For aspect ratio maintenance, add corner handles that can resize both dimensions
-    o.right && o.bottom && /* @__PURE__ */ n(
+    i.right && i.bottom && /* @__PURE__ */ n(
       "div",
       {
         className: h(
@@ -140,13 +157,13 @@ const ue = ({
           t == null ? void 0 : t.resizeHandle
         ),
         "data-placement": "bottom-right-corner",
-        ...d({
+        ...f({
           // No locks - allow both horizontal and vertical resizing
         })
       },
       "bottom-right-corner"
     ),
-    r && o.left && o.bottom && /* @__PURE__ */ n(
+    o && i.left && i.bottom && /* @__PURE__ */ n(
       "div",
       {
         className: h(
@@ -154,14 +171,14 @@ const ue = ({
           t == null ? void 0 : t.resizeHandle
         ),
         "data-placement": "bottom-left-corner",
-        ...d({
+        ...f({
           reverse: !0,
           onResize: (e) => C(g, e)
         })
       },
       "bottom-left-corner"
     ),
-    r && o.right && o.top && /* @__PURE__ */ n(
+    o && i.right && i.top && /* @__PURE__ */ n(
       "div",
       {
         className: h(
@@ -169,14 +186,14 @@ const ue = ({
           t == null ? void 0 : t.resizeHandle
         ),
         "data-placement": "top-right-corner",
-        ...d({
+        ...f({
           reverse: !0,
           onResize: (e) => k(g, e)
         })
       },
       "top-right-corner"
     ),
-    o.left && o.top && /* @__PURE__ */ n(
+    i.left && i.top && /* @__PURE__ */ n(
       "div",
       {
         className: h(
@@ -184,7 +201,7 @@ const ue = ({
           t == null ? void 0 : t.resizeHandle
         ),
         "data-placement": "top-left-corner",
-        ...d({
+        ...f({
           reverse: !0,
           onResize: (e) => {
             C(g, e), k(g, e);
@@ -193,48 +210,48 @@ const ue = ({
       },
       "top-left-corner"
     )
-  ] : [], f = p, z = {
-    className: x(f, "className"),
-    style: x(f, "style"),
-    children: x(f, "children"),
-    ref: f.ref
-  }, T = {
-    className: a(
+  ] : [], d = p, z = {
+    className: x(d, "className"),
+    style: x(d, "style"),
+    children: x(d, "children"),
+    ref: d.ref
+  }, a = {
+    className: le(
       c && l("resizable"),
       t == null ? void 0 : t.root,
       z.className,
-      m
+      _
     ),
-    ref: K(
-      c ? M : void 0,
-      L,
+    ref: oe(
+      c ? K : void 0,
+      Z,
       // Always need this for dimension measurement
-      f == null ? void 0 : f.ref
+      d == null ? void 0 : d.ref
     ),
-    style: { ...z.style, ...I },
-    ...P ? { "data-resizing": !0 } : {},
+    style: { ...z.style, ...$ },
+    ...w ? { "data-resizing": !0 } : {},
     ...c ? { "data-resizable": !0 } : {},
-    children: S ? [
+    children: m ? [
       ...Array.isArray(z.children) ? z.children : [z.children],
-      ...Q.filter(Boolean)
+      ...s.filter(Boolean)
     ] : p
   };
   return /* @__PURE__ */ n(
-    N,
+    fe,
     {
       render: (e) => {
-        const i = A(
+        const r = ie(
           e,
-          T,
-          c ? O : {}
+          a,
+          c ? A : {}
         );
-        return S ? U.cloneElement(f, i) : /* @__PURE__ */ n("div", { ...i, children: p });
+        return m ? N.cloneElement(d, r) : /* @__PURE__ */ n("div", { ...r, children: p });
       },
-      ...G
+      ...X
     }
   );
 };
 export {
-  ue as Resizable
+  ye as Resizable
 };
 //# sourceMappingURL=component.js.map

package/dist/components/resizable/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/resizable/component.tsx"],"sourcesContent":["\"use client\";\nimport React, { useCallback, useEffect, useState, isValidElement } from \"react\";\nimport { useResizable, type MoveValues } from \"react-use-resizable\";\nimport mergeRefs from \"merge-refs\";\nimport {\n  useCls,\n  clsx,\n  WithRenderProp,\n  WithRenderPropProps,\n  cn,\n  getReactElementProp,\n} from \"../utils\";\nimport { mergeProps } from \"@base-ui-components/react\";\n\nimport \"./style.css\";\n\nexport interface ResizableProps extends WithRenderPropProps {\n  /**\n   * Single React element child that will be enhanced with resize handles\n   */\n  children: React.ReactNode;\n  /**\n   * Whether the component should be resizable\n   * @default false\n   */\n  resizable?: boolean;\n  /**\n   * Configure which resize handles to show\n   * @default { bottom: true, right: true, left: true, top: true }\n   */\n  handles?: {\n    bottom?: boolean;\n    right?: boolean;\n    left?: boolean;\n    top?: boolean;\n  };\n  /**\n   * Whether to use absolute positioning for left handle resizing\n   * Set to true when used in absolutely positioned containers like PopupPanel\n   * @default false\n   */\n  absolutePositioning?: boolean;\n  /**\n   * Custom class names for different parts of the resizable component\n   */\n  classNames?: {\n    root?: string;\n    resizeHandle?: string;\n  };\n  /**\n   * Key to reset dimensions to current element size\n   * When this value changes, the component will recalculate its dimensions\n   * Similar to React's key prop pattern for forcing component resets\n   */\n  resetKey?: React.Key;\n  /**\n   * Maximum width the component can be resized to\n   */\n  maxWidth?: number;\n  /**\n   * Maximum height the component can be resized to\n   */\n  maxHeight?: number;\n  /**\n   * Minimum width the component can be resized to\n   */\n  minWidth?: number;\n  /**\n   * Minimum height the component can be resized to\n   */\n  minHeight?: number;\n  /**\n   * Callback fired during resize operations\n   */\n  onResize?: (values: MoveValues) => void;\n  /**\n   * Whether to maintain aspect ratio during resize\n   * @default false\n   */\n  maintainAspectRatio?: boolean;\n}\n\nexport const Resizable = ({\n  children,\n  resizable = false,\n  handles = { bottom: true, right: true, left: true, top: true },\n  absolutePositioning = false,\n  classNames,\n  className: containerClassName,\n  style: containerStyle,\n  resetKey,\n  maxWidth,\n  maxHeight,\n  minWidth,\n  minHeight,\n  onResize,\n  maintainAspectRatio = false,\n  ...rest\n}: ResizableProps) => {\n  // Validate that children is a single React element\n  // if (!isValidElement(children)) {\n  //   throw new Error(\n  //     \"Resizable component expects a single React element as children\"\n  //   );\n  // }\n\n  const cls = useCls();\n  const [panelRef, setPanelRef] = useState<HTMLDivElement | null>(null);\n  const [width, setWidth] = useState<number>();\n  const [height, setHeight] = useState<number>();\n  const [resizing, setResizing] = useState(false);\n\n  const callbackRef = useCallback(\n    (node: HTMLDivElement) => {\n      setPanelRef(node);\n\n      // Get initial dimensions only once when ref is set\n      // For aspect ratio maintenance, we need initial dimensions immediately\n      // Otherwise, preserve natural width/height behavior\n      if (node && !width && !height) {\n        const rect = node.getBoundingClientRect();\n        if (rect.width > 0 && rect.height > 0) {\n          if (maintainAspectRatio) {\n            // Need dimensions for aspect ratio calculation\n            setWidth(rect.width);\n            setHeight(rect.height);\n          }\n          // For non-aspect-ratio cases, don't set dimensions to preserve natural behavior\n        }\n      }\n    },\n    [width, height, maintainAspectRatio]\n  );\n\n  // Reset dimensions when resetKey changes\n  useEffect(() => {\n    if (resetKey !== undefined && panelRef) {\n      // Clear the hook's inline styles to reset to natural size\n      panelRef.style.width = \"\";\n      panelRef.style.height = \"\";\n\n      // Force a reflow to get natural dimensions\n      const rect = panelRef.getBoundingClientRect();\n\n      if (rect.width > 0 && rect.height > 0) {\n        if (maintainAspectRatio) {\n          // For aspect ratio maintenance, re-measure and set dimensions\n          setWidth(rect.width);\n          setHeight(rect.height);\n        } else {\n          // Reset state to allow natural dimensions again\n          setWidth(undefined);\n          setHeight(undefined);\n        }\n\n        // Don't apply any explicit dimensions - let them remain natural\n        // panelRef.style.width = `${rect.width}px`;\n        // panelRef.style.height = `${rect.height}px`;\n      }\n    }\n  }, [resetKey, panelRef, maintainAspectRatio]);\n\n  // Initialize useResizable with current dimensions (or undefined if not ready)\n  // For aspect ratio maintenance, we need initial dimensions\n  // Otherwise, preserve natural width/height behavior until user starts resizing\n  const resizableHook = useResizable({\n    initialWidth: maintainAspectRatio ? width : undefined,\n    initialHeight: maintainAspectRatio ? height : undefined,\n    maxWidth,\n    maxHeight,\n    minWidth,\n    minHeight,\n    onResize,\n    maintainAspectRatio,\n    onDragStart: () => {\n      setResizing(true);\n      // Capture natural dimensions when user starts resizing\n      if (panelRef) {\n        const rect = panelRef.getBoundingClientRect();\n        if (rect.width > 0 && !width) {\n          setWidth(rect.width);\n        }\n        if (rect.height > 0 && !height) {\n          setHeight(rect.height);\n        }\n      }\n    },\n    onDragEnd: () => setResizing(false),\n  });\n\n  const isChildrenValidElement = isValidElement(children);\n\n  useEffect(() => {\n    if (resizing) {\n      document.body.style.userSelect = \"none\";\n    } else {\n      document.body.style.userSelect = \"\";\n    }\n  }, [resizing]);\n\n  // Get resizable props - useResizable hook handles cases where dimensions aren't ready\n  const { ref: rootRefProp, ...rootPropsWithoutRef } =\n    resizableHook.getRootProps();\n  const getHandleProps = resizableHook.getHandleProps;\n  const rootRef = resizableHook.rootRef;\n\n  // Handle reverse handle change for horizontal resizing (only for absolute positioning)\n  const onReverseHandleChangeHorizontal = (\n    parent: React.RefObject<HTMLDivElement>,\n    values: MoveValues\n  ) => {\n    if (!parent.current || !absolutePositioning) return;\n    const { widthDiff } = values;\n    parent.current.style.left = `${\n      parseInt(parent.current.style.left || \"0\") - widthDiff\n    }px`;\n  };\n\n  // Handle reverse handle change for vertical resizing (only for absolute positioning)\n  const onReverseHandleChangeVertical = (\n    parent: React.RefObject<HTMLDivElement>,\n    values: MoveValues\n  ) => {\n    if (!parent.current || !absolutePositioning) return;\n    const { heightDiff } = values;\n    parent.current.style.top = `${\n      parseInt(parent.current.style.top || \"0\") - heightDiff\n    }px`;\n  };\n\n  const resizeHandles = resizable\n    ? [\n        handles.top && !maintainAspectRatio && (\n          <div\n            key=\"top\"\n            className={clsx(\n              cls(\"resizable-resize-handle\"),\n              classNames?.resizeHandle\n            )}\n            data-placement=\"top-center\"\n            {...getHandleProps({\n              reverse: true,\n              lockHorizontal: true,\n              onResize: (values) =>\n                onReverseHandleChangeVertical(rootRef, values),\n            })}\n          />\n        ),\n        handles.bottom && !maintainAspectRatio && (\n          <div\n            key=\"bottom\"\n            className={clsx(\n              cls(\"resizable-resize-handle\"),\n              classNames?.resizeHandle\n            )}\n            data-placement=\"bottom-left\"\n            {...getHandleProps({\n              lockHorizontal: true,\n            })}\n          />\n        ),\n        handles.left && !maintainAspectRatio && (\n          <div\n            key=\"left\"\n            className={clsx(\n              cls(\"resizable-resize-handle\"),\n              classNames?.resizeHandle\n            )}\n            data-placement=\"top-left\"\n            {...getHandleProps({\n              reverse: true,\n              lockVertical: true,\n              onResize: (values) =>\n                onReverseHandleChangeHorizontal(rootRef, values),\n            })}\n          />\n        ),\n        handles.right && !maintainAspectRatio && (\n          <div\n            key=\"right\"\n            className={clsx(\n              cls(\"resizable-resize-handle\"),\n              classNames?.resizeHandle\n            )}\n            data-placement=\"top-right\"\n            {...getHandleProps({\n              lockVertical: true,\n            })}\n          />\n        ),\n        // For aspect ratio maintenance, add corner handles that can resize both dimensions\n        handles.right && handles.bottom && (\n          <div\n            key=\"bottom-right-corner\"\n            className={clsx(\n              cls(\"resizable-resize-handle\"),\n              classNames?.resizeHandle\n            )}\n            data-placement=\"bottom-right-corner\"\n            {...getHandleProps({\n              // No locks - allow both horizontal and vertical resizing\n            })}\n          />\n        ),\n        maintainAspectRatio && handles.left && handles.bottom && (\n          <div\n            key=\"bottom-left-corner\"\n            className={clsx(\n              cls(\"resizable-resize-handle\"),\n              classNames?.resizeHandle\n            )}\n            data-placement=\"bottom-left-corner\"\n            {...getHandleProps({\n              reverse: true,\n              onResize: (values) =>\n                onReverseHandleChangeHorizontal(rootRef, values),\n            })}\n          />\n        ),\n        maintainAspectRatio && handles.right && handles.top && (\n          <div\n            key=\"top-right-corner\"\n            className={clsx(\n              cls(\"resizable-resize-handle\"),\n              classNames?.resizeHandle\n            )}\n            data-placement=\"top-right-corner\"\n            {...getHandleProps({\n              reverse: true,\n              onResize: (values) =>\n                onReverseHandleChangeVertical(rootRef, values),\n            })}\n          />\n        ),\n        handles.left && handles.top && (\n          <div\n            key=\"top-left-corner\"\n            className={clsx(\n              cls(\"resizable-resize-handle\"),\n              classNames?.resizeHandle\n            )}\n            data-placement=\"top-left-corner\"\n            {...getHandleProps({\n              reverse: true,\n              onResize: (values) => {\n                onReverseHandleChangeHorizontal(rootRef, values);\n                onReverseHandleChangeVertical(rootRef, values);\n              },\n            })}\n          />\n        ),\n      ]\n    : [];\n\n  const childElement = children as React.ReactElement & {\n    ref?: React.Ref<HTMLDivElement>;\n  };\n\n  const childElementProps = {\n    className: getReactElementProp<string>(childElement, \"className\"),\n    style: getReactElementProp<React.CSSProperties>(childElement, \"style\"),\n    children: getReactElementProp<React.ReactNode>(childElement, \"children\"),\n    ref: childElement.ref,\n  };\n\n  const childProps = {\n    className: cn(\n      resizable && cls(\"resizable\"),\n      classNames?.root,\n      childElementProps.className,\n      containerClassName\n    ),\n    ref: mergeRefs(\n      resizable ? rootRefProp : undefined,\n      callbackRef, // Always need this for dimension measurement\n      childElement?.ref\n    ),\n    style: { ...childElementProps.style, ...containerStyle },\n    ...(resizing ? { \"data-resizing\": true } : {}),\n    ...(resizable ? { \"data-resizable\": true } : {}),\n    children: isChildrenValidElement\n      ? [\n          ...(Array.isArray(childElementProps.children)\n            ? childElementProps.children\n            : [childElementProps.children]),\n          ...resizeHandles.filter(Boolean),\n        ]\n      : children,\n  };\n\n  return (\n    <WithRenderProp\n      render={(props) => {\n        // Merge the props from WithRenderProp with our childProps\n        const mergedProps = mergeProps(\n          props,\n          childProps,\n          resizable ? rootPropsWithoutRef : {}\n        );\n        if (isChildrenValidElement) {\n          return React.cloneElement(childElement, mergedProps);\n        } else {\n          return <div {...mergedProps}>{children}</div>;\n        }\n      }}\n      {...rest}\n    />\n  );\n};\n"],"names":["Resizable","children","resizable","handles","absolutePositioning","classNames","containerClassName","containerStyle","resetKey","maxWidth","maxHeight","minWidth","minHeight","onResize","maintainAspectRatio","rest","cls","useCls","panelRef","setPanelRef","useState","width","setWidth","height","setHeight","resizing","setResizing","callbackRef","useCallback","node","rect","useEffect","resizableHook","useResizable","isChildrenValidElement","isValidElement","rootRefProp","rootPropsWithoutRef","getHandleProps","rootRef","onReverseHandleChangeHorizontal","parent","values","widthDiff","onReverseHandleChangeVertical","heightDiff","resizeHandles","jsx","clsx","childElement","childElementProps","getReactElementProp","childProps","cn","mergeRefs","WithRenderProp","props","mergedProps","mergeProps","React"],"mappings":"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"}
+{"version":3,"file":"component.js","sources":["../../../src/components/resizable/component.tsx"],"sourcesContent":["\"use client\";\nimport React, { useCallback, useEffect, useState, isValidElement } from \"react\";\nimport {\n  useResizable,\n  type MoveValues,\n  ResizableProps as UseResizableProps,\n} from \"react-use-resizable\";\nimport mergeRefs from \"merge-refs\";\nimport {\n  useCls,\n  clsx,\n  WithRenderProp,\n  WithRenderPropProps,\n  cn,\n  getReactElementProp,\n} from \"../utils\";\nimport { mergeProps } from \"@base-ui-components/react\";\n\nimport \"./style.css\";\nimport { on } from \"node:stream\";\n\nexport interface ResizableProps\n  extends Omit<WithRenderPropProps, keyof UseResizableProps>,\n    UseResizableProps {\n  /**\n   * Single React element child that will be enhanced with resize handles\n   */\n  children: React.ReactNode;\n  /**\n   * Whether the component should be resizable\n   * @default false\n   */\n  resizable?: boolean;\n  /**\n   * Configure which resize handles to show\n   * @default { bottom: true, right: true, left: true, top: true }\n   */\n  handles?: {\n    bottom?: boolean;\n    right?: boolean;\n    left?: boolean;\n    top?: boolean;\n  };\n  /**\n   * Whether to use absolute positioning for left handle resizing\n   * Set to true when used in absolutely positioned containers like PopupPanel\n   * @default false\n   */\n  absolutePositioning?: boolean;\n  /**\n   * Custom class names for different parts of the resizable component\n   */\n  classNames?: {\n    root?: string;\n    resizeHandle?: string;\n  };\n  /**\n   * Key to reset dimensions to current element size\n   * When this value changes, the component will recalculate its dimensions\n   * Similar to React's key prop pattern for forcing component resets\n   */\n  resetKey?: React.Key;\n  /**\n   * Maximum width the component can be resized to\n   */\n  maxWidth?: number;\n  /**\n   * Maximum height the component can be resized to\n   */\n  maxHeight?: number;\n  /**\n   * Minimum width the component can be resized to\n   */\n  minWidth?: number;\n  /**\n   * Minimum height the component can be resized to\n   */\n  minHeight?: number;\n  /**\n   * Callback fired during resize operations\n   */\n  onResize?: (values: MoveValues) => void;\n  /**\n   * Whether to maintain aspect ratio during resize\n   * @default false\n   */\n  maintainAspectRatio?: boolean;\n}\n\nexport const Resizable = ({\n  children,\n  resizable = false,\n  handles = { bottom: true, right: true, left: true, top: true },\n  absolutePositioning = false,\n  classNames,\n  className: containerClassName,\n  style: containerStyle,\n  resetKey,\n\n  // Use Resizable Props\n  maxHeight,\n  maxWidth,\n  minHeight,\n  minWidth,\n  lockHorizontal,\n  lockVertical,\n  onResize,\n  onDragEnd: onDragEndProp,\n  onDragStart: onDragStartProp,\n  disabled,\n  maintainAspectRatio = false,\n  interval,\n  initialHeight: initialHeightProp,\n  initialWidth: initialWidthProp,\n  // other With Render Props\n  ...rest\n}: ResizableProps) => {\n  // Validate that children is a single React element\n  // if (!isValidElement(children)) {\n  //   throw new Error(\n  //     \"Resizable component expects a single React element as children\"\n  //   );\n  // }\n\n  const cls = useCls();\n  const [panelRef, setPanelRef] = useState<HTMLDivElement | null>(null);\n  const [width, setWidth] = useState<number>();\n  const [height, setHeight] = useState<number>();\n  const [resizing, setResizing] = useState(false);\n\n  const callbackRef = useCallback(\n    (node: HTMLDivElement) => {\n      setPanelRef(node);\n\n      // Get initial dimensions only once when ref is set\n      // For aspect ratio maintenance, we need initial dimensions immediately\n      // Otherwise, preserve natural width/height behavior\n      if (node && !width && !height) {\n        const rect = node.getBoundingClientRect();\n        if (rect.width > 0 && rect.height > 0) {\n          if (maintainAspectRatio) {\n            // Need dimensions for aspect ratio calculation\n            setWidth(rect.width);\n            setHeight(rect.height);\n          }\n          // For non-aspect-ratio cases, don't set dimensions to preserve natural behavior\n        }\n      }\n    },\n    [width, height, maintainAspectRatio],\n  );\n\n  // Reset dimensions when resetKey changes\n  useEffect(() => {\n    if (resetKey !== undefined && panelRef) {\n      // Clear the hook's inline styles to reset to natural size\n      panelRef.style.width = \"\";\n      panelRef.style.height = \"\";\n\n      // Force a reflow to get natural dimensions\n      const rect = panelRef.getBoundingClientRect();\n\n      if (rect.width > 0 && rect.height > 0) {\n        if (maintainAspectRatio) {\n          // For aspect ratio maintenance, re-measure and set dimensions\n          setWidth(rect.width);\n          setHeight(rect.height);\n        } else {\n          // Reset state to allow natural dimensions again\n          setWidth(undefined);\n          setHeight(undefined);\n        }\n\n        // Don't apply any explicit dimensions - let them remain natural\n        // panelRef.style.width = `${rect.width}px`;\n        // panelRef.style.height = `${rect.height}px`;\n      }\n    }\n  }, [resetKey, panelRef, maintainAspectRatio]);\n\n  // Initialize useResizable with current dimensions (or undefined if not ready)\n  // For aspect ratio maintenance, we need initial dimensions\n  // Otherwise, preserve natural width/height behavior until user starts resizing\n  const resizableHook = useResizable({\n    initialWidth: maintainAspectRatio ? width : initialWidthProp,\n    initialHeight: maintainAspectRatio ? height : initialHeightProp,\n    maxHeight,\n    maxWidth,\n    minHeight,\n    minWidth,\n    lockHorizontal,\n    lockVertical,\n    onResize,\n    disabled,\n    maintainAspectRatio,\n    interval,\n    onDragStart: (values) => {\n      setResizing(true);\n      // Capture natural dimensions when user starts resizing\n      if (panelRef) {\n        const rect = panelRef.getBoundingClientRect();\n        if (rect.width > 0 && !width) {\n          setWidth(rect.width);\n        }\n        if (rect.height > 0 && !height) {\n          setHeight(rect.height);\n        }\n      }\n      if (onDragStartProp) onDragStartProp(values);\n    },\n    onDragEnd: (values) => {\n      setResizing(false);\n      if (onDragEndProp) onDragEndProp(values);\n    },\n  });\n\n  const isChildrenValidElement = isValidElement(children);\n\n  useEffect(() => {\n    if (resizing) {\n      document.body.style.userSelect = \"none\";\n    } else {\n      document.body.style.userSelect = \"\";\n    }\n  }, [resizing]);\n\n  // Get resizable props - useResizable hook handles cases where dimensions aren't ready\n  const { ref: rootRefProp, ...rootPropsWithoutRef } =\n    resizableHook.getRootProps();\n  const getHandleProps = resizableHook.getHandleProps;\n  const rootRef = resizableHook.rootRef;\n\n  // Handle reverse handle change for horizontal resizing (only for absolute positioning)\n  const onReverseHandleChangeHorizontal = (\n    parent: React.RefObject<HTMLDivElement>,\n    values: MoveValues,\n  ) => {\n    if (!parent.current || !absolutePositioning) return;\n    const { widthDiff } = values;\n    parent.current.style.left = `${\n      parseInt(parent.current.style.left || \"0\") - widthDiff\n    }px`;\n  };\n\n  // Handle reverse handle change for vertical resizing (only for absolute positioning)\n  const onReverseHandleChangeVertical = (\n    parent: React.RefObject<HTMLDivElement>,\n    values: MoveValues,\n  ) => {\n    if (!parent.current || !absolutePositioning) return;\n    const { heightDiff } = values;\n    parent.current.style.top = `${\n      parseInt(parent.current.style.top || \"0\") - heightDiff\n    }px`;\n  };\n\n  const resizeHandles = resizable\n    ? [\n        handles.top && !maintainAspectRatio && (\n          <div\n            key=\"top\"\n            className={clsx(\n              cls(\"resizable-resize-handle\"),\n              classNames?.resizeHandle,\n            )}\n            data-placement=\"top-center\"\n            {...getHandleProps({\n              reverse: true,\n              lockHorizontal: true,\n              onResize: (values) =>\n                onReverseHandleChangeVertical(rootRef, values),\n            })}\n          />\n        ),\n        handles.bottom && !maintainAspectRatio && (\n          <div\n            key=\"bottom\"\n            className={clsx(\n              cls(\"resizable-resize-handle\"),\n              classNames?.resizeHandle,\n            )}\n            data-placement=\"bottom-left\"\n            {...getHandleProps({\n              lockHorizontal: true,\n            })}\n          />\n        ),\n        handles.left && !maintainAspectRatio && (\n          <div\n            key=\"left\"\n            className={clsx(\n              cls(\"resizable-resize-handle\"),\n              classNames?.resizeHandle,\n            )}\n            data-placement=\"top-left\"\n            {...getHandleProps({\n              reverse: true,\n              lockVertical: true,\n              onResize: (values) =>\n                onReverseHandleChangeHorizontal(rootRef, values),\n            })}\n          />\n        ),\n        handles.right && !maintainAspectRatio && (\n          <div\n            key=\"right\"\n            className={clsx(\n              cls(\"resizable-resize-handle\"),\n              classNames?.resizeHandle,\n            )}\n            data-placement=\"top-right\"\n            {...getHandleProps({\n              lockVertical: true,\n            })}\n          />\n        ),\n        // For aspect ratio maintenance, add corner handles that can resize both dimensions\n        handles.right && handles.bottom && (\n          <div\n            key=\"bottom-right-corner\"\n            className={clsx(\n              cls(\"resizable-resize-handle\"),\n              classNames?.resizeHandle,\n            )}\n            data-placement=\"bottom-right-corner\"\n            {...getHandleProps({\n              // No locks - allow both horizontal and vertical resizing\n            })}\n          />\n        ),\n        maintainAspectRatio && handles.left && handles.bottom && (\n          <div\n            key=\"bottom-left-corner\"\n            className={clsx(\n              cls(\"resizable-resize-handle\"),\n              classNames?.resizeHandle,\n            )}\n            data-placement=\"bottom-left-corner\"\n            {...getHandleProps({\n              reverse: true,\n              onResize: (values) =>\n                onReverseHandleChangeHorizontal(rootRef, values),\n            })}\n          />\n        ),\n        maintainAspectRatio && handles.right && handles.top && (\n          <div\n            key=\"top-right-corner\"\n            className={clsx(\n              cls(\"resizable-resize-handle\"),\n              classNames?.resizeHandle,\n            )}\n            data-placement=\"top-right-corner\"\n            {...getHandleProps({\n              reverse: true,\n              onResize: (values) =>\n                onReverseHandleChangeVertical(rootRef, values),\n            })}\n          />\n        ),\n        handles.left && handles.top && (\n          <div\n            key=\"top-left-corner\"\n            className={clsx(\n              cls(\"resizable-resize-handle\"),\n              classNames?.resizeHandle,\n            )}\n            data-placement=\"top-left-corner\"\n            {...getHandleProps({\n              reverse: true,\n              onResize: (values) => {\n                onReverseHandleChangeHorizontal(rootRef, values);\n                onReverseHandleChangeVertical(rootRef, values);\n              },\n            })}\n          />\n        ),\n      ]\n    : [];\n\n  const childElement = children as React.ReactElement & {\n    ref?: React.Ref<HTMLDivElement>;\n  };\n\n  const childElementProps = {\n    className: getReactElementProp<string>(childElement, \"className\"),\n    style: getReactElementProp<React.CSSProperties>(childElement, \"style\"),\n    children: getReactElementProp<React.ReactNode>(childElement, \"children\"),\n    ref: childElement.ref,\n  };\n\n  const childProps = {\n    className: cn(\n      resizable && cls(\"resizable\"),\n      classNames?.root,\n      childElementProps.className,\n      containerClassName,\n    ),\n    ref: mergeRefs(\n      resizable ? rootRefProp : undefined,\n      callbackRef, // Always need this for dimension measurement\n      childElement?.ref,\n    ),\n    style: { ...childElementProps.style, ...containerStyle },\n    ...(resizing ? { \"data-resizing\": true } : {}),\n    ...(resizable ? { \"data-resizable\": true } : {}),\n    children: isChildrenValidElement\n      ? [\n          ...(Array.isArray(childElementProps.children)\n            ? childElementProps.children\n            : [childElementProps.children]),\n          ...resizeHandles.filter(Boolean),\n        ]\n      : children,\n  };\n\n  return (\n    <WithRenderProp\n      render={(props) => {\n        // Merge the props from WithRenderProp with our childProps\n        const mergedProps = mergeProps(\n          props,\n          childProps,\n          resizable ? rootPropsWithoutRef : {},\n        );\n        if (isChildrenValidElement) {\n          return React.cloneElement(childElement, mergedProps);\n        } else {\n          return <div {...mergedProps}>{children}</div>;\n        }\n      }}\n      {...rest}\n    />\n  );\n};\n"],"names":["Resizable","children","resizable","handles","absolutePositioning","classNames","containerClassName","containerStyle","resetKey","maxHeight","maxWidth","minHeight","minWidth","lockHorizontal","lockVertical","onResize","onDragEndProp","onDragStartProp","disabled","maintainAspectRatio","interval","initialHeightProp","initialWidthProp","rest","cls","useCls","panelRef","setPanelRef","useState","width","setWidth","height","setHeight","resizing","setResizing","callbackRef","useCallback","node","rect","useEffect","resizableHook","useResizable","values","isChildrenValidElement","isValidElement","rootRefProp","rootPropsWithoutRef","getHandleProps","rootRef","onReverseHandleChangeHorizontal","parent","widthDiff","onReverseHandleChangeVertical","heightDiff","resizeHandles","jsx","clsx","childElement","childElementProps","getReactElementProp","childProps","cn","mergeRefs","WithRenderProp","props","mergedProps","mergeProps","React"],"mappings":"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"}

package/dist/components/theme-provider/style.css

@@ -1 +1 @@
-@layer components{@keyframes ds-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ds-theme-provider{--ds-modal-padding: 24px;--ds-modal-edge-padding: 16px;--ds-popup-panel-padding: 16px;--ds-scrollbar-width: auto;--ds-scrollbar-width-legacy: 15;--ds-box-shadow-popover-arrow: 0px 0px 1px 0px var(--ds-modal-color-border), 2px 2px 5px rgba(0, 0, 0, .05);--ds-control-border-radius: 6px;--ds-control-transition: all .2s;--ds-control-padding-small: 1px 8px;--ds-control-padding-middle: 5px 12px;--ds-control-padding-large: 9px 12px;--ds-control-min-height-small: 24px;--ds-control-min-height-middle: 32px;--ds-control-min-height-large: 40px;--ds-control-line-height: 20px;--ds-control-color-border-hover: var(--ds-color-primary-hover);--ds-control-color-border-focus: var(--ds-color-primary);--ds-control-color-bg-disabled: var(--ds-color-bg-container-disabled);--ds-control-color-text-disabled: var(--ds-color-text-disabled);--ds-control-icon-size: 12px;--ds-control-color-bg: var(--ds-color-bg-container);--ds-control-color-border: var(--ds-color-border);--ds-control-color-border-active: var(--ds-color-primary);--ds-control-color-border-error-active: var(--ds-color-error);--ds-control-color-border-warning-active: var(--ds-color-warning);--ds-control-color-icon: var(--ds-color-text-quaternary);--ds-control-color-icon-hover: var(--ds-color-icon-hover);--ds-control-border: 1px solid var(--ds-control-color-border);--ds-control-border-active: 1px solid var(--ds-control-color-border-active);--ds-control-border-error-active: 1px solid var(--ds-control-color-border-error-active);--ds-control-border-warning-active: 1px solid var(--ds-control-color-border-warning-active);--ds-control-shadow-active: 0 0 0 2px color-mix(in oklab, var(--ds-color-primary) 20%, transparent);--ds-form-label-required-mark-color: var(--ds-color-error);--ds-control-shadow-error-active: 0 0 0 2px color-mix(in oklab, var(--ds-color-error) 20%, transparent);--ds-control-shadow-warning-active: 0 0 0 2px color-mix(in oklab, var(--ds-color-warning) 20%, transparent);--ds-control-color-text-placeholder: var(--ds-color-text-placeholder);--ds-inter: "Inter", Helvetica, Arial, sans-serif;--ds-roboto-mono: "Roboto Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--ds-animate-spin: ds-spin 1s linear infinite;--ds-segment-color-bg-active: #ffffff;--ds-scrollbar-color-thumb: rgba(0, 0, 0, .2);--ds-scrollbar-color-track: rgba(0, 0, 0, 0);--ds-color-base-solid: #000000;--ds-color-table-fixed-column-shadow: rgb(0 0 0 / 10%);--ds-modal-color-border: rgba(0, 0, 0, .24)}@supports (font-variation-settings: normal){.ds-theme-provider{--ds-inter: "InterVariable", Inter, Helvetica, Arial, sans-serif;--ds-roboto-mono: "Roboto Mono Variable", Roboto Mono, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-optical-sizing:auto}}.ds-theme-provider.dark{--ds-modal-color-border: rgba(255, 255, 255, .55);--ds-segment-color-bg-active: #424248;--ds-scrollbar-color-thumb: rgba(255, 255, 255, .2);--ds-scrollbar-color-track: rgba(0, 0, 0, 0);--ds-color-base-solid: #ffffff;--ds-color-table-fixed-column-shadow: rgb(0 0 0 / 20%)}}
+@layer components{@keyframes ds-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ds-theme-provider{--ds-modal-padding: 24px;--ds-modal-edge-padding: 16px;--ds-popup-panel-padding: 16px;--ds-scrollbar-width: auto;--ds-scrollbar-width-legacy: 15;--ds-box-shadow-popover-arrow: 0px 0px 1px 0px var(--ds-modal-color-border), 2px 2px 5px rgba(0, 0, 0, .05);--ds-control-border-radius: 6px;--ds-control-transition: all .2s;--ds-control-padding-small: 1px 8px;--ds-control-padding-middle: 5px 12px;--ds-control-padding-large: 9px 12px;--ds-control-min-height-small: 24px;--ds-control-min-height-middle: 32px;--ds-control-min-height-large: 40px;--ds-control-line-height: 20px;--ds-control-color-border-hover: var(--ds-color-primary-hover);--ds-control-color-border-focus: var(--ds-color-primary);--ds-control-color-bg-disabled: var(--ds-color-bg-container-disabled);--ds-control-color-text-disabled: var(--ds-color-text-disabled);--ds-control-icon-size: 12px;--ds-control-color-bg: var(--ds-color-bg-container);--ds-control-color-border: var(--ds-color-border);--ds-control-color-border-active: var(--ds-color-primary);--ds-control-color-border-error-active: var(--ds-color-error);--ds-control-color-border-warning-active: var(--ds-color-warning);--ds-control-color-icon: var(--ds-color-text-quaternary);--ds-control-color-icon-hover: var(--ds-color-icon-hover);--ds-control-border: 1px solid var(--ds-control-color-border);--ds-control-border-active: 1px solid var(--ds-control-color-border-active);--ds-control-border-error-active: 1px solid var(--ds-control-color-border-error-active);--ds-control-border-warning-active: 1px solid var(--ds-control-color-border-warning-active);--ds-control-shadow-active: 0 0 0 2px color-mix(in oklab, var(--ds-color-primary) 20%, transparent);--ds-form-label-required-mark-color: var(--ds-color-error);--ds-control-shadow-error-active: 0 0 0 2px color-mix(in oklab, var(--ds-color-error) 20%, transparent);--ds-control-shadow-warning-active: 0 0 0 2px color-mix(in oklab, var(--ds-color-warning) 20%, transparent);--ds-control-color-text-placeholder: var(--ds-color-text-placeholder);--ds-inter: "Inter", Helvetica, Arial, sans-serif;--ds-roboto-mono: "Roboto Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--ds-animate-spin: ds-spin 1s linear infinite;--ds-z-index-base: 0;--ds-z-index-modal: 1000;--ds-z-index-modal-mask: 1000;--ds-z-index-message: 1010;--ds-z-index-notification: 1010;--ds-z-index-popover: 1030;--ds-z-index-dropdown: 1050;--ds-z-index-picker: 1050;--ds-z-index-popconfirm: 1060;--ds-z-index-tooltip: 1070;--ds-z-index-toast: 2000;--ds-segment-color-bg-active: #ffffff;--ds-scrollbar-color-thumb: rgba(0, 0, 0, .2);--ds-scrollbar-color-track: rgba(0, 0, 0, 0);--ds-color-base-solid: #000000;--ds-color-table-fixed-column-shadow: rgb(0 0 0 / 10%);--ds-modal-color-border: rgba(0, 0, 0, .24)}@supports (font-variation-settings: normal){.ds-theme-provider{--ds-inter: "InterVariable", Inter, Helvetica, Arial, sans-serif;--ds-roboto-mono: "Roboto Mono Variable", Roboto Mono, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-optical-sizing:auto}}.ds-theme-provider.dark{--ds-modal-color-border: rgba(255, 255, 255, .55);--ds-segment-color-bg-active: #424248;--ds-scrollbar-color-thumb: rgba(255, 255, 255, .2);--ds-scrollbar-color-track: rgba(0, 0, 0, 0);--ds-color-base-solid: #ffffff;--ds-color-table-fixed-column-shadow: rgb(0 0 0 / 20%)}}