@kanso-labs/react-native-kanso-ui 0.9.0 → 0.10.0

package/README.md

@@ -99,9 +99,10 @@ the exception: each measures its own insets through safe-area-context's
 `SafeAreaView`, so it clears only the edges it actually meets, and on a device
 it needs no provider. Under React Native Web that view reads the provider too.
 
-Gesture Handler 2 and 3 both satisfy the peer. A `Switch` draws Gesture
-Handler's root view around its own track, so an app need not wrap itself in
-`GestureHandlerRootView` for it, and one that already does loses nothing.
+Gesture Handler 2 and 3 both satisfy the peer. A `Switch` and a `Slider` each
+draw Gesture Handler's root view around their own track, so an app need not wrap
+itself in `GestureHandlerRootView` for them, and one that already does loses
+nothing.
 
 ## Routing
 

package/dist/autocomplete/index.js

@@ -33,7 +33,21 @@ function containsIn(locale) {
 		return false;
 	};
 }
+/**
+* A match at the start of a text, as React Aria's `useFilter` makes it:
+* compared as {@link containsIn} compares, so `a` starts `AM` and `ä` starts
+* `après`. An empty search starts every text.
+*/
+function startsWithIn(locale) {
+	const collator = collatorIn(locale);
+	return (text, search) => {
+		if (search.length === 0) return true;
+		const normalized = search.normalize("NFC");
+		const start = text.normalize("NFC").slice(0, normalized.length);
+		return collator.compare(normalized, start) === 0;
+	};
+}
 //#endregion
-export { AutocompleteContext, containsIn };
+export { AutocompleteContext, containsIn, startsWithIn };
 
 //# sourceMappingURL=index.js.map

package/dist/autocomplete/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Node","createContext","AutocompleteValue","inputValue","matches","textValue","node","setInputValue","value","AutocompleteContext","collators","Map","Intl","Collator","collatorIn","locale","made","get","undefined","collator","sensitivity","usage","set","containsIn","length","text","normalize","search","start","slice","compare"],"sources":["../../src/autocomplete/index.ts"],"sourcesContent":["import type { Node } from 'react-stately'\n\nimport { createContext } from 'react'\n\n// What Autocomplete hands the search field and the list inside it. The field\n// shows `inputValue` and reports each edit through `setInputValue`; the list\n// keeps the rows `matches` keeps, which is the autocomplete's filter with\n// what has been typed already in it. Neither part takes it as a prop, so a\n// field and a list written out inside an Autocomplete are wired to it\n// wherever the page puts them.\n\ntype AutocompleteValue = {\n  /** What has been typed into the search field. */\n  readonly inputValue: string\n  /** Whether the list keeps a row, given its text and its entry. */\n  readonly matches: (textValue: string, node: Node<unknown>) => boolean\n  /** Called by the search field with each edit. */\n  readonly setInputValue: (value: string) => void\n}\n\nconst AutocompleteContext = createContext<AutocompleteValue | null>(null)\n\n// One collator per locale an app searches in, made the first time a search\n// asks for it.\nconst collators = new Map<string, Intl.Collator>()\n\n// The collator a search in `locale` compares with, made once per locale.\nfunction collatorIn(locale: string) {\n  const made = collators.get(locale)\n\n  if (made !== undefined) {\n    return made\n  }\n\n  const collator = new Intl.Collator(locale, {\n    sensitivity: 'base',\n    usage: 'search',\n  })\n  collators.set(locale, collator)\n  return collator\n}\n\n/**\n * A match anywhere in a row's text, as React Aria's `useFilter` makes it:\n * each slice of the text as long as the search is compared with it by an\n * `Intl.Collator` at base sensitivity, which tells letters apart and nothing\n * else, so case and accents are ignored. Both are normalised first, so an\n * accent typed as a combining mark matches one written as a single letter.\n * An empty search matches every row.\n */\nfunction containsIn(locale: string) {\n  const collator = collatorIn(locale)\n\n  return (textValue: string, inputValue: string) => {\n    if (inputValue.length === 0) {\n      return true\n    }\n\n    const text = textValue.normalize('NFC')\n    const search = inputValue.normalize('NFC')\n\n    for (let start = 0; start + search.length <= text.length; start++) {\n      const slice = text.slice(start, start + search.length)\n\n      if (collator.compare(search, slice) === 0) {\n        return true\n      }\n    }\n\n    return false\n  }\n}\n\nexport { AutocompleteContext, containsIn }\nexport type { AutocompleteValue }\n"],"mappings":";;AAoBA,MAAMS,sBAAsBR,cAAwC,IAAI;AAIxE,MAAMS,4BAAY,IAAIC,IAA2B;AAGjD,SAASG,WAAWC,QAAgB;CAClC,MAAMC,OAAON,UAAUO,IAAIF,MAAM;CAEjC,IAAIC,SAASE,KAAAA,GACX,OAAOF;CAGT,MAAMG,WAAW,IAAIP,KAAKC,SAASE,QAAQ;EACzCK,aAAa;EACbC,OAAO;CACT,CAAC;CACDX,UAAUY,IAAIP,QAAQI,QAAQ;CAC9B,OAAOA;AACT;;;;;;;;;AAUA,SAASI,WAAWR,QAAgB;CAClC,MAAMI,WAAWL,WAAWC,MAAM;CAElC,QAAQV,WAAmBF,eAAuB;EAChD,IAAIA,WAAWqB,WAAW,GACxB,OAAO;EAGT,MAAMC,OAAOpB,UAAUqB,UAAU,KAAK;EACtC,MAAMC,SAASxB,WAAWuB,UAAU,KAAK;EAEzC,KAAK,IAAIE,QAAQ,GAAGA,QAAQD,OAAOH,UAAUC,KAAKD,QAAQI,SAAS;GACjE,MAAMC,QAAQJ,KAAKI,MAAMD,OAAOA,QAAQD,OAAOH,MAAM;GAErD,IAAIL,SAASW,QAAQH,QAAQE,KAAK,MAAM,GACtC,OAAO;EAEX;EAEA,OAAO;CACT;AACF"}
+{"version":3,"file":"index.js","names":["Node","createContext","AutocompleteValue","inputValue","matches","textValue","node","setInputValue","value","AutocompleteContext","collators","Map","Intl","Collator","collatorIn","locale","made","get","undefined","collator","sensitivity","usage","set","containsIn","length","text","normalize","search","start","slice","compare","startsWithIn","normalized"],"sources":["../../src/autocomplete/index.ts"],"sourcesContent":["import type { Node } from 'react-stately'\n\nimport { createContext } from 'react'\n\n// What Autocomplete hands the search field and the list inside it. The field\n// shows `inputValue` and reports each edit through `setInputValue`; the list\n// keeps the rows `matches` keeps, which is the autocomplete's filter with\n// what has been typed already in it. Neither part takes it as a prop, so a\n// field and a list written out inside an Autocomplete are wired to it\n// wherever the page puts them.\n\ntype AutocompleteValue = {\n  /** What has been typed into the search field. */\n  readonly inputValue: string\n  /** Whether the list keeps a row, given its text and its entry. */\n  readonly matches: (textValue: string, node: Node<unknown>) => boolean\n  /** Called by the search field with each edit. */\n  readonly setInputValue: (value: string) => void\n}\n\nconst AutocompleteContext = createContext<AutocompleteValue | null>(null)\n\n// One collator per locale an app searches in, made the first time a search\n// asks for it.\nconst collators = new Map<string, Intl.Collator>()\n\n// The collator a search in `locale` compares with, made once per locale.\nfunction collatorIn(locale: string) {\n  const made = collators.get(locale)\n\n  if (made !== undefined) {\n    return made\n  }\n\n  const collator = new Intl.Collator(locale, {\n    sensitivity: 'base',\n    usage: 'search',\n  })\n  collators.set(locale, collator)\n  return collator\n}\n\n/**\n * A match anywhere in a row's text, as React Aria's `useFilter` makes it:\n * each slice of the text as long as the search is compared with it by an\n * `Intl.Collator` at base sensitivity, which tells letters apart and nothing\n * else, so case and accents are ignored. Both are normalised first, so an\n * accent typed as a combining mark matches one written as a single letter.\n * An empty search matches every row.\n */\nfunction containsIn(locale: string) {\n  const collator = collatorIn(locale)\n\n  return (textValue: string, inputValue: string) => {\n    if (inputValue.length === 0) {\n      return true\n    }\n\n    const text = textValue.normalize('NFC')\n    const search = inputValue.normalize('NFC')\n\n    for (let start = 0; start + search.length <= text.length; start++) {\n      const slice = text.slice(start, start + search.length)\n\n      if (collator.compare(search, slice) === 0) {\n        return true\n      }\n    }\n\n    return false\n  }\n}\n\n/**\n * A match at the start of a text, as React Aria's `useFilter` makes it:\n * compared as {@link containsIn} compares, so `a` starts `AM` and `ä` starts\n * `après`. An empty search starts every text.\n */\nfunction startsWithIn(locale: string) {\n  const collator = collatorIn(locale)\n\n  return (text: string, search: string) => {\n    if (search.length === 0) {\n      return true\n    }\n\n    const normalized = search.normalize('NFC')\n    const start = text.normalize('NFC').slice(0, normalized.length)\n\n    return collator.compare(normalized, start) === 0\n  }\n}\n\nexport { AutocompleteContext, containsIn, startsWithIn }\nexport type { AutocompleteValue }\n"],"mappings":";;AAoBA,MAAMS,sBAAsBR,cAAwC,IAAI;AAIxE,MAAMS,4BAAY,IAAIC,IAA2B;AAGjD,SAASG,WAAWC,QAAgB;CAClC,MAAMC,OAAON,UAAUO,IAAIF,MAAM;CAEjC,IAAIC,SAASE,KAAAA,GACX,OAAOF;CAGT,MAAMG,WAAW,IAAIP,KAAKC,SAASE,QAAQ;EACzCK,aAAa;EACbC,OAAO;CACT,CAAC;CACDX,UAAUY,IAAIP,QAAQI,QAAQ;CAC9B,OAAOA;AACT;;;;;;;;;AAUA,SAASI,WAAWR,QAAgB;CAClC,MAAMI,WAAWL,WAAWC,MAAM;CAElC,QAAQV,WAAmBF,eAAuB;EAChD,IAAIA,WAAWqB,WAAW,GACxB,OAAO;EAGT,MAAMC,OAAOpB,UAAUqB,UAAU,KAAK;EACtC,MAAMC,SAASxB,WAAWuB,UAAU,KAAK;EAEzC,KAAK,IAAIE,QAAQ,GAAGA,QAAQD,OAAOH,UAAUC,KAAKD,QAAQI,SAAS;GACjE,MAAMC,QAAQJ,KAAKI,MAAMD,OAAOA,QAAQD,OAAOH,MAAM;GAErD,IAAIL,SAASW,QAAQH,QAAQE,KAAK,MAAM,GACtC,OAAO;EAEX;EAEA,OAAO;CACT;AACF;;;;;;AAOA,SAASE,aAAahB,QAAgB;CACpC,MAAMI,WAAWL,WAAWC,MAAM;CAElC,QAAQU,MAAcE,WAAmB;EACvC,IAAIA,OAAOH,WAAW,GACpB,OAAO;EAGT,MAAMQ,aAAaL,OAAOD,UAAU,KAAK;EACzC,MAAME,QAAQH,KAAKC,UAAU,KAAK,CAAC,CAACG,MAAM,GAAGG,WAAWR,MAAM;EAE9D,OAAOL,SAASW,QAAQE,YAAYJ,KAAK,MAAM;CACjD;AACF"}

package/dist/button/group.d.ts

@@ -0,0 +1,5 @@
+import "../press/index.js";
+import "./index.js";
+import { PressableProps, StyleProp, ViewStyle } from "react-native";
+import "react-native-reanimated";
+import "react-stately/useToggleGroupState";

package/dist/button/group.js

@@ -0,0 +1,115 @@
+import { useTheme } from "../theme/scope.js";
+import { toggleState } from "./index.js";
+import { StyleSheet } from "react-native";
+import { Easing, useAnimatedStyle, useReducedMotion, withTiming } from "react-native-reanimated";
+import { createContext } from "react";
+//#region src/button/group.ts
+const ButtonGroupItemContext = createContext(null);
+const groupStyles = StyleSheet.create({ target: { minWidth: 48 } });
+/**
+* The corners the group around a button gives it, from the button's press
+* feedback and whether it is selected. Nothing outside a group that shapes
+* its buttons, which leaves the button its own shape.
+*/
+function groupCornersOf(group, { hovered, pressed, ring }, selected) {
+	return group?.corners?.({
+		active: hovered || pressed || ring !== void 0,
+		pressed,
+		selected
+	});
+}
+/**
+* The press handlers a button in a group that tracks presses takes: its own,
+* with the group told first, given the width `groupWidthThen` last recorded.
+* Its own alone anywhere else.
+*/
+function groupPressHandlers(group, width, onPressIn, onPressOut) {
+	const start = group?.onPressStart;
+	if (start === void 0) return {
+		onPressIn,
+		onPressOut
+	};
+	const end = group?.onPressEnd;
+	return {
+		onPressIn: (event) => {
+			start(width.get());
+			onPressIn?.(event);
+		},
+		onPressOut: (event) => {
+			end?.();
+			onPressOut?.(event);
+		}
+	};
+}
+/**
+* Where a button with this `id` stands in the selecting group around it: how
+* it is announced, whether it is chosen, and what a press on it changes.
+* Nothing outside a group that selects, or for a button without an `id`,
+* which has no key to be chosen by.
+*/
+function groupSelectionOf(group, id) {
+	const selection = group?.selection;
+	if (selection === void 0) return;
+	const { single, state } = selection;
+	const selected = id !== void 0 && state.selectedKeys.has(id);
+	return {
+		accessibility: single ? {
+			"aria-checked": selected,
+			role: "radio"
+		} : {
+			...toggleState(selected),
+			role: "button"
+		},
+		selected,
+		toggle: () => {
+			if (id !== void 0) state.toggleKey(id);
+		}
+	};
+}
+/**
+* The call site's own `onLayout`, after recording the button's width for the
+* group to widen it from, in a group that tracks presses. The call site's
+* own alone anywhere else.
+*/
+function groupWidthThen(group, width, onLayout) {
+	if (group?.onPressStart === void 0) return onLayout;
+	return (event) => {
+		width.set(event.nativeEvent.layout.width);
+		onLayout?.(event);
+	};
+}
+/**
+* The style a standard group eases a button's width by: `property` at `base`
+* at rest, moved by the group's shift while a press is held, over the motion
+* tokens' short duration on the emphasised curve, as the corner eases, and at
+* once under reduced motion. Padding takes half the shift on either side, as
+* `paddingLeft` and `paddingRight` rather than `paddingHorizontal`: on web
+* Reanimated writes an animated style straight onto the element, where a
+* React Native shorthand is no CSS property and is dropped. The two sides are
+* equal, so they need no direction, and on native either beats the
+* `paddingHorizontal` a button rests at. Nothing outside a group that tracks
+* presses, which leaves the button's own size alone.
+*/
+function useGroupShift(group, base, property) {
+	const { motion } = useTheme();
+	const reduceMotion = useReducedMotion();
+	const shift = group?.shift ?? 0;
+	const target = base + (property === "width" ? shift : shift / 2);
+	const timing = {
+		duration: motion.durationShort2,
+		easing: Easing.bezier(...motion.easingEmphasized)
+	};
+	const style = useAnimatedStyle(() => {
+		"worklet";
+		const value = reduceMotion ? target : withTiming(target, timing);
+		return property === "width" ? { width: value } : {
+			paddingLeft: value,
+			paddingRight: value
+		};
+	});
+	return group?.onPressStart === void 0 ? void 0 : style;
+}
+//#endregion
+export { ButtonGroupItemContext, groupCornersOf, groupPressHandlers, groupSelectionOf, groupStyles, groupWidthThen, useGroupShift };
+
+//# sourceMappingURL=group.js.map

package/dist/button/group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"group.js","names":["GestureResponderEvent","LayoutChangeEvent","PressableProps","StyleProp","ViewStyle","SharedValue","ToggleGroupState","createContext","StyleSheet","Easing","useAnimatedStyle","useReducedMotion","withTiming","ControlSize","PressFeedback","toggleState","TARGET_SIZE","useTheme","ButtonGroupItem","corners","state","GroupButtonState","GroupCorners","held","isDisabled","keepsTarget","onPressEnd","onPressStart","width","selection","single","shift","size","style","active","pressed","selected","end","start","GroupMembership","accessibility","role","toggle","ButtonGroupItemContext","groupStyles","create","target","minWidth","groupCornersOf","group","hovered","ring","undefined","groupPressHandlers","onPressIn","onPressOut","event","get","groupSelectionOf","id","selectedKeys","has","toggleKey","groupWidthThen","onLayout","set","nativeEvent","layout","useGroupShift","base","property","motion","reduceMotion","timing","duration","durationShort2","easing","bezier","easingEmphasized","value","paddingLeft","paddingRight"],"sources":["../../src/button/group.ts"],"sourcesContent":["import type {\n  GestureResponderEvent,\n  LayoutChangeEvent,\n  PressableProps,\n  StyleProp,\n  ViewStyle,\n} from 'react-native'\nimport type { SharedValue } from 'react-native-reanimated'\nimport type { ToggleGroupState } from 'react-stately/useToggleGroupState'\n\nimport { createContext } from 'react'\nimport { StyleSheet } from 'react-native'\nimport {\n  Easing,\n  useAnimatedStyle,\n  useReducedMotion,\n  withTiming,\n} from 'react-native-reanimated'\n\nimport type { ControlSize } from '.'\nimport type { PressFeedback } from '../press'\n\nimport { toggleState } from '.'\nimport { TARGET_SIZE } from '../press'\nimport { useTheme } from '../theme/scope'\n\n// What a group hands each Button or IconButton in it, as web's\n// src/button/context.ts does, for ButtonGroup's two variants and\n// SplitButton's two halves: the group's size, whether it is disabled, its\n// selection, the corners it gives the button, a standard group's part in a\n// press, and a split button's paddings and held press. Apart from\n// src/components, which holds the public components alone, and from\n// ./index.ts, which the group reads too.\n\ntype ButtonGroupItem = {\n  /**\n   * The corners a connected group gives the button for its state, which take\n   * the place of its own shape.\n   */\n  readonly corners?: (state: GroupButtonState) => GroupCorners\n  /**\n   * Whether the button draws its pressed layer though nothing presses it, as\n   * a split button's menu half does while its menu is open. Button reads\n   * it, which is what a split button's halves are.\n   */\n  readonly held?: boolean\n  /** Whether the group is disabled, which disables every button in it. */\n  readonly isDisabled: boolean\n  /**\n   * Whether the button keeps the 48dp touch target as its least width, as\n   * the two smallest do in a connected group.\n   */\n  readonly keepsTarget: boolean\n  /** Called as a press on the button ends, so the group lets go of it. */\n  readonly onPressEnd?: () => void\n  /**\n   * Called as a press on the button starts, with its width, so a standard\n   * group can widen it and narrow its neighbours.\n   */\n  readonly onPressStart?: (width: number) => void\n  /**\n   * The group's selection, by the buttons' `id`s, when it selects: `single`\n   * for one at a time, as a radio group, or several, as toggles.\n   */\n  readonly selection?: {\n    readonly single: boolean\n    readonly state: ToggleGroupState\n  }\n  /**\n   * How far the button's width moves while it or a neighbour is pressed, in\n   * dp: the pressed button's gain, or a neighbour's loss as a negative. Zero\n   * at rest.\n   */\n  readonly shift: number\n  /** The group's size, which a button takes unless it names its own. */\n  readonly size: ControlSize | undefined\n  /**\n   * A style laid over the button's own size, before its corners: a split\n   * button's paddings. Button reads it, as it reads `held`.\n   */\n  readonly style?: StyleProp<ViewStyle>\n}\n\n/** What a group shapes a button's corners from. */\ntype GroupButtonState = {\n  /**\n   * Whether a pointer is over the button, its focus ring shows or it is\n   * pressed, which a split button opens its inner corners out for.\n   */\n  readonly active: boolean\n  readonly pressed: boolean\n  readonly selected: boolean\n}\n\n/** A button's corners on its two sides, in dp: start and end. */\ntype GroupCorners = { readonly end: number; readonly start: number }\n\n/** How a button in a selecting group is announced, and whether it is chosen. */\ntype GroupMembership = {\n  readonly accessibility: {\n    readonly 'aria-checked'?: boolean\n    readonly 'aria-pressed'?: boolean\n    readonly 'aria-selected'?: boolean\n    readonly role: 'button' | 'radio'\n  }\n  readonly selected: boolean\n  readonly toggle: () => void\n}\n\nconst ButtonGroupItemContext = createContext<ButtonGroupItem | null>(null)\n\nconst groupStyles = StyleSheet.create({\n  // The touch target the two smallest sizes keep in a connected group.\n  target: {\n    minWidth: TARGET_SIZE,\n  },\n})\n\n/**\n * The corners the group around a button gives it, from the button's press\n * feedback and whether it is selected. Nothing outside a group that shapes\n * its buttons, which leaves the button its own shape.\n */\nfunction groupCornersOf(\n  group: ButtonGroupItem | null,\n  { hovered, pressed, ring }: PressFeedback,\n  selected: boolean,\n): GroupCorners | undefined {\n  return group?.corners?.({\n    active: hovered || pressed || ring !== undefined,\n    pressed,\n    selected,\n  })\n}\n\n/**\n * The press handlers a button in a group that tracks presses takes: its own,\n * with the group told first, given the width `groupWidthThen` last recorded.\n * Its own alone anywhere else.\n */\nfunction groupPressHandlers(\n  group: ButtonGroupItem | null,\n  width: SharedValue<number>,\n  onPressIn: PressableProps['onPressIn'],\n  onPressOut: PressableProps['onPressOut'],\n) {\n  const start = group?.onPressStart\n\n  if (start === undefined) {\n    return { onPressIn, onPressOut }\n  }\n\n  const end = group?.onPressEnd\n\n  return {\n    onPressIn: (event: GestureResponderEvent) => {\n      start(width.get())\n      onPressIn?.(event)\n    },\n    onPressOut: (event: GestureResponderEvent) => {\n      end?.()\n      onPressOut?.(event)\n    },\n  }\n}\n\n/**\n * Where a button with this `id` stands in the selecting group around it: how\n * it is announced, whether it is chosen, and what a press on it changes.\n * Nothing outside a group that selects, or for a button without an `id`,\n * which has no key to be chosen by.\n */\nfunction groupSelectionOf(\n  group: ButtonGroupItem | null,\n  id: string | undefined,\n): GroupMembership | undefined {\n  const selection = group?.selection\n\n  if (selection === undefined) {\n    return undefined\n  }\n\n  const { single, state } = selection\n  const selected = id !== undefined && state.selectedKeys.has(id)\n\n  return {\n    accessibility: single\n      ? { 'aria-checked': selected, role: 'radio' }\n      : { ...toggleState(selected), role: 'button' },\n    selected,\n    toggle: () => {\n      if (id !== undefined) {\n        state.toggleKey(id)\n      }\n    },\n  }\n}\n\n/**\n * The call site's own `onLayout`, after recording the button's width for the\n * group to widen it from, in a group that tracks presses. The call site's\n * own alone anywhere else.\n */\nfunction groupWidthThen(\n  group: ButtonGroupItem | null,\n  width: SharedValue<number>,\n  onLayout: PressableProps['onLayout'],\n): PressableProps['onLayout'] {\n  if (group?.onPressStart === undefined) {\n    return onLayout\n  }\n\n  return (event: LayoutChangeEvent) => {\n    width.set(event.nativeEvent.layout.width)\n    onLayout?.(event)\n  }\n}\n\n/**\n * The style a standard group eases a button's width by: `property` at `base`\n * at rest, moved by the group's shift while a press is held, over the motion\n * tokens' short duration on the emphasised curve, as the corner eases, and at\n * once under reduced motion. Padding takes half the shift on either side, as\n * `paddingLeft` and `paddingRight` rather than `paddingHorizontal`: on web\n * Reanimated writes an animated style straight onto the element, where a\n * React Native shorthand is no CSS property and is dropped. The two sides are\n * equal, so they need no direction, and on native either beats the\n * `paddingHorizontal` a button rests at. Nothing outside a group that tracks\n * presses, which leaves the button's own size alone.\n */\nfunction useGroupShift(\n  group: ButtonGroupItem | null,\n  base: number,\n  property: 'padding' | 'width',\n) {\n  const { motion } = useTheme()\n  const reduceMotion = useReducedMotion()\n  const shift = group?.shift ?? 0\n  const target = base + (property === 'width' ? shift : shift / 2)\n  const timing = {\n    duration: motion.durationShort2,\n    easing: Easing.bezier(...motion.easingEmphasized),\n  }\n  const style = useAnimatedStyle(() => {\n    'worklet'\n    const value = reduceMotion ? target : withTiming(target, timing)\n\n    return property === 'width'\n      ? { width: value }\n      : { paddingLeft: value, paddingRight: value }\n  })\n\n  return group?.onPressStart === undefined ? undefined : style\n}\n\nexport {\n  ButtonGroupItemContext,\n  groupCornersOf,\n  groupPressHandlers,\n  groupSelectionOf,\n  groupStyles,\n  groupWidthThen,\n  useGroupShift,\n}\nexport type { ButtonGroupItem, GroupButtonState, GroupCorners }\n"],"mappings":";;;;;;AA6GA,MAAM2C,yBAAyBpC,cAAsC,IAAI;AAEzE,MAAMqC,cAAcpC,WAAWqC,OAAO,EAEpCC,QAAQ,EACNC,UAAAA,GACF,EACF,CAAC;;;;;;AAOD,SAASC,eACPC,OACA,EAAEC,SAASf,SAASgB,QACpBf,UAC0B;CAC1B,OAAOa,OAAO9B,UAAU;EACtBe,QAAQgB,WAAWf,WAAWgB,SAASC,KAAAA;EACvCjB;EACAC;CACF,CAAC;AACH;;;;;;AAOA,SAASiB,mBACPJ,OACArB,OACA0B,WACAC,YACA;CACA,MAAMjB,QAAQW,OAAOtB;CAErB,IAAIW,UAAUc,KAAAA,GACZ,OAAO;EAAEE;EAAWC;CAAW;CAGjC,MAAMlB,MAAMY,OAAOvB;CAEnB,OAAO;EACL4B,YAAYE,UAAiC;GAC3ClB,MAAMV,MAAM6B,IAAI,CAAC;GACjBH,YAAYE,KAAK;EACnB;EACAD,aAAaC,UAAiC;GAC5CnB,MAAM;GACNkB,aAAaC,KAAK;EACpB;CACF;AACF;;;;;;;AAQA,SAASE,iBACPT,OACAU,IAC6B;CAC7B,MAAM9B,YAAYoB,OAAOpB;CAEzB,IAAIA,cAAcuB,KAAAA,GAChB;CAGF,MAAM,EAAEtB,QAAQV,UAAUS;CAC1B,MAAMO,WAAWuB,OAAOP,KAAAA,KAAahC,MAAMwC,aAAaC,IAAIF,EAAE;CAE9D,OAAO;EACLnB,eAAeV,SACX;GAAE,gBAAgBM;GAAUK,MAAM;EAAQ,IAC1C;GAAE,GAAG1B,YAAYqB,QAAQ;GAAGK,MAAM;EAAS;EAC/CL;EACAM,cAAc;GACZ,IAAIiB,OAAOP,KAAAA,GACThC,MAAM0C,UAAUH,EAAE;EAEtB;CACF;AACF;;;;;;AAOA,SAASI,eACPd,OACArB,OACAoC,UAC4B;CAC5B,IAAIf,OAAOtB,iBAAiByB,KAAAA,GAC1B,OAAOY;CAGT,QAAQR,UAA6B;EACnC5B,MAAMqC,IAAIT,MAAMU,YAAYC,OAAOvC,KAAK;EACxCoC,WAAWR,KAAK;CAClB;AACF;;;;;;;;;;;;;AAcA,SAAAY,cAAAnB,OAAAoB,MAAAC,UAAA;CAKE,MAAA,EAAAC,WAAmBtD,SAAS;CAC5B,MAAAuD,eAAqB7D,iBAAiB;CACtC,MAAAoB,QAAckB,OAAKlB,SAAL;CACd,MAAAe,SAAeuB,QAAQC,aAAa,UAAbvC,QAA+BA,QAAQ;CAC9D,MAAA0C,SAAe;EAAAC,UACHH,OAAMI;EAAeC,QACvBnE,OAAMoE,OAAO,GAAIN,OAAMO,gBAAiB;CAClD;CACA,MAAA7C,QAAcvB,uBAAiB;EAAA;EAE7B,MAAAqE,QAAcP,eAAA1B,SAAwBlC,WAAWkC,QAAQ2B,MAAM;EAAC,OAEzDH,aAAa,UAAb,EAAA1C,OACMmD,MACiC,IAFvC;GAAAC,aAEYD;GAAKE,cAAgBF;EAAM;CAAC,CAChD;CAAC,OAEK9B,OAAKtB,iBAAmByB,KAAAA,IAAxBA,KAAAA,IAAAnB;AAAqD"}

package/dist/button/index.d.ts

@@ -1,3 +1,4 @@
+import "./group.js";
 import { HostInstance, LayoutChangeEvent, PressableProps } from "react-native";
 import { Ref } from "react";
 //#region src/button/index.d.ts
@@ -83,6 +84,8 @@ type ButtonToggleForm = ButtonPending & {
   readonly slot?: never;
   readonly type?: never;
 };
+/** The five control heights both pages give, by the names both props take. */
+type ControlSize = 'lg' | 'md' | 'xl' | 'xs' | 'xxl';
 //#endregion
-export type { ButtonLinkForm, ButtonPressForm, ButtonToggleForm };
+export type { ButtonLinkForm, ButtonPressForm, ButtonToggleForm, ControlSize };
 //# sourceMappingURL=index.d.ts.map

package/dist/button/index.js

@@ -2,7 +2,7 @@ import { useTheme } from "../theme/scope.js";
 import { useOpenLink } from "../router/index.js";
 import { FormContext } from "../form/index.js";
 import { refsOf } from "../ref/index.js";
-import { ButtonSlotContext } from "./slots.js";
+import { ButtonSlotContext, ButtonTooltipContext } from "./slots.js";
 import { c } from "react/compiler-runtime";
 import { Platform, Pressable, StyleSheet } from "react-native";
 import Animated, { Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withTiming } from "react-native-reanimated";
@@ -129,17 +129,23 @@ function useButtonAction(t0) {
 /**
 * The corner a button eases to, over the motion tokens' short duration on the
 * emphasised curve, and at once for a reader who asks the device for reduced
-* motion. The pill is the radius scale's `pill`, far larger than any button,
-* so the ease runs from half the button's measured height rather than from
-* that: otherwise the corner would hold the pill for most of the ease and
-* jump at its end. The `onLayout` it hands back measures the button, then
-* calls the call site's own.
+* motion: one radius for all four, or a connected ButtonGroup's two, one for
+* the start side and one for the end, which follow the layout's direction on
+* native. On web Reanimated writes an animated style straight onto the
+* element, where only the physical corners are CSS properties, so the start
+* side is the left there, as the web Storybook lays a row out.
+* The pill is the radius scale's `pill`, far larger than any button, so the
+* ease runs from half the button's measured height rather than from that:
+* otherwise the corner would hold the pill for most of the ease and jump at
+* its end. The `onLayout` it hands back measures the button, then calls the
+* call site's own.
 */
 function useCorner(radius, onLayout) {
 	const $ = c(11);
 	const { motion } = useTheme();
 	const reduceMotion = useReducedMotion();
 	const height = useSharedValue(0);
+	const web = Platform.OS === "web";
 	const t0 = motion.durationShort2;
 	let t1;
 	if ($[0] !== motion.easingEmphasized) {
@@ -161,8 +167,23 @@ function useCorner(radius, onLayout) {
 	const corner = useAnimatedStyle(() => {
 		"worklet";
 		const measured = height.get();
-		const target = measured > 0 ? Math.min(radius, measured / 2) : radius;
-		return { borderRadius: reduceMotion ? target : withTiming(target, timing) };
+		const ease = (value) => {
+			const target = measured > 0 ? Math.min(value, measured / 2) : value;
+			return reduceMotion ? target : withTiming(target, timing);
+		};
+		if (typeof radius === "number") return { borderRadius: ease(radius) };
+		if (web) return {
+			borderBottomLeftRadius: ease(radius.start),
+			borderBottomRightRadius: ease(radius.end),
+			borderTopLeftRadius: ease(radius.start),
+			borderTopRightRadius: ease(radius.end)
+		};
+		return {
+			borderBottomEndRadius: ease(radius.end),
+			borderBottomStartRadius: ease(radius.start),
+			borderTopEndRadius: ease(radius.end),
+			borderTopStartRadius: ease(radius.start)
+		};
 	});
 	let t3;
 	if ($[5] !== height || $[6] !== onLayout) {
@@ -189,26 +210,27 @@ function useCorner(radius, onLayout) {
 * be placed against, alongside the call site's own `ref`, `aria-expanded`
 * says whether the overlay is open, and the overlay's hover and long press
 * handlers run after the call site's. A button filling no such slot, or a
-* link, keeps its own props untouched.
+* link, keeps its own props untouched. A button inside a `Tooltip` takes the
+* tooltip's node, hover, press and long press handlers on top of either, and
+* its label as the hint, unless the call site gave a hint of its own.
 */
-function useSlotTrigger({ delayLongPress, href, onHoverIn, onHoverOut, onLongPress, ref, slot }) {
+function useSlotTrigger({ accessibilityHint, delayLongPress, href, onHoverIn, onHoverOut, onLongPress, onPressIn, onPressOut, ref, slot }) {
 	const slots = use(ButtonSlotContext);
+	const tooltip = use(ButtonTooltipContext) ?? void 0;
 	const trigger = href === void 0 && slot === void 0 ? slots?.trigger : void 0;
 	return {
-		...trigger === void 0 ? {
-			delayLongPress,
-			ref
-		} : {
-			"aria-expanded": trigger.expanded,
-			delayLongPress: trigger.delayLongPress ?? delayLongPress,
-			ref: refsOf(trigger.ref, ref)
-		},
-		onHoverIn: andThen(onHoverIn, trigger?.onHoverIn),
-		onHoverOut: andThen(onHoverOut, trigger?.onHoverOut),
-		onLongPress: andThen(onLongPress, trigger?.onLongPress)
+		accessibilityHint: accessibilityHint ?? tooltip?.hint,
+		...trigger === void 0 ? void 0 : { "aria-expanded": trigger.expanded },
+		delayLongPress: trigger?.delayLongPress ?? tooltip?.delayLongPress ?? delayLongPress,
+		onHoverIn: andThen(andThen(onHoverIn, trigger?.onHoverIn), tooltip?.onHoverIn),
+		onHoverOut: andThen(andThen(onHoverOut, trigger?.onHoverOut), tooltip?.onHoverOut),
+		onLongPress: andThen(andThen(onLongPress, trigger?.onLongPress), tooltip?.onLongPress),
+		onPressIn: andThen(onPressIn, tooltip?.onPressIn),
+		onPressOut: andThen(onPressOut, tooltip?.onPressOut),
+		ref: trigger === void 0 && tooltip === void 0 ? ref : refsOf(trigger?.ref, tooltip?.ref, ref)
 	};
 }
 //#endregion
-export { AnimatedPressable, HEIGHTS, OUTLINE_WIDTHS, PRESSED_CORNERS, buttonStyles, toggleState, useButtonAction, useCorner, useSlotTrigger };
+export { AnimatedPressable, HEIGHTS, OUTLINE_WIDTHS, PRESSED_CORNERS, buttonStyles, pressThen, toggleState, useButtonAction, useCorner, useSlotTrigger };
 
 //# sourceMappingURL=index.js.map

package/dist/button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Ref","GestureResponderEvent","HostInstance","LayoutChangeEvent","PressableProps","SharedValue","use","useState","Platform","Pressable","StyleSheet","Animated","Easing","useAnimatedStyle","useReducedMotion","useSharedValue","withTiming","ResolvedTheme","FormContext","refsOf","useOpenLink","useTheme","ButtonSlotContext","ButtonLinkForm","defaultSelected","href","isPending","isSelected","onChange","pendingLabel","slot","type","ButtonPending","ButtonPressForm","ButtonToggleForm","ControlSize","SlotTriggerProps","delayLongPress","onHoverIn","onHoverOut","onLongPress","ref","ToggleState","HEIGHTS","lg","md","xl","xs","xxl","const","Record","OUTLINE_WIDTHS","Readonly","PRESSED_CORNERS","AnimatedPressable","createAnimatedComponent","toggleState","select","selected","default","web","buttonStyles","create","clip","bottom","left","overflow","pointerEvents","position","right","top","andThen","own","event","E","undefined","measureThen","height","onLayout","set","nativeEvent","layout","pressThen","onPress","then","useButtonAction","t0","$","_c","isToggle","openLink","form","slots","ownSelected","setOwnSelected","filled","t1","follow","requestSubmit","t2","t3","useCorner","radius","motion","reduceMotion","durationShort2","easingEmphasized","bezier","duration","easing","timing","corner","measured","get","target","Math","min","borderRadius","t4","useSlotTrigger","trigger","expanded","_c"],"sources":["../../src/button/index.ts"],"sourcesContent":["import type { Ref } from 'react'\nimport type {\n  GestureResponderEvent,\n  HostInstance,\n  LayoutChangeEvent,\n  PressableProps,\n} from 'react-native'\nimport type { SharedValue } from 'react-native-reanimated'\n\nimport { use, useState } from 'react'\nimport { Platform, Pressable, StyleSheet } from 'react-native'\nimport Animated, {\n  Easing,\n  useAnimatedStyle,\n  useReducedMotion,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated'\n\nimport type { ResolvedTheme } from '../theme/scope'\n\nimport { FormContext } from '../form'\nimport { refsOf } from '../ref'\nimport { useOpenLink } from '../router'\nimport { useTheme } from '../theme/scope'\nimport { ButtonSlotContext } from './slots'\n\n// What every button does past its own styles, shared by Button and\n// IconButton as web's src/button is: the three forms a button takes, the\n// toggle's state and how it is announced, what a press does after the call\n// site's own `onPress`, a submit button's included, and what the slot it\n// fills in an overlay adds to it, the corner that eases between shapes, and\n// the metrics\n// the two components' pages give alike, since the two share their five\n// heights so that they line up in a row. What a pending button draws and\n// says is ./pending.tsx.\n\n/**\n * A plain button, a link, or a toggle, of which a call site writes exactly\n * one. Each form names the props of the other two as `never`, so a toggle\n * given `href` is a compile error rather than a prop that silently does\n * nothing.\n */\ntype ButtonLinkForm = {\n  readonly defaultSelected?: never\n  /**\n   * Where the button leads. Given one, a press opens it through the\n   * `RouterProvider` around the button, or through the platform for a URL\n   * with a scheme of its own, and the button is announced as a link.\n   */\n  readonly href: string\n  readonly isPending?: never\n  readonly isSelected?: never\n  readonly onChange?: never\n  readonly pendingLabel?: never\n  readonly slot?: never\n  readonly type?: never\n}\n\n/**\n * Whether the button's action is under way, which the plain button and the\n * toggle both take and the link does not.\n */\ntype ButtonPending = {\n  /**\n   * Shows that the button's action is under way: a ring takes the place of\n   * the label and the icon, which keep their space, and the button keeps its\n   * focus and takes no press until it clears. A toggle may be pending, for a\n   * state saved somewhere slow.\n   * @default false\n   */\n  readonly isPending?: boolean\n  /**\n   * The name of the ring shown while the button is pending, for a screen\n   * reader. The content it replaces is hidden while it shows. Left out, it is\n   * the word for it in the `I18nProvider`'s locale, or the device's outside\n   * one, \"Loading\" in English.\n   */\n  readonly pendingLabel?: string\n}\n\ntype ButtonPressForm = ButtonPending & {\n  readonly defaultSelected?: never\n  readonly href?: never\n  readonly isSelected?: never\n  readonly onChange?: never\n  /**\n   * `close` closes the overlay the button is in, as web's React Aria slot of\n   * that name does: a `Dialog` given one inside its content closes when it is\n   * pressed, after the button's own `onPress`.\n   */\n  readonly slot?: 'close'\n  /**\n   * What a press does past `onPress`. `submit` submits the `Form` the button\n   * is in, as a submit button does on web; `button` does nothing more.\n   * @default 'button'\n   */\n  readonly type?: 'button' | 'submit'\n}\n\ntype ButtonToggleForm = ButtonPending & {\n  /**\n   * Whether a toggle starts selected, when it keeps its own state. Passing\n   * this, `isSelected` or `onChange` is what makes the button a toggle.\n   */\n  readonly defaultSelected?: boolean\n  readonly href?: never\n  /**\n   * Whether a toggle is selected, when the call site holds the state. Pass\n   * it with `onChange`; passing this, `defaultSelected` or `onChange` is what\n   * makes the button a toggle.\n   */\n  readonly isSelected?: boolean\n  /**\n   * Called with the new state when a toggle is pressed, after `onPress`.\n   * Passing this, `isSelected` or `defaultSelected` is what makes the button\n   * a toggle.\n   */\n  readonly onChange?: (isSelected: boolean) => void\n  readonly slot?: never\n  readonly type?: never\n}\n\n/** The five control heights both pages give, by the names both props take. */\ntype ControlSize = 'lg' | 'md' | 'xl' | 'xs' | 'xxl'\n\n/** How a toggle reports its state to a screen reader. */\n// What `useSlotTrigger` hands the Pressable, spelled out because the\n// composed ref's inferred type names a private React Native module, which a\n// declaration file cannot reach.\ntype SlotTriggerProps = {\n  readonly 'aria-expanded'?: boolean\n  readonly delayLongPress: PressableProps['delayLongPress']\n  readonly onHoverIn: PressableProps['onHoverIn']\n  readonly onHoverOut: PressableProps['onHoverOut']\n  readonly onLongPress: PressableProps['onLongPress']\n  readonly ref: Ref<HostInstance> | undefined\n}\n\ntype ToggleState = {\n  readonly 'aria-pressed'?: boolean\n  readonly 'aria-selected'?: boolean\n}\n\n// The control height each size reads: the page's XS, S, M, L and XL, which\n// the theme's sizing scale names one step apart from this prop.\nconst HEIGHTS = {\n  lg: 'controlLg',\n  md: 'controlSm',\n  xl: 'controlXl',\n  xs: 'controlXs',\n  xxl: 'controlXxl',\n} as const satisfies Record<ControlSize, keyof ResolvedTheme['sizing']>\n\n// The outlined rule thickens with the size, as the buttons page's size tokens\n// have it: 1dp up to M, 2dp at L, 3dp at XL. The icon buttons page keeps its\n// widths in a token set its widget will not open, so the icon button takes\n// these, which a 96dp icon button beside a 96dp outlined button needs anyway.\nconst OUTLINE_WIDTHS: Readonly<Record<ControlSize, number>> = {\n  lg: 1,\n  md: 1,\n  xl: 2,\n  xs: 1,\n  xxl: 3,\n}\n\n// The corner each size presses to, which both pages give alike.\nconst PRESSED_CORNERS = {\n  lg: 'md',\n  md: 'sm',\n  xl: 'lg',\n  xs: 'sm',\n  xxl: 'lg',\n} as const satisfies Record<ControlSize, keyof ResolvedTheme['radii']>\n\nconst AnimatedPressable = Animated.createAnimatedComponent(Pressable)\n\n// Web's toggle reports `aria-pressed`, which React Native Web writes onto the\n// element. React Native has no pressed state to report, and reports the\n// selected one instead, which VoiceOver and TalkBack both read out.\nconst toggleState = Platform.select<(selected: boolean) => ToggleState>({\n  default: (selected) => ({ 'aria-selected': selected }),\n  web: (selected) => ({ 'aria-pressed': selected }),\n})\n\nconst buttonStyles = StyleSheet.create({\n  // Clips the state layer and the ripple to the corner as it morphs, and\n  // takes no touches.\n  clip: {\n    bottom: 0,\n    left: 0,\n    overflow: 'hidden',\n    pointerEvents: 'none',\n    position: 'absolute',\n    right: 0,\n    top: 0,\n  },\n})\n\n// A handler that runs the call site's own and then the slot's, which takes no\n// event, or the call site's alone where the slot adds nothing.\nfunction andThen<E>(\n  own: ((event: E) => void) | null | undefined,\n  slot: (() => void) | undefined,\n) {\n  if (slot === undefined) {\n    return own ?? undefined\n  }\n\n  return (event: E) => {\n    own?.(event)\n    slot()\n  }\n}\n\n// Records the button's height for the corner, then calls the call site's own\n// `onLayout`. Built by a call rather than declared in a component, which is\n// what react-perf's jsx-no-new-function-as-prop is after; the React Compiler\n// memoises the result on its inputs.\nfunction measureThen(\n  height: SharedValue<number>,\n  onLayout: PressableProps['onLayout'],\n) {\n  return (event: LayoutChangeEvent) => {\n    height.set(event.nativeEvent.layout.height)\n    onLayout?.(event)\n  }\n}\n\n// The call site's own `onPress`, then what the button does with the press.\n// Built by a call for the reason `measureThen` is.\nfunction pressThen(\n  onPress: PressableProps['onPress'],\n  then: (event: GestureResponderEvent) => void,\n) {\n  return (event: GestureResponderEvent) => {\n    onPress?.(event)\n    then(event)\n  }\n}\n\n/**\n * What a press does, and whether a toggle is selected. A press calls the call\n * site's own `onPress` first, then opens the link, changes the toggle's state\n * or submits the form the button is in, which is the order web reports them\n * in. A toggle keeps its own state from `defaultSelected` unless the call\n * site holds it in `isSelected`. A submit button outside a form submits\n * nothing, as on web.\n *\n * Given a `slot`, a button that is not a link then does what that slot of\n * the overlay around it does, as src/button's slots.ts sets out: opens it\n * from the trigger, or closes it from its content.\n */\nfunction useButtonAction({\n  defaultSelected,\n  href,\n  isSelected,\n  isToggle,\n  onChange,\n  onPress,\n  slot,\n  type,\n}: {\n  readonly defaultSelected: boolean | undefined\n  readonly href: string | undefined\n  readonly isSelected: boolean | undefined\n  readonly isToggle: boolean\n  readonly onChange: ((isSelected: boolean) => void) | undefined\n  readonly onPress: PressableProps['onPress']\n  readonly slot?: 'close' | 'default'\n  readonly type: 'button' | 'submit' | undefined\n}) {\n  const openLink = useOpenLink()\n  const form = use(FormContext)\n  const slots = use(ButtonSlotContext)\n  const [ownSelected, setOwnSelected] = useState(defaultSelected ?? false)\n  const selected = isToggle && (isSelected ?? ownSelected)\n  const filled = slot === undefined ? undefined : slots?.[slot]\n\n  function follow(event: GestureResponderEvent) {\n    if (href !== undefined) {\n      openLink(href)\n      return\n    }\n    if (isToggle) {\n      setOwnSelected(!selected)\n      onChange?.(!selected)\n    } else if (type === 'submit') {\n      form?.requestSubmit()\n    }\n    filled?.(event)\n  }\n\n  return { onPress: pressThen(onPress, follow), selected }\n}\n\n/**\n * The corner a button eases to, over the motion tokens' short duration on the\n * emphasised curve, and at once for a reader who asks the device for reduced\n * motion. The pill is the radius scale's `pill`, far larger than any button,\n * so the ease runs from half the button's measured height rather than from\n * that: otherwise the corner would hold the pill for most of the ease and\n * jump at its end. The `onLayout` it hands back measures the button, then\n * calls the call site's own.\n */\nfunction useCorner(radius: number, onLayout: PressableProps['onLayout']) {\n  const { motion } = useTheme()\n  const reduceMotion = useReducedMotion()\n  const height = useSharedValue(0)\n  const timing = {\n    duration: motion.durationShort2,\n    easing: Easing.bezier(...motion.easingEmphasized),\n  }\n  const corner = useAnimatedStyle(() => {\n    'worklet'\n    const measured = height.get()\n    const target = measured > 0 ? Math.min(radius, measured / 2) : radius\n\n    return {\n      borderRadius: reduceMotion ? target : withTiming(target, timing),\n    }\n  })\n\n  return { corner, onLayout: measureThen(height, onLayout) }\n}\n\n/**\n * What a button filling the default slot of an overlay drawn beside it takes\n * on, as src/button's slots.ts sets out: its node is kept for the overlay to\n * be placed against, alongside the call site's own `ref`, `aria-expanded`\n * says whether the overlay is open, and the overlay's hover and long press\n * handlers run after the call site's. A button filling no such slot, or a\n * link, keeps its own props untouched.\n */\nfunction useSlotTrigger({\n  delayLongPress,\n  href,\n  onHoverIn,\n  onHoverOut,\n  onLongPress,\n  ref,\n  slot,\n}: {\n  readonly delayLongPress: PressableProps['delayLongPress']\n  readonly href: string | undefined\n  readonly onHoverIn: PressableProps['onHoverIn']\n  readonly onHoverOut: PressableProps['onHoverOut']\n  readonly onLongPress: PressableProps['onLongPress']\n  readonly ref: Ref<HostInstance> | undefined\n  readonly slot: 'close' | undefined\n}): SlotTriggerProps {\n  const slots = use(ButtonSlotContext)\n  const trigger =\n    href === undefined && slot === undefined ? slots?.trigger : undefined\n\n  return {\n    ...(trigger === undefined\n      ? { delayLongPress, ref }\n      : {\n          'aria-expanded': trigger.expanded,\n          delayLongPress: trigger.delayLongPress ?? delayLongPress,\n          ref: refsOf(trigger.ref, ref),\n        }),\n    onHoverIn: andThen(onHoverIn, trigger?.onHoverIn),\n    onHoverOut: andThen(onHoverOut, trigger?.onHoverOut),\n    onLongPress: andThen(onLongPress, trigger?.onLongPress),\n  }\n}\n\nexport {\n  AnimatedPressable,\n  buttonStyles,\n  HEIGHTS,\n  OUTLINE_WIDTHS,\n  PRESSED_CORNERS,\n  toggleState,\n  useButtonAction,\n  useCorner,\n  useSlotTrigger,\n}\nexport type { ButtonLinkForm, ButtonPressForm, ButtonToggleForm, ControlSize }\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["Ref","GestureResponderEvent","HostInstance","LayoutChangeEvent","PressableProps","SharedValue","use","useState","Platform","Pressable","StyleSheet","Animated","Easing","useAnimatedStyle","useReducedMotion","useSharedValue","withTiming","ResolvedTheme","GroupCorners","FormContext","refsOf","useOpenLink","useTheme","ButtonSlotContext","ButtonTooltipContext","ButtonLinkForm","defaultSelected","href","isPending","isSelected","onChange","pendingLabel","slot","type","ButtonPending","ButtonPressForm","ButtonToggleForm","ControlSize","SlotTriggerProps","accessibilityHint","delayLongPress","onHoverIn","onHoverOut","onLongPress","onPressIn","onPressOut","ref","ToggleState","HEIGHTS","lg","md","xl","xs","xxl","const","Record","OUTLINE_WIDTHS","Readonly","PRESSED_CORNERS","AnimatedPressable","createAnimatedComponent","toggleState","select","selected","default","web","buttonStyles","create","clip","bottom","left","overflow","pointerEvents","position","right","top","andThen","own","event","E","undefined","measureThen","height","onLayout","set","nativeEvent","layout","pressThen","onPress","then","useButtonAction","t0","$","_c","isToggle","openLink","form","slots","ownSelected","setOwnSelected","filled","t1","follow","requestSubmit","t2","t3","useCorner","radius","motion","reduceMotion","OS","durationShort2","easingEmphasized","bezier","duration","easing","timing","corner","measured","get","ease","value","target","Math","min","borderRadius","borderBottomLeftRadius","start","borderBottomRightRadius","end","borderTopLeftRadius","borderTopRightRadius","borderBottomEndRadius","borderBottomStartRadius","borderTopEndRadius","borderTopStartRadius","t4","useSlotTrigger","tooltip","trigger","hint","expanded","_c"],"sources":["../../src/button/index.ts"],"sourcesContent":["import type { Ref } from 'react'\nimport type {\n  GestureResponderEvent,\n  HostInstance,\n  LayoutChangeEvent,\n  PressableProps,\n} from 'react-native'\nimport type { SharedValue } from 'react-native-reanimated'\n\nimport { use, useState } from 'react'\nimport { Platform, Pressable, StyleSheet } from 'react-native'\nimport Animated, {\n  Easing,\n  useAnimatedStyle,\n  useReducedMotion,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated'\n\nimport type { ResolvedTheme } from '../theme/scope'\nimport type { GroupCorners } from './group'\n\nimport { FormContext } from '../form'\nimport { refsOf } from '../ref'\nimport { useOpenLink } from '../router'\nimport { useTheme } from '../theme/scope'\nimport { ButtonSlotContext, ButtonTooltipContext } from './slots'\n\n// What every button does past its own styles, shared by Button and\n// IconButton as web's src/button is: the three forms a button takes, the\n// toggle's state and how it is announced, what a press does after the call\n// site's own `onPress`, a submit button's included, and what the slot it\n// fills in an overlay adds to it, the corner that eases between shapes, and\n// the metrics the two components' pages give alike, since the two share\n// their five heights so that they line up in a row. What a pending button\n// draws and says is ./pending.tsx, and what a ButtonGroup hands the buttons\n// in it is ./group.ts.\n\n/**\n * A plain button, a link, or a toggle, of which a call site writes exactly\n * one. Each form names the props of the other two as `never`, so a toggle\n * given `href` is a compile error rather than a prop that silently does\n * nothing.\n */\ntype ButtonLinkForm = {\n  readonly defaultSelected?: never\n  /**\n   * Where the button leads. Given one, a press opens it through the\n   * `RouterProvider` around the button, or through the platform for a URL\n   * with a scheme of its own, and the button is announced as a link.\n   */\n  readonly href: string\n  readonly isPending?: never\n  readonly isSelected?: never\n  readonly onChange?: never\n  readonly pendingLabel?: never\n  readonly slot?: never\n  readonly type?: never\n}\n\n/**\n * Whether the button's action is under way, which the plain button and the\n * toggle both take and the link does not.\n */\ntype ButtonPending = {\n  /**\n   * Shows that the button's action is under way: a ring takes the place of\n   * the label and the icon, which keep their space, and the button keeps its\n   * focus and takes no press until it clears. A toggle may be pending, for a\n   * state saved somewhere slow.\n   * @default false\n   */\n  readonly isPending?: boolean\n  /**\n   * The name of the ring shown while the button is pending, for a screen\n   * reader. The content it replaces is hidden while it shows. Left out, it is\n   * the word for it in the `I18nProvider`'s locale, or the device's outside\n   * one, \"Loading\" in English.\n   */\n  readonly pendingLabel?: string\n}\n\ntype ButtonPressForm = ButtonPending & {\n  readonly defaultSelected?: never\n  readonly href?: never\n  readonly isSelected?: never\n  readonly onChange?: never\n  /**\n   * `close` closes the overlay the button is in, as web's React Aria slot of\n   * that name does: a `Dialog` given one inside its content closes when it is\n   * pressed, after the button's own `onPress`.\n   */\n  readonly slot?: 'close'\n  /**\n   * What a press does past `onPress`. `submit` submits the `Form` the button\n   * is in, as a submit button does on web; `button` does nothing more.\n   * @default 'button'\n   */\n  readonly type?: 'button' | 'submit'\n}\n\ntype ButtonToggleForm = ButtonPending & {\n  /**\n   * Whether a toggle starts selected, when it keeps its own state. Passing\n   * this, `isSelected` or `onChange` is what makes the button a toggle.\n   */\n  readonly defaultSelected?: boolean\n  readonly href?: never\n  /**\n   * Whether a toggle is selected, when the call site holds the state. Pass\n   * it with `onChange`; passing this, `defaultSelected` or `onChange` is what\n   * makes the button a toggle.\n   */\n  readonly isSelected?: boolean\n  /**\n   * Called with the new state when a toggle is pressed, after `onPress`.\n   * Passing this, `isSelected` or `defaultSelected` is what makes the button\n   * a toggle.\n   */\n  readonly onChange?: (isSelected: boolean) => void\n  readonly slot?: never\n  readonly type?: never\n}\n\n/** The five control heights both pages give, by the names both props take. */\ntype ControlSize = 'lg' | 'md' | 'xl' | 'xs' | 'xxl'\n\n/** How a toggle reports its state to a screen reader. */\n// What `useSlotTrigger` hands the Pressable, spelled out because the\n// composed ref's inferred type names a private React Native module, which a\n// declaration file cannot reach.\ntype SlotTriggerProps = {\n  readonly accessibilityHint: string | undefined\n  readonly 'aria-expanded'?: boolean\n  readonly delayLongPress: PressableProps['delayLongPress']\n  readonly onHoverIn: PressableProps['onHoverIn']\n  readonly onHoverOut: PressableProps['onHoverOut']\n  readonly onLongPress: PressableProps['onLongPress']\n  readonly onPressIn: PressableProps['onPressIn']\n  readonly onPressOut: PressableProps['onPressOut']\n  readonly ref: Ref<HostInstance> | undefined\n}\n\ntype ToggleState = {\n  readonly 'aria-pressed'?: boolean\n  readonly 'aria-selected'?: boolean\n}\n\n// The control height each size reads: the page's XS, S, M, L and XL, which\n// the theme's sizing scale names one step apart from this prop.\nconst HEIGHTS = {\n  lg: 'controlLg',\n  md: 'controlSm',\n  xl: 'controlXl',\n  xs: 'controlXs',\n  xxl: 'controlXxl',\n} as const satisfies Record<ControlSize, keyof ResolvedTheme['sizing']>\n\n// The outlined rule thickens with the size, as the buttons page's size tokens\n// have it: 1dp up to M, 2dp at L, 3dp at XL. The icon buttons page keeps its\n// widths in a token set its widget will not open, so the icon button takes\n// these, which a 96dp icon button beside a 96dp outlined button needs anyway.\nconst OUTLINE_WIDTHS: Readonly<Record<ControlSize, number>> = {\n  lg: 1,\n  md: 1,\n  xl: 2,\n  xs: 1,\n  xxl: 3,\n}\n\n// The corner each size presses to, which both pages give alike.\nconst PRESSED_CORNERS = {\n  lg: 'md',\n  md: 'sm',\n  xl: 'lg',\n  xs: 'sm',\n  xxl: 'lg',\n} as const satisfies Record<ControlSize, keyof ResolvedTheme['radii']>\n\nconst AnimatedPressable = Animated.createAnimatedComponent(Pressable)\n\n// Web's toggle reports `aria-pressed`, which React Native Web writes onto the\n// element. React Native has no pressed state to report, and reports the\n// selected one instead, which VoiceOver and TalkBack both read out.\nconst toggleState = Platform.select<(selected: boolean) => ToggleState>({\n  default: (selected) => ({ 'aria-selected': selected }),\n  web: (selected) => ({ 'aria-pressed': selected }),\n})\n\nconst buttonStyles = StyleSheet.create({\n  // Clips the state layer and the ripple to the corner as it morphs, and\n  // takes no touches.\n  clip: {\n    bottom: 0,\n    left: 0,\n    overflow: 'hidden',\n    pointerEvents: 'none',\n    position: 'absolute',\n    right: 0,\n    top: 0,\n  },\n})\n\n// A handler that runs the call site's own and then the slot's, which takes no\n// event, or the call site's alone where the slot adds nothing.\nfunction andThen<E>(\n  own: ((event: E) => void) | null | undefined,\n  slot: (() => void) | undefined,\n) {\n  if (slot === undefined) {\n    return own ?? undefined\n  }\n\n  return (event: E) => {\n    own?.(event)\n    slot()\n  }\n}\n\n// Records the button's height for the corner, then calls the call site's own\n// `onLayout`. Built by a call rather than declared in a component, which is\n// what react-perf's jsx-no-new-function-as-prop is after; the React Compiler\n// memoises the result on its inputs.\nfunction measureThen(\n  height: SharedValue<number>,\n  onLayout: PressableProps['onLayout'],\n) {\n  return (event: LayoutChangeEvent) => {\n    height.set(event.nativeEvent.layout.height)\n    onLayout?.(event)\n  }\n}\n\n// The call site's own `onPress`, then what the button does with the press.\n// Built by a call for the reason `measureThen` is.\nfunction pressThen(\n  onPress: PressableProps['onPress'],\n  then: (event: GestureResponderEvent) => void,\n) {\n  return (event: GestureResponderEvent) => {\n    onPress?.(event)\n    then(event)\n  }\n}\n\n/**\n * What a press does, and whether a toggle is selected. A press calls the call\n * site's own `onPress` first, then opens the link, changes the toggle's state\n * or submits the form the button is in, which is the order web reports them\n * in. A toggle keeps its own state from `defaultSelected` unless the call\n * site holds it in `isSelected`. A submit button outside a form submits\n * nothing, as on web.\n *\n * Given a `slot`, a button that is not a link then does what that slot of\n * the overlay around it does, as src/button's slots.ts sets out: opens it\n * from the trigger, or closes it from its content.\n */\nfunction useButtonAction({\n  defaultSelected,\n  href,\n  isSelected,\n  isToggle,\n  onChange,\n  onPress,\n  slot,\n  type,\n}: {\n  readonly defaultSelected: boolean | undefined\n  readonly href: string | undefined\n  readonly isSelected: boolean | undefined\n  readonly isToggle: boolean\n  readonly onChange: ((isSelected: boolean) => void) | undefined\n  readonly onPress: PressableProps['onPress']\n  readonly slot?: 'close' | 'default'\n  readonly type: 'button' | 'submit' | undefined\n}) {\n  const openLink = useOpenLink()\n  const form = use(FormContext)\n  const slots = use(ButtonSlotContext)\n  const [ownSelected, setOwnSelected] = useState(defaultSelected ?? false)\n  const selected = isToggle && (isSelected ?? ownSelected)\n  const filled = slot === undefined ? undefined : slots?.[slot]\n\n  function follow(event: GestureResponderEvent) {\n    if (href !== undefined) {\n      openLink(href)\n      return\n    }\n    if (isToggle) {\n      setOwnSelected(!selected)\n      onChange?.(!selected)\n    } else if (type === 'submit') {\n      form?.requestSubmit()\n    }\n    filled?.(event)\n  }\n\n  return { onPress: pressThen(onPress, follow), selected }\n}\n\n/**\n * The corner a button eases to, over the motion tokens' short duration on the\n * emphasised curve, and at once for a reader who asks the device for reduced\n * motion: one radius for all four, or a connected ButtonGroup's two, one for\n * the start side and one for the end, which follow the layout's direction on\n * native. On web Reanimated writes an animated style straight onto the\n * element, where only the physical corners are CSS properties, so the start\n * side is the left there, as the web Storybook lays a row out.\n * The pill is the radius scale's `pill`, far larger than any button, so the\n * ease runs from half the button's measured height rather than from that:\n * otherwise the corner would hold the pill for most of the ease and jump at\n * its end. The `onLayout` it hands back measures the button, then calls the\n * call site's own.\n */\nfunction useCorner(\n  radius: GroupCorners | number,\n  onLayout: PressableProps['onLayout'],\n) {\n  const { motion } = useTheme()\n  const reduceMotion = useReducedMotion()\n  const height = useSharedValue(0)\n  const web = Platform.OS === 'web'\n  const timing = {\n    duration: motion.durationShort2,\n    easing: Easing.bezier(...motion.easingEmphasized),\n  }\n  const corner = useAnimatedStyle(() => {\n    'worklet'\n    const measured = height.get()\n    const ease = (value: number) => {\n      const target = measured > 0 ? Math.min(value, measured / 2) : value\n\n      return reduceMotion ? target : withTiming(target, timing)\n    }\n\n    if (typeof radius === 'number') {\n      return { borderRadius: ease(radius) }\n    }\n    if (web) {\n      return {\n        borderBottomLeftRadius: ease(radius.start),\n        borderBottomRightRadius: ease(radius.end),\n        borderTopLeftRadius: ease(radius.start),\n        borderTopRightRadius: ease(radius.end),\n      }\n    }\n\n    return {\n      borderBottomEndRadius: ease(radius.end),\n      borderBottomStartRadius: ease(radius.start),\n      borderTopEndRadius: ease(radius.end),\n      borderTopStartRadius: ease(radius.start),\n    }\n  })\n\n  return { corner, onLayout: measureThen(height, onLayout) }\n}\n\n/**\n * What a button filling the default slot of an overlay drawn beside it takes\n * on, as src/button's slots.ts sets out: its node is kept for the overlay to\n * be placed against, alongside the call site's own `ref`, `aria-expanded`\n * says whether the overlay is open, and the overlay's hover and long press\n * handlers run after the call site's. A button filling no such slot, or a\n * link, keeps its own props untouched. A button inside a `Tooltip` takes the\n * tooltip's node, hover, press and long press handlers on top of either, and\n * its label as the hint, unless the call site gave a hint of its own.\n */\nfunction useSlotTrigger({\n  accessibilityHint,\n  delayLongPress,\n  href,\n  onHoverIn,\n  onHoverOut,\n  onLongPress,\n  onPressIn,\n  onPressOut,\n  ref,\n  slot,\n}: {\n  readonly accessibilityHint: string | undefined\n  readonly delayLongPress: PressableProps['delayLongPress']\n  readonly href: string | undefined\n  readonly onHoverIn: PressableProps['onHoverIn']\n  readonly onHoverOut: PressableProps['onHoverOut']\n  readonly onLongPress: PressableProps['onLongPress']\n  readonly onPressIn: PressableProps['onPressIn']\n  readonly onPressOut: PressableProps['onPressOut']\n  readonly ref: Ref<HostInstance> | undefined\n  readonly slot: 'close' | undefined\n}): SlotTriggerProps {\n  const slots = use(ButtonSlotContext)\n  const tooltip = use(ButtonTooltipContext) ?? undefined\n  const trigger =\n    href === undefined && slot === undefined ? slots?.trigger : undefined\n\n  return {\n    accessibilityHint: accessibilityHint ?? tooltip?.hint,\n    ...(trigger === undefined\n      ? undefined\n      : { 'aria-expanded': trigger.expanded }),\n    delayLongPress:\n      trigger?.delayLongPress ?? tooltip?.delayLongPress ?? delayLongPress,\n    onHoverIn: andThen(\n      andThen(onHoverIn, trigger?.onHoverIn),\n      tooltip?.onHoverIn,\n    ),\n    onHoverOut: andThen(\n      andThen(onHoverOut, trigger?.onHoverOut),\n      tooltip?.onHoverOut,\n    ),\n    onLongPress: andThen(\n      andThen(onLongPress, trigger?.onLongPress),\n      tooltip?.onLongPress,\n    ),\n    onPressIn: andThen(onPressIn, tooltip?.onPressIn),\n    onPressOut: andThen(onPressOut, tooltip?.onPressOut),\n    ref:\n      trigger === undefined && tooltip === undefined\n        ? ref\n        : refsOf(trigger?.ref, tooltip?.ref, ref),\n  }\n}\n\nexport {\n  AnimatedPressable,\n  buttonStyles,\n  HEIGHTS,\n  OUTLINE_WIDTHS,\n  PRESSED_CORNERS,\n  pressThen,\n  toggleState,\n  useButtonAction,\n  useCorner,\n  useSlotTrigger,\n}\nexport type { ButtonLinkForm, ButtonPressForm, ButtonToggleForm, ControlSize }\n"],"mappings":"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"}

package/dist/button/slots.js

@@ -1,7 +1,8 @@
 import { createContext } from "react";
 //#region src/button/slots.ts
 const ButtonSlotContext = createContext(null);
+const ButtonTooltipContext = createContext(null);
 //#endregion
-export { ButtonSlotContext };
+export { ButtonSlotContext, ButtonTooltipContext };
 
 //# sourceMappingURL=slots.js.map

package/dist/button/slots.js.map

@@ -1 +1 @@
-{"version":3,"file":"slots.js","names":["RefObject","GestureResponderEvent","HostInstance","createContext","ButtonSlots","close","event","default","trigger","ButtonSlotTrigger","delayLongPress","expanded","onHoverIn","onHoverOut","onLongPress","ref","ButtonSlotContext"],"sources":["../../src/button/slots.ts"],"sourcesContent":["import type { RefObject } from 'react'\nimport type { GestureResponderEvent, HostInstance } from 'react-native'\n\nimport { createContext } from 'react'\n\n/**\n * What a button does past its own press when it sits in an overlay's trigger\n * or content, as web's React Aria hands the same through a button's `slot`:\n * the default slot opens the overlay, which a button inside `Dialog`,\n * `Popover` or `Sheet` and outside its content takes, and `close` closes it,\n * which one given `slot=\"close\"` inside the content takes. The overlay\n * provides the slots it fills, and resets the default one inside its content,\n * so a button there opens nothing.\n */\ntype ButtonSlots = {\n  readonly close?: (event: GestureResponderEvent) => void\n  readonly default?: (event: GestureResponderEvent) => void\n  /**\n   * What the button filling the default slot takes on beside its press, for\n   * an overlay drawn beside it.\n   */\n  readonly trigger?: ButtonSlotTrigger\n}\n\n/**\n * What a button filling the default slot takes on for an overlay drawn beside\n * it: its node, which the overlay is placed against, whether the overlay is\n * open, which a screen reader announces, and the hover and long press a\n * hovered popover opens on. The handlers run after the button's own.\n */\ntype ButtonSlotTrigger = {\n  /** How long a press is held before it is a long press, in milliseconds. */\n  readonly delayLongPress?: number\n  /** Whether the overlay the button opens is open. */\n  readonly expanded: boolean\n  readonly onHoverIn?: () => void\n  readonly onHoverOut?: () => void\n  readonly onLongPress?: () => void\n  /** Where the button's node is kept, for the overlay to be placed against. */\n  readonly ref: RefObject<HostInstance | null>\n}\n\nconst ButtonSlotContext = createContext<ButtonSlots | null>(null)\n\nexport { ButtonSlotContext }\nexport type { ButtonSlots, ButtonSlotTrigger }\n"],"mappings":";;AA0CA,MAAMgB,oBAAoBb,cAAkC,IAAI"}
+{"version":3,"file":"slots.js","names":["RefObject","GestureResponderEvent","HostInstance","createContext","ButtonSlots","close","event","default","trigger","ButtonSlotTrigger","delayLongPress","expanded","onHoverIn","onHoverOut","onLongPress","ref","ButtonTooltip","hint","onPressIn","onPressOut","ButtonSlotContext","ButtonTooltipContext"],"sources":["../../src/button/slots.ts"],"sourcesContent":["import type { RefObject } from 'react'\nimport type { GestureResponderEvent, HostInstance } from 'react-native'\n\nimport { createContext } from 'react'\n\n/**\n * What a button does past its own press when it sits in an overlay's trigger\n * or content, as web's React Aria hands the same through a button's `slot`:\n * the default slot opens the overlay, which a button inside `Dialog`,\n * `Popover` or `Sheet` and outside its content takes, and `close` closes it,\n * which one given `slot=\"close\"` inside the content takes. The overlay\n * provides the slots it fills, and resets the default one inside its content,\n * so a button there opens nothing.\n */\ntype ButtonSlots = {\n  readonly close?: (event: GestureResponderEvent) => void\n  readonly default?: (event: GestureResponderEvent) => void\n  /**\n   * What the button filling the default slot takes on beside its press, for\n   * an overlay drawn beside it.\n   */\n  readonly trigger?: ButtonSlotTrigger\n}\n\n/**\n * What a button filling the default slot takes on for an overlay drawn beside\n * it: its node, which the overlay is placed against, whether the overlay is\n * open, which a screen reader announces, and the hover and long press a\n * hovered popover opens on. The handlers run after the button's own.\n */\ntype ButtonSlotTrigger = {\n  /** How long a press is held before it is a long press, in milliseconds. */\n  readonly delayLongPress?: number\n  /** Whether the overlay the button opens is open. */\n  readonly expanded: boolean\n  readonly onHoverIn?: () => void\n  readonly onHoverOut?: () => void\n  readonly onLongPress?: () => void\n  /** Where the button's node is kept, for the overlay to be placed against. */\n  readonly ref: RefObject<HostInstance | null>\n}\n\n/**\n * What a button takes on inside a `Tooltip`, whichever slot it fills: its\n * node, which the tooltip is placed against, the tooltip's label as its\n * accessibility hint, and the pointer and the held press that open and close\n * the tooltip. The handlers run after the button's own and an overlay\n * trigger's. Kept apart from the slots so that a tooltip and the overlay a\n * button opens can wrap it in either order, and a close button and a link\n * take one too.\n */\ntype ButtonTooltip = {\n  /** How long a press is held before it opens the tooltip, in milliseconds. */\n  readonly delayLongPress: number\n  /** The tooltip's label, read after the button's name. */\n  readonly hint: string\n  readonly onHoverIn?: (() => void) | undefined\n  readonly onHoverOut?: (() => void) | undefined\n  readonly onLongPress: () => void\n  readonly onPressIn?: (() => void) | undefined\n  readonly onPressOut: () => void\n  /** Where the button's node is kept, for the tooltip to be placed against. */\n  readonly ref: RefObject<HostInstance | null>\n}\n\nconst ButtonSlotContext = createContext<ButtonSlots | null>(null)\nconst ButtonTooltipContext = createContext<ButtonTooltip | null>(null)\n\nexport { ButtonSlotContext, ButtonTooltipContext }\nexport type { ButtonSlots, ButtonSlotTrigger, ButtonTooltip }\n"],"mappings":";;AAiEA,MAAMoB,oBAAoBjB,cAAkC,IAAI;AAChE,MAAMkB,uBAAuBlB,cAAoC,IAAI"}