@kanso-labs/react-native-kanso-ui 0.0.0-stage → 0.1.1

package/LICENSE.md

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2026 Kanso Labs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -1,3 +1,206 @@
-# Temporary Holding Version
+# react-native-kanso-ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+[![License][license-shield]][license] [![Build][build-shield]][build-workflow]
+[![Test][test-shield]][test-workflow] [![Coverage][coverage-shield]][codecov]
+
+Kanso UI's Material Design components for React Native, built on the same design
+tokens and theming as
+[`@kanso-labs/kanso-ui`](https://github.com/kanso-labs/kanso-ui).
+
+A theme is the web library's: a set of `--kui-*` custom properties with values
+in CSS syntax, as kanso-ui's `tokens.css` declares them, so one theme object
+serves a web app and a native app alike.
+
+The package has not been released yet.
+
+## Theming
+
+`ThemeScope` themes everything inside it, and takes the same props as
+kanso-ui's: `theme`, a map of `--kui-*` properties to CSS values, and `scheme`,
+which pins the scope to light or dark and paints its surface. Left unset, the
+scheme follows the scope around it, or the device's appearance at the root. A
+nested scope's map applies over its parent's.
+
+```tsx
+import { type KuiTheme, ThemeScope } from '@kanso-labs/react-native-kanso-ui'
+
+// The same object a web app hands kanso-ui's ThemeScope.
+const brand: KuiTheme = {
+  '--kui-color-primary': '#006a6a',
+  '--kui-radius-md': '16px',
+}
+
+export default function App() {
+  return (
+    <ThemeScope style={{ flex: 1 }} theme={brand}>
+      <Screen />
+    </ThemeScope>
+  )
+}
+```
+
+`useTheme()` reads the tokens in the values React Native styles take, with the
+keys of kanso-ui's token modules, so `var(--kui-color-primary)` on web is
+`useTheme().colors.primary` here. Lengths are in dp, durations in milliseconds,
+and an easing is the four points `Easing.bezier()` takes.
+
+A value React Native cannot evaluate, such as a `calc()` or a `color-mix()`,
+keeps its property at the library's default, and a development build names it in
+a warning.
+
+The outermost `ThemeScope` also hosts what the library draws above the screen,
+over everything inside it, so it belongs at the root of the app and fills it, as
+the one above does. What draws there follows the scope it was opened in rather
+than the root's.
+
+### Fonts
+
+Neither package ships a font. On iOS and Android a type role draws in the first
+family its token names when the app has registered that family with
+[expo-font](https://docs.expo.dev/versions/latest/sdk/font/), under that name,
+and in the system font otherwise. expo-font is an optional peer, so an app
+without it draws every role in the system font.
+
+```tsx
+import { useFonts } from 'expo-font'
+
+const [loaded] = useFonts({
+  'Roboto Flex': require('./assets/RobotoFlex.ttf'),
+  'Roboto Serif': require('./assets/RobotoSerif.ttf'),
+})
+```
+
+Under React Native Web the token's whole list goes to CSS, as it does on web.
+
+## Peer dependencies
+
+Beside `react` and `react-native`, the package needs `react-native-reanimated`,
+which animates the ripple its controls draw when pressed and the corner a button
+morphs between, the `react-native-worklets` Reanimated runs on,
+`react-native-svg`, which draws the icons its controls show,
+`react-native-safe-area-context`, whose insets keep what the library draws above
+the screen clear of a notch, the status bar and the home indicator, and
+`react-native-gesture-handler`, which carries a switch's handle across its track
+when it is dragged. In an Expo app,
+
+```bash
+npx expo install react-native-gesture-handler react-native-reanimated react-native-safe-area-context react-native-svg react-native-worklets
+```
+
+installs the versions the SDK ships with, and Expo's Babel preset compiles the
+package's animations. Outside Expo, Reanimated's install guide adds
+`react-native-worklets/plugin` to the app's Babel configuration, which does the
+same.
+
+The insets come from safe-area-context's `SafeAreaProvider`, which Expo Router
+puts around an app already; elsewhere, wrap the app in one. Without it, the
+library keeps to the window's edge.
+
+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.
+
+## Routing
+
+A component with an `href` presses through the app's router once the app is
+wrapped in `RouterProvider`, which takes the router's `navigate`. Without one,
+and for any URL with a scheme of its own such as `https:` or `mailto:`, the
+`href` is opened with React Native's `Linking.openURL`.
+
+With Expo Router, the provider goes in the root layout:
+
+```tsx
+// app/_layout.tsx
+import { RouterProvider } from '@kanso-labs/react-native-kanso-ui'
+import { type Href, Stack, useRouter } from 'expo-router'
+
+export default function RootLayout() {
+  const router = useRouter()
+  return (
+    <RouterProvider navigate={(href) => router.push(href as Href)}>
+      <Stack />
+    </RouterProvider>
+  )
+}
+```
+
+The `as Href` is there for typed routes, which type `push` with the app's own
+paths rather than any string.
+
+With React Navigation, `useLinkTo` turns a path into a navigation through the
+container's `linking` configuration, so the provider goes inside the container:
+
+```tsx
+import type { ReactNode } from 'react'
+
+import { RouterProvider } from '@kanso-labs/react-native-kanso-ui'
+import { NavigationContainer, useLinkTo } from '@react-navigation/native'
+
+function Routed({ children }: { children: ReactNode }) {
+  const linkTo = useLinkTo()
+  return <RouterProvider navigate={linkTo}>{children}</RouterProvider>
+}
+
+export default function App() {
+  return (
+    <NavigationContainer linking={linking}>
+      <Routed>
+        <RootStack />
+      </Routed>
+    </NavigationContainer>
+  )
+}
+```
+
+## Development
+
+Install with the Node version in `.tool-versions`:
+
+```bash
+mise exec node@"$(awk '/^nodejs/{print $2}' .tool-versions)" -- npm install
+```
+
+| Task      | Command                  |
+| --------- | ------------------------ |
+| Test      | `npm test`               |
+| Stories   | `npm run test:storybook` |
+| Storybook | `npm run storybook`      |
+| Lint      | `npm run lint`           |
+| Build     | `npm run build`          |
+| Verify    | `npm run package:check`  |
+| Tokens    | `npm run tokens:build`   |
+
+`npm run storybook` serves the components through React Native Web. Its Theme
+control offers kanso-ui's seven demo schemes beside light and dark, and the
+`Theming` section renders every component under each of them. To see the
+components drawn by iOS or Android, run the on-device Storybook in `example/`,
+an Expo app that reads the same stories. With the root installed:
+
+```bash
+cd example
+npm install
+npm start
+```
+
+Then open it in Expo Go from the QR code Expo prints. The device's light or dark
+appearance picks the scheme the stories render in, apart from the `Theming`
+pages, which each render in their own.
+
+## License
+
+[MIT](LICENSE.md)
+
+[build-shield]:
+  https://img.shields.io/github/actions/workflow/status/kanso-labs/react-native-kanso-ui/build.yaml?branch=main&label=Build
+[build-workflow]:
+  https://github.com/kanso-labs/react-native-kanso-ui/actions/workflows/build.yaml
+[codecov]: https://codecov.io/gh/kanso-labs/react-native-kanso-ui
+[coverage-shield]:
+  https://img.shields.io/codecov/c/github/kanso-labs/react-native-kanso-ui?label=Coverage
+[license]: ./LICENSE.md
+[license-shield]:
+  https://img.shields.io/github/license/kanso-labs/react-native-kanso-ui
+[test-shield]:
+  https://img.shields.io/github/actions/workflow/status/kanso-labs/react-native-kanso-ui/test.yaml?branch=main&label=Test
+[test-workflow]:
+  https://github.com/kanso-labs/react-native-kanso-ui/actions/workflows/test.yaml

package/dist/button/index.d.ts

@@ -0,0 +1,56 @@
+import { PressableProps } from "react-native";
+//#region src/button/index.d.ts
+/**
+ * A plain button, a link, or a toggle, of which a call site writes exactly
+ * one. Each form names the props of the other two as `never`, so a toggle
+ * given `href` is a compile error rather than a prop that silently does
+ * nothing.
+ */
+type ButtonLinkForm = {
+  readonly defaultSelected?: never;
+  /**
+   * Where the button leads. Given one, a press opens it through the
+   * `RouterProvider` around the button, or through the platform for a URL
+   * with a scheme of its own, and the button is announced as a link.
+   */
+  readonly href: string;
+  readonly isSelected?: never;
+  readonly onChange?: never;
+  readonly type?: never;
+};
+type ButtonPressForm = {
+  readonly defaultSelected?: never;
+  readonly href?: never;
+  readonly isSelected?: never;
+  readonly onChange?: never;
+  /**
+   * What a press does past `onPress`. `submit` submits the `Form` the button
+   * is in, as a submit button does on web; `button` does nothing more.
+   * @default 'button'
+   */
+  readonly type?: 'button' | 'submit';
+};
+type ButtonToggleForm = {
+  /**
+   * Whether a toggle starts selected, when it keeps its own state. Passing
+   * this, `isSelected` or `onChange` is what makes the button a toggle.
+   */
+  readonly defaultSelected?: boolean;
+  readonly href?: never;
+  /**
+   * Whether a toggle is selected, when the call site holds the state. Pass
+   * it with `onChange`; passing this, `defaultSelected` or `onChange` is what
+   * makes the button a toggle.
+   */
+  readonly isSelected?: boolean;
+  /**
+   * Called with the new state when a toggle is pressed, after `onPress`.
+   * Passing this, `isSelected` or `defaultSelected` is what makes the button
+   * a toggle.
+   */
+  readonly onChange?: (isSelected: boolean) => void;
+  readonly type?: never;
+};
+//#endregion
+export type { ButtonLinkForm, ButtonPressForm, ButtonToggleForm };
+//# sourceMappingURL=index.d.ts.map

package/dist/button/index.js

@@ -0,0 +1,169 @@
+import { useTheme } from "../theme/scope.js";
+import { FormContext } from "../form/index.js";
+import { useOpenLink } from "../router/index.js";
+import { c } from "react/compiler-runtime";
+import { Platform, Pressable, StyleSheet } from "react-native";
+import { use, useState } from "react";
+import Animated, { Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withTiming } from "react-native-reanimated";
+//#region src/button/index.ts
+const HEIGHTS = {
+	lg: "controlLg",
+	md: "controlSm",
+	xl: "controlXl",
+	xs: "controlXs",
+	xxl: "controlXxl"
+};
+const OUTLINE_WIDTHS = {
+	lg: 1,
+	md: 1,
+	xl: 2,
+	xs: 1,
+	xxl: 3
+};
+const PRESSED_CORNERS = {
+	lg: "md",
+	md: "sm",
+	xl: "lg",
+	xs: "sm",
+	xxl: "lg"
+};
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+const toggleState = Platform.select({
+	default: (selected) => ({ "aria-selected": selected }),
+	web: (selected) => ({ "aria-pressed": selected })
+});
+const buttonStyles = StyleSheet.create({ clip: {
+	bottom: 0,
+	left: 0,
+	overflow: "hidden",
+	pointerEvents: "none",
+	position: "absolute",
+	right: 0,
+	top: 0
+} });
+function measureThen(height, onLayout) {
+	return (event) => {
+		height.set(event.nativeEvent.layout.height);
+		onLayout?.(event);
+	};
+}
+function pressThen(onPress, then) {
+	return (event) => {
+		onPress?.(event);
+		then();
+	};
+}
+/**
+* What a press does, and whether a toggle is selected. A press calls the call
+* site's own `onPress` first, then opens the link, changes the toggle's state
+* or submits the form the button is in, which is the order web reports them
+* in. A toggle keeps its own state from `defaultSelected` unless the call
+* site holds it in `isSelected`. A submit button outside a form submits
+* nothing, as on web.
+*/
+function useButtonAction(t0) {
+	const $ = c(14);
+	const { defaultSelected, href, isSelected, isToggle, onChange, onPress, type } = t0;
+	const openLink = useOpenLink();
+	const form = use(FormContext);
+	const [ownSelected, setOwnSelected] = useState(defaultSelected ?? false);
+	const selected = isToggle && (isSelected ?? ownSelected);
+	let t1;
+	if ($[0] !== form || $[1] !== href || $[2] !== isToggle || $[3] !== onChange || $[4] !== openLink || $[5] !== selected || $[6] !== type) {
+		t1 = function follow() {
+			if (href !== void 0) openLink(href);
+			else if (isToggle) {
+				setOwnSelected(!selected);
+				onChange?.(!selected);
+			} else if (type === "submit") form?.requestSubmit();
+		};
+		$[0] = form;
+		$[1] = href;
+		$[2] = isToggle;
+		$[3] = onChange;
+		$[4] = openLink;
+		$[5] = selected;
+		$[6] = type;
+		$[7] = t1;
+	} else t1 = $[7];
+	const follow = t1;
+	let t2;
+	if ($[8] !== follow || $[9] !== onPress) {
+		t2 = pressThen(onPress, follow);
+		$[8] = follow;
+		$[9] = onPress;
+		$[10] = t2;
+	} else t2 = $[10];
+	let t3;
+	if ($[11] !== selected || $[12] !== t2) {
+		t3 = {
+			onPress: t2,
+			selected
+		};
+		$[11] = selected;
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
+	return t3;
+}
+/**
+* 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.
+*/
+function useCorner(radius, onLayout) {
+	const $ = c(11);
+	const { motion } = useTheme();
+	const reduceMotion = useReducedMotion();
+	const height = useSharedValue(0);
+	const t0 = motion.durationShort2;
+	let t1;
+	if ($[0] !== motion.easingEmphasized) {
+		t1 = Easing.bezier(...motion.easingEmphasized);
+		$[0] = motion.easingEmphasized;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== motion.durationShort2 || $[3] !== t1) {
+		t2 = {
+			duration: t0,
+			easing: t1
+		};
+		$[2] = motion.durationShort2;
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	const timing = t2;
+	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) };
+	});
+	let t3;
+	if ($[5] !== height || $[6] !== onLayout) {
+		t3 = measureThen(height, onLayout);
+		$[5] = height;
+		$[6] = onLayout;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== corner || $[9] !== t3) {
+		t4 = {
+			corner,
+			onLayout: t3
+		};
+		$[8] = corner;
+		$[9] = t3;
+		$[10] = t4;
+	} else t4 = $[10];
+	return t4;
+}
+//#endregion
+export { AnimatedPressable, HEIGHTS, OUTLINE_WIDTHS, PRESSED_CORNERS, buttonStyles, toggleState, useButtonAction, useCorner };
+
+//# sourceMappingURL=index.js.map

package/dist/button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["GestureResponderEvent","LayoutChangeEvent","PressableProps","SharedValue","use","useState","Platform","Pressable","StyleSheet","Animated","Easing","useAnimatedStyle","useReducedMotion","useSharedValue","withTiming","ResolvedTheme","FormContext","useOpenLink","useTheme","ButtonLinkForm","defaultSelected","href","isSelected","onChange","type","ButtonPressForm","ButtonToggleForm","ControlSize","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","measureThen","height","onLayout","event","set","nativeEvent","layout","pressThen","onPress","then","useButtonAction","t0","$","_c","isToggle","openLink","form","ownSelected","setOwnSelected","t1","follow","undefined","requestSubmit","t2","t3","useCorner","radius","motion","reduceMotion","durationShort2","easingEmphasized","bezier","duration","easing","timing","corner","measured","get","target","Math","min","borderRadius","t4","_c"],"sources":["../../src/button/index.ts"],"sourcesContent":["import type {\n  GestureResponderEvent,\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 { useOpenLink } from '../router'\nimport { useTheme } from '../theme/scope'\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, the corner that eases\n// between shapes, and 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.\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 isSelected?: never\n  readonly onChange?: never\n  readonly type?: never\n}\n\ntype ButtonPressForm = {\n  readonly defaultSelected?: never\n  readonly href?: never\n  readonly isSelected?: never\n  readonly onChange?: never\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 = {\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 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. */\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// 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(onPress: PressableProps['onPress'], then: () => void) {\n  return (event: GestureResponderEvent) => {\n    onPress?.(event)\n    then()\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 */\nfunction useButtonAction({\n  defaultSelected,\n  href,\n  isSelected,\n  isToggle,\n  onChange,\n  onPress,\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 type: 'button' | 'submit' | undefined\n}) {\n  const openLink = useOpenLink()\n  const form = use(FormContext)\n  const [ownSelected, setOwnSelected] = useState(defaultSelected ?? false)\n  const selected = isToggle && (isSelected ?? ownSelected)\n\n  function follow() {\n    if (href !== undefined) {\n      openLink(href)\n    } else if (isToggle) {\n      setOwnSelected(!selected)\n      onChange?.(!selected)\n    } else if (type === 'submit') {\n      form?.requestSubmit()\n    }\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\nexport {\n  AnimatedPressable,\n  buttonStyles,\n  HEIGHTS,\n  OUTLINE_WIDTHS,\n  PRESSED_CORNERS,\n  toggleState,\n  useButtonAction,\n  useCorner,\n}\nexport type { ButtonLinkForm, ButtonPressForm, ButtonToggleForm, ControlSize }\n"],"mappings":"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"}

package/dist/button/palettes.js

@@ -0,0 +1,47 @@
+import { themedStyles } from "../theme/styles.js";
+import { withOpacity } from "../theme/color.js";
+//#region src/button/palettes.ts
+function palette(content, container = {}) {
+	return {
+		container,
+		content,
+		label: { color: content }
+	};
+}
+/**
+* The containers, from the theme's colour roles. Disabled is the pages'
+* colour at an opacity, translucent: a container is on-surface at the
+* `disabledContainer` opacity, and its content on-surface at
+* `disabledContent`. Web mixes both over the surface role, since a
+* `color-mix()` needs a colour to mix with; React Native has none, and the
+* pages give the two as opacities over whatever the button sits on, which is
+* what they are drawn as here.
+*/
+const palettesOf = themedStyles(({ colors, stateLayerOpacity }) => {
+	const disabledContainer = withOpacity(colors.onSurface, stateLayerOpacity.disabledContainer);
+	const disabledContent = withOpacity(colors.onSurface, stateLayerOpacity.disabledContent);
+	return {
+		elevated: palette(colors.primary, { backgroundColor: colors.surfaceContainerLow }),
+		elevatedToggleSelected: palette(colors.onPrimary, { backgroundColor: colors.primary }),
+		filled: palette(colors.onPrimary, { backgroundColor: colors.primary }),
+		filledDisabled: palette(disabledContent, { backgroundColor: disabledContainer }),
+		filledToggle: palette(colors.onSurfaceVariant, { backgroundColor: colors.surfaceContainer }),
+		filledToggleSelected: palette(colors.onPrimary, { backgroundColor: colors.primary }),
+		outlined: palette(colors.onSurfaceVariant, { borderColor: colors.outlineVariant }),
+		outlinedDisabled: palette(disabledContent, { borderColor: disabledContainer }),
+		outlinedToggleSelected: palette(colors.inverseOnSurface, {
+			backgroundColor: colors.inverseSurface,
+			borderColor: "transparent"
+		}),
+		standard: palette(colors.onSurfaceVariant),
+		standardToggleSelected: palette(colors.primary),
+		text: palette(colors.primary),
+		textDisabled: palette(disabledContent),
+		tonal: palette(colors.onSecondaryContainer, { backgroundColor: colors.secondaryContainer }),
+		tonalToggleSelected: palette(colors.onSecondary, { backgroundColor: colors.secondary })
+	};
+});
+//#endregion
+export { palettesOf };
+
+//# sourceMappingURL=palettes.js.map

package/dist/button/palettes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"palettes.js","names":["TextStyle","ViewStyle","withOpacity","themedStyles","Palette","container","content","label","PaletteName","palette","color","palettesOf","colors","stateLayerOpacity","Readonly","Record","disabledContainer","onSurface","disabledContent","elevated","primary","backgroundColor","surfaceContainerLow","elevatedToggleSelected","onPrimary","filled","filledDisabled","filledToggle","onSurfaceVariant","surfaceContainer","filledToggleSelected","outlined","borderColor","outlineVariant","outlinedDisabled","outlinedToggleSelected","inverseOnSurface","inverseSurface","standard","standardToggleSelected","text","textDisabled","tonal","onSecondaryContainer","secondaryContainer","tonalToggleSelected","onSecondary","secondary"],"sources":["../../src/button/palettes.ts"],"sourcesContent":["import type { TextStyle, ViewStyle } from 'react-native'\n\nimport { withOpacity } from '../theme/color'\nimport { themedStyles } from '../theme/styles'\n\n/** What a container draws: its own style, and the colour of what is on it. */\ntype Palette = {\n  readonly container: ViewStyle\n  readonly content: string\n  readonly label: TextStyle\n}\n\n// Every container a button or an icon button draws, by the name web's styles\n// give it. The two pages share their pairs, so the two components share the\n// table: a filled icon button is a filled button's colours around an icon.\n// Three of a toggle's unselected containers are the plain variant's own, so\n// they have no name of their own here.\ntype PaletteName =\n  | 'elevated'\n  | 'elevatedToggleSelected'\n  | 'filled'\n  | 'filledDisabled'\n  | 'filledToggle'\n  | 'filledToggleSelected'\n  | 'outlined'\n  | 'outlinedDisabled'\n  | 'outlinedToggleSelected'\n  | 'standard'\n  | 'standardToggleSelected'\n  | 'text'\n  | 'textDisabled'\n  | 'tonal'\n  | 'tonalToggleSelected'\n\nfunction palette(content: string, container: ViewStyle = {}): Palette {\n  return { container, content, label: { color: content } }\n}\n\n/**\n * The containers, from the theme's colour roles. Disabled is the pages'\n * colour at an opacity, translucent: a container is on-surface at the\n * `disabledContainer` opacity, and its content on-surface at\n * `disabledContent`. Web mixes both over the surface role, since a\n * `color-mix()` needs a colour to mix with; React Native has none, and the\n * pages give the two as opacities over whatever the button sits on, which is\n * what they are drawn as here.\n */\nconst palettesOf = themedStyles(\n  ({ colors, stateLayerOpacity }): Readonly<Record<PaletteName, Palette>> => {\n    const disabledContainer = withOpacity(\n      colors.onSurface,\n      stateLayerOpacity.disabledContainer,\n    )\n    const disabledContent = withOpacity(\n      colors.onSurface,\n      stateLayerOpacity.disabledContent,\n    )\n\n    return {\n      elevated: palette(colors.primary, {\n        backgroundColor: colors.surfaceContainerLow,\n      }),\n      elevatedToggleSelected: palette(colors.onPrimary, {\n        backgroundColor: colors.primary,\n      }),\n      filled: palette(colors.onPrimary, { backgroundColor: colors.primary }),\n      filledDisabled: palette(disabledContent, {\n        backgroundColor: disabledContainer,\n      }),\n      filledToggle: palette(colors.onSurfaceVariant, {\n        backgroundColor: colors.surfaceContainer,\n      }),\n      filledToggleSelected: palette(colors.onPrimary, {\n        backgroundColor: colors.primary,\n      }),\n      outlined: palette(colors.onSurfaceVariant, {\n        borderColor: colors.outlineVariant,\n      }),\n      outlinedDisabled: palette(disabledContent, {\n        borderColor: disabledContainer,\n      }),\n      // The rule keeps its width, drawn transparent, so a toggle does not\n      // change size as it is selected.\n      outlinedToggleSelected: palette(colors.inverseOnSurface, {\n        backgroundColor: colors.inverseSurface,\n        borderColor: 'transparent',\n      }),\n      // Transparent, tinting whatever it sits on: the icon button's standard\n      // style, whose icon moves to primary once a toggle is selected.\n      standard: palette(colors.onSurfaceVariant),\n      standardToggleSelected: palette(colors.primary),\n      text: palette(colors.primary),\n      // A text button's and a standard icon button's disabled colours, which\n      // both pages give as the content alone, over no container.\n      textDisabled: palette(disabledContent),\n      tonal: palette(colors.onSecondaryContainer, {\n        backgroundColor: colors.secondaryContainer,\n      }),\n      tonalToggleSelected: palette(colors.onSecondary, {\n        backgroundColor: colors.secondary,\n      }),\n    }\n  },\n)\n\nexport { palettesOf }\nexport type { Palette, PaletteName }\n"],"mappings":";;;AAkCA,SAASS,QAAQH,SAAiBD,YAAuB,CAAC,GAAY;CACpE,OAAO;EAAEA;EAAWC;EAASC,OAAO,EAAEG,OAAOJ,QAAQ;CAAE;AACzD;;;;;;;;;;AAWA,MAAMK,aAAaR,cAChB,EAAES,QAAQC,wBAAgE;CACzE,MAAMG,oBAAoBd,YACxBU,OAAOK,WACPJ,kBAAkBG,iBACpB;CACA,MAAME,kBAAkBhB,YACtBU,OAAOK,WACPJ,kBAAkBK,eACpB;CAEA,OAAO;EACLC,UAAUV,QAAQG,OAAOQ,SAAS,EAChCC,iBAAiBT,OAAOU,oBAC1B,CAAC;EACDC,wBAAwBd,QAAQG,OAAOY,WAAW,EAChDH,iBAAiBT,OAAOQ,QAC1B,CAAC;EACDK,QAAQhB,QAAQG,OAAOY,WAAW,EAAEH,iBAAiBT,OAAOQ,QAAQ,CAAC;EACrEM,gBAAgBjB,QAAQS,iBAAiB,EACvCG,iBAAiBL,kBACnB,CAAC;EACDW,cAAclB,QAAQG,OAAOgB,kBAAkB,EAC7CP,iBAAiBT,OAAOiB,iBAC1B,CAAC;EACDC,sBAAsBrB,QAAQG,OAAOY,WAAW,EAC9CH,iBAAiBT,OAAOQ,QAC1B,CAAC;EACDW,UAAUtB,QAAQG,OAAOgB,kBAAkB,EACzCI,aAAapB,OAAOqB,eACtB,CAAC;EACDC,kBAAkBzB,QAAQS,iBAAiB,EACzCc,aAAahB,kBACf,CAAC;EAGDmB,wBAAwB1B,QAAQG,OAAOwB,kBAAkB;GACvDf,iBAAiBT,OAAOyB;GACxBL,aAAa;EACf,CAAC;EAGDM,UAAU7B,QAAQG,OAAOgB,gBAAgB;EACzCW,wBAAwB9B,QAAQG,OAAOQ,OAAO;EAC9CoB,MAAM/B,QAAQG,OAAOQ,OAAO;EAG5BqB,cAAchC,QAAQS,eAAe;EACrCwB,OAAOjC,QAAQG,OAAO+B,sBAAsB,EAC1CtB,iBAAiBT,OAAOgC,mBAC1B,CAAC;EACDC,qBAAqBpC,QAAQG,OAAOkC,aAAa,EAC/CzB,iBAAiBT,OAAOmC,UAC1B,CAAC;CACH;AACF,CACF"}