@gryt/ui-native 0.3.1 → 0.4.0

package/dist/components/Slider/Slider.js

@@ -5,6 +5,7 @@ import Animated, { useAnimatedStyle, useSharedValue } from "react-native-reanima
 import { grytScaleSteps } from "@gryt/theme";
 import { springy } from "../../motion/index.js";
 import { toneRamp, useTheme } from "../../theme/index.js";
+import { useDragLock } from "../internal/dragLock.js";
 import { valueAt } from "./sliderValue.js";
 const TRACK_HEIGHT = 4;
 const THUMB = 20;
@@ -20,6 +21,9 @@ const THUMB = 20;
  */
 export function Slider({ value: controlled, defaultValue = 0, onValueChange, onValueCommit, min = 0, max = 100, step = 1, disabled, tone = "primary", style, accessibilityLabel, }) {
     const theme = useTheme();
+    // Held for the duration of a drag, so the list this is sitting in stays put.
+    // A no-op outside a ScrollView from this package — see useDragLock.
+    const dragLock = useDragLock();
     const [uncontrolled, setUncontrolled] = useState(defaultValue);
     const value = controlled ?? uncontrolled;
     const [width, setWidth] = useState(0);
@@ -31,6 +35,9 @@ export function Slider({ value: controlled, defaultValue = 0, onValueChange, onV
     // fire from touch events, which is always after an effect has run.
     const state = useRef({ width, value, min, max, step, disabled });
     const emit = useRef({ onValueChange, onValueCommit, controlled });
+    // Same reason as the others: the responder callbacks are created once, and
+    // the lock's identity changes whenever the count does.
+    const lockRef = useRef(dragLock);
     /** Where the current gesture started, in track coordinates. */
     const origin = useRef(0);
     /**
@@ -47,6 +54,9 @@ export function Slider({ value: controlled, defaultValue = 0, onValueChange, onV
     useEffect(() => {
         emit.current = { onValueChange, onValueCommit, controlled };
     }, [onValueChange, onValueCommit, controlled]);
+    useEffect(() => {
+        lockRef.current = dragLock;
+    }, [dragLock]);
     const valueFromX = (x) => {
         const s = state.current;
         // Before layout there is no position to read, so hold what we have rather
@@ -76,6 +86,7 @@ export function Slider({ value: controlled, defaultValue = 0, onValueChange, onV
         // here once it is clearly horizontal.
         onMoveShouldSetPanResponder: () => !state.current.disabled,
         onPanResponderGrant: (e) => {
+            lockRef.current.lock();
             // Where the finger landed, kept for the drag to offset from.
             origin.current = e.nativeEvent.locationX;
             thumbScale.value = springy(grytScaleSteps.sliderThumb.press);
@@ -94,7 +105,29 @@ export function Slider({ value: controlled, defaultValue = 0, onValueChange, onV
         onPanResponderMove: (_e, gesture) => {
             apply(valueFromX(origin.current + gesture.dx));
         },
+        // The fix for GRYT-390's "the slider still lets me scroll the page".
+        //
+        // The comment above says this "claims the gesture and holds it". It did
+        // not: `onPanResponderTerminationRequest` defaults to *granting*, so the
+        // enclosing ScrollView asked for the responder as soon as the finger
+        // moved and got it. Every drag inside a scrolling screen scrolled the
+        // screen, which is every drag — volume sliders live in settings lists.
+        //
+        // Saying no is the whole fix. `onShouldBlockNativeResponder` stops the
+        // native scroll view taking over underneath on Android, where the JS
+        // answer alone is not enough.
+        onPanResponderTerminationRequest: () => false,
+        // A refused termination can still happen — the system can take the
+        // responder away regardless, on a call or a notification. Without this
+        // the lock leaks and the screen never scrolls again, which is a far
+        // worse bug than the one being fixed.
+        onPanResponderTerminate: () => {
+            lockRef.current.unlock();
+            thumbScale.value = springy(1);
+        },
+        onShouldBlockNativeResponder: () => true,
         onPanResponderRelease: () => {
+            lockRef.current.unlock();
             thumbScale.value = springy(1);
             emit.current.onValueCommit?.(state.current.value);
         },

package/dist/components/Switch/Switch.d.ts

@@ -1,3 +1,4 @@
+import { type ReactNode } from "react";
 import { type StyleProp, type ViewStyle } from "react-native";
 export type SwitchTone = "primary" | "secondary" | "neutral" | "danger";
 export interface SwitchProps {
@@ -6,6 +7,8 @@ export interface SwitchProps {
     onCheckedChange?: (checked: boolean) => void;
     disabled?: boolean;
     tone?: SwitchTone;
+    /** Tapping this toggles the switch, as a `<label>` does on the web. */
+    label?: ReactNode;
     style?: StyleProp<ViewStyle>;
     accessibilityLabel?: string;
 }
@@ -21,5 +24,5 @@ export interface SwitchProps {
  * The cost is that it does not pick up future platform restyling for free, which
  * is the trade the whole library is already making.
  */
-export declare function Switch({ checked: controlled, defaultChecked, onCheckedChange, disabled, tone, style, accessibilityLabel, }: SwitchProps): import("react").JSX.Element;
+export declare function Switch({ checked: controlled, defaultChecked, onCheckedChange, disabled, tone, label, style, accessibilityLabel, }: SwitchProps): import("react").JSX.Element;
 //# sourceMappingURL=Switch.d.ts.map

package/dist/components/Switch/Switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAOzE,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAC;AAExE,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAQD;;;;;;;;;;;GAWG;AACH,wBAAgB,MAAM,CAAC,EACrB,OAAO,EAAE,UAAU,EACnB,cAAsB,EACtB,eAAe,EACf,QAAQ,EACR,IAAgB,EAChB,KAAK,EACL,kBAAkB,GACnB,EAAE,WAAW,+BA6Db"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAS9D,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAC;AAExE,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,uEAAuE;IACvE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAQD;;;;;;;;;;;GAWG;AACH,wBAAgB,MAAM,CAAC,EACrB,OAAO,EAAE,UAAU,EACnB,cAAsB,EACtB,eAAe,EACf,QAAQ,EACR,IAAgB,EAChB,KAAK,EACL,KAAK,EACL,kBAAkB,GACnB,EAAE,WAAW,+BAsEb"}

package/dist/components/Switch/Switch.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
-import { Pressable } from "react-native";
 import Animated, { useAnimatedStyle, useSharedValue } from "react-native-reanimated";
 import { useReducedMotion } from "../../hooks/useReducedMotion.js";
 import { springy } from "../../motion/index.js";
+import { grytScaleSteps } from "@gryt/theme";
 import { toneRamp, useTheme } from "../../theme/index.js";
+import { ControlRow } from "../internal/ControlRow.js";
 // The web is h-6 w-10 with a thumb translating x-4. Same numbers in points.
 const TRACK_WIDTH = 40;
 const TRACK_HEIGHT = 24;
@@ -22,7 +23,7 @@ const TRAVEL = 16;
  * The cost is that it does not pick up future platform restyling for free, which
  * is the trade the whole library is already making.
  */
-export function Switch({ checked: controlled, defaultChecked = false, onCheckedChange, disabled, tone = "primary", style, accessibilityLabel, }) {
+export function Switch({ checked: controlled, defaultChecked = false, onCheckedChange, disabled, tone = "primary", label, style, accessibilityLabel, }) {
     const theme = useTheme();
     const reducedMotion = useReducedMotion();
     const [uncontrolled, setUncontrolled] = useState(defaultChecked);
@@ -41,29 +42,32 @@ export function Switch({ checked: controlled, defaultChecked = false, onCheckedC
         transform: [{ translateX: offset.value }]
     }));
     const ramp = toneRamp(theme, tone);
-    return (_jsx(Pressable, { accessibilityRole: "switch", accessibilityState: { checked, disabled: !!disabled }, accessibilityLabel: accessibilityLabel, disabled: disabled, onPress: () => {
+    return (_jsx(ControlRow, { label: label, onPress: () => {
             const next = !checked;
             if (controlled === undefined)
                 setUncontrolled(next);
             onCheckedChange?.(next);
-        }, style: [
-            {
+        }, disabled: disabled, pressScale: grytScaleSteps.switch.press, accessibilityRole: "switch", accessibilityState: { checked, disabled: !!disabled }, accessibilityLabel: accessibilityLabel, style: style, children: _jsx(Animated.View, { style: {
                 width: TRACK_WIDTH,
                 height: TRACK_HEIGHT,
                 borderRadius: TRACK_HEIGHT / 2,
                 padding: (TRACK_HEIGHT - THUMB) / 2,
                 justifyContent: "center",
-                backgroundColor: checked ? ramp[8] : theme.scales.neutral[5],
+                // The web outlines the track and fills it with surfaceRaised when
+                // off, then paints the tone over it and drops the border to
+                // transparent. This was neutral[5] with no border, which is close
+                // enough to look right on its own and wrong beside a checkbox.
+                borderWidth: 1,
+                borderColor: checked ? "transparent" : theme.color.border,
+                backgroundColor: checked ? ramp[8] : theme.color.surfaceRaised,
                 opacity: disabled ? 0.5 : 1,
-            },
-            style,
-        ], children: _jsx(Animated.View, { style: [
-                {
-                    width: THUMB,
-                    height: THUMB,
-                    borderRadius: THUMB / 2,
-                    backgroundColor: checked ? theme.color.bg : theme.color.text,
-                },
-                thumbStyle,
-            ] }) }));
+            }, children: _jsx(Animated.View, { style: [
+                    {
+                        width: THUMB,
+                        height: THUMB,
+                        borderRadius: THUMB / 2,
+                        backgroundColor: checked ? theme.color.bg : theme.color.text,
+                    },
+                    thumbStyle,
+                ] }) }) }));
 }

package/dist/components/Tabs/Tabs.d.ts

@@ -1,20 +1,49 @@
 import { type ReactNode } from "react";
 import { type StyleProp, type ViewStyle } from "react-native";
 type TabValue = string | number;
+export type TabsOrientation = "horizontal" | "vertical";
 export interface TabsProps {
     value?: TabValue;
     defaultValue?: TabValue;
     onValueChange?: (value: TabValue) => void;
+    /**
+     * A rail rather than a row. Same visual language turned ninety degrees, and
+     * the same caveat the web carries: past about a dozen destinations a filled
+     * pill becomes a block of accent parked in the corner, and something quieter
+     * is the better call.
+     */
+    orientation?: TabsOrientation;
     children?: ReactNode;
     style?: StyleProp<ViewStyle>;
 }
-declare function Root({ value: controlled, defaultValue, onValueChange, children, style, }: TabsProps): import("react").JSX.Element;
+declare function Root({ value: controlled, defaultValue, onValueChange, orientation, children, style, }: TabsProps): import("react").JSX.Element;
 export interface TabsListProps {
     children?: ReactNode;
-    /** Tabs that do not fit scroll sideways rather than wrapping or shrinking. */
+    /**
+     * Tabs that do not fit scroll sideways rather than overflowing.
+     *
+     * Off by default, which is the web's behaviour and the reason this defaults
+     * the way it does — the web has no scroller here at all. It is kept because
+     * a phone is narrow and a five-tab rail genuinely does not fit, and clipping
+     * silently is worse than scrolling. Horizontal only; a vertical rail is a
+     * column in a screen that already scrolls.
+     */
     scrollable?: boolean;
     style?: StyleProp<ViewStyle>;
 }
+/**
+ * The pill rail, and the indicator that slides across it.
+ *
+ * The indicator lives here rather than in `Tabs.Indicator` because it needs
+ * every tab's measured box, and the list is the only part that sees them all.
+ * `Tabs.Indicator` is still exported and still renders nothing, so a call site
+ * copied from the web keeps working.
+ *
+ * The previous version of this file drew a 2px underline per tab and said
+ * sliding one pill was "real work for a decoration". It is real work, and the
+ * decoration is most of what the component looks like — an underline and a
+ * filled pill are not the same design with different paint.
+ */
 declare function List({ children, scrollable, style }: TabsListProps): import("react").JSX.Element;
 export interface TabProps {
     value: TabValue;
@@ -22,16 +51,6 @@ export interface TabProps {
     disabled?: boolean;
     style?: StyleProp<ViewStyle>;
 }
-/**
- * The underline is drawn by the tab, not by a separate indicator.
- *
- * `@gryt/ui` has a `Tabs.Indicator` that Base UI slides between tabs, measured
- * against the active one. Sliding it here means measuring every tab and
- * animating between them, which is real work for a decoration. Each tab draws
- * its own bottom border instead: it appears rather than slides.
- *
- * `Indicator` is still exported, as a no-op, so call sites match.
- */
 declare function Tab({ value, children, disabled, style }: TabProps): import("react").JSX.Element;
 export interface TabsPanelProps {
     value: TabValue;
@@ -39,7 +58,13 @@ export interface TabsPanelProps {
     style?: StyleProp<ViewStyle>;
 }
 declare function Panel({ value, children, style }: TabsPanelProps): import("react").JSX.Element | null;
-/** See Tab: the underline belongs to the tab here. Kept so call sites match. */
+/**
+ * Kept so a call site copied from the web keeps working.
+ *
+ * The indicator is drawn by `List`, which is the only part that has measured
+ * every tab. Rendering it here would mean measuring the list from inside one of
+ * its children.
+ */
 declare function Indicator(): null;
 export declare const Tabs: typeof Root & {
     List: typeof List;

package/dist/components/Tabs/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5E,OAAO,EAAqC,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIjG,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;AAehC,MAAM,WAAW,SAAS;IACxB,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,YAAY,CAAC,EAAE,QAAQ,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,iBAAS,IAAI,CAAC,EACZ,KAAK,EAAE,UAAU,EACjB,YAAY,EACZ,aAAa,EACb,QAAQ,EACR,KAAK,GACN,EAAE,SAAS,+BAgBX;AAED,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,8EAA8E;IAC9E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,iBAAS,IAAI,CAAC,EAAE,QAAQ,EAAE,UAAiB,EAAE,KAAK,EAAE,EAAE,aAAa,+BAyBlE;AAED,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,QAAQ,CAAC;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;;;;;GASG;AACH,iBAAS,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,QAAQ,+BAqC1D;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,QAAQ,CAAC;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,iBAAS,KAAK,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,cAAc,sCAOxD;AAED,gFAAgF;AAChF,iBAAS,SAAS,IAAI,IAAI,CAEzB;AAED,eAAO,MAAM,IAAI;;;;;CAAuD,CAAC;AACzE,OAAO,EAAE,GAAG,EAAE,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAML,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAOtB,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;AAChC,MAAM,MAAM,eAAe,GAAG,YAAY,GAAG,UAAU,CAAC;AA4BxD,MAAM,WAAW,SAAS;IACxB,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,YAAY,CAAC,EAAE,QAAQ,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC1C;;;;;OAKG;IACH,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,iBAAS,IAAI,CAAC,EACZ,KAAK,EAAE,UAAU,EACjB,YAAY,EACZ,aAAa,EACb,WAA0B,EAC1B,QAAQ,EACR,KAAK,GACN,EAAE,SAAS,+BA4DX;AAID,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;;;;;;;;GAYG;AACH,iBAAS,IAAI,CAAC,EAAE,QAAQ,EAAE,UAAkB,EAAE,KAAK,EAAE,EAAE,aAAa,+BAmFnE;AAED,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,QAAQ,CAAC;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,iBAAS,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,QAAQ,+BA2D1D;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,QAAQ,CAAC;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,iBAAS,KAAK,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,cAAc,sCAsBxD;AAED;;;;;;GAMG;AACH,iBAAS,SAAS,IAAI,IAAI,CAEzB;AAED,eAAO,MAAM,IAAI;;;;;CAAuD,CAAC;AACzE,OAAO,EAAE,GAAG,EAAE,CAAC"}

package/dist/components/Tabs/Tabs.js

@@ -1,6 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useState } from "react";
-import { Pressable, ScrollView, Text, View } from "react-native";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useMemo, useState, } from "react";
+import { Pressable, ScrollView, Text, View, } from "react-native";
+import Animated, { useAnimatedStyle, useSharedValue } from "react-native-reanimated";
+import { useReducedMotion } from "../../hooks/useReducedMotion.js";
+import { springy } from "../../motion/index.js";
 import { useTheme } from "../../theme/index.js";
 const TabsContext = createContext(null);
 function useTabs(part) {
@@ -9,72 +12,184 @@ function useTabs(part) {
         throw new Error(`Tabs.${part} must be rendered inside Tabs.`);
     return value;
 }
-function Root({ value: controlled, defaultValue, onValueChange, children, style, }) {
+/** Matches the web: `p-1` on the list, so the pill insets by 4 on every side. */
+const LIST_PADDING = 4;
+function Root({ value: controlled, defaultValue, onValueChange, orientation = "horizontal", children, style, }) {
     const [uncontrolled, setUncontrolled] = useState(defaultValue ?? null);
+    const [boxes, setBoxes] = useState({});
     const value = controlled ?? uncontrolled;
-    return (_jsx(TabsContext.Provider, { value: {
-            value,
-            setValue: (next) => {
-                if (controlled === undefined)
-                    setUncontrolled(next);
-                onValueChange?.(next);
-            },
-        }, children: _jsx(View, { style: style, children: children }) }));
+    // Keyed by String(value) because a Record cannot key on `string | number`
+    // and 1 and "1" would collide. They are already distinct TabValues, so
+    // collapsing them here would make two tabs share one measurement.
+    const report = useCallback((tab, box) => {
+        setBoxes((prev) => {
+            const key = `${typeof tab}:${tab}`;
+            const seen = prev[key];
+            if (seen &&
+                seen.x === box.x &&
+                seen.y === box.y &&
+                seen.width === box.width &&
+                seen.height === box.height) {
+                // onLayout fires on every re-render in some trees, and setting state
+                // unconditionally from it is an infinite loop.
+                return prev;
+            }
+            return { ...prev, [key]: box };
+        });
+    }, []);
+    const context = useMemo(() => ({
+        value,
+        orientation,
+        report,
+        setValue: (next) => {
+            if (controlled === undefined)
+                setUncontrolled(next);
+            onValueChange?.(next);
+        },
+    }), [value, orientation, report, controlled, onValueChange]);
+    return (_jsx(TabsContext.Provider, { value: context, children: _jsx(BoxesContext.Provider, { value: boxes, children: _jsx(View, { style: [
+                    // Vertical puts the rail and the panel side by side, as the web's
+                    // `data-[orientation=vertical]:flex` does.
+                    orientation === "vertical"
+                        ? { flexDirection: "row", alignItems: "stretch" }
+                        : null,
+                    style,
+                ], children: children }) }) }));
 }
-function List({ children, scrollable = true, style }) {
+const BoxesContext = createContext({});
+/**
+ * The pill rail, and the indicator that slides across it.
+ *
+ * The indicator lives here rather than in `Tabs.Indicator` because it needs
+ * every tab's measured box, and the list is the only part that sees them all.
+ * `Tabs.Indicator` is still exported and still renders nothing, so a call site
+ * copied from the web keeps working.
+ *
+ * The previous version of this file drew a 2px underline per tab and said
+ * sliding one pill was "real work for a decoration". It is real work, and the
+ * decoration is most of what the component looks like — an underline and a
+ * filled pill are not the same design with different paint.
+ */
+function List({ children, scrollable = false, style }) {
     const theme = useTheme();
-    const row = (_jsx(View, { accessibilityRole: "tablist", style: [
+    const tabs = useTabs("List");
+    const boxes = useContext(BoxesContext);
+    const reducedMotion = useReducedMotion();
+    const vertical = tabs.orientation === "vertical";
+    const active = tabs.value === null ? undefined : boxes[`${typeof tabs.value}:${tabs.value}`];
+    // Starts at 0 and is only ever animated to a measured box, so the pill grows
+    // out of the left edge on first paint. The web has the same first-frame
+    // problem and solves it with `renderBeforeHydration`; here the first layout
+    // arrives in the same frame as the first paint, so there is nothing to see.
+    const x = useSharedValue(0);
+    const y = useSharedValue(0);
+    const w = useSharedValue(0);
+    const h = useSharedValue(0);
+    if (active) {
+        const to = reducedMotion
+            ? { x: active.x, y: active.y, w: active.width, h: active.height }
+            : null;
+        /* eslint-disable react-hooks/immutability */
+        // Assigned during render on purpose: a shared value is not React state and
+        // does not schedule one, and doing it in an effect would land the animation
+        // a frame after the tab's colour has already changed.
+        x.value = to ? to.x : springy(active.x);
+        y.value = to ? to.y : springy(active.y);
+        w.value = to ? to.w : springy(active.width);
+        h.value = to ? to.h : springy(active.height);
+        /* eslint-enable react-hooks/immutability */
+    }
+    const indicatorStyle = useAnimatedStyle(() => ({
+        transform: [{ translateX: x.value }, { translateY: y.value }],
+        width: w.value,
+        height: h.value,
+    }));
+    const row = (_jsxs(View, { accessibilityRole: "tablist", style: [
             {
-                flexDirection: "row",
-                gap: theme.space(1),
-                borderBottomWidth: 1,
-                borderBottomColor: theme.color.border,
+                flexDirection: vertical ? "column" : "row",
+                alignItems: vertical ? "stretch" : "center",
+                alignSelf: vertical ? "auto" : "flex-start",
+                gap: LIST_PADDING,
+                padding: LIST_PADDING,
+                backgroundColor: theme.color.surfaceRaised,
+                // A 999px radius on a tall box bows its short edges, which is why the
+                // web drops the rail to `lg` rather than keeping the pill shape.
+                borderRadius: vertical ? theme.radius.lg : theme.radius.full,
             },
             style,
-        ], children: children }));
-    if (!scrollable)
+        ], children: [active ? (_jsx(Animated.View, { pointerEvents: "none", style: [
+                    {
+                        position: "absolute",
+                        left: 0,
+                        top: 0,
+                        borderRadius: vertical ? theme.radius.md : theme.radius.full,
+                        backgroundColor: theme.color.accent,
+                    },
+                    indicatorStyle,
+                ] })) : null, children] }));
+    if (!scrollable || vertical)
         return row;
     return (_jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, children: row }));
 }
-/**
- * The underline is drawn by the tab, not by a separate indicator.
- *
- * `@gryt/ui` has a `Tabs.Indicator` that Base UI slides between tabs, measured
- * against the active one. Sliding it here means measuring every tab and
- * animating between them, which is real work for a decoration. Each tab draws
- * its own bottom border instead: it appears rather than slides.
- *
- * `Indicator` is still exported, as a no-op, so call sites match.
- */
 function Tab({ value, children, disabled, style }) {
     const theme = useTheme();
     const tabs = useTabs("Tab");
     const active = tabs.value === value;
-    return (_jsx(Pressable, { accessibilityRole: "tab", accessibilityState: { selected: active, disabled: !!disabled }, disabled: disabled, onPress: () => tabs.setValue(value), style: [
+    const vertical = tabs.orientation === "vertical";
+    const onLayout = useCallback((e) => {
+        const { x, y, width, height } = e.nativeEvent.layout;
+        tabs.report(value, { x, y, width, height });
+    }, [tabs, value]);
+    return (_jsx(Pressable, { accessibilityRole: "tab", accessibilityState: { selected: active, disabled: !!disabled }, disabled: disabled, onPress: () => tabs.setValue(value), onLayout: onLayout, 
+        // Sits above the indicator, which is absolutely positioned behind it.
+        // Without this the pill paints over its own label.
+        style: [
             {
-                paddingHorizontal: theme.space(4),
-                paddingVertical: theme.space(3),
-                borderBottomWidth: 2,
-                borderBottomColor: active ? theme.color.accent : "transparent",
+                zIndex: 1,
+                minHeight: vertical ? 36 : 32,
+                paddingHorizontal: vertical ? 12 : 16,
+                paddingVertical: 6,
+                alignItems: "center",
+                justifyContent: vertical ? "flex-start" : "center",
+                flexDirection: "row",
+                gap: vertical ? 10 : 0,
+                borderRadius: vertical ? theme.radius.md : theme.radius.full,
                 opacity: disabled ? 0.5 : 1,
             },
             style,
-        ], children: typeof children === "string" ? (_jsx(Text, { style: {
-                color: active ? theme.color.text : theme.color.muted,
+        ], children: typeof children === "string" ? (_jsx(Text, { numberOfLines: 1, style: {
+                // The tab only changes its text colour; the fill belongs to the
+                // indicator so it can travel. `onAccent` rather than `text`,
+                // because the pill underneath is the accent.
+                color: active ? theme.color.onAccent : theme.color.muted,
                 fontSize: 14,
-                fontWeight: active ? "600" : "500",
+                lineHeight: 20,
+                fontWeight: "500",
             }, children: children })) : (children) }));
 }
 function Panel({ value, children, style }) {
+    const theme = useTheme();
     const tabs = useTabs("Panel");
     if (tabs.value !== value)
         return null;
+    const vertical = tabs.orientation === "vertical";
     // React Native has "tab" and "tablist" but no "tabpanel" role, so there is
-    // nothing to put here. The panel is still reachable, it just does not announce
-    // itself as the tab's panel. In the exceptions table.
-    return _jsx(View, { style: style, children: children });
+    // nothing to put here. The panel is still reachable, it just does not
+    // announce itself as the tab's panel. In the exceptions table.
+    return (_jsx(View, { style: [
+            vertical
+                ? { flex: 1, minWidth: 0, paddingLeft: theme.space(4) }
+                : { paddingTop: theme.space(3) },
+            style,
+        ], children: children }));
 }
-/** See Tab: the underline belongs to the tab here. Kept so call sites match. */
+/**
+ * Kept so a call site copied from the web keeps working.
+ *
+ * The indicator is drawn by `List`, which is the only part that has measured
+ * every tab. Rendering it here would mean measuring the list from inside one of
+ * its children.
+ */
 function Indicator() {
     return null;
 }

package/dist/components/Toggle/Toggle.d.ts

@@ -14,6 +14,5 @@ export interface ToggleProps {
     style?: StyleProp<ViewStyle>;
     accessibilityLabel?: string;
 }
-/** A button that stays down. Mute, deafen, and the rest of the call controls. */
 export declare function Toggle({ pressed: controlled, defaultPressed, onPressedChange, disabled, tone, size, children, style, accessibilityLabel, }: ToggleProps): import("react").JSX.Element;
 //# sourceMappingURL=Toggle.d.ts.map

package/dist/components/Toggle/Toggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/Toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAmB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE/E,OAAO,EAAsB,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAErE,MAAM,MAAM,UAAU,GAAG,OAAO,CAAC,aAAa,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAC,CAAC;AAChG,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AASjE,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,iFAAiF;AACjF,wBAAgB,MAAM,CAAC,EACrB,OAAO,EAAE,UAAU,EACnB,cAAsB,EACtB,eAAe,EACf,QAAQ,EACR,IAAgB,EAChB,IAAe,EACf,QAAQ,EACR,KAAK,EACL,kBAAkB,GACnB,EAAE,WAAW,+BAgDb"}
+{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/Toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAmB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAM/E,OAAO,EAAsB,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAErE,MAAM,MAAM,UAAU,GAAG,OAAO,CAAC,aAAa,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAC,CAAC;AAChG,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AASjE,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAaD,wBAAgB,MAAM,CAAC,EACrB,OAAO,EAAE,UAAU,EACnB,cAAsB,EACtB,eAAe,EACf,QAAQ,EACR,IAAgB,EAChB,IAAe,EACf,QAAQ,EACR,KAAK,EACL,kBAAkB,GACnB,EAAE,WAAW,+BAoDb"}

package/dist/components/Toggle/Toggle.js

@@ -1,6 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from "react";
 import { Pressable, Text } from "react-native";
+import Animated from "react-native-reanimated";
+import { grytScaleSteps } from "@gryt/theme";
+import { usePressScale } from "../../motion/index.js";
 import { toneRamp, useTheme } from "../../theme/index.js";
 const SIZES = {
     xsmall: { minHeight: 32, paddingH: 10, fontSize: 12 },
@@ -9,18 +12,29 @@ const SIZES = {
     large: { minHeight: 48, paddingH: 18, fontSize: 16 },
 };
 /** A button that stays down. Mute, deafen, and the rest of the call controls. */
+/**
+ * Animated.createAnimatedComponent rather than a wrapping Animated.View.
+ *
+ * A Toggle is laid out by its parent — a Toolbar puts them in a row — and an
+ * extra view between the two would take the layout props and leave the button
+ * sized by its content. The web scales the button element itself, so this does
+ * too.
+ */
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 export function Toggle({ pressed: controlled, defaultPressed = false, onPressedChange, disabled, tone = "primary", size = "medium", children, style, accessibilityLabel, }) {
     const theme = useTheme();
+    const press = usePressScale(grytScaleSteps.toggle.press, disabled);
     const [uncontrolled, setUncontrolled] = useState(defaultPressed);
     const on = controlled ?? uncontrolled;
     const metrics = SIZES[size];
     const ramp = toneRamp(theme, tone);
-    return (_jsx(Pressable, { accessibilityRole: "button", accessibilityState: { selected: on, disabled: !!disabled }, accessibilityLabel: accessibilityLabel, disabled: disabled, onPress: () => {
+    return (_jsx(AnimatedPressable, { accessibilityRole: "button", accessibilityState: { selected: on, disabled: !!disabled }, accessibilityLabel: accessibilityLabel, disabled: disabled, onPressIn: press.onPressIn, onPressOut: press.onPressOut, onPress: () => {
             const next = !on;
             if (controlled === undefined)
                 setUncontrolled(next);
             onPressedChange?.(next);
         }, style: [
+            press.style,
             {
                 minHeight: metrics.minHeight,
                 paddingHorizontal: metrics.paddingH,

package/dist/components/internal/ControlRow.d.ts

@@ -0,0 +1,54 @@
+import type { ReactNode } from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
+/**
+ * A control and its label, where tapping either one works.
+ *
+ * The web gets this for free: the sign-in screen wraps `<Checkbox>` in a
+ * `<label>` and the browser forwards the click. React Native has no `<label>`
+ * and no `htmlFor`, so the association has to be structural — the label and the
+ * control are inside one Pressable, and that Pressable is the target.
+ *
+ * This is a parity *match* reached through a different API, which is why the
+ * exceptions table lists it as an API difference rather than a behaviour one.
+ * Tapping a label toggles the control on both platforms; only the way you say
+ * so differs.
+ *
+ * Without a label it renders the control alone, so the bare form still works
+ * and nothing existing has to change.
+ */
+/**
+ * How far past its own edge a control still counts as pressed.
+ *
+ * There is no web equivalent and nothing to be 1:1 with — a pointer is exact
+ * and a fingertip is about 9mm across. 20×20 is well under the 44pt minimum
+ * both Apple and WCAG ask for, and radios are usually stacked, so a near miss
+ * lands on the neighbour rather than on nothing.
+ *
+ * 12 on each side takes a 20pt box to 44pt without moving a single pixel of
+ * what is drawn. It is deliberately not padding: padding would change the
+ * layout and the spacing between a control and its label.
+ */
+export declare const CONTROL_HIT_SLOP: {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+};
+export interface ControlRowProps {
+    /** Tapping this toggles the control. Omit for a bare control. */
+    label?: ReactNode;
+    children: ReactNode;
+    onPress: () => void;
+    disabled?: boolean;
+    /** From `grytScaleSteps`, so it matches whatever the web does. */
+    pressScale: number;
+    accessibilityRole: "checkbox" | "radio" | "switch";
+    accessibilityState: {
+        checked?: boolean | "mixed";
+        disabled?: boolean;
+    };
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function ControlRow({ label, children, onPress, disabled, pressScale, accessibilityRole, accessibilityState, accessibilityLabel, style, }: ControlRowProps): import("react").JSX.Element;
+//# sourceMappingURL=ControlRow.d.ts.map

package/dist/components/internal/ControlRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlRow.d.ts","sourceRoot":"","sources":["../../../src/components/internal/ControlRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAyB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAMrF;;;;;;;;;;;;;;;GAeG;AAEH;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,gBAAgB;;;;;CAA+C,CAAC;AAE7E,MAAM,WAAW,eAAe;IAC9B,iEAAiE;IACjE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kEAAkE;IAClE,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB,EAAE,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAC;IACnD,kBAAkB,EAAE;QAAE,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IACxE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,UAAU,EACV,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,KAAK,GACN,EAAE,eAAe,+BAqDjB"}