@raystack/apsara 1.0.0-rc.0 → 1.0.0-rc.1

package/dist/components/context-menu/context-menu-root.js

@@ -0,0 +1,75 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { ContextMenu } from '@base-ui/react';
+import { useState, useRef, useCallback } from 'react';
+import { MenuContext, useMenuContext } from '../menu/menu-root.js';
+
+const ContextMenuRoot = ({ autocomplete, autocompleteMode = 'auto', inputValue: providedInputValue, onInputValueChange, defaultInputValue = '', open: providedOpen, onOpenChange, defaultOpen = false, ...props }) => {
+    const [internalInputValue, setInternalInputValue] = useState(defaultInputValue);
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const open = providedOpen ?? internalOpen;
+    const inputRef = useRef(null);
+    const contentRef = useRef(null);
+    const isInitialRender = useRef(true);
+    const inputValue = providedInputValue ?? internalInputValue;
+    const setValue = useCallback((value) => {
+        setInternalInputValue(value);
+        onInputValueChange?.(value);
+    }, [onInputValueChange]);
+    const handleOpenChange = useCallback((value, eventDetails) => {
+        if (!value && autocomplete) {
+            setValue('');
+            isInitialRender.current = true;
+        }
+        setInternalOpen(value);
+        onOpenChange?.(value, eventDetails);
+    }, [onOpenChange, setValue, autocomplete]);
+    return (jsx(MenuContext, { value: {
+            autocomplete,
+            inputRef,
+            autocompleteMode,
+            inputValue,
+            onInputValueChange: setValue,
+            open: open,
+            isInitialRender,
+            contentRef
+        }, children: jsx(ContextMenu.Root, { open: open, onOpenChange: handleOpenChange, loopFocus: false, ...props }) }));
+};
+ContextMenuRoot.displayName = 'ContextMenu';
+const ContextMenuSubMenu = ({ autocomplete, autocompleteMode = 'auto', inputValue: providedInputValue, onInputValueChange, defaultInputValue = '', open: providedOpen, onOpenChange, defaultOpen = false, ...props }) => {
+    const [internalInputValue, setInternalInputValue] = useState(defaultInputValue);
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const open = providedOpen ?? internalOpen;
+    const parentContext = useMenuContext();
+    const inputRef = useRef(null);
+    const isInitialRender = useRef(true);
+    const contentRef = useRef(null);
+    const inputValue = providedInputValue ?? internalInputValue;
+    const setValue = useCallback((value) => {
+        setInternalInputValue(value);
+        onInputValueChange?.(value);
+    }, [onInputValueChange]);
+    const handleOpenChange = useCallback((value, eventDetails) => {
+        if (!value && autocomplete) {
+            setValue('');
+            isInitialRender.current = true;
+        }
+        setInternalOpen(value);
+        onOpenChange?.(value, eventDetails);
+    }, [onOpenChange, setValue, autocomplete]);
+    return (jsx(MenuContext, { value: {
+            autocomplete,
+            inputRef,
+            parent: parentContext,
+            autocompleteMode,
+            inputValue,
+            onInputValueChange: setValue,
+            open: open,
+            isInitialRender,
+            contentRef
+        }, children: jsx(ContextMenu.SubmenuRoot, { loopFocus: false, open: open, onOpenChange: handleOpenChange, ...props }) }));
+};
+ContextMenuSubMenu.displayName = 'ContextMenu.SubMenu';
+
+export { ContextMenuRoot, ContextMenuSubMenu };
+//# sourceMappingURL=context-menu-root.js.map

package/dist/components/context-menu/context-menu-root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu-root.js","sources":["../../../components/context-menu/context-menu-root.tsx"],"sourcesContent":["'use client';\n\nimport { ContextMenu as ContextMenuPrimitive } from '@base-ui/react';\nimport { useCallback, useRef, useState } from 'react';\nimport { MenuContext, useMenuContext } from '../menu/menu-root';\n\nexport interface NormalContextMenuRootProps\n  extends ContextMenuPrimitive.Root.Props {\n  autocomplete?: false;\n  autocompleteMode?: never;\n  inputValue?: never;\n  onInputValueChange?: never;\n  defaultInputValue?: never;\n}\n\nexport interface AutocompleteContextMenuRootProps\n  extends ContextMenuPrimitive.Root.Props {\n  autocomplete: true;\n  autocompleteMode?: 'auto' | 'manual';\n  inputValue?: string;\n  onInputValueChange?: (value: string) => void;\n  defaultInputValue?: string;\n}\n\nexport type ContextMenuRootProps =\n  | NormalContextMenuRootProps\n  | AutocompleteContextMenuRootProps;\n\nexport const ContextMenuRoot = ({\n  autocomplete,\n  autocompleteMode = 'auto',\n  inputValue: providedInputValue,\n  onInputValueChange,\n  defaultInputValue = '',\n  open: providedOpen,\n  onOpenChange,\n  defaultOpen = false,\n  ...props\n}: ContextMenuRootProps) => {\n  const [internalInputValue, setInternalInputValue] =\n    useState(defaultInputValue);\n\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n  const open = providedOpen ?? internalOpen;\n  const inputRef = useRef<HTMLInputElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const isInitialRender = useRef(true);\n\n  const inputValue = providedInputValue ?? internalInputValue;\n\n  const setValue = useCallback(\n    (value: string) => {\n      setInternalInputValue(value);\n      onInputValueChange?.(value);\n    },\n    [onInputValueChange]\n  );\n\n  const handleOpenChange: ContextMenuPrimitive.Root.Props['onOpenChange'] =\n    useCallback(\n      (\n        value: boolean,\n        eventDetails: ContextMenuPrimitive.Root.ChangeEventDetails\n      ) => {\n        if (!value && autocomplete) {\n          setValue('');\n          isInitialRender.current = true;\n        }\n        setInternalOpen(value);\n        onOpenChange?.(value, eventDetails);\n      },\n      [onOpenChange, setValue, autocomplete]\n    );\n\n  return (\n    <MenuContext\n      value={{\n        autocomplete,\n        inputRef,\n        autocompleteMode,\n        inputValue,\n        onInputValueChange: setValue,\n        open: open,\n        isInitialRender,\n        contentRef\n      }}\n    >\n      <ContextMenuPrimitive.Root\n        open={open}\n        onOpenChange={handleOpenChange}\n        loopFocus={false}\n        {...props}\n      />\n    </MenuContext>\n  );\n};\nContextMenuRoot.displayName = 'ContextMenu';\n\nexport interface NormalContextMenuSubMenuProps\n  extends ContextMenuPrimitive.SubmenuRoot.Props {\n  autocomplete?: false;\n  autocompleteMode?: never;\n  inputValue?: never;\n  onInputValueChange?: never;\n  defaultInputValue?: never;\n}\n\nexport interface AutocompleteContextMenuSubMenuProps\n  extends ContextMenuPrimitive.SubmenuRoot.Props {\n  autocomplete: true;\n  autocompleteMode?: 'auto' | 'manual';\n  inputValue?: string;\n  onInputValueChange?: (value: string) => void;\n  defaultInputValue?: string;\n}\n\nexport type ContextMenuSubMenuProps =\n  | NormalContextMenuSubMenuProps\n  | AutocompleteContextMenuSubMenuProps;\n\nexport const ContextMenuSubMenu = ({\n  autocomplete,\n  autocompleteMode = 'auto',\n  inputValue: providedInputValue,\n  onInputValueChange,\n  defaultInputValue = '',\n  open: providedOpen,\n  onOpenChange,\n  defaultOpen = false,\n  ...props\n}: ContextMenuSubMenuProps) => {\n  const [internalInputValue, setInternalInputValue] =\n    useState(defaultInputValue);\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n  const open = providedOpen ?? internalOpen;\n  const parentContext = useMenuContext();\n  const inputRef = useRef<HTMLInputElement>(null);\n  const isInitialRender = useRef(true);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const inputValue = providedInputValue ?? internalInputValue;\n\n  const setValue = useCallback(\n    (value: string) => {\n      setInternalInputValue(value);\n      onInputValueChange?.(value);\n    },\n    [onInputValueChange]\n  );\n\n  const handleOpenChange: ContextMenuPrimitive.SubmenuRoot.Props['onOpenChange'] =\n    useCallback(\n      (\n        value: boolean,\n        eventDetails: ContextMenuPrimitive.SubmenuRoot.ChangeEventDetails\n      ) => {\n        if (!value && autocomplete) {\n          setValue('');\n          isInitialRender.current = true;\n        }\n        setInternalOpen(value);\n        onOpenChange?.(value, eventDetails);\n      },\n      [onOpenChange, setValue, autocomplete]\n    );\n\n  return (\n    <MenuContext\n      value={{\n        autocomplete,\n        inputRef,\n        parent: parentContext,\n        autocompleteMode,\n        inputValue,\n        onInputValueChange: setValue,\n        open: open,\n        isInitialRender,\n        contentRef\n      }}\n    >\n      <ContextMenuPrimitive.SubmenuRoot\n        loopFocus={false}\n        open={open}\n        onOpenChange={handleOpenChange}\n        {...props}\n      />\n    </MenuContext>\n  );\n};\nContextMenuSubMenu.displayName = 'ContextMenu.SubMenu';\n"],"names":[],"mappings":";;;;;;AA4Ba;;;AAeX;AACA;AACA;AACA;AAEA;AAEA;;AAGI;AACF;;AAUI;;AAEE;;;AAGF;;AAKN;;;;;AAOM;AACA;;;;AAaR;AACA;AAwBa;;;AAcX;AACA;AACA;AACA;AACA;AACA;AAEA;;AAGI;AACF;;AAUI;;AAEE;;;AAGF;;AAKN;;;AAKM;;;AAGA;AACA;;;;AAaR;AACA;;"}

package/dist/components/context-menu/context-menu-trigger.cjs

@@ -0,0 +1,36 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('@base-ui/react');
+var triangleRight = require('../../icons/assets/triangle-right.svg.cjs');
+var cell = require('../menu/cell.cjs');
+var menuRoot = require('../menu/menu-root.cjs');
+var utils = require('../menu/utils.cjs');
+
+const ContextMenuTrigger = ({ children, ...props }) => {
+    return (jsxRuntime.jsx(react.ContextMenu.Trigger, { ...props, children: children }));
+};
+ContextMenuTrigger.displayName = 'ContextMenu.Trigger';
+const ContextMenuSubTrigger = ({ children, value, trailingIcon = jsxRuntime.jsx(triangleRight.ReactComponent, {}), leadingIcon, ...props }) => {
+    const { parent, inputRef } = menuRoot.useMenuContext();
+    if (parent?.shouldFilter && !utils.getMatch(value, children, parent?.inputValue)) {
+        return null;
+    }
+    const cell$1 = jsxRuntime.jsx(cell.Cell, { leadingIcon: leadingIcon, trailingIcon: trailingIcon });
+    return (jsxRuntime.jsx(react.ContextMenu.SubmenuTrigger, { render: parent?.autocomplete ? (jsxRuntime.jsx(react.Autocomplete.Item, { value: value, render: cell$1, onPointerEnter: e => {
+                if (document?.activeElement !== parent?.inputRef?.current)
+                    parent?.inputRef?.current?.focus();
+                props?.onPointerEnter?.(e);
+            }, onKeyDown: e => {
+                requestAnimationFrame(() => {
+                    inputRef?.current?.focus();
+                });
+                props?.onKeyDown?.(e);
+            } })) : (cell$1), ...props, role: parent?.autocomplete ? 'option' : 'menuitem', "data-slot": 'menu-subtrigger', children: children }));
+};
+ContextMenuSubTrigger.displayName = 'ContextMenu.SubTrigger';
+
+exports.ContextMenuSubTrigger = ContextMenuSubTrigger;
+exports.ContextMenuTrigger = ContextMenuTrigger;
+//# sourceMappingURL=context-menu-trigger.cjs.map

package/dist/components/context-menu/context-menu-trigger.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu-trigger.cjs","sources":["../../../components/context-menu/context-menu-trigger.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Autocomplete as AutocompletePrimitive,\n  ContextMenu as ContextMenuPrimitive\n} from '@base-ui/react';\nimport { TriangleRightIcon } from '~/icons';\nimport { Cell, CellBaseProps } from '../menu/cell';\nimport { useMenuContext } from '../menu/menu-root';\nimport { getMatch } from '../menu/utils';\n\nexport interface ContextMenuTriggerProps\n  extends ContextMenuPrimitive.Trigger.Props {}\n\nexport const ContextMenuTrigger = ({\n  children,\n  ...props\n}: ContextMenuTriggerProps) => {\n  return (\n    <ContextMenuPrimitive.Trigger {...props}>\n      {children}\n    </ContextMenuPrimitive.Trigger>\n  );\n};\nContextMenuTrigger.displayName = 'ContextMenu.Trigger';\n\nexport interface ContextMenuSubTriggerProps\n  extends ContextMenuPrimitive.SubmenuTrigger.Props,\n    CellBaseProps {\n  value?: string;\n}\n\nexport const ContextMenuSubTrigger = ({\n  children,\n  value,\n  trailingIcon = <TriangleRightIcon />,\n  leadingIcon,\n  ...props\n}: ContextMenuSubTriggerProps) => {\n  const { parent, inputRef } = useMenuContext();\n\n  if (parent?.shouldFilter && !getMatch(value, children, parent?.inputValue)) {\n    return null;\n  }\n\n  const cell = <Cell leadingIcon={leadingIcon} trailingIcon={trailingIcon} />;\n  return (\n    <ContextMenuPrimitive.SubmenuTrigger\n      render={\n        parent?.autocomplete ? (\n          <AutocompletePrimitive.Item\n            value={value}\n            render={cell}\n            onPointerEnter={e => {\n              if (document?.activeElement !== parent?.inputRef?.current)\n                parent?.inputRef?.current?.focus();\n              props?.onPointerEnter?.(e);\n            }}\n            onKeyDown={e => {\n              requestAnimationFrame(() => {\n                inputRef?.current?.focus();\n              });\n              props?.onKeyDown?.(e);\n            }}\n          />\n        ) : (\n          cell\n        )\n      }\n      {...props}\n      role={parent?.autocomplete ? 'option' : 'menuitem'}\n      data-slot='menu-subtrigger'\n    >\n      {children}\n    </ContextMenuPrimitive.SubmenuTrigger>\n  );\n};\nContextMenuSubTrigger.displayName = 'ContextMenu.SubTrigger';\n"],"names":[],"mappings":";;;;;;;;;;AAcO;;AASP;AACA;;;AAiBE;AACE;;AAGF;AACA;;AASc;AACF;AACF;;AAGI;AACF;AACA;AACF;AAaZ;AACA;;;"}

package/dist/components/context-menu/context-menu-trigger.d.ts

@@ -0,0 +1,16 @@
+import { ContextMenu as ContextMenuPrimitive } from '@base-ui/react';
+import { CellBaseProps } from '../menu/cell';
+export interface ContextMenuTriggerProps extends ContextMenuPrimitive.Trigger.Props {
+}
+export declare const ContextMenuTrigger: {
+    ({ children, ...props }: ContextMenuTriggerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export interface ContextMenuSubTriggerProps extends ContextMenuPrimitive.SubmenuTrigger.Props, CellBaseProps {
+    value?: string;
+}
+export declare const ContextMenuSubTrigger: {
+    ({ children, value, trailingIcon, leadingIcon, ...props }: ContextMenuSubTriggerProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+//# sourceMappingURL=context-menu-trigger.d.ts.map

package/dist/components/context-menu/context-menu-trigger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu-trigger.d.ts","sourceRoot":"","sources":["../../../components/context-menu/context-menu-trigger.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,WAAW,IAAI,oBAAoB,EACpC,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAQ,aAAa,EAAE,MAAM,cAAc,CAAC;AAInD,MAAM,WAAW,uBACf,SAAQ,oBAAoB,CAAC,OAAO,CAAC,KAAK;CAAG;AAE/C,eAAO,MAAM,kBAAkB;6BAG5B,uBAAuB;;CAMzB,CAAC;AAGF,MAAM,WAAW,0BACf,SAAQ,oBAAoB,CAAC,cAAc,CAAC,KAAK,EAC/C,aAAa;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,qBAAqB;+DAM/B,0BAA0B;;CAsC5B,CAAC"}

package/dist/components/context-menu/context-menu-trigger.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { ContextMenu, Autocomplete } from '@base-ui/react';
+import { ReactComponent as SvgTriangleRight } from '../../icons/assets/triangle-right.svg.js';
+import { Cell } from '../menu/cell.js';
+import { useMenuContext } from '../menu/menu-root.js';
+import { getMatch } from '../menu/utils.js';
+
+const ContextMenuTrigger = ({ children, ...props }) => {
+    return (jsx(ContextMenu.Trigger, { ...props, children: children }));
+};
+ContextMenuTrigger.displayName = 'ContextMenu.Trigger';
+const ContextMenuSubTrigger = ({ children, value, trailingIcon = jsx(SvgTriangleRight, {}), leadingIcon, ...props }) => {
+    const { parent, inputRef } = useMenuContext();
+    if (parent?.shouldFilter && !getMatch(value, children, parent?.inputValue)) {
+        return null;
+    }
+    const cell = jsx(Cell, { leadingIcon: leadingIcon, trailingIcon: trailingIcon });
+    return (jsx(ContextMenu.SubmenuTrigger, { render: parent?.autocomplete ? (jsx(Autocomplete.Item, { value: value, render: cell, onPointerEnter: e => {
+                if (document?.activeElement !== parent?.inputRef?.current)
+                    parent?.inputRef?.current?.focus();
+                props?.onPointerEnter?.(e);
+            }, onKeyDown: e => {
+                requestAnimationFrame(() => {
+                    inputRef?.current?.focus();
+                });
+                props?.onKeyDown?.(e);
+            } })) : (cell), ...props, role: parent?.autocomplete ? 'option' : 'menuitem', "data-slot": 'menu-subtrigger', children: children }));
+};
+ContextMenuSubTrigger.displayName = 'ContextMenu.SubTrigger';
+
+export { ContextMenuSubTrigger, ContextMenuTrigger };
+//# sourceMappingURL=context-menu-trigger.js.map

package/dist/components/context-menu/context-menu-trigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu-trigger.js","sources":["../../../components/context-menu/context-menu-trigger.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Autocomplete as AutocompletePrimitive,\n  ContextMenu as ContextMenuPrimitive\n} from '@base-ui/react';\nimport { TriangleRightIcon } from '~/icons';\nimport { Cell, CellBaseProps } from '../menu/cell';\nimport { useMenuContext } from '../menu/menu-root';\nimport { getMatch } from '../menu/utils';\n\nexport interface ContextMenuTriggerProps\n  extends ContextMenuPrimitive.Trigger.Props {}\n\nexport const ContextMenuTrigger = ({\n  children,\n  ...props\n}: ContextMenuTriggerProps) => {\n  return (\n    <ContextMenuPrimitive.Trigger {...props}>\n      {children}\n    </ContextMenuPrimitive.Trigger>\n  );\n};\nContextMenuTrigger.displayName = 'ContextMenu.Trigger';\n\nexport interface ContextMenuSubTriggerProps\n  extends ContextMenuPrimitive.SubmenuTrigger.Props,\n    CellBaseProps {\n  value?: string;\n}\n\nexport const ContextMenuSubTrigger = ({\n  children,\n  value,\n  trailingIcon = <TriangleRightIcon />,\n  leadingIcon,\n  ...props\n}: ContextMenuSubTriggerProps) => {\n  const { parent, inputRef } = useMenuContext();\n\n  if (parent?.shouldFilter && !getMatch(value, children, parent?.inputValue)) {\n    return null;\n  }\n\n  const cell = <Cell leadingIcon={leadingIcon} trailingIcon={trailingIcon} />;\n  return (\n    <ContextMenuPrimitive.SubmenuTrigger\n      render={\n        parent?.autocomplete ? (\n          <AutocompletePrimitive.Item\n            value={value}\n            render={cell}\n            onPointerEnter={e => {\n              if (document?.activeElement !== parent?.inputRef?.current)\n                parent?.inputRef?.current?.focus();\n              props?.onPointerEnter?.(e);\n            }}\n            onKeyDown={e => {\n              requestAnimationFrame(() => {\n                inputRef?.current?.focus();\n              });\n              props?.onKeyDown?.(e);\n            }}\n          />\n        ) : (\n          cell\n        )\n      }\n      {...props}\n      role={parent?.autocomplete ? 'option' : 'menuitem'}\n      data-slot='menu-subtrigger'\n    >\n      {children}\n    </ContextMenuPrimitive.SubmenuTrigger>\n  );\n};\nContextMenuSubTrigger.displayName = 'ContextMenu.SubTrigger';\n"],"names":[],"mappings":";;;;;;;;AAcO;;AASP;AACA;;;AAiBE;AACE;;AAGF;AACA;;AASc;AACF;AACF;;AAGI;AACF;AACA;AACF;AAaZ;AACA;;"}

package/dist/components/context-menu/context-menu.cjs

@@ -0,0 +1,23 @@
+'use strict';
+
+var contextMenuContent = require('./context-menu-content.cjs');
+var contextMenuItem = require('./context-menu-item.cjs');
+var contextMenuMisc = require('./context-menu-misc.cjs');
+var contextMenuRoot = require('./context-menu-root.cjs');
+var contextMenuTrigger = require('./context-menu-trigger.cjs');
+
+const ContextMenu = Object.assign(contextMenuRoot.ContextMenuRoot, {
+    Trigger: contextMenuTrigger.ContextMenuTrigger,
+    Content: contextMenuContent.ContextMenuContent,
+    Item: contextMenuItem.ContextMenuItem,
+    Group: contextMenuMisc.ContextMenuGroup,
+    Label: contextMenuMisc.ContextMenuLabel,
+    Separator: contextMenuMisc.ContextMenuSeparator,
+    EmptyState: contextMenuMisc.ContextMenuEmptyState,
+    Submenu: contextMenuRoot.ContextMenuSubMenu,
+    SubmenuTrigger: contextMenuTrigger.ContextMenuSubTrigger,
+    SubmenuContent: contextMenuContent.ContextMenuSubContent
+});
+
+exports.ContextMenu = ContextMenu;
+//# sourceMappingURL=context-menu.cjs.map

package/dist/components/context-menu/context-menu.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu.cjs","sources":["../../../components/context-menu/context-menu.tsx"],"sourcesContent":["import {\n  ContextMenuContent,\n  ContextMenuSubContent\n} from './context-menu-content';\nimport { ContextMenuItem } from './context-menu-item';\nimport {\n  ContextMenuEmptyState,\n  ContextMenuGroup,\n  ContextMenuLabel,\n  ContextMenuSeparator\n} from './context-menu-misc';\nimport { ContextMenuRoot, ContextMenuSubMenu } from './context-menu-root';\nimport {\n  ContextMenuSubTrigger,\n  ContextMenuTrigger\n} from './context-menu-trigger';\n\nexport const ContextMenu = Object.assign(ContextMenuRoot, {\n  Trigger: ContextMenuTrigger,\n  Content: ContextMenuContent,\n  Item: ContextMenuItem,\n  Group: ContextMenuGroup,\n  Label: ContextMenuLabel,\n  Separator: ContextMenuSeparator,\n  EmptyState: ContextMenuEmptyState,\n  Submenu: ContextMenuSubMenu,\n  SubmenuTrigger: ContextMenuSubTrigger,\n  SubmenuContent: ContextMenuSubContent\n});\n"],"names":["ContextMenuRoot","ContextMenuTrigger","ContextMenuContent","ContextMenuItem","ContextMenuGroup","ContextMenuLabel","ContextMenuSeparator","ContextMenuEmptyState","ContextMenuSubMenu","ContextMenuSubTrigger","ContextMenuSubContent"],"mappings":";;;;;;;;MAiBa,WAAW,GAAG,MAAM,CAAC,MAAM,CAACA,+BAAe,EAAE;AACxD,IAAA,OAAO,EAAEC,qCAAkB;AAC3B,IAAA,OAAO,EAAEC,qCAAkB;AAC3B,IAAA,IAAI,EAAEC,+BAAe;AACrB,IAAA,KAAK,EAAEC,gCAAgB;AACvB,IAAA,KAAK,EAAEC,gCAAgB;AACvB,IAAA,SAAS,EAAEC,oCAAoB;AAC/B,IAAA,UAAU,EAAEC,qCAAqB;AACjC,IAAA,OAAO,EAAEC,kCAAkB;AAC3B,IAAA,cAAc,EAAEC,wCAAqB;AACrC,IAAA,cAAc,EAAEC,wCAAqB;AACtC,CAAA;;;;"}

package/dist/components/context-menu/context-menu.d.ts

@@ -0,0 +1,46 @@
+export declare const ContextMenu: {
+    ({ autocomplete, autocompleteMode, inputValue: providedInputValue, onInputValueChange, defaultInputValue, open: providedOpen, onOpenChange, defaultOpen, ...props }: import("./context-menu-root").ContextMenuRootProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    Trigger: {
+        ({ children, ...props }: import("./context-menu-trigger").ContextMenuTriggerProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Content: {
+        ({ ref, className, children, searchPlaceholder, render, finalFocus, style, sideOffset, align, onFocus, ...positionerProps }: import("./context-menu-content").ContextMenuContentProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Item: {
+        ({ children, value, leadingIcon, trailingIcon, render, ...props }: import("./context-menu-item").ContextMenuItemProps): import("react/jsx-runtime").JSX.Element | null;
+        displayName: string;
+    };
+    Group: {
+        ({ className, children, ...props }: import("@base-ui/react").ContextMenuGroupProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Label: {
+        ({ className, ...props }: import("@base-ui/react").ContextMenuGroupLabelProps): import("react/jsx-runtime").JSX.Element | null;
+        displayName: string;
+    };
+    Separator: {
+        ({ className, ...props }: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>): import("react/jsx-runtime").JSX.Element | null;
+        displayName: string;
+    };
+    EmptyState: {
+        ({ className, children, ...props }: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Submenu: {
+        ({ autocomplete, autocompleteMode, inputValue: providedInputValue, onInputValueChange, defaultInputValue, open: providedOpen, onOpenChange, defaultOpen, ...props }: import("./context-menu-root").ContextMenuSubMenuProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    SubmenuTrigger: {
+        ({ children, value, trailingIcon, leadingIcon, ...props }: import("./context-menu-trigger").ContextMenuSubTriggerProps): import("react/jsx-runtime").JSX.Element | null;
+        displayName: string;
+    };
+    SubmenuContent: {
+        ({ ...props }: import("./context-menu-content").ContextMenuContentProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+//# sourceMappingURL=context-menu.d.ts.map

package/dist/components/context-menu/context-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu.d.ts","sourceRoot":"","sources":["../../../components/context-menu/context-menu.tsx"],"names":[],"mappings":"AAiBA,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAWtB,CAAC"}

package/dist/components/context-menu/context-menu.js

@@ -0,0 +1,21 @@
+import { ContextMenuContent, ContextMenuSubContent } from './context-menu-content.js';
+import { ContextMenuItem } from './context-menu-item.js';
+import { ContextMenuGroup, ContextMenuLabel, ContextMenuSeparator, ContextMenuEmptyState } from './context-menu-misc.js';
+import { ContextMenuRoot, ContextMenuSubMenu } from './context-menu-root.js';
+import { ContextMenuTrigger, ContextMenuSubTrigger } from './context-menu-trigger.js';
+
+const ContextMenu = Object.assign(ContextMenuRoot, {
+    Trigger: ContextMenuTrigger,
+    Content: ContextMenuContent,
+    Item: ContextMenuItem,
+    Group: ContextMenuGroup,
+    Label: ContextMenuLabel,
+    Separator: ContextMenuSeparator,
+    EmptyState: ContextMenuEmptyState,
+    Submenu: ContextMenuSubMenu,
+    SubmenuTrigger: ContextMenuSubTrigger,
+    SubmenuContent: ContextMenuSubContent
+});
+
+export { ContextMenu };
+//# sourceMappingURL=context-menu.js.map

package/dist/components/context-menu/context-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu.js","sources":["../../../components/context-menu/context-menu.tsx"],"sourcesContent":["import {\n  ContextMenuContent,\n  ContextMenuSubContent\n} from './context-menu-content';\nimport { ContextMenuItem } from './context-menu-item';\nimport {\n  ContextMenuEmptyState,\n  ContextMenuGroup,\n  ContextMenuLabel,\n  ContextMenuSeparator\n} from './context-menu-misc';\nimport { ContextMenuRoot, ContextMenuSubMenu } from './context-menu-root';\nimport {\n  ContextMenuSubTrigger,\n  ContextMenuTrigger\n} from './context-menu-trigger';\n\nexport const ContextMenu = Object.assign(ContextMenuRoot, {\n  Trigger: ContextMenuTrigger,\n  Content: ContextMenuContent,\n  Item: ContextMenuItem,\n  Group: ContextMenuGroup,\n  Label: ContextMenuLabel,\n  Separator: ContextMenuSeparator,\n  EmptyState: ContextMenuEmptyState,\n  Submenu: ContextMenuSubMenu,\n  SubmenuTrigger: ContextMenuSubTrigger,\n  SubmenuContent: ContextMenuSubContent\n});\n"],"names":[],"mappings":";;;;;;MAiBa,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE;AACxD,IAAA,OAAO,EAAE,kBAAkB;AAC3B,IAAA,OAAO,EAAE,kBAAkB;AAC3B,IAAA,IAAI,EAAE,eAAe;AACrB,IAAA,KAAK,EAAE,gBAAgB;AACvB,IAAA,KAAK,EAAE,gBAAgB;AACvB,IAAA,SAAS,EAAE,oBAAoB;AAC/B,IAAA,UAAU,EAAE,qBAAqB;AACjC,IAAA,OAAO,EAAE,kBAAkB;AAC3B,IAAA,cAAc,EAAE,qBAAqB;AACrC,IAAA,cAAc,EAAE,qBAAqB;AACtC,CAAA;;;;"}

package/dist/components/context-menu/index.d.ts

@@ -0,0 +1,2 @@
+export { ContextMenu } from './context-menu';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/context-menu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/context-menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/copy-button/copy-button.cjs

@@ -8,7 +8,7 @@ var useCopyToClipboard = require('../../hooks/useCopyToClipboard.cjs');
 var checkCircleFilled = require('../../icons/assets/check-circle-filled.svg.cjs');
 var iconButton = require('../icon-button/icon-button.cjs');
 
-const CopyButton = React.forwardRef(({ text, resetTimeout = 1000, resetIcon = true, ...props }, ref) => {
+function CopyButton({ text, resetTimeout = 1000, resetIcon = true, ...props }) {
     const { copy } = useCopyToClipboard.useCopyToClipboard();
     const [isCopied, setIsCopied] = React.useState(false);
     async function onCopy() {
@@ -22,8 +22,8 @@ const CopyButton = React.forwardRef(({ text, resetTimeout = 1000, resetIcon = tr
             }
         }
     }
-    return (jsxRuntime.jsx(iconButton.IconButton, { ref: ref, ...props, onClick: onCopy, "data-test-id": 'copy-button', children: isCopied ? (jsxRuntime.jsx(checkCircleFilled.ReactComponent, { color: 'var(--rs-color-foreground-success-primary)' })) : (jsxRuntime.jsx(reactIcons.CopyIcon, {})) }));
-});
+    return (jsxRuntime.jsx(iconButton.IconButton, { ...props, onClick: onCopy, "data-test-id": 'copy-button', children: isCopied ? (jsxRuntime.jsx(checkCircleFilled.ReactComponent, { color: 'var(--rs-color-foreground-success-primary)' })) : (jsxRuntime.jsx(reactIcons.CopyIcon, {})) }));
+}
 CopyButton.displayName = 'CopyButton';
 
 exports.CopyButton = CopyButton;

package/dist/components/copy-button/copy-button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"copy-button.cjs","sources":["../../../components/copy-button/copy-button.tsx"],"sourcesContent":["'use client';\n\nimport { CopyIcon } from '@radix-ui/react-icons';\nimport { ElementRef, forwardRef, useState } from 'react';\nimport { useCopyToClipboard } from '~/hooks/useCopyToClipboard';\nimport { CheckCircleFilledIcon } from '~/icons';\nimport { IconButton, IconButtonProps } from '../icon-button/icon-button';\n\nexport interface CopyButtonProps extends IconButtonProps {\n  text: string;\n  resetTimeout?: number;\n  resetIcon?: boolean;\n}\n\nexport const CopyButton = forwardRef<\n  ElementRef<typeof IconButton>,\n  CopyButtonProps\n>(({ text, resetTimeout = 1000, resetIcon = true, ...props }, ref) => {\n  const { copy } = useCopyToClipboard();\n  const [isCopied, setIsCopied] = useState(false);\n\n  async function onCopy() {\n    const res = await copy(text);\n    if (res) {\n      setIsCopied(true);\n      if (resetIcon) {\n        setTimeout(() => {\n          setIsCopied(false);\n        }, resetTimeout);\n      }\n    }\n  }\n\n  return (\n    <IconButton\n      ref={ref}\n      {...props}\n      onClick={onCopy}\n      data-test-id='copy-button'\n    >\n      {isCopied ? (\n        <CheckCircleFilledIcon color='var(--rs-color-foreground-success-primary)' />\n      ) : (\n        <CopyIcon />\n      )}\n    </IconButton>\n  );\n});\n\nCopyButton.displayName = 'CopyButton';\n"],"names":[],"mappings":";;;;;;;;;;AAca;AAIX;;AAGA;AACE;;;;;;;;;;AAWF;AAcF;AAEA;;"}
+{"version":3,"file":"copy-button.cjs","sources":["../../../components/copy-button/copy-button.tsx"],"sourcesContent":["'use client';\n\nimport { CopyIcon } from '@radix-ui/react-icons';\nimport { useState } from 'react';\nimport { useCopyToClipboard } from '~/hooks/useCopyToClipboard';\nimport { CheckCircleFilledIcon } from '~/icons';\nimport { IconButton, IconButtonProps } from '../icon-button/icon-button';\n\nexport interface CopyButtonProps extends IconButtonProps {\n  text: string;\n  resetTimeout?: number;\n  resetIcon?: boolean;\n}\n\nexport function CopyButton({\n  text,\n  resetTimeout = 1000,\n  resetIcon = true,\n  ...props\n}: CopyButtonProps) {\n  const { copy } = useCopyToClipboard();\n  const [isCopied, setIsCopied] = useState(false);\n\n  async function onCopy() {\n    const res = await copy(text);\n    if (res) {\n      setIsCopied(true);\n      if (resetIcon) {\n        setTimeout(() => {\n          setIsCopied(false);\n        }, resetTimeout);\n      }\n    }\n  }\n\n  return (\n    <IconButton {...props} onClick={onCopy} data-test-id='copy-button'>\n      {isCopied ? (\n        <CheckCircleFilledIcon color='var(--rs-color-foreground-success-primary)' />\n      ) : (\n        <CopyIcon />\n      )}\n    </IconButton>\n  );\n}\n\nCopyButton.displayName = 'CopyButton';\n"],"names":[],"mappings":";;;;;;;;;;;AAoBE;;AAGA;AACE;;;;;;;;;;AAWF;AASF;AAEA;;"}

package/dist/components/copy-button/copy-button.d.ts

@@ -4,5 +4,8 @@ export interface CopyButtonProps extends IconButtonProps {
     resetTimeout?: number;
     resetIcon?: boolean;
 }
-export declare const CopyButton: import("react").ForwardRefExoticComponent<CopyButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare function CopyButton({ text, resetTimeout, resetIcon, ...props }: CopyButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace CopyButton {
+    var displayName: string;
+}
 //# sourceMappingURL=copy-button.d.ts.map

package/dist/components/copy-button/copy-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"copy-button.d.ts","sourceRoot":"","sources":["../../../components/copy-button/copy-button.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAc,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAEzE,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,UAAU,+GAiCrB,CAAC"}
+{"version":3,"file":"copy-button.d.ts","sourceRoot":"","sources":["../../../components/copy-button/copy-button.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAc,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAEzE,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,YAAmB,EACnB,SAAgB,EAChB,GAAG,KAAK,EACT,EAAE,eAAe,2CAyBjB;yBA9Be,UAAU"}

package/dist/components/copy-button/copy-button.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { CopyIcon } from '@radix-ui/react-icons';
-import { forwardRef, useState } from 'react';
+import { useState } from 'react';
 import { useCopyToClipboard } from '../../hooks/useCopyToClipboard.js';
 import { ReactComponent as SvgCheckCircleFilled } from '../../icons/assets/check-circle-filled.svg.js';
 import { IconButton } from '../icon-button/icon-button.js';
 
-const CopyButton = forwardRef(({ text, resetTimeout = 1000, resetIcon = true, ...props }, ref) => {
+function CopyButton({ text, resetTimeout = 1000, resetIcon = true, ...props }) {
     const { copy } = useCopyToClipboard();
     const [isCopied, setIsCopied] = useState(false);
     async function onCopy() {
@@ -20,8 +20,8 @@ const CopyButton = forwardRef(({ text, resetTimeout = 1000, resetIcon = true, ..
             }
         }
     }
-    return (jsx(IconButton, { ref: ref, ...props, onClick: onCopy, "data-test-id": 'copy-button', children: isCopied ? (jsx(SvgCheckCircleFilled, { color: 'var(--rs-color-foreground-success-primary)' })) : (jsx(CopyIcon, {})) }));
-});
+    return (jsx(IconButton, { ...props, onClick: onCopy, "data-test-id": 'copy-button', children: isCopied ? (jsx(SvgCheckCircleFilled, { color: 'var(--rs-color-foreground-success-primary)' })) : (jsx(CopyIcon, {})) }));
+}
 CopyButton.displayName = 'CopyButton';
 
 export { CopyButton };

package/dist/components/copy-button/copy-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"copy-button.js","sources":["../../../components/copy-button/copy-button.tsx"],"sourcesContent":["'use client';\n\nimport { CopyIcon } from '@radix-ui/react-icons';\nimport { ElementRef, forwardRef, useState } from 'react';\nimport { useCopyToClipboard } from '~/hooks/useCopyToClipboard';\nimport { CheckCircleFilledIcon } from '~/icons';\nimport { IconButton, IconButtonProps } from '../icon-button/icon-button';\n\nexport interface CopyButtonProps extends IconButtonProps {\n  text: string;\n  resetTimeout?: number;\n  resetIcon?: boolean;\n}\n\nexport const CopyButton = forwardRef<\n  ElementRef<typeof IconButton>,\n  CopyButtonProps\n>(({ text, resetTimeout = 1000, resetIcon = true, ...props }, ref) => {\n  const { copy } = useCopyToClipboard();\n  const [isCopied, setIsCopied] = useState(false);\n\n  async function onCopy() {\n    const res = await copy(text);\n    if (res) {\n      setIsCopied(true);\n      if (resetIcon) {\n        setTimeout(() => {\n          setIsCopied(false);\n        }, resetTimeout);\n      }\n    }\n  }\n\n  return (\n    <IconButton\n      ref={ref}\n      {...props}\n      onClick={onCopy}\n      data-test-id='copy-button'\n    >\n      {isCopied ? (\n        <CheckCircleFilledIcon color='var(--rs-color-foreground-success-primary)' />\n      ) : (\n        <CopyIcon />\n      )}\n    </IconButton>\n  );\n});\n\nCopyButton.displayName = 'CopyButton';\n"],"names":[],"mappings":";;;;;;;;AAca;AAIX;;AAGA;AACE;;;;;;;;;;AAWF;AAcF;AAEA;;"}
+{"version":3,"file":"copy-button.js","sources":["../../../components/copy-button/copy-button.tsx"],"sourcesContent":["'use client';\n\nimport { CopyIcon } from '@radix-ui/react-icons';\nimport { useState } from 'react';\nimport { useCopyToClipboard } from '~/hooks/useCopyToClipboard';\nimport { CheckCircleFilledIcon } from '~/icons';\nimport { IconButton, IconButtonProps } from '../icon-button/icon-button';\n\nexport interface CopyButtonProps extends IconButtonProps {\n  text: string;\n  resetTimeout?: number;\n  resetIcon?: boolean;\n}\n\nexport function CopyButton({\n  text,\n  resetTimeout = 1000,\n  resetIcon = true,\n  ...props\n}: CopyButtonProps) {\n  const { copy } = useCopyToClipboard();\n  const [isCopied, setIsCopied] = useState(false);\n\n  async function onCopy() {\n    const res = await copy(text);\n    if (res) {\n      setIsCopied(true);\n      if (resetIcon) {\n        setTimeout(() => {\n          setIsCopied(false);\n        }, resetTimeout);\n      }\n    }\n  }\n\n  return (\n    <IconButton {...props} onClick={onCopy} data-test-id='copy-button'>\n      {isCopied ? (\n        <CheckCircleFilledIcon color='var(--rs-color-foreground-success-primary)' />\n      ) : (\n        <CopyIcon />\n      )}\n    </IconButton>\n  );\n}\n\nCopyButton.displayName = 'CopyButton';\n"],"names":[],"mappings":";;;;;;;;;AAoBE;;AAGA;AACE;;;;;;;;;;AAWF;AASF;AAEA;;"}

package/dist/components/data-table/components/content.cjs

@@ -102,6 +102,7 @@ function Content({ emptyState, zeroState, classNames = {} }) {
                                     row: classNames.row
                                 }, stickyGroupHeader: stickyGroupHeader }), isLoading ? (jsxRuntime.jsx(LoaderRows, { rowCount: loadingRowCount, columnCount: visibleColumnsLength })) : null] })) : (jsxRuntime.jsx(table.Table.Row, { children: jsxRuntime.jsx(table.Table.Cell, { colSpan: visibleColumnsLength, className: dataTable_module.default.emptyStateCell, children: stateToShow }) })) })] }) }));
 }
+Content.displayName = 'DataTable.Content';
 
 exports.Content = Content;
 //# sourceMappingURL=content.cjs.map

package/dist/components/data-table/components/content.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"content.cjs","sources":["../../../../components/data-table/components/content.tsx"],"sourcesContent":["'use client';\n\nimport { TableIcon } from '@radix-ui/react-icons';\nimport type { HeaderGroup, Row } from '@tanstack/react-table';\nimport { flexRender } from '@tanstack/react-table';\nimport { cx } from 'class-variance-authority';\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { Badge } from '../../badge';\nimport { EmptyState } from '../../empty-state';\nimport { Flex } from '../../flex';\nimport { Skeleton } from '../../skeleton';\nimport { Table } from '../../table';\nimport styles from '../data-table.module.css';\nimport {\n  DataTableColumnDef,\n  DataTableContentProps,\n  GroupedData\n} from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { hasActiveQuery } from '../utils';\n\nfunction Headers<TData>({\n  headerGroups = [],\n  className = ''\n}: {\n  headerGroups: HeaderGroup<TData>[];\n  className?: string;\n}) {\n  return (\n    <Table.Header className={className}>\n      {headerGroups?.map(headerGroup => (\n        <Table.Row key={headerGroup?.id}>\n          {headerGroup?.headers?.map(header => {\n            const columnDef = header.column.columnDef as DataTableColumnDef<\n              TData,\n              unknown\n            >;\n            return (\n              <Table.Head\n                key={header.id}\n                colSpan={header.colSpan}\n                className={cx(styles.head, columnDef.classNames?.header)}\n                style={columnDef.styles?.header}\n              >\n                {flexRender(columnDef.header, header.getContext())}\n              </Table.Head>\n            );\n          })}\n        </Table.Row>\n      ))}\n    </Table.Header>\n  );\n}\n\ninterface RowsProps<TData> {\n  rows: Row<TData>[];\n  onRowClick?: (row: TData) => void;\n  classNames?: {\n    row?: string;\n  };\n  lastRowRef?: React.RefObject<HTMLTableRowElement | null>;\n  stickyGroupHeader?: boolean;\n}\n\nfunction LoaderRows({\n  rowCount,\n  columnCount\n}: {\n  rowCount: number;\n  columnCount: number;\n}) {\n  const rows = Array.from({ length: rowCount });\n  return rows.map((_, rowIndex) => {\n    const columns = Array.from({ length: columnCount });\n    return (\n      <Table.Row key={'loading-row-' + rowIndex}>\n        {columns.map((_, colIndex) => (\n          <Table.Cell key={'loading-column-' + colIndex}>\n            <Skeleton />\n          </Table.Cell>\n        ))}\n      </Table.Row>\n    );\n  });\n}\n\nfunction GroupHeader<TData>({\n  colSpan,\n  data,\n  stickySectionHeader\n}: {\n  colSpan: number;\n  data: GroupedData<TData>;\n  stickySectionHeader?: boolean;\n}) {\n  return (\n    <Table.SectionHeader\n      colSpan={colSpan}\n      classNames={\n        stickySectionHeader ? { cell: styles.stickySectionHeader } : undefined\n      }\n    >\n      <Flex gap={3} align='center'>\n        {data?.label}\n        {data.showGroupCount ? (\n          <Badge variant='neutral'>{data?.count}</Badge>\n        ) : null}\n      </Flex>\n    </Table.SectionHeader>\n  );\n}\n\nfunction Rows<TData>({\n  rows = [],\n  onRowClick,\n  classNames,\n  lastRowRef,\n  stickyGroupHeader = false\n}: RowsProps<TData>) {\n  return rows.map((row, idx) => {\n    const isSelected = row.getIsSelected();\n    const cells = row.getVisibleCells() || [];\n    const isGroupHeader = row.subRows && row.subRows.length > 0;\n    const isLastRow = idx === rows.length - 1;\n\n    if (isGroupHeader) {\n      return (\n        <GroupHeader\n          key={row.id}\n          colSpan={cells.length}\n          data={row.original as GroupedData<unknown>}\n          stickySectionHeader={stickyGroupHeader}\n        />\n      );\n    }\n\n    return (\n      <Table.Row\n        key={row.id}\n        className={cx(\n          styles['row'],\n          onRowClick ? styles['clickable'] : '',\n          classNames?.row\n        )}\n        data-state={isSelected && 'selected'}\n        ref={isLastRow ? lastRowRef : undefined}\n        onClick={() => onRowClick?.(row.original)}\n      >\n        {cells.map(cell => {\n          const columnDef = cell.column.columnDef as DataTableColumnDef<\n            TData,\n            unknown\n          >;\n          return (\n            <Table.Cell\n              key={cell.id}\n              className={cx(styles['cell'], columnDef.classNames?.cell)}\n              style={columnDef.styles?.cell}\n            >\n              {flexRender(columnDef.cell, cell.getContext())}\n            </Table.Cell>\n          );\n        })}\n      </Table.Row>\n    );\n  });\n}\n\nconst DefaultEmptyComponent = () => (\n  <EmptyState icon={<TableIcon />} heading='No Data' />\n);\n\nexport function Content({\n  emptyState,\n  zeroState,\n  classNames = {}\n}: DataTableContentProps) {\n  const {\n    onRowClick,\n    table,\n    mode,\n    isLoading,\n    loadMoreData,\n    loadingRowCount = 3,\n    tableQuery,\n    defaultSort,\n    stickyGroupHeader = false\n  } = useDataTable();\n\n  const headerGroups = table?.getHeaderGroups();\n  const rowModel = table?.getRowModel();\n  const { rows = [] } = rowModel || {};\n\n  const lastRowRef = useRef<HTMLTableRowElement | null>(null);\n  const observerRef = useRef<IntersectionObserver | null>(null);\n\n  /* Refs keep callback stable so observer is only recreated when mode/rows.length change; */\n  const loadMoreDataRef = useRef(loadMoreData);\n  const isLoadingRef = useRef(isLoading);\n  loadMoreDataRef.current = loadMoreData;\n  isLoadingRef.current = isLoading;\n\n  const handleObserver = useCallback((entries: IntersectionObserverEntry[]) => {\n    const target = entries[0];\n    if (!target?.isIntersecting) return;\n    if (isLoadingRef.current) return;\n    const loadMore = loadMoreDataRef.current;\n    if (loadMore) loadMore();\n  }, []);\n\n  useEffect(() => {\n    if (mode !== 'server') return;\n\n    if (observerRef.current) {\n      observerRef.current.disconnect();\n      observerRef.current = null;\n    }\n\n    const lastRow = lastRowRef.current;\n    if (!lastRow) return;\n\n    observerRef.current = new IntersectionObserver(handleObserver, {\n      threshold: 0.1\n    });\n    observerRef.current.observe(lastRow);\n\n    return () => {\n      observerRef.current?.disconnect();\n      observerRef.current = null;\n    };\n  }, [mode, rows.length, handleObserver]);\n\n  const visibleColumnsLength = table.getVisibleLeafColumns().length;\n\n  const hasData = rows?.length > 0 || isLoading;\n\n  const hasChanges = hasActiveQuery(tableQuery || {}, defaultSort);\n\n  const isZeroState = !hasData && !hasChanges;\n  const isEmptyState = !hasData && hasChanges;\n\n  const stateToShow: React.ReactNode = isZeroState\n    ? (zeroState ?? emptyState ?? <DefaultEmptyComponent />)\n    : isEmptyState\n      ? (emptyState ?? <DefaultEmptyComponent />)\n      : null;\n\n  return (\n    <div className={cx(styles.contentRoot, classNames.root)}>\n      <Table className={classNames.table}>\n        {hasData && (\n          <Headers headerGroups={headerGroups} className={classNames.header} />\n        )}\n        <Table.Body className={classNames.body}>\n          {hasData ? (\n            <>\n              <Rows\n                rows={rows}\n                lastRowRef={lastRowRef}\n                onRowClick={onRowClick}\n                classNames={{\n                  row: classNames.row\n                }}\n                stickyGroupHeader={stickyGroupHeader}\n              />\n              {isLoading ? (\n                <LoaderRows\n                  rowCount={loadingRowCount}\n                  columnCount={visibleColumnsLength}\n                />\n              ) : null}\n            </>\n          ) : (\n            <Table.Row>\n              <Table.Cell\n                colSpan={visibleColumnsLength}\n                className={styles.emptyStateCell}\n              >\n                {stateToShow}\n              </Table.Cell>\n            </Table.Row>\n          )}\n        </Table.Body>\n      </Table>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAsBA;AAOE;AAKU;;;AAmBZ;AAYA;AAOE;;AAEE;AACA;AASF;AACF;AAEA;AASE;AAeF;AAEA;;AAQI;;AAEA;;;;;AAcA;AAaM;;AAaF;AAGN;AACF;AAEA;AAIM;;AAiBJ;AACA;;AAGA;AACA;;AAGA;AACA;AACA;AACA;AAEA;AACE;;;;;AAGA;AACA;AAAc;;;;;AAMd;AACE;AACA;;AAGF;AACA;;AAEA;AACE;AACD;AACD;AAEA;AACE;AACA;AACF;;;;;AASF;AACA;;;AAIE;AACE;;AAGJ;;AAee;AAwBjB;;"}
+{"version":3,"file":"content.cjs","sources":["../../../../components/data-table/components/content.tsx"],"sourcesContent":["'use client';\n\nimport { TableIcon } from '@radix-ui/react-icons';\nimport type { HeaderGroup, Row } from '@tanstack/react-table';\nimport { flexRender } from '@tanstack/react-table';\nimport { cx } from 'class-variance-authority';\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { Badge } from '../../badge';\nimport { EmptyState } from '../../empty-state';\nimport { Flex } from '../../flex';\nimport { Skeleton } from '../../skeleton';\nimport { Table } from '../../table';\nimport styles from '../data-table.module.css';\nimport {\n  DataTableColumnDef,\n  DataTableContentProps,\n  GroupedData\n} from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { hasActiveQuery } from '../utils';\n\nfunction Headers<TData>({\n  headerGroups = [],\n  className = ''\n}: {\n  headerGroups: HeaderGroup<TData>[];\n  className?: string;\n}) {\n  return (\n    <Table.Header className={className}>\n      {headerGroups?.map(headerGroup => (\n        <Table.Row key={headerGroup?.id}>\n          {headerGroup?.headers?.map(header => {\n            const columnDef = header.column.columnDef as DataTableColumnDef<\n              TData,\n              unknown\n            >;\n            return (\n              <Table.Head\n                key={header.id}\n                colSpan={header.colSpan}\n                className={cx(styles.head, columnDef.classNames?.header)}\n                style={columnDef.styles?.header}\n              >\n                {flexRender(columnDef.header, header.getContext())}\n              </Table.Head>\n            );\n          })}\n        </Table.Row>\n      ))}\n    </Table.Header>\n  );\n}\n\ninterface RowsProps<TData> {\n  rows: Row<TData>[];\n  onRowClick?: (row: TData) => void;\n  classNames?: {\n    row?: string;\n  };\n  lastRowRef?: React.RefObject<HTMLTableRowElement | null>;\n  stickyGroupHeader?: boolean;\n}\n\nfunction LoaderRows({\n  rowCount,\n  columnCount\n}: {\n  rowCount: number;\n  columnCount: number;\n}) {\n  const rows = Array.from({ length: rowCount });\n  return rows.map((_, rowIndex) => {\n    const columns = Array.from({ length: columnCount });\n    return (\n      <Table.Row key={'loading-row-' + rowIndex}>\n        {columns.map((_, colIndex) => (\n          <Table.Cell key={'loading-column-' + colIndex}>\n            <Skeleton />\n          </Table.Cell>\n        ))}\n      </Table.Row>\n    );\n  });\n}\n\nfunction GroupHeader<TData>({\n  colSpan,\n  data,\n  stickySectionHeader\n}: {\n  colSpan: number;\n  data: GroupedData<TData>;\n  stickySectionHeader?: boolean;\n}) {\n  return (\n    <Table.SectionHeader\n      colSpan={colSpan}\n      classNames={\n        stickySectionHeader ? { cell: styles.stickySectionHeader } : undefined\n      }\n    >\n      <Flex gap={3} align='center'>\n        {data?.label}\n        {data.showGroupCount ? (\n          <Badge variant='neutral'>{data?.count}</Badge>\n        ) : null}\n      </Flex>\n    </Table.SectionHeader>\n  );\n}\n\nfunction Rows<TData>({\n  rows = [],\n  onRowClick,\n  classNames,\n  lastRowRef,\n  stickyGroupHeader = false\n}: RowsProps<TData>) {\n  return rows.map((row, idx) => {\n    const isSelected = row.getIsSelected();\n    const cells = row.getVisibleCells() || [];\n    const isGroupHeader = row.subRows && row.subRows.length > 0;\n    const isLastRow = idx === rows.length - 1;\n\n    if (isGroupHeader) {\n      return (\n        <GroupHeader\n          key={row.id}\n          colSpan={cells.length}\n          data={row.original as GroupedData<unknown>}\n          stickySectionHeader={stickyGroupHeader}\n        />\n      );\n    }\n\n    return (\n      <Table.Row\n        key={row.id}\n        className={cx(\n          styles['row'],\n          onRowClick ? styles['clickable'] : '',\n          classNames?.row\n        )}\n        data-state={isSelected && 'selected'}\n        ref={isLastRow ? lastRowRef : undefined}\n        onClick={() => onRowClick?.(row.original)}\n      >\n        {cells.map(cell => {\n          const columnDef = cell.column.columnDef as DataTableColumnDef<\n            TData,\n            unknown\n          >;\n          return (\n            <Table.Cell\n              key={cell.id}\n              className={cx(styles['cell'], columnDef.classNames?.cell)}\n              style={columnDef.styles?.cell}\n            >\n              {flexRender(columnDef.cell, cell.getContext())}\n            </Table.Cell>\n          );\n        })}\n      </Table.Row>\n    );\n  });\n}\n\nconst DefaultEmptyComponent = () => (\n  <EmptyState icon={<TableIcon />} heading='No Data' />\n);\n\nexport function Content({\n  emptyState,\n  zeroState,\n  classNames = {}\n}: DataTableContentProps) {\n  const {\n    onRowClick,\n    table,\n    mode,\n    isLoading,\n    loadMoreData,\n    loadingRowCount = 3,\n    tableQuery,\n    defaultSort,\n    stickyGroupHeader = false\n  } = useDataTable();\n\n  const headerGroups = table?.getHeaderGroups();\n  const rowModel = table?.getRowModel();\n  const { rows = [] } = rowModel || {};\n\n  const lastRowRef = useRef<HTMLTableRowElement | null>(null);\n  const observerRef = useRef<IntersectionObserver | null>(null);\n\n  /* Refs keep callback stable so observer is only recreated when mode/rows.length change; */\n  const loadMoreDataRef = useRef(loadMoreData);\n  const isLoadingRef = useRef(isLoading);\n  loadMoreDataRef.current = loadMoreData;\n  isLoadingRef.current = isLoading;\n\n  const handleObserver = useCallback((entries: IntersectionObserverEntry[]) => {\n    const target = entries[0];\n    if (!target?.isIntersecting) return;\n    if (isLoadingRef.current) return;\n    const loadMore = loadMoreDataRef.current;\n    if (loadMore) loadMore();\n  }, []);\n\n  useEffect(() => {\n    if (mode !== 'server') return;\n\n    if (observerRef.current) {\n      observerRef.current.disconnect();\n      observerRef.current = null;\n    }\n\n    const lastRow = lastRowRef.current;\n    if (!lastRow) return;\n\n    observerRef.current = new IntersectionObserver(handleObserver, {\n      threshold: 0.1\n    });\n    observerRef.current.observe(lastRow);\n\n    return () => {\n      observerRef.current?.disconnect();\n      observerRef.current = null;\n    };\n  }, [mode, rows.length, handleObserver]);\n\n  const visibleColumnsLength = table.getVisibleLeafColumns().length;\n\n  const hasData = rows?.length > 0 || isLoading;\n\n  const hasChanges = hasActiveQuery(tableQuery || {}, defaultSort);\n\n  const isZeroState = !hasData && !hasChanges;\n  const isEmptyState = !hasData && hasChanges;\n\n  const stateToShow: React.ReactNode = isZeroState\n    ? (zeroState ?? emptyState ?? <DefaultEmptyComponent />)\n    : isEmptyState\n      ? (emptyState ?? <DefaultEmptyComponent />)\n      : null;\n\n  return (\n    <div className={cx(styles.contentRoot, classNames.root)}>\n      <Table className={classNames.table}>\n        {hasData && (\n          <Headers headerGroups={headerGroups} className={classNames.header} />\n        )}\n        <Table.Body className={classNames.body}>\n          {hasData ? (\n            <>\n              <Rows\n                rows={rows}\n                lastRowRef={lastRowRef}\n                onRowClick={onRowClick}\n                classNames={{\n                  row: classNames.row\n                }}\n                stickyGroupHeader={stickyGroupHeader}\n              />\n              {isLoading ? (\n                <LoaderRows\n                  rowCount={loadingRowCount}\n                  columnCount={visibleColumnsLength}\n                />\n              ) : null}\n            </>\n          ) : (\n            <Table.Row>\n              <Table.Cell\n                colSpan={visibleColumnsLength}\n                className={styles.emptyStateCell}\n              >\n                {stateToShow}\n              </Table.Cell>\n            </Table.Row>\n          )}\n        </Table.Body>\n      </Table>\n    </div>\n  );\n}\n\nContent.displayName = 'DataTable.Content';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAsBA;AAOE;AAKU;;;AAmBZ;AAYA;AAOE;;AAEE;AACA;AASF;AACF;AAEA;AASE;AAeF;AAEA;;AAQI;;AAEA;;;;;AAcA;AAaM;;AAaF;AAGN;AACF;AAEA;AAIM;;AAiBJ;AACA;;AAGA;AACA;;AAGA;AACA;AACA;AACA;AAEA;AACE;;;;;AAGA;AACA;AAAc;;;;;AAMd;AACE;AACA;;AAGF;AACA;;AAEA;AACE;AACD;AACD;AAEA;AACE;AACA;AACF;;;;;AASF;AACA;;;AAIE;AACE;;AAGJ;;AAee;AAwBjB;AAEA;;"}

package/dist/components/data-table/components/content.d.ts

@@ -1,3 +1,6 @@
 import { DataTableContentProps } from '../data-table.types';
 export declare function Content({ emptyState, zeroState, classNames }: DataTableContentProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Content {
+    var displayName: string;
+}
 //# sourceMappingURL=content.d.ts.map

package/dist/components/data-table/components/content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"content.d.ts","sourceRoot":"","sources":["../../../../components/data-table/components/content.tsx"],"names":[],"mappings":"AAcA,OAAO,EAEL,qBAAqB,EAEtB,MAAM,qBAAqB,CAAC;AA2J7B,wBAAgB,OAAO,CAAC,EACtB,UAAU,EACV,SAAS,EACT,UAAe,EAChB,EAAE,qBAAqB,2CA8GvB"}
+{"version":3,"file":"content.d.ts","sourceRoot":"","sources":["../../../../components/data-table/components/content.tsx"],"names":[],"mappings":"AAcA,OAAO,EAEL,qBAAqB,EAEtB,MAAM,qBAAqB,CAAC;AA2J7B,wBAAgB,OAAO,CAAC,EACtB,UAAU,EACV,SAAS,EACT,UAAe,EAChB,EAAE,qBAAqB,2CA8GvB;yBAlHe,OAAO"}

package/dist/components/data-table/components/content.js

@@ -100,6 +100,7 @@ function Content({ emptyState, zeroState, classNames = {} }) {
                                     row: classNames.row
                                 }, stickyGroupHeader: stickyGroupHeader }), isLoading ? (jsx(LoaderRows, { rowCount: loadingRowCount, columnCount: visibleColumnsLength })) : null] })) : (jsx(Table.Row, { children: jsx(Table.Cell, { colSpan: visibleColumnsLength, className: styles.emptyStateCell, children: stateToShow }) })) })] }) }));
 }
+Content.displayName = 'DataTable.Content';
 
 export { Content };
 //# sourceMappingURL=content.js.map

package/dist/components/data-table/components/content.js.map

@@ -1 +1 @@
-{"version":3,"file":"content.js","sources":["../../../../components/data-table/components/content.tsx"],"sourcesContent":["'use client';\n\nimport { TableIcon } from '@radix-ui/react-icons';\nimport type { HeaderGroup, Row } from '@tanstack/react-table';\nimport { flexRender } from '@tanstack/react-table';\nimport { cx } from 'class-variance-authority';\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { Badge } from '../../badge';\nimport { EmptyState } from '../../empty-state';\nimport { Flex } from '../../flex';\nimport { Skeleton } from '../../skeleton';\nimport { Table } from '../../table';\nimport styles from '../data-table.module.css';\nimport {\n  DataTableColumnDef,\n  DataTableContentProps,\n  GroupedData\n} from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { hasActiveQuery } from '../utils';\n\nfunction Headers<TData>({\n  headerGroups = [],\n  className = ''\n}: {\n  headerGroups: HeaderGroup<TData>[];\n  className?: string;\n}) {\n  return (\n    <Table.Header className={className}>\n      {headerGroups?.map(headerGroup => (\n        <Table.Row key={headerGroup?.id}>\n          {headerGroup?.headers?.map(header => {\n            const columnDef = header.column.columnDef as DataTableColumnDef<\n              TData,\n              unknown\n            >;\n            return (\n              <Table.Head\n                key={header.id}\n                colSpan={header.colSpan}\n                className={cx(styles.head, columnDef.classNames?.header)}\n                style={columnDef.styles?.header}\n              >\n                {flexRender(columnDef.header, header.getContext())}\n              </Table.Head>\n            );\n          })}\n        </Table.Row>\n      ))}\n    </Table.Header>\n  );\n}\n\ninterface RowsProps<TData> {\n  rows: Row<TData>[];\n  onRowClick?: (row: TData) => void;\n  classNames?: {\n    row?: string;\n  };\n  lastRowRef?: React.RefObject<HTMLTableRowElement | null>;\n  stickyGroupHeader?: boolean;\n}\n\nfunction LoaderRows({\n  rowCount,\n  columnCount\n}: {\n  rowCount: number;\n  columnCount: number;\n}) {\n  const rows = Array.from({ length: rowCount });\n  return rows.map((_, rowIndex) => {\n    const columns = Array.from({ length: columnCount });\n    return (\n      <Table.Row key={'loading-row-' + rowIndex}>\n        {columns.map((_, colIndex) => (\n          <Table.Cell key={'loading-column-' + colIndex}>\n            <Skeleton />\n          </Table.Cell>\n        ))}\n      </Table.Row>\n    );\n  });\n}\n\nfunction GroupHeader<TData>({\n  colSpan,\n  data,\n  stickySectionHeader\n}: {\n  colSpan: number;\n  data: GroupedData<TData>;\n  stickySectionHeader?: boolean;\n}) {\n  return (\n    <Table.SectionHeader\n      colSpan={colSpan}\n      classNames={\n        stickySectionHeader ? { cell: styles.stickySectionHeader } : undefined\n      }\n    >\n      <Flex gap={3} align='center'>\n        {data?.label}\n        {data.showGroupCount ? (\n          <Badge variant='neutral'>{data?.count}</Badge>\n        ) : null}\n      </Flex>\n    </Table.SectionHeader>\n  );\n}\n\nfunction Rows<TData>({\n  rows = [],\n  onRowClick,\n  classNames,\n  lastRowRef,\n  stickyGroupHeader = false\n}: RowsProps<TData>) {\n  return rows.map((row, idx) => {\n    const isSelected = row.getIsSelected();\n    const cells = row.getVisibleCells() || [];\n    const isGroupHeader = row.subRows && row.subRows.length > 0;\n    const isLastRow = idx === rows.length - 1;\n\n    if (isGroupHeader) {\n      return (\n        <GroupHeader\n          key={row.id}\n          colSpan={cells.length}\n          data={row.original as GroupedData<unknown>}\n          stickySectionHeader={stickyGroupHeader}\n        />\n      );\n    }\n\n    return (\n      <Table.Row\n        key={row.id}\n        className={cx(\n          styles['row'],\n          onRowClick ? styles['clickable'] : '',\n          classNames?.row\n        )}\n        data-state={isSelected && 'selected'}\n        ref={isLastRow ? lastRowRef : undefined}\n        onClick={() => onRowClick?.(row.original)}\n      >\n        {cells.map(cell => {\n          const columnDef = cell.column.columnDef as DataTableColumnDef<\n            TData,\n            unknown\n          >;\n          return (\n            <Table.Cell\n              key={cell.id}\n              className={cx(styles['cell'], columnDef.classNames?.cell)}\n              style={columnDef.styles?.cell}\n            >\n              {flexRender(columnDef.cell, cell.getContext())}\n            </Table.Cell>\n          );\n        })}\n      </Table.Row>\n    );\n  });\n}\n\nconst DefaultEmptyComponent = () => (\n  <EmptyState icon={<TableIcon />} heading='No Data' />\n);\n\nexport function Content({\n  emptyState,\n  zeroState,\n  classNames = {}\n}: DataTableContentProps) {\n  const {\n    onRowClick,\n    table,\n    mode,\n    isLoading,\n    loadMoreData,\n    loadingRowCount = 3,\n    tableQuery,\n    defaultSort,\n    stickyGroupHeader = false\n  } = useDataTable();\n\n  const headerGroups = table?.getHeaderGroups();\n  const rowModel = table?.getRowModel();\n  const { rows = [] } = rowModel || {};\n\n  const lastRowRef = useRef<HTMLTableRowElement | null>(null);\n  const observerRef = useRef<IntersectionObserver | null>(null);\n\n  /* Refs keep callback stable so observer is only recreated when mode/rows.length change; */\n  const loadMoreDataRef = useRef(loadMoreData);\n  const isLoadingRef = useRef(isLoading);\n  loadMoreDataRef.current = loadMoreData;\n  isLoadingRef.current = isLoading;\n\n  const handleObserver = useCallback((entries: IntersectionObserverEntry[]) => {\n    const target = entries[0];\n    if (!target?.isIntersecting) return;\n    if (isLoadingRef.current) return;\n    const loadMore = loadMoreDataRef.current;\n    if (loadMore) loadMore();\n  }, []);\n\n  useEffect(() => {\n    if (mode !== 'server') return;\n\n    if (observerRef.current) {\n      observerRef.current.disconnect();\n      observerRef.current = null;\n    }\n\n    const lastRow = lastRowRef.current;\n    if (!lastRow) return;\n\n    observerRef.current = new IntersectionObserver(handleObserver, {\n      threshold: 0.1\n    });\n    observerRef.current.observe(lastRow);\n\n    return () => {\n      observerRef.current?.disconnect();\n      observerRef.current = null;\n    };\n  }, [mode, rows.length, handleObserver]);\n\n  const visibleColumnsLength = table.getVisibleLeafColumns().length;\n\n  const hasData = rows?.length > 0 || isLoading;\n\n  const hasChanges = hasActiveQuery(tableQuery || {}, defaultSort);\n\n  const isZeroState = !hasData && !hasChanges;\n  const isEmptyState = !hasData && hasChanges;\n\n  const stateToShow: React.ReactNode = isZeroState\n    ? (zeroState ?? emptyState ?? <DefaultEmptyComponent />)\n    : isEmptyState\n      ? (emptyState ?? <DefaultEmptyComponent />)\n      : null;\n\n  return (\n    <div className={cx(styles.contentRoot, classNames.root)}>\n      <Table className={classNames.table}>\n        {hasData && (\n          <Headers headerGroups={headerGroups} className={classNames.header} />\n        )}\n        <Table.Body className={classNames.body}>\n          {hasData ? (\n            <>\n              <Rows\n                rows={rows}\n                lastRowRef={lastRowRef}\n                onRowClick={onRowClick}\n                classNames={{\n                  row: classNames.row\n                }}\n                stickyGroupHeader={stickyGroupHeader}\n              />\n              {isLoading ? (\n                <LoaderRows\n                  rowCount={loadingRowCount}\n                  columnCount={visibleColumnsLength}\n                />\n              ) : null}\n            </>\n          ) : (\n            <Table.Row>\n              <Table.Cell\n                colSpan={visibleColumnsLength}\n                className={styles.emptyStateCell}\n              >\n                {stateToShow}\n              </Table.Cell>\n            </Table.Row>\n          )}\n        </Table.Body>\n      </Table>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAsBA;AAOE;AAKU;;;AAmBZ;AAYA;AAOE;;AAEE;AACA;AASF;AACF;AAEA;AASE;AAeF;AAEA;;AAQI;;AAEA;;;;;AAcA;AAaM;;AAaF;AAGN;AACF;AAEA;AAIM;;AAiBJ;AACA;;AAGA;AACA;;AAGA;AACA;AACA;AACA;AAEA;AACE;;;;;AAGA;AACA;AAAc;;;;;AAMd;AACE;AACA;;AAGF;AACA;;AAEA;AACE;AACD;AACD;AAEA;AACE;AACA;AACF;;;;;AASF;AACA;;;AAIE;AACE;;AAGJ;;AAee;AAwBjB;;"}
+{"version":3,"file":"content.js","sources":["../../../../components/data-table/components/content.tsx"],"sourcesContent":["'use client';\n\nimport { TableIcon } from '@radix-ui/react-icons';\nimport type { HeaderGroup, Row } from '@tanstack/react-table';\nimport { flexRender } from '@tanstack/react-table';\nimport { cx } from 'class-variance-authority';\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { Badge } from '../../badge';\nimport { EmptyState } from '../../empty-state';\nimport { Flex } from '../../flex';\nimport { Skeleton } from '../../skeleton';\nimport { Table } from '../../table';\nimport styles from '../data-table.module.css';\nimport {\n  DataTableColumnDef,\n  DataTableContentProps,\n  GroupedData\n} from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { hasActiveQuery } from '../utils';\n\nfunction Headers<TData>({\n  headerGroups = [],\n  className = ''\n}: {\n  headerGroups: HeaderGroup<TData>[];\n  className?: string;\n}) {\n  return (\n    <Table.Header className={className}>\n      {headerGroups?.map(headerGroup => (\n        <Table.Row key={headerGroup?.id}>\n          {headerGroup?.headers?.map(header => {\n            const columnDef = header.column.columnDef as DataTableColumnDef<\n              TData,\n              unknown\n            >;\n            return (\n              <Table.Head\n                key={header.id}\n                colSpan={header.colSpan}\n                className={cx(styles.head, columnDef.classNames?.header)}\n                style={columnDef.styles?.header}\n              >\n                {flexRender(columnDef.header, header.getContext())}\n              </Table.Head>\n            );\n          })}\n        </Table.Row>\n      ))}\n    </Table.Header>\n  );\n}\n\ninterface RowsProps<TData> {\n  rows: Row<TData>[];\n  onRowClick?: (row: TData) => void;\n  classNames?: {\n    row?: string;\n  };\n  lastRowRef?: React.RefObject<HTMLTableRowElement | null>;\n  stickyGroupHeader?: boolean;\n}\n\nfunction LoaderRows({\n  rowCount,\n  columnCount\n}: {\n  rowCount: number;\n  columnCount: number;\n}) {\n  const rows = Array.from({ length: rowCount });\n  return rows.map((_, rowIndex) => {\n    const columns = Array.from({ length: columnCount });\n    return (\n      <Table.Row key={'loading-row-' + rowIndex}>\n        {columns.map((_, colIndex) => (\n          <Table.Cell key={'loading-column-' + colIndex}>\n            <Skeleton />\n          </Table.Cell>\n        ))}\n      </Table.Row>\n    );\n  });\n}\n\nfunction GroupHeader<TData>({\n  colSpan,\n  data,\n  stickySectionHeader\n}: {\n  colSpan: number;\n  data: GroupedData<TData>;\n  stickySectionHeader?: boolean;\n}) {\n  return (\n    <Table.SectionHeader\n      colSpan={colSpan}\n      classNames={\n        stickySectionHeader ? { cell: styles.stickySectionHeader } : undefined\n      }\n    >\n      <Flex gap={3} align='center'>\n        {data?.label}\n        {data.showGroupCount ? (\n          <Badge variant='neutral'>{data?.count}</Badge>\n        ) : null}\n      </Flex>\n    </Table.SectionHeader>\n  );\n}\n\nfunction Rows<TData>({\n  rows = [],\n  onRowClick,\n  classNames,\n  lastRowRef,\n  stickyGroupHeader = false\n}: RowsProps<TData>) {\n  return rows.map((row, idx) => {\n    const isSelected = row.getIsSelected();\n    const cells = row.getVisibleCells() || [];\n    const isGroupHeader = row.subRows && row.subRows.length > 0;\n    const isLastRow = idx === rows.length - 1;\n\n    if (isGroupHeader) {\n      return (\n        <GroupHeader\n          key={row.id}\n          colSpan={cells.length}\n          data={row.original as GroupedData<unknown>}\n          stickySectionHeader={stickyGroupHeader}\n        />\n      );\n    }\n\n    return (\n      <Table.Row\n        key={row.id}\n        className={cx(\n          styles['row'],\n          onRowClick ? styles['clickable'] : '',\n          classNames?.row\n        )}\n        data-state={isSelected && 'selected'}\n        ref={isLastRow ? lastRowRef : undefined}\n        onClick={() => onRowClick?.(row.original)}\n      >\n        {cells.map(cell => {\n          const columnDef = cell.column.columnDef as DataTableColumnDef<\n            TData,\n            unknown\n          >;\n          return (\n            <Table.Cell\n              key={cell.id}\n              className={cx(styles['cell'], columnDef.classNames?.cell)}\n              style={columnDef.styles?.cell}\n            >\n              {flexRender(columnDef.cell, cell.getContext())}\n            </Table.Cell>\n          );\n        })}\n      </Table.Row>\n    );\n  });\n}\n\nconst DefaultEmptyComponent = () => (\n  <EmptyState icon={<TableIcon />} heading='No Data' />\n);\n\nexport function Content({\n  emptyState,\n  zeroState,\n  classNames = {}\n}: DataTableContentProps) {\n  const {\n    onRowClick,\n    table,\n    mode,\n    isLoading,\n    loadMoreData,\n    loadingRowCount = 3,\n    tableQuery,\n    defaultSort,\n    stickyGroupHeader = false\n  } = useDataTable();\n\n  const headerGroups = table?.getHeaderGroups();\n  const rowModel = table?.getRowModel();\n  const { rows = [] } = rowModel || {};\n\n  const lastRowRef = useRef<HTMLTableRowElement | null>(null);\n  const observerRef = useRef<IntersectionObserver | null>(null);\n\n  /* Refs keep callback stable so observer is only recreated when mode/rows.length change; */\n  const loadMoreDataRef = useRef(loadMoreData);\n  const isLoadingRef = useRef(isLoading);\n  loadMoreDataRef.current = loadMoreData;\n  isLoadingRef.current = isLoading;\n\n  const handleObserver = useCallback((entries: IntersectionObserverEntry[]) => {\n    const target = entries[0];\n    if (!target?.isIntersecting) return;\n    if (isLoadingRef.current) return;\n    const loadMore = loadMoreDataRef.current;\n    if (loadMore) loadMore();\n  }, []);\n\n  useEffect(() => {\n    if (mode !== 'server') return;\n\n    if (observerRef.current) {\n      observerRef.current.disconnect();\n      observerRef.current = null;\n    }\n\n    const lastRow = lastRowRef.current;\n    if (!lastRow) return;\n\n    observerRef.current = new IntersectionObserver(handleObserver, {\n      threshold: 0.1\n    });\n    observerRef.current.observe(lastRow);\n\n    return () => {\n      observerRef.current?.disconnect();\n      observerRef.current = null;\n    };\n  }, [mode, rows.length, handleObserver]);\n\n  const visibleColumnsLength = table.getVisibleLeafColumns().length;\n\n  const hasData = rows?.length > 0 || isLoading;\n\n  const hasChanges = hasActiveQuery(tableQuery || {}, defaultSort);\n\n  const isZeroState = !hasData && !hasChanges;\n  const isEmptyState = !hasData && hasChanges;\n\n  const stateToShow: React.ReactNode = isZeroState\n    ? (zeroState ?? emptyState ?? <DefaultEmptyComponent />)\n    : isEmptyState\n      ? (emptyState ?? <DefaultEmptyComponent />)\n      : null;\n\n  return (\n    <div className={cx(styles.contentRoot, classNames.root)}>\n      <Table className={classNames.table}>\n        {hasData && (\n          <Headers headerGroups={headerGroups} className={classNames.header} />\n        )}\n        <Table.Body className={classNames.body}>\n          {hasData ? (\n            <>\n              <Rows\n                rows={rows}\n                lastRowRef={lastRowRef}\n                onRowClick={onRowClick}\n                classNames={{\n                  row: classNames.row\n                }}\n                stickyGroupHeader={stickyGroupHeader}\n              />\n              {isLoading ? (\n                <LoaderRows\n                  rowCount={loadingRowCount}\n                  columnCount={visibleColumnsLength}\n                />\n              ) : null}\n            </>\n          ) : (\n            <Table.Row>\n              <Table.Cell\n                colSpan={visibleColumnsLength}\n                className={styles.emptyStateCell}\n              >\n                {stateToShow}\n              </Table.Cell>\n            </Table.Row>\n          )}\n        </Table.Body>\n      </Table>\n    </div>\n  );\n}\n\nContent.displayName = 'DataTable.Content';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAsBA;AAOE;AAKU;;;AAmBZ;AAYA;AAOE;;AAEE;AACA;AASF;AACF;AAEA;AASE;AAeF;AAEA;;AAQI;;AAEA;;;;;AAcA;AAaM;;AAaF;AAGN;AACF;AAEA;AAIM;;AAiBJ;AACA;;AAGA;AACA;;AAGA;AACA;AACA;AACA;AAEA;AACE;;;;;AAGA;AACA;AAAc;;;;;AAMd;AACE;AACA;;AAGF;AACA;;AAEA;AACE;AACD;AACD;AAEA;AACE;AACA;AACF;;;;;AASF;AACA;;;AAIE;AACE;;AAGJ;;AAee;AAwBjB;AAEA;;"}

package/dist/components/data-table/components/display-settings.cjs

@@ -54,6 +54,7 @@ function DisplaySettings({ trigger = (jsxRuntime.jsx(button.Button, { variant: '
     }
     return (jsxRuntime.jsxs(popover.Popover, { children: [jsxRuntime.jsx(popover.Popover.Trigger, { asChild: true, children: trigger }), jsxRuntime.jsx(popover.Popover.Content, { className: dataTable_module.default['display-popover-content'], align: 'end', children: jsxRuntime.jsxs(flex.Flex, { direction: 'column', children: [jsxRuntime.jsxs(flex.Flex, { direction: 'column', className: dataTable_module.default['display-popover-properties-container'], gap: 5, children: [jsxRuntime.jsx(ordering.Ordering, { columnList: sortableColumns, onChange: onSortChange, value: tableQuery?.sort?.[0] || defaultSort }), jsxRuntime.jsx(grouping.Grouping, { columns: columns, onRemove: onGroupRemove, onChange: onGroupChange, value: tableQuery?.group_by?.[0] || dataTable_types.defaultGroupOption.id })] }), jsxRuntime.jsx(flex.Flex, { className: dataTable_module.default['display-popover-properties-container'], children: jsxRuntime.jsx(displayProperties.DisplayProperties, { columns: columns }) }), jsxRuntime.jsx(flex.Flex, { justify: 'end', className: dataTable_module.default['display-popover-reset-container'], children: jsxRuntime.jsx(button.Button, { variant: 'text', onClick: onReset, color: 'neutral', children: "Reset to default" }) })] }) })] }));
 }
+DisplaySettings.displayName = 'DataTable.DisplayControls';
 
 exports.DisplaySettings = DisplaySettings;
 //# sourceMappingURL=display-settings.cjs.map

package/dist/components/data-table/components/display-settings.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"display-settings.cjs","sources":["../../../../components/data-table/components/display-settings.tsx"],"sourcesContent":["'use client';\n\nimport { MixerHorizontalIcon } from '@radix-ui/react-icons';\n\nimport { ReactNode } from 'react';\nimport { Button } from '../../button';\nimport { Flex } from '../../flex';\nimport { Popover } from '../../popover';\nimport styles from '../data-table.module.css';\nimport {\n  DataTableColumn,\n  SortOrdersValues,\n  defaultGroupOption\n} from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { DisplayProperties } from './display-properties';\nimport { Grouping } from './grouping';\nimport { Ordering } from './ordering';\n\ninterface DisplaySettingsProps {\n  trigger?: ReactNode;\n}\n\nexport function DisplaySettings<TData, TValue>({\n  trigger = (\n    <Button\n      variant='outline'\n      color='neutral'\n      size='small'\n      leadingIcon={<MixerHorizontalIcon />}\n    >\n      Display\n    </Button>\n  )\n}: DisplaySettingsProps) {\n  const {\n    table,\n    updateTableQuery,\n    tableQuery,\n    defaultSort,\n    onDisplaySettingsReset\n  } = useDataTable();\n  const columns = table?.getAllColumns() as DataTableColumn<TData, TValue>[];\n\n  const sortableColumns = columns\n    ?.filter(col => col.columnDef.enableSorting)\n    ?.map(column => {\n      const id = column.id;\n      return {\n        label: column.columnDef.header || id,\n        id: id\n      };\n    });\n\n  function onSortChange(columnId: string, order: SortOrdersValues) {\n    updateTableQuery(query => {\n      return {\n        ...query,\n        sort: [{ name: columnId, order }]\n      };\n    });\n  }\n\n  function onGroupChange(columnId: string) {\n    updateTableQuery(query => {\n      return {\n        ...query,\n        group_by: [columnId]\n      };\n    });\n  }\n\n  function onGroupRemove() {\n    updateTableQuery(query => {\n      return {\n        ...query,\n        group_by: []\n      };\n    });\n  }\n\n  function onReset() {\n    onDisplaySettingsReset();\n  }\n\n  return (\n    <Popover>\n      <Popover.Trigger asChild>{trigger}</Popover.Trigger>\n      <Popover.Content\n        className={styles['display-popover-content']}\n        align='end'\n      >\n        <Flex direction='column'>\n          <Flex\n            direction='column'\n            className={styles['display-popover-properties-container']}\n            gap={5}\n          >\n            <Ordering\n              columnList={sortableColumns}\n              onChange={onSortChange}\n              value={tableQuery?.sort?.[0] || defaultSort}\n            />\n            <Grouping\n              columns={columns}\n              onRemove={onGroupRemove}\n              onChange={onGroupChange}\n              value={tableQuery?.group_by?.[0] || defaultGroupOption.id}\n            />\n          </Flex>\n          <Flex className={styles['display-popover-properties-container']}>\n            <DisplayProperties columns={columns} />\n          </Flex>\n          <Flex\n            justify='end'\n            className={styles['display-popover-reset-container']}\n          >\n            <Button variant='text' onClick={onReset} color='neutral'>\n              Reset to default\n            </Button>\n          </Flex>\n        </Flex>\n      </Popover.Content>\n    </Popover>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAuBgB;AAYd;AAOA;;;AAIE;AACE;;AAEE;AACA;;AAEJ;AAEF;;;AAGM;;;AAGJ;;;;;AAMI;;;AAGJ;;AAGF;;;AAGM;AACA;;AAEJ;;AAGF;AACE;;AAGF;AAwCF;;"}
+{"version":3,"file":"display-settings.cjs","sources":["../../../../components/data-table/components/display-settings.tsx"],"sourcesContent":["'use client';\n\nimport { MixerHorizontalIcon } from '@radix-ui/react-icons';\n\nimport { ReactNode } from 'react';\nimport { Button } from '../../button';\nimport { Flex } from '../../flex';\nimport { Popover } from '../../popover';\nimport styles from '../data-table.module.css';\nimport {\n  DataTableColumn,\n  defaultGroupOption,\n  SortOrdersValues\n} from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { DisplayProperties } from './display-properties';\nimport { Grouping } from './grouping';\nimport { Ordering } from './ordering';\n\ninterface DisplaySettingsProps {\n  trigger?: ReactNode;\n}\n\nexport function DisplaySettings<TData, TValue>({\n  trigger = (\n    <Button\n      variant='outline'\n      color='neutral'\n      size='small'\n      leadingIcon={<MixerHorizontalIcon />}\n    >\n      Display\n    </Button>\n  )\n}: DisplaySettingsProps) {\n  const {\n    table,\n    updateTableQuery,\n    tableQuery,\n    defaultSort,\n    onDisplaySettingsReset\n  } = useDataTable();\n  const columns = table?.getAllColumns() as DataTableColumn<TData, TValue>[];\n\n  const sortableColumns = columns\n    ?.filter(col => col.columnDef.enableSorting)\n    ?.map(column => {\n      const id = column.id;\n      return {\n        label: column.columnDef.header || id,\n        id: id\n      };\n    });\n\n  function onSortChange(columnId: string, order: SortOrdersValues) {\n    updateTableQuery(query => {\n      return {\n        ...query,\n        sort: [{ name: columnId, order }]\n      };\n    });\n  }\n\n  function onGroupChange(columnId: string) {\n    updateTableQuery(query => {\n      return {\n        ...query,\n        group_by: [columnId]\n      };\n    });\n  }\n\n  function onGroupRemove() {\n    updateTableQuery(query => {\n      return {\n        ...query,\n        group_by: []\n      };\n    });\n  }\n\n  function onReset() {\n    onDisplaySettingsReset();\n  }\n\n  return (\n    <Popover>\n      <Popover.Trigger asChild>{trigger}</Popover.Trigger>\n      <Popover.Content\n        className={styles['display-popover-content']}\n        align='end'\n      >\n        <Flex direction='column'>\n          <Flex\n            direction='column'\n            className={styles['display-popover-properties-container']}\n            gap={5}\n          >\n            <Ordering\n              columnList={sortableColumns}\n              onChange={onSortChange}\n              value={tableQuery?.sort?.[0] || defaultSort}\n            />\n            <Grouping\n              columns={columns}\n              onRemove={onGroupRemove}\n              onChange={onGroupChange}\n              value={tableQuery?.group_by?.[0] || defaultGroupOption.id}\n            />\n          </Flex>\n          <Flex className={styles['display-popover-properties-container']}>\n            <DisplayProperties columns={columns} />\n          </Flex>\n          <Flex\n            justify='end'\n            className={styles['display-popover-reset-container']}\n          >\n            <Button variant='text' onClick={onReset} color='neutral'>\n              Reset to default\n            </Button>\n          </Flex>\n        </Flex>\n      </Popover.Content>\n    </Popover>\n  );\n}\n\nDisplaySettings.displayName = 'DataTable.DisplayControls';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAuBgB;AAYd;AAOA;;;AAIE;AACE;;AAEE;AACA;;AAEJ;AAEF;;;AAGM;;;AAGJ;;;;;AAMI;;;AAGJ;;AAGF;;;AAGM;AACA;;AAEJ;;AAGF;AACE;;AAGF;AAwCF;AAEA;;"}

package/dist/components/data-table/components/display-settings.d.ts

@@ -3,5 +3,8 @@ interface DisplaySettingsProps {
     trigger?: ReactNode;
 }
 export declare function DisplaySettings<TData, TValue>({ trigger }: DisplaySettingsProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace DisplaySettings {
+    var displayName: string;
+}
 export {};
 //# sourceMappingURL=display-settings.d.ts.map

package/dist/components/data-table/components/display-settings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"display-settings.d.ts","sourceRoot":"","sources":["../../../../components/data-table/components/display-settings.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAelC,UAAU,oBAAoB;IAC5B,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,EAC7C,OASC,EACF,EAAE,oBAAoB,2CA2FtB"}
+{"version":3,"file":"display-settings.d.ts","sourceRoot":"","sources":["../../../../components/data-table/components/display-settings.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAelC,UAAU,oBAAoB;IAC5B,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,EAC7C,OASC,EACF,EAAE,oBAAoB,2CA2FtB;yBAtGe,eAAe"}

package/dist/components/data-table/components/display-settings.js

@@ -52,6 +52,7 @@ function DisplaySettings({ trigger = (jsx(Button, { variant: 'outline', color: '
     }
     return (jsxs(Popover, { children: [jsx(Popover.Trigger, { asChild: true, children: trigger }), jsx(Popover.Content, { className: styles['display-popover-content'], align: 'end', children: jsxs(Flex, { direction: 'column', children: [jsxs(Flex, { direction: 'column', className: styles['display-popover-properties-container'], gap: 5, children: [jsx(Ordering, { columnList: sortableColumns, onChange: onSortChange, value: tableQuery?.sort?.[0] || defaultSort }), jsx(Grouping, { columns: columns, onRemove: onGroupRemove, onChange: onGroupChange, value: tableQuery?.group_by?.[0] || defaultGroupOption.id })] }), jsx(Flex, { className: styles['display-popover-properties-container'], children: jsx(DisplayProperties, { columns: columns }) }), jsx(Flex, { justify: 'end', className: styles['display-popover-reset-container'], children: jsx(Button, { variant: 'text', onClick: onReset, color: 'neutral', children: "Reset to default" }) })] }) })] }));
 }
+DisplaySettings.displayName = 'DataTable.DisplayControls';
 
 export { DisplaySettings };
 //# sourceMappingURL=display-settings.js.map