@lobehub/ui 6.0.0-beta.9 → 6.0.1

package/es/Segmented/Segmented.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Segmented.mjs","names":["clsx"],"sources":["../../src/Segmented/Segmented.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport {\n  type CSSProperties,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n} from 'react';\n\nimport { useControlledState } from '@/hooks/useControlledState';\n\nimport {\n  SegmentedIndicator,\n  SegmentedItem,\n  SegmentedItemIcon,\n  SegmentedItemLabel,\n  SegmentedRoot,\n} from './atoms';\nimport type { SegmentedOption, SegmentedProps } from './type';\n\nconst normalizeOption = <Value extends string>(\n  option: SegmentedOption<Value> | Value,\n): SegmentedOption<Value> =>\n  typeof option === 'string' ? { label: option, value: option } : option;\n\nconst Segmented = <Value extends string = string>({\n  block = false,\n  className,\n  classNames,\n  defaultValue,\n  disabled = false,\n  glass = false,\n  id,\n  name,\n  onChange,\n  options,\n  ref,\n  shadow = false,\n  size = 'middle',\n  style,\n  styles: customStyles,\n  value,\n  variant = 'filled',\n  vertical = false,\n}: SegmentedProps<Value>) => {\n  const [innerValue, setInnerValue] = useControlledState<Value | undefined>(defaultValue, {\n    defaultValue,\n    onChange: (next) => {\n      if (next != null) onChange?.(next);\n    },\n    value,\n  });\n\n  const listRef = useRef<HTMLDivElement | null>(null);\n\n  const mergedRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      listRef.current = node;\n      if (typeof ref === 'function') ref(node);\n      else if (ref) (ref as React.RefObject<HTMLDivElement | null>).current = node;\n    },\n    [ref],\n  );\n\n  const normalizedOptions = useMemo(\n    () => (options ?? []).map((o) => normalizeOption<Value>(o)),\n    [options],\n  );\n\n  const updateIndicator = useCallback(() => {\n    const list = listRef.current;\n    if (!list) return;\n    const active = list.querySelector<HTMLElement>('[data-segmented-item][data-pressed]');\n    if (!active) {\n      list.style.setProperty('--active-item-left', '0px');\n      list.style.setProperty('--active-item-top', '0px');\n      list.style.setProperty('--active-item-right', '0px');\n      list.style.setProperty('--active-item-width', '0px');\n      list.style.setProperty('--active-item-height', '0px');\n      return;\n    }\n    list.style.setProperty('--active-item-left', `${active.offsetLeft}px`);\n    list.style.setProperty('--active-item-top', `${active.offsetTop}px`);\n    list.style.setProperty(\n      '--active-item-right',\n      `${list.clientWidth - active.offsetLeft - active.offsetWidth}px`,\n    );\n    list.style.setProperty('--active-item-width', `${active.offsetWidth}px`);\n    list.style.setProperty('--active-item-height', `${active.offsetHeight}px`);\n  }, []);\n\n  useLayoutEffect(() => {\n    updateIndicator();\n  }, [innerValue, normalizedOptions, vertical, size, block, updateIndicator]);\n\n  useEffect(() => {\n    const list = listRef.current;\n    if (!list || typeof ResizeObserver === 'undefined') return;\n    const ro = new ResizeObserver(() => updateIndicator());\n    ro.observe(list);\n    return () => ro.disconnect();\n  }, [updateIndicator]);\n\n  const groupValue = useMemo<Value[]>(() => (innerValue != null ? [innerValue] : []), [innerValue]);\n\n  const rootStyle: CSSProperties = { ...style, ...customStyles?.root };\n\n  return (\n    <SegmentedRoot<Value>\n      block={block}\n      className={clsx(classNames?.root, className)}\n      disabled={disabled}\n      glass={glass}\n      id={id}\n      orientation={vertical ? 'vertical' : 'horizontal'}\n      ref={mergedRef}\n      shadow={shadow}\n      style={rootStyle}\n      value={groupValue}\n      variant={variant}\n      onValueChange={(next) => {\n        const picked = next[0];\n        if (picked != null) setInnerValue(picked);\n      }}\n    >\n      <SegmentedIndicator className={classNames?.indicator} style={customStyles?.indicator} />\n      {normalizedOptions.map((opt) => (\n        <SegmentedItem<Value>\n          aria-label={typeof opt.label === 'string' ? opt.label : undefined}\n          block={block}\n          className={clsx(classNames?.item, opt.className)}\n          data-segmented-item=\"\"\n          disabled={disabled || opt.disabled}\n          key={opt.value}\n          name={name}\n          size={size}\n          style={customStyles?.item}\n          title={opt.title}\n          value={opt.value}\n        >\n          {opt.icon != null && (\n            <SegmentedItemIcon className={classNames?.itemIcon} style={customStyles?.itemIcon}>\n              {opt.icon}\n            </SegmentedItemIcon>\n          )}\n          {opt.label != null && (\n            <SegmentedItemLabel className={classNames?.itemLabel} style={customStyles?.itemLabel}>\n              {opt.label}\n            </SegmentedItemLabel>\n          )}\n        </SegmentedItem>\n      ))}\n    </SegmentedRoot>\n  );\n};\n\nSegmented.displayName = 'Segmented';\n\nexport default Segmented;\n"],"mappings":"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"}
+{"version":3,"file":"Segmented.mjs","names":["clsx"],"sources":["../../src/Segmented/Segmented.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport {\n  type CSSProperties,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n} from 'react';\n\nimport { useControlledState } from '@/hooks/useControlledState';\n\nimport {\n  SegmentedIndicator,\n  SegmentedItem,\n  SegmentedItemIcon,\n  SegmentedItemLabel,\n  SegmentedRoot,\n} from './atoms';\nimport type { SegmentedOption, SegmentedProps } from './type';\n\nconst normalizeOption = <Value extends string>(\n  option: SegmentedOption<Value> | Value,\n): SegmentedOption<Value> =>\n  typeof option === 'string' ? { label: option, value: option } : option;\n\nconst Segmented = <Value extends string = string>({\n  block = false,\n  className,\n  classNames,\n  defaultValue,\n  disabled = false,\n  glass = false,\n  id,\n  name,\n  onChange,\n  options,\n  ref,\n  shadow = false,\n  size = 'middle',\n  style,\n  styles: customStyles,\n  value,\n  variant = 'filled',\n  vertical = false,\n}: SegmentedProps<Value>) => {\n  const [innerValue, setInnerValue] = useControlledState<Value | undefined>(defaultValue, {\n    defaultValue,\n    onChange: (next) => {\n      if (next != null) onChange?.(next);\n    },\n    value,\n  });\n\n  const listRef = useRef<HTMLDivElement | null>(null);\n\n  const mergedRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      listRef.current = node;\n      if (typeof ref === 'function') ref(node);\n      else if (ref) (ref as React.RefObject<HTMLDivElement | null>).current = node;\n    },\n    [ref],\n  );\n\n  const normalizedOptions = useMemo(\n    () => (options ?? []).map((o) => normalizeOption<Value>(o)),\n    [options],\n  );\n\n  const updateIndicator = useCallback(() => {\n    const list = listRef.current;\n    if (!list) return;\n    const active = list.querySelector<HTMLElement>('[data-segmented-item][data-pressed]');\n    if (!active) {\n      list.style.setProperty('--active-item-left', '0px');\n      list.style.setProperty('--active-item-top', '0px');\n      list.style.setProperty('--active-item-right', '0px');\n      list.style.setProperty('--active-item-width', '0px');\n      list.style.setProperty('--active-item-height', '0px');\n      return;\n    }\n    list.style.setProperty('--active-item-left', `${active.offsetLeft}px`);\n    list.style.setProperty('--active-item-top', `${active.offsetTop}px`);\n    list.style.setProperty(\n      '--active-item-right',\n      `${list.clientWidth - active.offsetLeft - active.offsetWidth}px`,\n    );\n    list.style.setProperty('--active-item-width', `${active.offsetWidth}px`);\n    list.style.setProperty('--active-item-height', `${active.offsetHeight}px`);\n  }, []);\n\n  useLayoutEffect(() => {\n    updateIndicator();\n  }, [innerValue, normalizedOptions, vertical, size, block, updateIndicator]);\n\n  useEffect(() => {\n    const list = listRef.current;\n    if (!list || typeof ResizeObserver === 'undefined') return;\n    const ro = new ResizeObserver(() => updateIndicator());\n    ro.observe(list);\n    return () => ro.disconnect();\n  }, [updateIndicator]);\n\n  const groupValue = useMemo<Value[]>(() => (innerValue != null ? [innerValue] : []), [innerValue]);\n\n  // `list` is the same element as `root` (the toggle group holds the items directly).\n  const rootStyle: CSSProperties = { ...style, ...customStyles?.list, ...customStyles?.root };\n\n  return (\n    <SegmentedRoot<Value>\n      block={block}\n      className={clsx(classNames?.root, classNames?.list, className)}\n      disabled={disabled}\n      glass={glass}\n      id={id}\n      orientation={vertical ? 'vertical' : 'horizontal'}\n      ref={mergedRef}\n      shadow={shadow}\n      style={rootStyle}\n      value={groupValue}\n      variant={variant}\n      onValueChange={(next) => {\n        const picked = next[0];\n        if (picked != null) setInnerValue(picked);\n      }}\n    >\n      <SegmentedIndicator className={classNames?.indicator} style={customStyles?.indicator} />\n      {normalizedOptions.map((opt) => (\n        <SegmentedItem<Value>\n          aria-label={typeof opt.label === 'string' ? opt.label : undefined}\n          block={block}\n          className={clsx(classNames?.item, opt.className)}\n          data-segmented-item=\"\"\n          disabled={disabled || opt.disabled}\n          key={opt.value}\n          name={name}\n          size={size}\n          style={customStyles?.item}\n          title={opt.title}\n          value={opt.value}\n        >\n          {opt.icon != null && (\n            <SegmentedItemIcon className={classNames?.itemIcon} style={customStyles?.itemIcon}>\n              {opt.icon}\n            </SegmentedItemIcon>\n          )}\n          {opt.label != null && (\n            <SegmentedItemLabel className={classNames?.itemLabel} style={customStyles?.itemLabel}>\n              {opt.label}\n            </SegmentedItemLabel>\n          )}\n        </SegmentedItem>\n      ))}\n    </SegmentedRoot>\n  );\n};\n\nSegmented.displayName = 'Segmented';\n\nexport default Segmented;\n"],"mappings":"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"}

package/es/Segmented/type.d.mts

@@ -13,14 +13,19 @@ export interface SegmentedOption<Value extends string = string> {
   value: Value;
 }
 export type SegmentedOptions<Value extends string = string> = Array<SegmentedOption<Value> | Value>;
+/** Semantic DOM class names. */
 export interface SegmentedClassNames {
+  /** Sliding active-item background. */
   indicator?: string;
+  /** Each option button (set `height` / `padding` here for a compact control). */
   item?: string;
   itemIcon?: string;
   itemLabel?: string;
+  /** Alias of `root`: the toggle group that holds the items. */
   list?: string;
   root?: string;
 }
+/** Semantic DOM inline styles, same parts as `SegmentedClassNames`. */
 export interface SegmentedStyles {
   indicator?: CSSProperties;
   item?: CSSProperties;
@@ -32,6 +37,7 @@ export interface SegmentedStyles {
 export interface SegmentedProps<Value extends string = string> {
   block?: boolean;
   className?: string;
+  /** Semantic DOM class names: `root` / `indicator` / `item` / `itemIcon` / `itemLabel`. */
   classNames?: SegmentedClassNames;
   defaultValue?: Value;
   disabled?: boolean;
@@ -44,6 +50,7 @@ export interface SegmentedProps<Value extends string = string> {
   shadow?: boolean;
   size?: SegmentedSize;
   style?: CSSProperties;
+  /** Semantic DOM inline styles, same parts as `classNames`. */
   styles?: SegmentedStyles;
   value?: Value;
   variant?: SegmentedVariant;

package/es/Select/atoms.mjs

@@ -2,6 +2,7 @@
 import { useAppElement } from "../ConfigProvider/AppElementContext.mjs";
 import { styleProps } from "../styles/stylex/props.mjs";
 import { useNativeButton } from "../hooks/useNativeButton.mjs";
+import { getElementRef } from "../utils/getElementRef.mjs";
 import { mergeRefs, useMergeRefs } from "../utils/mergeRefs.mjs";
 import { getFloatingCollisionPadding } from "../internal/floating/collisionPadding.mjs";
 import { useThemeMode } from "../styles/theme/scope.mjs";
@@ -51,7 +52,7 @@ const SelectTrigger = ({ children, className, nativeButton, shadow, size = "midd
 				...mergedProps,
 				className: clsx$1(baseClassName, childClassName, extraClassName),
 				ref: mergeRefs([
-					children.ref,
+					getElementRef(children),
 					props.ref,
 					refProp
 				])

package/es/Select/atoms.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"atoms.mjs","names":["clsx"],"sources":["../../src/Select/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { Select } from '@base-ui/react/select';\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport {\n  cloneElement,\n  type ComponentProps,\n  type ComponentPropsWithRef,\n  isValidElement,\n} from 'react';\n\nimport { useAppElement } from '@/ConfigProvider/AppElementContext';\nimport { menuClassNames, menuStyles } from '@/DropdownMenu/sharedStyle';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { getFloatingCollisionPadding } from '@/internal/floating';\nimport { styleProps } from '@/styles/stylex/props';\nimport { useThemeMode } from '@/styles/theme/scope';\nimport { mergeRefs, useMergeRefs } from '@/utils/mergeRefs';\n\nimport { useLayerZIndex } from '../internal/zIndex';\nimport { styles, triggerStyles } from './style';\nimport { type SelectSize, type SelectVariant } from './type';\n\nconst mergeStateClassName = <TState,>(\n  base: Parameters<typeof styleProps>[0],\n  className: string | ((state: TState) => string | undefined) | undefined,\n  extra?: string,\n) => {\n  const baseClassName = styleProps(base, extra).className;\n  if (typeof className === 'function')\n    return (state: TState) => clsx(baseClassName, className(state));\n  return clsx(baseClassName, className);\n};\n\nexport const SelectRoot = Select.Root;\nexport const SelectBackdrop = Select.Backdrop;\nexport const SelectSeparator = Select.Separator;\n\nexport type SelectTriggerProps = Omit<\n  ComponentPropsWithRef<typeof Select.Trigger>,\n  'children' | 'render'\n> & {\n  children: ComponentProps<typeof Select.Trigger>['children'];\n  shadow?: boolean;\n  size?: SelectSize;\n  variant?: SelectVariant;\n};\n\nexport const SelectTrigger = ({\n  children,\n  className,\n  nativeButton,\n  shadow,\n  size = 'middle',\n  variant,\n  ref: refProp,\n  ...rest\n}: SelectTriggerProps) => {\n  const { isDarkMode } = useThemeMode();\n  const resolvedVariant = variant ?? (isDarkMode ? 'filled' : 'outlined');\n  const triggerStyle = triggerStyles({ shadow, size, variant: resolvedVariant });\n  const baseClassName = stylex.props(triggerStyle).className;\n\n  const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n    children,\n    nativeButton,\n  });\n\n  if (isValidElement(children)) {\n    return (\n      <Select.Trigger\n        {...rest}\n        nativeButton={resolvedNativeButton}\n        render={(props, state) => {\n          // Base UI's trigger props include `type=\"button\"` by default.\n          // If we render into a non-<button> element, that prop is invalid and can warn.\n          const resolvedProps = (() => {\n            if (isNativeButtonTriggerElement) return props as any;\n            // eslint-disable-next-line unused-imports/no-unused-vars\n            const { type, ref: triggerRef, ...restProps } = props as any;\n            return restProps;\n          })();\n\n          const mergedProps = mergeProps((children as any).props, resolvedProps);\n          const childClassName =\n            typeof (mergedProps as any).className === 'function'\n              ? (mergedProps as any).className(state)\n              : (mergedProps as any).className;\n          const extraClassName = typeof className === 'function' ? className(state) : className;\n\n          return cloneElement(children as any, {\n            ...mergedProps,\n            className: clsx(baseClassName, childClassName, extraClassName),\n            ref: mergeRefs([(children as any).ref, (props as any).ref, refProp]),\n          });\n        }}\n      />\n    );\n  }\n\n  return (\n    <Select.Trigger\n      {...rest}\n      className={mergeStateClassName([triggerStyle], className) as any}\n      nativeButton={resolvedNativeButton}\n      ref={refProp as any}\n    >\n      {children}\n    </Select.Trigger>\n  );\n};\n\nSelectTrigger.displayName = 'SelectTrigger';\n\nexport type SelectIconProps = ComponentProps<typeof Select.Icon>;\n\nexport const SelectIcon = ({ className, ...rest }: SelectIconProps) => {\n  return <Select.Icon className={mergeStateClassName([styles.icon], className) as any} {...rest} />;\n};\n\nSelectIcon.displayName = 'SelectIcon';\n\nexport type SelectValueProps = ComponentProps<typeof Select.Value>;\n\nexport const SelectValue = ({ className, ...rest }: SelectValueProps) => {\n  return (\n    <Select.Value className={mergeStateClassName([styles.value], className) as any} {...rest} />\n  );\n};\n\nSelectValue.displayName = 'SelectValue';\n\nexport type SelectPortalProps = ComponentProps<typeof Select.Portal> & {\n  /**\n   * When `container` is not provided, it uses a shared container created by `usePortalContainer`.\n   */\n  container?: HTMLElement | null;\n};\n\nexport const SelectPortal = ({ container, ...rest }: SelectPortalProps) => {\n  const appElement = useAppElement();\n  return <Select.Portal container={container ?? appElement ?? undefined} {...rest} />;\n};\n\nSelectPortal.displayName = 'SelectPortal';\n\nexport type SelectPositionerProps = ComponentProps<typeof Select.Positioner>;\n\nexport const SelectPositioner = ({\n  align,\n  alignItemWithTrigger,\n  className,\n  collisionPadding,\n  side,\n  sideOffset,\n  style,\n  ref: forwardedRef,\n  ...rest\n}: SelectPositionerProps) => {\n  const explicitZIndex =\n    typeof style !== 'function' && style?.zIndex != null && typeof style.zIndex === 'number'\n      ? style.zIndex\n      : undefined;\n  const { zIndex, ref: zRef } = useLayerZIndex<HTMLDivElement>('floating', explicitZIndex);\n  const composedRef = useMergeRefs([forwardedRef, zRef]);\n\n  const resolvedStyle =\n    typeof style === 'function'\n      ? (state: any) => ({ zIndex, ...style(state) })\n      : { zIndex, ...style };\n\n  return (\n    <Select.Positioner\n      align={align ?? 'start'}\n      alignItemWithTrigger={alignItemWithTrigger ?? false}\n      className={mergeStateClassName([styles.positioner], className) as any}\n      collisionPadding={collisionPadding ?? getFloatingCollisionPadding()}\n      ref={composedRef as any}\n      side={side ?? 'bottom'}\n      sideOffset={sideOffset ?? 6}\n      style={resolvedStyle}\n      {...rest}\n    />\n  );\n};\n\nSelectPositioner.displayName = 'SelectPositioner';\n\nexport type SelectPopupProps = ComponentProps<typeof Select.Popup>;\n\nexport const SelectPopup = ({ className, ...rest }: SelectPopupProps) => {\n  return (\n    <Select.Popup\n      className={\n        mergeStateClassName(\n          [menuStyles.popup, styles.popup],\n          className,\n          menuClassNames.popup,\n        ) as any\n      }\n      {...rest}\n    />\n  );\n};\n\nSelectPopup.displayName = 'SelectPopup';\n\nexport type SelectListProps = ComponentProps<typeof Select.List>;\n\nexport const SelectList = ({ className, ...rest }: SelectListProps) => {\n  return <Select.List className={mergeStateClassName([styles.list], className) as any} {...rest} />;\n};\n\nSelectList.displayName = 'SelectList';\n\nexport type SelectItemProps = ComponentProps<typeof Select.Item>;\n\nexport const SelectItem = ({ className, ...rest }: SelectItemProps) => {\n  return (\n    <Select.Item className={mergeStateClassName([menuStyles.item], className) as any} {...rest} />\n  );\n};\n\nSelectItem.displayName = 'SelectItem';\n\nexport type SelectItemTextProps = ComponentProps<typeof Select.ItemText>;\n\nexport const SelectItemText = ({ className, ...rest }: SelectItemTextProps) => {\n  return (\n    <Select.ItemText\n      className={mergeStateClassName([menuStyles.label], className, menuClassNames.label) as any}\n      {...rest}\n    />\n  );\n};\n\nSelectItemText.displayName = 'SelectItemText';\n\nexport type SelectItemIndicatorProps = ComponentProps<typeof Select.ItemIndicator>;\n\nexport const SelectItemIndicator = ({ className, ...rest }: SelectItemIndicatorProps) => {\n  return (\n    <Select.ItemIndicator\n      className={mergeStateClassName([styles.itemIndicator], className) as any}\n      {...rest}\n    />\n  );\n};\n\nSelectItemIndicator.displayName = 'SelectItemIndicator';\n\nexport type SelectGroupProps = ComponentProps<typeof Select.Group>;\n\nexport const SelectGroup = ({ className, ...rest }: SelectGroupProps) => {\n  return <Select.Group className={className} {...rest} />;\n};\n\nSelectGroup.displayName = 'SelectGroup';\n\nexport type SelectGroupLabelProps = ComponentProps<typeof Select.GroupLabel>;\n\nexport const SelectGroupLabel = ({ className, ...rest }: SelectGroupLabelProps) => {\n  return (\n    <Select.GroupLabel\n      className={mergeStateClassName([menuStyles.groupLabel], className) as any}\n      {...rest}\n    />\n  );\n};\n\nSelectGroupLabel.displayName = 'SelectGroupLabel';\n\nexport type SelectScrollUpArrowProps = ComponentProps<typeof Select.ScrollUpArrow>;\n\nexport const SelectScrollUpArrow = ({ className, ...rest }: SelectScrollUpArrowProps) => {\n  return (\n    <Select.ScrollUpArrow\n      className={mergeStateClassName([styles.scrollArrow], className) as any}\n      {...rest}\n    />\n  );\n};\n\nSelectScrollUpArrow.displayName = 'SelectScrollUpArrow';\n\nexport type SelectScrollDownArrowProps = ComponentProps<typeof Select.ScrollDownArrow>;\n\nexport const SelectScrollDownArrow = ({ className, ...rest }: SelectScrollDownArrowProps) => {\n  return (\n    <Select.ScrollDownArrow\n      className={mergeStateClassName([styles.scrollArrow], className) as any}\n      {...rest}\n    />\n  );\n};\n\nSelectScrollDownArrow.displayName = 'SelectScrollDownArrow';\n\nexport type SelectArrowProps = ComponentProps<typeof Select.Arrow>;\n\nexport const SelectArrow = ({ className, ...rest }: SelectArrowProps) => {\n  return (\n    <Select.Arrow\n      className={mergeStateClassName([styles.arrow], className, 'lobe-select-arrow') as any}\n      {...rest}\n    />\n  );\n};\n\nSelectArrow.displayName = 'SelectArrow';\n"],"mappings":"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"}
+{"version":3,"file":"atoms.mjs","names":["clsx"],"sources":["../../src/Select/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { Select } from '@base-ui/react/select';\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport {\n  cloneElement,\n  type ComponentProps,\n  type ComponentPropsWithRef,\n  isValidElement,\n} from 'react';\n\nimport { useAppElement } from '@/ConfigProvider/AppElementContext';\nimport { menuClassNames, menuStyles } from '@/DropdownMenu/sharedStyle';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { getFloatingCollisionPadding } from '@/internal/floating';\nimport { styleProps } from '@/styles/stylex/props';\nimport { useThemeMode } from '@/styles/theme/scope';\nimport { getElementRef } from '@/utils/getElementRef';\nimport { mergeRefs, useMergeRefs } from '@/utils/mergeRefs';\n\nimport { useLayerZIndex } from '../internal/zIndex';\nimport { styles, triggerStyles } from './style';\nimport { type SelectSize, type SelectVariant } from './type';\n\nconst mergeStateClassName = <TState,>(\n  base: Parameters<typeof styleProps>[0],\n  className: string | ((state: TState) => string | undefined) | undefined,\n  extra?: string,\n) => {\n  const baseClassName = styleProps(base, extra).className;\n  if (typeof className === 'function')\n    return (state: TState) => clsx(baseClassName, className(state));\n  return clsx(baseClassName, className);\n};\n\nexport const SelectRoot = Select.Root;\nexport const SelectBackdrop = Select.Backdrop;\nexport const SelectSeparator = Select.Separator;\n\nexport type SelectTriggerProps = Omit<\n  ComponentPropsWithRef<typeof Select.Trigger>,\n  'children' | 'render'\n> & {\n  children: ComponentProps<typeof Select.Trigger>['children'];\n  shadow?: boolean;\n  size?: SelectSize;\n  variant?: SelectVariant;\n};\n\nexport const SelectTrigger = ({\n  children,\n  className,\n  nativeButton,\n  shadow,\n  size = 'middle',\n  variant,\n  ref: refProp,\n  ...rest\n}: SelectTriggerProps) => {\n  const { isDarkMode } = useThemeMode();\n  const resolvedVariant = variant ?? (isDarkMode ? 'filled' : 'outlined');\n  const triggerStyle = triggerStyles({ shadow, size, variant: resolvedVariant });\n  const baseClassName = stylex.props(triggerStyle).className;\n\n  const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n    children,\n    nativeButton,\n  });\n\n  if (isValidElement(children)) {\n    return (\n      <Select.Trigger\n        {...rest}\n        nativeButton={resolvedNativeButton}\n        render={(props, state) => {\n          // Base UI's trigger props include `type=\"button\"` by default.\n          // If we render into a non-<button> element, that prop is invalid and can warn.\n          const resolvedProps = (() => {\n            if (isNativeButtonTriggerElement) return props as any;\n            // eslint-disable-next-line unused-imports/no-unused-vars\n            const { type, ref: triggerRef, ...restProps } = props as any;\n            return restProps;\n          })();\n\n          const mergedProps = mergeProps((children as any).props, resolvedProps);\n          const childClassName =\n            typeof (mergedProps as any).className === 'function'\n              ? (mergedProps as any).className(state)\n              : (mergedProps as any).className;\n          const extraClassName = typeof className === 'function' ? className(state) : className;\n\n          return cloneElement(children as any, {\n            ...mergedProps,\n            className: clsx(baseClassName, childClassName, extraClassName),\n            ref: mergeRefs([getElementRef(children), (props as any).ref, refProp]),\n          });\n        }}\n      />\n    );\n  }\n\n  return (\n    <Select.Trigger\n      {...rest}\n      className={mergeStateClassName([triggerStyle], className) as any}\n      nativeButton={resolvedNativeButton}\n      ref={refProp as any}\n    >\n      {children}\n    </Select.Trigger>\n  );\n};\n\nSelectTrigger.displayName = 'SelectTrigger';\n\nexport type SelectIconProps = ComponentProps<typeof Select.Icon>;\n\nexport const SelectIcon = ({ className, ...rest }: SelectIconProps) => {\n  return <Select.Icon className={mergeStateClassName([styles.icon], className) as any} {...rest} />;\n};\n\nSelectIcon.displayName = 'SelectIcon';\n\nexport type SelectValueProps = ComponentProps<typeof Select.Value>;\n\nexport const SelectValue = ({ className, ...rest }: SelectValueProps) => {\n  return (\n    <Select.Value className={mergeStateClassName([styles.value], className) as any} {...rest} />\n  );\n};\n\nSelectValue.displayName = 'SelectValue';\n\nexport type SelectPortalProps = ComponentProps<typeof Select.Portal> & {\n  /**\n   * When `container` is not provided, it uses a shared container created by `usePortalContainer`.\n   */\n  container?: HTMLElement | null;\n};\n\nexport const SelectPortal = ({ container, ...rest }: SelectPortalProps) => {\n  const appElement = useAppElement();\n  return <Select.Portal container={container ?? appElement ?? undefined} {...rest} />;\n};\n\nSelectPortal.displayName = 'SelectPortal';\n\nexport type SelectPositionerProps = ComponentProps<typeof Select.Positioner>;\n\nexport const SelectPositioner = ({\n  align,\n  alignItemWithTrigger,\n  className,\n  collisionPadding,\n  side,\n  sideOffset,\n  style,\n  ref: forwardedRef,\n  ...rest\n}: SelectPositionerProps) => {\n  const explicitZIndex =\n    typeof style !== 'function' && style?.zIndex != null && typeof style.zIndex === 'number'\n      ? style.zIndex\n      : undefined;\n  const { zIndex, ref: zRef } = useLayerZIndex<HTMLDivElement>('floating', explicitZIndex);\n  const composedRef = useMergeRefs([forwardedRef, zRef]);\n\n  const resolvedStyle =\n    typeof style === 'function'\n      ? (state: any) => ({ zIndex, ...style(state) })\n      : { zIndex, ...style };\n\n  return (\n    <Select.Positioner\n      align={align ?? 'start'}\n      alignItemWithTrigger={alignItemWithTrigger ?? false}\n      className={mergeStateClassName([styles.positioner], className) as any}\n      collisionPadding={collisionPadding ?? getFloatingCollisionPadding()}\n      ref={composedRef as any}\n      side={side ?? 'bottom'}\n      sideOffset={sideOffset ?? 6}\n      style={resolvedStyle}\n      {...rest}\n    />\n  );\n};\n\nSelectPositioner.displayName = 'SelectPositioner';\n\nexport type SelectPopupProps = ComponentProps<typeof Select.Popup>;\n\nexport const SelectPopup = ({ className, ...rest }: SelectPopupProps) => {\n  return (\n    <Select.Popup\n      className={\n        mergeStateClassName(\n          [menuStyles.popup, styles.popup],\n          className,\n          menuClassNames.popup,\n        ) as any\n      }\n      {...rest}\n    />\n  );\n};\n\nSelectPopup.displayName = 'SelectPopup';\n\nexport type SelectListProps = ComponentProps<typeof Select.List>;\n\nexport const SelectList = ({ className, ...rest }: SelectListProps) => {\n  return <Select.List className={mergeStateClassName([styles.list], className) as any} {...rest} />;\n};\n\nSelectList.displayName = 'SelectList';\n\nexport type SelectItemProps = ComponentProps<typeof Select.Item>;\n\nexport const SelectItem = ({ className, ...rest }: SelectItemProps) => {\n  return (\n    <Select.Item className={mergeStateClassName([menuStyles.item], className) as any} {...rest} />\n  );\n};\n\nSelectItem.displayName = 'SelectItem';\n\nexport type SelectItemTextProps = ComponentProps<typeof Select.ItemText>;\n\nexport const SelectItemText = ({ className, ...rest }: SelectItemTextProps) => {\n  return (\n    <Select.ItemText\n      className={mergeStateClassName([menuStyles.label], className, menuClassNames.label) as any}\n      {...rest}\n    />\n  );\n};\n\nSelectItemText.displayName = 'SelectItemText';\n\nexport type SelectItemIndicatorProps = ComponentProps<typeof Select.ItemIndicator>;\n\nexport const SelectItemIndicator = ({ className, ...rest }: SelectItemIndicatorProps) => {\n  return (\n    <Select.ItemIndicator\n      className={mergeStateClassName([styles.itemIndicator], className) as any}\n      {...rest}\n    />\n  );\n};\n\nSelectItemIndicator.displayName = 'SelectItemIndicator';\n\nexport type SelectGroupProps = ComponentProps<typeof Select.Group>;\n\nexport const SelectGroup = ({ className, ...rest }: SelectGroupProps) => {\n  return <Select.Group className={className} {...rest} />;\n};\n\nSelectGroup.displayName = 'SelectGroup';\n\nexport type SelectGroupLabelProps = ComponentProps<typeof Select.GroupLabel>;\n\nexport const SelectGroupLabel = ({ className, ...rest }: SelectGroupLabelProps) => {\n  return (\n    <Select.GroupLabel\n      className={mergeStateClassName([menuStyles.groupLabel], className) as any}\n      {...rest}\n    />\n  );\n};\n\nSelectGroupLabel.displayName = 'SelectGroupLabel';\n\nexport type SelectScrollUpArrowProps = ComponentProps<typeof Select.ScrollUpArrow>;\n\nexport const SelectScrollUpArrow = ({ className, ...rest }: SelectScrollUpArrowProps) => {\n  return (\n    <Select.ScrollUpArrow\n      className={mergeStateClassName([styles.scrollArrow], className) as any}\n      {...rest}\n    />\n  );\n};\n\nSelectScrollUpArrow.displayName = 'SelectScrollUpArrow';\n\nexport type SelectScrollDownArrowProps = ComponentProps<typeof Select.ScrollDownArrow>;\n\nexport const SelectScrollDownArrow = ({ className, ...rest }: SelectScrollDownArrowProps) => {\n  return (\n    <Select.ScrollDownArrow\n      className={mergeStateClassName([styles.scrollArrow], className) as any}\n      {...rest}\n    />\n  );\n};\n\nSelectScrollDownArrow.displayName = 'SelectScrollDownArrow';\n\nexport type SelectArrowProps = ComponentProps<typeof Select.Arrow>;\n\nexport const SelectArrow = ({ className, ...rest }: SelectArrowProps) => {\n  return (\n    <Select.Arrow\n      className={mergeStateClassName([styles.arrow], className, 'lobe-select-arrow') as any}\n      {...rest}\n    />\n  );\n};\n\nSelectArrow.displayName = 'SelectArrow';\n"],"mappings":"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"}

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,