@kanso-labs/kanso-ui 0.34.7 → 0.34.9

package/dist/components/menu/index.d.ts

@@ -5,7 +5,11 @@ import { ClassNameOrFunction, MenuItemProps, MenuLoadMoreItemProps, MenuProps, M
 //#region src/components/menu/index.d.ts
 type MenuAlign = OverlayAlign;
 type MenuContentProps<T extends object = object> = {
-  /** Where the menu lines up along that side. @default 'start' */
+  /**
+   * Where the menu lines up along that side. Left out, a menu lines up with
+   * the start of its trigger, and a submenu with the top of the item that
+   * opens it.
+   */
   align?: MenuAlign;
   /** Moves the menu along that side, in pixels. */
   alignOffset?: number;
@@ -32,9 +36,17 @@ type MenuContentProps<T extends object = object> = {
    * the bar and the items inside one wrapper.
    */
   search?: ReactNode;
-  /** Which side of the trigger the menu opens on. @default 'bottom' */
+  /**
+   * Which side of the trigger the menu opens on. Left out, a menu opens below
+   * its trigger and a submenu at the inline end of the item that opens it,
+   * where the item's chevron points — the places React Aria gives each.
+   * Given `align` alone, the side is `bottom`.
+   */
   side?: MenuSide;
-  /** How far the menu sits from the trigger, in pixels. @default 8 */
+  /**
+   * How far the menu sits from the trigger, in pixels. Left out, React Aria's:
+   * 8, or 0 for a menu opened with `trigger="contextMenu"`.
+   */
   sideOffset?: number;
   /** Lands on the surface, as `className` does. */
   style?: StyleOrFunction<PopoverRenderProps>;
@@ -132,6 +144,12 @@ declare namespace Menu$1 {
  *
  * The call site's `className` and `style` land on the surface, which is the
  * element a layout positions.
+ *
+ * The placement and the offsets are passed on only where the call site gives
+ * them. React Aria hands the popover a placement of its own through context —
+ * below the trigger for a menu, at the item's inline end for a submenu — and
+ * a prop set here replaces it, so a default written here opened every
+ * submenu below its item, over the rest of the menu it came from.
  */
 declare function MenuContent<T extends object = object>({ align, alignOffset, className, container, search, side, sideOffset, style, ...props }: MenuContentProps<T>): import("react").JSX.Element;
 /**

package/dist/components/menu/index.js

@@ -87,99 +87,102 @@ function Menu$1(t0) {
 *
 * The call site's `className` and `style` land on the surface, which is the
 * element a layout positions.
+*
+* The placement and the offsets are passed on only where the call site gives
+* them. React Aria hands the popover a placement of its own through context —
+* below the trigger for a menu, at the item's inline end for a submenu — and
+* a prop set here replaces it, so a default written here opened every
+* submenu below its item, over the rest of the menu it came from.
 */
 function MenuContent(t0) {
 	const $ = c(28);
+	let align;
 	let alignOffset;
 	let className;
 	let container;
 	let props;
 	let search;
+	let side;
+	let sideOffset;
 	let style;
-	let t1;
-	let t2;
-	let t3;
 	if ($[0] !== t0) {
-		({align: t1, alignOffset, className, container, search, side: t2, sideOffset: t3, style, ...props} = t0);
+		({align, alignOffset, className, container, search, side, sideOffset, style, ...props} = t0);
 		$[0] = t0;
-		$[1] = alignOffset;
-		$[2] = className;
-		$[3] = container;
-		$[4] = props;
-		$[5] = search;
-		$[6] = style;
-		$[7] = t1;
-		$[8] = t2;
-		$[9] = t3;
+		$[1] = align;
+		$[2] = alignOffset;
+		$[3] = className;
+		$[4] = container;
+		$[5] = props;
+		$[6] = search;
+		$[7] = side;
+		$[8] = sideOffset;
+		$[9] = style;
 	} else {
-		alignOffset = $[1];
-		className = $[2];
-		container = $[3];
-		props = $[4];
-		search = $[5];
-		style = $[6];
-		t1 = $[7];
-		t2 = $[8];
-		t3 = $[9];
+		align = $[1];
+		alignOffset = $[2];
+		className = $[3];
+		container = $[4];
+		props = $[5];
+		search = $[6];
+		side = $[7];
+		sideOffset = $[8];
+		style = $[9];
 	}
-	const align = t1 === void 0 ? "start" : t1;
-	const side = t2 === void 0 ? "bottom" : t2;
-	const sideOffset = t3 === void 0 ? 8 : t3;
-	let t4;
+	let t1;
 	if ($[10] !== align || $[11] !== side) {
-		t4 = placementOf(side, align);
+		t1 = side === void 0 && align === void 0 ? void 0 : placementOf(side ?? "bottom", align ?? "start");
 		$[10] = align;
 		$[11] = side;
-		$[12] = t4;
-	} else t4 = $[12];
-	let t5;
+		$[12] = t1;
+	} else t1 = $[12];
+	let t2;
 	if ($[13] !== className || $[14] !== style) {
-		t5 = mergeStatefulStyles(surfaceStyles, {
+		t2 = mergeStatefulStyles(surfaceStyles, {
 			className,
 			style
 		});
 		$[13] = className;
 		$[14] = style;
-		$[15] = t5;
-	} else t5 = $[15];
-	let t6;
+		$[15] = t2;
+	} else t2 = $[15];
+	let t3;
 	if ($[16] !== search) {
-		t6 = search === void 0 ? null : /* @__PURE__ */ jsx("div", {
+		t3 = search === void 0 ? null : /* @__PURE__ */ jsx("div", {
 			className: "x9f619 xqf7pud xn60lsn",
 			children: search
 		});
 		$[16] = search;
-		$[17] = t6;
-	} else t6 = $[17];
-	let t7;
+		$[17] = t3;
+	} else t3 = $[17];
+	let t4;
 	if ($[18] !== props) {
-		t7 = /* @__PURE__ */ jsx(Menu, {
+		t4 = /* @__PURE__ */ jsx(Menu, {
 			...props,
 			className: "x9f619 x78zum5 xdt5ytf x1t137rt"
 		});
 		$[18] = props;
-		$[19] = t7;
-	} else t7 = $[19];
-	let t8;
-	if ($[20] !== alignOffset || $[21] !== container || $[22] !== sideOffset || $[23] !== t4 || $[24] !== t5 || $[25] !== t6 || $[26] !== t7) {
-		t8 = /* @__PURE__ */ jsxs(Popover, {
+		$[19] = t4;
+	} else t4 = $[19];
+	let t5;
+	if ($[20] !== alignOffset || $[21] !== container || $[22] !== sideOffset || $[23] !== t1 || $[24] !== t2 || $[25] !== t3 || $[26] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Popover, {
 			crossOffset: alignOffset,
 			offset: sideOffset,
-			placement: t4,
+			placement: t1,
 			UNSTABLE_portalContainer: container,
-			...t5,
-			children: [t6, t7]
+			...t2,
+			children: [t3, t4]
 		});
 		$[20] = alignOffset;
 		$[21] = container;
 		$[22] = sideOffset;
-		$[23] = t4;
-		$[24] = t5;
-		$[25] = t6;
-		$[26] = t7;
-		$[27] = t8;
-	} else t8 = $[27];
-	return t8;
+		$[23] = t1;
+		$[24] = t2;
+		$[25] = t3;
+		$[26] = t4;
+		$[27] = t5;
+	} else t5 = $[27];
+	return t5;
 }
 /**
 * One action. Its slots are the row's: `leading` before the label, the label

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ComponentProps","ReactElement","ReactNode","ClassNameOrFunction","MenuItemRenderProps","PopoverRenderProps","MenuItemProps","RACMenuItemProps","MenuLoadMoreItemProps","RACMenuLoadMoreItemProps","MenuProps","RACMenuProps","MenuSectionProps","RACMenuSectionProps","MenuTriggerProps","RACMenuTriggerProps","StyleOrFunction","stylex","Header","Keyboard","Menu","RACMenu","MenuItem","RACMenuItem","MenuLoadMoreItem","RACMenuLoadMoreItem","MenuSection","RACMenuSection","MenuTrigger","RACMenuTrigger","Popover","RACPopover","SubmenuTrigger","RACSubmenuTrigger","Text","OverlayAlign","OverlaySide","CollectionLoadMore","textOf","ChevronEndGlyph","useRipple","RowContent","rowStyles","mergeStatefulStyles","mergeStyles","overlay","placementOf","popupOrigin","colors","radii","sizing","spacing","typography","Separator","MENU_MIN","MENU_MAX","styles","content","kWkggS","kaIpWk","ks0D6T","k7Eaqz","k3XXqK","k8WAf4","$$css","MenuAlign","MenuContentProps","align","alignOffset","className","container","Element","search","side","MenuSide","sideOffset","style","Omit","T","children","leading","shortcut","trailing","MenuLoadMoreProps","label","header","MenuSeparatorProps","MenuSubmenuProps","trigger","delay","itemContent","ripple","state","isDisabled","isSelected","trailingOf","itemStyles","props","base","menu","interactive","selectedMenu","disabled","t0","$","_c","t1","MenuContent","t2","t3","undefined","t4","t5","surfaceStyles","t6","t7","t8","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","textValue","T0","handlers","surface","MenuLoadMore","MenuSeparator","MenuSubmenu","popup","placement","hasSubmenu","Content","Item","LoadMore","Section","Submenu"],"sources":["../../../src/components/menu/index.tsx"],"sourcesContent":["import type { ComponentProps, ReactElement, ReactNode } from 'react';\nimport type { ClassNameOrFunction, MenuItemRenderProps, PopoverRenderProps, MenuItemProps as RACMenuItemProps, MenuLoadMoreItemProps as RACMenuLoadMoreItemProps, MenuProps as RACMenuProps, MenuSectionProps as RACMenuSectionProps, MenuTriggerProps as RACMenuTriggerProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Header, Keyboard, Menu as RACMenu, MenuItem as RACMenuItem, MenuLoadMoreItem as RACMenuLoadMoreItem, MenuSection as RACMenuSection, MenuTrigger as RACMenuTrigger, Popover as RACPopover, SubmenuTrigger as RACSubmenuTrigger, Text } from 'react-aria-components';\nimport type { OverlayAlign, OverlaySide } from '../../styles/overlay';\nimport { CollectionLoadMore } from '../../collection';\nimport { textOf } from '../../collection/text';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport { overlay, placementOf, popupOrigin } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, sizing, spacing, typography } from '../../tokens/design.tokens.stylex';\nimport Separator from '../separator';\n\n// The menus page's menu: a surface between 112 and 280 wide with a 4dp\n// corner and 8dp above and below its items, holding rows of the row module's\n// menu variant — 48dp tall, a label-large label, tertiary container when\n// selected. The surface itself is the overlay module's, shared with Popover\n// and Sheet, with the two things the menus page decides differently applied\n// over it: the corner, which is the extra-small step rather than the\n// medium one every other overlay takes, and the container colour, which is\n// the Expressive column's surface container low rather than the baseline's\n// surface container.\n//\n// Six parts, because everything a menu holds takes arbitrary content:\n// `Menu.Content`, `Menu.Item`, `Menu.Section`, `Menu.Separator`,\n// `Menu.Submenu` and `Menu.LoadMore`. A `Button` or `IconButton` placed\n// directly inside `Menu` is the trigger, wired through React Aria's context\n// rather than a part of ours — the same arrangement Sheet and Popover use.\n//\n// Four things are worth knowing about how this maps onto React Aria.\n//\n// **The item's styles are a function of its render state.** StyleX cannot\n// target `[data-selected]` on the element it is styling, so selection,\n// disabled and the rest are read from the state React Aria hands the\n// `className` function, wrapped in `mergeStatefulStyles` so a call site's own\n// `className` survives.\n//\n// **A shortcut goes through React Aria's `Keyboard` slot**, and the label\n// through its `Text` slot. The second is what makes the first work: React\n// Aria points the item's `aria-labelledby` at the labelled text, so a screen\n// reader reads the label alone and announces the keystroke separately. Left\n// as plain content, the item's name is its whole text and the shortcut is\n// read as part of what the item does. The keycap itself is the library's.\n//\n// **A submenu's arrow is drawn from render state, not from a prop.** React\n// Aria reports `hasSubmenu` on the item inside a `SubmenuTrigger`, so an item\n// that opens one gets the chevron without the call site saying so twice. The\n// glyph carries no direction of its own, so the style mirrors it under a\n// right-to-left writing mode.\n//\n// **A menu's children are a collection**, so anything that is not an item is\n// dropped: React Aria walks them looking for items and finds a search input\n// no place to be. `Menu.Content` therefore takes a `search` slot, drawn on\n// the surface above the items — which is also what puts the bar and the\n// items inside one `Autocomplete` when the menu is filtered.\n//\n// **A separator needs no slot from the call site.** React Aria's menu\n// provides the separator context, which is what `Menu.Separator` picks up —\n// that is why Separator moved onto React Aria in Phase 0. What is added here\n// is the menus page's 8dp either side of the rule.\n\nconst MENU_MIN = '112px';\nconst MENU_MAX = '280px';\nconst styles = {\n  content: {\n    kWkggS: \"x1vnz5z6\",\n    kaIpWk: \"x1tfhd1\",\n    ks0D6T: \"x1jkqq1h\",\n    k7Eaqz: \"x1c7vg25\",\n    k3XXqK: \"x1t137rt\",\n    k8WAf4: \"x1cmllll\",\n    $$css: true\n  }\n};\ntype MenuAlign = OverlayAlign;\ntype MenuContentProps<T extends object = object> = {\n  /** Where the menu lines up along that side. @default 'start' */\n  align?: MenuAlign;\n  /** Moves the menu along that side, in pixels. */\n  alignOffset?: number;\n  /**\n   * Lands on the surface, which is the element a layout positions. A\n   * function may compute the class from the surface's render state.\n   */\n  className?: ClassNameOrFunction<PopoverRenderProps>;\n  /**\n   * Where to portal the menu. Defaults to the end of `<body>`, which is right\n   * for an app that sets its StyleX theme on `:root`. An app that scopes the\n   * theme to a subtree has to point this at an element inside it, or the menu\n   * renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /**\n   * Content drawn on the surface above the items — a search bar that filters\n   * them, usually. It goes here rather than among the children because a\n   * menu's children are a collection: React Aria walks them for items and\n   * drops anything else, so an input written beside them disappears.\n   *\n   * To filter with it, wrap this whole part in `Autocomplete`, which puts\n   * the bar and the items inside one wrapper.\n   */\n  search?: ReactNode;\n  /** Which side of the trigger the menu opens on. @default 'bottom' */\n  side?: MenuSide;\n  /** How far the menu sits from the trigger, in pixels. @default 8 */\n  sideOffset?: number;\n  /** Lands on the surface, as `className` does. */\n  style?: StyleOrFunction<PopoverRenderProps>;\n} & Omit<RACMenuProps<T>, 'className' | 'style'>;\ntype MenuItemProps<T extends object = object> = {\n  /** The item's label — what it does. */\n  children?: ReactNode;\n  /** A function may compute the class from the item's render state. */\n  className?: RACMenuItemProps<T>['className'];\n  /** Content before the label, usually an icon. */\n  leading?: ReactNode;\n  /**\n   * The keystroke that runs the item, drawn as a keycap at the end. Goes\n   * through React Aria's keyboard slot, so a screen reader announces it\n   * apart from the label rather than reading the two as one name.\n   */\n  shortcut?: ReactNode;\n  /** A function may compute the style from the item's render state. */\n  style?: RACMenuItemProps<T>['style'];\n  /** Content after the label, before the shortcut. */\n  trailing?: ReactNode;\n} & Omit<RACMenuItemProps<T>, 'children' | 'className' | 'style'>;\ntype MenuLoadMoreProps = Omit<RACMenuLoadMoreItemProps, 'children'> & {\n  /**\n   * What the row says while it is loading. Read by a screen reader; the ring\n   * itself carries no text.\n   * @default 'Loading more'\n   */\n  label?: string;\n};\n\n// `children` is optional here where React Aria makes it required, so the\n// type reads the way Sheet's and Popover's do: a root that composes rather\n// than one that has to be handed something. Sheet does the same for the same\n// reason.\ntype MenuProps = Omit<RACMenuTriggerProps, 'children'> & {\n  /** The trigger, then the `Menu.Content` it opens. */\n  children?: ReactNode;\n};\ntype MenuSectionProps<T extends object = object> = Omit<RACMenuSectionProps<T>, 'children'> & {\n  /**\n   * The items in the section. A section built from data puts React Aria's\n   * `Collection` in here rather than a render function, since the header is\n   * an element beside them.\n   */\n  children?: ReactNode;\n  /**\n   * The section's heading, rendered through React Aria's header so the\n   * section is named by it. A section without one is a group with no name.\n   */\n  header?: ReactNode;\n};\ntype MenuSeparatorProps = Omit<ComponentProps<typeof Separator>, 'orientation'>;\ntype MenuSide = OverlaySide;\ntype MenuSubmenuProps = {\n  /**\n   * The item that opens the submenu, then the `Menu.Content` it opens.\n   * Exactly those two, in that order. The count is the type's to enforce;\n   * the order is not, since every JSX element has the same type.\n   */\n  children: [trigger: ReactElement, content: ReactElement];\n  /**\n   * How long the pointer rests on the item before the submenu opens, in\n   * milliseconds.\n   * @default 200\n   */\n  delay?: number;\n};\n\n// What the item draws, from React Aria's render state. Built by a call\n// rather than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result\n// on its inputs.\n//\n// The render state decides two things: the chevron, which an item inside a\n// SubmenuTrigger gets without the call site asking twice, and the supporting\n// line's colour, which the row module takes from whether the row is selected\n// or disabled.\nfunction itemContent(children: ReactNode, leading: ReactNode, shortcut: ReactNode, trailing: ReactNode, ripple: ReactNode) {\n  return (state: MenuItemRenderProps) => <>\n      <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leading} trailing={trailingOf(state, shortcut, trailing)} variant=\"menu\">\n        <Text slot=\"label\">{children}</Text>\n      </RowContent>\n      {state.isDisabled ? null : ripple}\n    </>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so an\n// item's state comes from the render state React Aria hands its className.\n// The order matters: `disabled` is applied last so it wins over both the\n// interactive and the selected branches, and StyleX replaces a property\n// whole, so it takes their hover states with it.\n// No overline, and so no three-line row: the menus page gives one item\n// height and one line of text. `List.Item` and `ListBox.Item` take the prop\n// because the lists page is what they draw, and this row is 48dp rather than\n// that page's 56.\nfunction itemStyles(state: MenuItemRenderProps) {\n  return stylex.props(rowStyles.base, rowStyles.menu, rowStyles.interactive, state.isSelected && rowStyles.selectedMenu, state.isDisabled && rowStyles.disabled);\n}\n\n/**\n * A list of actions opened from a control. Open state is React Aria's: pass\n * `isOpen` with `onOpenChange` to control it, or `defaultOpen` to let it keep\n * its own.\n *\n * A `Button` or `IconButton` placed directly inside opens it; everything the\n * menu shows goes in `Menu.Content`, since the trigger lives in the page\n * while the menu is portalled out to the end of the body.\n *\n * ```tsx\n * <Menu>\n *   <Button>Open</Button>\n *   <Menu.Content aria-label=\"Label\">\n *     <Menu.Item id=\"first\">First item</Menu.Item>\n *   </Menu.Content>\n * </Menu>\n * ```\n */\nfunction Menu({\n  children,\n  ...props\n}: MenuProps) {\n  return <RACMenuTrigger {...props}>{children}</RACMenuTrigger>;\n}\n\n/**\n * The menu itself, and the surface it is drawn on. React Aria names it after\n * the control that opened it, so `aria-label` here is ignored — name the\n * trigger instead.\n *\n * The call site's `className` and `style` land on the surface, which is the\n * element a layout positions.\n */\nfunction MenuContent<T extends object = object>({\n  align = 'start',\n  alignOffset,\n  className,\n  container,\n  search,\n  side = 'bottom',\n  sideOffset = 8,\n  style,\n  ...props\n}: MenuContentProps<T>) {\n  return <RACPopover crossOffset={alignOffset} offset={sideOffset} placement={placementOf(side, align)}\n  // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n  UNSTABLE_portalContainer={container} {...mergeStatefulStyles(surfaceStyles, {\n    className,\n    style\n  })}>\n      {search === undefined ? null : <div className=\"x9f619 xqf7pud xn60lsn\">{search}</div>}\n      <RACMenu<T> {...props} className=\"x9f619 x78zum5 xdt5ytf x1t137rt\" />\n    </RACPopover>;\n}\n\n/**\n * One action. Its slots are the row's: `leading` before the label, the label\n * as children, and `trailing` after it, with `shortcut` at the end. An item\n * that opens a submenu draws the chevron itself.\n */\nfunction MenuItem<T extends object = object>({\n  children,\n  leading,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  shortcut,\n  textValue,\n  trailing,\n  ...props\n}: MenuItemProps<T>) {\n  // The press ripple List's rows draw — see ListItem there.\n  const ripple = useRipple<HTMLDivElement>(true, {\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  }, true);\n  return <RACMenuItem textValue={textValue ?? textOf(children)} {...ripple.handlers} {...props} {...mergeStatefulStyles(itemStyles, props)}>\n      {itemContent(children, leading, shortcut, trailing, ripple.surface)}\n    </RACMenuItem>;\n}\n\n/**\n * The row shown while more items are being fetched. React Aria calls\n * `onLoadMore` when it comes into view, and draws it only while `isLoading`.\n */\nfunction MenuLoadMore({\n  label = 'Loading more',\n  ...props\n}: MenuLoadMoreProps) {\n  return <RACMenuLoadMoreItem {...props} {...mergeStyles({\n    className: \"x6s0dn4 x9f619 x78zum5 xl56j7k x1ddmzdj\"\n  }, props)}>\n      <CollectionLoadMore label={label} size=\"20px\" />\n    </RACMenuLoadMoreItem>;\n}\n\n/**\n * A named group of items. `header` names it, and is what a screen reader\n * reads before the items inside.\n */\nfunction MenuSection<T extends object = object>({\n  children,\n  header,\n  ...props\n}: MenuSectionProps<T>) {\n  return <RACMenuSection {...props}>\n      {header === undefined ? null : <Header className=\"x9f619 x1w5n3ug xrgwony x12s497w x1szcwkt xo803ec xyl1r0q xw3mh6e x6gmt8y x790zyz\">{header}</Header>}\n      {children}\n    </RACMenuSection>;\n}\n\n/**\n * A rule between groups of items. It takes its role from the menu around it,\n * so it needs no slot from the call site.\n */\nfunction MenuSeparator(props: MenuSeparatorProps) {\n  return <Separator {...props} {...mergeStyles({\n    className: \"xwpi13i\"\n  }, props)} />;\n}\n\n/**\n * An item that opens a menu of its own. Takes exactly two children: the\n * `Menu.Item` that opens it, then the `Menu.Content` it opens.\n */\nfunction MenuSubmenu(props: MenuSubmenuProps) {\n  return <RACSubmenuTrigger {...props} />;\n}\n\n// The surface grows from the edge it is anchored by, which is what makes it\n// read as coming out of the trigger. Built by a call rather than written\n// inline at the prop, which is what react-perf's no-new-function-as-prop is\n// after.\nfunction surfaceStyles(state: PopoverRenderProps) {\n  return stylex.props(overlay.popup, styles.content, popupOrigin(state.placement));\n}\n\n/** What sits after the label: the call site's content, then the shortcut or\n * the submenu's chevron. */\nfunction trailingOf(state: MenuItemRenderProps, shortcut: ReactNode, trailing: ReactNode) {\n  if (state.hasSubmenu) {\n    return <>\n        {trailing}\n        <ChevronEndGlyph className=\"x1qx5ct2 xw4jnvo x19axjrm x1c071of\" />\n      </>;\n  }\n  if (shortcut === undefined && trailing === undefined) {\n    return undefined;\n  }\n  return <>\n      {trailing}\n      {shortcut === undefined ? null : <Keyboard className=\"x1w5n3ug\">{shortcut}</Keyboard>}\n    </>;\n}\nMenu.Content = MenuContent;\nMenu.Item = MenuItem;\nMenu.LoadMore = MenuLoadMore;\nMenu.Section = MenuSection;\nMenu.Separator = MenuSeparator;\nMenu.Submenu = MenuSubmenu;\nexport type { MenuAlign, MenuContentProps, MenuItemProps, MenuLoadMoreProps, MenuProps, MenuSectionProps, MenuSeparatorProps, MenuSide, MenuSubmenuProps };\nexport default Menu;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ComponentProps","ReactElement","ReactNode","ClassNameOrFunction","MenuItemRenderProps","PopoverRenderProps","MenuItemProps","RACMenuItemProps","MenuLoadMoreItemProps","RACMenuLoadMoreItemProps","MenuProps","RACMenuProps","MenuSectionProps","RACMenuSectionProps","MenuTriggerProps","RACMenuTriggerProps","StyleOrFunction","stylex","Header","Keyboard","Menu","RACMenu","MenuItem","RACMenuItem","MenuLoadMoreItem","RACMenuLoadMoreItem","MenuSection","RACMenuSection","MenuTrigger","RACMenuTrigger","Popover","RACPopover","SubmenuTrigger","RACSubmenuTrigger","Text","OverlayAlign","OverlaySide","CollectionLoadMore","textOf","ChevronEndGlyph","useRipple","RowContent","rowStyles","mergeStatefulStyles","mergeStyles","overlay","placementOf","popupOrigin","colors","radii","sizing","spacing","typography","Separator","MENU_MIN","MENU_MAX","styles","content","kWkggS","kaIpWk","ks0D6T","k7Eaqz","k3XXqK","k8WAf4","$$css","MenuAlign","MenuContentProps","align","alignOffset","className","container","Element","search","side","MenuSide","sideOffset","style","Omit","T","children","leading","shortcut","trailing","MenuLoadMoreProps","label","header","MenuSeparatorProps","MenuSubmenuProps","trigger","delay","itemContent","ripple","state","isDisabled","isSelected","trailingOf","itemStyles","props","base","menu","interactive","selectedMenu","disabled","t0","$","_c","t1","MenuContent","undefined","t2","surfaceStyles","t3","t4","t5","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","textValue","T0","handlers","surface","t6","MenuLoadMore","MenuSeparator","MenuSubmenu","popup","placement","hasSubmenu","Content","Item","LoadMore","Section","Submenu"],"sources":["../../../src/components/menu/index.tsx"],"sourcesContent":["import type { ComponentProps, ReactElement, ReactNode } from 'react';\nimport type { ClassNameOrFunction, MenuItemRenderProps, PopoverRenderProps, MenuItemProps as RACMenuItemProps, MenuLoadMoreItemProps as RACMenuLoadMoreItemProps, MenuProps as RACMenuProps, MenuSectionProps as RACMenuSectionProps, MenuTriggerProps as RACMenuTriggerProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Header, Keyboard, Menu as RACMenu, MenuItem as RACMenuItem, MenuLoadMoreItem as RACMenuLoadMoreItem, MenuSection as RACMenuSection, MenuTrigger as RACMenuTrigger, Popover as RACPopover, SubmenuTrigger as RACSubmenuTrigger, Text } from 'react-aria-components';\nimport type { OverlayAlign, OverlaySide } from '../../styles/overlay';\nimport { CollectionLoadMore } from '../../collection';\nimport { textOf } from '../../collection/text';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport { overlay, placementOf, popupOrigin } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, sizing, spacing, typography } from '../../tokens/design.tokens.stylex';\nimport Separator from '../separator';\n\n// The menus page's menu: a surface between 112 and 280 wide with a 4dp\n// corner and 8dp above and below its items, holding rows of the row module's\n// menu variant — 48dp tall, a label-large label, tertiary container when\n// selected. The surface itself is the overlay module's, shared with Popover\n// and Sheet, with the two things the menus page decides differently applied\n// over it: the corner, which is the extra-small step rather than the\n// medium one every other overlay takes, and the container colour, which is\n// the Expressive column's surface container low rather than the baseline's\n// surface container.\n//\n// Six parts, because everything a menu holds takes arbitrary content:\n// `Menu.Content`, `Menu.Item`, `Menu.Section`, `Menu.Separator`,\n// `Menu.Submenu` and `Menu.LoadMore`. A `Button` or `IconButton` placed\n// directly inside `Menu` is the trigger, wired through React Aria's context\n// rather than a part of ours — the same arrangement Sheet and Popover use.\n//\n// Four things are worth knowing about how this maps onto React Aria.\n//\n// **The item's styles are a function of its render state.** StyleX cannot\n// target `[data-selected]` on the element it is styling, so selection,\n// disabled and the rest are read from the state React Aria hands the\n// `className` function, wrapped in `mergeStatefulStyles` so a call site's own\n// `className` survives.\n//\n// **A shortcut goes through React Aria's `Keyboard` slot**, and the label\n// through its `Text` slot. The second is what makes the first work: React\n// Aria points the item's `aria-labelledby` at the labelled text, so a screen\n// reader reads the label alone and announces the keystroke separately. Left\n// as plain content, the item's name is its whole text and the shortcut is\n// read as part of what the item does. The keycap itself is the library's.\n//\n// **A submenu's arrow is drawn from render state, not from a prop.** React\n// Aria reports `hasSubmenu` on the item inside a `SubmenuTrigger`, so an item\n// that opens one gets the chevron without the call site saying so twice. The\n// glyph carries no direction of its own, so the style mirrors it under a\n// right-to-left writing mode.\n//\n// **A menu's children are a collection**, so anything that is not an item is\n// dropped: React Aria walks them looking for items and finds a search input\n// no place to be. `Menu.Content` therefore takes a `search` slot, drawn on\n// the surface above the items — which is also what puts the bar and the\n// items inside one `Autocomplete` when the menu is filtered.\n//\n// **A separator needs no slot from the call site.** React Aria's menu\n// provides the separator context, which is what `Menu.Separator` picks up —\n// that is why Separator moved onto React Aria in Phase 0. What is added here\n// is the menus page's 8dp either side of the rule.\n\nconst MENU_MIN = '112px';\nconst MENU_MAX = '280px';\nconst styles = {\n  content: {\n    kWkggS: \"x1vnz5z6\",\n    kaIpWk: \"x1tfhd1\",\n    ks0D6T: \"x1jkqq1h\",\n    k7Eaqz: \"x1c7vg25\",\n    k3XXqK: \"x1t137rt\",\n    k8WAf4: \"x1cmllll\",\n    $$css: true\n  }\n};\ntype MenuAlign = OverlayAlign;\ntype MenuContentProps<T extends object = object> = {\n  /**\n   * Where the menu lines up along that side. Left out, a menu lines up with\n   * the start of its trigger, and a submenu with the top of the item that\n   * opens it.\n   */\n  align?: MenuAlign;\n  /** Moves the menu along that side, in pixels. */\n  alignOffset?: number;\n  /**\n   * Lands on the surface, which is the element a layout positions. A\n   * function may compute the class from the surface's render state.\n   */\n  className?: ClassNameOrFunction<PopoverRenderProps>;\n  /**\n   * Where to portal the menu. Defaults to the end of `<body>`, which is right\n   * for an app that sets its StyleX theme on `:root`. An app that scopes the\n   * theme to a subtree has to point this at an element inside it, or the menu\n   * renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /**\n   * Content drawn on the surface above the items — a search bar that filters\n   * them, usually. It goes here rather than among the children because a\n   * menu's children are a collection: React Aria walks them for items and\n   * drops anything else, so an input written beside them disappears.\n   *\n   * To filter with it, wrap this whole part in `Autocomplete`, which puts\n   * the bar and the items inside one wrapper.\n   */\n  search?: ReactNode;\n  /**\n   * Which side of the trigger the menu opens on. Left out, a menu opens below\n   * its trigger and a submenu at the inline end of the item that opens it,\n   * where the item's chevron points — the places React Aria gives each.\n   * Given `align` alone, the side is `bottom`.\n   */\n  side?: MenuSide;\n  /**\n   * How far the menu sits from the trigger, in pixels. Left out, React Aria's:\n   * 8, or 0 for a menu opened with `trigger=\"contextMenu\"`.\n   */\n  sideOffset?: number;\n  /** Lands on the surface, as `className` does. */\n  style?: StyleOrFunction<PopoverRenderProps>;\n} & Omit<RACMenuProps<T>, 'className' | 'style'>;\ntype MenuItemProps<T extends object = object> = {\n  /** The item's label — what it does. */\n  children?: ReactNode;\n  /** A function may compute the class from the item's render state. */\n  className?: RACMenuItemProps<T>['className'];\n  /** Content before the label, usually an icon. */\n  leading?: ReactNode;\n  /**\n   * The keystroke that runs the item, drawn as a keycap at the end. Goes\n   * through React Aria's keyboard slot, so a screen reader announces it\n   * apart from the label rather than reading the two as one name.\n   */\n  shortcut?: ReactNode;\n  /** A function may compute the style from the item's render state. */\n  style?: RACMenuItemProps<T>['style'];\n  /** Content after the label, before the shortcut. */\n  trailing?: ReactNode;\n} & Omit<RACMenuItemProps<T>, 'children' | 'className' | 'style'>;\ntype MenuLoadMoreProps = Omit<RACMenuLoadMoreItemProps, 'children'> & {\n  /**\n   * What the row says while it is loading. Read by a screen reader; the ring\n   * itself carries no text.\n   * @default 'Loading more'\n   */\n  label?: string;\n};\n\n// `children` is optional here where React Aria makes it required, so the\n// type reads the way Sheet's and Popover's do: a root that composes rather\n// than one that has to be handed something. Sheet does the same for the same\n// reason.\ntype MenuProps = Omit<RACMenuTriggerProps, 'children'> & {\n  /** The trigger, then the `Menu.Content` it opens. */\n  children?: ReactNode;\n};\ntype MenuSectionProps<T extends object = object> = Omit<RACMenuSectionProps<T>, 'children'> & {\n  /**\n   * The items in the section. A section built from data puts React Aria's\n   * `Collection` in here rather than a render function, since the header is\n   * an element beside them.\n   */\n  children?: ReactNode;\n  /**\n   * The section's heading, rendered through React Aria's header so the\n   * section is named by it. A section without one is a group with no name.\n   */\n  header?: ReactNode;\n};\ntype MenuSeparatorProps = Omit<ComponentProps<typeof Separator>, 'orientation'>;\ntype MenuSide = OverlaySide;\ntype MenuSubmenuProps = {\n  /**\n   * The item that opens the submenu, then the `Menu.Content` it opens.\n   * Exactly those two, in that order. The count is the type's to enforce;\n   * the order is not, since every JSX element has the same type.\n   */\n  children: [trigger: ReactElement, content: ReactElement];\n  /**\n   * How long the pointer rests on the item before the submenu opens, in\n   * milliseconds.\n   * @default 200\n   */\n  delay?: number;\n};\n\n// What the item draws, from React Aria's render state. Built by a call\n// rather than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result\n// on its inputs.\n//\n// The render state decides two things: the chevron, which an item inside a\n// SubmenuTrigger gets without the call site asking twice, and the supporting\n// line's colour, which the row module takes from whether the row is selected\n// or disabled.\nfunction itemContent(children: ReactNode, leading: ReactNode, shortcut: ReactNode, trailing: ReactNode, ripple: ReactNode) {\n  return (state: MenuItemRenderProps) => <>\n      <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leading} trailing={trailingOf(state, shortcut, trailing)} variant=\"menu\">\n        <Text slot=\"label\">{children}</Text>\n      </RowContent>\n      {state.isDisabled ? null : ripple}\n    </>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so an\n// item's state comes from the render state React Aria hands its className.\n// The order matters: `disabled` is applied last so it wins over both the\n// interactive and the selected branches, and StyleX replaces a property\n// whole, so it takes their hover states with it.\n// No overline, and so no three-line row: the menus page gives one item\n// height and one line of text. `List.Item` and `ListBox.Item` take the prop\n// because the lists page is what they draw, and this row is 48dp rather than\n// that page's 56.\nfunction itemStyles(state: MenuItemRenderProps) {\n  return stylex.props(rowStyles.base, rowStyles.menu, rowStyles.interactive, state.isSelected && rowStyles.selectedMenu, state.isDisabled && rowStyles.disabled);\n}\n\n/**\n * A list of actions opened from a control. Open state is React Aria's: pass\n * `isOpen` with `onOpenChange` to control it, or `defaultOpen` to let it keep\n * its own.\n *\n * A `Button` or `IconButton` placed directly inside opens it; everything the\n * menu shows goes in `Menu.Content`, since the trigger lives in the page\n * while the menu is portalled out to the end of the body.\n *\n * ```tsx\n * <Menu>\n *   <Button>Open</Button>\n *   <Menu.Content aria-label=\"Label\">\n *     <Menu.Item id=\"first\">First item</Menu.Item>\n *   </Menu.Content>\n * </Menu>\n * ```\n */\nfunction Menu({\n  children,\n  ...props\n}: MenuProps) {\n  return <RACMenuTrigger {...props}>{children}</RACMenuTrigger>;\n}\n\n/**\n * The menu itself, and the surface it is drawn on. React Aria names it after\n * the control that opened it, so `aria-label` here is ignored — name the\n * trigger instead.\n *\n * The call site's `className` and `style` land on the surface, which is the\n * element a layout positions.\n *\n * The placement and the offsets are passed on only where the call site gives\n * them. React Aria hands the popover a placement of its own through context —\n * below the trigger for a menu, at the item's inline end for a submenu — and\n * a prop set here replaces it, so a default written here opened every\n * submenu below its item, over the rest of the menu it came from.\n */\nfunction MenuContent<T extends object = object>({\n  align,\n  alignOffset,\n  className,\n  container,\n  search,\n  side,\n  sideOffset,\n  style,\n  ...props\n}: MenuContentProps<T>) {\n  return <RACPopover crossOffset={alignOffset} offset={sideOffset} placement={side === undefined && align === undefined ? undefined : placementOf(side ?? 'bottom', align ?? 'start')}\n  // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n  UNSTABLE_portalContainer={container} {...mergeStatefulStyles(surfaceStyles, {\n    className,\n    style\n  })}>\n      {search === undefined ? null : <div className=\"x9f619 xqf7pud xn60lsn\">{search}</div>}\n      <RACMenu<T> {...props} className=\"x9f619 x78zum5 xdt5ytf x1t137rt\" />\n    </RACPopover>;\n}\n\n/**\n * One action. Its slots are the row's: `leading` before the label, the label\n * as children, and `trailing` after it, with `shortcut` at the end. An item\n * that opens a submenu draws the chevron itself.\n */\nfunction MenuItem<T extends object = object>({\n  children,\n  leading,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  shortcut,\n  textValue,\n  trailing,\n  ...props\n}: MenuItemProps<T>) {\n  // The press ripple List's rows draw — see ListItem there.\n  const ripple = useRipple<HTMLDivElement>(true, {\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  }, true);\n  return <RACMenuItem textValue={textValue ?? textOf(children)} {...ripple.handlers} {...props} {...mergeStatefulStyles(itemStyles, props)}>\n      {itemContent(children, leading, shortcut, trailing, ripple.surface)}\n    </RACMenuItem>;\n}\n\n/**\n * The row shown while more items are being fetched. React Aria calls\n * `onLoadMore` when it comes into view, and draws it only while `isLoading`.\n */\nfunction MenuLoadMore({\n  label = 'Loading more',\n  ...props\n}: MenuLoadMoreProps) {\n  return <RACMenuLoadMoreItem {...props} {...mergeStyles({\n    className: \"x6s0dn4 x9f619 x78zum5 xl56j7k x1ddmzdj\"\n  }, props)}>\n      <CollectionLoadMore label={label} size=\"20px\" />\n    </RACMenuLoadMoreItem>;\n}\n\n/**\n * A named group of items. `header` names it, and is what a screen reader\n * reads before the items inside.\n */\nfunction MenuSection<T extends object = object>({\n  children,\n  header,\n  ...props\n}: MenuSectionProps<T>) {\n  return <RACMenuSection {...props}>\n      {header === undefined ? null : <Header className=\"x9f619 x1w5n3ug xrgwony x12s497w x1szcwkt xo803ec xyl1r0q xw3mh6e x6gmt8y x790zyz\">{header}</Header>}\n      {children}\n    </RACMenuSection>;\n}\n\n/**\n * A rule between groups of items. It takes its role from the menu around it,\n * so it needs no slot from the call site.\n */\nfunction MenuSeparator(props: MenuSeparatorProps) {\n  return <Separator {...props} {...mergeStyles({\n    className: \"xwpi13i\"\n  }, props)} />;\n}\n\n/**\n * An item that opens a menu of its own. Takes exactly two children: the\n * `Menu.Item` that opens it, then the `Menu.Content` it opens.\n */\nfunction MenuSubmenu(props: MenuSubmenuProps) {\n  return <RACSubmenuTrigger {...props} />;\n}\n\n// The surface grows from the edge it is anchored by, which is what makes it\n// read as coming out of the trigger. Built by a call rather than written\n// inline at the prop, which is what react-perf's no-new-function-as-prop is\n// after.\nfunction surfaceStyles(state: PopoverRenderProps) {\n  return stylex.props(overlay.popup, styles.content, popupOrigin(state.placement));\n}\n\n/** What sits after the label: the call site's content, then the shortcut or\n * the submenu's chevron. */\nfunction trailingOf(state: MenuItemRenderProps, shortcut: ReactNode, trailing: ReactNode) {\n  if (state.hasSubmenu) {\n    return <>\n        {trailing}\n        <ChevronEndGlyph className=\"x1qx5ct2 xw4jnvo x19axjrm x1c071of\" />\n      </>;\n  }\n  if (shortcut === undefined && trailing === undefined) {\n    return undefined;\n  }\n  return <>\n      {trailing}\n      {shortcut === undefined ? null : <Keyboard className=\"x1w5n3ug\">{shortcut}</Keyboard>}\n    </>;\n}\nMenu.Content = MenuContent;\nMenu.Item = MenuItem;\nMenu.LoadMore = MenuLoadMore;\nMenu.Section = MenuSection;\nMenu.Separator = MenuSeparator;\nMenu.Submenu = MenuSubmenu;\nexport type { MenuAlign, MenuContentProps, MenuItemProps, MenuLoadMoreProps, MenuProps, MenuSectionProps, MenuSeparatorProps, MenuSide, MenuSubmenuProps };\nexport default Menu;"],"mappings":"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"}

package/dist/components/switch/index.js

@@ -174,6 +174,7 @@ const pressedLayers = {
 	}
 };
 const TRAVEL = 20;
+const DRAG_SLOP = TRAVEL / 4;
 function buttonContent(children, icon, ripple, drag) {
 	return (state) => {
 		const interactive = !state.isDisabled && !state.isReadOnly;
@@ -301,8 +302,14 @@ function Switch(t0) {
 * state of the switch's own. The click the pointer's release sends after
 * that is cancelled too, so nothing flips the switch a second time.
 *
-* A press that never moves is left alone entirely, so a tap flips the switch
-* as it did before.
+* A press that moves no further than the slop is left alone entirely, so a
+* tap flips the switch however still the pointer was — a drag starts only
+* once the pointer passes it, and from then on the handle follows every move.
+*
+* The guard for the click after a drag is cleared by the next press, not by
+* that click, since the click may never come: a touch dragged past the
+* browser's own slop sends none, and a guard left armed swallowed the next
+* tap instead.
 */
 function useHandleDrag() {
 	const $ = c(7);
@@ -337,6 +344,7 @@ function useHandleDrag() {
 			const from = origin.current;
 			if (from === null) return;
 			const along = from.rtl ? from.x - event_0.clientX : event_0.clientX - from.x;
+			if (settled.current === null && Math.abs(along) <= DRAG_SLOP) return;
 			const next = Math.min(TRAVEL, Math.max(0, from.base + along));
 			settled.current = next;
 			setOffset(next);
@@ -372,6 +380,7 @@ function useHandleDrag() {
 			onClickCapture,
 			onPointerCancel,
 			onPointerDown: (event_2) => {
+				cancelClick.current = false;
 				if (event_2.pointerType === "mouse" && event_2.button !== 0) return;
 				origin.current = {
 					base: on ? TRAVEL : 0,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["MouseEvent","ReactMouseEvent","ReactNode","PointerEvent","ReactPointerEvent","SwitchFieldProps","RACSwitchFieldProps","SwitchButtonRenderProps","stylex","useCallback","useRef","useState","SwitchButton","SwitchField","ControlLabel","controlStyles","FieldMessage","invalidFrom","useFieldValidationBehavior","CheckGlyph","useRipple","focus","mergeStatefulStyles","colors","motion","radii","stateLayerOpacity","_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","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","$","_c","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","next","Math","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"],"sources":["../../../src/components/switch/index.tsx"],"sourcesContent":["// 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 } 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`.\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\",\n    kZKoxP: \"xlup9mm\",\n    kaIpWk: \"x16fbrrb\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"xscdzaa\",\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\",\n    $$css: true\n  },\n  handleDisabled: {\n    kWkggS: \"x1crcgwy\",\n    $$css: true\n  },\n  handleOn: {\n    kWkggS: \"x1ntwmx2\",\n    kZKoxP: \"xxk0z11\",\n    kzqmXN: \"xvy4d1p\",\n    $$css: true\n  },\n  handleOnActive: {\n    kWkggS: \"xp89om9\",\n    $$css: true\n  },\n  handleOnDisabled: {\n    kWkggS: \"x14s9m32\",\n    kMwMTN: \"x1gpw424\",\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\",\n    kZKoxP: \"x10w6t97\",\n    kVAM5u: \"x1fwvt7v\",\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\",\n    kVAM5u: \"xrh88j3\",\n    $$css: true\n  },\n  trackOn: {\n    kWkggS: \"xnety89\",\n    kVAM5u: \"x1uajy3w\",\n    $$css: true\n  },\n  trackOnDisabled: {\n    kWkggS: \"x19v6zzp\",\n    kVAM5u: \"x9r1u3d\",\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;\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}: 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 never moves is left alone entirely, so a tap flips the switch\n * as it did before.\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    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      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":["MouseEvent","ReactMouseEvent","ReactNode","PointerEvent","ReactPointerEvent","SwitchFieldProps","RACSwitchFieldProps","SwitchButtonRenderProps","stylex","useCallback","useRef","useState","SwitchButton","SwitchField","ControlLabel","controlStyles","FieldMessage","invalidFrom","useFieldValidationBehavior","CheckGlyph","useRipple","focus","mergeStatefulStyles","colors","motion","radii","stateLayerOpacity","_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","$","_c","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"],"sources":["../../../src/components/switch/index.tsx"],"sourcesContent":["// 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 } 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`.\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\",\n    kZKoxP: \"xlup9mm\",\n    kaIpWk: \"x16fbrrb\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"xscdzaa\",\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\",\n    $$css: true\n  },\n  handleDisabled: {\n    kWkggS: \"x1crcgwy\",\n    $$css: true\n  },\n  handleOn: {\n    kWkggS: \"x1ntwmx2\",\n    kZKoxP: \"xxk0z11\",\n    kzqmXN: \"xvy4d1p\",\n    $$css: true\n  },\n  handleOnActive: {\n    kWkggS: \"xp89om9\",\n    $$css: true\n  },\n  handleOnDisabled: {\n    kWkggS: \"x14s9m32\",\n    kMwMTN: \"x1gpw424\",\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\",\n    kZKoxP: \"x10w6t97\",\n    kVAM5u: \"x1fwvt7v\",\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\",\n    kVAM5u: \"xrh88j3\",\n    $$css: true\n  },\n  trackOn: {\n    kWkggS: \"xnety89\",\n    kVAM5u: \"x1uajy3w\",\n    $$css: true\n  },\n  trackOnDisabled: {\n    kWkggS: \"x19v6zzp\",\n    kVAM5u: \"x9r1u3d\",\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}: 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanso-labs/kanso-ui",
-  "version": "0.34.7",
+  "version": "0.34.9",
   "description": "A React component library built on React Aria Components primitives and styled with StyleX, with design tokens sourced from a single W3C DTCG file and compiled via Style Dictionary",
   "keywords": [
     "react",
@@ -74,7 +74,7 @@
     "@commitlint/cli": "21.2.3",
     "@commitlint/config-conventional": "21.2.3",
     "@eslint/js": "10.0.1",
-    "@kanso-labs/unplugin-style-dictionary": "0.10.10",
+    "@kanso-labs/unplugin-style-dictionary": "0.10.12",
     "@rolldown/plugin-babel": "0.2.4",
     "@storybook/addon-a11y": "10.6.0",
     "@storybook/addon-docs": "10.6.0",
@@ -92,7 +92,7 @@
     "@vitest/coverage-v8": "4.1.11",
     "babel-plugin-react-compiler": "1.0.0",
     "eslint": "10.11.0",
-    "eslint-plugin-oxlint": "1.85.0",
+    "eslint-plugin-oxlint": "1.86.0",
     "eslint-plugin-perfectionist": "5.12.1",
     "eslint-plugin-react-hooks": "7.1.1",
     "eslint-plugin-react-refresh": "0.5.7",
@@ -102,8 +102,8 @@
     "lightningcss": "1.33.0",
     "lint-staged": "17.6.0",
     "oxc-transform-react": "0.145.0",
-    "oxfmt": "0.70.0",
-    "oxlint": "1.85.0",
+    "oxfmt": "0.71.0",
+    "oxlint": "1.86.0",
     "oxlint-tsgolint": "7.0.2003",
     "playwright": "1.63.0",
     "publint": "0.3.24",
@@ -114,7 +114,7 @@
     "style-dictionary": "5.5.5",
     "tsdown": "0.23.0",
     "typescript": "6.0.3",
-    "typescript-eslint": "8.70.1",
+    "typescript-eslint": "8.71.0",
     "vite": "8.3.1",
     "vitest": "4.1.11"
   },