@bioturing/components 0.15.5 → 0.17.0

package/dist/components/PopupPanel/component.js

@@ -1,165 +1,166 @@
-import { jsx as n, jsxs as i, Fragment as m } from "react/jsx-runtime";
-import { Popover as p } from "@base-ui-components/react/popover";
-import { useState as l, useCallback as k, useEffect as O, useMemo as a } from "react";
-import N from "antd/es/flex";
-import { X as s } from "@bioturing/assets";
-import { PopupPanelSize as ee } from "./constants.js";
-import { useResizable as te } from "react-use-resizable";
+"use client";
+import { jsx as r, jsxs as d, Fragment as a } from "react/jsx-runtime";
+import { Popover as i } from "@base-ui-components/react/popover";
+import { useState as f, useCallback as k, useEffect as C, useMemo as N } from "react";
+import s from "antd/es/flex";
+import { X as ee } from "@bioturing/assets";
+import { PopupPanelSize as te } from "./constants.js";
+import { useResizable as re } from "react-use-resizable";
 import ne from "merge-refs";
 import './style.css';/* empty css          */
-import { useControlledState as re } from "../hooks/useControlledState.js";
-import { useCls as oe, useAntdCssVarClassname as pe, parseAntdPlacement as ie } from "../utils/antdUtils.js";
+import { useControlledState as oe } from "../hooks/useControlledState.js";
+import { useCls as pe, parseAntdPlacement as ie } from "../utils/antdUtils.js";
 import { clsx as o } from "../utils/cn.js";
 import { IconButton as de } from "../IconButton/component.js";
-const be = ({
-  children: S,
-  placement: I,
-  openOnHover: V = !1,
+const we = ({
+  children: O,
+  placement: S,
+  openOnHover: I = !1,
   open: D,
   onOpenChange: W,
   content: j,
-  title: f,
-  trigger: A = "click",
-  className: E,
-  anchor: F,
+  title: h,
+  trigger: E = "click",
+  className: F,
+  anchor: V,
   beforeCloseButton: P,
-  afterCloseButton: C,
-  afterTitle: h,
-  size: g = "medium",
-  footer: d,
+  afterCloseButton: H,
+  afterTitle: g,
+  size: c = "medium",
+  footer: l,
   defaultOpen: $,
-  resizable: M = !1,
-  classNames: e
+  resizable: A = !1,
+  classNames: e,
+  modal: M = !1,
+  closeOnClickOutside: T = !0
 }) => {
-  const [T, H] = re(
+  const [U, y] = oe(
     D,
     W,
     $ ?? !1
     // Always provide a default value to prevent undefined
-  ), t = oe(), y = pe(), b = ie(I), [c, U] = l(null), [X, q] = l(), [G, J] = l(), K = k((r) => {
-    U(r);
+  ), t = pe(), b = ie(S), [v, X] = f(null), [q, G] = f(), [J, K] = f(), L = k((n) => {
+    X(n);
   }, []);
-  O(() => {
-    if (!c) return;
-    const r = new ResizeObserver((R) => {
-      for (const u of R)
-        q(u.contentRect.width), J(u.contentRect.height);
+  C(() => {
+    if (!v) return;
+    const n = new ResizeObserver((u) => {
+      for (const p of u)
+        G(p.contentRect.width), K(p.contentRect.height);
     });
-    return r.observe(c), () => {
-      r.disconnect();
+    return n.observe(v), () => {
+      n.disconnect();
     };
-  }, [c]);
-  const w = a(() => /* @__PURE__ */ n(s, { size: 16 }), []), L = k(() => /* @__PURE__ */ i("div", { className: o(t("popup-panel-header"), e == null ? void 0 : e.header), children: [
-    /* @__PURE__ */ i(
-      N,
+  }, [v]);
+  const w = N(() => /* @__PURE__ */ r(ee, { size: 16 }), []), Q = k(() => /* @__PURE__ */ d("div", { className: o(t("popup-panel-header"), e == null ? void 0 : e.header), children: [
+    /* @__PURE__ */ d(
+      s,
       {
         align: "center",
         gap: 8,
         className: t("popup-panel-title-wrapper"),
         children: [
-          /* @__PURE__ */ n(
-            p.Title,
+          /* @__PURE__ */ r(
+            i.Title,
             {
-              render: /* @__PURE__ */ n("div", { className: o(t("grow", "truncate"), e == null ? void 0 : e.title), children: f })
+              render: /* @__PURE__ */ r("div", { className: o(t("grow", "truncate"), e == null ? void 0 : e.title), children: h })
             }
           ),
-          /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ d("div", { className: "flex items-center gap-2", children: [
             P,
-            /* @__PURE__ */ n(
-              p.Close,
+            /* @__PURE__ */ r(
+              i.Close,
               {
-                render: /* @__PURE__ */ n(de, { children: w })
+                render: /* @__PURE__ */ r(de, { children: w })
               }
             ),
-            C
+            H
           ] })
         ]
       }
     ),
-    h || null
+    g || null
   ] }), [
-    C,
-    h,
+    H,
+    g,
     P,
     t,
     e == null ? void 0 : e.header,
     e == null ? void 0 : e.title,
     w,
-    f
-  ]), [v, x] = l(!1), { getRootProps: Q, getHandleProps: z, rootRef: Y } = te({
-    initialWidth: X,
-    initialHeight: G,
+    h
+  ]), [z, x] = f(!1), { getRootProps: Y, getHandleProps: R, rootRef: Z } = re({
+    initialWidth: q,
+    initialHeight: J,
     onDragStart: () => x(!0),
     onDragEnd: () => x(!1)
   });
-  O(() => {
-    v ? document.body.style.userSelect = "none" : document.body.style.userSelect = "";
-  }, [v]);
-  const { ref: Z, ..._ } = Q(), B = (r, R) => {
-    if (!r.current) return;
-    const { widthDiff: u } = R;
-    r.current.style.left = `${parseInt(r.current.style.left || "0") - u}px`;
+  C(() => {
+    z ? document.body.style.userSelect = "none" : document.body.style.userSelect = "";
+  }, [z]);
+  const { ref: _, ...B } = Y(), m = (n, u) => {
+    if (!n.current) return;
+    const { widthDiff: p } = u;
+    n.current.style.left = `${parseInt(n.current.style.left || "0") - p}px`;
   };
-  return /* @__PURE__ */ i(
-    p.Root,
+  return /* @__PURE__ */ d(
+    i.Root,
     {
-      openOnHover: A === "hover" ? !0 : V,
-      open: T,
-      onOpenChange: H,
+      openOnHover: E === "hover" ? !0 : I,
+      open: U,
+      onOpenChange: (n, u, p) => {
+        p === "outside-press" && !T || y(n, u, p);
+      },
+      modal: M,
       children: [
-        /* @__PURE__ */ n(
-          p.Trigger,
+        /* @__PURE__ */ r(
+          i.Trigger,
           {
-            render: S,
+            render: O,
             className: o(t("popup-panel-trigger"), e == null ? void 0 : e.trigger)
           }
         ),
-        /* @__PURE__ */ n(p.Portal, { children: /* @__PURE__ */ n(
-          p.Positioner,
+        /* @__PURE__ */ r(i.Portal, { children: /* @__PURE__ */ r(
+          i.Positioner,
           {
-            className: o(
-              t("popup-panel-root"),
-              e == null ? void 0 : e.root,
-              y
-            ),
+            className: o(t("popup-panel-root"), e == null ? void 0 : e.root),
             side: b.placement,
             align: b.align,
             sideOffset: 4,
-            anchor: F,
+            anchor: V,
             style: {
-              "--size-width": g ? ee[g] : void 0
+              "--size-width": c ? te[c] : void 0
             },
-            children: /* @__PURE__ */ i(
-              p.Popup,
+            children: /* @__PURE__ */ d(
+              i.Popup,
               {
                 className: o(
                   t("popup-panel"),
-                  t(`popup-panel-size-${g}`),
-                  E,
-                  e == null ? void 0 : e.popup,
-                  y
+                  t(`popup-panel-size-${c}`),
+                  F,
+                  e == null ? void 0 : e.popup
                 ),
-                ref: ne(Z, K),
-                ..._,
-                ...v ? { "data-resizing": !0 } : {},
+                ref: ne(_, L),
+                ...B,
+                ...z ? { "data-resizing": !0 } : {},
                 children: [
-                  f && L(),
-                  /* @__PURE__ */ n(
+                  h && Q(),
+                  /* @__PURE__ */ r(
                     "div",
                     {
                       className: o(t("popup-panel-content"), e == null ? void 0 : e.content),
-                      children: /* @__PURE__ */ n("div", { className: t("popup-panel-content-inner"), children: j })
+                      children: /* @__PURE__ */ r("div", { className: t("popup-panel-content-inner"), children: j })
                     }
                   ),
-                  d && /* @__PURE__ */ n(
+                  l && /* @__PURE__ */ r(
                     "div",
                     {
                       className: o(t("popup-panel-footer"), e == null ? void 0 : e.footer),
-                      children: typeof d == "function" ? d({ close: () => H(!1) }) : d
+                      children: typeof l == "function" ? l({ close: () => y(!1) }) : l
                     }
                   ),
-                  M && /* @__PURE__ */ i(m, { children: [
-                    /* @__PURE__ */ n(
+                  A && /* @__PURE__ */ d(a, { children: [
+                    /* @__PURE__ */ r(
                       "div",
                       {
                         className: o(
@@ -167,12 +168,12 @@ const be = ({
                           e == null ? void 0 : e.resizeHandle
                         ),
                         "data-placement": "bottom-left",
-                        ...z({
+                        ...R({
                           lockHorizontal: !0
                         })
                       }
                     ),
-                    /* @__PURE__ */ n(
+                    /* @__PURE__ */ r(
                       "div",
                       {
                         className: o(
@@ -180,14 +181,14 @@ const be = ({
                           e == null ? void 0 : e.resizeHandle
                         ),
                         "data-placement": "top-left",
-                        ...z({
+                        ...R({
                           reverse: !0,
                           lockVertical: !0,
-                          onResize: (r) => B(Y, r)
+                          onResize: (n) => m(Z, n)
                         })
                       }
                     ),
-                    /* @__PURE__ */ n(
+                    /* @__PURE__ */ r(
                       "div",
                       {
                         className: o(
@@ -195,7 +196,7 @@ const be = ({
                           e == null ? void 0 : e.resizeHandle
                         ),
                         "data-placement": "top-right",
-                        ...z({
+                        ...R({
                           lockVertical: !0
                         })
                       }
@@ -211,6 +212,6 @@ const be = ({
   );
 };
 export {
-  be as PopupPanel
+  we as PopupPanel
 };
 //# sourceMappingURL=component.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/PopupPanel/component.tsx"],"sourcesContent":["\"use client\";\nimport {\n  useCls,\n  clsx,\n  useAntdCssVarClassname,\n  parseAntdPlacement,\n} from \"../utils\";\nimport { Popover } from \"@base-ui-components/react/popover\";\n\nimport { type PopoverProps } from \"antd/es/popover\";\nimport { useCallback, useEffect, useMemo, useState } from \"react\";\nimport Flex from \"antd/es/flex\";\nimport { IconButton } from \"../IconButton\";\nimport { X } from \"@bioturing/assets\";\nimport { PopupPanelSize } from \"./constants\";\nimport { useControlledState } from \"../hooks\";\nimport { useResizable, type MoveValues } from \"react-use-resizable\";\nimport mergeRefs from \"merge-refs\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport interface PopupPanelProps\n  extends Omit<\n    React.ComponentPropsWithRef<\"div\">,\n    \"title\" | \"content\" | \"children\"\n  > {\n  /** The trigger element that opens the popup panel */\n  children?: React.ComponentProps<typeof Popover.Trigger>[\"render\"];\n  /** Placement of the popup panel relative to its trigger */\n  placement?: PopoverProps[\"placement\"];\n  /** Whether to open the popup panel on hover */\n  openOnHover?: boolean;\n  /** Controls the open state of the popup panel */\n  open?: boolean;\n  /** Callback fired when the open state changes */\n  onOpenChange?: (open: boolean) => void;\n  /** Content to display inside the popup panel */\n  content?: React.ReactNode;\n  /** Title text or element to display in the panel header */\n  title?: React.ReactNode;\n  /** The event that triggers the popup panel */\n  /**\n   * @default \"click\"\n   */\n  trigger?: \"click\" | \"hover\";\n  /** Custom anchor element for positioning the panel */\n  anchor?: Popover.Positioner.Props[\"anchor\"];\n  /** Content to display before the close button */\n  beforeCloseButton?: React.ReactNode;\n  /** Content to display after the close button */\n  afterCloseButton?: React.ReactNode;\n  /** Content to display after the title */\n  afterTitle?: React.ReactNode;\n  /**\n   * Predefined sizes for the popup panel\n   * - xsmall: 320px\n   * - small: 400px\n   * - medium: 480px (default)\n   * - large: 640px\n   * - xlarge: 840px\n   * @default \"medium\" for default type, \"xsmall\" for other types\n   */\n  size?: keyof typeof PopupPanelSize;\n  /**\n   * Footer content for the popup panel\n   * Can be a React node or a function that returns a React node\n   */\n  footer?:\n    | React.ReactNode\n    | ((props: { close: () => void }) => React.ReactNode);\n  /**\n   * Whether the panel should be open by default when uncontrolled\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /**\n   * Whether the panel should be resizable\n   * @default false\n   */\n  resizable?: boolean;\n  /**\n   * Custom class names for different parts of the popup panel\n   * @default {}\n   */\n  classNames?: {\n    root?: string;\n    trigger?: string;\n    popup?: string;\n    header?: string;\n    title?: string;\n    content?: string;\n    footer?: string;\n    resizeHandle?: string;\n  };\n}\n\nexport const PopupPanel = ({\n  children,\n  placement,\n  openOnHover = false,\n  open: outsideOpen,\n  onOpenChange: outsideOnOpenChange,\n  content,\n  title,\n  trigger = \"click\",\n  className,\n  anchor,\n  beforeCloseButton,\n  afterCloseButton,\n  afterTitle,\n  size = \"medium\",\n  footer,\n  defaultOpen,\n  resizable = false,\n  classNames,\n}: PopupPanelProps) => {\n  // Use controlled state with proper initialization to prevent switching between controlled/uncontrolled\n  const [open, setOpen] = useControlledState(\n    outsideOpen,\n    outsideOnOpenChange,\n    defaultOpen ?? false // Always provide a default value to prevent undefined\n  );\n\n  const cls = useCls();\n  const antdCssVarClassname = useAntdCssVarClassname();\n  const headlessUIPlacement = parseAntdPlacement(placement);\n  // We don't need triggerRef since we're using callbackRef for the popup\n  const [popupRef, setPopupRef] = useState<HTMLDivElement | null>(null);\n  const [width, setWidth] = useState<number>();\n  const [height, setHeight] = useState<number>();\n  const callbackRef = useCallback((node: HTMLDivElement) => {\n    setPopupRef(node);\n  }, []);\n  useEffect(() => {\n    if (!popupRef) return;\n    const observer = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        setWidth(entry.contentRect.width);\n        setHeight(entry.contentRect.height);\n      }\n    });\n    observer.observe(popupRef);\n    return () => {\n      observer.disconnect();\n    };\n  }, [popupRef]);\n\n  const defaultCloseIcon = useMemo(() => <X size={16} />, []);\n  const renderTitle = useCallback(() => {\n    return (\n      <div className={clsx(cls(\"popup-panel-header\"), classNames?.header)}>\n        <Flex\n          align=\"center\"\n          gap={8}\n          className={cls(\"popup-panel-title-wrapper\")}\n        >\n          <Popover.Title\n            render={\n              <div className={clsx(cls(\"grow\", \"truncate\"), classNames?.title)}>\n                {title}\n              </div>\n            }\n          ></Popover.Title>\n          <div className=\"flex items-center gap-2\">\n            {beforeCloseButton}\n            <Popover.Close\n              render={<IconButton>{defaultCloseIcon}</IconButton>}\n            />\n            {afterCloseButton}\n          </div>\n        </Flex>\n        {afterTitle ? afterTitle : null}\n      </div>\n    );\n  }, [\n    afterCloseButton,\n    afterTitle,\n    beforeCloseButton,\n    cls,\n    classNames?.header,\n    classNames?.title,\n    defaultCloseIcon,\n    title,\n  ]);\n  const [resizing, setResizing] = useState(false);\n  const { getRootProps, getHandleProps, rootRef } = useResizable({\n    initialWidth: width,\n    initialHeight: height,\n    onDragStart: () => setResizing(true),\n    onDragEnd: () => setResizing(false),\n  });\n  useEffect(() => {\n    if (resizing) {\n      document.body.style.userSelect = \"none\";\n    } else {\n      document.body.style.userSelect = \"\";\n    }\n  }, [resizing]);\n  const { ref: rootRefProp, ...rootPropsWithoutRef } = getRootProps();\n  // Handle reverse handle change for vertical resizing\n  // Currently not used but kept for future implementation\n  const _onReverseHandleChangeVertical = (\n    parent: React.RefObject<HTMLDivElement>,\n    values: MoveValues\n  ) => {\n    if (!parent.current) return;\n    const { heightDiff } = values;\n    parent.current.style.top = `${\n      parseInt(parent.current.style.top || \"0\") - heightDiff\n    }px`;\n  };\n\n  // Handle reverse handle change\n  const onReverseHandleChangeHorizontal = (\n    parent: React.RefObject<HTMLDivElement>,\n    values: MoveValues\n  ) => {\n    if (!parent.current) return;\n    const { widthDiff } = values;\n    parent.current.style.left = `${\n      parseInt(parent.current.style.left || \"0\") - widthDiff\n    }px`;\n  };\n\n  return (\n    <Popover.Root\n      openOnHover={trigger === \"hover\" ? true : openOnHover}\n      open={open}\n      onOpenChange={setOpen}\n    >\n      <Popover.Trigger\n        render={children}\n        className={clsx(cls(\"popup-panel-trigger\"), classNames?.trigger)}\n      ></Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Positioner\n          className={clsx(\n            cls(\"popup-panel-root\"),\n            classNames?.root,\n            antdCssVarClassname\n          )}\n          side={headlessUIPlacement.placement}\n          align={headlessUIPlacement.align}\n          sideOffset={4}\n          anchor={anchor}\n          style={\n            {\n              \"--size-width\": size ? PopupPanelSize[size] : undefined,\n            } as React.CSSProperties\n          }\n        >\n          <Popover.Popup\n            className={clsx(\n              cls(\"popup-panel\"),\n              cls(`popup-panel-size-${size}`),\n              className,\n              classNames?.popup,\n              antdCssVarClassname\n            )}\n            ref={mergeRefs(rootRefProp, callbackRef)}\n            {...rootPropsWithoutRef}\n            {...(resizing ? { \"data-resizing\": true } : {})}\n          >\n            {/* <div ref={popupRef}> */}\n            {title && renderTitle()}\n            <div\n              className={clsx(cls(\"popup-panel-content\"), classNames?.content)}\n            >\n              <div className={cls(\"popup-panel-content-inner\")}>{content}</div>\n            </div>\n            {footer && (\n              <div\n                className={clsx(cls(\"popup-panel-footer\"), classNames?.footer)}\n              >\n                {typeof footer === \"function\"\n                  ? footer({ close: () => setOpen(false) })\n                  : footer}\n              </div>\n            )}\n            {resizable && (\n              <>\n                <div\n                  className={clsx(\n                    cls(\"popup-panel-resize-handle\"),\n                    classNames?.resizeHandle\n                  )}\n                  data-placement=\"bottom-left\"\n                  {...getHandleProps({\n                    lockHorizontal: true,\n                  })}\n                />\n                <div\n                  className={clsx(\n                    cls(\"popup-panel-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                <div\n                  className={clsx(\n                    cls(\"popup-panel-resize-handle\"),\n                    classNames?.resizeHandle\n                  )}\n                  data-placement=\"top-right\"\n                  {...getHandleProps({\n                    lockVertical: true,\n                  })}\n                />\n              </>\n            )}\n          </Popover.Popup>\n        </Popover.Positioner>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n};\n"],"names":["PopupPanel","children","placement","openOnHover","outsideOpen","outsideOnOpenChange","content","title","trigger","className","anchor","beforeCloseButton","afterCloseButton","afterTitle","size","footer","defaultOpen","resizable","classNames","open","setOpen","useControlledState","cls","useCls","antdCssVarClassname","useAntdCssVarClassname","headlessUIPlacement","parseAntdPlacement","popupRef","setPopupRef","useState","width","setWidth","height","setHeight","callbackRef","useCallback","node","useEffect","observer","entries","entry","defaultCloseIcon","useMemo","jsx","X","renderTitle","jsxs","clsx","Flex","Popover","IconButton","resizing","setResizing","getRootProps","getHandleProps","rootRef","useResizable","rootRefProp","rootPropsWithoutRef","onReverseHandleChangeHorizontal","parent","values","widthDiff","PopupPanelSize","mergeRefs","Fragment"],"mappings":"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"}
+{"version":3,"file":"component.js","sources":["../../../src/components/PopupPanel/component.tsx"],"sourcesContent":["\"use client\";\nimport { useCls, clsx, parseAntdPlacement } from \"../utils\";\nimport { Popover } from \"@base-ui-components/react/popover\";\n\nimport { type PopoverProps } from \"antd/es/popover\";\nimport { useCallback, useEffect, useMemo, useState } from \"react\";\nimport Flex from \"antd/es/flex\";\nimport { IconButton } from \"../IconButton\";\nimport { X } from \"@bioturing/assets\";\nimport { PopupPanelSize } from \"./constants\";\nimport { useControlledState } from \"../hooks\";\nimport { useResizable, type MoveValues } from \"react-use-resizable\";\nimport mergeRefs from \"merge-refs\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport interface PopupPanelProps\n  extends Omit<\n    React.ComponentPropsWithRef<\"div\">,\n    \"title\" | \"content\" | \"children\"\n  > {\n  /** The trigger element that opens the popup panel */\n  children?: React.ComponentProps<typeof Popover.Trigger>[\"render\"];\n  /** Placement of the popup panel relative to its trigger */\n  placement?: PopoverProps[\"placement\"];\n  /** Whether to open the popup panel on hover */\n  openOnHover?: boolean;\n  /** Controls the open state of the popup panel */\n  open?: boolean;\n  /** Callback fired when the open state changes */\n  onOpenChange?: Popover.Root.Props[\"onOpenChange\"];\n  /** Content to display inside the popup panel */\n  content?: React.ReactNode;\n  /** Title text or element to display in the panel header */\n  title?: React.ReactNode;\n  /** The event that triggers the popup panel */\n  /**\n   * @default \"click\"\n   */\n  trigger?: \"click\" | \"hover\";\n  /** Custom anchor element for positioning the panel */\n  anchor?: Popover.Positioner.Props[\"anchor\"];\n  /** Content to display before the close button */\n  beforeCloseButton?: React.ReactNode;\n  /** Content to display after the close button */\n  afterCloseButton?: React.ReactNode;\n  /** Content to display after the title */\n  afterTitle?: React.ReactNode;\n  /**\n   * Predefined sizes for the popup panel\n   * - xsmall: 320px\n   * - small: 400px\n   * - medium: 480px (default)\n   * - large: 640px\n   * - xlarge: 840px\n   * @default \"medium\" for default type, \"xsmall\" for other types\n   */\n  size?: keyof typeof PopupPanelSize;\n  /**\n   * Footer content for the popup panel\n   * Can be a React node or a function that returns a React node\n   */\n  footer?:\n    | React.ReactNode\n    | ((props: { close: () => void }) => React.ReactNode);\n  /**\n   * Whether the panel should be open by default when uncontrolled\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /**\n   * Whether the panel should be resizable\n   * @default false\n   */\n  resizable?: boolean;\n  /**\n   * Custom class names for different parts of the popup panel\n   * @default {}\n   */\n  classNames?: {\n    root?: string;\n    trigger?: string;\n    popup?: string;\n    header?: string;\n    title?: string;\n    content?: string;\n    footer?: string;\n    resizeHandle?: string;\n  };\n  /**\n   * Whether to close the panel when clicking outside\n   * @default true\n   */\n  closeOnClickOutside?: boolean;\n  /**\n   * Whether to use modal mode\n   * @default false\n   */\n  modal?: Popover.Root.Props[\"modal\"];\n}\n\nexport const PopupPanel = ({\n  children,\n  placement,\n  openOnHover = false,\n  open: outsideOpen,\n  onOpenChange: outsideOnOpenChange,\n  content,\n  title,\n  trigger = \"click\",\n  className,\n  anchor,\n  beforeCloseButton,\n  afterCloseButton,\n  afterTitle,\n  size = \"medium\",\n  footer,\n  defaultOpen,\n  resizable = false,\n  classNames,\n  modal = false,\n  closeOnClickOutside = true,\n}: PopupPanelProps) => {\n  // Use controlled state with proper initialization to prevent switching between controlled/uncontrolled\n  const [open, setOpen] = useControlledState(\n    outsideOpen,\n    outsideOnOpenChange,\n    defaultOpen ?? false // Always provide a default value to prevent undefined\n  );\n\n  const cls = useCls();\n  const headlessUIPlacement = parseAntdPlacement(placement);\n  // We don't need triggerRef since we're using callbackRef for the popup\n  const [popupRef, setPopupRef] = useState<HTMLDivElement | null>(null);\n  const [width, setWidth] = useState<number>();\n  const [height, setHeight] = useState<number>();\n  const callbackRef = useCallback((node: HTMLDivElement) => {\n    setPopupRef(node);\n  }, []);\n  useEffect(() => {\n    if (!popupRef) return;\n    const observer = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        setWidth(entry.contentRect.width);\n        setHeight(entry.contentRect.height);\n      }\n    });\n    observer.observe(popupRef);\n    return () => {\n      observer.disconnect();\n    };\n  }, [popupRef]);\n\n  const defaultCloseIcon = useMemo(() => <X size={16} />, []);\n  const renderTitle = useCallback(() => {\n    return (\n      <div className={clsx(cls(\"popup-panel-header\"), classNames?.header)}>\n        <Flex\n          align=\"center\"\n          gap={8}\n          className={cls(\"popup-panel-title-wrapper\")}\n        >\n          <Popover.Title\n            render={\n              <div className={clsx(cls(\"grow\", \"truncate\"), classNames?.title)}>\n                {title}\n              </div>\n            }\n          ></Popover.Title>\n          <div className=\"flex items-center gap-2\">\n            {beforeCloseButton}\n            <Popover.Close\n              render={<IconButton>{defaultCloseIcon}</IconButton>}\n            />\n            {afterCloseButton}\n          </div>\n        </Flex>\n        {afterTitle ? afterTitle : null}\n      </div>\n    );\n  }, [\n    afterCloseButton,\n    afterTitle,\n    beforeCloseButton,\n    cls,\n    classNames?.header,\n    classNames?.title,\n    defaultCloseIcon,\n    title,\n  ]);\n  const [resizing, setResizing] = useState(false);\n  const { getRootProps, getHandleProps, rootRef } = useResizable({\n    initialWidth: width,\n    initialHeight: height,\n    onDragStart: () => setResizing(true),\n    onDragEnd: () => setResizing(false),\n  });\n  useEffect(() => {\n    if (resizing) {\n      document.body.style.userSelect = \"none\";\n    } else {\n      document.body.style.userSelect = \"\";\n    }\n  }, [resizing]);\n  const { ref: rootRefProp, ...rootPropsWithoutRef } = getRootProps();\n  // Handle reverse handle change for vertical resizing\n  // Currently not used but kept for future implementation\n  // const _onReverseHandleChangeVertical = (\n  //   parent: React.RefObject<HTMLDivElement>,\n  //   values: MoveValues\n  // ) => {\n  //   if (!parent.current) return;\n  //   const { heightDiff } = values;\n  //   parent.current.style.top = `${\n  //     parseInt(parent.current.style.top || \"0\") - heightDiff\n  //   }px`;\n  // };\n\n  // Handle reverse handle change\n  const onReverseHandleChangeHorizontal = (\n    parent: React.RefObject<HTMLDivElement>,\n    values: MoveValues\n  ) => {\n    if (!parent.current) return;\n    const { widthDiff } = values;\n    parent.current.style.left = `${\n      parseInt(parent.current.style.left || \"0\") - widthDiff\n    }px`;\n  };\n\n  return (\n    <Popover.Root\n      openOnHover={trigger === \"hover\" ? true : openOnHover}\n      open={open}\n      onOpenChange={(open, event, reason) => {\n        if (reason === \"outside-press\" && !closeOnClickOutside) return;\n        setOpen(open, event, reason);\n      }}\n      modal={modal}\n    >\n      <Popover.Trigger\n        render={children}\n        className={clsx(cls(\"popup-panel-trigger\"), classNames?.trigger)}\n      ></Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Positioner\n          className={clsx(cls(\"popup-panel-root\"), classNames?.root)}\n          side={headlessUIPlacement.placement}\n          align={headlessUIPlacement.align}\n          sideOffset={4}\n          anchor={anchor}\n          style={\n            {\n              \"--size-width\": size ? PopupPanelSize[size] : undefined,\n            } as React.CSSProperties\n          }\n        >\n          <Popover.Popup\n            className={clsx(\n              cls(\"popup-panel\"),\n              cls(`popup-panel-size-${size}`),\n              className,\n              classNames?.popup\n            )}\n            ref={mergeRefs(rootRefProp, callbackRef)}\n            {...rootPropsWithoutRef}\n            {...(resizing ? { \"data-resizing\": true } : {})}\n          >\n            {/* <div ref={popupRef}> */}\n            {title && renderTitle()}\n            <div\n              className={clsx(cls(\"popup-panel-content\"), classNames?.content)}\n            >\n              <div className={cls(\"popup-panel-content-inner\")}>{content}</div>\n            </div>\n            {footer && (\n              <div\n                className={clsx(cls(\"popup-panel-footer\"), classNames?.footer)}\n              >\n                {typeof footer === \"function\"\n                  ? footer({ close: () => setOpen(false) })\n                  : footer}\n              </div>\n            )}\n            {resizable && (\n              <>\n                <div\n                  className={clsx(\n                    cls(\"popup-panel-resize-handle\"),\n                    classNames?.resizeHandle\n                  )}\n                  data-placement=\"bottom-left\"\n                  {...getHandleProps({\n                    lockHorizontal: true,\n                  })}\n                />\n                <div\n                  className={clsx(\n                    cls(\"popup-panel-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                <div\n                  className={clsx(\n                    cls(\"popup-panel-resize-handle\"),\n                    classNames?.resizeHandle\n                  )}\n                  data-placement=\"top-right\"\n                  {...getHandleProps({\n                    lockVertical: true,\n                  })}\n                />\n              </>\n            )}\n          </Popover.Popup>\n        </Popover.Positioner>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n};\n"],"names":["PopupPanel","children","placement","openOnHover","outsideOpen","outsideOnOpenChange","content","title","trigger","className","anchor","beforeCloseButton","afterCloseButton","afterTitle","size","footer","defaultOpen","resizable","classNames","modal","closeOnClickOutside","open","setOpen","useControlledState","cls","useCls","headlessUIPlacement","parseAntdPlacement","popupRef","setPopupRef","useState","width","setWidth","height","setHeight","callbackRef","useCallback","node","useEffect","observer","entries","entry","defaultCloseIcon","useMemo","jsx","X","renderTitle","jsxs","clsx","Flex","Popover","IconButton","resizing","setResizing","getRootProps","getHandleProps","rootRef","useResizable","rootRefProp","rootPropsWithoutRef","onReverseHandleChangeHorizontal","parent","values","widthDiff","event","reason","PopupPanelSize","mergeRefs","Fragment"],"mappings":"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"}

package/dist/components/ScrollArea/component.js

@@ -1,30 +1,31 @@
-import { jsxs as p, jsx as i } from "react/jsx-runtime";
+"use client";
+import { jsxs as p, jsx as e } from "react/jsx-runtime";
 import { ScrollArea as t } from "@base-ui-components/react";
 import './style.css';/* empty css          */
 import { useCls as b } from "../utils/antdUtils.js";
 import { clsx as l } from "../utils/cn.js";
 const S = ({
-  children: e,
+  children: c,
   className: n,
   classNames: r = {},
-  orientation: c = "vertical"
+  orientation: i = "vertical"
 }) => {
   const o = b();
   return /* @__PURE__ */ p(t.Root, { className: l(o("scroll-area"), n), children: [
-    /* @__PURE__ */ i(
+    /* @__PURE__ */ e(
       t.Viewport,
       {
         className: l(o("scroll-area-viewport"), r == null ? void 0 : r.viewport),
-        children: /* @__PURE__ */ i(t.Content, { className: l(o("scroll-area-content")), children: e })
+        children: /* @__PURE__ */ e(t.Content, { className: l(o("scroll-area-content")), children: c })
       }
     ),
-    /* @__PURE__ */ i(
+    /* @__PURE__ */ e(
       t.Scrollbar,
       {
         className: l(o("scroll-area-scrollbar"), r == null ? void 0 : r.scrollbar),
-        orientation: c,
-        "data-orientation": c,
-        children: /* @__PURE__ */ i(
+        orientation: i,
+        "data-orientation": i,
+        children: /* @__PURE__ */ e(
           t.Thumb,
           {
             className: l(o("scroll-area-thumb"), r == null ? void 0 : r.thumb)

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

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/ScrollArea/component.tsx"],"sourcesContent":["\"use client\";\nimport { type ReactNode } from \"react\";\nimport { ScrollArea as BaseScrollArea } from \"@base-ui-components/react\";\nimport { clsx, useCls } from \"../utils\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport interface ScrollAreaProps {\n  children: ReactNode;\n  /**\n   * Additional class name for the root component\n   */\n  className?: string;\n  /**\n   * Custom class names for each part of the scroll area\n   */\n  classNames?: {\n    /**\n     * Class name for the viewport element\n     */\n    viewport?: string;\n    /**\n     * Class name for the scrollbar element\n     */\n    scrollbar?: string;\n    /**\n     * Class name for the thumb element\n     */\n    thumb?: string;\n  };\n  /**\n   * Orientation of the scrollbar\n   * @default \"vertical\"\n   */\n  orientation?: \"vertical\" | \"horizontal\";\n}\n\nexport const ScrollArea = ({\n  children,\n  className,\n  classNames = {},\n  orientation = \"vertical\",\n}: ScrollAreaProps) => {\n  const cls = useCls();\n  return (\n    <BaseScrollArea.Root className={clsx(cls(\"scroll-area\"), className)}>\n      <BaseScrollArea.Viewport\n        className={clsx(cls(\"scroll-area-viewport\"), classNames?.viewport)}\n      >\n        <BaseScrollArea.Content className={clsx(cls(\"scroll-area-content\"))}>\n          {children}\n        </BaseScrollArea.Content>\n      </BaseScrollArea.Viewport>\n      <BaseScrollArea.Scrollbar\n        className={clsx(cls(\"scroll-area-scrollbar\"), classNames?.scrollbar)}\n        orientation={orientation}\n        data-orientation={orientation}\n      >\n        <BaseScrollArea.Thumb\n          className={clsx(cls(\"scroll-area-thumb\"), classNames?.thumb)}\n        />\n      </BaseScrollArea.Scrollbar>\n    </BaseScrollArea.Root>\n  );\n};\n"],"names":["ScrollArea","children","className","classNames","orientation","cls","useCls","jsxs","BaseScrollArea","clsx","jsx"],"mappings":";;;;;AAsCO,MAAMA,IAAa,CAAC;AAAA,EACzB,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC,IAAa,CAAC;AAAA,EACd,aAAAC,IAAc;AAChB,MAAuB;AACrB,QAAMC,IAAMC,EAAO;AAEjB,SAAA,gBAAAC,EAACC,EAAe,MAAf,EAAoB,WAAWC,EAAKJ,EAAI,aAAa,GAAGH,CAAS,GAChE,UAAA;AAAA,IAAA,gBAAAQ;AAAA,MAACF,EAAe;AAAA,MAAf;AAAA,QACC,WAAWC,EAAKJ,EAAI,sBAAsB,GAAGF,KAAA,gBAAAA,EAAY,QAAQ;AAAA,QAEjE,UAAA,gBAAAO,EAACF,EAAe,SAAf,EAAuB,WAAWC,EAAKJ,EAAI,qBAAqB,CAAC,GAC/D,UAAAJ,EACH,CAAA;AAAA,MAAA;AAAA,IACF;AAAA,IACA,gBAAAS;AAAA,MAACF,EAAe;AAAA,MAAf;AAAA,QACC,WAAWC,EAAKJ,EAAI,uBAAuB,GAAGF,KAAA,gBAAAA,EAAY,SAAS;AAAA,QACnE,aAAAC;AAAA,QACA,oBAAkBA;AAAA,QAElB,UAAA,gBAAAM;AAAA,UAACF,EAAe;AAAA,UAAf;AAAA,YACC,WAAWC,EAAKJ,EAAI,mBAAmB,GAAGF,KAAA,gBAAAA,EAAY,KAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MAC7D;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}
+{"version":3,"file":"component.js","sources":["../../../src/components/ScrollArea/component.tsx"],"sourcesContent":["\"use client\";\nimport { type ReactNode } from \"react\";\nimport { ScrollArea as BaseScrollArea } from \"@base-ui-components/react\";\nimport { clsx, useCls } from \"../utils\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport interface ScrollAreaProps {\n  children: ReactNode;\n  /**\n   * Additional class name for the root component\n   */\n  className?: string;\n  /**\n   * Custom class names for each part of the scroll area\n   */\n  classNames?: {\n    /**\n     * Class name for the viewport element\n     */\n    viewport?: string;\n    /**\n     * Class name for the scrollbar element\n     */\n    scrollbar?: string;\n    /**\n     * Class name for the thumb element\n     */\n    thumb?: string;\n  };\n  /**\n   * Orientation of the scrollbar\n   * @default \"vertical\"\n   */\n  orientation?: \"vertical\" | \"horizontal\";\n}\n\nexport const ScrollArea = ({\n  children,\n  className,\n  classNames = {},\n  orientation = \"vertical\",\n}: ScrollAreaProps) => {\n  const cls = useCls();\n  return (\n    <BaseScrollArea.Root className={clsx(cls(\"scroll-area\"), className)}>\n      <BaseScrollArea.Viewport\n        className={clsx(cls(\"scroll-area-viewport\"), classNames?.viewport)}\n      >\n        <BaseScrollArea.Content className={clsx(cls(\"scroll-area-content\"))}>\n          {children}\n        </BaseScrollArea.Content>\n      </BaseScrollArea.Viewport>\n      <BaseScrollArea.Scrollbar\n        className={clsx(cls(\"scroll-area-scrollbar\"), classNames?.scrollbar)}\n        orientation={orientation}\n        data-orientation={orientation}\n      >\n        <BaseScrollArea.Thumb\n          className={clsx(cls(\"scroll-area-thumb\"), classNames?.thumb)}\n        />\n      </BaseScrollArea.Scrollbar>\n    </BaseScrollArea.Root>\n  );\n};\n"],"names":["ScrollArea","children","className","classNames","orientation","cls","useCls","jsxs","BaseScrollArea","clsx","jsx"],"mappings":";;;;;;AAsCO,MAAMA,IAAa,CAAC;AAAA,EACzB,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC,IAAa,CAAC;AAAA,EACd,aAAAC,IAAc;AAChB,MAAuB;AACrB,QAAMC,IAAMC,EAAO;AAEjB,SAAA,gBAAAC,EAACC,EAAe,MAAf,EAAoB,WAAWC,EAAKJ,EAAI,aAAa,GAAGH,CAAS,GAChE,UAAA;AAAA,IAAA,gBAAAQ;AAAA,MAACF,EAAe;AAAA,MAAf;AAAA,QACC,WAAWC,EAAKJ,EAAI,sBAAsB,GAAGF,KAAA,gBAAAA,EAAY,QAAQ;AAAA,QAEjE,UAAA,gBAAAO,EAACF,EAAe,SAAf,EAAuB,WAAWC,EAAKJ,EAAI,qBAAqB,CAAC,GAC/D,UAAAJ,EACH,CAAA;AAAA,MAAA;AAAA,IACF;AAAA,IACA,gBAAAS;AAAA,MAACF,EAAe;AAAA,MAAf;AAAA,QACC,WAAWC,EAAKJ,EAAI,uBAAuB,GAAGF,KAAA,gBAAAA,EAAY,SAAS;AAAA,QACnE,aAAAC;AAAA,QACA,oBAAkBA;AAAA,QAElB,UAAA,gBAAAM;AAAA,UAACF,EAAe;AAAA,UAAf;AAAA,YACC,WAAWC,EAAKJ,EAAI,mBAAmB,GAAGF,KAAA,gBAAAA,EAAY,KAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MAC7D;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}

package/dist/components/Slider/component.js

@@ -1,13 +1,14 @@
-import { jsx as m } from "react/jsx-runtime";
-import e from "antd/es/slider";
-import { useCls as i } from "../utils/antdUtils.js";
-import { clsx as p } from "../utils/cn.js";
+"use client";
+import { jsx as l } from "react/jsx-runtime";
+import i from "antd/es/slider";
+import { useCls as m } from "../utils/antdUtils.js";
+import { clsx as c } from "../utils/cn.js";
 const d = ({ className: r, tooltip: o = {}, style: s, ...t }) => {
-  const l = i();
-  return /* @__PURE__ */ m(
-    e,
+  const e = m();
+  return /* @__PURE__ */ l(
+    i,
     {
-      className: p(l("slider"), r),
+      className: c(e("slider"), r),
       style: s,
       ...t,
       tooltip: {

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

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/Slider/component.tsx"],"sourcesContent":["\"use client\";\nimport {\n  default as AntSlider,\n  type SliderSingleProps,\n  type SliderRangeProps,\n} from \"antd/es/slider\";\nimport { useCls, clsx } from \"../utils\";\n\n// Define props interface extending Ant Design's SliderProps\nexport type SliderProps = SliderSingleProps | SliderRangeProps;\n\nexport type { SliderSingleProps, SliderRangeProps };\n\n// Create Slider component\nconst Slider = ({ className, tooltip = {}, style, ...rest }: SliderProps) => {\n  const cls = useCls();\n  return (\n    <AntSlider\n      className={clsx(cls(\"slider\"), className)}\n      style={style}\n      {...rest}\n      tooltip={{\n        arrow: false,\n        ...tooltip,\n      }}\n    />\n  );\n};\n\nexport { Slider };\n"],"names":["Slider","className","tooltip","style","rest","cls","useCls","jsx","AntSlider","clsx"],"mappings":";;;;AAcM,MAAAA,IAAS,CAAC,EAAE,WAAAC,GAAW,SAAAC,IAAU,CAAA,GAAI,OAAAC,GAAO,GAAGC,QAAwB;AAC3E,QAAMC,IAAMC,EAAO;AAEjB,SAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKJ,EAAI,QAAQ,GAAGJ,CAAS;AAAA,MACxC,OAAAE;AAAA,MACC,GAAGC;AAAA,MACJ,SAAS;AAAA,QACP,OAAO;AAAA,QACP,GAAGF;AAAA,MAAA;AAAA,IACL;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"component.js","sources":["../../../src/components/Slider/component.tsx"],"sourcesContent":["\"use client\";\nimport {\n  default as AntSlider,\n  type SliderSingleProps,\n  type SliderRangeProps,\n} from \"antd/es/slider\";\nimport { useCls, clsx } from \"../utils\";\n\n// Define props interface extending Ant Design's SliderProps\nexport type SliderProps = SliderSingleProps | SliderRangeProps;\n\nexport type { SliderSingleProps, SliderRangeProps };\n\n// Create Slider component\nconst Slider = ({ className, tooltip = {}, style, ...rest }: SliderProps) => {\n  const cls = useCls();\n  return (\n    <AntSlider\n      className={clsx(cls(\"slider\"), className)}\n      style={style}\n      {...rest}\n      tooltip={{\n        arrow: false,\n        ...tooltip,\n      }}\n    />\n  );\n};\n\nexport { Slider };\n"],"names":["Slider","className","tooltip","style","rest","cls","useCls","jsx","AntSlider","clsx"],"mappings":";;;;;AAcM,MAAAA,IAAS,CAAC,EAAE,WAAAC,GAAW,SAAAC,IAAU,CAAA,GAAI,OAAAC,GAAO,GAAGC,QAAwB;AAC3E,QAAMC,IAAMC,EAAO;AAEjB,SAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKJ,EAAI,QAAQ,GAAGJ,CAAS;AAAA,MACxC,OAAAE;AAAA,MACC,GAAGC;AAAA,MACJ,SAAS;AAAA,QACP,OAAO;AAAA,QACP,GAAGF;AAAA,MAAA;AAAA,IACL;AAAA,EACF;AAEJ;"}

package/dist/components/Splitter/component.js

@@ -1,6 +1,7 @@
-import { jsx as s } from "react/jsx-runtime";
-import p from "antd/es/splitter/Splitter";
-import n from "antd/es/splitter/Panel";
+"use client";
+import { jsx as l } from "react/jsx-runtime";
+import n from "antd/es/splitter/Splitter";
+import p from "antd/es/splitter/Panel";
 import './style.css';/* empty css          */
 import { useCls as m } from "../utils/antdUtils.js";
 import { clsx as c } from "../utils/cn.js";
@@ -9,24 +10,24 @@ const a = ({
   className: r,
   style: e,
   ...i
-}) => /* @__PURE__ */ s(n, { className: r, style: e, ...i, children: t }), S = ({
+}) => /* @__PURE__ */ l(p, { className: r, style: e, ...i, children: t }), S = ({
   children: t,
   className: r = "",
   style: e = {},
   showSplitBar: i = !0,
-  ...l
+  ...o
 }) => {
-  const o = m();
-  return /* @__PURE__ */ s(
-    p,
+  const s = m();
+  return /* @__PURE__ */ l(
+    n,
     {
       className: c(
-        o("splitter"),
-        !i && o("splitter-hidden-split-bar"),
+        s("splitter"),
+        !i && s("splitter-hidden-split-bar"),
         r
       ),
       style: e,
-      ...l,
+      ...o,
       children: t
     }
   );

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

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/Splitter/component.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport { default as AntdSplitter } from \"antd/es/splitter/Splitter\";\nimport { default as AntdSplitterPanel } from \"antd/es/splitter/Panel\";\nimport type {\n  SplitterProps as AntdSplitterProps,\n  PanelProps as AntdSplitterPanelProps,\n} from \"antd/es/splitter/interface\";\nimport { useCls, clsx } from \"../utils\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport type SplitterProps = React.PropsWithChildren<AntdSplitterProps> & {\n  showSplitBar?: boolean;\n};\n\nexport type SplitterPanelProps =\n  React.PropsWithChildren<AntdSplitterPanelProps>;\n\nconst SplitterPanel: React.FC<SplitterPanelProps> = ({\n  children,\n  className,\n  style,\n  ...rest\n}) => {\n  return (\n    <AntdSplitterPanel className={className} style={style} {...rest}>\n      {children}\n    </AntdSplitterPanel>\n  );\n};\n\nconst MainSplitter: React.FC<SplitterProps> = ({\n  children,\n  className = \"\",\n  style = {},\n  showSplitBar = true,\n  ...rest\n}) => {\n  const cls = useCls();\n  return (\n    <AntdSplitter\n      className={clsx(\n        cls(\"splitter\"),\n        !showSplitBar && cls(\"splitter-hidden-split-bar\"),\n        className\n      )}\n      style={style}\n      {...rest}\n    >\n      {children}\n    </AntdSplitter>\n  );\n};\n\nexport const Splitter = Object.assign(MainSplitter, {\n  Panel: SplitterPanel,\n});\n\n// For backward compatibility\nexport const Split = Splitter;\n"],"names":["SplitterPanel","children","className","style","rest","AntdSplitterPanel","MainSplitter","showSplitBar","cls","useCls","jsx","AntdSplitter","clsx","Splitter","Split"],"mappings":";;;;;;AAoBA,MAAMA,IAA8C,CAAC;AAAA,EACnD,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,wBAEKC,GAAkB,EAAA,WAAAH,GAAsB,OAAAC,GAAe,GAAGC,GACxD,UAAAH,GACH,GAIEK,IAAwC,CAAC;AAAA,EAC7C,UAAAL;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ,CAAC;AAAA,EACT,cAAAI,IAAe;AAAA,EACf,GAAGH;AACL,MAAM;AACJ,QAAMI,IAAMC,EAAO;AAEjB,SAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACTJ,EAAI,UAAU;AAAA,QACd,CAACD,KAAgBC,EAAI,2BAA2B;AAAA,QAChDN;AAAA,MACF;AAAA,MACA,OAAAC;AAAA,MACC,GAAGC;AAAA,MAEH,UAAAH;AAAA,IAAA;AAAA,EACH;AAEJ,GAEaY,IAAW,OAAO,OAAOP,GAAc;AAAA,EAClD,OAAON;AACT,CAAC,GAGYc,IAAQD;"}
+{"version":3,"file":"component.js","sources":["../../../src/components/Splitter/component.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport { default as AntdSplitter } from \"antd/es/splitter/Splitter\";\nimport { default as AntdSplitterPanel } from \"antd/es/splitter/Panel\";\nimport type {\n  SplitterProps as AntdSplitterProps,\n  PanelProps as AntdSplitterPanelProps,\n} from \"antd/es/splitter/interface\";\nimport { useCls, clsx } from \"../utils\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport type SplitterProps = React.PropsWithChildren<AntdSplitterProps> & {\n  showSplitBar?: boolean;\n};\n\nexport type SplitterPanelProps =\n  React.PropsWithChildren<AntdSplitterPanelProps>;\n\nconst SplitterPanel: React.FC<SplitterPanelProps> = ({\n  children,\n  className,\n  style,\n  ...rest\n}) => {\n  return (\n    <AntdSplitterPanel className={className} style={style} {...rest}>\n      {children}\n    </AntdSplitterPanel>\n  );\n};\n\nconst MainSplitter: React.FC<SplitterProps> = ({\n  children,\n  className = \"\",\n  style = {},\n  showSplitBar = true,\n  ...rest\n}) => {\n  const cls = useCls();\n  return (\n    <AntdSplitter\n      className={clsx(\n        cls(\"splitter\"),\n        !showSplitBar && cls(\"splitter-hidden-split-bar\"),\n        className\n      )}\n      style={style}\n      {...rest}\n    >\n      {children}\n    </AntdSplitter>\n  );\n};\n\nexport const Splitter = Object.assign(MainSplitter, {\n  Panel: SplitterPanel,\n});\n\n// For backward compatibility\nexport const Split = Splitter;\n"],"names":["SplitterPanel","children","className","style","rest","AntdSplitterPanel","MainSplitter","showSplitBar","cls","useCls","jsx","AntdSplitter","clsx","Splitter","Split"],"mappings":";;;;;;;AAoBA,MAAMA,IAA8C,CAAC;AAAA,EACnD,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,wBAEKC,GAAkB,EAAA,WAAAH,GAAsB,OAAAC,GAAe,GAAGC,GACxD,UAAAH,GACH,GAIEK,IAAwC,CAAC;AAAA,EAC7C,UAAAL;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ,CAAC;AAAA,EACT,cAAAI,IAAe;AAAA,EACf,GAAGH;AACL,MAAM;AACJ,QAAMI,IAAMC,EAAO;AAEjB,SAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACTJ,EAAI,UAAU;AAAA,QACd,CAACD,KAAgBC,EAAI,2BAA2B;AAAA,QAChDN;AAAA,MACF;AAAA,MACA,OAAAC;AAAA,MACC,GAAGC;AAAA,MAEH,UAAAH;AAAA,IAAA;AAAA,EACH;AAEJ,GAEaY,IAAW,OAAO,OAAOP,GAAc;AAAA,EAClD,OAAON;AACT,CAAC,GAGYc,IAAQD;"}

package/dist/components/Stack/Stack.js

@@ -1,37 +1,43 @@
-import { jsx as i } from "react/jsx-runtime";
-import { cn as m } from "../utils/cn.js";
-import { useCls as n } from "../utils/antdUtils.js";
-const g = ({
-  hug: s = !1,
-  align: a = "flex-start",
-  justify: c = "flex-start",
-  vertical: r = !1,
-  gap: l = 0,
-  wrap: o = !1,
-  className: e,
-  children: f,
-  ...k
-}) => {
-  const t = n();
-  return /* @__PURE__ */ i(
-    "div",
-    {
-      className: m(
-        t("stack"),
-        t(s ? "stack-hug" : "stack-fill"),
-        t(`stack-gap-${l}`),
-        t(r ? "stack-vertical" : "stack-horizontal"),
-        o && t("stack-wrap"),
-        t(`stack-align-${a}`),
-        t(`stack-justify-${c}`),
-        e
-      ),
-      ...k,
-      children: f
-    }
-  );
-};
+"use client";
+import { jsx as m } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { cn as n } from "../utils/cn.js";
+import { useCls as u } from "../utils/antdUtils.js";
+const x = p(
+  ({
+    hug: a = !1,
+    align: s = "flex-start",
+    justify: c = "flex-start",
+    vertical: r = !1,
+    gap: l = 0,
+    wrap: e = !1,
+    className: o,
+    children: f,
+    ...i
+  }, k) => {
+    const t = u();
+    return /* @__PURE__ */ m(
+      "div",
+      {
+        ref: k,
+        className: n(
+          t("stack"),
+          t(a ? "stack-hug" : "stack-fill"),
+          t(`stack-gap-${l}`),
+          t(r ? "stack-vertical" : "stack-horizontal"),
+          e && t("stack-wrap"),
+          t(`stack-align-${s}`),
+          t(`stack-justify-${c}`),
+          o
+        ),
+        ...i,
+        children: f
+      }
+    );
+  }
+);
+x.displayName = "Stack";
 export {
-  g as Stack
+  x as Stack
 };
 //# sourceMappingURL=Stack.js.map