@lobehub/ui 6.0.0-beta.6 → 6.0.0-beta.8

package/es/Select/renderOptions.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"renderOptions.mjs","names":["BaseSelect"],"sources":["../../src/Select/renderOptions.tsx"],"sourcesContent":["'use client';\n\nimport { Select as BaseSelect } from '@base-ui/react/select';\nimport clsx from 'clsx';\nimport { Check } from 'lucide-react';\n\nimport { menuStyles } from '@/DropdownMenu/sharedStyle';\nimport Icon from '@/Icon';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { getOptionSearchText, isGroupOption } from './helpers';\nimport { styles } from './style';\nimport {\n  type SelectClassNames,\n  type SelectOption,\n  type SelectOptions,\n  type SelectProps,\n} from './type';\n\ninterface RenderOptionsParams {\n  classNames: SelectClassNames | undefined;\n  isBoldIndicator: boolean;\n  items: SelectOptions<any>;\n  itemTextClassName: string;\n  listItemHeight: number | undefined;\n  optionRender: SelectProps['optionRender'];\n}\n\nfunction renderItem(\n  option: SelectOption<any>,\n  index: number,\n  params: Omit<RenderOptionsParams, 'items'>,\n) {\n  const { classNames, isBoldIndicator, itemTextClassName, listItemHeight, optionRender } = params;\n\n  return (\n    <BaseSelect.Item\n      disabled={option.disabled}\n      key={`${String(option.value)}-${index}`}\n      label={getOptionSearchText(option)}\n      value={option.value}\n      {...styleProps(\n        [menuStyles.item, isBoldIndicator && styles.itemBoldSelected],\n        clsx(classNames?.item, classNames?.option, option.className),\n        { minHeight: listItemHeight, ...option.style },\n      )}\n    >\n      <BaseSelect.ItemText className={itemTextClassName}>\n        {optionRender ? optionRender(option, { index }) : option.label}\n      </BaseSelect.ItemText>\n      {!isBoldIndicator && (\n        <BaseSelect.ItemIndicator {...styleProps(styles.itemIndicator, classNames?.itemIndicator)}>\n          <Icon icon={Check} size={'small'} />\n        </BaseSelect.ItemIndicator>\n      )}\n    </BaseSelect.Item>\n  );\n}\n\nexport function renderOptions(params: RenderOptionsParams) {\n  const { classNames, items } = params;\n  let optionIndex = 0;\n\n  return items.map((item, index) => {\n    if (isGroupOption(item)) {\n      return (\n        <BaseSelect.Group className={classNames?.group} key={`group-${index}`}>\n          <BaseSelect.GroupLabel {...styleProps(menuStyles.groupLabel, classNames?.groupLabel)}>\n            {item.label}\n          </BaseSelect.GroupLabel>\n          {item.options.map((option) => renderItem(option, optionIndex++, params))}\n        </BaseSelect.Group>\n      );\n    }\n\n    return renderItem(item, optionIndex++, params);\n  });\n}\n"],"mappings":";;;;;;;;;;;AA4BA,SAAS,WACP,QACA,OACA,QACA;CACA,MAAM,EAAE,YAAY,iBAAiB,mBAAmB,gBAAgB,iBAAiB;CAEzF,OACE,qBAACA,OAAW,MAAZ;EACE,UAAU,OAAO;EAEjB,OAAO,oBAAoB,MAAM;EACjC,OAAO,OAAO;EACd,GAAI,WACF,CAAC,WAAW,MAAM,mBAAmB,OAAO,gBAAgB,GAC5D,KAAK,YAAY,MAAM,YAAY,QAAQ,OAAO,SAAS,GAC3D;GAAE,WAAW;GAAgB,GAAG,OAAO;EAAM,CAC/C;EATF,UAAA,CAWE,oBAACA,OAAW,UAAZ;GAAqB,WAAW;GAC7B,UAAA,eAAe,aAAa,QAAQ,EAAE,MAAM,CAAC,IAAI,OAAO;EACtC,CAAA,GACpB,CAAC,mBACA,oBAACA,OAAW,eAAZ;GAA0B,GAAI,WAAW,OAAO,eAAe,YAAY,aAAa;GACtF,UAAA,oBAAC,MAAD;IAAM,MAAM;IAAO,MAAM;GAAU,CAAA;EACX,CAAA,CAEb;CAjBV,GAAA,GAAG,OAAO,OAAO,KAAK,EAAE,GAAG,OAiBjB;AAErB;AAEA,SAAgB,cAAc,QAA6B;CACzD,MAAM,EAAE,YAAY,UAAU;CAC9B,IAAI,cAAc;CAElB,OAAO,MAAM,KAAK,MAAM,UAAU;EAChC,IAAI,cAAc,IAAI,GACpB,OACE,qBAACA,OAAW,OAAZ;GAAkB,WAAW,YAAY;GAAzC,UAAA,CACE,oBAACA,OAAW,YAAZ;IAAuB,GAAI,WAAW,WAAW,YAAY,YAAY,UAAU;IAChF,UAAA,KAAK;GACe,CAAA,GACtB,KAAK,QAAQ,KAAK,WAAW,WAAW,QAAQ,eAAe,MAAM,CAAC,CACvD;EALmC,GAAA,SAAS,OAK5C;EAItB,OAAO,WAAW,MAAM,eAAe,MAAM;CAC/C,CAAC;AACH"}
+{"version":3,"file":"renderOptions.mjs","names":["BaseSelect","clsx"],"sources":["../../src/Select/renderOptions.tsx"],"sourcesContent":["'use client';\n\nimport { Select as BaseSelect } from '@base-ui/react/select';\nimport clsx from 'clsx';\nimport { Check } from 'lucide-react';\n\nimport { menuStyles } from '@/DropdownMenu/sharedStyle';\nimport Icon from '@/Icon';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { getOptionSearchText, isGroupOption } from './helpers';\nimport { styles } from './style';\nimport {\n  type SelectClassNames,\n  type SelectOption,\n  type SelectOptions,\n  type SelectProps,\n} from './type';\n\ninterface RenderOptionsParams {\n  classNames: SelectClassNames | undefined;\n  isBoldIndicator: boolean;\n  items: SelectOptions<any>;\n  itemTextClassName: string;\n  listItemHeight: number | undefined;\n  optionRender: SelectProps['optionRender'];\n}\n\nfunction renderItem(\n  option: SelectOption<any>,\n  index: number,\n  params: Omit<RenderOptionsParams, 'items'>,\n) {\n  const { classNames, isBoldIndicator, itemTextClassName, listItemHeight, optionRender } = params;\n\n  return (\n    <BaseSelect.Item\n      disabled={option.disabled}\n      key={`${String(option.value)}-${index}`}\n      label={getOptionSearchText(option)}\n      value={option.value}\n      {...styleProps(\n        [menuStyles.item, isBoldIndicator && styles.itemBoldSelected],\n        clsx(classNames?.item, classNames?.option, option.className),\n        { minHeight: listItemHeight, ...option.style },\n      )}\n    >\n      <BaseSelect.ItemText className={itemTextClassName}>\n        {optionRender ? optionRender(option, { index }) : option.label}\n      </BaseSelect.ItemText>\n      {!isBoldIndicator && (\n        <BaseSelect.ItemIndicator {...styleProps(styles.itemIndicator, classNames?.itemIndicator)}>\n          <Icon icon={Check} size={'small'} />\n        </BaseSelect.ItemIndicator>\n      )}\n    </BaseSelect.Item>\n  );\n}\n\nexport function renderOptions(params: RenderOptionsParams) {\n  const { classNames, items } = params;\n  let optionIndex = 0;\n\n  return items.map((item, index) => {\n    if (isGroupOption(item)) {\n      return (\n        <BaseSelect.Group className={classNames?.group} key={`group-${index}`}>\n          <BaseSelect.GroupLabel {...styleProps(menuStyles.groupLabel, classNames?.groupLabel)}>\n            {item.label}\n          </BaseSelect.GroupLabel>\n          {item.options.map((option) => renderItem(option, optionIndex++, params))}\n        </BaseSelect.Group>\n      );\n    }\n\n    return renderItem(item, optionIndex++, params);\n  });\n}\n"],"mappings":";;;;;;;;;;;AA4BA,SAAS,WACP,QACA,OACA,QACA;CACA,MAAM,EAAE,YAAY,iBAAiB,mBAAmB,gBAAgB,iBAAiB;CAEzF,OACE,qBAACA,OAAW,MAAZ;EACE,UAAU,OAAO;EAEjB,OAAO,oBAAoB,MAAM;EACjC,OAAO,OAAO;EACd,GAAI,WACF,CAAC,WAAW,MAAM,mBAAmB,OAAO,gBAAgB,GAC5DC,OAAK,YAAY,MAAM,YAAY,QAAQ,OAAO,SAAS,GAC3D;GAAE,WAAW;GAAgB,GAAG,OAAO;EAAM,CAC/C;EATF,UAAA,CAWE,oBAACD,OAAW,UAAZ;GAAqB,WAAW;GAC7B,UAAA,eAAe,aAAa,QAAQ,EAAE,MAAM,CAAC,IAAI,OAAO;EACtC,CAAA,GACpB,CAAC,mBACA,oBAACA,OAAW,eAAZ;GAA0B,GAAI,WAAW,OAAO,eAAe,YAAY,aAAa;GACtF,UAAA,oBAAC,MAAD;IAAM,MAAM;IAAO,MAAM;GAAU,CAAA;EACX,CAAA,CAEb;CAjBV,GAAA,GAAG,OAAO,OAAO,KAAK,EAAE,GAAG,OAiBjB;AAErB;AAEA,SAAgB,cAAc,QAA6B;CACzD,MAAM,EAAE,YAAY,UAAU;CAC9B,IAAI,cAAc;CAElB,OAAO,MAAM,KAAK,MAAM,UAAU;EAChC,IAAI,cAAc,IAAI,GACpB,OACE,qBAACA,OAAW,OAAZ;GAAkB,WAAW,YAAY;GAAzC,UAAA,CACE,oBAACA,OAAW,YAAZ;IAAuB,GAAI,WAAW,WAAW,YAAY,YAAY,UAAU;IAChF,UAAA,KAAK;GACe,CAAA,GACtB,KAAK,QAAQ,KAAK,WAAW,WAAW,QAAQ,eAAe,MAAM,CAAC,CACvD;EALmC,GAAA,SAAS,OAK5C;EAItB,OAAO,WAAW,MAAM,eAAe,MAAM;CAC/C,CAAC;AACH"}

package/es/Select/type.d.mts

@@ -64,6 +64,11 @@ export interface SelectProps<Value = string> extends Pick<VirtualListProps, 'vir
   defaultOpen?: boolean;
   defaultValue?: Value | Value[] | null;
   disabled?: boolean;
+  /**
+   * Local filtering of the options while searching: `false` keeps every option (filter on the
+   * server through `onSearch`), a function decides per option. @default true
+   */
+  filterOption?: boolean | ((input: string, option: SelectOption<Value>) => boolean);
   id?: string;
   labelRender?: (option: SelectOption<Value>) => ReactNode;
   /**
@@ -76,6 +81,8 @@ export interface SelectProps<Value = string> extends Pick<VirtualListProps, 'vir
   name?: string;
   onChange?: (value: Value | Value[] | null | undefined, option?: SelectOption<Value> | SelectOption<Value>[]) => void;
   onOpenChange?: (open: boolean, eventDetails?: SelectRootChangeEventDetails) => void;
+  /** Called with the search text as it is typed (`showSearch`). */
+  onSearch?: (value: string) => void;
   onSelect?: (value: Value, option?: SelectOption<Value>) => void;
   open?: boolean;
   optionRender?: (option: SelectOption<Value>, info: {

package/es/Switch/Switch.mjs

@@ -5,7 +5,7 @@ import { styles } from "./style.mjs";
 import { SwitchIcon, SwitchRoot, SwitchThumb } from "./atoms.mjs";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import * as stylex from "@stylexjs/stylex";
 import { Loader2 } from "lucide-react";
 //#region src/Switch/Switch.tsx
@@ -16,7 +16,7 @@ const Switch = memo(({ autoFocus, checked, checkedChildren, className, className
 	return /* @__PURE__ */ jsxs(SwitchRoot, {
 		autoFocus,
 		checked: resolvedChecked,
-		className: clsx(className, rootClassName, classNames?.root),
+		className: clsx$1(className, rootClassName, classNames?.root),
 		defaultChecked: resolvedDefaultChecked,
 		disabled: isDisabled,
 		id,

package/es/Switch/Switch.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.mjs","names":[],"sources":["../../src/Switch/Switch.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { Loader2 } from 'lucide-react';\nimport { memo } from 'react';\n\nimport Icon from '@/Icon';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nimport { SwitchIcon, SwitchRoot, SwitchThumb } from './atoms';\nimport { styles } from './style';\nimport type { SwitchProps } from './type';\n\nconst Switch = memo<SwitchProps>(\n  ({\n    autoFocus,\n    checked,\n    checkedChildren,\n    className,\n    classNames,\n    defaultChecked,\n    defaultValue,\n    disabled,\n    id,\n    loading,\n    name,\n    onChange,\n    onClick,\n    ref,\n    rootClassName,\n    size = 'default',\n    style,\n    styles: customStyles,\n    tabIndex,\n    title,\n    unCheckedChildren,\n    value,\n  }) => {\n    const isDisabled = disabled || loading;\n    const resolvedChecked = value ?? checked;\n    const resolvedDefaultChecked = defaultValue ?? defaultChecked;\n\n    return (\n      <SwitchRoot\n        autoFocus={autoFocus}\n        checked={resolvedChecked}\n        className={clsx(className, rootClassName, classNames?.root)}\n        defaultChecked={resolvedDefaultChecked}\n        disabled={isDisabled}\n        id={id}\n        name={name}\n        ref={ref}\n        size={size}\n        style={{ ...style, ...customStyles?.root }}\n        tabIndex={tabIndex}\n        title={title}\n        onCheckedChange={onChange}\n        onClick={onClick}\n      >\n        {checkedChildren && (\n          <SwitchIcon\n            className={classNames?.content}\n            position=\"left\"\n            size={size}\n            style={customStyles?.content}\n          >\n            {checkedChildren}\n          </SwitchIcon>\n        )}\n        {unCheckedChildren && (\n          <SwitchIcon\n            className={classNames?.content}\n            position=\"right\"\n            size={size}\n            style={customStyles?.content}\n          >\n            {unCheckedChildren}\n          </SwitchIcon>\n        )}\n        <SwitchThumb className={classNames?.thumb} size={size} style={customStyles?.thumb}>\n          {loading && (\n            <Icon\n              {...stylex.props(styles.loading)}\n              icon={Loader2}\n              size={size === 'small' ? 8 : 12}\n              style={{ color: cssVar.colorPrimary }}\n            />\n          )}\n        </SwitchThumb>\n      </SwitchRoot>\n    );\n  },\n);\n\nSwitch.displayName = 'Switch';\n\nexport default Switch;\n"],"mappings":";;;;;;;;;;;AAWA,MAAM,SAAS,MAAmB,EAChC,WACA,SACA,iBACA,WACA,YACA,gBACA,cACA,UACA,IACA,SACA,MACA,UACA,SACA,KACA,eACA,OAAO,WACP,OACA,QAAQ,cACR,UACA,OACA,mBACA,YACI;CACJ,MAAM,aAAa,YAAY;CAC/B,MAAM,kBAAkB,SAAS;CACjC,MAAM,yBAAyB,gBAAgB;CAC/C,OAAO,qBAAC,YAAD;EAAuB;EAAW,SAAS;EAAiB,WAAW,KAAK,WAAW,eAAe,YAAY,IAAI;EAAG,gBAAgB;EAAwB,UAAU;EAAgB;EAAU;EAAW;EAAW;EAAM,OAAO;GAC7O,GAAG;GACH,GAAG,cAAc;EACnB;EAAa;EAAiB;EAAO,iBAAiB;EAAmB;EAHlE,UAAA;GAIA,mBAAmB,oBAAC,YAAD;IAAY,WAAW,YAAY;IAAS,UAAS;IAAa;IAAM,OAAO,cAAc;IAC5G,UAAA;GACS,CAAA;GACb,qBAAqB,oBAAC,YAAD;IAAY,WAAW,YAAY;IAAS,UAAS;IAAc;IAAM,OAAO,cAAc;IAC/G,UAAA;GACS,CAAA;GACd,oBAAC,aAAD;IAAa,WAAW,YAAY;IAAa;IAAM,OAAO,cAAc;IACzE,UAAA,WAAW,oBAAC,MAAD;KAAM,GAAI,OAAO,MAAM,OAAO,OAAO;KAAG,MAAM;KAAS,MAAM,SAAS,UAAU,IAAI;KAAI,OAAO,EAC7G,OAAO,OAAO,aAChB;IAAI,CAAA;GACW,CAAA;EACH;;AAClB,CAAC;AACD,OAAO,cAAc"}
+{"version":3,"file":"Switch.mjs","names":["clsx"],"sources":["../../src/Switch/Switch.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { Loader2 } from 'lucide-react';\nimport { memo } from 'react';\n\nimport Icon from '@/Icon';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nimport { SwitchIcon, SwitchRoot, SwitchThumb } from './atoms';\nimport { styles } from './style';\nimport type { SwitchProps } from './type';\n\nconst Switch = memo<SwitchProps>(\n  ({\n    autoFocus,\n    checked,\n    checkedChildren,\n    className,\n    classNames,\n    defaultChecked,\n    defaultValue,\n    disabled,\n    id,\n    loading,\n    name,\n    onChange,\n    onClick,\n    ref,\n    rootClassName,\n    size = 'default',\n    style,\n    styles: customStyles,\n    tabIndex,\n    title,\n    unCheckedChildren,\n    value,\n  }) => {\n    const isDisabled = disabled || loading;\n    const resolvedChecked = value ?? checked;\n    const resolvedDefaultChecked = defaultValue ?? defaultChecked;\n\n    return (\n      <SwitchRoot\n        autoFocus={autoFocus}\n        checked={resolvedChecked}\n        className={clsx(className, rootClassName, classNames?.root)}\n        defaultChecked={resolvedDefaultChecked}\n        disabled={isDisabled}\n        id={id}\n        name={name}\n        ref={ref}\n        size={size}\n        style={{ ...style, ...customStyles?.root }}\n        tabIndex={tabIndex}\n        title={title}\n        onCheckedChange={onChange}\n        onClick={onClick}\n      >\n        {checkedChildren && (\n          <SwitchIcon\n            className={classNames?.content}\n            position=\"left\"\n            size={size}\n            style={customStyles?.content}\n          >\n            {checkedChildren}\n          </SwitchIcon>\n        )}\n        {unCheckedChildren && (\n          <SwitchIcon\n            className={classNames?.content}\n            position=\"right\"\n            size={size}\n            style={customStyles?.content}\n          >\n            {unCheckedChildren}\n          </SwitchIcon>\n        )}\n        <SwitchThumb className={classNames?.thumb} size={size} style={customStyles?.thumb}>\n          {loading && (\n            <Icon\n              {...stylex.props(styles.loading)}\n              icon={Loader2}\n              size={size === 'small' ? 8 : 12}\n              style={{ color: cssVar.colorPrimary }}\n            />\n          )}\n        </SwitchThumb>\n      </SwitchRoot>\n    );\n  },\n);\n\nSwitch.displayName = 'Switch';\n\nexport default Switch;\n"],"mappings":";;;;;;;;;;;AAWA,MAAM,SAAS,MAAmB,EAChC,WACA,SACA,iBACA,WACA,YACA,gBACA,cACA,UACA,IACA,SACA,MACA,UACA,SACA,KACA,eACA,OAAO,WACP,OACA,QAAQ,cACR,UACA,OACA,mBACA,YACI;CACJ,MAAM,aAAa,YAAY;CAC/B,MAAM,kBAAkB,SAAS;CACjC,MAAM,yBAAyB,gBAAgB;CAC/C,OAAO,qBAAC,YAAD;EAAuB;EAAW,SAAS;EAAiB,WAAWA,OAAK,WAAW,eAAe,YAAY,IAAI;EAAG,gBAAgB;EAAwB,UAAU;EAAgB;EAAU;EAAW;EAAW;EAAM,OAAO;GAC7O,GAAG;GACH,GAAG,cAAc;EACnB;EAAa;EAAiB;EAAO,iBAAiB;EAAmB;EAHlE,UAAA;GAIA,mBAAmB,oBAAC,YAAD;IAAY,WAAW,YAAY;IAAS,UAAS;IAAa;IAAM,OAAO,cAAc;IAC5G,UAAA;GACS,CAAA;GACb,qBAAqB,oBAAC,YAAD;IAAY,WAAW,YAAY;IAAS,UAAS;IAAc;IAAM,OAAO,cAAc;IAC/G,UAAA;GACS,CAAA;GACd,oBAAC,aAAD;IAAa,WAAW,YAAY;IAAa;IAAM,OAAO,cAAc;IACzE,UAAA,WAAW,oBAAC,MAAD;KAAM,GAAI,OAAO,MAAM,OAAO,OAAO;KAAG,MAAM;KAAS,MAAM,SAAS,UAAU,IAAI;KAAI,OAAO,EAC7G,OAAO,OAAO,aAChB;IAAI,CAAA;GACW,CAAA;EACH;;AAClB,CAAC;AACD,OAAO,cAAc"}

package/es/Switch/atoms.mjs

@@ -6,7 +6,7 @@ import { switchMarker } from "./marker.stylex.mjs";
 import { styles } from "./style.mjs";
 import { createContext, use, useEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import * as stylex from "@stylexjs/stylex";
 import { Switch } from "@base-ui/react/switch";
 import { animate, motionValue } from "motion";
@@ -113,7 +113,7 @@ const SwitchRoot = ({ checked, className, defaultChecked, onCheckedChange, onCli
 					focusRing.info,
 					styles.root,
 					rootSizeStyles[size]
-				], clsx("lobe-switch", className), style),
+				], clsx$1("lobe-switch", className), style),
 				onClick: handleClick,
 				onKeyDown: handleKeyDown,
 				onKeyUp: handleKeyUp,

package/es/Switch/atoms.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"atoms.mjs","names":[],"sources":["../../src/Switch/atoms.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport { Switch } from '@base-ui/react/switch';\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { animate, motionValue } from 'motion';\nimport type { CSSProperties, KeyboardEvent, MouseEvent, PointerEvent } from 'react';\nimport { createContext, use, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { useControlledState } from '@/hooks/useControlledState';\nimport { focusRing } from '@/styles/stylex/focusRing';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { switchMarker } from './marker.stylex';\nimport { styles } from './style';\nimport type {\n  SwitchChangeEventHandler,\n  SwitchContextType,\n  SwitchIconPosition,\n  SwitchIconProps,\n  SwitchRootProps,\n  SwitchSize,\n  SwitchThumbProps,\n} from './type';\n\nconst THUMB_METRICS: Record<\n  SwitchSize,\n  { checkedX: number; pressedCheckedX: number; pressedWidth: number; width: number }\n> = {\n  default: { checkedX: 14, pressedCheckedX: 10, pressedWidth: 22, width: 18 },\n  small: { checkedX: 12, pressedCheckedX: 8, pressedWidth: 16, width: 12 },\n};\n\nconst rootSizeStyles = { default: styles.rootDefault, small: styles.rootSmall };\nconst thumbSizeStyles = { default: styles.thumbDefault, small: styles.thumbSmall };\n\nconst THUMB_SPRING = { damping: 24, stiffness: 360, type: 'spring' as const };\n\nconst SwitchContext = createContext<SwitchContextType | null>(null);\n\nexport const useSwitchContext = () => {\n  const context = use(SwitchContext);\n  if (!context) {\n    throw new Error('useSwitchContext must be used within a SwitchRoot');\n  }\n  return context;\n};\n\ntype SwitchRootInternalProps = Omit<SwitchRootProps, 'onCheckedChange' | 'onClick'> & {\n  onCheckedChange?: SwitchChangeEventHandler;\n  onClick?: SwitchChangeEventHandler;\n};\n\nexport const SwitchRoot = ({\n  checked,\n  className,\n  defaultChecked,\n  onCheckedChange,\n  onClick,\n  onKeyDown,\n  onKeyUp,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  size = 'default',\n  children,\n  disabled,\n  readOnly,\n  required,\n  inputRef,\n  id,\n  name,\n  style,\n  ...rest\n}: SwitchRootInternalProps) => {\n  const [isPressed, setIsPressed] = useState(false);\n  const lastEventRef = useRef<MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>>(\n    null,\n  );\n\n  const [isChecked, setIsChecked] = useControlledState(defaultChecked ?? false, {\n    defaultValue: defaultChecked,\n    onChange: (value: boolean) => {\n      if (lastEventRef.current) {\n        onCheckedChange?.(value, lastEventRef.current);\n      }\n    },\n    value: checked,\n  });\n\n  const contextValue = useMemo(\n    () => ({\n      isChecked: Boolean(isChecked),\n      isPressed,\n      setIsChecked: (value: boolean) => setIsChecked(value),\n      setIsPressed,\n    }),\n    [isChecked, isPressed, setIsChecked],\n  );\n\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    lastEventRef.current = event;\n    onClick?.(!isChecked, event);\n  };\n\n  const isInteractive = !disabled && !readOnly;\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      lastEventRef.current = event;\n    }\n    if (event.key === ' ' && isInteractive) {\n      setIsPressed(true);\n    }\n    onKeyDown?.(event);\n  };\n\n  const handleKeyUp = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (event.key === ' ') {\n      setIsPressed(false);\n    }\n    onKeyUp?.(event);\n  };\n\n  const handlePointerDown = (event: PointerEvent<HTMLButtonElement>) => {\n    if (isInteractive) {\n      setIsPressed(true);\n    }\n    onPointerDown?.(event);\n  };\n\n  const handlePointerUp = (event: PointerEvent<HTMLButtonElement>) => {\n    setIsPressed(false);\n    onPointerUp?.(event);\n  };\n\n  const handlePointerCancel = (event: PointerEvent<HTMLButtonElement>) => {\n    setIsPressed(false);\n    onPointerCancel?.(event);\n  };\n\n  const handlePointerLeave = (event: PointerEvent<HTMLButtonElement>) => {\n    setIsPressed(false);\n    onPointerLeave?.(event);\n  };\n\n  return (\n    <SwitchContext value={contextValue}>\n      <Switch.Root\n        nativeButton\n        checked={isChecked}\n        defaultChecked={defaultChecked}\n        disabled={disabled}\n        id={id}\n        inputRef={inputRef}\n        name={name}\n        readOnly={readOnly}\n        required={required}\n        render={\n          <button\n            {...rest}\n            {...styleProps(\n              [switchMarker, focusRing.info, styles.root, rootSizeStyles[size]],\n              clsx('lobe-switch', className),\n              style,\n            )}\n            onClick={handleClick}\n            onKeyDown={handleKeyDown}\n            onKeyUp={handleKeyUp}\n            onPointerCancel={handlePointerCancel}\n            onPointerDown={handlePointerDown}\n            onPointerLeave={handlePointerLeave}\n            onPointerUp={handlePointerUp}\n          />\n        }\n        onCheckedChange={setIsChecked}\n      >\n        {children}\n      </Switch.Root>\n    </SwitchContext>\n  );\n};\n\nSwitchRoot.displayName = 'SwitchRoot';\n\nexport const SwitchThumb = ({\n  className,\n  size = 'default',\n  style,\n  children,\n  ...rest\n}: SwitchThumbProps) => {\n  const { isChecked, isPressed } = useSwitchContext();\n  const ref = useRef<HTMLSpanElement>(null);\n\n  const metrics = THUMB_METRICS[size];\n  const targetX = isChecked ? (isPressed ? metrics.pressedCheckedX : metrics.checkedX) : 0;\n  const targetWidth = isPressed ? metrics.pressedWidth : metrics.width;\n\n  const [values] = useState(() => ({\n    width: motionValue(targetWidth),\n    x: motionValue(targetX),\n  }));\n\n  // animated keys stay referentially stable so React never rewrites mid-flight inline values\n  const [initialStyle] = useState<CSSProperties>(\n    () => ({ '--switch-x': `${targetX}px`, 'width': targetWidth }) as CSSProperties,\n  );\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    const unsubscribeX = values.x.on('change', (x) => {\n      el.style.setProperty('--switch-x', `${x}px`);\n    });\n    const unsubscribeWidth = values.width.on('change', (width) => {\n      el.style.setProperty('width', `${width}px`);\n    });\n    return () => {\n      unsubscribeX();\n      unsubscribeWidth();\n    };\n  }, [values]);\n\n  useEffect(() => {\n    const reduceMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;\n    const transition = reduceMotion ? { duration: 0 } : THUMB_SPRING;\n    const animations = [\n      animate(values.x, targetX, transition),\n      animate(values.width, targetWidth, transition),\n    ];\n    return () => {\n      for (const animation of animations) animation.stop();\n    };\n  }, [values, targetX, targetWidth]);\n\n  return (\n    <Switch.Thumb\n      render={\n        <span\n          {...rest}\n          ref={ref}\n          {...styleProps([styles.thumb, thumbSizeStyles[size]], className, {\n            ...initialStyle,\n            ...style,\n          })}\n        >\n          {children}\n        </span>\n      }\n    />\n  );\n};\n\nSwitchThumb.displayName = 'SwitchThumb';\n\nconst iconPositionStyles: Record<SwitchIconPosition, stylex.StyleXStyles> = {\n  left: styles.iconLeft,\n  right: styles.iconRight,\n  thumb: styles.iconThumb,\n};\n\nexport const SwitchIcon = ({\n  children,\n  className,\n  position,\n  size: _size,\n  style,\n  ...rest\n}: SwitchIconProps) => {\n  return (\n    <span {...styleProps([styles.icon, iconPositionStyles[position]], className, style)} {...rest}>\n      {children}\n    </span>\n  );\n};\n\nSwitchIcon.displayName = 'SwitchIcon';\n\nconst switchClassNames = Object.fromEntries(\n  Object.entries(styles).map(([key, value]) => [key, stylex.props(value).className ?? '']),\n) as Record<keyof typeof styles, string>;\n\nexport const switchStyles = {\n  ...switchClassNames,\n  iconLeftSmall: switchClassNames.iconLeft,\n  iconRightSmall: switchClassNames.iconRight,\n};\n"],"mappings":"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"}
+{"version":3,"file":"atoms.mjs","names":["clsx"],"sources":["../../src/Switch/atoms.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport { Switch } from '@base-ui/react/switch';\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { animate, motionValue } from 'motion';\nimport type { CSSProperties, KeyboardEvent, MouseEvent, PointerEvent } from 'react';\nimport { createContext, use, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { useControlledState } from '@/hooks/useControlledState';\nimport { focusRing } from '@/styles/stylex/focusRing';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { switchMarker } from './marker.stylex';\nimport { styles } from './style';\nimport type {\n  SwitchChangeEventHandler,\n  SwitchContextType,\n  SwitchIconPosition,\n  SwitchIconProps,\n  SwitchRootProps,\n  SwitchSize,\n  SwitchThumbProps,\n} from './type';\n\nconst THUMB_METRICS: Record<\n  SwitchSize,\n  { checkedX: number; pressedCheckedX: number; pressedWidth: number; width: number }\n> = {\n  default: { checkedX: 14, pressedCheckedX: 10, pressedWidth: 22, width: 18 },\n  small: { checkedX: 12, pressedCheckedX: 8, pressedWidth: 16, width: 12 },\n};\n\nconst rootSizeStyles = { default: styles.rootDefault, small: styles.rootSmall };\nconst thumbSizeStyles = { default: styles.thumbDefault, small: styles.thumbSmall };\n\nconst THUMB_SPRING = { damping: 24, stiffness: 360, type: 'spring' as const };\n\nconst SwitchContext = createContext<SwitchContextType | null>(null);\n\nexport const useSwitchContext = () => {\n  const context = use(SwitchContext);\n  if (!context) {\n    throw new Error('useSwitchContext must be used within a SwitchRoot');\n  }\n  return context;\n};\n\ntype SwitchRootInternalProps = Omit<SwitchRootProps, 'onCheckedChange' | 'onClick'> & {\n  onCheckedChange?: SwitchChangeEventHandler;\n  onClick?: SwitchChangeEventHandler;\n};\n\nexport const SwitchRoot = ({\n  checked,\n  className,\n  defaultChecked,\n  onCheckedChange,\n  onClick,\n  onKeyDown,\n  onKeyUp,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  size = 'default',\n  children,\n  disabled,\n  readOnly,\n  required,\n  inputRef,\n  id,\n  name,\n  style,\n  ...rest\n}: SwitchRootInternalProps) => {\n  const [isPressed, setIsPressed] = useState(false);\n  const lastEventRef = useRef<MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>>(\n    null,\n  );\n\n  const [isChecked, setIsChecked] = useControlledState(defaultChecked ?? false, {\n    defaultValue: defaultChecked,\n    onChange: (value: boolean) => {\n      if (lastEventRef.current) {\n        onCheckedChange?.(value, lastEventRef.current);\n      }\n    },\n    value: checked,\n  });\n\n  const contextValue = useMemo(\n    () => ({\n      isChecked: Boolean(isChecked),\n      isPressed,\n      setIsChecked: (value: boolean) => setIsChecked(value),\n      setIsPressed,\n    }),\n    [isChecked, isPressed, setIsChecked],\n  );\n\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    lastEventRef.current = event;\n    onClick?.(!isChecked, event);\n  };\n\n  const isInteractive = !disabled && !readOnly;\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      lastEventRef.current = event;\n    }\n    if (event.key === ' ' && isInteractive) {\n      setIsPressed(true);\n    }\n    onKeyDown?.(event);\n  };\n\n  const handleKeyUp = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (event.key === ' ') {\n      setIsPressed(false);\n    }\n    onKeyUp?.(event);\n  };\n\n  const handlePointerDown = (event: PointerEvent<HTMLButtonElement>) => {\n    if (isInteractive) {\n      setIsPressed(true);\n    }\n    onPointerDown?.(event);\n  };\n\n  const handlePointerUp = (event: PointerEvent<HTMLButtonElement>) => {\n    setIsPressed(false);\n    onPointerUp?.(event);\n  };\n\n  const handlePointerCancel = (event: PointerEvent<HTMLButtonElement>) => {\n    setIsPressed(false);\n    onPointerCancel?.(event);\n  };\n\n  const handlePointerLeave = (event: PointerEvent<HTMLButtonElement>) => {\n    setIsPressed(false);\n    onPointerLeave?.(event);\n  };\n\n  return (\n    <SwitchContext value={contextValue}>\n      <Switch.Root\n        nativeButton\n        checked={isChecked}\n        defaultChecked={defaultChecked}\n        disabled={disabled}\n        id={id}\n        inputRef={inputRef}\n        name={name}\n        readOnly={readOnly}\n        required={required}\n        render={\n          <button\n            {...rest}\n            {...styleProps(\n              [switchMarker, focusRing.info, styles.root, rootSizeStyles[size]],\n              clsx('lobe-switch', className),\n              style,\n            )}\n            onClick={handleClick}\n            onKeyDown={handleKeyDown}\n            onKeyUp={handleKeyUp}\n            onPointerCancel={handlePointerCancel}\n            onPointerDown={handlePointerDown}\n            onPointerLeave={handlePointerLeave}\n            onPointerUp={handlePointerUp}\n          />\n        }\n        onCheckedChange={setIsChecked}\n      >\n        {children}\n      </Switch.Root>\n    </SwitchContext>\n  );\n};\n\nSwitchRoot.displayName = 'SwitchRoot';\n\nexport const SwitchThumb = ({\n  className,\n  size = 'default',\n  style,\n  children,\n  ...rest\n}: SwitchThumbProps) => {\n  const { isChecked, isPressed } = useSwitchContext();\n  const ref = useRef<HTMLSpanElement>(null);\n\n  const metrics = THUMB_METRICS[size];\n  const targetX = isChecked ? (isPressed ? metrics.pressedCheckedX : metrics.checkedX) : 0;\n  const targetWidth = isPressed ? metrics.pressedWidth : metrics.width;\n\n  const [values] = useState(() => ({\n    width: motionValue(targetWidth),\n    x: motionValue(targetX),\n  }));\n\n  // animated keys stay referentially stable so React never rewrites mid-flight inline values\n  const [initialStyle] = useState<CSSProperties>(\n    () => ({ '--switch-x': `${targetX}px`, 'width': targetWidth }) as CSSProperties,\n  );\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    const unsubscribeX = values.x.on('change', (x) => {\n      el.style.setProperty('--switch-x', `${x}px`);\n    });\n    const unsubscribeWidth = values.width.on('change', (width) => {\n      el.style.setProperty('width', `${width}px`);\n    });\n    return () => {\n      unsubscribeX();\n      unsubscribeWidth();\n    };\n  }, [values]);\n\n  useEffect(() => {\n    const reduceMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;\n    const transition = reduceMotion ? { duration: 0 } : THUMB_SPRING;\n    const animations = [\n      animate(values.x, targetX, transition),\n      animate(values.width, targetWidth, transition),\n    ];\n    return () => {\n      for (const animation of animations) animation.stop();\n    };\n  }, [values, targetX, targetWidth]);\n\n  return (\n    <Switch.Thumb\n      render={\n        <span\n          {...rest}\n          ref={ref}\n          {...styleProps([styles.thumb, thumbSizeStyles[size]], className, {\n            ...initialStyle,\n            ...style,\n          })}\n        >\n          {children}\n        </span>\n      }\n    />\n  );\n};\n\nSwitchThumb.displayName = 'SwitchThumb';\n\nconst iconPositionStyles: Record<SwitchIconPosition, stylex.StyleXStyles> = {\n  left: styles.iconLeft,\n  right: styles.iconRight,\n  thumb: styles.iconThumb,\n};\n\nexport const SwitchIcon = ({\n  children,\n  className,\n  position,\n  size: _size,\n  style,\n  ...rest\n}: SwitchIconProps) => {\n  return (\n    <span {...styleProps([styles.icon, iconPositionStyles[position]], className, style)} {...rest}>\n      {children}\n    </span>\n  );\n};\n\nSwitchIcon.displayName = 'SwitchIcon';\n\nconst switchClassNames = Object.fromEntries(\n  Object.entries(styles).map(([key, value]) => [key, stylex.props(value).className ?? '']),\n) as Record<keyof typeof styles, string>;\n\nexport const switchStyles = {\n  ...switchClassNames,\n  iconLeftSmall: switchClassNames.iconLeft,\n  iconRightSmall: switchClassNames.iconRight,\n};\n"],"mappings":"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"}

package/es/Table/Column.d.mts

@@ -0,0 +1,8 @@
+import { TableColumnType } from "./type.mjs";
+import { ReactNode } from "react";
+//#region src/Table/Column.d.ts
+export type TableColumnProps<T> = TableColumnType<T>;
+declare const Column: <T>(_props: TableColumnProps<T>) => ReactNode;
+//#endregion
+export { Column as default };
+//# sourceMappingURL=Column.d.mts.map

package/es/Table/Column.mjs

@@ -0,0 +1,6 @@
+//#region src/Table/Column.tsx
+const Column = (_props) => null;
+//#endregion
+export { Column as default };
+
+//# sourceMappingURL=Column.mjs.map

package/es/Table/Column.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Column.mjs","names":[],"sources":["../../src/Table/Column.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport type { TableColumnType } from './type';\n\nexport type TableColumnProps<T> = TableColumnType<T>;\n\nconst Column = <T,>(_props: TableColumnProps<T>): ReactNode => null;\n\nexport default Column;\n"],"mappings":";AAMA,MAAM,UAAc,WAA2C"}

package/es/Table/ColumnGroup.d.mts

@@ -0,0 +1,11 @@
+import { TableColumnType } from "./type.mjs";
+import { ReactNode } from "react";
+//#region src/Table/ColumnGroup.d.ts
+export interface TableColumnGroupProps<T> extends Omit<TableColumnType<T>, 'dataIndex'> {
+  /** `Table.Column` / `Table.ColumnGroup` elements rendered under this header. */
+  children: ReactNode;
+}
+declare const ColumnGroup: <T>(_props: TableColumnGroupProps<T>) => ReactNode;
+//#endregion
+export { ColumnGroup as default };
+//# sourceMappingURL=ColumnGroup.d.mts.map

package/es/Table/ColumnGroup.mjs

@@ -0,0 +1,6 @@
+//#region src/Table/ColumnGroup.tsx
+const ColumnGroup = (_props) => null;
+//#endregion
+export { ColumnGroup as default };
+
+//# sourceMappingURL=ColumnGroup.mjs.map

package/es/Table/ColumnGroup.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnGroup.mjs","names":[],"sources":["../../src/Table/ColumnGroup.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport type { TableColumnType } from './type';\n\nexport interface TableColumnGroupProps<T> extends Omit<TableColumnType<T>, 'dataIndex'> {\n  /** `Table.Column` / `Table.ColumnGroup` elements rendered under this header. */\n  children: ReactNode;\n}\n\nconst ColumnGroup = <T,>(_props: TableColumnGroupProps<T>): ReactNode => null;\n\nexport default ColumnGroup;\n"],"mappings":";AASA,MAAM,eAAmB,WAAgD"}

package/es/Table/Table.d.mts

@@ -1,10 +1,24 @@
 import { TableProps } from "./type.mjs";
+import Column from "./Column.mjs";
+import ColumnGroup from "./ColumnGroup.mjs";
+import "./internal.mjs";
+import { EXPAND_COLUMN } from "./pipeline/columnUtils.mjs";
+import { SELECTION_ALL, SELECTION_COLUMN, SELECTION_INVERT, SELECTION_NONE } from "./pipeline/selectionUtils.mjs";
+import { TableSummary } from "./render/Summary.mjs";
 import { ReactNode } from "react";
-import { RowData } from "@tanstack/react-table";
 //#region src/Table/Table.d.ts
-declare const Table: (<T extends RowData>(props: TableProps<T>) => ReactNode) & {
+type TableComponent = (<T>(props: TableProps<T>) => ReactNode) & {
+  Column: typeof Column;
+  ColumnGroup: typeof ColumnGroup;
   displayName?: string;
+  EXPAND_COLUMN: typeof EXPAND_COLUMN;
+  SELECTION_ALL: typeof SELECTION_ALL;
+  SELECTION_COLUMN: typeof SELECTION_COLUMN;
+  SELECTION_INVERT: typeof SELECTION_INVERT;
+  SELECTION_NONE: typeof SELECTION_NONE;
+  Summary: typeof TableSummary;
 };
+declare const Table: TableComponent;
 //#endregion
 export { Table as default };
 //# sourceMappingURL=Table.d.mts.map

package/es/Table/Table.mjs

@@ -1,135 +1,166 @@
 "use client";
-import { styleProps } from "../styles/stylex/props.mjs";
-import { useEventCallback } from "../hooks/useEventCallback.mjs";
+import { useTranslation } from "../i18n/useTranslation.mjs";
+import Empty from "../Empty/Empty.mjs";
 import Spin from "../Spin/Spin.mjs";
-import Pagination from "../Pagination/Pagination.mjs";
-import { tableFeatureSet } from "./features.mjs";
+import { PREFIX_CLS } from "./constants.mjs";
+import table_default from "../i18n/resources/en/table.mjs";
+import Column from "./Column.mjs";
+import ColumnGroup from "./ColumnGroup.mjs";
+import { getStickyOffsets } from "./engine/fixed.mjs";
+import { SELECTION_ALL, SELECTION_COLUMN, SELECTION_INVERT, SELECTION_NONE } from "./pipeline/selectionUtils.mjs";
+import { EXPAND_COLUMN } from "./pipeline/columnUtils.mjs";
+import { HeaderContext, SelectionContext, TableViewContext } from "./render/context.mjs";
 import { styles } from "./style.mjs";
-import FilterMenu from "./FilterMenu.mjs";
-import { getFixedOffsets } from "./fixedOffsets.mjs";
-import { toColumnDefs } from "./toColumnDefs.mjs";
-import TableBody from "./TableBody.mjs";
-import TableHead from "./TableHead.mjs";
-import { useTableState } from "./useTableState.mjs";
-import { memo, useEffect, useMemo } from "react";
+import FixedFrost from "./render/FixedFrost.mjs";
+import TableLoadingSkeleton from "./render/LoadingSkeleton.mjs";
+import { renderPaginationBars } from "./render/PaginationBar.mjs";
+import { TableSummary } from "./render/Summary.mjs";
+import { resolveSticky, toTableRef } from "./render/tableHelpers.mjs";
+import { TableStoreProvider } from "./store/hooks.mjs";
+import TableView from "./render/TableView.mjs";
+import { useViewContexts } from "./render/useViewContexts.mjs";
+import { useStableSemantic } from "./semantic.mjs";
+import { useTableController } from "./useTableController.mjs";
+import { isValidElement, memo, useCallback, useImperativeHandle, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import clsx$1 from "clsx";
 import * as stylex from "@stylexjs/stylex";
-import { useTable } from "@tanstack/react-table";
+import { Inbox } from "lucide-react";
 //#region src/Table/Table.tsx
-const EMPTY_DATA = [];
 const TableInner = (props) => {
-	const { bordered = false, className, classNames, columns, dataSource = EMPTY_DATA, emptyText, loading = false, onChange, onRow, pagination, ref, renderFilter, rowClassName, rowKey, scroll, size = "middle", style, styles: customStyles, tableLayout } = props;
-	const state = useTableState({
-		columns,
-		onChange,
-		pagination
+	const { className, classNames, footer, internalRef, loading = false, onScroll, pagination, ref, rootClassName, rowHoverable = true, rowSelection, scroll, showHeader = true, size = "middle", sticky, style, styles: customStyles, tableLayout, title, variant = "borderless", virtual } = props;
+	const controller = useTableController(props);
+	const { model, rows, state } = controller;
+	const { t } = useTranslation(table_default);
+	const { classNames: semanticClassNames, styles: semanticStyles } = useStableSemantic(classNames, customStyles, props);
+	const rootRef = useRef(null);
+	const { measureRef } = controller;
+	const setRootRef = useCallback((element) => {
+		rootRef.current = element;
+		return measureRef(element);
+	}, [measureRef]);
+	useImperativeHandle(ref, () => toTableRef(rootRef.current, controller.scrollTo), [controller.scrollTo]);
+	useImperativeHandle(internalRef, () => ({
+		clearSelection: controller.selection.actions.clear,
+		store: controller.store
+	}), [controller.selection.actions.clear, controller.store]);
+	const { headerValue, selectionValue, viewValue } = useViewContexts({
+		controller,
+		props,
+		semanticClassNames,
+		semanticStyles
 	});
-	const columnDefs = useMemo(() => toColumnDefs(columns), [columns]);
-	const fixedOffsets = useMemo(() => getFixedOffsets(columns), [columns]);
-	const table = useTable({
-		columns: columnDefs,
-		data: dataSource,
-		enableMultiSort: false,
-		enableSortingRemoval: true,
-		features: tableFeatureSet,
-		getRowId: (record) => String(typeof rowKey === "function" ? rowKey(record) : record[rowKey]),
-		manualSorting: state.manualSorting,
-		onColumnFiltersChange: state.onColumnFiltersChange,
-		onSortingChange: state.onSortingChange,
-		state: {
-			columnFilters: state.columnFilters,
-			sorting: state.sorting
-		}
-	});
-	const allRows = table.getRowModel().rows;
-	const { page } = state;
-	const clientPaginated = pagination !== false && state.config?.total === void 0;
-	const total = state.config?.total ?? allRows.length;
-	const pageCount = Math.max(1, Math.ceil(total / page.pageSize));
-	const pageIndex = Math.min(page.pageIndex, pageCount - 1);
-	const rows = clientPaginated ? allRows.slice(pageIndex * page.pageSize, (pageIndex + 1) * page.pageSize) : allRows;
-	const syncClampedPage = useEventCallback(() => state.clampPage(pageIndex));
-	useEffect(() => {
-		if (clientPaginated && pageIndex !== page.pageIndex) syncClampedPage();
-	}, [
-		clientPaginated,
-		pageIndex,
-		page.pageIndex,
-		syncClampedPage
-	]);
-	const minWidth = scroll?.x === "max-content" ? "100%" : scroll?.x;
-	return /* @__PURE__ */ jsxs("div", {
-		ref,
-		...styleProps(styles.root, className, style),
-		children: [/* @__PURE__ */ jsxs("div", {
-			"data-table-wrapper": "",
-			...styleProps([styles.wrapper, bordered && styles.bordered], classNames?.wrapper, {
-				maxHeight: scroll?.y,
-				...customStyles?.wrapper
-			}),
-			children: [/* @__PURE__ */ jsxs("table", {
-				...styleProps(styles.table, void 0, {
-					minWidth,
-					tableLayout,
-					width: scroll?.x === "max-content" ? "max-content" : "100%"
-				}),
-				children: [/* @__PURE__ */ jsx(TableHead, {
-					bordered,
-					classNames,
-					columnIds: state.columnIds,
-					columns,
-					fixedOffsets,
-					getColumn: (id) => table.getColumn(id),
-					size,
-					styles: customStyles,
-					renderFilter: (column, id) => {
-						if (renderFilter) return renderFilter(column, id, table);
-						const tableColumn = table.getColumn(id);
-						const value = tableColumn?.getFilterValue() ?? [];
-						return /* @__PURE__ */ jsx(FilterMenu, {
-							filters: column.filters ?? [],
-							label: typeof column.title === "string" ? column.title : id,
-							value,
-							onChange: (next) => tableColumn?.setFilterValue(next.length > 0 ? next : void 0)
-						});
-					}
-				}), /* @__PURE__ */ jsx(TableBody, {
-					bordered,
-					classNames,
-					columnIds: state.columnIds,
-					columns,
-					emptyText,
-					fixedOffsets,
-					loading,
-					rowClassName,
-					rows,
-					size,
-					styles: customStyles,
-					onRow
-				})]
-			}), loading && rows.length > 0 && /* @__PURE__ */ jsx("div", {
-				"data-table-loading": "",
-				...stylex.props(styles.loading),
-				children: /* @__PURE__ */ jsx(Spin, {})
-			})]
-		}), pagination !== false && total > 0 && /* @__PURE__ */ jsx("div", {
-			...stylex.props(styles.pagination),
-			children: /* @__PURE__ */ jsx(Pagination, {
-				current: pageIndex + 1,
-				pageSize: page.pageSize,
-				pageSizeOptions: state.config?.pageSizeOptions,
-				showSizeChanger: state.config?.showSizeChanger,
-				total,
-				onChange: (next, pageSize) => state.onPaginationChange({
-					pageIndex: next - 1,
-					pageSize
+	const leafColumns = model.leafColumns;
+	const { spinning: isLoading = true, tip, variant: spinVariant = "network", ...spinRest } = typeof loading === "object" ? loading : { spinning: loading };
+	const customEmpty = props.locale?.emptyText;
+	const emptyNode = isLoading ? /* @__PURE__ */ jsx(TableLoadingSkeleton, {
+		columns: controller.columns,
+		expandColumn: Boolean(controller.expandType),
+		rows: pagination === false ? 5 : Math.min(5, state.page.pageSize),
+		screens: controller.screens,
+		selectionColumn: Boolean(rowSelection),
+		size
+	}) : customEmpty === void 0 ? /* @__PURE__ */ jsx(Empty, {
+		description: t("table.emptyText"),
+		icon: Inbox,
+		imageSize: 40
+	}) : typeof customEmpty === "function" ? customEmpty() : customEmpty;
+	const stickyConfig = resolveSticky(sticky);
+	const { summaryNode } = controller;
+	const summaryFixed = isValidElement(summaryNode) && summaryNode.type === TableSummary ? summaryNode.props.fixed : void 0;
+	const fixFooter = controller.fixHeader || stickyConfig.isSticky || virtual ? virtual && summaryNode ? summaryFixed ?? "bottom" : summaryFixed ?? false : false;
+	const hasFixedColumn = leafColumns.some((leaf) => leaf.fixed);
+	const mergedTableLayout = tableLayout ?? (hasFixedColumn ? scroll?.x === "max-content" ? "auto" : "fixed" : controller.fixHeader || stickyConfig.isSticky || leafColumns.some((leaf) => leaf.column.source.column.ellipsis) ? "fixed" : "auto");
+	const offsets = useMemo(() => getStickyOffsets(controller.columnWidths, leafColumns), [controller.columnWidths, leafColumns]);
+	const pager = state.config ? renderPaginationBars({
+		classNames: semanticClassNames.pagination,
+		config: state.config,
+		onChange: state.onPaginationChange,
+		page: state.page,
+		size: props.size,
+		styles: semanticStyles.pagination,
+		total: state.total
+	}) : {
+		bottom: null,
+		top: null
+	};
+	const rootStyle = {
+		...semanticStyles.root,
+		...style
+	};
+	return /* @__PURE__ */ jsx(TableStoreProvider, {
+		value: controller.store,
+		children: /* @__PURE__ */ jsx(TableViewContext, {
+			value: viewValue,
+			children: /* @__PURE__ */ jsx(SelectionContext, {
+				value: selectionValue,
+				children: /* @__PURE__ */ jsx(HeaderContext, {
+					value: headerValue,
+					children: /* @__PURE__ */ jsxs("div", {
+						ref: setRootRef,
+						style: rootStyle,
+						className: clsx$1(stylex.props(styles.root).className, `${PREFIX_CLS}-wrapper`, rootClassName, className, semanticClassNames.root),
+						children: [
+							pager.top,
+							/* @__PURE__ */ jsxs("div", {
+								className: stylex.props(styles.spinContainer).className,
+								"data-table-wrapper": "",
+								children: [
+									/* @__PURE__ */ jsx(TableView, {
+										bodyRef: controller.bodyRef,
+										colWidths: controller.columnWidths,
+										emptyNode,
+										fixFooter,
+										fixHeader: controller.fixHeader,
+										footer: footer ? footer(rows) : void 0,
+										grouped: controller.grouped,
+										headerRows: model.headerRows,
+										hoverable: rowHoverable,
+										offsets,
+										rows: model.rows,
+										scrollX: scroll?.x,
+										scrollY: scroll?.y,
+										showHeader,
+										size,
+										sticky: stickyConfig,
+										summaryNode,
+										tableLayout: mergedTableLayout,
+										title: title ? title(rows) : void 0,
+										variant,
+										virtual: controller.virtualInput,
+										virtualScrollRef: controller.virtualScrollRef,
+										onColumnResize: controller.onColumnResize,
+										onScroll
+									}),
+									isLoading && /* @__PURE__ */ jsxs("div", {
+										...stylex.props(styles.loading),
+										"data-table-loading": "",
+										children: [/* @__PURE__ */ jsx(Spin, {
+											...spinRest,
+											variant: spinVariant
+										}), tip]
+									}),
+									/* @__PURE__ */ jsx(FixedFrost, { rootRef })
+								]
+							}),
+							pager.bottom
+						]
+					})
 				})
 			})
-		})]
+		})
 	});
 };
 const Table = memo(TableInner);
 Table.displayName = "Table";
+Table.Column = Column;
+Table.ColumnGroup = ColumnGroup;
+Table.EXPAND_COLUMN = EXPAND_COLUMN;
+Table.SELECTION_COLUMN = SELECTION_COLUMN;
+Table.SELECTION_ALL = SELECTION_ALL;
+Table.SELECTION_INVERT = SELECTION_INVERT;
+Table.SELECTION_NONE = SELECTION_NONE;
+Table.Summary = TableSummary;
 //#endregion
 export { TableInner, Table as default };
 

package/es/Table/Table.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Table.mjs","names":[],"sources":["../../src/Table/Table.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { type RowData, useTable } from '@tanstack/react-table';\nimport { type Key, memo, type ReactNode, useEffect, useMemo } from 'react';\n\nimport { useEventCallback } from '@/hooks/useEventCallback';\nimport Pagination from '@/Pagination';\nimport Spin from '@/Spin';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { tableFeatureSet } from './features';\nimport FilterMenu from './FilterMenu';\nimport { getFixedOffsets } from './fixedOffsets';\nimport { styles } from './style';\nimport TableBody from './TableBody';\nimport TableHead from './TableHead';\nimport { toColumnDefs } from './toColumnDefs';\nimport type { FilterValue, TableColumn, TableProps } from './type';\nimport { useTableState } from './useTableState';\n\nconst EMPTY_DATA: any[] = [];\n\nexport interface TableInternalProps<T> extends TableProps<T> {\n  renderFilter?: (column: TableColumn<T>, id: string, table: any) => ReactNode;\n}\n\nconst TableInner = <T extends RowData>(props: TableInternalProps<T>) => {\n  const {\n    bordered = false,\n    className,\n    classNames,\n    columns,\n    dataSource = EMPTY_DATA as T[],\n    emptyText,\n    loading = false,\n    onChange,\n    onRow,\n    pagination,\n    ref,\n    renderFilter,\n    rowClassName,\n    rowKey,\n    scroll,\n    size = 'middle',\n    style,\n    styles: customStyles,\n    tableLayout,\n  } = props;\n\n  const state = useTableState({ columns, onChange, pagination });\n  const columnDefs = useMemo(() => toColumnDefs(columns), [columns]);\n  const fixedOffsets = useMemo(() => getFixedOffsets(columns), [columns]);\n\n  const table = useTable({\n    columns: columnDefs,\n    data: dataSource,\n    enableMultiSort: false,\n    enableSortingRemoval: true,\n    features: tableFeatureSet,\n    getRowId: (record: T) =>\n      String(typeof rowKey === 'function' ? rowKey(record) : (record[rowKey] as Key)),\n    manualSorting: state.manualSorting,\n    onColumnFiltersChange: state.onColumnFiltersChange,\n    onSortingChange: state.onSortingChange,\n    state: {\n      columnFilters: state.columnFilters,\n      sorting: state.sorting,\n    },\n  } as any);\n\n  const allRows = table.getRowModel().rows as unknown as { id: Key; original: T }[];\n  const { page } = state;\n  const clientPaginated = pagination !== false && state.config?.total === undefined;\n  const total = state.config?.total ?? allRows.length;\n  const pageCount = Math.max(1, Math.ceil(total / page.pageSize));\n  const pageIndex = Math.min(page.pageIndex, pageCount - 1);\n  const rows = clientPaginated\n    ? allRows.slice(pageIndex * page.pageSize, (pageIndex + 1) * page.pageSize)\n    : allRows;\n\n  const syncClampedPage = useEventCallback(() => state.clampPage(pageIndex));\n\n  useEffect(() => {\n    if (clientPaginated && pageIndex !== page.pageIndex) syncClampedPage();\n  }, [clientPaginated, pageIndex, page.pageIndex, syncClampedPage]);\n\n  const minWidth = scroll?.x === 'max-content' ? '100%' : scroll?.x;\n\n  return (\n    <div ref={ref} {...styleProps(styles.root, className, style)}>\n      <div\n        data-table-wrapper=\"\"\n        {...styleProps([styles.wrapper, bordered && styles.bordered], classNames?.wrapper, {\n          maxHeight: scroll?.y,\n          ...customStyles?.wrapper,\n        })}\n      >\n        <table\n          {...styleProps(styles.table, undefined, {\n            minWidth,\n            tableLayout,\n            width: scroll?.x === 'max-content' ? 'max-content' : '100%',\n          })}\n        >\n          <TableHead\n            bordered={bordered}\n            classNames={classNames}\n            columnIds={state.columnIds}\n            columns={columns}\n            fixedOffsets={fixedOffsets}\n            getColumn={(id) => table.getColumn(id) as any}\n            size={size}\n            styles={customStyles}\n            renderFilter={(column, id) => {\n              if (renderFilter) return renderFilter(column, id, table);\n              const tableColumn = table.getColumn(id) as any;\n              const value = (tableColumn?.getFilterValue() as FilterValue[] | undefined) ?? [];\n              return (\n                <FilterMenu\n                  filters={column.filters ?? []}\n                  label={typeof column.title === 'string' ? column.title : id}\n                  value={value}\n                  onChange={(next) =>\n                    tableColumn?.setFilterValue(next.length > 0 ? next : undefined)\n                  }\n                />\n              );\n            }}\n          />\n          <TableBody\n            bordered={bordered}\n            classNames={classNames}\n            columnIds={state.columnIds}\n            columns={columns}\n            emptyText={emptyText}\n            fixedOffsets={fixedOffsets}\n            loading={loading}\n            rowClassName={rowClassName}\n            rows={rows}\n            size={size}\n            styles={customStyles}\n            onRow={onRow}\n          />\n        </table>\n        {loading && rows.length > 0 && (\n          <div data-table-loading=\"\" {...stylex.props(styles.loading)}>\n            <Spin />\n          </div>\n        )}\n      </div>\n      {pagination !== false && total > 0 && (\n        <div {...stylex.props(styles.pagination)}>\n          <Pagination\n            current={pageIndex + 1}\n            pageSize={page.pageSize}\n            pageSizeOptions={state.config?.pageSizeOptions}\n            showSizeChanger={state.config?.showSizeChanger}\n            total={total}\n            onChange={(next, pageSize) =>\n              state.onPaginationChange({ pageIndex: next - 1, pageSize })\n            }\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n\nconst Table = memo(TableInner) as unknown as (<T extends RowData>(\n  props: TableProps<T>,\n) => ReactNode) & {\n  displayName?: string;\n};\n\nTable.displayName = 'Table';\n\nexport { TableInner };\n\nexport default Table;\n"],"mappings":"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"}
+{"version":3,"file":"Table.mjs","names":["tableMessages","clsx"],"sources":["../../src/Table/Table.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { Inbox } from 'lucide-react';\nimport {\n  type CSSProperties,\n  isValidElement,\n  memo,\n  type ReactNode,\n  type Ref,\n  useCallback,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react';\n\nimport Empty from '@/Empty';\nimport tableMessages from '@/i18n/resources/en/table';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Spin from '@/Spin';\n\nimport Column from './Column';\nimport ColumnGroup from './ColumnGroup';\nimport { PREFIX_CLS } from './constants';\nimport { getStickyOffsets } from './engine/fixed';\nimport type { TableInternalProps } from './internal';\nimport { EXPAND_COLUMN } from './pipeline/columnUtils';\nimport {\n  SELECTION_ALL,\n  SELECTION_COLUMN,\n  SELECTION_INVERT,\n  SELECTION_NONE,\n} from './pipeline/selectionUtils';\nimport { HeaderContext, SelectionContext, TableViewContext } from './render/context';\nimport FixedFrost from './render/FixedFrost';\nimport TableLoadingSkeleton from './render/LoadingSkeleton';\nimport { renderPaginationBars } from './render/PaginationBar';\nimport { TableSummary } from './render/Summary';\nimport { resolveSticky, toTableRef } from './render/tableHelpers';\nimport TableView from './render/TableView';\nimport { useViewContexts } from './render/useViewContexts';\nimport { useStableSemantic } from './semantic';\nimport { TableStoreProvider } from './store/hooks';\nimport { styles } from './style';\nimport type { TableProps, TableRef } from './type';\nimport { useTableController } from './useTableController';\n\nconst TableInner = <T,>(props: TableInternalProps<T>) => {\n  const {\n    className,\n    classNames,\n    footer,\n    internalRef,\n    loading = false,\n    onScroll,\n    pagination,\n    ref,\n    rootClassName,\n    rowHoverable = true,\n    rowSelection,\n    scroll,\n    showHeader = true,\n    size = 'middle',\n    sticky,\n    style,\n    styles: customStyles,\n    tableLayout,\n    title,\n    variant = 'borderless',\n    virtual,\n  } = props;\n\n  const controller = useTableController(props);\n  const { model, rows, state } = controller;\n  const { t } = useTranslation(tableMessages);\n  const { classNames: semanticClassNames, styles: semanticStyles } = useStableSemantic(\n    classNames,\n    customStyles,\n    props,\n  );\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const { measureRef } = controller;\n  const setRootRef = useCallback(\n    (element: HTMLDivElement | null) => {\n      rootRef.current = element;\n      return measureRef(element);\n    },\n    [measureRef],\n  );\n  useImperativeHandle(\n    ref as Ref<TableRef>,\n    () => toTableRef(rootRef.current!, controller.scrollTo),\n    [controller.scrollTo],\n  );\n  useImperativeHandle(\n    internalRef,\n    () => ({ clearSelection: controller.selection.actions.clear, store: controller.store }),\n    [controller.selection.actions.clear, controller.store],\n  );\n\n  const { headerValue, selectionValue, viewValue } = useViewContexts<T>({\n    controller,\n    props,\n    semanticClassNames,\n    semanticStyles,\n  });\n  const leafColumns = model.leafColumns;\n\n  const {\n    spinning: isLoading = true,\n    tip,\n    variant: spinVariant = 'network',\n    ...spinRest\n  } = typeof loading === 'object' ? loading : { spinning: loading };\n\n  const customEmpty = props.locale?.emptyText;\n  const emptyNode = isLoading ? (\n    <TableLoadingSkeleton\n      columns={controller.columns}\n      expandColumn={Boolean(controller.expandType)}\n      rows={pagination === false ? 5 : Math.min(5, state.page.pageSize)}\n      screens={controller.screens}\n      selectionColumn={Boolean(rowSelection)}\n      size={size}\n    />\n  ) : customEmpty === undefined ? (\n    <Empty description={t('table.emptyText')} icon={Inbox} imageSize={40} />\n  ) : typeof customEmpty === 'function' ? (\n    customEmpty()\n  ) : (\n    customEmpty\n  );\n\n  const stickyConfig = resolveSticky(sticky);\n  const { summaryNode } = controller;\n  const summaryFixed =\n    isValidElement<{ fixed?: boolean | 'top' | 'bottom' }>(summaryNode) &&\n    summaryNode.type === TableSummary\n      ? summaryNode.props.fixed\n      : undefined;\n  const fixFooter =\n    controller.fixHeader || stickyConfig.isSticky || virtual\n      ? virtual && summaryNode\n        ? (summaryFixed ?? 'bottom')\n        : (summaryFixed ?? false)\n      : false;\n\n  const hasFixedColumn = leafColumns.some((leaf) => leaf.fixed);\n  const mergedTableLayout =\n    tableLayout ??\n    (hasFixedColumn\n      ? scroll?.x === 'max-content'\n        ? 'auto'\n        : 'fixed'\n      : controller.fixHeader ||\n          stickyConfig.isSticky ||\n          leafColumns.some((leaf) => (leaf.column.source.column as { ellipsis?: unknown }).ellipsis)\n        ? 'fixed'\n        : 'auto');\n\n  const offsets = useMemo(\n    () => getStickyOffsets(controller.columnWidths, leafColumns),\n    [controller.columnWidths, leafColumns],\n  );\n\n  const pager = state.config\n    ? renderPaginationBars({\n        classNames: semanticClassNames.pagination,\n        config: state.config,\n        onChange: state.onPaginationChange,\n        page: state.page,\n        size: props.size,\n        styles: semanticStyles.pagination,\n        total: state.total,\n      })\n    : { bottom: null, top: null };\n\n  const rootStyle: CSSProperties = { ...semanticStyles.root, ...style };\n\n  return (\n    <TableStoreProvider value={controller.store}>\n      <TableViewContext value={viewValue}>\n        <SelectionContext value={selectionValue}>\n          <HeaderContext value={headerValue}>\n            <div\n              ref={setRootRef}\n              style={rootStyle}\n              className={clsx(\n                stylex.props(styles.root).className,\n                `${PREFIX_CLS}-wrapper`,\n                rootClassName,\n                className,\n                semanticClassNames.root,\n              )}\n            >\n              {pager.top}\n              <div className={stylex.props(styles.spinContainer).className} data-table-wrapper=\"\">\n                <TableView<T>\n                  bodyRef={controller.bodyRef}\n                  colWidths={controller.columnWidths}\n                  emptyNode={emptyNode}\n                  fixFooter={fixFooter}\n                  fixHeader={controller.fixHeader}\n                  footer={footer ? footer(rows) : undefined}\n                  grouped={controller.grouped}\n                  headerRows={model.headerRows}\n                  hoverable={rowHoverable}\n                  offsets={offsets}\n                  rows={model.rows}\n                  scrollX={scroll?.x}\n                  scrollY={scroll?.y}\n                  showHeader={showHeader}\n                  size={size}\n                  sticky={stickyConfig}\n                  summaryNode={summaryNode}\n                  tableLayout={mergedTableLayout}\n                  title={title ? title(rows) : undefined}\n                  variant={variant}\n                  virtual={controller.virtualInput}\n                  virtualScrollRef={controller.virtualScrollRef}\n                  onColumnResize={controller.onColumnResize}\n                  onScroll={onScroll}\n                />\n                {isLoading && (\n                  <div {...stylex.props(styles.loading)} data-table-loading=\"\">\n                    <Spin {...spinRest} variant={spinVariant} />\n                    {tip as ReactNode}\n                  </div>\n                )}\n                <FixedFrost rootRef={rootRef} />\n              </div>\n              {pager.bottom}\n            </div>\n          </HeaderContext>\n        </SelectionContext>\n      </TableViewContext>\n    </TableStoreProvider>\n  );\n};\n\ntype TableComponent = (<T>(props: TableProps<T>) => ReactNode) & {\n  Column: typeof Column;\n  ColumnGroup: typeof ColumnGroup;\n  displayName?: string;\n  EXPAND_COLUMN: typeof EXPAND_COLUMN;\n  SELECTION_ALL: typeof SELECTION_ALL;\n  SELECTION_COLUMN: typeof SELECTION_COLUMN;\n  SELECTION_INVERT: typeof SELECTION_INVERT;\n  SELECTION_NONE: typeof SELECTION_NONE;\n  Summary: typeof TableSummary;\n};\n\nconst Table = memo(TableInner) as unknown as TableComponent;\n\nTable.displayName = 'Table';\nTable.Column = Column;\nTable.ColumnGroup = ColumnGroup;\nTable.EXPAND_COLUMN = EXPAND_COLUMN;\nTable.SELECTION_COLUMN = SELECTION_COLUMN;\nTable.SELECTION_ALL = SELECTION_ALL;\nTable.SELECTION_INVERT = SELECTION_INVERT;\nTable.SELECTION_NONE = SELECTION_NONE;\nTable.Summary = TableSummary;\n\nexport { TableInner };\n\nexport default Table;\n"],"mappings":"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"}

package/es/Table/atoms/cells.d.mts

@@ -0,0 +1,42 @@
+import { TableColumnAlign, TableCustomizeComponent } from "../type.mjs";
+import { HTMLAttributes, ReactNode, Ref, TdHTMLAttributes } from "react";
+//#region src/Table/atoms/cells.d.ts
+export interface TableCellProps extends Omit<TdHTMLAttributes<HTMLTableCellElement>, 'align'> {
+  align?: TableColumnAlign;
+  appendNode?: ReactNode;
+  component?: TableCustomizeComponent;
+  ellipsis?: boolean | {
+    showTitle?: boolean;
+  };
+  fixEnd?: number;
+  fixStart?: number;
+  hovered?: boolean;
+  ref?: Ref<HTMLTableCellElement>;
+  rowType?: 'body' | 'header';
+  shadowEnd?: boolean;
+  shadowStart?: boolean;
+  sticky?: boolean;
+  zIndex?: number;
+  zIndexReverse?: number;
+}
+export declare const TableCell: ({ align, appendNode, children, className, colSpan, component, ellipsis, fixEnd, fixStart, hovered, rowSpan, rowType, shadowEnd, shadowStart, sticky, style, title, zIndex, zIndexReverse, ...rest }: TableCellProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export declare const TableHeaderCell: ({ component, ...props }: TableCellProps) => import("react").JSX.Element;
+export interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+  component?: TableCustomizeComponent;
+  level?: number;
+  ref?: Ref<HTMLTableRowElement>;
+  selected?: boolean;
+}
+export declare const TableRow: ({ className, component, level, selected, ...rest }: TableRowProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface TableExpandedRowProps {
+  cellComponent?: TableCustomizeComponent;
+  children?: ReactNode;
+  className?: string;
+  colSpan: number;
+  component?: TableCustomizeComponent;
+  expanded?: boolean;
+  fixed?: boolean;
+}
+export declare const TableExpandedRow: ({ cellComponent, children, className, colSpan, component, expanded, fixed }: TableExpandedRowProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+//# sourceMappingURL=cells.d.mts.map