@kanso-labs/kanso-ui 0.36.0 → 0.37.0

package/dist/components/split-button/index.js

@@ -0,0 +1,341 @@
+"use client";
+import { radii, sizing } from "../../tokens/design.tokens.stylex.js";
+import { mergeStyles } from "../../styles/merge.js";
+import { ChevronDownGlyph } from "../../glyphs/index.js";
+import { ButtonGroupItemContext } from "../../button/context.js";
+import Button$1 from "../button/index.js";
+import Menu$1 from "../menu/index.js";
+import { c } from "react/compiler-runtime";
+import { createContext, useContext, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Group } from "react-aria-components";
+//#region src/components/split-button/index.tsx
+const corners = { shape: (start, end) => [{
+	kT0f0o: end != null ? "x1wsjk4f" : end,
+	kVL7Gh: start != null ? "x1oq9ryg" : start,
+	kfmiAY: end != null ? "xbsomw4" : end,
+	krdFHd: start != null ? "x6pmj1i" : start,
+	$$css: true
+}, {
+	"--x-borderEndEndRadius": ((val) => typeof val === "number" ? val + "px" : val != null ? val : void 0)(end),
+	"--x-borderEndStartRadius": ((val) => typeof val === "number" ? val + "px" : val != null ? val : void 0)(start),
+	"--x-borderStartEndRadius": ((val) => typeof val === "number" ? val + "px" : val != null ? val : void 0)(end),
+	"--x-borderStartStartRadius": ((val) => typeof val === "number" ? val + "px" : val != null ? val : void 0)(start)
+}] };
+const leading = {
+	lg: {
+		kwRFfy: "xdndrey",
+		kZCmMZ: "x1kdgbu8",
+		$$css: true
+	},
+	md: {
+		kwRFfy: "xk163s",
+		kZCmMZ: "x10rdx38",
+		$$css: true
+	},
+	xl: {
+		kwRFfy: "x15zmtp0",
+		kZCmMZ: "x1oiqv2n",
+		$$css: true
+	},
+	xs: {
+		kwRFfy: "x2vl965",
+		kZCmMZ: "xwde665",
+		$$css: true
+	},
+	xxl: {
+		kwRFfy: "xli2wwf",
+		kZCmMZ: "x7vhb2i",
+		$$css: true
+	}
+};
+const chevron = {
+	lg: {
+		kGuDYH: "x1ewwscv",
+		$$css: true
+	},
+	md: {
+		kGuDYH: "x1i1m3gp",
+		$$css: true
+	},
+	xl: {
+		kGuDYH: "x155jak9",
+		$$css: true
+	},
+	xs: {
+		kGuDYH: "x1i1m3gp",
+		$$css: true
+	},
+	xxl: {
+		kGuDYH: "xermeyz",
+		$$css: true
+	}
+};
+const trailing = { padding: (start, end) => [{
+	kwRFfy: end != null ? "x120eax6" : end,
+	kZCmMZ: start != null ? "xnvo3vl" : start,
+	$$css: true
+}, {
+	"--x-paddingInlineEnd": ((val) => typeof val === "number" ? val + "px" : val != null ? val : void 0)(end),
+	"--x-paddingInlineStart": ((val) => typeof val === "number" ? val + "px" : val != null ? val : void 0)(start)
+}] };
+const TRAILING_PADDING = {
+	lg: 15,
+	md: 13,
+	xl: 29,
+	xs: 13,
+	xxl: 43
+};
+const CLOSED_OFFSET = {
+	lg: 2,
+	md: 1,
+	xl: 3,
+	xs: 1,
+	xxl: 6
+};
+const INNER = {
+	lg: radii.xs,
+	md: radii.xs,
+	xl: radii.sm,
+	xs: radii.xs,
+	xxl: radii.md
+};
+const ROUND = {
+	lg: `calc(${sizing.controlLg} / 2)`,
+	md: `calc(${sizing.controlSm} / 2)`,
+	xl: `calc(${sizing.controlXl} / 2)`,
+	xs: `calc(${sizing.controlXs} / 2)`,
+	xxl: `calc(${sizing.controlXxl} / 2)`
+};
+const INNER_ACTIVE = {
+	lg: radii.md,
+	md: radii.md,
+	xl: "20px",
+	xs: radii.sm,
+	xxl: "20px"
+};
+const SplitButtonContext = createContext({
+	size: "md",
+	variant: "filled"
+});
+function isActive(state) {
+	return state.isHovered || state.isFocusVisible || state.isPressed;
+}
+function leadingItem(size) {
+	return {
+		shift: 0,
+		size,
+		styles: (state) => [leading[size], corners.shape(ROUND[size], isActive(state) ? INNER_ACTIVE[size] : INNER[size])]
+	};
+}
+/**
+* An action and a menu of alternatives beside it, drawn as one control.
+*
+* ```tsx
+* <SplitButton>
+*   <SplitButton.Action onPress={save}>Label</SplitButton.Action>
+*   <SplitButton.Menu aria-label="More options">
+*     <Menu.Item id="first">First item</Menu.Item>
+*   </SplitButton.Menu>
+* </SplitButton>
+* ```
+*
+* The call site's `className`, `style` and `ref` land on the group around
+* the two halves.
+*/
+function SplitButton(t0) {
+	const $ = c(14);
+	const { "aria-label": label, children, className, ref, size: t1, style, variant: t2 } = t0;
+	const size = t1 === void 0 ? "md" : t1;
+	const variant = t2 === void 0 ? "filled" : t2;
+	let t3;
+	if ($[0] !== size || $[1] !== variant) {
+		t3 = {
+			size,
+			variant
+		};
+		$[0] = size;
+		$[1] = variant;
+		$[2] = t3;
+	} else t3 = $[2];
+	const context = t3;
+	let t4;
+	if ($[3] !== className || $[4] !== style) {
+		t4 = mergeStyles({ className: "x6s0dn4 x9f619 x3nfvp2 x14qo01y" }, {
+			className,
+			style
+		});
+		$[3] = className;
+		$[4] = style;
+		$[5] = t4;
+	} else t4 = $[5];
+	let t5;
+	if ($[6] !== children || $[7] !== label || $[8] !== ref || $[9] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Group, {
+			"aria-label": label,
+			ref,
+			...t4,
+			children
+		});
+		$[6] = children;
+		$[7] = label;
+		$[8] = ref;
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== context || $[12] !== t5) {
+		t6 = /* @__PURE__ */ jsx(SplitButtonContext, {
+			value: context,
+			children: t5
+		});
+		$[11] = context;
+		$[12] = t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	return t6;
+}
+/**
+* The split button's leading half: a Button, with an icon, a label or both,
+* in the root's size and variant.
+*/
+function SplitButtonAction(props) {
+	const $ = c(8);
+	const { size, variant } = useContext(SplitButtonContext);
+	let t0;
+	if ($[0] !== size) {
+		t0 = leadingItem(size);
+		$[0] = size;
+		$[1] = t0;
+	} else t0 = $[1];
+	const item = t0;
+	let t1;
+	if ($[2] !== props || $[3] !== variant) {
+		t1 = /* @__PURE__ */ jsx(Button$1, {
+			...props,
+			variant
+		});
+		$[2] = props;
+		$[3] = variant;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== item || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(ButtonGroupItemContext, {
+			value: item,
+			children: t1
+		});
+		$[5] = item;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+}
+/**
+* The split button's trailing half: the down chevron, which opens the menu
+* of alternatives its children describe.
+*/
+function SplitButtonMenu(t0) {
+	const $ = c(23);
+	const { "aria-label": label, children, container, defaultOpen: t1, isDisabled, isOpen, onAction, onOpenChange } = t0;
+	const defaultOpen = t1 === void 0 ? false : t1;
+	const { size, variant } = useContext(SplitButtonContext);
+	const [ownOpen, setOwnOpen] = useState(defaultOpen);
+	const open = isOpen ?? ownOpen;
+	let t2;
+	if ($[0] !== isOpen || $[1] !== onOpenChange) {
+		t2 = (next) => {
+			if (isOpen === void 0) setOwnOpen(next);
+			onOpenChange?.(next);
+		};
+		$[0] = isOpen;
+		$[1] = onOpenChange;
+		$[2] = t2;
+	} else t2 = $[2];
+	const changeOpen = t2;
+	let t3;
+	if ($[3] !== open || $[4] !== size) {
+		t3 = trailingItem(size, open);
+		$[3] = open;
+		$[4] = size;
+		$[5] = t3;
+	} else t3 = $[5];
+	const item = t3;
+	let t4;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(ChevronDownGlyph, {
+			height: "1em",
+			width: "1em"
+		});
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== isDisabled || $[8] !== label || $[9] !== variant) {
+		t5 = /* @__PURE__ */ jsx(Button$1, {
+			"aria-label": label,
+			isDisabled,
+			variant,
+			children: t4
+		});
+		$[7] = isDisabled;
+		$[8] = label;
+		$[9] = variant;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== item || $[12] !== t5) {
+		t6 = /* @__PURE__ */ jsx(ButtonGroupItemContext, {
+			value: item,
+			children: t5
+		});
+		$[11] = item;
+		$[12] = t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== children || $[15] !== container || $[16] !== onAction) {
+		t7 = /* @__PURE__ */ jsx(Menu$1.Content, {
+			align: "end",
+			container,
+			onAction,
+			children
+		});
+		$[14] = children;
+		$[15] = container;
+		$[16] = onAction;
+		$[17] = t7;
+	} else t7 = $[17];
+	let t8;
+	if ($[18] !== changeOpen || $[19] !== open || $[20] !== t6 || $[21] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(Menu$1, {
+			isOpen: open,
+			onOpenChange: changeOpen,
+			children: [t6, t7]
+		});
+		$[18] = changeOpen;
+		$[19] = open;
+		$[20] = t6;
+		$[21] = t7;
+		$[22] = t8;
+	} else t8 = $[22];
+	return t8;
+}
+function trailingItem(size, isOpen) {
+	const padding = TRAILING_PADDING[size];
+	const offset = isOpen ? 0 : CLOSED_OFFSET[size];
+	return {
+		shift: 0,
+		size,
+		styles: (state) => [
+			chevron[size],
+			trailing.padding(`${padding - offset}px`, `${padding + offset}px`),
+			corners.shape(isOpen ? ROUND[size] : isActive(state) ? INNER_ACTIVE[size] : INNER[size], ROUND[size])
+		]
+	};
+}
+SplitButton.Action = SplitButtonAction;
+SplitButton.Menu = SplitButtonMenu;
+//#endregion
+export { SplitButtonAction, SplitButtonMenu, SplitButton as default };
+
+//# sourceMappingURL=index.js.map

package/dist/components/split-button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","CSSProperties","ReactNode","RefAttributes","Key","stylex","createContext","useCallback","useContext","useMemo","useState","Group","RACGroup","ButtonState","ButtonGroupItem","GroupSize","ButtonProps","ButtonSize","ButtonGroupItemContext","ChevronDownGlyph","mergeStyles","radii","sizing","spacing","Button","Menu","corners","shape","start","end","kT0f0o","kVL7Gh","kfmiAY","krdFHd","$$css","val","undefined","leading","lg","kwRFfy","kZCmMZ","md","xl","xs","xxl","chevron","kGuDYH","trailing","padding","TRAILING_PADDING","CLOSED_OFFSET","INNER","sm","ROUND","controlLg","controlSm","controlXl","controlXs","controlXxl","INNER_ACTIVE","SplitButtonActionProps","Omit","HTMLAnchorElement","HTMLButtonElement","SplitButtonMenuProps","children","container","Element","defaultOpen","isDisabled","isOpen","onAction","key","onOpenChange","SplitButtonProps","HTMLDivElement","className","size","style","variant","SplitButtonVariant","SplitButtonContext","isActive","state","isHovered","isFocusVisible","isPressed","leadingItem","shift","styles","SplitButton","t0","$","label","ref","t1","t2","t3","context","t4","t5","t6","SplitButtonAction","props","item","SplitButtonMenu","ownOpen","setOwnOpen","open","next","changeOpen","trailingItem","Symbol","for","t7","t8","offset","Action","_c","RACGroup","Button","Menu"],"sources":["../../../src/components/split-button/index.tsx"],"sourcesContent":["'use client';\n\nimport type { CSSProperties, ReactNode, RefAttributes } from 'react';\nimport type { Key } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useCallback, useContext, useMemo, useState } from 'react';\nimport { Group as RACGroup } from 'react-aria-components';\nimport type { ButtonState } from '../../button';\nimport type { ButtonGroupItem, GroupSize } from '../../button/context';\nimport type { ButtonProps, ButtonSize } from '../button';\nimport { ButtonGroupItemContext } from '../../button/context';\nimport { ChevronDownGlyph } from '../../glyphs';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { radii, sizing, spacing } from '../../tokens/design.tokens.stylex';\nimport Button from '../button';\nimport Menu from '../menu';\n\n// The split button page's split button: an action and the menu of\n// alternatives beside it, drawn as two Buttons 2dp apart — the page calls it\n// a special connected button group. The outer ends keep the button's round,\n// and the two edges that meet take the inner corner the size gives them,\n// 4dp up to the page's M, 8dp at L and 12dp at XL, opening out to 8dp, 12dp\n// and 20dp while either half is hovered, focused or pressed. The values are\n// the page's size token sets, read from Material Design's own split button\n// tokens; the 20dp corner, and the paddings that are not steps of the\n// spacing scale, are written out.\n//\n// **The leading half is a Button**, with an icon, a label or both, and the\n// page's own padding either side of what it holds — 12dp and 10dp at XS, for\n// instance, where a lone Button takes 16dp on both.\n//\n// **The trailing half is the menu's trigger**: a Button holding the down\n// chevron at the size's icon size, 22dp up to 50dp, with the menu below its\n// end edge. The chevron sits a pixel or more toward the start while the menu\n// is closed — the page's optical centring, 1dp to 6dp by size — and centres\n// once it opens, when the inner corners round off entirely. The page keeps\n// the colours as they are while the menu is open and lays the pressed state\n// layer over them, which is what React Aria's report of the trigger as\n// pressed for as long as its menu is open already draws.\n//\n// Both halves take the variant the root names, out of Button's four with a\n// container — the page gives text no split button.\n\n// Each half's corners on each side, set from the half and its state.\nconst corners = {\n  shape: (start: string, end: string) => [{\n    kT0f0o: end != null ? \"x1wsjk4f\" : end,\n    kVL7Gh: start != null ? \"x1oq9ryg\" : start,\n    kfmiAY: end != null ? \"xbsomw4\" : end,\n    krdFHd: start != null ? \"x6pmj1i\" : start,\n    $$css: true\n  }, {\n    \"--x-borderEndEndRadius\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(end),\n    \"--x-borderEndStartRadius\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(start),\n    \"--x-borderStartEndRadius\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(end),\n    \"--x-borderStartStartRadius\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(start)\n  }]\n};\n\n// The leading half's padding either side of what it holds.\nconst leading = {\n  lg: {\n    kwRFfy: \"xdndrey\",\n    kZCmMZ: \"x1kdgbu8\",\n    $$css: true\n  },\n  md: {\n    kwRFfy: \"xk163s\",\n    kZCmMZ: \"x10rdx38\",\n    $$css: true\n  },\n  xl: {\n    kwRFfy: \"x15zmtp0\",\n    kZCmMZ: \"x1oiqv2n\",\n    $$css: true\n  },\n  xs: {\n    kwRFfy: \"x2vl965\",\n    kZCmMZ: \"xwde665\",\n    $$css: true\n  },\n  xxl: {\n    kwRFfy: \"xli2wwf\",\n    kZCmMZ: \"x7vhb2i\",\n    $$css: true\n  }\n};\n\n// The trailing half's chevron, at the size's icon size.\nconst chevron = {\n  lg: {\n    kGuDYH: \"x1ewwscv\",\n    $$css: true\n  },\n  md: {\n    kGuDYH: \"x1i1m3gp\",\n    $$css: true\n  },\n  xl: {\n    kGuDYH: \"x155jak9\",\n    $$css: true\n  },\n  xs: {\n    kGuDYH: \"x1i1m3gp\",\n    $$css: true\n  },\n  xxl: {\n    kGuDYH: \"xermeyz\",\n    $$css: true\n  }\n};\n\n// The trailing half's padding: centred once the menu is open, and moved\n// toward the start by the page's offset while it is closed.\nconst trailing = {\n  padding: (start: string, end: string) => [{\n    kwRFfy: end != null ? \"x120eax6\" : end,\n    kZCmMZ: start != null ? \"xnvo3vl\" : start,\n    $$css: true\n  }, {\n    \"--x-paddingInlineEnd\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(end),\n    \"--x-paddingInlineStart\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(start)\n  }]\n};\n\n// The trailing half's padding either side of the chevron, and how far the\n// chevron sits toward the start while the menu is closed.\nconst TRAILING_PADDING = {\n  lg: 15,\n  md: 13,\n  xl: 29,\n  xs: 13,\n  xxl: 43\n};\nconst CLOSED_OFFSET = {\n  lg: 2,\n  md: 1,\n  xl: 3,\n  xs: 1,\n  xxl: 6\n};\n\n// The corner where the halves meet, at rest and while a half is hovered,\n// focused or pressed.\nconst INNER = {\n  lg: radii.xs,\n  md: radii.xs,\n  xl: radii.sm,\n  xs: radii.xs,\n  xxl: radii.md\n};\n\n// The round end at each size: half the button's height. Not the pill's\n// 9999px: CSS scales every corner of a box down together when two on one\n// side add up to more than the side is long, so a 9999px end beside an 8px\n// inner corner shrank the inner one to nothing. Half the height fits as\n// written. A label that wraps makes a button taller than this, and its ends\n// a little less than round.\nconst ROUND = {\n  lg: `calc(${sizing.controlLg} / 2)`,\n  md: `calc(${sizing.controlSm} / 2)`,\n  xl: `calc(${sizing.controlXl} / 2)`,\n  xs: `calc(${sizing.controlXs} / 2)`,\n  xxl: `calc(${sizing.controlXxl} / 2)`\n};\nconst INNER_ACTIVE = {\n  lg: radii.md,\n  md: radii.md,\n  xl: '20px',\n  xs: radii.sm,\n  xxl: '20px'\n};\ntype SplitButtonActionProps = Omit<ButtonProps, 'shape' | 'size' | 'variant'> & RefAttributes<HTMLAnchorElement | HTMLButtonElement>;\ntype SplitButtonMenuProps = {\n  /** What the menu offers, in words: the trailing half is an icon alone. */\n  'aria-label': string;\n  /** The menu's items, as `Menu.Item`s and the rest of Menu's parts. */\n  children: ReactNode;\n  /**\n   * Where the menu is portalled to. Point it inside a subtree that scopes its\n   * own theme, or it renders outside it.\n   */\n  container?: Element;\n  /**\n   * Whether the menu starts open, when it keeps its own state.\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /** Whether the trailing half can be pressed. */\n  isDisabled?: boolean;\n  /** Whether the menu is open, when the call site holds the state. */\n  isOpen?: boolean;\n  /** Called with an item's `id` when it is chosen. */\n  onAction?: (key: Key) => void;\n  /** Called when the menu opens or closes. */\n  onOpenChange?: (isOpen: boolean) => void;\n};\ntype SplitButtonProps = RefAttributes<HTMLDivElement> & {\n  /** What the pair is, in words, for the group around the two halves. */\n  'aria-label'?: string;\n  /** The two halves: a `SplitButton.Action`, then a `SplitButton.Menu`. */\n  children: ReactNode;\n  /** The class for the group around the two halves. */\n  className?: string;\n  /**\n   * The size both halves take, as Button's: `xs` to `xxl`.\n   * @default 'md'\n   */\n  size?: ButtonSize;\n  /** The style for the group around the two halves. */\n  style?: CSSProperties;\n  /**\n   * The colour style both halves take: Button's four with a container.\n   * @default 'filled'\n   */\n  variant?: SplitButtonVariant;\n};\ntype SplitButtonVariant = 'elevated' | 'filled' | 'outlined' | 'tonal';\n\n// What the root hands its two halves.\nconst SplitButtonContext = createContext<{\n  size: GroupSize;\n  variant: SplitButtonVariant;\n}>({\n  size: 'md',\n  variant: 'filled'\n});\n\n// Whether a half shows the corner it opens out to: while it is hovered,\n// focused or pressed.\nfunction isActive(state: ButtonState) {\n  return state.isHovered || state.isFocusVisible || state.isPressed;\n}\n\n// The leading half's part: its padding, its round start and the inner\n// corner at its end.\nfunction leadingItem(size: GroupSize): ButtonGroupItem {\n  return {\n    shift: 0,\n    size,\n    styles: (state: ButtonState) => [leading[size], corners.shape(ROUND[size], isActive(state) ? INNER_ACTIVE[size] : INNER[size])]\n  };\n}\n\n/**\n * An action and a menu of alternatives beside it, drawn as one control.\n *\n * ```tsx\n * <SplitButton>\n *   <SplitButton.Action onPress={save}>Label</SplitButton.Action>\n *   <SplitButton.Menu aria-label=\"More options\">\n *     <Menu.Item id=\"first\">First item</Menu.Item>\n *   </SplitButton.Menu>\n * </SplitButton>\n * ```\n *\n * The call site's `className`, `style` and `ref` land on the group around\n * the two halves.\n */\nfunction SplitButton({\n  'aria-label': label,\n  children,\n  className,\n  ref,\n  size = 'md',\n  style,\n  variant = 'filled'\n}: SplitButtonProps) {\n  const context = useMemo(() => ({\n    size,\n    variant\n  }), [size, variant]);\n  return <SplitButtonContext value={context}>\n      <RACGroup aria-label={label} ref={ref} {...mergeStyles({\n      className: \"x6s0dn4 x9f619 x3nfvp2 x14qo01y\"\n    }, {\n      className,\n      style\n    })}>\n        {children}\n      </RACGroup>\n    </SplitButtonContext>;\n}\n\n/**\n * The split button's leading half: a Button, with an icon, a label or both,\n * in the root's size and variant.\n */\nfunction SplitButtonAction(props: SplitButtonActionProps) {\n  const {\n    size,\n    variant\n  } = useContext(SplitButtonContext);\n  const item = useMemo(() => leadingItem(size), [size]);\n  return <ButtonGroupItemContext value={item}>\n      <Button {...props} variant={variant} />\n    </ButtonGroupItemContext>;\n}\n\n/**\n * The split button's trailing half: the down chevron, which opens the menu\n * of alternatives its children describe.\n */\nfunction SplitButtonMenu({\n  'aria-label': label,\n  children,\n  container,\n  defaultOpen = false,\n  isDisabled,\n  isOpen,\n  onAction,\n  onOpenChange\n}: SplitButtonMenuProps) {\n  const {\n    size,\n    variant\n  } = useContext(SplitButtonContext);\n  const [ownOpen, setOwnOpen] = useState(defaultOpen);\n  const open = isOpen ?? ownOpen;\n  const changeOpen = useCallback((next: boolean) => {\n    if (isOpen === undefined) {\n      setOwnOpen(next);\n    }\n    onOpenChange?.(next);\n  }, [isOpen, onOpenChange]);\n  const item = useMemo(() => trailingItem(size, open), [size, open]);\n  return <Menu isOpen={open} onOpenChange={changeOpen}>\n      <ButtonGroupItemContext value={item}>\n        <Button aria-label={label} isDisabled={isDisabled} variant={variant}>\n          <ChevronDownGlyph height=\"1em\" width=\"1em\" />\n        </Button>\n      </ButtonGroupItemContext>\n      <Menu.Content align=\"end\" container={container} onAction={onAction}>\n        {children}\n      </Menu.Content>\n    </Menu>;\n}\n\n// The trailing half's part: its chevron and padding, the inner corner at its\n// start, and its round end — and while the menu is open, the chevron centred\n// and the inner corner rounded off.\nfunction trailingItem(size: GroupSize, isOpen: boolean): ButtonGroupItem {\n  const padding = TRAILING_PADDING[size];\n  const offset = isOpen ? 0 : CLOSED_OFFSET[size];\n  return {\n    shift: 0,\n    size,\n    styles: (state: ButtonState) => [chevron[size], trailing.padding(`${padding - offset}px`, `${padding + offset}px`), corners.shape(isOpen ? ROUND[size] : isActive(state) ? INNER_ACTIVE[size] : INNER[size], ROUND[size])]\n  };\n}\nSplitButton.Action = SplitButtonAction;\nSplitButton.Menu = SplitButtonMenu;\nexport type { SplitButtonActionProps, SplitButtonMenuProps, SplitButtonProps, SplitButtonVariant };\nexport { SplitButtonAction, SplitButtonMenu };\nexport default SplitButton;"],"mappings":"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"}

package/dist/components/switch/index.js

@@ -164,6 +164,16 @@ const hoverLayers = {
 		$$css: true
 	}
 };
+const focusLayers = {
+	off: {
+		kWkggS: "xwqhyid",
+		$$css: true
+	},
+	on: {
+		kWkggS: "x1sog3nf",
+		$$css: true
+	}
+};
 const pressedLayers = {
 	off: {
 		kWkggS: "xjeeohs",
@@ -191,7 +201,7 @@ function buttonContent(children, icon, ripple, drag) {
 					...props(styles.seat, on && styles.seatOn, interactive && styles.seatDraggable, dragging && styles.seatDragging, dragging && styles.seatAt(drag.offset ?? 0)),
 					children: [/* @__PURE__ */ jsx("span", {
 						...interactive ? ripple.handlers : {},
-						...props(styles.layer, interactive && state.isHovered && hoverLayers[on ? "on" : "off"], interactive && state.isPressed && pressedLayers[on ? "on" : "off"]),
+						...props(styles.layer, interactive && state.isHovered && hoverLayers[on ? "on" : "off"], interactive && state.isFocusVisible && focusLayers[on ? "on" : "off"], interactive && state.isPressed && pressedLayers[on ? "on" : "off"]),
 						children: interactive ? ripple.surface : null
 					}), /* @__PURE__ */ jsx("span", {
 						...props(styles.handle, on && styles.handleOn, active && (on ? styles.handleOnActive : styles.handleActive), (dragging || interactive && state.isPressed) && styles.handlePressed, state.isDisabled && (on ? styles.handleOnDisabled : styles.handleDisabled)),

package/dist/components/switch/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","MouseEvent","ReactMouseEvent","ReactNode","PointerEvent","ReactPointerEvent","RefAttributes","SwitchFieldProps","RACSwitchFieldProps","SwitchButtonRenderProps","stylex","useCallback","useRef","useState","SwitchButton","SwitchField","ControlLabel","controlStyles","FieldMessage","invalidFrom","useFieldValidationBehavior","CheckGlyph","useRipple","focus","mergeStatefulStyles","colors","motion","radii","stateLayerOpacity","FORCED_COLORS","_temp","kLqNvP","styles","control","kgeoSG","kGOzcv","kpsdNU","kEoFBp","kGNEyG","kZKoxP","kB7OPa","kkrTdU","k1xSpc","kmuXW","kzqmXN","kjj79g","kVAEAm","$$css","handle","k6CgDc","kWkggS","kaIpWk","kMwMTN","kIyJzY","k1ekBW","kAMwcw","handleActive","handleDisabled","handleOn","handleOnActive","handleOnDisabled","handlePressed","layer","kpwlN0","seat","k87sOh","seatAt","offset","val","undefined","seatDraggable","kFalU9","seatDragging","seatOn","track","kVAM5u","ksu8eU","kMzoRj","trackDisabled","trackOn","trackOnDisabled","hoverLayers","off","on","pressedLayers","TRAVEL","DRAG_SLOP","Drag","ReturnType","useHandleDrag","Ripple","HTMLSpanElement","SwitchProps","children","description","error","icon","Omit","buttonContent","ripple","drag","state","interactive","isDisabled","isReadOnly","isSelected","dragging","active","isHovered","isPressed","isFocusVisible","props","controlReadOnly","controlDisabled","ringVisible","handlers","surface","Switch","t0","$","t1","validationBehavior","T0","t2","t3","field","t4","t5","t6","Symbol","for","messages","t7","t8","setOffset","origin","settled","cancelClick","current","onPointerCancel","event","preventDefault","stopPropagation","onClickCapture","event_0","from","along","rtl","x","clientX","Math","abs","next","min","max","base","onPointerMove","event_1","from_0","stopped","currentTarget","dispatchEvent","bubbles","pointerId","pointerType","input","closest","querySelector","click","onPointerUp","onPointerDown","event_2","button","getComputedStyle","direction","setPointerCapture","stylex.props","_c","props"],"sources":["../../../src/components/switch/index.tsx"],"sourcesContent":["'use client';\n\n// React's event types are aliased because `useHandleDrag` also constructs a\n// DOM `PointerEvent`. Imported unaliased, the name shadows that constructor:\n// TypeScript still resolves the call to the global, since a type-only import\n// takes no value name, but a reader and a static analyser alike read it as\n// React's type, which has no runtime value behind it at all.\nimport type { MouseEvent as ReactMouseEvent, ReactNode, PointerEvent as ReactPointerEvent, RefAttributes } from 'react';\nimport type { SwitchFieldProps as RACSwitchFieldProps, SwitchButtonRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useCallback, useRef, useState } from 'react';\nimport { SwitchButton, SwitchField } from 'react-aria-components';\nimport { ControlLabel } from '../../control';\nimport { controlStyles } from '../../control/styles';\nimport { FieldMessage } from '../../field';\nimport { invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CheckGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// The switch page: a 52 by 32dp track with a 2dp outline and a full corner,\n// a handle that is 16dp off, 24dp on and 28dp while pressed, a 16dp icon in\n// the handle when asked for, a 40dp state layer around the handle and a 48dp\n// target. Off, the track is surface container highest inside an outline\n// rule and the handle is outline, turning on surface variant while hovered,\n// pressed or focused; on, the track is primary and the handle on primary,\n// turning primary container in the same states, with the icon in on primary\n// container. Disabled, the track and its rule are on surface at the\n// disabled container opacity and the handle on surface at the disabled\n// content opacity, or surface when on. The state layer is on surface off and\n// primary on.\n//\n// React Aria's `SwitchField` is the root, a div holding the description and\n// error slots; its `SwitchButton` is the label around a visually hidden\n// input, and everything drawn is that label's children, chosen from the\n// render state React Aria hands them. The field is the two-column grid the\n// checkbox uses, with the label `display: contents`, so the description and\n// error line up under the text.\n//\n// The handle travels between the two ends of the track and grows between\n// its three sizes on the same transition, `motion.durationShort2` with the\n// standard easing; the state layer and the ripple sit on a 40dp disc centred\n// on the handle, so they move with it. The adjacent label is body-large on\n// surface, which the page keeps the same whichever way the switch is.\n//\n// The page's pressed handle follows the pointer: it grows, travels with the\n// drag, and the switch flips when it is released past the middle of the\n// track or springs back when it is not. React Aria's `SwitchButton` has no\n// drag of its own, so the travel is this component's — see `useHandleDrag`.\n//\n// Under forced colours the switch names system colours for its fills. That\n// mode paints an author's fill in the page's own `Canvas`, so the handle\n// vanished and on and off drew the same empty pill; a system colour is kept\n// rather than repainted. Off is a `ButtonText` handle in an empty track with\n// a `ButtonText` rule. On is a `HighlightText` handle in a track filled with\n// `Highlight`, the pair the mode gives whatever is chosen, with the check in\n// `Highlight` over the handle. Disabled, the same shapes are `GrayText`, and\n// the handle of a switch that is on is emptied to `Canvas` so it still shows\n// against its track. Every style that sets a fill repeats its branch, since\n// one written without the query replaces the property whole, branch and all.\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst _temp = {\n  kLqNvP: \"x1lxsm33\",\n  \"$$css\": true\n};\nconst styles = {\n  control: {\n    kgeoSG: \"x1cpjm7i\",\n    kGOzcv: \"x1fb0czk\",\n    kpsdNU: \"xm4btww\",\n    kEoFBp: \"x1hmns74\",\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"x1vqgdyp\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"xvni27\",\n    kjj79g: \"xl56j7k\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  },\n  handle: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xp2scj5 x1tt9vl1\",\n    kZKoxP: \"xlup9mm\",\n    kaIpWk: \"x16fbrrb\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"xscdzaa x6jt684\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"x1kky2od\",\n    kjj79g: \"xl56j7k\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x7okvu4\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  handleActive: {\n    kWkggS: \"x1ccu2yh x1tt9vl1\",\n    $$css: true\n  },\n  handleDisabled: {\n    kWkggS: \"x1crcgwy x1o55y2u\",\n    $$css: true\n  },\n  handleOn: {\n    kWkggS: \"x1ntwmx2 x1sir5s4\",\n    kZKoxP: \"xxk0z11\",\n    kzqmXN: \"xvy4d1p\",\n    $$css: true\n  },\n  handleOnActive: {\n    kWkggS: \"xp89om9 x1sir5s4\",\n    $$css: true\n  },\n  handleOnDisabled: {\n    kWkggS: \"x14s9m32 x9yvj25\",\n    kMwMTN: \"x1gpw424 x1bhcspo\",\n    $$css: true\n  },\n  handlePressed: {\n    kZKoxP: \"x1fgtraw\",\n    kzqmXN: \"xgd8bvy\",\n    $$css: true\n  },\n  layer: {\n    k6CgDc: \"x12w9bfk\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x16fbrrb\",\n    kB7OPa: \"x9f619\",\n    kzqmXN: \"x100vrsf\",\n    kpwlN0: \"x1qx2jxi\",\n    kVAEAm: \"x10l6tqk\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x15406qy\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  seat: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"x1fgtraw\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"xgd8bvy\",\n    k87sOh: \"x13vifvy\",\n    kLqNvP: \"x1o0tod\",\n    kjj79g: \"xl56j7k\",\n    kVAEAm: \"x10l6tqk\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x2hifos\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  seatAt: (offset: number) => [_temp, {\n    \"--x-insetInlineStart\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(`${offset}px`)\n  }],\n  seatDraggable: {\n    kFalU9: \"x5ve5x3\",\n    $$css: true\n  },\n  seatDragging: {\n    kIyJzY: \"x1mq3mr6\",\n    $$css: true\n  },\n  seatOn: {\n    kLqNvP: \"x1n8ud3w\",\n    $$css: true\n  },\n  track: {\n    k6CgDc: \"x12w9bfk\",\n    kWkggS: \"x1rrhr5q x9yvj25\",\n    kZKoxP: \"x10w6t97\",\n    kVAM5u: \"x1fwvt7v x1ylmb6m\",\n    kaIpWk: \"x1dkaolv\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xdh2fpr\",\n    kB7OPa: \"x9f619\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"xvni27\",\n    kVAEAm: \"x1n2onr6\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xts7igz\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  trackDisabled: {\n    kWkggS: \"x1trd85j x9yvj25\",\n    kVAM5u: \"xrh88j3 xmnqt3w\",\n    $$css: true\n  },\n  trackOn: {\n    kWkggS: \"xnety89 x1jzqe4\",\n    kVAM5u: \"x1uajy3w x1n2ykn\",\n    $$css: true\n  },\n  trackOnDisabled: {\n    kWkggS: \"x19v6zzp x1o55y2u\",\n    kVAM5u: \"x9r1u3d xmnqt3w\",\n    $$css: true\n  }\n};\n\n// The state layer over the handle: on surface while the switch is off and\n// primary while it is on, at the hover or the pressed opacity.\nconst hoverLayers = {\n  off: {\n    kWkggS: \"x1b18xnh\",\n    $$css: true\n  },\n  on: {\n    kWkggS: \"x659ado\",\n    $$css: true\n  }\n};\nconst pressedLayers = {\n  off: {\n    kWkggS: \"xjeeohs\",\n    $$css: true\n  },\n  on: {\n    kWkggS: \"x1dvjsmr\",\n    $$css: true\n  }\n};\n\n// How far the seat travels: the track's 48dp inside its 2dp rule, less the\n// seat's own 28dp.\nconst TRAVEL = 20;\n\n// How far a press has to move before it is a drag: a quarter of the travel.\n// A finger, a mouse and a pen all move a pixel or two between pressing and\n// lifting, and a press inside this is still a tap, which flips the switch.\nconst DRAG_SLOP = TRAVEL / 4;\ntype Drag = ReturnType<typeof useHandleDrag>;\ntype Ripple = ReturnType<typeof useRipple<HTMLSpanElement>>;\ntype SwitchProps = {\n  /**\n   * The label, beside the switch. A switch that a row labels some other way\n   * leaves it out and passes `aria-label` instead.\n   */\n  children?: ReactNode;\n  /**\n   * A hint under the label. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the switch in its error state — the message and `aria-invalid` follow\n   * from it.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n  /**\n   * Draws the check in the handle while the switch is on, the page's\n   * \"icon on selected switch\" form.\n   * @default false\n   */\n  icon?: boolean;\n} & Omit<RACSwitchFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;\n\n// What the label draws, chosen from the render state React Aria hands it.\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its inputs. The ripple's handlers and surface go on the\n// state layer while the switch can change, and are left off while it\n// cannot, since a press that changes nothing should not look like one.\nfunction buttonContent(children: ReactNode, icon: boolean, ripple: Ripple, drag: Drag) {\n  return (state: SwitchButtonRenderProps) => {\n    const interactive = !state.isDisabled && !state.isReadOnly;\n    const on = state.isSelected;\n    const dragging = interactive && drag.offset !== null;\n    const active = interactive && (state.isHovered || state.isPressed || state.isFocusVisible);\n    return <>\n        <span {...stylex.props(styles.control, state.isReadOnly && controlStyles.controlReadOnly, state.isDisabled && controlStyles.controlDisabled)}>\n          <span {...stylex.props(styles.track, on && styles.trackOn, state.isDisabled && (on ? styles.trackOnDisabled : styles.trackDisabled), state.isFocusVisible && focus.ringVisible)}>\n            <span {...interactive ? drag.handlers(on) : {}} {...stylex.props(styles.seat, on && styles.seatOn, interactive && styles.seatDraggable, dragging && styles.seatDragging, dragging && styles.seatAt(drag.offset ?? 0))}>\n              <span {...interactive ? ripple.handlers : {}} {...stylex.props(styles.layer, interactive && state.isHovered && hoverLayers[on ? 'on' : 'off'], interactive && state.isPressed && pressedLayers[on ? 'on' : 'off'])}>\n                {interactive ? ripple.surface : null}\n              </span>\n              <span {...stylex.props(styles.handle, on && styles.handleOn, active && (on ? styles.handleOnActive : styles.handleActive), (dragging || interactive && state.isPressed) && styles.handlePressed, state.isDisabled && (on ? styles.handleOnDisabled : styles.handleDisabled))}>\n                {icon && on ? <CheckGlyph className=\"xlup9mm x1lliihq x1kky2od\" /> : null}\n              </span>\n            </span>\n          </span>\n        </span>\n        <ControlLabel state={state}>{children}</ControlLabel>\n      </>;\n  };\n}\n\n/**\n * A switch that turns a setting on or off, with its label and optionally a\n * description or an error under it. Its state is React Aria's: pass\n * `isSelected` with `onChange` to control it, or `defaultSelected` to let it\n * keep its own. A switch takes effect as it is flipped, which is what sets\n * it apart from a checkbox in a form.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions.\n */\nfunction Switch({\n  children,\n  description,\n  error,\n  icon = false,\n  ...props\n}: RefAttributes<HTMLDivElement> & SwitchProps) {\n  const ripple = useRipple<HTMLSpanElement>();\n  const drag = useHandleDrag();\n  const validationBehavior = useFieldValidationBehavior();\n  return <SwitchField isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(controlStyles.field), props)}>\n      <SwitchButton className=\"xjp7ctv\">\n        {buttonContent(children, icon, ripple, drag)}\n      </SwitchButton>\n      <div {...stylex.props(controlStyles.messages)}>\n        <FieldMessage description={description} error={error} inset={false} />\n      </div>\n    </SwitchField>;\n}\n\n/**\n * The handle following a pointer across the track, as the switch page draws\n * a pressed switch. The seat's inset comes from the drag while one is under\n * way, and the switch settles from where the handle was let go: on past the\n * middle of the track, off before it.\n *\n * What flips the switch on an ordinary tap is React Aria's own press, which\n * ends on the pointer being released and pays no attention to where the\n * handle was dragged to — so a drag has to end that press before releasing,\n * which is what the pointer cancel is for, and settle the switch itself.\n * Settling means clicking the field's own input, the same element a tap\n * reaches in the end: the change goes through React Aria, and a controlled\n * switch stays controlled, since nothing here calls `onChange` or holds any\n * state of the switch's own. The click the pointer's release sends after\n * that is cancelled too, so nothing flips the switch a second time.\n *\n * A press that moves no further than the slop is left alone entirely, so a\n * tap flips the switch however still the pointer was — a drag starts only\n * once the pointer passes it, and from then on the handle follows every move.\n *\n * The guard for the click after a drag is cleared by the next press, not by\n * that click, since the click may never come: a touch dragged past the\n * browser's own slop sends none, and a guard left armed swallowed the next\n * tap instead.\n */\nfunction useHandleDrag() {\n  const [offset, setOffset] = useState<null | number>(null);\n  const origin = useRef<null | {\n    base: number;\n    on: boolean;\n    rtl: boolean;\n    x: number;\n  }>(null);\n  const settled = useRef<null | number>(null);\n  const cancelClick = useRef(false);\n  const onPointerCancel = useCallback(() => {\n    origin.current = null;\n    settled.current = null;\n    setOffset(null);\n  }, []);\n  const onClickCapture = useCallback((event: ReactMouseEvent<HTMLSpanElement>) => {\n    if (!cancelClick.current) {\n      return;\n    }\n    cancelClick.current = false;\n    // The label's activation is the browser's own, so this is what stops the\n    // input being flipped by a drag that settled where it began.\n    event.preventDefault();\n    event.stopPropagation();\n  }, []);\n  const onPointerMove = useCallback((event: ReactPointerEvent<HTMLSpanElement>) => {\n    const from = origin.current;\n    if (from === null) {\n      return;\n    }\n    const along = from.rtl ? from.x - event.clientX : event.clientX - from.x;\n    if (settled.current === null && Math.abs(along) <= DRAG_SLOP) {\n      return;\n    }\n    const next = Math.min(TRAVEL, Math.max(0, from.base + along));\n    settled.current = next;\n    setOffset(next);\n  }, []);\n  const onPointerUp = useCallback((event: ReactPointerEvent<HTMLSpanElement>) => {\n    const from = origin.current;\n    const stopped = settled.current;\n    const seat = event.currentTarget;\n    origin.current = null;\n    settled.current = null;\n    setOffset(null);\n    // A press that never moved is a tap, which React Aria flips on its own.\n    if (from === null || stopped === null) {\n      return;\n    }\n    // React Aria's press is about to flip the switch from wherever it\n    // started, so it is cancelled first — a pointer cancel is what ends a\n    // press without firing it — and the drag settles the switch instead.\n    seat.dispatchEvent(new PointerEvent('pointercancel', {\n      bubbles: true,\n      pointerId: event.pointerId,\n      pointerType: event.pointerType\n    }));\n    // The pointer's own click follows this, by which time the switch has\n    // already settled.\n    cancelClick.current = true;\n    if (stopped > TRAVEL / 2 === from.on) {\n      return;\n    }\n    const input = seat.closest('label')?.querySelector('input');\n    input?.click();\n  }, []);\n  const handlers = useCallback((on: boolean) => ({\n    onClickCapture,\n    onPointerCancel,\n    onPointerDown: (event: ReactPointerEvent<HTMLSpanElement>) => {\n      cancelClick.current = false;\n      if (event.pointerType === 'mouse' && event.button !== 0) {\n        return;\n      }\n      origin.current = {\n        base: on ? TRAVEL : 0,\n        on,\n        rtl: getComputedStyle(event.currentTarget).direction === 'rtl',\n        x: event.clientX\n      };\n      settled.current = null;\n      try {\n        event.currentTarget.setPointerCapture(event.pointerId);\n      } catch {\n        // A pointer the browser is not tracking has no capture to take —\n        // a synthetic event in a test, where the moves are dispatched on\n        // this element anyway.\n      }\n    },\n    onPointerMove,\n    onPointerUp\n  }), [onClickCapture, onPointerCancel, onPointerMove, onPointerUp]);\n  return {\n    handlers,\n    offset\n  };\n}\nexport type { SwitchProps };\nexport default Switch;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","MouseEvent","ReactMouseEvent","ReactNode","PointerEvent","ReactPointerEvent","RefAttributes","SwitchFieldProps","RACSwitchFieldProps","SwitchButtonRenderProps","stylex","useCallback","useRef","useState","SwitchButton","SwitchField","ControlLabel","controlStyles","FieldMessage","invalidFrom","useFieldValidationBehavior","CheckGlyph","useRipple","focus","mergeStatefulStyles","colors","motion","radii","stateLayerOpacity","FORCED_COLORS","_temp","kLqNvP","styles","control","kgeoSG","kGOzcv","kpsdNU","kEoFBp","kGNEyG","kZKoxP","kB7OPa","kkrTdU","k1xSpc","kmuXW","kzqmXN","kjj79g","kVAEAm","$$css","handle","k6CgDc","kWkggS","kaIpWk","kMwMTN","kIyJzY","k1ekBW","kAMwcw","handleActive","handleDisabled","handleOn","handleOnActive","handleOnDisabled","handlePressed","layer","kpwlN0","seat","k87sOh","seatAt","offset","val","undefined","seatDraggable","kFalU9","seatDragging","seatOn","track","kVAM5u","ksu8eU","kMzoRj","trackDisabled","trackOn","trackOnDisabled","hoverLayers","off","on","focusLayers","pressedLayers","TRAVEL","DRAG_SLOP","Drag","ReturnType","useHandleDrag","Ripple","HTMLSpanElement","SwitchProps","children","description","error","icon","Omit","buttonContent","ripple","drag","state","interactive","isDisabled","isReadOnly","isSelected","dragging","active","isHovered","isPressed","isFocusVisible","props","controlReadOnly","controlDisabled","ringVisible","handlers","surface","Switch","t0","$","t1","validationBehavior","T0","t2","t3","field","t4","t5","t6","Symbol","for","messages","t7","t8","setOffset","origin","settled","cancelClick","current","onPointerCancel","event","preventDefault","stopPropagation","onClickCapture","event_0","from","along","rtl","x","clientX","Math","abs","next","min","max","base","onPointerMove","event_1","from_0","stopped","currentTarget","dispatchEvent","bubbles","pointerId","pointerType","input","closest","querySelector","click","onPointerUp","onPointerDown","event_2","button","getComputedStyle","direction","setPointerCapture","stylex.props","_c","props"],"sources":["../../../src/components/switch/index.tsx"],"sourcesContent":["'use client';\n\n// React's event types are aliased because `useHandleDrag` also constructs a\n// DOM `PointerEvent`. Imported unaliased, the name shadows that constructor:\n// TypeScript still resolves the call to the global, since a type-only import\n// takes no value name, but a reader and a static analyser alike read it as\n// React's type, which has no runtime value behind it at all.\nimport type { MouseEvent as ReactMouseEvent, ReactNode, PointerEvent as ReactPointerEvent, RefAttributes } from 'react';\nimport type { SwitchFieldProps as RACSwitchFieldProps, SwitchButtonRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useCallback, useRef, useState } from 'react';\nimport { SwitchButton, SwitchField } from 'react-aria-components';\nimport { ControlLabel } from '../../control';\nimport { controlStyles } from '../../control/styles';\nimport { FieldMessage } from '../../field';\nimport { invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CheckGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// The switch page: a 52 by 32dp track with a 2dp outline and a full corner,\n// a handle that is 16dp off, 24dp on and 28dp while pressed, a 16dp icon in\n// the handle when asked for, a 40dp state layer around the handle and a 48dp\n// target. Off, the track is surface container highest inside an outline\n// rule and the handle is outline, turning on surface variant while hovered,\n// pressed or focused; on, the track is primary and the handle on primary,\n// turning primary container in the same states, with the icon in on primary\n// container. Disabled, the track and its rule are on surface at the\n// disabled container opacity and the handle on surface at the disabled\n// content opacity, or surface when on. The state layer is on surface off and\n// primary on.\n//\n// React Aria's `SwitchField` is the root, a div holding the description and\n// error slots; its `SwitchButton` is the label around a visually hidden\n// input, and everything drawn is that label's children, chosen from the\n// render state React Aria hands them. The field is the two-column grid the\n// checkbox uses, with the label `display: contents`, so the description and\n// error line up under the text.\n//\n// The handle travels between the two ends of the track and grows between\n// its three sizes on the same transition, `motion.durationShort2` with the\n// standard easing; the state layer and the ripple sit on a 40dp disc centred\n// on the handle, so they move with it. The adjacent label is body-large on\n// surface, which the page keeps the same whichever way the switch is.\n//\n// The page's pressed handle follows the pointer: it grows, travels with the\n// drag, and the switch flips when it is released past the middle of the\n// track or springs back when it is not. React Aria's `SwitchButton` has no\n// drag of its own, so the travel is this component's — see `useHandleDrag`.\n//\n// Under forced colours the switch names system colours for its fills. That\n// mode paints an author's fill in the page's own `Canvas`, so the handle\n// vanished and on and off drew the same empty pill; a system colour is kept\n// rather than repainted. Off is a `ButtonText` handle in an empty track with\n// a `ButtonText` rule. On is a `HighlightText` handle in a track filled with\n// `Highlight`, the pair the mode gives whatever is chosen, with the check in\n// `Highlight` over the handle. Disabled, the same shapes are `GrayText`, and\n// the handle of a switch that is on is emptied to `Canvas` so it still shows\n// against its track. Every style that sets a fill repeats its branch, since\n// one written without the query replaces the property whole, branch and all.\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst _temp = {\n  kLqNvP: \"x1lxsm33\",\n  \"$$css\": true\n};\nconst styles = {\n  control: {\n    kgeoSG: \"x1cpjm7i\",\n    kGOzcv: \"x1fb0czk\",\n    kpsdNU: \"xm4btww\",\n    kEoFBp: \"x1hmns74\",\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"x1vqgdyp\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"xvni27\",\n    kjj79g: \"xl56j7k\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  },\n  handle: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xp2scj5 x1tt9vl1\",\n    kZKoxP: \"xlup9mm\",\n    kaIpWk: \"x16fbrrb\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"xscdzaa x6jt684\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"x1kky2od\",\n    kjj79g: \"xl56j7k\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x7okvu4\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  handleActive: {\n    kWkggS: \"x1ccu2yh x1tt9vl1\",\n    $$css: true\n  },\n  handleDisabled: {\n    kWkggS: \"x1crcgwy x1o55y2u\",\n    $$css: true\n  },\n  handleOn: {\n    kWkggS: \"x1ntwmx2 x1sir5s4\",\n    kZKoxP: \"xxk0z11\",\n    kzqmXN: \"xvy4d1p\",\n    $$css: true\n  },\n  handleOnActive: {\n    kWkggS: \"xp89om9 x1sir5s4\",\n    $$css: true\n  },\n  handleOnDisabled: {\n    kWkggS: \"x14s9m32 x9yvj25\",\n    kMwMTN: \"x1gpw424 x1bhcspo\",\n    $$css: true\n  },\n  handlePressed: {\n    kZKoxP: \"x1fgtraw\",\n    kzqmXN: \"xgd8bvy\",\n    $$css: true\n  },\n  layer: {\n    k6CgDc: \"x12w9bfk\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x16fbrrb\",\n    kB7OPa: \"x9f619\",\n    kzqmXN: \"x100vrsf\",\n    kpwlN0: \"x1qx2jxi\",\n    kVAEAm: \"x10l6tqk\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x15406qy\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  seat: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"x1fgtraw\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"xgd8bvy\",\n    k87sOh: \"x13vifvy\",\n    kLqNvP: \"x1o0tod\",\n    kjj79g: \"xl56j7k\",\n    kVAEAm: \"x10l6tqk\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x2hifos\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  seatAt: (offset: number) => [_temp, {\n    \"--x-insetInlineStart\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(`${offset}px`)\n  }],\n  seatDraggable: {\n    kFalU9: \"x5ve5x3\",\n    $$css: true\n  },\n  seatDragging: {\n    kIyJzY: \"x1mq3mr6\",\n    $$css: true\n  },\n  seatOn: {\n    kLqNvP: \"x1n8ud3w\",\n    $$css: true\n  },\n  track: {\n    k6CgDc: \"x12w9bfk\",\n    kWkggS: \"x1rrhr5q x9yvj25\",\n    kZKoxP: \"x10w6t97\",\n    kVAM5u: \"x1fwvt7v x1ylmb6m\",\n    kaIpWk: \"x1dkaolv\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xdh2fpr\",\n    kB7OPa: \"x9f619\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"xvni27\",\n    kVAEAm: \"x1n2onr6\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xts7igz\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  trackDisabled: {\n    kWkggS: \"x1trd85j x9yvj25\",\n    kVAM5u: \"xrh88j3 xmnqt3w\",\n    $$css: true\n  },\n  trackOn: {\n    kWkggS: \"xnety89 x1jzqe4\",\n    kVAM5u: \"x1uajy3w x1n2ykn\",\n    $$css: true\n  },\n  trackOnDisabled: {\n    kWkggS: \"x19v6zzp x1o55y2u\",\n    kVAM5u: \"x9r1u3d xmnqt3w\",\n    $$css: true\n  }\n};\n\n// The state layer over the handle: on surface while the switch is off and\n// primary while it is on, at the hover or the pressed opacity.\nconst hoverLayers = {\n  off: {\n    kWkggS: \"x1b18xnh\",\n    $$css: true\n  },\n  on: {\n    kWkggS: \"x659ado\",\n    $$css: true\n  }\n};\n\n// A keyboard's focus draws the hover layer's colour at the focus opacity.\nconst focusLayers = {\n  off: {\n    kWkggS: \"xwqhyid\",\n    $$css: true\n  },\n  on: {\n    kWkggS: \"x1sog3nf\",\n    $$css: true\n  }\n};\nconst pressedLayers = {\n  off: {\n    kWkggS: \"xjeeohs\",\n    $$css: true\n  },\n  on: {\n    kWkggS: \"x1dvjsmr\",\n    $$css: true\n  }\n};\n\n// How far the seat travels: the track's 48dp inside its 2dp rule, less the\n// seat's own 28dp.\nconst TRAVEL = 20;\n\n// How far a press has to move before it is a drag: a quarter of the travel.\n// A finger, a mouse and a pen all move a pixel or two between pressing and\n// lifting, and a press inside this is still a tap, which flips the switch.\nconst DRAG_SLOP = TRAVEL / 4;\ntype Drag = ReturnType<typeof useHandleDrag>;\ntype Ripple = ReturnType<typeof useRipple<HTMLSpanElement>>;\ntype SwitchProps = {\n  /**\n   * The label, beside the switch. A switch that a row labels some other way\n   * leaves it out and passes `aria-label` instead.\n   */\n  children?: ReactNode;\n  /**\n   * A hint under the label. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the switch in its error state — the message and `aria-invalid` follow\n   * from it.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n  /**\n   * Draws the check in the handle while the switch is on, the page's\n   * \"icon on selected switch\" form.\n   * @default false\n   */\n  icon?: boolean;\n} & Omit<RACSwitchFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;\n\n// What the label draws, chosen from the render state React Aria hands it.\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its inputs. The ripple's handlers and surface go on the\n// state layer while the switch can change, and are left off while it\n// cannot, since a press that changes nothing should not look like one.\nfunction buttonContent(children: ReactNode, icon: boolean, ripple: Ripple, drag: Drag) {\n  return (state: SwitchButtonRenderProps) => {\n    const interactive = !state.isDisabled && !state.isReadOnly;\n    const on = state.isSelected;\n    const dragging = interactive && drag.offset !== null;\n    const active = interactive && (state.isHovered || state.isPressed || state.isFocusVisible);\n    return <>\n        <span {...stylex.props(styles.control, state.isReadOnly && controlStyles.controlReadOnly, state.isDisabled && controlStyles.controlDisabled)}>\n          <span {...stylex.props(styles.track, on && styles.trackOn, state.isDisabled && (on ? styles.trackOnDisabled : styles.trackDisabled), state.isFocusVisible && focus.ringVisible)}>\n            <span {...interactive ? drag.handlers(on) : {}} {...stylex.props(styles.seat, on && styles.seatOn, interactive && styles.seatDraggable, dragging && styles.seatDragging, dragging && styles.seatAt(drag.offset ?? 0))}>\n              <span {...interactive ? ripple.handlers : {}} {...stylex.props(styles.layer, interactive && state.isHovered && hoverLayers[on ? 'on' : 'off'], interactive && state.isFocusVisible && focusLayers[on ? 'on' : 'off'], interactive && state.isPressed && pressedLayers[on ? 'on' : 'off'])}>\n                {interactive ? ripple.surface : null}\n              </span>\n              <span {...stylex.props(styles.handle, on && styles.handleOn, active && (on ? styles.handleOnActive : styles.handleActive), (dragging || interactive && state.isPressed) && styles.handlePressed, state.isDisabled && (on ? styles.handleOnDisabled : styles.handleDisabled))}>\n                {icon && on ? <CheckGlyph className=\"xlup9mm x1lliihq x1kky2od\" /> : null}\n              </span>\n            </span>\n          </span>\n        </span>\n        <ControlLabel state={state}>{children}</ControlLabel>\n      </>;\n  };\n}\n\n/**\n * A switch that turns a setting on or off, with its label and optionally a\n * description or an error under it. Its state is React Aria's: pass\n * `isSelected` with `onChange` to control it, or `defaultSelected` to let it\n * keep its own. A switch takes effect as it is flipped, which is what sets\n * it apart from a checkbox in a form.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions.\n */\nfunction Switch({\n  children,\n  description,\n  error,\n  icon = false,\n  ...props\n}: RefAttributes<HTMLDivElement> & SwitchProps) {\n  const ripple = useRipple<HTMLSpanElement>();\n  const drag = useHandleDrag();\n  const validationBehavior = useFieldValidationBehavior();\n  return <SwitchField isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(controlStyles.field), props)}>\n      <SwitchButton className=\"xjp7ctv\">\n        {buttonContent(children, icon, ripple, drag)}\n      </SwitchButton>\n      <div {...stylex.props(controlStyles.messages)}>\n        <FieldMessage description={description} error={error} inset={false} />\n      </div>\n    </SwitchField>;\n}\n\n/**\n * The handle following a pointer across the track, as the switch page draws\n * a pressed switch. The seat's inset comes from the drag while one is under\n * way, and the switch settles from where the handle was let go: on past the\n * middle of the track, off before it.\n *\n * What flips the switch on an ordinary tap is React Aria's own press, which\n * ends on the pointer being released and pays no attention to where the\n * handle was dragged to — so a drag has to end that press before releasing,\n * which is what the pointer cancel is for, and settle the switch itself.\n * Settling means clicking the field's own input, the same element a tap\n * reaches in the end: the change goes through React Aria, and a controlled\n * switch stays controlled, since nothing here calls `onChange` or holds any\n * state of the switch's own. The click the pointer's release sends after\n * that is cancelled too, so nothing flips the switch a second time.\n *\n * A press that moves no further than the slop is left alone entirely, so a\n * tap flips the switch however still the pointer was — a drag starts only\n * once the pointer passes it, and from then on the handle follows every move.\n *\n * The guard for the click after a drag is cleared by the next press, not by\n * that click, since the click may never come: a touch dragged past the\n * browser's own slop sends none, and a guard left armed swallowed the next\n * tap instead.\n */\nfunction useHandleDrag() {\n  const [offset, setOffset] = useState<null | number>(null);\n  const origin = useRef<null | {\n    base: number;\n    on: boolean;\n    rtl: boolean;\n    x: number;\n  }>(null);\n  const settled = useRef<null | number>(null);\n  const cancelClick = useRef(false);\n  const onPointerCancel = useCallback(() => {\n    origin.current = null;\n    settled.current = null;\n    setOffset(null);\n  }, []);\n  const onClickCapture = useCallback((event: ReactMouseEvent<HTMLSpanElement>) => {\n    if (!cancelClick.current) {\n      return;\n    }\n    cancelClick.current = false;\n    // The label's activation is the browser's own, so this is what stops the\n    // input being flipped by a drag that settled where it began.\n    event.preventDefault();\n    event.stopPropagation();\n  }, []);\n  const onPointerMove = useCallback((event: ReactPointerEvent<HTMLSpanElement>) => {\n    const from = origin.current;\n    if (from === null) {\n      return;\n    }\n    const along = from.rtl ? from.x - event.clientX : event.clientX - from.x;\n    if (settled.current === null && Math.abs(along) <= DRAG_SLOP) {\n      return;\n    }\n    const next = Math.min(TRAVEL, Math.max(0, from.base + along));\n    settled.current = next;\n    setOffset(next);\n  }, []);\n  const onPointerUp = useCallback((event: ReactPointerEvent<HTMLSpanElement>) => {\n    const from = origin.current;\n    const stopped = settled.current;\n    const seat = event.currentTarget;\n    origin.current = null;\n    settled.current = null;\n    setOffset(null);\n    // A press that never moved is a tap, which React Aria flips on its own.\n    if (from === null || stopped === null) {\n      return;\n    }\n    // React Aria's press is about to flip the switch from wherever it\n    // started, so it is cancelled first — a pointer cancel is what ends a\n    // press without firing it — and the drag settles the switch instead.\n    seat.dispatchEvent(new PointerEvent('pointercancel', {\n      bubbles: true,\n      pointerId: event.pointerId,\n      pointerType: event.pointerType\n    }));\n    // The pointer's own click follows this, by which time the switch has\n    // already settled.\n    cancelClick.current = true;\n    if (stopped > TRAVEL / 2 === from.on) {\n      return;\n    }\n    const input = seat.closest('label')?.querySelector('input');\n    input?.click();\n  }, []);\n  const handlers = useCallback((on: boolean) => ({\n    onClickCapture,\n    onPointerCancel,\n    onPointerDown: (event: ReactPointerEvent<HTMLSpanElement>) => {\n      cancelClick.current = false;\n      if (event.pointerType === 'mouse' && event.button !== 0) {\n        return;\n      }\n      origin.current = {\n        base: on ? TRAVEL : 0,\n        on,\n        rtl: getComputedStyle(event.currentTarget).direction === 'rtl',\n        x: event.clientX\n      };\n      settled.current = null;\n      try {\n        event.currentTarget.setPointerCapture(event.pointerId);\n      } catch {\n        // A pointer the browser is not tracking has no capture to take —\n        // a synthetic event in a test, where the moves are dispatched on\n        // this element anyway.\n      }\n    },\n    onPointerMove,\n    onPointerUp\n  }), [onClickCapture, onPointerCancel, onPointerMove, onPointerUp]);\n  return {\n    handlers,\n    offset\n  };\n}\nexport type { SwitchProps };\nexport default Switch;"],"mappings":"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"}

package/dist/components/table/index.js

@@ -5,6 +5,7 @@ import { ArrowDownwardGlyph, ArrowUpwardGlyph } from "../../glyphs/index.js";
 import Checkbox from "../checkbox/index.js";
 import { CollectionLoadMore } from "../../collection/index.js";
 import { rowStyles as rowStyles$1 } from "../../row/styles.js";
+import { collectionStyles } from "../../collection/styles.js";
 import { c } from "react/compiler-runtime";
 import { createContext, useContext } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -84,6 +85,19 @@ const styles = {
 		kVAEAm: "x7wzq59",
 		kY2c9j: "x1vjfegm",
 		$$css: true
+	},
+	table: {
+		kLvRdT: "x1mwwwfo",
+		kB7OPa: "x9f619",
+		kMwMTN: "x139gbkf",
+		kMv6JI: "xpo2rfv",
+		kGuDYH: "x193rfdd",
+		k63SB2: "x1hews6w",
+		kzqmXN: "xh8yej3",
+		kb6lSQ: "xn43zvd",
+		kLWn49: "xv61bfh",
+		k3XXqK: "x1t137rt",
+		$$css: true
 	}
 };
 const ResizeLabelContext = createContext(void 0);
@@ -138,7 +152,7 @@ function resizerRule(state) {
 	}[!!(state.isResizing || state.isFocusVisible) << 0] });
 }
 function rowStyles(state) {
-	return props(styles.row, styles.focus, state.isSelected && styles.rowSelected, state.isHovered && rowStyles$1.hovered, state.isPressed && rowStyles$1.pressed, state.isDisabled && styles.rowDisabled);
+	return props(styles.row, styles.focus, state.isDragging && rowStyles$1.dragging, state.isSelected && styles.rowSelected, state.isHovered && rowStyles$1.hovered, state.isPressed && rowStyles$1.pressed, state.isDropTarget && rowStyles$1.dropTarget, state.isDisabled && styles.rowDisabled);
 }
 function sortArrowFor(direction) {
 	if (direction === void 0) return null;
@@ -197,7 +211,7 @@ function Table$1(t0) {
 		stickyHeader = t9 === void 0 ? false : t9;
 		T0 = Table;
 		t1 = props;
-		t2 = mergeStatefulStyles({ className: "x1mwwwfo x9f619 x139gbkf xpo2rfv x193rfdd x1hews6w xh8yej3 xn43zvd xv61bfh x1t137rt" }, props);
+		t2 = mergeStatefulStyles(tableClasses, props);
 		$[0] = t0;
 		$[1] = T0;
 		$[2] = onResize;
@@ -373,6 +387,9 @@ function TableCell(t0) {
 	} else t4 = $[8];
 	return t4;
 }
+function tableClasses(state) {
+	return props(styles.table, state.isDropTarget && collectionStyles.dropTarget);
+}
 /**
 * One column. `allowsSorting` is React Aria's and makes the header cell
 * itself the control that sorts; the arrow appears on the column the