@lobehub/ui 6.0.0-beta.8 → 6.0.0

package/es/ProTable/parts/FieldControl.mjs

@@ -3,11 +3,12 @@ import Switch from "../../Switch/Switch.mjs";
 import Input_default from "../../Input/Input.mjs";
 import InputNumber_default from "../../Input/InputNumber.mjs";
 import Select from "../../Select/Select.mjs";
-import DatePicker from "../../DatePicker/DatePicker.mjs";
-import DateRangePicker from "../../DatePicker/DateRangePicker.mjs";
+import DayjsDatePicker from "../../DatePicker/DayjsDatePicker.mjs";
+import DayjsDateRangePicker from "../../DatePicker/DayjsDateRangePicker.mjs";
 import { resolveValueEnum, resolveValueType, valueEnumToList } from "../utils.mjs";
+import { styles } from "../style.mjs";
 import { useColumnRequest } from "../hooks/useColumnRequest.mjs";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import dayjs from "dayjs";
 //#region src/ProTable/parts/FieldControl.tsx
 const SELECT_TYPES = /* @__PURE__ */ new Set([
@@ -21,11 +22,16 @@ const FieldControl = ({ column, form, light, onChange, placeholder, value }) =>
 	const valueType = resolveValueType(column) ?? "text";
 	const valueEnum = resolveValueEnum(column);
 	const { fieldProps = {} } = column;
-	const label = typeof column.title === "string" ? column.title : void 0;
 	const size = light ? "small" : void 0;
 	const { isDarkMode } = useThemeMode();
 	const variant = light ? isDarkMode ? "filled" : "outlined" : void 0;
 	const remote = useColumnRequest(column);
+	const lightLabel = light && column.title !== void 0 && column.title !== null && typeof column.title !== "function" ? /* @__PURE__ */ jsx("span", {
+		className: styles.lightFilterLabel,
+		"data-pro-table-light-label": "",
+		children: column.title
+	}) : void 0;
+	const labelProps = lightLabel ? { prefix: lightLabel } : {};
 	if (column.renderFormItem) return column.renderFormItem(column, {
 		form,
 		isQuery: !light,
@@ -43,8 +49,9 @@ const FieldControl = ({ column, form, light, onChange, placeholder, value }) =>
 			loading: remote.loading,
 			mode: valueType === "checkbox" ? "multiple" : void 0,
 			options,
-			placeholder: light ? label : placeholder.select,
+			placeholder: placeholder.select,
 			size,
+			...labelProps,
 			style: { width: "100%" },
 			value: value ?? (valueType === "checkbox" ? [] : null),
 			variant,
@@ -61,24 +68,32 @@ const FieldControl = ({ column, form, light, onChange, placeholder, value }) =>
 		case "money":
 		case "percent":
 		case "progress": return /* @__PURE__ */ jsx(InputNumber_default, {
-			placeholder: light ? label : placeholder.input,
+			placeholder: placeholder.input,
 			size,
+			...labelProps,
 			style: { width: "100%" },
 			value: value ?? null,
 			variant,
 			...fieldProps,
 			onChange: (next) => onChange(next ?? void 0)
 		});
-		case "switch": return /* @__PURE__ */ jsx(Switch, {
-			checked: !!value,
-			...fieldProps,
-			onChange: (next) => onChange(next)
-		});
+		case "switch": {
+			const control = /* @__PURE__ */ jsx(Switch, {
+				checked: !!value,
+				...fieldProps,
+				onChange: (next) => onChange(next)
+			});
+			return lightLabel ? /* @__PURE__ */ jsxs("span", {
+				className: styles.lightFilterSwitch,
+				children: [lightLabel, control]
+			}) : control;
+		}
 		case "date":
-		case "dateTime": return /* @__PURE__ */ jsx(DatePicker, {
+		case "dateTime": return /* @__PURE__ */ jsx(DayjsDatePicker, {
 			allowClear: true,
-			placeholder: light ? label : placeholder.select,
+			placeholder: placeholder.select,
 			size,
+			...labelProps,
 			style: { width: "100%" },
 			value: toDayjs(value),
 			variant,
@@ -86,9 +101,10 @@ const FieldControl = ({ column, form, light, onChange, placeholder, value }) =>
 			onChange: (next) => onChange(toDate(next) ?? void 0)
 		});
 		case "dateRange":
-		case "dateTimeRange": return /* @__PURE__ */ jsx(DateRangePicker, {
+		case "dateTimeRange": return /* @__PURE__ */ jsx(DayjsDateRangePicker, {
 			allowClear: true,
 			size,
+			...labelProps,
 			style: { width: "100%" },
 			value: value ? [toDayjs(value[0]), toDayjs(value[1])] : null,
 			variant,
@@ -97,8 +113,9 @@ const FieldControl = ({ column, form, light, onChange, placeholder, value }) =>
 		});
 		default: return /* @__PURE__ */ jsx(Input_default, {
 			allowClear: true,
-			placeholder: light ? label : placeholder.input,
+			placeholder: placeholder.input,
 			size,
+			...labelProps,
 			type: valueType === "password" ? "password" : void 0,
 			value: value ?? "",
 			variant,

package/es/ProTable/parts/FieldControl.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FieldControl.mjs","names":["InputNumber","Input"],"sources":["../../../src/ProTable/parts/FieldControl.tsx"],"sourcesContent":["import dayjs, { type Dayjs } from 'dayjs';\nimport { type ReactNode } from 'react';\n\nimport DatePicker from '@/DatePicker/DatePicker';\nimport DateRangePicker from '@/DatePicker/DateRangePicker';\nimport Input from '@/Input/Input';\nimport InputNumber from '@/Input/InputNumber';\nimport Select from '@/Select';\nimport { useThemeMode } from '@/styles/theme/scope';\nimport Switch from '@/Switch';\n\nimport { useColumnRequest } from '../hooks/useColumnRequest';\nimport type { ProColumnType, ProTableFormInstance, ProTableValueType } from '../type';\nimport { resolveValueEnum, resolveValueType, valueEnumToList } from '../utils';\n\nexport interface FieldControlProps {\n  column: ProColumnType<any>;\n  form: ProTableFormInstance;\n  light?: boolean;\n  onChange: (value: any) => void;\n  placeholder: { input: string; select: string };\n  value: any;\n}\n\nconst SELECT_TYPES = new Set<ProTableValueType>(['select', 'radio', 'checkbox']);\n\n// Form values stay native Date (ProTable's contract); the picker works in Dayjs.\nconst toDayjs = (value: unknown) => (value ? dayjs(value as Date) : null);\nconst toDate = (value: Dayjs | null | undefined) => value?.toDate() ?? null;\n\nconst FieldControl = ({ column, form, light, onChange, placeholder, value }: FieldControlProps) => {\n  const valueType = resolveValueType(column) ?? 'text';\n  const valueEnum = resolveValueEnum(column);\n  const { fieldProps = {} } = column;\n  const label = typeof column.title === 'string' ? column.title : undefined;\n  const size = light ? 'small' : undefined;\n  const { isDarkMode } = useThemeMode();\n  // Light filter: outlined on light backgrounds, filled in dark mode.\n  const variant = light ? (isDarkMode ? 'filled' : 'outlined') : undefined;\n  const remote = useColumnRequest(column);\n\n  if (column.renderFormItem) {\n    return column.renderFormItem(\n      column,\n      { form, isQuery: !light, onChange, value },\n      form,\n    ) as ReactNode;\n  }\n\n  if (remote.enabled || valueEnum || SELECT_TYPES.has(valueType)) {\n    const options =\n      remote.options ??\n      fieldProps.options ??\n      valueEnumToList(valueEnum).map((item) => ({\n        disabled: item.disabled,\n        label: item.text,\n        value: item.value,\n      }));\n    return (\n      <Select\n        allowClear\n        loading={remote.loading}\n        mode={valueType === 'checkbox' ? 'multiple' : undefined}\n        options={options as any}\n        placeholder={light ? label : placeholder.select}\n        size={size}\n        style={{ width: '100%' }}\n        value={value ?? (valueType === 'checkbox' ? [] : null)}\n        variant={variant}\n        {...fieldProps}\n        onChange={(next) => onChange(next ?? undefined)}\n        onSearch={\n          remote.onSearch\n            ? (keyWords: string) => {\n                remote.onSearch!(keyWords);\n                fieldProps.onSearch?.(keyWords);\n              }\n            : fieldProps.onSearch\n        }\n      />\n    );\n  }\n\n  switch (valueType) {\n    case 'digit':\n    case 'money':\n    case 'percent':\n    case 'progress': {\n      return (\n        <InputNumber\n          placeholder={light ? label : placeholder.input}\n          size={size}\n          style={{ width: '100%' }}\n          value={value ?? null}\n          variant={variant}\n          {...fieldProps}\n          onChange={(next) => onChange(next ?? undefined)}\n        />\n      );\n    }\n    case 'switch': {\n      return <Switch checked={!!value} {...fieldProps} onChange={(next) => onChange(next)} />;\n    }\n    case 'date':\n    case 'dateTime': {\n      return (\n        <DatePicker\n          allowClear\n          placeholder={light ? label : placeholder.select}\n          size={size}\n          style={{ width: '100%' }}\n          value={toDayjs(value)}\n          variant={variant}\n          {...fieldProps}\n          onChange={(next) => onChange(toDate(next) ?? undefined)}\n        />\n      );\n    }\n    case 'dateRange':\n    case 'dateTimeRange': {\n      return (\n        <DateRangePicker\n          allowClear\n          size={size}\n          style={{ width: '100%' }}\n          value={value ? [toDayjs(value[0]), toDayjs(value[1])] : null}\n          variant={variant}\n          {...fieldProps}\n          onChange={(next) =>\n            onChange(next && (next[0] || next[1]) ? [toDate(next[0]), toDate(next[1])] : undefined)\n          }\n        />\n      );\n    }\n    default: {\n      return (\n        <Input\n          allowClear\n          placeholder={light ? label : placeholder.input}\n          size={size}\n          type={valueType === 'password' ? 'password' : undefined}\n          value={value ?? ''}\n          variant={variant}\n          {...fieldProps}\n          onChange={(event) => onChange(event.target.value === '' ? undefined : event.target.value)}\n          onClear={() => {\n            onChange(undefined);\n            fieldProps.onClear?.();\n          }}\n        />\n      );\n    }\n  }\n};\n\nexport default FieldControl;\n"],"mappings":"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"}
+{"version":3,"file":"FieldControl.mjs","names":["InputNumber","DatePicker","DateRangePicker","Input"],"sources":["../../../src/ProTable/parts/FieldControl.tsx"],"sourcesContent":["import dayjs, { type Dayjs } from 'dayjs';\nimport { type ReactNode } from 'react';\n\nimport DatePicker from '@/DatePicker/DayjsDatePicker';\nimport DateRangePicker from '@/DatePicker/DayjsDateRangePicker';\nimport Input from '@/Input/Input';\nimport InputNumber from '@/Input/InputNumber';\nimport Select from '@/Select';\nimport { useThemeMode } from '@/styles/theme/scope';\nimport Switch from '@/Switch';\n\nimport { useColumnRequest } from '../hooks/useColumnRequest';\nimport { styles } from '../style';\nimport type { ProColumnType, ProTableFormInstance, ProTableValueType } from '../type';\nimport { resolveValueEnum, resolveValueType, valueEnumToList } from '../utils';\n\nexport interface FieldControlProps {\n  column: ProColumnType<any>;\n  form: ProTableFormInstance;\n  light?: boolean;\n  onChange: (value: any) => void;\n  placeholder: { input: string; select: string };\n  value: any;\n}\n\nconst SELECT_TYPES = new Set<ProTableValueType>(['select', 'radio', 'checkbox']);\n\n// Form values stay native Date (ProTable's contract); the picker works in Dayjs.\nconst toDayjs = (value: unknown) => (value ? dayjs(value as Date) : null);\nconst toDate = (value: Dayjs | null | undefined) => value?.toDate() ?? null;\n\nconst FieldControl = ({ column, form, light, onChange, placeholder, value }: FieldControlProps) => {\n  const valueType = resolveValueType(column) ?? 'text';\n  const valueEnum = resolveValueEnum(column);\n  const { fieldProps = {} } = column;\n  const size = light ? 'small' : undefined;\n  const { isDarkMode } = useThemeMode();\n  // Light filter: outlined on light backgrounds, filled in dark mode.\n  const variant = light ? (isDarkMode ? 'filled' : 'outlined') : undefined;\n  const remote = useColumnRequest(column);\n  // Light filter: the field label always stays visible inside the control (Pro `FieldLabel`\n  // style, \"Status: All\"), so a placeholder such as \"All\" is never ambiguous.\n  const lightLabel =\n    light &&\n    column.title !== undefined &&\n    column.title !== null &&\n    typeof column.title !== 'function' ? (\n      <span className={styles.lightFilterLabel} data-pro-table-light-label=\"\">\n        {column.title as ReactNode}\n      </span>\n    ) : undefined;\n  const labelProps = lightLabel ? { prefix: lightLabel } : {};\n\n  if (column.renderFormItem) {\n    return column.renderFormItem(\n      column,\n      { form, isQuery: !light, onChange, value },\n      form,\n    ) as ReactNode;\n  }\n\n  if (remote.enabled || valueEnum || SELECT_TYPES.has(valueType)) {\n    const options =\n      remote.options ??\n      fieldProps.options ??\n      valueEnumToList(valueEnum).map((item) => ({\n        disabled: item.disabled,\n        label: item.text,\n        value: item.value,\n      }));\n    return (\n      <Select\n        allowClear\n        loading={remote.loading}\n        mode={valueType === 'checkbox' ? 'multiple' : undefined}\n        options={options as any}\n        placeholder={placeholder.select}\n        size={size}\n        {...labelProps}\n        style={{ width: '100%' }}\n        value={value ?? (valueType === 'checkbox' ? [] : null)}\n        variant={variant}\n        {...fieldProps}\n        onChange={(next) => onChange(next ?? undefined)}\n        onSearch={\n          remote.onSearch\n            ? (keyWords: string) => {\n                remote.onSearch!(keyWords);\n                fieldProps.onSearch?.(keyWords);\n              }\n            : fieldProps.onSearch\n        }\n      />\n    );\n  }\n\n  switch (valueType) {\n    case 'digit':\n    case 'money':\n    case 'percent':\n    case 'progress': {\n      return (\n        <InputNumber\n          placeholder={placeholder.input}\n          size={size}\n          {...labelProps}\n          style={{ width: '100%' }}\n          value={value ?? null}\n          variant={variant}\n          {...fieldProps}\n          onChange={(next) => onChange(next ?? undefined)}\n        />\n      );\n    }\n    case 'switch': {\n      const control = (\n        <Switch checked={!!value} {...fieldProps} onChange={(next) => onChange(next)} />\n      );\n      return lightLabel ? (\n        <span className={styles.lightFilterSwitch}>\n          {lightLabel}\n          {control}\n        </span>\n      ) : (\n        control\n      );\n    }\n    case 'date':\n    case 'dateTime': {\n      return (\n        <DatePicker\n          allowClear\n          placeholder={placeholder.select}\n          size={size}\n          {...labelProps}\n          style={{ width: '100%' }}\n          value={toDayjs(value)}\n          variant={variant}\n          {...fieldProps}\n          onChange={(next) => onChange(toDate(next) ?? undefined)}\n        />\n      );\n    }\n    case 'dateRange':\n    case 'dateTimeRange': {\n      return (\n        <DateRangePicker\n          allowClear\n          size={size}\n          {...labelProps}\n          style={{ width: '100%' }}\n          value={value ? [toDayjs(value[0]), toDayjs(value[1])] : null}\n          variant={variant}\n          {...fieldProps}\n          onChange={(next) =>\n            onChange(next && (next[0] || next[1]) ? [toDate(next[0]), toDate(next[1])] : undefined)\n          }\n        />\n      );\n    }\n    default: {\n      return (\n        <Input\n          allowClear\n          placeholder={placeholder.input}\n          size={size}\n          {...labelProps}\n          type={valueType === 'password' ? 'password' : undefined}\n          value={value ?? ''}\n          variant={variant}\n          {...fieldProps}\n          onChange={(event) => onChange(event.target.value === '' ? undefined : event.target.value)}\n          onClear={() => {\n            onChange(undefined);\n            fieldProps.onClear?.();\n          }}\n        />\n      );\n    }\n  }\n};\n\nexport default FieldControl;\n"],"mappings":"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"}

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":";;;AAKA,MAAa,iBAAiB;AAC9B,MAAM,MAAM;CACV,OAAO;EACL,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,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,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,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,kBAAkB;EAChB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,oBAAoB;EAClB,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,iBAAiB;EACf,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,OAAO;CACT;CACA,mBAAmB;EACjB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,eAAe;EACb,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,kBAAkB;EAChB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,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,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,gBAAgB;EACd,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,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AACA,MAAM,OAAO,UAA+B,OAAO,MAAM,KAAK,CAAC,CAAC,aAAa;AAC7E,MAAa,SAAS;CACpB,OAAO,IAAI,IAAI,KAAK;CACpB,WAAW,IAAI,IAAI,SAAS;CAC5B,aAAa,IAAI,IAAI,WAAW;CAChC,MAAM,IAAI,IAAI,IAAI;CAClB,UAAU,IAAI,IAAI,QAAQ;CAC1B,cAAc,IAAI,IAAI,YAAY;CAClC,SAAS,IAAI,IAAI,OAAO;CACxB,aAAa,GAAG,eAAe;CAC/B,UAAU,IAAI,IAAI,QAAQ;CAC1B,aAAa,GAAG,eAAe;CAC/B,aAAa,IAAI,IAAI,WAAW;CAChC,iBAAiB,GAAG,eAAe;CACnC,kBAAkB,IAAI,IAAI,gBAAgB;CAC1C,YAAY,IAAI,IAAI,UAAU;CAC9B,MAAM,IAAI,IAAI,IAAI;CAClB,cAAc,IAAI,IAAI,YAAY;CAClC,MAAM,GAAG,eAAe;CACxB,QAAQ,IAAI,IAAI,MAAM;CACtB,eAAe,GAAG,eAAe;CACjC,aAAa,GAAG,eAAe;CAC/B,oBAAoB,IAAI,IAAI,kBAAkB;CAC9C,aAAa,GAAG,eAAe;CAC/B,iBAAiB,IAAI,IAAI,eAAe;CACxC,SAAS,IAAI,IAAI,OAAO;CACxB,mBAAmB,IAAI,IAAI,iBAAiB;CAC5C,eAAe,IAAI,IAAI,aAAa;CACpC,aAAa,GAAG,eAAe;CAC/B,oBAAoB,GAAG,eAAe;CACtC,kBAAkB,IAAI,IAAI,gBAAgB;CAC1C,aAAa,IAAI,IAAI,WAAW;CAChC,QAAQ,IAAI,IAAI,MAAM;CACtB,WAAW,IAAI,IAAI,SAAS;CAC5B,kBAAkB,GAAG,eAAe;CACpC,OAAO,IAAI,IAAI,KAAK;CACpB,UAAU,IAAI,IAAI,QAAQ;CAC1B,cAAc,IAAI,IAAI,YAAY;CAClC,SAAS,IAAI,IAAI,OAAO;CACxB,gBAAgB,IAAI,IAAI,cAAc;CACtC,gBAAgB,IAAI,IAAI,cAAc;AACxC;AACA,MAAa,aAAa,cAGX,SAA6BA,OAAK,OAAO,OAAO,OAAO,iBAAiB,WAAW,aAAa,QAAQ,iBAAiB,OAAO,cAAc,GAAG,eAAe,GAAG,MAAM"}
+{"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":";;;;;;;;;;;;;AAeA,MAAM,gBAKD;CACH,SAAS;EACP,UAAU;EACV,iBAAiB;EACjB,cAAc;EACd,OAAO;CACT;CACA,OAAO;EACL,UAAU;EACV,iBAAiB;EACjB,cAAc;EACd,OAAO;CACT;AACF;AACA,MAAM,iBAAiB;CACrB,SAAS,OAAO;CAChB,OAAO,OAAO;AAChB;AACA,MAAM,kBAAkB;CACtB,SAAS,OAAO;CAChB,OAAO,OAAO;AAChB;AACA,MAAM,eAAe;CACnB,SAAS;CACT,WAAW;CACX,MAAM;AACR;AACA,MAAM,gBAAgB,cAAwC,IAAI;AAClE,MAAa,yBAAyB;CACpC,MAAM,UAAU,IAAI,aAAa;CACjC,IAAI,CAAC,SACH,MAAM,IAAI,MAAM,mDAAmD;CAErE,OAAO;AACT;AAKA,MAAa,cAAc,EACzB,SACA,WACA,gBACA,iBACA,SACA,WACA,SACA,iBACA,eACA,gBACA,aACA,OAAO,WACP,UACA,UACA,UACA,UACA,UACA,IACA,MACA,OACA,GAAG,WAC0B;CAC7B,MAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;CAChD,MAAM,eAAe,OAAyE,IAAI;CAClG,MAAM,CAAC,WAAW,gBAAgB,mBAAmB,kBAAkB,OAAO;EAC5E,cAAc;EACd,WAAW,UAAmB;GAC5B,IAAI,aAAa,SACf,kBAAkB,OAAO,aAAa,OAAO;EAEjD;EACA,OAAO;CACT,CAAC;CACD,MAAM,eAAe,eAAe;EAClC,WAAW,QAAQ,SAAS;EAC5B;EACA,eAAe,UAAmB,aAAa,KAAK;EACpD;CACF,IAAI;EAAC;EAAW;EAAW;CAAY,CAAC;CACxC,MAAM,eAAe,UAAyC;EAC5D,aAAa,UAAU;EACvB,UAAU,CAAC,WAAW,KAAK;CAC7B;CACA,MAAM,gBAAgB,CAAC,YAAY,CAAC;CACpC,MAAM,iBAAiB,UAA4C;EACjE,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KACzC,aAAa,UAAU;EAEzB,IAAI,MAAM,QAAQ,OAAO,eACvB,aAAa,IAAI;EAEnB,YAAY,KAAK;CACnB;CACA,MAAM,eAAe,UAA4C;EAC/D,IAAI,MAAM,QAAQ,KAChB,aAAa,KAAK;EAEpB,UAAU,KAAK;CACjB;CACA,MAAM,qBAAqB,UAA2C;EACpE,IAAI,eACF,aAAa,IAAI;EAEnB,gBAAgB,KAAK;CACvB;CACA,MAAM,mBAAmB,UAA2C;EAClE,aAAa,KAAK;EAClB,cAAc,KAAK;CACrB;CACA,MAAM,uBAAuB,UAA2C;EACtE,aAAa,KAAK;EAClB,kBAAkB,KAAK;CACzB;CACA,MAAM,sBAAsB,UAA2C;EACrE,aAAa,KAAK;EAClB,iBAAiB,KAAK;CACxB;CACA,OAAO,oBAAC,eAAD;EAAe,OAAO;EACzB,UAAA,oBAAC,OAAO,MAAR;GAAa,cAAA;GAAa,SAAS;GAA2B;GAA0B;GAAc;GAAc;GAAgB;GAAgB;GAAoB;GAAU,QAAQ,oBAAC,UAAD;IAAQ,GAAI;IAAM,GAAI,WAAW;KAAC;KAAc,UAAU;KAAM,OAAO;KAAM,eAAe;IAAK,GAAGA,OAAK,eAAe,SAAS,GAAG,KAAK;IAAG,SAAS;IAAa,WAAW;IAAe,SAAS;IAAa,iBAAiB;IAAqB,eAAe;IAAmB,gBAAgB;IAAoB,aAAa;GAAkB,CAAA;GAAG,iBAAiB;GACxiB;EACU,CAAA;CACA,CAAA;AACnB;AACA,WAAW,cAAc;AACzB,MAAa,eAAe,EAC1B,WACA,OAAO,WACP,OACA,UACA,GAAG,WACmB;CACtB,MAAM,EACJ,WACA,cACE,iBAAiB;CACrB,MAAM,MAAM,OAAwB,IAAI;CACxC,MAAM,UAAU,cAAc;CAC9B,MAAM,UAAU,YAAY,YAAY,QAAQ,kBAAkB,QAAQ,WAAW;CACrF,MAAM,cAAc,YAAY,QAAQ,eAAe,QAAQ;CAC/D,MAAM,CAAC,UAAU,gBAAgB;EAC/B,OAAO,YAAY,WAAW;EAC9B,GAAG,YAAY,OAAO;CACxB,EAAE;CAGF,MAAM,CAAC,gBAAgB,gBAA+B;EACpD,cAAc,GAAG,QAAQ;EACzB,SAAS;CACX,EAAmB;CACnB,gBAAgB;EACd,MAAM,KAAK,IAAI;EACf,IAAI,CAAC,IAAI;EACT,MAAM,eAAe,OAAO,EAAE,GAAG,WAAU,MAAK;GAC9C,GAAG,MAAM,YAAY,cAAc,GAAG,EAAE,GAAG;EAC7C,CAAC;EACD,MAAM,mBAAmB,OAAO,MAAM,GAAG,WAAU,UAAS;GAC1D,GAAG,MAAM,YAAY,SAAS,GAAG,MAAM,GAAG;EAC5C,CAAC;EACD,aAAa;GACX,aAAa;GACb,iBAAiB;EACnB;CACF,GAAG,CAAC,MAAM,CAAC;CACX,gBAAgB;EAEd,MAAM,aADe,OAAO,aAAa,kCAAkC,CAAC,CAAC,WAAW,QACtD,EAChC,UAAU,EACZ,IAAI;EACJ,MAAM,aAAa,CAAC,QAAQ,OAAO,GAAG,SAAS,UAAU,GAAG,QAAQ,OAAO,OAAO,aAAa,UAAU,CAAC;EAC1G,aAAa;GACX,KAAK,MAAM,aAAa,YAAY,UAAU,KAAK;EACrD;CACF,GAAG;EAAC;EAAQ;EAAS;CAAW,CAAC;CACjC,OAAO,oBAAC,OAAO,OAAR,EAAc,QAAQ,oBAAC,QAAD;EAAM,GAAI;EAAW;EAAK,GAAI,WAAW,CAAC,OAAO,OAAO,gBAAgB,KAAK,GAAG,WAAW;GACtH,GAAG;GACH,GAAG;EACL,CAAC;EACQ;CACG,CAAA,EAAI,CAAA;AAClB;AACA,YAAY,cAAc;AAC1B,MAAM,qBAAsE;CAC1E,MAAM,OAAO;CACb,OAAO,OAAO;CACd,OAAO,OAAO;AAChB;AACA,MAAa,cAAc,EACzB,UACA,WACA,UACA,MAAM,OACN,OACA,GAAG,WACkB;CACrB,OAAO,oBAAC,QAAD;EAAM,GAAI,WAAW,CAAC,OAAO,MAAM,mBAAmB,SAAS,GAAG,WAAW,KAAK;EAAG,GAAI;EAC3F;CACG,CAAA;AACV;AACA,WAAW,cAAc;AACzB,MAAM,mBAAmB,OAAO,YAAY,OAAO,QAAQ,MAAM,CAAC,CAAC,KAAK,CAAC,KAAK,WAAW,CAAC,KAAK,OAAO,MAAM,KAAK,CAAC,CAAC,aAAa,EAAE,CAAC,CAAC;AACpI,MAAa,eAAe;CAC1B,GAAG;CACH,eAAe,iBAAiB;CAChC,gBAAgB,iBAAiB;AACnC"}
+{"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":";;;;;;;;;;;;;AAeA,MAAM,gBAKD;CACH,SAAS;EACP,UAAU;EACV,iBAAiB;EACjB,cAAc;EACd,OAAO;CACT;CACA,OAAO;EACL,UAAU;EACV,iBAAiB;EACjB,cAAc;EACd,OAAO;CACT;AACF;AACA,MAAM,iBAAiB;CACrB,SAAS,OAAO;CAChB,OAAO,OAAO;AAChB;AACA,MAAM,kBAAkB;CACtB,SAAS,OAAO;CAChB,OAAO,OAAO;AAChB;AACA,MAAM,eAAe;CACnB,SAAS;CACT,WAAW;CACX,MAAM;AACR;AACA,MAAM,gBAAgB,cAAwC,IAAI;AAClE,MAAa,yBAAyB;CACpC,MAAM,UAAU,IAAI,aAAa;CACjC,IAAI,CAAC,SACH,MAAM,IAAI,MAAM,mDAAmD;CAErE,OAAO;AACT;AAMA,MAAa,cAAc,EACzB,SACA,WACA,gBACA,iBACA,SACA,WACA,SACA,iBACA,eACA,gBACA,aACA,OAAO,WACP,UACA,UACA,UACA,UACA,UACA,IACA,MACA,OACA,QACA,GAAG,WAC0B;CAC7B,MAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;CAChD,MAAM,eAAe,OAAyE,IAAI;CAClG,MAAM,CAAC,WAAW,gBAAgB,mBAAmB,kBAAkB,OAAO;EAC5E,cAAc;EACd,WAAW,UAAmB;GAC5B,IAAI,aAAa,SACf,kBAAkB,OAAO,aAAa,OAAO;EAEjD;EACA,OAAO;CACT,CAAC;CACD,MAAM,eAAe,eAAe;EAClC,WAAW,QAAQ,SAAS;EAC5B;EACA,eAAe,UAAmB,aAAa,KAAK;EACpD;CACF,IAAI;EAAC;EAAW;EAAW;CAAY,CAAC;CACxC,MAAM,eAAe,UAAyC;EAC5D,aAAa,UAAU;EACvB,UAAU,CAAC,WAAW,KAAK;CAC7B;CACA,MAAM,gBAAgB,CAAC,YAAY,CAAC;CACpC,MAAM,iBAAiB,UAA4C;EACjE,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KACzC,aAAa,UAAU;EAEzB,IAAI,MAAM,QAAQ,OAAO,eACvB,aAAa,IAAI;EAEnB,YAAY,KAAK;CACnB;CACA,MAAM,eAAe,UAA4C;EAC/D,IAAI,MAAM,QAAQ,KAChB,aAAa,KAAK;EAEpB,UAAU,KAAK;CACjB;CACA,MAAM,qBAAqB,UAA2C;EACpE,IAAI,eACF,aAAa,IAAI;EAEnB,gBAAgB,KAAK;CACvB;CACA,MAAM,mBAAmB,UAA2C;EAClE,aAAa,KAAK;EAClB,cAAc,KAAK;CACrB;CACA,MAAM,uBAAuB,UAA2C;EACtE,aAAa,KAAK;EAClB,kBAAkB,KAAK;CACzB;CACA,MAAM,sBAAsB,UAA2C;EACrE,aAAa,KAAK;EAClB,iBAAiB,KAAK;CACxB;CACA,OAAO,oBAAC,eAAD;EAAe,OAAO;EACzB,UAAA,oBAAC,OAAO,MAAR;GAAa,cAAA;GAAa,SAAS;GAA2B;GAA0B;GAAc;GAAc;GAAgB;GAAgB;GAAoB;GAAU,QAAQ,oBAAC,UAAD;IAAQ,GAAI;IAAM,GAAI,WAAW;KAAC;KAAc,UAAU;KAAM,OAAO;KAAM,eAAe;KAAO;IAAM,GAAGA,OAAK,eAAe,SAAS,GAAG,KAAK;IAAG,SAAS;IAAa,WAAW;IAAe,SAAS;IAAa,iBAAiB;IAAqB,eAAe;IAAmB,gBAAgB;IAAoB,aAAa;GAAkB,CAAA;GAAG,iBAAiB;GAChjB;EACU,CAAA;CACA,CAAA;AACnB;AACA,WAAW,cAAc;AACzB,MAAa,eAAe,EAC1B,WACA,OAAO,WACP,OACA,UACA,GAAG,WACmB;CACtB,MAAM,EACJ,WACA,cACE,iBAAiB;CACrB,MAAM,MAAM,OAAwB,IAAI;CACxC,MAAM,UAAU,cAAc;CAE9B,MAAM,CAAC,QAAQ,aAAa,SAAS,QAAQ,QAAQ;CACrD,sBAAsB;EACpB,MAAM,OAAO,IAAI,SAAS;EAC1B,IAAI,CAAC,MAAM;EACX,MAAM,gBAAgB;GACpB,MAAM,QAAQ,KAAK;GAEnB,UAAU,QAAQ,IAAI,KAAK,IAAI,QAAQ,UAAU,QAAQ,IAAI,QAAQ,KAAK,IAAI,QAAQ,QAAQ;EAChG;EACA,QAAQ;EACR,IAAI,OAAO,mBAAmB,aAAa;EAC3C,MAAM,WAAW,IAAI,eAAe,OAAO;EAC3C,SAAS,QAAQ,IAAI;EACrB,aAAa,SAAS,WAAW;CACnC,GAAG,CAAC,OAAO,CAAC;CACZ,MAAM,QAAQ,SAAS,QAAQ;CAC/B,MAAM,UAAU,aAAa,YAAY,QAAQ,kBAAkB,QAAQ,YAAY,QAAQ;CAC/F,MAAM,cAAc,YAAY,QAAQ,eAAe,QAAQ;CAC/D,MAAM,CAAC,UAAU,gBAAgB;EAC/B,OAAO,YAAY,WAAW;EAC9B,GAAG,YAAY,OAAO;CACxB,EAAE;CAGF,MAAM,CAAC,gBAAgB,gBAA+B;EACpD,cAAc,GAAG,QAAQ;EACzB,SAAS;CACX,EAAmB;CACnB,gBAAgB;EACd,MAAM,KAAK,IAAI;EACf,IAAI,CAAC,IAAI;EACT,MAAM,eAAe,OAAO,EAAE,GAAG,WAAU,MAAK;GAC9C,GAAG,MAAM,YAAY,cAAc,GAAG,EAAE,GAAG;EAC7C,CAAC;EACD,MAAM,mBAAmB,OAAO,MAAM,GAAG,WAAU,UAAS;GAC1D,GAAG,MAAM,YAAY,SAAS,GAAG,MAAM,GAAG;EAC5C,CAAC;EACD,aAAa;GACX,aAAa;GACb,iBAAiB;EACnB;CACF,GAAG,CAAC,MAAM,CAAC;CACX,gBAAgB;EAEd,MAAM,aADe,OAAO,aAAa,kCAAkC,CAAC,CAAC,WAAW,QACtD,EAChC,UAAU,EACZ,IAAI;EACJ,MAAM,aAAa,CAAC,QAAQ,OAAO,GAAG,SAAS,UAAU,GAAG,QAAQ,OAAO,OAAO,aAAa,UAAU,CAAC;EAC1G,aAAa;GACX,KAAK,MAAM,aAAa,YAAY,UAAU,KAAK;EACrD;CACF,GAAG;EAAC;EAAQ;EAAS;CAAW,CAAC;CACjC,OAAO,oBAAC,OAAO,OAAR,EAAc,QAAQ,oBAAC,QAAD;EAAM,GAAI;EAAW;EAAK,GAAI,WAAW,CAAC,OAAO,OAAO,gBAAgB,KAAK,GAAG,WAAW;GACtH,GAAG;GACH,GAAG;EACL,CAAC;EACQ;CACG,CAAA,EAAI,CAAA;AAClB;AACA,YAAY,cAAc;AAC1B,MAAM,qBAAsE;CAC1E,MAAM,OAAO;CACb,OAAO,OAAO;CACd,OAAO,OAAO;AAChB;AACA,MAAa,cAAc,EACzB,UACA,WACA,UACA,MAAM,OACN,OACA,GAAG,WACkB;CACrB,OAAO,oBAAC,QAAD;EAAM,GAAI,WAAW,CAAC,OAAO,MAAM,mBAAmB,SAAS,GAAG,WAAW,KAAK;EAAG,GAAI;EAC3F;CACG,CAAA;AACV;AACA,WAAW,cAAc;AACzB,MAAM,mBAAmB,OAAO,YAAY,OAAO,QAAQ,MAAM,CAAC,CAAC,KAAK,CAAC,KAAK,WAAW,CAAC,KAAK,OAAO,MAAM,KAAK,CAAC,CAAC,aAAa,EAAE,CAAC,CAAC;AACpI,MAAa,eAAe;CAC1B,GAAG;CACH,eAAe,iBAAiB;CAChC,gBAAgB,iBAAiB;AACnC"}

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 })
 								]