@bioturing/components 0.32.3 → 0.33.1

package/dist/components/popup-panel/component.js

@@ -1,19 +1,20 @@
 "use client";
 import { jsx as e, jsxs as s } from "react/jsx-runtime";
 import { Popover as o } from "@base-ui-components/react/popover";
-import { useMemo as Q, useRef as y, useState as W, useEffect as Y, useCallback as Z } from "react";
-import { X as _ } from "@bioturing/assets";
-import { PopupPanelSize as B } from "./constants.js";
-import { Stack as ee } from "../stack/index.js";
+import { useMemo as W, useRef as w, useState as Y, useEffect as Z, useCallback as _ } from "react";
+import { X as B } from "@bioturing/assets";
+import { PopupPanelSize as ee } from "./constants.js";
+import { Stack as te } from "../stack/index.js";
 import './style.css';/* empty css          */
-import { parseAntdPlacement as te, buildAntdPlacement as re } from "../utils/placement.js";
-import { useDraggable as ne } from "../hooks/useDraggable.js";
-import { Resizable as ie } from "../resizable/component.js";
-import { useControlledState as oe } from "../hooks/useControlledState.js";
-import { useCls as pe } from "../utils/antdUtils.js";
+import { parseAntdPlacement as re, buildAntdPlacement as ne } from "../utils/placement.js";
+import { useDraggable as ie } from "../hooks/useDraggable.js";
+import { Resizable as oe } from "../resizable/component.js";
+import { useControlledState as pe } from "../hooks/useControlledState.js";
+import { useCls as ae } from "../utils/antdUtils.js";
+import { useTheme as le } from "../theme-provider/context/themeStore.js";
 import { clsx as p } from "../utils/cn.js";
-import { IconButton as le } from "../icon-button/component.js";
-const Oe = ({
+import { IconButton as se } from "../icon-button/component.js";
+const Re = ({
   children: z,
   placement: k,
   openOnHover: H = !1,
@@ -23,15 +24,15 @@ const Oe = ({
   title: f,
   trigger: E = "click",
   className: M,
-  anchor: D,
-  beforeCloseButton: O,
-  afterCloseButton: R,
+  anchor: T,
+  beforeCloseButton: y,
+  afterCloseButton: C,
   afterTitle: m,
   size: g = "medium",
   footer: c,
-  defaultOpen: F,
-  resizable: A = !1,
-  draggable: T = !1,
+  defaultOpen: D,
+  resizable: O = !1,
+  draggable: F = !1,
   maintainAspectRatio: U = !1,
   classNames: r,
   modal: V = !1,
@@ -39,35 +40,35 @@ const Oe = ({
   onPlacementChange: h,
   ...$
 }) => {
-  const [b, C] = oe(
+  const [b, R] = pe(
     I,
     K,
-    F ?? !1
+    D ?? !1
     // Always provide a default value to prevent undefined
-  ), t = pe(), u = te(k), N = Q(() => /* @__PURE__ */ e(_, { size: 16 }), []), S = y(null), v = y(u.side), P = y(u.align), [q, G] = W(0);
-  Y(() => {
-    const l = S.current;
-    if (!l || !b) return;
-    const d = new MutationObserver((a) => {
-      let w = !1;
-      if (a.forEach((i) => {
+  ), t = ae(), { className: q } = le(), u = re(k), A = W(() => /* @__PURE__ */ e(B, { size: 16 }), []), S = w(null), v = w(u.side), P = w(u.align), [G, J] = Y(0);
+  Z(() => {
+    const a = S.current;
+    if (!a || !b) return;
+    const d = new MutationObserver((l) => {
+      let N = !1;
+      if (l.forEach((i) => {
         if (i.type === "attributes" && i.attributeName === "data-side") {
-          const n = l.getAttribute(i.attributeName);
-          n && n !== v.current && (v.current = n, w = !0);
+          const n = a.getAttribute(i.attributeName);
+          n && n !== v.current && (v.current = n, N = !0);
         }
         if (i.type === "attributes" && i.attributeName === "data-align") {
-          const n = l.getAttribute(i.attributeName);
-          n && n !== P.current && (P.current = n, w = !0);
+          const n = a.getAttribute(i.attributeName);
+          n && n !== P.current && (P.current = n, N = !0);
         }
-      }), w) {
-        const i = re({
+      }), N) {
+        const i = ne({
           side: v.current,
           align: P.current
         });
-        G((n) => n + 1), h && h(i);
+        J((n) => n + 1), h && h(i);
       }
     });
-    return d.observe(l, {
+    return d.observe(a, {
       attributes: !0,
       attributeFilter: ["data-side", "data-align"],
       attributeOldValue: !0
@@ -75,9 +76,9 @@ const Oe = ({
       d.disconnect();
     };
   }, [h, b]);
-  const J = Z(() => /* @__PURE__ */ s("div", { className: p(t("popup-panel-header"), r?.header), children: [
+  const L = _(() => /* @__PURE__ */ s("div", { className: p(t("popup-panel-header"), r?.header), children: [
     /* @__PURE__ */ s(
-      ee,
+      te,
       {
         align: "center",
         gap: 8,
@@ -90,29 +91,29 @@ const Oe = ({
             }
           ),
           /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
-            O,
+            y,
             /* @__PURE__ */ e(
               o.Close,
               {
-                render: /* @__PURE__ */ e(le, { children: N })
+                render: /* @__PURE__ */ e(se, { children: A })
               }
             ),
-            R
+            C
           ] })
         ]
       }
     ),
     m || null
   ] }), [
-    R,
+    C,
     m,
-    O,
+    y,
     t,
     r?.header,
     r?.title,
-    N,
+    A,
     f
-  ]), { ref: L } = ne(T), x = /* @__PURE__ */ s(
+  ]), { ref: Q } = ie(F), x = /* @__PURE__ */ s(
     o.Popup,
     {
       className: p(
@@ -121,11 +122,11 @@ const Oe = ({
         M,
         r?.popup
       ),
-      ref: L,
+      ref: Q,
       children: [
-        f && J(),
+        f && L(),
         /* @__PURE__ */ e("div", { className: p(t("popup-panel-content"), r?.content), children: /* @__PURE__ */ e("div", { className: t("popup-panel-content-inner"), children: j }) }),
-        c && /* @__PURE__ */ e("div", { className: p(t("popup-panel-footer"), r?.footer), children: typeof c == "function" ? c({ close: () => C(!1) }) : c })
+        c && /* @__PURE__ */ e("div", { className: p(t("popup-panel-footer"), r?.footer), children: typeof c == "function" ? c({ close: () => R(!1) }) : c })
       ]
     }
   );
@@ -134,8 +135,8 @@ const Oe = ({
     {
       openOnHover: E === "hover" ? !0 : H,
       open: b,
-      onOpenChange: (l, d, a) => {
-        (a === "outside-press" || a === "focus-out") && !X || C(l, d, a);
+      onOpenChange: (a, d, l) => {
+        (l === "outside-press" || l === "focus-out") && !X || R(a, d, l);
       },
       modal: V,
       ...$,
@@ -151,20 +152,24 @@ const Oe = ({
           o.Positioner,
           {
             ref: S,
-            className: p(t("popup-panel-root"), r?.root),
+            className: p(
+              t("popup-panel-root"),
+              q,
+              r?.root
+            ),
             side: u.side,
             align: u.align,
             sideOffset: 4,
-            anchor: D,
+            anchor: T,
             style: {
-              "--size-width": g ? B[g] : void 0
+              "--size-width": g ? ee[g] : void 0
             },
-            children: A ? /* @__PURE__ */ e(
-              ie,
+            children: O ? /* @__PURE__ */ e(
+              oe,
               {
-                resizable: A,
+                resizable: O,
                 absolutePositioning: !0,
-                resetKey: q,
+                resetKey: G,
                 maintainAspectRatio: U,
                 classNames: {
                   resizeHandle: r?.resizeHandle
@@ -179,6 +184,6 @@ const Oe = ({
   );
 };
 export {
-  Oe as PopupPanel
+  Re as PopupPanel
 };
 //# sourceMappingURL=component.js.map

package/dist/components/popup-panel/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/popup-panel/component.tsx"],"sourcesContent":["\"use client\";\nimport {\n  useCls,\n  clsx,\n  parseAntdPlacement,\n  buildAntdPlacement,\n  BaseUIPlacement,\n  BaseUISide,\n  BaseUIAlign,\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 { IconButton } from \"../icon-button\";\nimport { X } from \"@bioturing/assets\";\nimport { PopupPanelSize } from \"./constants\";\nimport { useControlledState, useDraggable } from \"../hooks\";\nimport { Resizable } from \"../resizable\";\nimport { Stack } from \"../stack\";\n\n// Import component-specific styles\nimport \"./style.css\";\nimport { useRef } from \"react\";\n\nexport interface PopupPanelProps\n  extends Omit<\n      React.ComponentPropsWithRef<\"div\">,\n      \"title\" | \"content\" | \"children\"\n    >,\n    Omit<Popover.Root.Props, \"children\"> {\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   * Whether the panel should be draggable\n   * @default false\n   */\n  draggable?: boolean;\n  /**\n   * Whether to maintain aspect ratio when resizing\n   * Only applies when resizable is true\n   * @default false\n   */\n  maintainAspectRatio?: 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   * Callback function when the placement changes\n   */\n  onPlacementChange?: (placement: PopoverProps[\"placement\"]) => void;\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  draggable = false,\n  maintainAspectRatio = false,\n  classNames,\n  modal = false,\n  closeOnClickOutside = true,\n  onPlacementChange,\n  ...rest\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 baseUIPlacement = parseAntdPlacement(placement);\n\n  const defaultCloseIcon = useMemo(() => <X size={16} />, []);\n\n  const positionerRef = useRef<HTMLDivElement>(null);\n  const currentSideRef = useRef<BaseUISide>(baseUIPlacement.side);\n  const currentAlignRef = useRef<BaseUIAlign>(baseUIPlacement.align);\n  const [placementChangeKey, setPlacementChangeKey] = useState(0);\n\n  useEffect(() => {\n    const positioner = positionerRef.current;\n    if (!positioner || !open) return; // Only observe when popup is open\n\n    // Create MutationObserver to watch for data-side changes\n    const observer = new MutationObserver((mutations) => {\n      let hasPlacementChanged = false;\n\n      mutations.forEach((mutation) => {\n        if (\n          mutation.type === \"attributes\" &&\n          mutation.attributeName === \"data-side\"\n        ) {\n          const newSide = positioner.getAttribute(mutation.attributeName);\n          if (newSide && newSide !== currentSideRef.current) {\n            currentSideRef.current = newSide as BaseUISide;\n            hasPlacementChanged = true;\n          }\n        }\n        if (\n          mutation.type === \"attributes\" &&\n          mutation.attributeName === \"data-align\"\n        ) {\n          const newAlign = positioner.getAttribute(mutation.attributeName);\n          if (newAlign && newAlign !== currentAlignRef.current) {\n            currentAlignRef.current = newAlign as BaseUIAlign;\n            hasPlacementChanged = true;\n          }\n        }\n      });\n\n      // Only trigger callbacks if placement actually changed\n      if (hasPlacementChanged) {\n        const newPlacement = buildAntdPlacement({\n          side: currentSideRef.current,\n          align: currentAlignRef.current,\n        });\n\n        // Trigger resizable dimensions reset when placement changes\n        setPlacementChangeKey((prev) => prev + 1);\n\n        if (onPlacementChange) {\n          onPlacementChange(newPlacement);\n        }\n      }\n    });\n\n    // Start observing\n    observer.observe(positioner, {\n      attributes: true,\n      attributeFilter: [\"data-side\", \"data-align\"],\n      attributeOldValue: true,\n    });\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [onPlacementChange, open]);\n\n  const renderTitle = useCallback(() => {\n    return (\n      <div className={clsx(cls(\"popup-panel-header\"), classNames?.header)}>\n        <Stack\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        </Stack>\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\n  const { ref: draggableRef } = useDraggable(draggable);\n\n  const popup = (\n    <Popover.Popup\n      className={clsx(\n        cls(\"popup-panel\"),\n        cls(`popup-panel-size-${size}`),\n        className,\n        classNames?.popup,\n      )}\n      ref={draggableRef}\n    >\n      {title && renderTitle()}\n      <div className={clsx(cls(\"popup-panel-content\"), classNames?.content)}>\n        <div className={cls(\"popup-panel-content-inner\")}>{content}</div>\n      </div>\n      {footer && (\n        <div className={clsx(cls(\"popup-panel-footer\"), classNames?.footer)}>\n          {typeof footer === \"function\"\n            ? footer({ close: () => setOpen(false) })\n            : footer}\n        </div>\n      )}\n    </Popover.Popup>\n  );\n\n  return (\n    <Popover.Root\n      openOnHover={trigger === \"hover\" ? true : openOnHover}\n      open={open}\n      onOpenChange={(open, event, reason) => {\n        if (\n          (reason === \"outside-press\" || reason === \"focus-out\") &&\n          !closeOnClickOutside\n        )\n          return;\n        setOpen(open, event, reason);\n      }}\n      modal={modal}\n      {...rest}\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          ref={positionerRef}\n          className={clsx(cls(\"popup-panel-root\"), classNames?.root)}\n          side={baseUIPlacement.side}\n          align={baseUIPlacement.align}\n          sideOffset={4}\n          anchor={anchor}\n          style={\n            {\n              \"--size-width\": size ? PopupPanelSize[size] : undefined,\n            } as React.CSSProperties\n          }\n        >\n          {resizable ? (\n            <Resizable\n              resizable={resizable}\n              absolutePositioning={true}\n              resetKey={placementChangeKey}\n              maintainAspectRatio={maintainAspectRatio}\n              classNames={{\n                resizeHandle: classNames?.resizeHandle,\n              }}\n            >\n              {popup}\n            </Resizable>\n          ) : (\n            popup\n          )}\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","draggable","maintainAspectRatio","classNames","modal","closeOnClickOutside","onPlacementChange","rest","open","setOpen","useControlledState","cls","useCls","baseUIPlacement","parseAntdPlacement","defaultCloseIcon","useMemo","jsx","X","positionerRef","useRef","currentSideRef","currentAlignRef","placementChangeKey","setPlacementChangeKey","useState","useEffect","positioner","observer","mutations","hasPlacementChanged","mutation","newSide","newAlign","newPlacement","buildAntdPlacement","prev","renderTitle","useCallback","jsxs","clsx","Stack","Popover","IconButton","draggableRef","useDraggable","popup","event","reason","PopupPanelSize","Resizable"],"mappings":"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"}
+{"version":3,"file":"component.js","sources":["../../../src/components/popup-panel/component.tsx"],"sourcesContent":["\"use client\";\nimport {\n  useCls,\n  clsx,\n  parseAntdPlacement,\n  buildAntdPlacement,\n  BaseUIPlacement,\n  BaseUISide,\n  BaseUIAlign,\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 { IconButton } from \"../icon-button\";\nimport { X } from \"@bioturing/assets\";\nimport { PopupPanelSize } from \"./constants\";\nimport { useControlledState, useDraggable } from \"../hooks\";\nimport { Resizable } from \"../resizable\";\nimport { Stack } from \"../stack\";\n\n// Import component-specific styles\nimport \"./style.css\";\nimport { useRef } from \"react\";\nimport { useTheme } from \"../theme-provider\";\n\nexport interface PopupPanelProps\n  extends Omit<\n      React.ComponentPropsWithRef<\"div\">,\n      \"title\" | \"content\" | \"children\"\n    >,\n    Omit<Popover.Root.Props, \"children\"> {\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   * Whether the panel should be draggable\n   * @default false\n   */\n  draggable?: boolean;\n  /**\n   * Whether to maintain aspect ratio when resizing\n   * Only applies when resizable is true\n   * @default false\n   */\n  maintainAspectRatio?: 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   * Callback function when the placement changes\n   */\n  onPlacementChange?: (placement: PopoverProps[\"placement\"]) => void;\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  draggable = false,\n  maintainAspectRatio = false,\n  classNames,\n  modal = false,\n  closeOnClickOutside = true,\n  onPlacementChange,\n  ...rest\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 { className: themeClassName } = useTheme();\n  const baseUIPlacement = parseAntdPlacement(placement);\n\n  const defaultCloseIcon = useMemo(() => <X size={16} />, []);\n\n  const positionerRef = useRef<HTMLDivElement>(null);\n  const currentSideRef = useRef<BaseUISide>(baseUIPlacement.side);\n  const currentAlignRef = useRef<BaseUIAlign>(baseUIPlacement.align);\n  const [placementChangeKey, setPlacementChangeKey] = useState(0);\n\n  useEffect(() => {\n    const positioner = positionerRef.current;\n    if (!positioner || !open) return; // Only observe when popup is open\n\n    // Create MutationObserver to watch for data-side changes\n    const observer = new MutationObserver((mutations) => {\n      let hasPlacementChanged = false;\n\n      mutations.forEach((mutation) => {\n        if (\n          mutation.type === \"attributes\" &&\n          mutation.attributeName === \"data-side\"\n        ) {\n          const newSide = positioner.getAttribute(mutation.attributeName);\n          if (newSide && newSide !== currentSideRef.current) {\n            currentSideRef.current = newSide as BaseUISide;\n            hasPlacementChanged = true;\n          }\n        }\n        if (\n          mutation.type === \"attributes\" &&\n          mutation.attributeName === \"data-align\"\n        ) {\n          const newAlign = positioner.getAttribute(mutation.attributeName);\n          if (newAlign && newAlign !== currentAlignRef.current) {\n            currentAlignRef.current = newAlign as BaseUIAlign;\n            hasPlacementChanged = true;\n          }\n        }\n      });\n\n      // Only trigger callbacks if placement actually changed\n      if (hasPlacementChanged) {\n        const newPlacement = buildAntdPlacement({\n          side: currentSideRef.current,\n          align: currentAlignRef.current,\n        });\n\n        // Trigger resizable dimensions reset when placement changes\n        setPlacementChangeKey((prev) => prev + 1);\n\n        if (onPlacementChange) {\n          onPlacementChange(newPlacement);\n        }\n      }\n    });\n\n    // Start observing\n    observer.observe(positioner, {\n      attributes: true,\n      attributeFilter: [\"data-side\", \"data-align\"],\n      attributeOldValue: true,\n    });\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [onPlacementChange, open]);\n\n  const renderTitle = useCallback(() => {\n    return (\n      <div className={clsx(cls(\"popup-panel-header\"), classNames?.header)}>\n        <Stack\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        </Stack>\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\n  const { ref: draggableRef } = useDraggable(draggable);\n\n  const popup = (\n    <Popover.Popup\n      className={clsx(\n        cls(\"popup-panel\"),\n        cls(`popup-panel-size-${size}`),\n        className,\n        classNames?.popup\n      )}\n      ref={draggableRef}\n    >\n      {title && renderTitle()}\n      <div className={clsx(cls(\"popup-panel-content\"), classNames?.content)}>\n        <div className={cls(\"popup-panel-content-inner\")}>{content}</div>\n      </div>\n      {footer && (\n        <div className={clsx(cls(\"popup-panel-footer\"), classNames?.footer)}>\n          {typeof footer === \"function\"\n            ? footer({ close: () => setOpen(false) })\n            : footer}\n        </div>\n      )}\n    </Popover.Popup>\n  );\n\n  return (\n    <Popover.Root\n      openOnHover={trigger === \"hover\" ? true : openOnHover}\n      open={open}\n      onOpenChange={(open, event, reason) => {\n        if (\n          (reason === \"outside-press\" || reason === \"focus-out\") &&\n          !closeOnClickOutside\n        )\n          return;\n        setOpen(open, event, reason);\n      }}\n      modal={modal}\n      {...rest}\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          ref={positionerRef}\n          className={clsx(\n            cls(\"popup-panel-root\"),\n            themeClassName,\n            classNames?.root\n          )}\n          side={baseUIPlacement.side}\n          align={baseUIPlacement.align}\n          sideOffset={4}\n          anchor={anchor}\n          style={\n            {\n              \"--size-width\": size ? PopupPanelSize[size] : undefined,\n            } as React.CSSProperties\n          }\n        >\n          {resizable ? (\n            <Resizable\n              resizable={resizable}\n              absolutePositioning={true}\n              resetKey={placementChangeKey}\n              maintainAspectRatio={maintainAspectRatio}\n              classNames={{\n                resizeHandle: classNames?.resizeHandle,\n              }}\n            >\n              {popup}\n            </Resizable>\n          ) : (\n            popup\n          )}\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","draggable","maintainAspectRatio","classNames","modal","closeOnClickOutside","onPlacementChange","rest","open","setOpen","useControlledState","cls","useCls","themeClassName","useTheme","baseUIPlacement","parseAntdPlacement","defaultCloseIcon","useMemo","jsx","X","positionerRef","useRef","currentSideRef","currentAlignRef","placementChangeKey","setPlacementChangeKey","useState","useEffect","positioner","observer","mutations","hasPlacementChanged","mutation","newSide","newAlign","newPlacement","buildAntdPlacement","prev","renderTitle","useCallback","jsxs","clsx","Stack","Popover","IconButton","draggableRef","useDraggable","popup","event","reason","PopupPanelSize","Resizable"],"mappings":"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"}

package/dist/components/scroll-area/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/components/scroll-area/component.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAA+B,MAAM,OAAO,CAAC;AACpE,OAAO,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAIzE,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,EAAE,UAAU,CAAC;IACnD,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE;QACX;;WAEG;QACH,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB;;WAEG;QACH,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB;;WAEG;QACH,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB;;WAEG;QACH,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;WAEG;QACH,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC/B;;WAEG;QACH,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC9B;;WAEG;QACH,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAChC;;WAEG;QACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAC7B,CAAC;IACF;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACnC;AAED,eAAO,MAAM,UAAU,GAAI,wFASxB,eAAe,4CAgIjB,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/components/scroll-area/component.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAA+B,MAAM,OAAO,CAAC;AACpE,OAAO,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAIzE,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,EAAE,UAAU,CAAC;IACnD,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE;QACX;;WAEG;QACH,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB;;WAEG;QACH,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB;;WAEG;QACH,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB;;WAEG;QACH,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;WAEG;QACH,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC/B;;WAEG;QACH,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC9B;;WAEG;QACH,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAChC;;WAEG;QACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAC7B,CAAC;IACF;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACnC;AAED,eAAO,MAAM,UAAU,GAAI,wFASxB,eAAe,4CAoIjB,CAAC"}

package/dist/components/scroll-area/component.js

@@ -6,34 +6,34 @@ import './style.css';/* empty css          */
 import { useCls as j } from "../utils/antdUtils.js";
 import { clsx as b } from "../utils/cn.js";
 const V = ({
-  children: w,
+  children: v,
   className: z,
   classNames: S = {},
-  orientation: t = "vertical",
+  orientation: r = "vertical",
   fadeEdges: e = !1,
   onScroll: u,
   styles: m = {},
   ...y
 }) => {
-  const r = j(), f = T(null), [l, v] = E({
+  const t = j(), f = T(null), [l, p] = E({
     isAtStart: !0,
     isAtEnd: !1,
     isScrollable: !1
   });
   return L(() => {
     if (!f.current) return;
-    const o = f.current, s = (d) => {
-      if (d && u && u(d), e)
-        if (t === "vertical") {
+    const o = f.current, s = (w) => {
+      if (w && u && u(w), e)
+        if (r === "vertical") {
           const { scrollTop: c, scrollHeight: a, clientHeight: i } = o, A = a > i;
-          v({
+          p({
             isAtStart: c <= 1,
             isAtEnd: c >= a - i - 1,
             isScrollable: A
           });
         } else {
           const { scrollLeft: c, scrollWidth: a, clientWidth: i } = o, A = a > i + 2;
-          v({
+          p({
             isAtStart: c <= 1,
             isAtEnd: c >= a - i - 1,
             isScrollable: A
@@ -43,16 +43,16 @@ const V = ({
     s();
     const x = setTimeout(s, 0);
     o.addEventListener("scroll", s);
-    const p = new ResizeObserver(() => {
+    const d = new ResizeObserver(() => {
       s();
     });
-    return p.observe(o), () => {
-      clearTimeout(x), o.removeEventListener("scroll", s), p.disconnect();
+    return d.observe(o), () => {
+      clearTimeout(x), o.removeEventListener("scroll", s), d.disconnect();
     };
-  }, [e, t, u]), /* @__PURE__ */ R(
+  }, [e, r, u]), /* @__PURE__ */ R(
     n.Root,
     {
-      className: b(r("scroll-area"), z),
+      className: b(t("scroll-area"), z),
       ...y,
       children: [
         /* @__PURE__ */ h(
@@ -60,37 +60,37 @@ const V = ({
           {
             ref: f,
             className: b(
-              r("scroll-area-viewport"),
-              e && l.isScrollable && t === "vertical" && l.isAtStart && r("scroll-area-fade-bottom-only"),
-              e && l.isScrollable && t === "vertical" && l.isAtEnd && r("scroll-area-fade-top-only"),
-              e && l.isScrollable && t === "vertical" && !l.isAtStart && !l.isAtEnd && r("scroll-area-fade-both-vertical"),
-              e && l.isScrollable && t === "horizontal" && l.isAtStart && r("scroll-area-fade-right-only"),
-              e && l.isScrollable && t === "horizontal" && l.isAtEnd && r("scroll-area-fade-left-only"),
-              e && l.isScrollable && t === "horizontal" && !l.isAtStart && !l.isAtEnd && r("scroll-area-fade-both-horizontal"),
+              t("scroll-area-viewport"),
+              e && l.isScrollable && r === "vertical" && l.isAtStart && t("scroll-area-fade-bottom-only"),
+              e && l.isScrollable && r === "vertical" && l.isAtEnd && t("scroll-area-fade-top-only"),
+              e && l.isScrollable && r === "vertical" && !l.isAtStart && !l.isAtEnd && t("scroll-area-fade-both-vertical"),
+              e && l.isScrollable && r === "horizontal" && l.isAtStart && t("scroll-area-fade-right-only"),
+              e && l.isScrollable && r === "horizontal" && l.isAtEnd && t("scroll-area-fade-left-only"),
+              e && l.isScrollable && r === "horizontal" && !l.isAtStart && !l.isAtEnd && t("scroll-area-fade-both-horizontal"),
               S?.viewport
             ),
             style: m?.viewport,
-            children: /* @__PURE__ */ h(
+            children: r == "horizontal" ? /* @__PURE__ */ h(
               n.Content,
               {
-                className: b(r("scroll-area-content"), S?.content),
+                className: b(t("scroll-area-content"), S?.content),
                 style: m?.content,
-                children: w
+                children: v
               }
-            )
+            ) : v
           }
         ),
         /* @__PURE__ */ h(
           n.Scrollbar,
           {
-            className: b(r("scroll-area-scrollbar"), S?.scrollbar),
-            orientation: t,
-            "data-orientation": t,
+            className: b(t("scroll-area-scrollbar"), S?.scrollbar),
+            orientation: r,
+            "data-orientation": r,
             style: m?.scrollbar,
             children: /* @__PURE__ */ h(
               n.Thumb,
               {
-                className: b(r("scroll-area-thumb"), S?.thumb),
+                className: b(t("scroll-area-thumb"), S?.thumb),
                 style: m?.thumb
               }
             )

package/dist/components/scroll-area/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/scroll-area/component.tsx"],"sourcesContent":["\"use client\";\nimport { type ReactNode, useEffect, useRef, useState } 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  extends Omit<BaseScrollArea.Root.Props, \"onScroll\"> {\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 content element\n     */\n    content?: 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   * Custom styles for each part of the scroll area\n   */\n  styles?: {\n    /**\n     * Styles for the viewport element\n     */\n    viewport?: React.CSSProperties;\n    /**\n     * Styles for the content element\n     */\n    content?: React.CSSProperties;\n    /**\n     * Styles for the scrollbar element\n     */\n    scrollbar?: React.CSSProperties;\n    /**\n     * Styles for the thumb element\n     */\n    thumb?: React.CSSProperties;\n  };\n  /**\n   * Orientation of the scrollbar\n   * @default \"vertical\"\n   */\n  orientation?: \"vertical\" | \"horizontal\";\n  /**\n   * Enable fade-out effect at scrollable edges\n   * @default false\n   */\n  fadeEdges?: boolean;\n  /**\n   * Callback fired when the scroll position changes\n   */\n  onScroll?: (event: Event) => void;\n}\n\nexport const ScrollArea = ({\n  children,\n  className,\n  classNames = {},\n  orientation = \"vertical\",\n  fadeEdges = false,\n  onScroll,\n  styles = {},\n  ...rest\n}: ScrollAreaProps) => {\n  const cls = useCls();\n  const viewportRef = useRef<HTMLDivElement>(null);\n  const [scrollState, setScrollState] = useState({\n    isAtStart: true,\n    isAtEnd: false,\n    isScrollable: false,\n  });\n\n  useEffect(() => {\n    if (!viewportRef.current) return;\n\n    const viewport = viewportRef.current;\n\n    const handleScroll = (event?: Event) => {\n      // Call the onScroll callback if provided and event exists\n      if (event && onScroll) {\n        onScroll(event);\n      }\n\n      // Handle fade edges state update if enabled\n      if (fadeEdges) {\n        if (orientation === \"vertical\") {\n          const { scrollTop, scrollHeight, clientHeight } = viewport;\n          const isScrollable = scrollHeight > clientHeight;\n          setScrollState({\n            isAtStart: scrollTop <= 1,\n            isAtEnd: scrollTop >= scrollHeight - clientHeight - 1,\n            isScrollable,\n          });\n        } else {\n          const { scrollLeft, scrollWidth, clientWidth } = viewport;\n          // Add a small buffer (2px) to account for rounding errors\n          const isScrollable = scrollWidth > clientWidth + 2;\n          setScrollState({\n            isAtStart: scrollLeft <= 1,\n            isAtEnd: scrollLeft >= scrollWidth - clientWidth - 1,\n            isScrollable,\n          });\n        }\n      }\n    };\n\n    // Initial check (without event)\n    handleScroll();\n\n    // Use a timeout to check again after content might have rendered\n    const timeoutId = setTimeout(handleScroll, 0);\n\n    viewport.addEventListener(\"scroll\", handleScroll);\n\n    // Add resize observer to detect content size changes\n    const resizeObserver = new ResizeObserver(() => {\n      handleScroll();\n    });\n    resizeObserver.observe(viewport);\n\n    return () => {\n      clearTimeout(timeoutId);\n      viewport.removeEventListener(\"scroll\", handleScroll);\n      resizeObserver.disconnect();\n    };\n  }, [fadeEdges, orientation, onScroll]);\n  return (\n    <BaseScrollArea.Root\n      className={clsx(cls(\"scroll-area\"), className)}\n      {...rest}\n    >\n      <BaseScrollArea.Viewport\n        ref={viewportRef}\n        className={clsx(\n          cls(\"scroll-area-viewport\"),\n          fadeEdges &&\n            scrollState.isScrollable &&\n            orientation === \"vertical\" &&\n            scrollState.isAtStart &&\n            cls(\"scroll-area-fade-bottom-only\"),\n          fadeEdges &&\n            scrollState.isScrollable &&\n            orientation === \"vertical\" &&\n            scrollState.isAtEnd &&\n            cls(\"scroll-area-fade-top-only\"),\n          fadeEdges &&\n            scrollState.isScrollable &&\n            orientation === \"vertical\" &&\n            !scrollState.isAtStart &&\n            !scrollState.isAtEnd &&\n            cls(\"scroll-area-fade-both-vertical\"),\n          fadeEdges &&\n            scrollState.isScrollable &&\n            orientation === \"horizontal\" &&\n            scrollState.isAtStart &&\n            cls(\"scroll-area-fade-right-only\"),\n          fadeEdges &&\n            scrollState.isScrollable &&\n            orientation === \"horizontal\" &&\n            scrollState.isAtEnd &&\n            cls(\"scroll-area-fade-left-only\"),\n          fadeEdges &&\n            scrollState.isScrollable &&\n            orientation === \"horizontal\" &&\n            !scrollState.isAtStart &&\n            !scrollState.isAtEnd &&\n            cls(\"scroll-area-fade-both-horizontal\"),\n          classNames?.viewport\n        )}\n        style={styles?.viewport}\n      >\n        <BaseScrollArea.Content\n          className={clsx(cls(\"scroll-area-content\"), classNames?.content)}\n          style={styles?.content}\n        >\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        style={styles?.scrollbar}\n      >\n        <BaseScrollArea.Thumb\n          className={clsx(cls(\"scroll-area-thumb\"), classNames?.thumb)}\n          style={styles?.thumb}\n        />\n      </BaseScrollArea.Scrollbar>\n    </BaseScrollArea.Root>\n  );\n};\n"],"names":["ScrollArea","children","className","classNames","orientation","fadeEdges","onScroll","styles","rest","cls","useCls","viewportRef","useRef","scrollState","setScrollState","useState","useEffect","viewport","handleScroll","event","scrollTop","scrollHeight","clientHeight","isScrollable","scrollLeft","scrollWidth","clientWidth","timeoutId","resizeObserver","jsxs","BaseScrollArea","clsx","jsx"],"mappings":"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"}
+{"version":3,"file":"component.js","sources":["../../../src/components/scroll-area/component.tsx"],"sourcesContent":["\"use client\";\nimport { type ReactNode, useEffect, useRef, useState } 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  extends Omit<BaseScrollArea.Root.Props, \"onScroll\"> {\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 content element\n     */\n    content?: 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   * Custom styles for each part of the scroll area\n   */\n  styles?: {\n    /**\n     * Styles for the viewport element\n     */\n    viewport?: React.CSSProperties;\n    /**\n     * Styles for the content element\n     */\n    content?: React.CSSProperties;\n    /**\n     * Styles for the scrollbar element\n     */\n    scrollbar?: React.CSSProperties;\n    /**\n     * Styles for the thumb element\n     */\n    thumb?: React.CSSProperties;\n  };\n  /**\n   * Orientation of the scrollbar\n   * @default \"vertical\"\n   */\n  orientation?: \"vertical\" | \"horizontal\";\n  /**\n   * Enable fade-out effect at scrollable edges\n   * @default false\n   */\n  fadeEdges?: boolean;\n  /**\n   * Callback fired when the scroll position changes\n   */\n  onScroll?: (event: Event) => void;\n}\n\nexport const ScrollArea = ({\n  children,\n  className,\n  classNames = {},\n  orientation = \"vertical\",\n  fadeEdges = false,\n  onScroll,\n  styles = {},\n  ...rest\n}: ScrollAreaProps) => {\n  const cls = useCls();\n  const viewportRef = useRef<HTMLDivElement>(null);\n  const [scrollState, setScrollState] = useState({\n    isAtStart: true,\n    isAtEnd: false,\n    isScrollable: false,\n  });\n\n  useEffect(() => {\n    if (!viewportRef.current) return;\n\n    const viewport = viewportRef.current;\n\n    const handleScroll = (event?: Event) => {\n      // Call the onScroll callback if provided and event exists\n      if (event && onScroll) {\n        onScroll(event);\n      }\n\n      // Handle fade edges state update if enabled\n      if (fadeEdges) {\n        if (orientation === \"vertical\") {\n          const { scrollTop, scrollHeight, clientHeight } = viewport;\n          const isScrollable = scrollHeight > clientHeight;\n          setScrollState({\n            isAtStart: scrollTop <= 1,\n            isAtEnd: scrollTop >= scrollHeight - clientHeight - 1,\n            isScrollable,\n          });\n        } else {\n          const { scrollLeft, scrollWidth, clientWidth } = viewport;\n          // Add a small buffer (2px) to account for rounding errors\n          const isScrollable = scrollWidth > clientWidth + 2;\n          setScrollState({\n            isAtStart: scrollLeft <= 1,\n            isAtEnd: scrollLeft >= scrollWidth - clientWidth - 1,\n            isScrollable,\n          });\n        }\n      }\n    };\n\n    // Initial check (without event)\n    handleScroll();\n\n    // Use a timeout to check again after content might have rendered\n    const timeoutId = setTimeout(handleScroll, 0);\n\n    viewport.addEventListener(\"scroll\", handleScroll);\n\n    // Add resize observer to detect content size changes\n    const resizeObserver = new ResizeObserver(() => {\n      handleScroll();\n    });\n    resizeObserver.observe(viewport);\n\n    return () => {\n      clearTimeout(timeoutId);\n      viewport.removeEventListener(\"scroll\", handleScroll);\n      resizeObserver.disconnect();\n    };\n  }, [fadeEdges, orientation, onScroll]);\n  return (\n    <BaseScrollArea.Root\n      className={clsx(cls(\"scroll-area\"), className)}\n      {...rest}\n    >\n      <BaseScrollArea.Viewport\n        ref={viewportRef}\n        className={clsx(\n          cls(\"scroll-area-viewport\"),\n          fadeEdges &&\n            scrollState.isScrollable &&\n            orientation === \"vertical\" &&\n            scrollState.isAtStart &&\n            cls(\"scroll-area-fade-bottom-only\"),\n          fadeEdges &&\n            scrollState.isScrollable &&\n            orientation === \"vertical\" &&\n            scrollState.isAtEnd &&\n            cls(\"scroll-area-fade-top-only\"),\n          fadeEdges &&\n            scrollState.isScrollable &&\n            orientation === \"vertical\" &&\n            !scrollState.isAtStart &&\n            !scrollState.isAtEnd &&\n            cls(\"scroll-area-fade-both-vertical\"),\n          fadeEdges &&\n            scrollState.isScrollable &&\n            orientation === \"horizontal\" &&\n            scrollState.isAtStart &&\n            cls(\"scroll-area-fade-right-only\"),\n          fadeEdges &&\n            scrollState.isScrollable &&\n            orientation === \"horizontal\" &&\n            scrollState.isAtEnd &&\n            cls(\"scroll-area-fade-left-only\"),\n          fadeEdges &&\n            scrollState.isScrollable &&\n            orientation === \"horizontal\" &&\n            !scrollState.isAtStart &&\n            !scrollState.isAtEnd &&\n            cls(\"scroll-area-fade-both-horizontal\"),\n          classNames?.viewport\n        )}\n        style={styles?.viewport}\n      >\n        {orientation == \"horizontal\" ? (\n          <BaseScrollArea.Content\n            className={clsx(cls(\"scroll-area-content\"), classNames?.content)}\n            style={styles?.content}\n          >\n            {children}\n          </BaseScrollArea.Content>\n        ) : (\n          children\n        )}\n      </BaseScrollArea.Viewport>\n      <BaseScrollArea.Scrollbar\n        className={clsx(cls(\"scroll-area-scrollbar\"), classNames?.scrollbar)}\n        orientation={orientation}\n        data-orientation={orientation}\n        style={styles?.scrollbar}\n      >\n        <BaseScrollArea.Thumb\n          className={clsx(cls(\"scroll-area-thumb\"), classNames?.thumb)}\n          style={styles?.thumb}\n        />\n      </BaseScrollArea.Scrollbar>\n    </BaseScrollArea.Root>\n  );\n};\n"],"names":["ScrollArea","children","className","classNames","orientation","fadeEdges","onScroll","styles","rest","cls","useCls","viewportRef","useRef","scrollState","setScrollState","useState","useEffect","viewport","handleScroll","event","scrollTop","scrollHeight","clientHeight","isScrollable","scrollLeft","scrollWidth","clientWidth","timeoutId","resizeObserver","jsxs","BaseScrollArea","clsx","jsx"],"mappings":"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"}

package/dist/components/table/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/components/table/component.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,OAAO,IAAI,QAAQ,EAEnB,KAAK,UAAU,IAAI,aAAa,EAChC,KAAK,QAAQ,EACd,MAAM,eAAe,CAAC;AAKvB,OAAO,EAIL,GAAG,EACH,YAAY,EAGb,MAAM,OAAO,CAAC;AAGf,OAAO,aAAa,CAAC;AAGrB,MAAM,WAAW,UAAU,CAAC,UAAU,SAAS,MAAM,GAAG,MAAM,CAC5D,SAAQ,aAAa,CAAC,UAAU,CAAC;IACjC;;OAEG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACrC;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;CAC/B;AAGD,QAAA,MAAM,kBAAkB,GAAI,UAAU,SAAS,MAAM,GAAG,MAAM,EAC5D,0GAUG,UAAU,CAAC,UAAU,CAAC,EACzB,KAAK,GAAG,CAAC,QAAQ,CAAC,4CAsInB,CAAC;AAEF,QAAA,MAAM,aAAa,EAAqC,CACtD,UAAU,SAAS,MAAM,GAAG,MAAM,EAElC,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAA;CAAE,KAC7D,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAG3C,eAAO,MAAM,KAAK,EASZ,OAAO,aAAa,GAAG;IAC3B,MAAM,EAAE,OAAO,QAAQ,CAAC,MAAM,CAAC;IAC/B,WAAW,EAAE,OAAO,QAAQ,CAAC,WAAW,CAAC;IACzC,gBAAgB,EAAE,OAAO,QAAQ,CAAC,gBAAgB,CAAC;IACnD,aAAa,EAAE,OAAO,QAAQ,CAAC,aAAa,CAAC;IAC7C,aAAa,EAAE,OAAO,QAAQ,CAAC,aAAa,CAAC;IAC7C,gBAAgB,EAAE,OAAO,QAAQ,CAAC,gBAAgB,CAAC;IACnD,cAAc,EAAE,OAAO,QAAQ,CAAC,cAAc,CAAC;IAC/C,OAAO,EAAE,OAAO,QAAQ,CAAC,OAAO,CAAC;CAClC,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/components/table/component.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,OAAO,IAAI,QAAQ,EAEnB,KAAK,UAAU,IAAI,aAAa,EAChC,KAAK,QAAQ,EACd,MAAM,eAAe,CAAC;AAKvB,OAAO,EAIL,GAAG,EACH,YAAY,EAGb,MAAM,OAAO,CAAC;AAGf,OAAO,aAAa,CAAC;AAGrB,MAAM,WAAW,UAAU,CAAC,UAAU,SAAS,MAAM,GAAG,MAAM,CAC5D,SAAQ,aAAa,CAAC,UAAU,CAAC;IACjC;;OAEG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACrC;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;CAC/B;AAGD,QAAA,MAAM,kBAAkB,GAAI,UAAU,SAAS,MAAM,GAAG,MAAM,EAC5D,0GAUG,UAAU,CAAC,UAAU,CAAC,EACzB,KAAK,GAAG,CAAC,QAAQ,CAAC,4CAuInB,CAAC;AAEF,QAAA,MAAM,aAAa,EAAqC,CACtD,UAAU,SAAS,MAAM,GAAG,MAAM,EAElC,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAA;CAAE,KAC7D,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAG3C,eAAO,MAAM,KAAK,EASZ,OAAO,aAAa,GAAG;IAC3B,MAAM,EAAE,OAAO,QAAQ,CAAC,MAAM,CAAC;IAC/B,WAAW,EAAE,OAAO,QAAQ,CAAC,WAAW,CAAC;IACzC,gBAAgB,EAAE,OAAO,QAAQ,CAAC,gBAAgB,CAAC;IACnD,aAAa,EAAE,OAAO,QAAQ,CAAC,aAAa,CAAC;IAC7C,aAAa,EAAE,OAAO,QAAQ,CAAC,aAAa,CAAC;IAC7C,gBAAgB,EAAE,OAAO,QAAQ,CAAC,gBAAgB,CAAC;IACnD,cAAc,EAAE,OAAO,QAAQ,CAAC,cAAc,CAAC;IAC/C,OAAO,EAAE,OAAO,QAAQ,CAAC,OAAO,CAAC;CAClC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/table/component.tsx"],"sourcesContent":["\"use client\";\nimport {\n  default as AntTable,\n  type ColumnType,\n  type TableProps as AntTableProps,\n  type TableRef,\n} from \"antd/es/table\";\nimport { CaretDownIcon, CaretUpIcon, FunnelIcon } from \"@bioturing/assets\";\nimport { clsx, useCls } from \"../utils\";\nimport Empty from \"../empty/component\";\nimport { SpinProps } from \"antd/es/spin\";\nimport {\n  useState,\n  useEffect,\n  forwardRef,\n  Ref,\n  ForwardedRef,\n  useCallback,\n  useRef,\n} from \"react\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\n// Define interface with all the generic type parameters from AntTable without any\nexport interface TableProps<RecordType extends object = object>\n  extends AntTableProps<RecordType> {\n  /**\n   * Add empty description for the table\n   */\n  emptyDescription?: React.ReactNode;\n  /**\n   * Table ref\n   */\n  tableRef?: React.Ref<HTMLDivElement>;\n  /**\n   * Table style\n   */\n  variant?: \"default\" | \"zebra\";\n}\n\n// Simple wrapper component with proper generics\nconst InnerInternalTable = <RecordType extends object = object>(\n  {\n    columns,\n    locale,\n    emptyDescription,\n    loading,\n    virtual,\n    scroll: scrollProp = {},\n    className,\n    variant,\n    ...rest\n  }: TableProps<RecordType>,\n  ref: Ref<TableRef>\n) => {\n  const cls = useCls();\n  const [scroll, setScroll] = useState<TableProps[\"scroll\"]>(\n    virtual\n      ? {}\n      : {\n          x: \"fit-content\",\n        }\n  );\n\n  const innerRef = useRef<TableRef>(null);\n  const tablePaginationHeight = useRef<number>(0);\n\n  useEffect(() => {\n    if (!innerRef.current || !virtual) return;\n    const tableEl = innerRef.current?.nativeElement;\n    const parentEl = tableEl?.parentElement;\n    if (!parentEl) return;\n    const thead = tableEl?.querySelector(\n      `.${cls(\"table-thead\")}`\n    ) as HTMLElement;\n    const tpagination = tableEl?.querySelector(\n      `.${cls(\"table-pagination\")}`\n    ) as HTMLElement;\n    if (tpagination) {\n      const mt = getComputedStyle(tpagination).marginTop;\n      const mb = getComputedStyle(tpagination).marginBottom;\n      tablePaginationHeight.current =\n        tpagination.offsetHeight + parseInt(mt) + parseInt(mb);\n    }\n    const resizeObserver = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        if (entry.target) {\n          setScroll({\n            y:\n              parentEl.offsetHeight -\n              (thead ? thead?.offsetHeight : 0) -\n              tablePaginationHeight.current,\n          });\n        }\n      }\n    });\n    if (parentEl && virtual) {\n      resizeObserver.observe(parentEl);\n    }\n    return () => {\n      if (parentEl && virtual) {\n        resizeObserver.disconnect();\n      }\n    };\n  }, [virtual, cls]);\n\n  const modifiedColumns = columns\n    ? columns.map((column: ColumnType<RecordType>): ColumnType<RecordType> => {\n        return {\n          sortIcon: ({ sortOrder }) => {\n            return (\n              <span\n                className={cls(\n                  \"table-column-sort-icon\",\n                  sortOrder\n                    ? `table-column-sort-icon-${sortOrder}`\n                    : `table-column-sort-icon-none`\n                )}\n              >\n                {!sortOrder ? (\n                  <>\n                    <CaretUpIcon weight=\"fill\" />{\" \"}\n                    <CaretDownIcon weight=\"fill\" />\n                  </>\n                ) : sortOrder === \"ascend\" ? (\n                  <CaretUpIcon weight=\"fill\" />\n                ) : (\n                  <CaretDownIcon weight=\"fill\" />\n                )}\n              </span>\n            );\n          },\n          filterIcon: (_filtered) => {\n            return (\n              <span className={cls(\"table-column-filter-icon\")}>\n                <FunnelIcon weight=\"fill\" />\n              </span>\n            );\n          },\n          ...column,\n        };\n      })\n    : undefined;\n  const modifiedLocale = {\n    emptyText: <Empty description={emptyDescription} />,\n    ...locale,\n  };\n  let spinProps: SpinProps | undefined;\n  if (typeof loading === \"boolean\") {\n    spinProps = {\n      spinning: loading,\n      indicator: <span className={cls(\"spin-loader\")} />,\n    };\n  } else if (typeof loading === \"object\") {\n    spinProps = {\n      spinning: true,\n      indicator: <span className={cls(\"spin-loader\")} />,\n      ...loading,\n    };\n  }\n  const callbackRef = useCallback(\n    (tableRef: TableRef) => {\n      if (tableRef) {\n        if (typeof ref === \"function\") {\n          ref(tableRef);\n        }\n        if (ref && typeof ref === \"object\" && \"current\" in ref) {\n          ref.current = tableRef;\n        }\n        innerRef.current = tableRef;\n      }\n    },\n    [ref]\n  );\n\n  return (\n    <AntTable\n      ref={callbackRef}\n      columns={modifiedColumns}\n      loading={spinProps}\n      locale={modifiedLocale}\n      virtual={virtual}\n      scroll={{ ...scroll, ...scrollProp }}\n      className={clsx(variant === \"zebra\" ? cls(\"table-zebra\") : \"\", className)}\n      {...rest}\n    />\n  );\n};\n\nconst InternalTable = forwardRef(InnerInternalTable) as <\n  RecordType extends object = object\n>(\n  props: TableProps<RecordType> & { ref?: ForwardedRef<TableRef> }\n) => ReturnType<typeof InnerInternalTable>;\n\n// Create the final component with all static properties\nexport const Table = Object.assign(InternalTable, {\n  Column: AntTable.Column,\n  ColumnGroup: AntTable.ColumnGroup,\n  SELECTION_COLUMN: AntTable.SELECTION_COLUMN,\n  EXPAND_COLUMN: AntTable.EXPAND_COLUMN,\n  SELECTION_ALL: AntTable.SELECTION_ALL,\n  SELECTION_INVERT: AntTable.SELECTION_INVERT,\n  SELECTION_NONE: AntTable.SELECTION_NONE,\n  Summary: AntTable.Summary,\n}) as typeof InternalTable & {\n  Column: typeof AntTable.Column;\n  ColumnGroup: typeof AntTable.ColumnGroup;\n  SELECTION_COLUMN: typeof AntTable.SELECTION_COLUMN;\n  EXPAND_COLUMN: typeof AntTable.EXPAND_COLUMN;\n  SELECTION_ALL: typeof AntTable.SELECTION_ALL;\n  SELECTION_INVERT: typeof AntTable.SELECTION_INVERT;\n  SELECTION_NONE: typeof AntTable.SELECTION_NONE;\n  Summary: typeof AntTable.Summary;\n};\n"],"names":["InnerInternalTable","columns","locale","emptyDescription","loading","virtual","scrollProp","className","variant","rest","ref","cls","useCls","scroll","setScroll","useState","innerRef","useRef","tablePaginationHeight","useEffect","tableEl","parentEl","thead","tpagination","mt","mb","resizeObserver","entries","entry","modifiedColumns","column","sortOrder","jsx","CaretUpIcon","CaretDownIcon","jsxs","Fragment","_filtered","FunnelIcon","modifiedLocale","Empty","spinProps","callbackRef","useCallback","tableRef","AntTable","clsx","InternalTable","forwardRef","Table"],"mappings":"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"}
+{"version":3,"file":"component.js","sources":["../../../src/components/table/component.tsx"],"sourcesContent":["\"use client\";\nimport {\n  default as AntTable,\n  type ColumnType,\n  type TableProps as AntTableProps,\n  type TableRef,\n} from \"antd/es/table\";\nimport { CaretDownIcon, CaretUpIcon, FunnelIcon } from \"@bioturing/assets\";\nimport { clsx, useCls } from \"../utils\";\nimport Empty from \"../empty/component\";\nimport { SpinProps } from \"antd/es/spin\";\nimport {\n  useState,\n  useEffect,\n  forwardRef,\n  Ref,\n  ForwardedRef,\n  useCallback,\n  useRef,\n} from \"react\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\n// Define interface with all the generic type parameters from AntTable without any\nexport interface TableProps<RecordType extends object = object>\n  extends AntTableProps<RecordType> {\n  /**\n   * Add empty description for the table\n   */\n  emptyDescription?: React.ReactNode;\n  /**\n   * Table ref\n   */\n  tableRef?: React.Ref<HTMLDivElement>;\n  /**\n   * Table style\n   */\n  variant?: \"default\" | \"zebra\";\n}\n\n// Simple wrapper component with proper generics\nconst InnerInternalTable = <RecordType extends object = object>(\n  {\n    columns,\n    locale,\n    emptyDescription,\n    loading,\n    virtual,\n    scroll: scrollProp = {},\n    className,\n    variant,\n    ...rest\n  }: TableProps<RecordType>,\n  ref: Ref<TableRef>\n) => {\n  const cls = useCls();\n  \n  const [scroll, setScroll] = useState<TableProps[\"scroll\"]>(\n    virtual\n      ? {}\n      : {\n          x: \"fit-content\",\n        }\n  );\n\n  const innerRef = useRef<TableRef>(null);\n  const tablePaginationHeight = useRef<number>(0);\n\n  useEffect(() => {\n    if (!innerRef.current || !virtual) return;\n    const tableEl = innerRef.current?.nativeElement;\n    const parentEl = tableEl?.parentElement;\n    if (!parentEl) return;\n    const thead = tableEl?.querySelector(\n      `.${cls(\"table-thead\")}`\n    ) as HTMLElement;\n    const tpagination = tableEl?.querySelector(\n      `.${cls(\"table-pagination\")}`\n    ) as HTMLElement;\n    if (tpagination) {\n      const mt = getComputedStyle(tpagination).marginTop;\n      const mb = getComputedStyle(tpagination).marginBottom;\n      tablePaginationHeight.current =\n        tpagination.offsetHeight + parseInt(mt) + parseInt(mb);\n    }\n    const resizeObserver = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        if (entry.target) {\n          setScroll({\n            y:\n              parentEl.offsetHeight -\n              (thead ? thead?.offsetHeight : 0) -\n              tablePaginationHeight.current,\n          });\n        }\n      }\n    });\n    if (parentEl && virtual) {\n      resizeObserver.observe(parentEl);\n    }\n    return () => {\n      if (parentEl && virtual) {\n        resizeObserver.disconnect();\n      }\n    };\n  }, [virtual, cls]);\n\n  const modifiedColumns = columns\n    ? columns.map((column: ColumnType<RecordType>): ColumnType<RecordType> => {\n        return {\n          sortIcon: ({ sortOrder }) => {\n            return (\n              <span\n                className={cls(\n                  \"table-column-sort-icon\",\n                  sortOrder\n                    ? `table-column-sort-icon-${sortOrder}`\n                    : `table-column-sort-icon-none`\n                )}\n              >\n                {!sortOrder ? (\n                  <>\n                    <CaretUpIcon weight=\"fill\" />{\" \"}\n                    <CaretDownIcon weight=\"fill\" />\n                  </>\n                ) : sortOrder === \"ascend\" ? (\n                  <CaretUpIcon weight=\"fill\" />\n                ) : (\n                  <CaretDownIcon weight=\"fill\" />\n                )}\n              </span>\n            );\n          },\n          filterIcon: (_filtered) => {\n            return (\n              <span className={cls(\"table-column-filter-icon\")}>\n                <FunnelIcon weight=\"fill\" />\n              </span>\n            );\n          },\n          ...column,\n        };\n      })\n    : undefined;\n  const modifiedLocale = {\n    emptyText: <Empty description={emptyDescription} />,\n    ...locale,\n  };\n  let spinProps: SpinProps | undefined;\n  if (typeof loading === \"boolean\") {\n    spinProps = {\n      spinning: loading,\n      indicator: <span className={cls(\"spin-loader\")} />,\n    };\n  } else if (typeof loading === \"object\") {\n    spinProps = {\n      spinning: true,\n      indicator: <span className={cls(\"spin-loader\")} />,\n      ...loading,\n    };\n  }\n  const callbackRef = useCallback(\n    (tableRef: TableRef) => {\n      if (tableRef) {\n        if (typeof ref === \"function\") {\n          ref(tableRef);\n        }\n        if (ref && typeof ref === \"object\" && \"current\" in ref) {\n          ref.current = tableRef;\n        }\n        innerRef.current = tableRef;\n      }\n    },\n    [ref]\n  );\n\n  return (\n    <AntTable\n      ref={callbackRef}\n      columns={modifiedColumns}\n      loading={spinProps}\n      locale={modifiedLocale}\n      virtual={virtual}\n      scroll={{ ...scroll, ...scrollProp }}\n      className={clsx(variant === \"zebra\" ? cls(\"table-zebra\") : \"\", className)}\n      {...rest}\n    />\n  );\n};\n\nconst InternalTable = forwardRef(InnerInternalTable) as <\n  RecordType extends object = object\n>(\n  props: TableProps<RecordType> & { ref?: ForwardedRef<TableRef> }\n) => ReturnType<typeof InnerInternalTable>;\n\n// Create the final component with all static properties\nexport const Table = Object.assign(InternalTable, {\n  Column: AntTable.Column,\n  ColumnGroup: AntTable.ColumnGroup,\n  SELECTION_COLUMN: AntTable.SELECTION_COLUMN,\n  EXPAND_COLUMN: AntTable.EXPAND_COLUMN,\n  SELECTION_ALL: AntTable.SELECTION_ALL,\n  SELECTION_INVERT: AntTable.SELECTION_INVERT,\n  SELECTION_NONE: AntTable.SELECTION_NONE,\n  Summary: AntTable.Summary,\n}) as typeof InternalTable & {\n  Column: typeof AntTable.Column;\n  ColumnGroup: typeof AntTable.ColumnGroup;\n  SELECTION_COLUMN: typeof AntTable.SELECTION_COLUMN;\n  EXPAND_COLUMN: typeof AntTable.EXPAND_COLUMN;\n  SELECTION_ALL: typeof AntTable.SELECTION_ALL;\n  SELECTION_INVERT: typeof AntTable.SELECTION_INVERT;\n  SELECTION_NONE: typeof AntTable.SELECTION_NONE;\n  Summary: typeof AntTable.Summary;\n};\n"],"names":["InnerInternalTable","columns","locale","emptyDescription","loading","virtual","scrollProp","className","variant","rest","ref","cls","useCls","scroll","setScroll","useState","innerRef","useRef","tablePaginationHeight","useEffect","tableEl","parentEl","thead","tpagination","mt","mb","resizeObserver","entries","entry","modifiedColumns","column","sortOrder","jsx","CaretUpIcon","CaretDownIcon","jsxs","Fragment","_filtered","FunnelIcon","modifiedLocale","Empty","spinProps","callbackRef","useCallback","tableRef","AntTable","clsx","InternalTable","forwardRef","Table"],"mappings":"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"}

package/dist/components/theme-provider/component.d.ts

@@ -1,7 +1,11 @@
 import { ConfigProviderProps } from 'antd/es/config-provider';
+import { StyleProviderProps } from '@ant-design/cssinjs';
+import { Theme } from '../../tokens';
 export interface ThemeProviderProps extends Omit<ConfigProviderProps, "theme" | "prefixCls"> {
-    theme: "light" | "dark";
     appendClassesTo?: string | HTMLElement;
+    appendClassesToChildren?: boolean;
+    styleProviderProps?: StyleProviderProps;
+    theme?: Theme;
 }
-export declare const ThemeProvider: ({ theme, appendClassesTo, children, }: ThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ThemeProvider: ({ theme, appendClassesTo, appendClassesToChildren, styleProviderProps, children, ...configProviderProps }: ThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=component.d.ts.map

package/dist/components/theme-provider/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/components/theme-provider/component.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,yBAAyB,CAAC;AAMjC,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,WAAW,CAAC;IACxD,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;CACxC;AA2CD,eAAO,MAAM,aAAa,GAAI,uCAI3B,kBAAkB,4CAapB,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/components/theme-provider/component.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EAAiB,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAExE,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAGrC,OAAO,aAAa,CAAC;AAGrB,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,WAAW,CAAC;IACxD,eAAe,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IACvC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC,KAAK,CAAC,EAAE,KAAK,CAAC;CACf;AAyCD,eAAO,MAAM,aAAa,GAAI,2GAO3B,kBAAkB,4CAkBpB,CAAC"}