@lobehub/ui 6.0.0-beta.9 → 6.0.0

package/es/ProTable/style.mjs

@@ -77,9 +77,17 @@ const raw = {
 		$$css: true
 	},
 	lightFilterLabel: {
+		kUk6DE: "lb1okw0bk",
 		kMwMTN: "lbc77et8",
 		kGuDYH: "lbxobqjj",
 		khDVqt: "lbuxw1ft",
+		k5JduY: "lbbg6shv",
+		$$css: true
+	},
+	lightFilterSwitch: {
+		kOIVth: "lb167g77z",
+		kGNEyG: "lb6s0dn4",
+		k1xSpc: "lb3nfvp2",
 		$$css: true
 	},
 	optionCell: {
@@ -244,6 +252,7 @@ const styles = {
 	lightFilter: cls(raw.lightFilter),
 	lightFilterItem: `${PRO_PREFIX_CLS}-light-filter-item`,
 	lightFilterLabel: cls(raw.lightFilterLabel),
+	lightFilterSwitch: cls(raw.lightFilterSwitch),
 	optionCell: cls(raw.optionCell),
 	part: cls(raw.part),
 	partBordered: cls(raw.partBordered),

package/es/ProTable/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["clsx"],"sources":["../../src/ProTable/style.ts"],"sourcesContent":["import './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nexport const PRO_PREFIX_CLS = 'lobe-pro-table';\n\nconst raw = stylex.create({\n  alert: {\n    borderRadius: cssVar.borderRadius,\n    gap: 12,\n    paddingBlock: 6,\n    paddingInline: 12,\n    alignItems: 'center',\n    backgroundColor: `color-mix(in srgb, ${cssVar.colorPrimary} 8%, transparent)`,\n    color: cssVar.colorText,\n    display: 'flex',\n    fontSize: cssVar.fontSize,\n    justifyContent: 'space-between',\n    marginBlockEnd: 12,\n    minHeight: 40,\n  },\n  alertInfo: {\n    flex: '1',\n    gap: 12,\n    alignItems: 'center',\n    display: 'flex',\n    flexWrap: 'wrap',\n    minWidth: 0,\n  },\n  alertOption: {\n    flex: 'none',\n    gap: 8,\n    alignItems: 'center',\n    display: 'flex',\n  },\n  code: {\n    borderRadius: cssVar.borderRadiusSM,\n    paddingBlock: 1,\n    paddingInline: 6,\n    backgroundColor: cssVar.colorFillTertiary,\n    fontFamily: cssVar.fontFamilyCode,\n    fontSize: '0.9em',\n  },\n  copyable: {\n    gap: 4,\n    alignItems: 'center',\n    display: 'inline-flex',\n    maxWidth: '100%',\n  },\n  copyableText: {\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    minWidth: 0,\n  },\n  density: {\n    padding: 4,\n    display: 'flex',\n    flexDirection: 'column',\n    minWidth: 140,\n  },\n  enumList: {\n    gap: 8,\n    display: 'inline-flex',\n    flexWrap: 'wrap',\n  },\n  lightFilter: {\n    gap: 8,\n    alignItems: 'center',\n    display: 'flex',\n    flexWrap: 'wrap',\n  },\n  lightFilterLabel: {\n    color: cssVar.colorTextSecondary,\n    fontSize: cssVar.fontSizeSM,\n    whiteSpace: 'nowrap',\n  },\n  optionCell: {\n    gap: 4,\n    alignItems: 'center',\n    display: 'flex',\n    flexWrap: 'wrap',\n    justifyContent: 'flex-end',\n  },\n  part: {\n    minWidth: 0,\n  },\n  partBordered: {\n    padding: 16,\n    borderColor: cssVar.colorBorderSecondary,\n    borderRadius: cssVar.borderRadiusLG,\n    borderStyle: 'solid',\n    borderWidth: 1,\n  },\n  search: {\n    alignItems: 'center',\n    columnGap: 24,\n    display: 'grid',\n    rowGap: 16,\n  },\n  searchFieldControl: {\n    flex: '1',\n    minWidth: 0,\n  },\n  searchLabelText: {\n    overflow: 'hidden',\n    display: 'block',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    maxWidth: '100%',\n    minWidth: 0,\n  },\n  setting: {\n    paddingBlock: 4,\n    display: 'flex',\n    flexDirection: 'column',\n    maxHeight: 420,\n    width: 260,\n  },\n  settingGroupTitle: {\n    paddingInline: 12,\n    color: cssVar.colorTextDescription,\n    fontSize: cssVar.fontSizeSM,\n    paddingBlockEnd: 2,\n    paddingBlockStart: 6,\n  },\n  settingHeader: {\n    paddingInline: 12,\n    alignItems: 'center',\n    borderBlockEndColor: cssVar.colorSplit,\n    borderBlockEndStyle: 'solid',\n    borderBlockEndWidth: 1,\n    display: 'flex',\n    justifyContent: 'space-between',\n    paddingBlockEnd: 8,\n    paddingBlockStart: 4,\n  },\n  settingItemTitle: {\n    flex: '1',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    minWidth: 0,\n  },\n  settingList: {\n    flex: '1',\n    overflow: 'auto',\n    paddingBlock: 4,\n  },\n  status: {\n    gap: 8,\n    alignItems: 'center',\n    display: 'inline-flex',\n  },\n  statusDot: {\n    borderRadius: '50%',\n    flex: 'none',\n    height: 6,\n    width: 6,\n  },\n  title: {\n    flex: 'none',\n    gap: 4,\n    alignItems: 'center',\n    color: cssVar.colorText,\n    display: 'flex',\n    fontSize: cssVar.fontSizeLG,\n    fontWeight: 600,\n    minWidth: 0,\n  },\n  titleSub: {\n    color: cssVar.colorTextDescription,\n    fontSize: cssVar.fontSize,\n    fontWeight: 'normal',\n  },\n  titleTooltip: {\n    gap: 4,\n    alignItems: 'center',\n    display: 'inline-flex',\n  },\n  toolbar: {\n    gap: 12,\n    alignItems: 'center',\n    display: 'flex',\n    flexWrap: 'nowrap',\n    justifyContent: 'space-between',\n    marginBlockEnd: 16,\n  },\n  toolbarActions: {\n    flex: '1',\n    gap: 8,\n    alignItems: 'center',\n    display: 'flex',\n    flexWrap: 'wrap',\n    justifyContent: 'flex-end',\n    marginInlineStart: 'auto',\n    minWidth: 0,\n  },\n  toolbarOptions: {\n    flex: 'none',\n    gap: 2,\n    alignItems: 'center',\n    display: 'flex',\n  },\n});\n\nconst cls = (style: stylex.StyleXStyles) => stylex.props(style).className ?? '';\n\nexport const styles = {\n  alert: cls(raw.alert),\n  alertInfo: cls(raw.alertInfo),\n  alertOption: cls(raw.alertOption),\n  code: cls(raw.code),\n  copyable: cls(raw.copyable),\n  copyableText: cls(raw.copyableText),\n  density: cls(raw.density),\n  densityItem: `${PRO_PREFIX_CLS}-density-item`,\n  enumList: cls(raw.enumList),\n  indexBorder: `${PRO_PREFIX_CLS}-index-border`,\n  lightFilter: cls(raw.lightFilter),\n  lightFilterItem: `${PRO_PREFIX_CLS}-light-filter-item`,\n  lightFilterLabel: cls(raw.lightFilterLabel),\n  optionCell: cls(raw.optionCell),\n  part: cls(raw.part),\n  partBordered: cls(raw.partBordered),\n  root: `${PRO_PREFIX_CLS}-root`,\n  search: cls(raw.search),\n  searchActions: `${PRO_PREFIX_CLS}-search-actions`,\n  searchField: `${PRO_PREFIX_CLS}-search-field`,\n  searchFieldControl: cls(raw.searchFieldControl),\n  searchLabel: `${PRO_PREFIX_CLS}-search-label`,\n  searchLabelText: cls(raw.searchLabelText),\n  setting: cls(raw.setting),\n  settingGroupTitle: cls(raw.settingGroupTitle),\n  settingHeader: cls(raw.settingHeader),\n  settingItem: `${PRO_PREFIX_CLS}-setting-item`,\n  settingItemActions: `${PRO_PREFIX_CLS}-setting-item-actions`,\n  settingItemTitle: cls(raw.settingItemTitle),\n  settingList: cls(raw.settingList),\n  status: cls(raw.status),\n  statusDot: cls(raw.statusDot),\n  statusProcessing: `${PRO_PREFIX_CLS}-status-processing`,\n  title: cls(raw.title),\n  titleSub: cls(raw.titleSub),\n  titleTooltip: cls(raw.titleTooltip),\n  toolbar: cls(raw.toolbar),\n  toolbarActions: cls(raw.toolbarActions),\n  toolbarOptions: cls(raw.toolbarOptions),\n};\n\nexport const partClass = (\n  cardBordered: boolean | { search?: boolean; table?: boolean } | undefined,\n  part: 'search' | 'table',\n) =>\n  clsx(\n    styles.part,\n    (typeof cardBordered === 'object' ? cardBordered[part] : cardBordered) && styles.partBordered,\n    `${PRO_PREFIX_CLS}-${part}`,\n  );\n"],"mappings":"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"}
+{"version":3,"file":"style.mjs","names":["clsx"],"sources":["../../src/ProTable/style.ts"],"sourcesContent":["import './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nexport const PRO_PREFIX_CLS = 'lobe-pro-table';\n\nconst raw = stylex.create({\n  alert: {\n    borderRadius: cssVar.borderRadius,\n    gap: 12,\n    paddingBlock: 6,\n    paddingInline: 12,\n    alignItems: 'center',\n    backgroundColor: `color-mix(in srgb, ${cssVar.colorPrimary} 8%, transparent)`,\n    color: cssVar.colorText,\n    display: 'flex',\n    fontSize: cssVar.fontSize,\n    justifyContent: 'space-between',\n    marginBlockEnd: 12,\n    minHeight: 40,\n  },\n  alertInfo: {\n    flex: '1',\n    gap: 12,\n    alignItems: 'center',\n    display: 'flex',\n    flexWrap: 'wrap',\n    minWidth: 0,\n  },\n  alertOption: {\n    flex: 'none',\n    gap: 8,\n    alignItems: 'center',\n    display: 'flex',\n  },\n  code: {\n    borderRadius: cssVar.borderRadiusSM,\n    paddingBlock: 1,\n    paddingInline: 6,\n    backgroundColor: cssVar.colorFillTertiary,\n    fontFamily: cssVar.fontFamilyCode,\n    fontSize: '0.9em',\n  },\n  copyable: {\n    gap: 4,\n    alignItems: 'center',\n    display: 'inline-flex',\n    maxWidth: '100%',\n  },\n  copyableText: {\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    minWidth: 0,\n  },\n  density: {\n    padding: 4,\n    display: 'flex',\n    flexDirection: 'column',\n    minWidth: 140,\n  },\n  enumList: {\n    gap: 8,\n    display: 'inline-flex',\n    flexWrap: 'wrap',\n  },\n  lightFilter: {\n    gap: 8,\n    alignItems: 'center',\n    display: 'flex',\n    flexWrap: 'wrap',\n  },\n  lightFilterLabel: {\n    'flex': 'none',\n    'color': cssVar.colorTextSecondary,\n    'fontSize': cssVar.fontSizeSM,\n    'whiteSpace': 'nowrap',\n    '::after': { content: \"':'\" },\n  },\n  lightFilterSwitch: {\n    gap: 8,\n    alignItems: 'center',\n    display: 'inline-flex',\n  },\n  optionCell: {\n    gap: 4,\n    alignItems: 'center',\n    display: 'flex',\n    flexWrap: 'wrap',\n    justifyContent: 'flex-end',\n  },\n  part: {\n    minWidth: 0,\n  },\n  partBordered: {\n    padding: 16,\n    borderColor: cssVar.colorBorderSecondary,\n    borderRadius: cssVar.borderRadiusLG,\n    borderStyle: 'solid',\n    borderWidth: 1,\n  },\n  search: {\n    alignItems: 'center',\n    columnGap: 24,\n    display: 'grid',\n    rowGap: 16,\n  },\n  searchFieldControl: {\n    flex: '1',\n    minWidth: 0,\n  },\n  searchLabelText: {\n    overflow: 'hidden',\n    display: 'block',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    maxWidth: '100%',\n    minWidth: 0,\n  },\n  setting: {\n    paddingBlock: 4,\n    display: 'flex',\n    flexDirection: 'column',\n    maxHeight: 420,\n    width: 260,\n  },\n  settingGroupTitle: {\n    paddingInline: 12,\n    color: cssVar.colorTextDescription,\n    fontSize: cssVar.fontSizeSM,\n    paddingBlockEnd: 2,\n    paddingBlockStart: 6,\n  },\n  settingHeader: {\n    paddingInline: 12,\n    alignItems: 'center',\n    borderBlockEndColor: cssVar.colorSplit,\n    borderBlockEndStyle: 'solid',\n    borderBlockEndWidth: 1,\n    display: 'flex',\n    justifyContent: 'space-between',\n    paddingBlockEnd: 8,\n    paddingBlockStart: 4,\n  },\n  settingItemTitle: {\n    flex: '1',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    minWidth: 0,\n  },\n  settingList: {\n    flex: '1',\n    overflow: 'auto',\n    paddingBlock: 4,\n  },\n  status: {\n    gap: 8,\n    alignItems: 'center',\n    display: 'inline-flex',\n  },\n  statusDot: {\n    borderRadius: '50%',\n    flex: 'none',\n    height: 6,\n    width: 6,\n  },\n  title: {\n    flex: 'none',\n    gap: 4,\n    alignItems: 'center',\n    color: cssVar.colorText,\n    display: 'flex',\n    fontSize: cssVar.fontSizeLG,\n    fontWeight: 600,\n    minWidth: 0,\n  },\n  titleSub: {\n    color: cssVar.colorTextDescription,\n    fontSize: cssVar.fontSize,\n    fontWeight: 'normal',\n  },\n  titleTooltip: {\n    gap: 4,\n    alignItems: 'center',\n    display: 'inline-flex',\n  },\n  toolbar: {\n    gap: 12,\n    alignItems: 'center',\n    display: 'flex',\n    flexWrap: 'nowrap',\n    justifyContent: 'space-between',\n    marginBlockEnd: 16,\n  },\n  toolbarActions: {\n    flex: '1',\n    gap: 8,\n    alignItems: 'center',\n    display: 'flex',\n    flexWrap: 'wrap',\n    justifyContent: 'flex-end',\n    marginInlineStart: 'auto',\n    minWidth: 0,\n  },\n  toolbarOptions: {\n    flex: 'none',\n    gap: 2,\n    alignItems: 'center',\n    display: 'flex',\n  },\n});\n\nconst cls = (style: stylex.StyleXStyles) => stylex.props(style).className ?? '';\n\nexport const styles = {\n  alert: cls(raw.alert),\n  alertInfo: cls(raw.alertInfo),\n  alertOption: cls(raw.alertOption),\n  code: cls(raw.code),\n  copyable: cls(raw.copyable),\n  copyableText: cls(raw.copyableText),\n  density: cls(raw.density),\n  densityItem: `${PRO_PREFIX_CLS}-density-item`,\n  enumList: cls(raw.enumList),\n  indexBorder: `${PRO_PREFIX_CLS}-index-border`,\n  lightFilter: cls(raw.lightFilter),\n  lightFilterItem: `${PRO_PREFIX_CLS}-light-filter-item`,\n  lightFilterLabel: cls(raw.lightFilterLabel),\n  lightFilterSwitch: cls(raw.lightFilterSwitch),\n  optionCell: cls(raw.optionCell),\n  part: cls(raw.part),\n  partBordered: cls(raw.partBordered),\n  root: `${PRO_PREFIX_CLS}-root`,\n  search: cls(raw.search),\n  searchActions: `${PRO_PREFIX_CLS}-search-actions`,\n  searchField: `${PRO_PREFIX_CLS}-search-field`,\n  searchFieldControl: cls(raw.searchFieldControl),\n  searchLabel: `${PRO_PREFIX_CLS}-search-label`,\n  searchLabelText: cls(raw.searchLabelText),\n  setting: cls(raw.setting),\n  settingGroupTitle: cls(raw.settingGroupTitle),\n  settingHeader: cls(raw.settingHeader),\n  settingItem: `${PRO_PREFIX_CLS}-setting-item`,\n  settingItemActions: `${PRO_PREFIX_CLS}-setting-item-actions`,\n  settingItemTitle: cls(raw.settingItemTitle),\n  settingList: cls(raw.settingList),\n  status: cls(raw.status),\n  statusDot: cls(raw.statusDot),\n  statusProcessing: `${PRO_PREFIX_CLS}-status-processing`,\n  title: cls(raw.title),\n  titleSub: cls(raw.titleSub),\n  titleTooltip: cls(raw.titleTooltip),\n  toolbar: cls(raw.toolbar),\n  toolbarActions: cls(raw.toolbarActions),\n  toolbarOptions: cls(raw.toolbarOptions),\n};\n\nexport const partClass = (\n  cardBordered: boolean | { search?: boolean; table?: boolean } | undefined,\n  part: 'search' | 'table',\n) =>\n  clsx(\n    styles.part,\n    (typeof cardBordered === 'object' ? cardBordered[part] : cardBordered) && styles.partBordered,\n    `${PRO_PREFIX_CLS}-${part}`,\n  );\n"],"mappings":"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"}

package/es/ProTable/type.d.mts

@@ -185,13 +185,16 @@ export interface ProTableRequestData<T> {
 export type ProTableRequestSort = Record<string, SortOrder>;
 /** `filter` argument of `request`: column key → selected filter values (ProComponents shape). */
 export type ProTableRequestFilter = Record<string, (string | number)[] | null>;
-/** `request(params, sort, filter)`; resolves `{ data, total, success }` (all optional). */
+/**
+ * `request(params, sort, filter)`; resolves `{ data, total, success }` (all optional). A `null` /
+ * `undefined` result is treated as empty data.
+ */
 export type ProTableRequest<T, Params = Record<string, any>> = (params: Params & {
   [key: string]: any;
   current?: number;
   keyword?: string;
   pageSize?: number;
-}, sort: ProTableRequestSort, filter: ProTableRequestFilter) => Promise<Partial<ProTableRequestData<T>>>;
+}, sort: ProTableRequestSort, filter: ProTableRequestFilter) => Promise<Partial<ProTableRequestData<T>> | null | undefined>;
 /**
  * `loading` as an object: Spin options of the table overlay (`tip`, `variant`, …) plus `delay`
  * (ms before the overlay shows). Without `spinning` the overlay follows the `request` state.

package/es/Switch/Switch.mjs

@@ -13,10 +13,11 @@ const Switch = memo(({ autoFocus, checked, checkedChildren, className, className
 	const isDisabled = disabled || loading;
 	const resolvedChecked = value ?? checked;
 	const resolvedDefaultChecked = defaultValue ?? defaultChecked;
+	const hasText = !!(checkedChildren || unCheckedChildren);
 	return /* @__PURE__ */ jsxs(SwitchRoot, {
 		autoFocus,
 		checked: resolvedChecked,
-		className: clsx$1(className, rootClassName, classNames?.root),
+		className: clsx$1(hasText && "lobe-switch-text", className, rootClassName, classNames?.root),
 		defaultChecked: resolvedDefaultChecked,
 		disabled: isDisabled,
 		id,
@@ -29,6 +30,7 @@ const Switch = memo(({ autoFocus, checked, checkedChildren, className, className
 		},
 		tabIndex,
 		title,
+		xstyle: hasText && (size === "small" ? styles.rootTextSmall : styles.rootText),
 		onCheckedChange: onChange,
 		onClick,
 		children: [
@@ -46,6 +48,11 @@ const Switch = memo(({ autoFocus, checked, checkedChildren, className, className
 				style: customStyles?.content,
 				children: unCheckedChildren
 			}),
+			hasText && /* @__PURE__ */ jsxs("span", {
+				"aria-hidden": true,
+				...stylex.props(styles.textSizer, size === "small" && styles.textSizerSmall),
+				children: [/* @__PURE__ */ jsx("span", { children: checkedChildren }), /* @__PURE__ */ jsx("span", { children: unCheckedChildren })]
+			}),
 			/* @__PURE__ */ jsx(SwitchThumb, {
 				className: classNames?.thumb,
 				size,

package/es/Switch/Switch.mjs.map

@@ -1 +1 @@
-{"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"}
+{"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    // With inner text the switch grows to fit it (antd): an invisible sizer reserves the width\n    // of the longer label and the thumb travels the measured track.\n    const hasText = !!(checkedChildren || unCheckedChildren);\n\n    return (\n      <SwitchRoot\n        autoFocus={autoFocus}\n        checked={resolvedChecked}\n        className={clsx(hasText && 'lobe-switch-text', 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        xstyle={hasText && (size === 'small' ? styles.rootTextSmall : styles.rootText)}\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        {hasText && (\n          <span\n            aria-hidden\n            {...stylex.props(styles.textSizer, size === 'small' && styles.textSizerSmall)}\n          >\n            <span>{checkedChildren}</span>\n            <span>{unCheckedChildren}</span>\n          </span>\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;CAI/C,MAAM,UAAU,CAAC,EAAE,mBAAmB;CACtC,OAAO,qBAAC,YAAD;EAAuB;EAAW,SAAS;EAAiB,WAAWA,OAAK,WAAW,oBAAoB,WAAW,eAAe,YAAY,IAAI;EAAG,gBAAgB;EAAwB,UAAU;EAAgB;EAAU;EAAW;EAAW;EAAM,OAAO;GAC5Q,GAAG;GACH,GAAG,cAAc;EACnB;EAAa;EAAiB;EAAO,QAAQ,YAAY,SAAS,UAAU,OAAO,gBAAgB,OAAO;EAAW,iBAAiB;EAAmB;EAHlJ,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;GACb,WAAW,qBAAC,QAAD;IAAM,eAAA;IAAY,GAAI,OAAO,MAAM,OAAO,WAAW,SAAS,WAAW,OAAO,cAAc;IAA9F,UAAA,CACR,oBAAC,QAAD,EAAA,UAAO,gBAAsB,CAAA,GAC7B,oBAAC,QAAD,EAAA,UAAO,kBAAwB,CAAA,CAC3B;;GACR,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.d.mts

@@ -1,12 +1,14 @@
 import { SwitchChangeEventHandler, SwitchContextType, SwitchIconProps, SwitchRootProps, SwitchThumbProps } from "./type.mjs";
+import * as stylex from "@stylexjs/stylex";
 //#region src/Switch/atoms.d.ts
 export declare const useSwitchContext: () => SwitchContextType;
 type SwitchRootInternalProps = Omit<SwitchRootProps, 'onCheckedChange' | 'onClick'> & {
   onCheckedChange?: SwitchChangeEventHandler;
   onClick?: SwitchChangeEventHandler;
+  xstyle?: stylex.StyleXStyles;
 };
 export declare const SwitchRoot: {
-  ({ checked, className, defaultChecked, onCheckedChange, onClick, onKeyDown, onKeyUp, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, size, children, disabled, readOnly, required, inputRef, id, name, style, ...rest }: SwitchRootInternalProps): import("react").JSX.Element;
+  ({ checked, className, defaultChecked, onCheckedChange, onClick, onKeyDown, onKeyUp, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, size, children, disabled, readOnly, required, inputRef, id, name, style, xstyle, ...rest }: SwitchRootInternalProps): import("react").JSX.Element;
   displayName: string;
 };
 export declare const SwitchThumb: {
@@ -29,6 +31,10 @@ export declare const switchStyles: {
   iconThumb: string;
   rootDefault: string;
   rootSmall: string;
+  rootText: string;
+  rootTextSmall: string;
+  textSizer: string;
+  textSizerSmall: string;
   thumbDefault: string;
   thumbSmall: string;
 };

package/es/Switch/atoms.mjs

@@ -4,7 +4,7 @@ import { focusRing } from "../styles/stylex/focusRing.mjs";
 import { useControlledState } from "../hooks/useControlledState.mjs";
 import { switchMarker } from "./marker.stylex.mjs";
 import { styles } from "./style.mjs";
-import { createContext, use, useEffect, useMemo, useRef, useState } from "react";
+import { createContext, use, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import clsx$1 from "clsx";
 import * as stylex from "@stylexjs/stylex";
@@ -44,7 +44,7 @@ const useSwitchContext = () => {
 	if (!context) throw new Error("useSwitchContext must be used within a SwitchRoot");
 	return context;
 };
-const SwitchRoot = ({ checked, className, defaultChecked, onCheckedChange, onClick, onKeyDown, onKeyUp, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, size = "default", children, disabled, readOnly, required, inputRef, id, name, style, ...rest }) => {
+const SwitchRoot = ({ checked, className, defaultChecked, onCheckedChange, onClick, onKeyDown, onKeyUp, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, size = "default", children, disabled, readOnly, required, inputRef, id, name, style, xstyle, ...rest }) => {
 	const [isPressed, setIsPressed] = useState(false);
 	const lastEventRef = useRef(null);
 	const [isChecked, setIsChecked] = useControlledState(defaultChecked ?? false, {
@@ -112,7 +112,8 @@ const SwitchRoot = ({ checked, className, defaultChecked, onCheckedChange, onCli
 					switchMarker,
 					focusRing.info,
 					styles.root,
-					rootSizeStyles[size]
+					rootSizeStyles[size],
+					xstyle
 				], clsx$1("lobe-switch", className), style),
 				onClick: handleClick,
 				onKeyDown: handleKeyDown,
@@ -132,7 +133,22 @@ const SwitchThumb = ({ className, size = "default", style, children, ...rest })
 	const { isChecked, isPressed } = useSwitchContext();
 	const ref = useRef(null);
 	const metrics = THUMB_METRICS[size];
-	const targetX = isChecked ? isPressed ? metrics.pressedCheckedX : metrics.checkedX : 0;
+	const [travel, setTravel] = useState(metrics.checkedX);
+	useLayoutEffect(() => {
+		const root = ref.current?.parentElement;
+		if (!root) return;
+		const measure = () => {
+			const width = root.clientWidth;
+			setTravel(width > 0 ? Math.max(metrics.checkedX, width - 4 - metrics.width) : metrics.checkedX);
+		};
+		measure();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(measure);
+		observer.observe(root);
+		return () => observer.disconnect();
+	}, [metrics]);
+	const extra = travel - metrics.checkedX;
+	const targetX = isChecked ? (isPressed ? metrics.pressedCheckedX : metrics.checkedX) + extra : 0;
 	const targetWidth = isPressed ? metrics.pressedWidth : metrics.width;
 	const [values] = useState(() => ({
 		width: motionValue(targetWidth),

package/es/Switch/atoms.mjs.map

@@ -1 +1 @@
-{"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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"}
+{"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, useLayoutEffect, 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  xstyle?: stylex.StyleXStyles;\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  xstyle,\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], xstyle],\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  // Track travel: the fixed metric, or the measured width when the root grows (inner text).\n  const [travel, setTravel] = useState(metrics.checkedX);\n  useLayoutEffect(() => {\n    const root = ref.current?.parentElement;\n    if (!root) return;\n    const measure = () => {\n      const width = root.clientWidth;\n      // root padding 2px each side\n      setTravel(\n        width > 0 ? Math.max(metrics.checkedX, width - 4 - metrics.width) : metrics.checkedX,\n      );\n    };\n    measure();\n    if (typeof ResizeObserver === 'undefined') return;\n    const observer = new ResizeObserver(measure);\n    observer.observe(root);\n    return () => observer.disconnect();\n  }, [metrics]);\n  const extra = travel - metrics.checkedX;\n  const targetX = isChecked ? (isPressed ? metrics.pressedCheckedX : metrics.checkedX) + extra : 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/Switch/style.mjs

@@ -10,16 +10,17 @@ const styles = {
 		kfzvcC: "lb47corl",
 		kVAEAm: "lb10l6tqk",
 		kIyJzY: "lb12w9bfk",
+		khDVqt: "lbuxw1ft",
 		$$css: true
 	},
 	iconLeft: {
-		kLqNvP: "lb1v1hl4c",
+		kLqNvP: "lbjwk6fx",
 		kSiTet: "lbg01cxk lbqtmd8e",
 		km0Bbg: "lb1t448cz lb1gshqrl",
 		$$css: true
 	},
 	iconRight: {
-		kt4wiu: "lbxx7yvo",
+		kt4wiu: "lb1inkcgm",
 		kSiTet: "lb12foe86",
 		km0Bbg: "lb1t60ft6",
 		$$css: true
@@ -73,6 +74,36 @@ const styles = {
 		kzqmXN: "lbgd8bvy",
 		$$css: true
 	},
+	rootText: {
+		kGuDYH: "lbfifm61",
+		kLWn49: "lbo5v014",
+		k7Eaqz: "lb1nb6za0",
+		kzqmXN: "lb14atkfc",
+		$$css: true
+	},
+	rootTextSmall: {
+		kGuDYH: "lb1k6wstc",
+		kLWn49: "lbo5v014",
+		k7Eaqz: "lb46jg8d",
+		kzqmXN: "lb14atkfc",
+		$$css: true
+	},
+	textSizer: {
+		kUk6DE: "lb1okw0bk",
+		k1xSpc: "lbrvj5dj",
+		kayTVb: "lb9ek82g",
+		kwRFfy: "lb11lfxj5",
+		kZCmMZ: "lb13jy36j",
+		kfzvcC: "lb47corl",
+		k33iCy: "lblshs6z",
+		khDVqt: "lbuxw1ft",
+		$$css: true
+	},
+	textSizerSmall: {
+		kwRFfy: "lb14vy60q",
+		kZCmMZ: "lbf7dkkf",
+		$$css: true
+	},
 	thumb: {
 		kaIpWk: "lb16rqkct",
 		kmkexE: "lbxj5fsl",

package/es/Switch/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Switch/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nimport { switchMarker } from './marker.stylex';\n\nconst loadingSpin = stylex.keyframes({\n  '0%': { transform: 'rotate(0deg)' },\n  '100%': { transform: 'rotate(360deg)' },\n});\n\nconst reducedMotion = '@media (prefers-reduced-motion: reduce)';\nconst enabledHover = ':hover:not([data-disabled])';\n\nexport const styles = stylex.create({\n  icon: {\n    insetBlock: 0,\n    transition: `opacity 200ms ${cssVar.motionEaseOut}, scale 200ms ${cssVar.motionEaseOut}`,\n    alignItems: 'center',\n    color: cssVar.colorBgLayout,\n    display: 'flex',\n    justifyContent: 'center',\n    pointerEvents: 'none',\n    position: 'absolute',\n    transitionDuration: { default: null, [reducedMotion]: '0s' },\n  },\n  iconLeft: {\n    insetInlineStart: 4,\n    opacity: { default: 0, [stylex.when.ancestor('[data-checked]', switchMarker)]: 1 },\n    scale: { default: 0, [stylex.when.ancestor('[data-checked]', switchMarker)]: 1 },\n  },\n  iconRight: {\n    insetInlineEnd: 4,\n    opacity: { default: null, [stylex.when.ancestor('[data-checked]', switchMarker)]: 0 },\n    scale: { default: null, [stylex.when.ancestor('[data-checked]', switchMarker)]: 0 },\n  },\n  iconThumb: {\n    inset: 'unset',\n    insetBlock: 'unset',\n    color: cssVar.colorPrimary,\n    position: 'relative',\n    transform: 'none',\n  },\n  loading: {\n    animationDuration: { default: '1s', [reducedMotion]: '0s' },\n    animationIterationCount: 'infinite',\n    animationName: loadingSpin,\n    animationTimingFunction: 'linear',\n  },\n  root: {\n    padding: 2,\n    borderColor: 'currentcolor',\n    borderRadius: 100,\n    borderStyle: 'none',\n    borderWidth: 0,\n    outline: 'none',\n    overflow: 'hidden',\n    transition: `background 200ms ${cssVar.motionEaseOut}, box-shadow 200ms ${cssVar.motionEaseOut}`,\n    alignItems: 'center',\n    backgroundColor: {\n      'default': cssVar.colorFillSecondary,\n      [enabledHover]: cssVar.colorFill,\n      ':is([data-checked])': cssVar.colorPrimary,\n      ':is([data-checked]):hover:not([data-disabled])': cssVar.colorPrimaryHover,\n    },\n    boxShadow: {\n      'default': 'inset 0 1.5px 2px rgb(0 0 0 / 8%)',\n      ':is([data-checked])': 'inset 0 1.5px 3px rgb(0 0 0 / 18%)',\n    },\n    boxSizing: 'border-box',\n    cursor: { 'default': 'pointer', ':is([data-disabled])': 'not-allowed' },\n    display: 'inline-flex',\n    justifyContent: 'flex-start',\n    opacity: { 'default': null, ':is([data-disabled])': 0.45 },\n    position: 'relative',\n    transitionDuration: { default: null, [reducedMotion]: '0s' },\n    userSelect: 'none',\n  },\n  rootDefault: {\n    height: 22,\n    minWidth: 36,\n    width: 36,\n  },\n  rootSmall: {\n    height: 16,\n    minWidth: 28,\n    width: 28,\n  },\n  thumb: {\n    borderRadius: '50%',\n    transition: `box-shadow 200ms ${cssVar.motionEaseOut}`,\n    alignItems: 'center',\n    backgroundColor: cssVar.colorBgContainer,\n    boxShadow: {\n      'default':\n        '0 0 0 0.5px rgb(0 0 0 / 4%), 0 1px 1px rgb(0 0 0 / 6%), 0 3px 8px rgb(0 30 80 / 16%)',\n      ':is([data-disabled])': 'none',\n      [stylex.when.ancestor(enabledHover, switchMarker)]:\n        '0 0 0 0.5px rgb(0 0 0 / 4%), 0 1px 1px rgb(0 0 0 / 8%), 0 6px 14px rgb(0 30 80 / 24%)',\n    },\n    display: 'flex',\n    flexShrink: 0,\n    justifyContent: 'center',\n    transform: 'translateX(calc(var(--switch-x, 0px) * var(--switch-dir, 1)))',\n    transitionDuration: { default: null, [reducedMotion]: '0s' },\n  },\n  thumbDefault: {\n    height: 18,\n    width: 18,\n  },\n  thumbSmall: {\n    height: 12,\n    width: 12,\n  },\n});\n"],"mappings":";AAQA,MAAa,SAAS;CACpB,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Switch/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nimport { switchMarker } from './marker.stylex';\n\nconst loadingSpin = stylex.keyframes({\n  '0%': { transform: 'rotate(0deg)' },\n  '100%': { transform: 'rotate(360deg)' },\n});\n\nconst reducedMotion = '@media (prefers-reduced-motion: reduce)';\nconst enabledHover = ':hover:not([data-disabled])';\n\nexport const styles = stylex.create({\n  icon: {\n    insetBlock: 0,\n    transition: `opacity 200ms ${cssVar.motionEaseOut}, scale 200ms ${cssVar.motionEaseOut}`,\n    alignItems: 'center',\n    color: cssVar.colorBgLayout,\n    display: 'flex',\n    justifyContent: 'center',\n    pointerEvents: 'none',\n    position: 'absolute',\n    transitionDuration: { default: null, [reducedMotion]: '0s' },\n    whiteSpace: 'nowrap',\n  },\n  iconLeft: {\n    insetInlineStart: 7,\n    opacity: { default: 0, [stylex.when.ancestor('[data-checked]', switchMarker)]: 1 },\n    scale: { default: 0, [stylex.when.ancestor('[data-checked]', switchMarker)]: 1 },\n  },\n  iconRight: {\n    insetInlineEnd: 7,\n    opacity: { default: null, [stylex.when.ancestor('[data-checked]', switchMarker)]: 0 },\n    scale: { default: null, [stylex.when.ancestor('[data-checked]', switchMarker)]: 0 },\n  },\n  iconThumb: {\n    inset: 'unset',\n    insetBlock: 'unset',\n    color: cssVar.colorPrimary,\n    position: 'relative',\n    transform: 'none',\n  },\n  loading: {\n    animationDuration: { default: '1s', [reducedMotion]: '0s' },\n    animationIterationCount: 'infinite',\n    animationName: loadingSpin,\n    animationTimingFunction: 'linear',\n  },\n  root: {\n    padding: 2,\n    borderColor: 'currentcolor',\n    borderRadius: 100,\n    borderStyle: 'none',\n    borderWidth: 0,\n    outline: 'none',\n    overflow: 'hidden',\n    transition: `background 200ms ${cssVar.motionEaseOut}, box-shadow 200ms ${cssVar.motionEaseOut}`,\n    alignItems: 'center',\n    backgroundColor: {\n      'default': cssVar.colorFillSecondary,\n      [enabledHover]: cssVar.colorFill,\n      ':is([data-checked])': cssVar.colorPrimary,\n      ':is([data-checked]):hover:not([data-disabled])': cssVar.colorPrimaryHover,\n    },\n    boxShadow: {\n      'default': 'inset 0 1.5px 2px rgb(0 0 0 / 8%)',\n      ':is([data-checked])': 'inset 0 1.5px 3px rgb(0 0 0 / 18%)',\n    },\n    boxSizing: 'border-box',\n    cursor: { 'default': 'pointer', ':is([data-disabled])': 'not-allowed' },\n    display: 'inline-flex',\n    justifyContent: 'flex-start',\n    opacity: { 'default': null, ':is([data-disabled])': 0.45 },\n    position: 'relative',\n    transitionDuration: { default: null, [reducedMotion]: '0s' },\n    userSelect: 'none',\n  },\n  rootDefault: {\n    height: 22,\n    minWidth: 36,\n    width: 36,\n  },\n  rootSmall: {\n    height: 16,\n    minWidth: 28,\n    width: 28,\n  },\n  rootText: {\n    fontSize: 12,\n    lineHeight: 1,\n    minWidth: 44,\n    width: 'auto',\n  },\n  rootTextSmall: {\n    fontSize: 10,\n    lineHeight: 1,\n    minWidth: 32,\n    width: 'auto',\n  },\n  textSizer: {\n    flex: 'none',\n    display: 'grid',\n    order: 1,\n    paddingInlineEnd: '4px',\n    paddingInlineStart: '24px',\n    pointerEvents: 'none',\n    visibility: 'hidden',\n    whiteSpace: 'nowrap',\n  },\n  textSizerSmall: {\n    paddingInlineEnd: '2px',\n    paddingInlineStart: '16px',\n  },\n  thumb: {\n    borderRadius: '50%',\n    transition: `box-shadow 200ms ${cssVar.motionEaseOut}`,\n    alignItems: 'center',\n    backgroundColor: cssVar.colorBgContainer,\n    boxShadow: {\n      'default':\n        '0 0 0 0.5px rgb(0 0 0 / 4%), 0 1px 1px rgb(0 0 0 / 6%), 0 3px 8px rgb(0 30 80 / 16%)',\n      ':is([data-disabled])': 'none',\n      [stylex.when.ancestor(enabledHover, switchMarker)]:\n        '0 0 0 0.5px rgb(0 0 0 / 4%), 0 1px 1px rgb(0 0 0 / 8%), 0 6px 14px rgb(0 30 80 / 24%)',\n    },\n    display: 'flex',\n    flexShrink: 0,\n    justifyContent: 'center',\n    transform: 'translateX(calc(var(--switch-x, 0px) * var(--switch-dir, 1)))',\n    transitionDuration: { default: null, [reducedMotion]: '0s' },\n  },\n  thumbDefault: {\n    height: 18,\n    width: 18,\n  },\n  thumbSmall: {\n    height: 12,\n    width: 12,\n  },\n});\n"],"mappings":";AAQA,MAAa,SAAS;CACpB,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,eAAe;EACb,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,gBAAgB;EACd,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

package/es/Table/Table.mjs

@@ -1,5 +1,6 @@
 "use client";
 import { useTranslation } from "../i18n/useTranslation.mjs";
+import Block from "../Block/Block.mjs";
 import Empty from "../Empty/Empty.mjs";
 import Spin from "../Spin/Spin.mjs";
 import { PREFIX_CLS } from "./constants.mjs";
@@ -85,6 +86,7 @@ const TableInner = (props) => {
 		top: null
 	};
 	const rootStyle = {
+		"--columns-count": leafColumns.length,
 		...semanticStyles.root,
 		...style
 	};
@@ -132,13 +134,20 @@ const TableInner = (props) => {
 										onColumnResize: controller.onColumnResize,
 										onScroll
 									}),
-									isLoading && /* @__PURE__ */ jsxs("div", {
+									isLoading && /* @__PURE__ */ jsx("div", {
 										...stylex.props(styles.loading),
 										"data-table-loading": "",
-										children: [/* @__PURE__ */ jsx(Spin, {
-											...spinRest,
-											variant: spinVariant
-										}), tip]
+										children: /* @__PURE__ */ jsxs(Block, {
+											align: "center",
+											"data-table-loading-indicator": "",
+											gap: 8,
+											padding: 12,
+											variant: "outlined",
+											children: [/* @__PURE__ */ jsx(Spin, {
+												...spinRest,
+												variant: spinVariant
+											}), tip]
+										})
 									}),
 									/* @__PURE__ */ jsx(FixedFrost, { rootRef })
 								]

package/es/Table/Table.mjs.map

@@ -1 +1 @@
-{"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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"}
+{"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 Block from '@/Block';\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  // The loading mask is a sibling of the table, so it needs the column count here to stack\n  // above fixed cells (z-index up to 2 × columns).\n  const rootStyle = {\n    '--columns-count': leafColumns.length,\n    ...semanticStyles.root,\n    ...style,\n  } as CSSProperties;\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                    <Block\n                      align={'center'}\n                      data-table-loading-indicator=\"\"\n                      gap={8}\n                      padding={12}\n                      variant={'outlined'}\n                    >\n                      <Spin {...spinRest} variant={spinVariant} />\n                      {tip as ReactNode}\n                    </Block>\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/render/FixedFrost.mjs

@@ -21,13 +21,20 @@ const measureSides = (rows) => {
 const collectRails = (table) => {
 	const rails = [];
 	const own = (el) => el.closest(p) === table;
+	const ownMatch = (selector) => Array.from(table.querySelectorAll(selector)).some((el) => own(el));
+	if (ownMatch(`${p}-placeholder`) || ownMatch("[data-table-skeleton]")) return rails;
+	const showStart = table.classList.contains(`${PREFIX_CLS}-fix-start-shadow-show`);
+	const showEnd = table.classList.contains(`${PREFIX_CLS}-fix-end-shadow-show`);
+	if (!showStart && !showEnd) return rails;
 	const hosts = table.querySelectorAll(`${p}-content, ${p}-header, ${p}-body, ${p}-tbody-virtual-holder-inner`);
 	for (const host of Array.from(hosts)) {
 		if (!own(host)) continue;
 		if (host.closest(`${p}-sticky-holder`)) continue;
 		if (host.classList.contains(`lobe-table-tbody-virtual-holder-inner`)) {
 			const rows = Array.from(host.querySelectorAll(`${p}-row`)).filter((el) => own(el) && !el.classList.contains(`lobe-table-row-extra`));
-			const { start, end } = measureSides(rows.slice(0, 3));
+			const measured = measureSides(rows.slice(0, 3));
+			const start = showStart ? measured.start : 0;
+			const end = showEnd ? measured.end : 0;
 			if (start || end) rails.push({
 				end,
 				fill: true,
@@ -41,7 +48,9 @@ const collectRails = (table) => {
 		const tableEl = host.querySelector(":scope > table");
 		if (!tableEl) continue;
 		const rows = Array.from(tableEl.querySelectorAll(":scope > thead > tr, :scope > tbody > tr")).filter((row) => !row.classList.contains(`${PREFIX_CLS}-measure-row`)).slice(0, 6);
-		const { start, end } = measureSides(rows);
+		const measured = measureSides(rows);
+		const start = showStart ? measured.start : 0;
+		const end = showEnd ? measured.end : 0;
 		if (!start && !end) continue;
 		rails.push({
 			end,

package/es/Table/render/FixedFrost.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FixedFrost.mjs","names":[],"sources":["../../../src/Table/render/FixedFrost.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { memo, type RefObject, useEffect, useState } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { PREFIX_CLS } from '../constants';\nimport { styles } from '../style';\n\nconst p = `.${PREFIX_CLS}`;\n\ninterface Rail {\n  end: number;\n  fill: boolean;\n  height: number;\n  host: HTMLElement;\n  start: number;\n  width: number;\n}\n\nconst px = (value: string) => Number.parseFloat(value) || 0;\n\nconst measureSides = (rows: Element[]) => {\n  let start = 0;\n  let end = 0;\n  for (const row of rows) {\n    for (const cell of Array.from(row.children) as HTMLElement[]) {\n      if (cell.classList.contains(`${PREFIX_CLS}-cell-fix-start`)) {\n        start = Math.max(\n          start,\n          px(cell.style.insetInlineStart || cell.style.left) + cell.offsetWidth,\n        );\n      } else if (cell.classList.contains(`${PREFIX_CLS}-cell-fix-end`)) {\n        end = Math.max(end, px(cell.style.insetInlineEnd || cell.style.right) + cell.offsetWidth);\n      }\n    }\n  }\n  return { end: Math.round(end), start: Math.round(start) };\n};\n\nconst collectRails = (table: HTMLElement): Rail[] => {\n  const rails: Rail[] = [];\n  const own = (el: Element) => el.closest(p) === table;\n  const hosts = table.querySelectorAll<HTMLElement>(\n    `${p}-content, ${p}-header, ${p}-body, ${p}-tbody-virtual-holder-inner`,\n  );\n\n  for (const host of Array.from(hosts)) {\n    if (!own(host)) continue;\n    // A sticky header is one element and blurs itself in CSS.\n    if (host.closest(`${p}-sticky-holder`)) continue;\n\n    if (host.classList.contains(`${PREFIX_CLS}-tbody-virtual-holder-inner`)) {\n      const rows = Array.from(host.querySelectorAll(`${p}-row`)).filter(\n        (el) => own(el) && !el.classList.contains(`${PREFIX_CLS}-row-extra`),\n      );\n      const { start, end } = measureSides(rows.slice(0, 3));\n      if (start || end) rails.push({ end, fill: true, height: 0, host, start, width: 0 });\n      continue;\n    }\n\n    const tableEl = host.querySelector<HTMLTableElement>(':scope > table');\n    if (!tableEl) continue;\n    const rows = Array.from(tableEl.querySelectorAll(':scope > thead > tr, :scope > tbody > tr'))\n      .filter((row) => !row.classList.contains(`${PREFIX_CLS}-measure-row`))\n      .slice(0, 6);\n    const { start, end } = measureSides(rows);\n    if (!start && !end) continue;\n    rails.push({\n      end,\n      fill: false,\n      height: tableEl.offsetHeight,\n      host,\n      start,\n      width: tableEl.offsetWidth,\n    });\n  }\n  return rails;\n};\n\nconst sameRails = (a: Rail[], b: Rail[]) =>\n  a.length === b.length &&\n  a.every(\n    (rail, i) =>\n      rail.host === b[i].host &&\n      rail.start === b[i].start &&\n      rail.end === b[i].end &&\n      rail.width === b[i].width &&\n      rail.height === b[i].height,\n  );\n\n// A per-cell backdrop-filter blurs each box on its own and shows seams at every row, so\n// each scroll host gets one rail holding a sticky pane per fixed side instead.\nconst FixedFrost = memo<{ rootRef: RefObject<HTMLElement | null> }>(({ rootRef }) => {\n  const [rails, setRails] = useState<Rail[]>([]);\n\n  // Passive effect: the root ref belongs to an ancestor and is attached after this\n  // child's layout effects, so a layout effect would see it as null on mount.\n  useEffect(() => {\n    const root = rootRef.current;\n    if (!root) return;\n    let frame = 0;\n\n    const update = () => {\n      frame = 0;\n      const table = root.querySelector<HTMLElement>(p);\n      const next = table ? collectRails(table) : [];\n      for (const rail of next) {\n        if (!rail.fill && getComputedStyle(rail.host).position === 'static') {\n          rail.host.style.position = 'relative';\n        }\n      }\n      setRails((prev) => (sameRails(prev, next) ? prev : next));\n    };\n    const schedule = () => {\n      if (!frame) frame = requestAnimationFrame(update);\n    };\n\n    update();\n    // Consumers render Table in jsdom without a ResizeObserver polyfill.\n    const resize = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(schedule);\n    resize?.observe(root);\n    const mutation = new MutationObserver((records) => {\n      if (records.every((r) => (r.target as Element).closest?.('[data-table-frost]'))) return;\n      schedule();\n    });\n    mutation.observe(root, { attributeFilter: ['class', 'style'], childList: true, subtree: true });\n\n    return () => {\n      if (frame) cancelAnimationFrame(frame);\n      resize?.disconnect();\n      mutation.disconnect();\n    };\n  }, [rootRef]);\n\n  return (\n    <>\n      {rails.map((rail, i) =>\n        createPortal(\n          <div\n            aria-hidden\n            data-table-frost=\"\"\n            {...stylex.props(styles.frostRail)}\n            style={rail.fill ? { inset: 0 } : { height: rail.height, width: rail.width }}\n          >\n            {rail.start > 0 && (\n              <div {...stylex.props(styles.frostStart)} style={{ width: rail.start }} />\n            )}\n            {rail.end > 0 && <div {...stylex.props(styles.frostEnd)} style={{ width: rail.end }} />}\n          </div>,\n          rail.host,\n          `frost-${i}`,\n        ),\n      )}\n    </>\n  );\n});\n\nFixedFrost.displayName = 'TableFixedFrost';\n\nexport default FixedFrost;\n"],"mappings":"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"}
+{"version":3,"file":"FixedFrost.mjs","names":[],"sources":["../../../src/Table/render/FixedFrost.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { memo, type RefObject, useEffect, useState } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { PREFIX_CLS } from '../constants';\nimport { styles } from '../style';\n\nconst p = `.${PREFIX_CLS}`;\n\ninterface Rail {\n  end: number;\n  fill: boolean;\n  height: number;\n  host: HTMLElement;\n  start: number;\n  width: number;\n}\n\nconst px = (value: string) => Number.parseFloat(value) || 0;\n\nconst measureSides = (rows: Element[]) => {\n  let start = 0;\n  let end = 0;\n  for (const row of rows) {\n    for (const cell of Array.from(row.children) as HTMLElement[]) {\n      if (cell.classList.contains(`${PREFIX_CLS}-cell-fix-start`)) {\n        start = Math.max(\n          start,\n          px(cell.style.insetInlineStart || cell.style.left) + cell.offsetWidth,\n        );\n      } else if (cell.classList.contains(`${PREFIX_CLS}-cell-fix-end`)) {\n        end = Math.max(end, px(cell.style.insetInlineEnd || cell.style.right) + cell.offsetWidth);\n      }\n    }\n  }\n  return { end: Math.round(end), start: Math.round(start) };\n};\n\nconst collectRails = (table: HTMLElement): Rail[] => {\n  const rails: Rail[] = [];\n  const own = (el: Element) => el.closest(p) === table;\n  const ownMatch = (selector: string) =>\n    Array.from(table.querySelectorAll(selector)).some((el) => own(el));\n\n  // Empty / skeleton body: the placeholder row spans every column, so there is nothing fixed\n  // in the body and nothing scrolled under the fixed side; a rail would only blur the\n  // skeleton and its row dividers.\n  if (ownMatch(`${p}-placeholder`) || ownMatch('[data-table-skeleton]')) return rails;\n\n  // useScrollSync flags the table with `*-shadow-show` exactly while content sits under a\n  // fixed side; at rest the transparent fixed cells cover nothing.\n  const showStart = table.classList.contains(`${PREFIX_CLS}-fix-start-shadow-show`);\n  const showEnd = table.classList.contains(`${PREFIX_CLS}-fix-end-shadow-show`);\n  if (!showStart && !showEnd) return rails;\n  const hosts = table.querySelectorAll<HTMLElement>(\n    `${p}-content, ${p}-header, ${p}-body, ${p}-tbody-virtual-holder-inner`,\n  );\n\n  for (const host of Array.from(hosts)) {\n    if (!own(host)) continue;\n    // A sticky header is one element and blurs itself in CSS.\n    if (host.closest(`${p}-sticky-holder`)) continue;\n\n    if (host.classList.contains(`${PREFIX_CLS}-tbody-virtual-holder-inner`)) {\n      const rows = Array.from(host.querySelectorAll(`${p}-row`)).filter(\n        (el) => own(el) && !el.classList.contains(`${PREFIX_CLS}-row-extra`),\n      );\n      const measured = measureSides(rows.slice(0, 3));\n      const start = showStart ? measured.start : 0;\n      const end = showEnd ? measured.end : 0;\n      if (start || end) rails.push({ end, fill: true, height: 0, host, start, width: 0 });\n      continue;\n    }\n\n    const tableEl = host.querySelector<HTMLTableElement>(':scope > table');\n    if (!tableEl) continue;\n    const rows = Array.from(tableEl.querySelectorAll(':scope > thead > tr, :scope > tbody > tr'))\n      .filter((row) => !row.classList.contains(`${PREFIX_CLS}-measure-row`))\n      .slice(0, 6);\n    const measured = measureSides(rows);\n    const start = showStart ? measured.start : 0;\n    const end = showEnd ? measured.end : 0;\n    if (!start && !end) continue;\n    rails.push({\n      end,\n      fill: false,\n      height: tableEl.offsetHeight,\n      host,\n      start,\n      width: tableEl.offsetWidth,\n    });\n  }\n  return rails;\n};\n\nconst sameRails = (a: Rail[], b: Rail[]) =>\n  a.length === b.length &&\n  a.every(\n    (rail, i) =>\n      rail.host === b[i].host &&\n      rail.start === b[i].start &&\n      rail.end === b[i].end &&\n      rail.width === b[i].width &&\n      rail.height === b[i].height,\n  );\n\n// A per-cell backdrop-filter blurs each box on its own and shows seams at every row, so\n// each scroll host gets one rail holding a sticky pane per fixed side instead. A side is only\n// frosted while content is scrolled under it and never over an empty / skeleton body, so row\n// dividers stay continuous through fixed columns.\nconst FixedFrost = memo<{ rootRef: RefObject<HTMLElement | null> }>(({ rootRef }) => {\n  const [rails, setRails] = useState<Rail[]>([]);\n\n  // Passive effect: the root ref belongs to an ancestor and is attached after this\n  // child's layout effects, so a layout effect would see it as null on mount.\n  useEffect(() => {\n    const root = rootRef.current;\n    if (!root) return;\n    let frame = 0;\n\n    const update = () => {\n      frame = 0;\n      const table = root.querySelector<HTMLElement>(p);\n      const next = table ? collectRails(table) : [];\n      for (const rail of next) {\n        if (!rail.fill && getComputedStyle(rail.host).position === 'static') {\n          rail.host.style.position = 'relative';\n        }\n      }\n      setRails((prev) => (sameRails(prev, next) ? prev : next));\n    };\n    const schedule = () => {\n      if (!frame) frame = requestAnimationFrame(update);\n    };\n\n    update();\n    // Consumers render Table in jsdom without a ResizeObserver polyfill.\n    const resize = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(schedule);\n    resize?.observe(root);\n    const mutation = new MutationObserver((records) => {\n      if (records.every((r) => (r.target as Element).closest?.('[data-table-frost]'))) return;\n      schedule();\n    });\n    mutation.observe(root, { attributeFilter: ['class', 'style'], childList: true, subtree: true });\n\n    return () => {\n      if (frame) cancelAnimationFrame(frame);\n      resize?.disconnect();\n      mutation.disconnect();\n    };\n  }, [rootRef]);\n\n  return (\n    <>\n      {rails.map((rail, i) =>\n        createPortal(\n          <div\n            aria-hidden\n            data-table-frost=\"\"\n            {...stylex.props(styles.frostRail)}\n            style={rail.fill ? { inset: 0 } : { height: rail.height, width: rail.width }}\n          >\n            {rail.start > 0 && (\n              <div {...stylex.props(styles.frostStart)} style={{ width: rail.start }} />\n            )}\n            {rail.end > 0 && <div {...stylex.props(styles.frostEnd)} style={{ width: rail.end }} />}\n          </div>,\n          rail.host,\n          `frost-${i}`,\n        ),\n      )}\n    </>\n  );\n});\n\nFixedFrost.displayName = 'TableFixedFrost';\n\nexport default FixedFrost;\n"],"mappings":"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"}

package/es/Table/style.mjs

@@ -96,6 +96,8 @@ const styles = {
 	frostEnd: {
 		kUk6DE: "lb1okw0bk",
 		k6WDB: "lb1jh03n0",
+		kT0f0o: "lb1b5hgzv",
+		kfmiAY: "lb13toaxh",
 		kt4wiu: "lbtijo5x",
 		keTefX: "lbvc5jky",
 		kVAEAm: "lb7wzq59",
@@ -114,6 +116,8 @@ const styles = {
 	frostStart: {
 		kUk6DE: "lb1okw0bk",
 		k6WDB: "lb1jh03n0",
+		kVL7Gh: "lb1k65923",
+		krdFHd: "lb1jyebuh",
 		kLqNvP: "lb1o0tod",
 		kVAEAm: "lb7wzq59",
 		kZKoxP: "lb5yr21d",