@gryt/ui-native 0.1.0

package/dist/components/Select/Select.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from "react";
+import { Pressable, Text, View } from "react-native";
+import { AnchoredPopup } from "../../overlay/AnchoredPopup.js";
+import { useAnchorMeasure } from "../../overlay/useAnchoredPosition.js";
+import { useTheme } from "../../theme/index.js";
+const SIZES = {
+    small: { minHeight: 36, fontSize: 14, paddingH: 12 },
+    medium: { minHeight: 40, fontSize: 14, paddingH: 14 },
+};
+/**
+ * A single component, like the web's, rather than a namespace.
+ *
+ * `@gryt/ui`'s Select takes an `options` array and renders the trigger, the
+ * list, the checkmark and the positioning itself, so this matches that shape
+ * instead of exposing Root/Trigger/Popup.
+ *
+ * Underneath it is the same anchored popup Menu uses. The one thing worth
+ * knowing: the platform pickers are not used. iOS would give a wheel and Android
+ * a dialog, neither takes the Gryt palette, and the two look nothing like each
+ * other. A list matching the rest of the library is more use than two native
+ * controls that match neither.
+ */
+export function Select({ options = [], value: controlled, defaultValue = null, onValueChange, label, placeholder = "Select…", size = "medium", disabled, style, }) {
+    const theme = useTheme();
+    const metrics = SIZES[size];
+    const [open, setOpen] = useState(false);
+    const [uncontrolled, setUncontrolled] = useState(defaultValue);
+    const value = controlled === undefined ? uncontrolled : controlled;
+    const { anchor, measure } = useAnchorMeasure();
+    const ref = useRef(null);
+    const selected = options.find((o) => o.value === value);
+    const openList = useCallback(() => {
+        measure(ref.current);
+        setOpen(true);
+    }, [measure]);
+    return (_jsxs(View, { style: [{ gap: theme.space(1.5) }, style], children: [label ? (_jsx(Text, { style: { color: theme.color.muted, fontSize: 13, fontWeight: "500" }, children: label })) : null, _jsxs(Pressable, { ref: ref, accessibilityRole: "button", accessibilityState: { disabled: !!disabled, expanded: open }, disabled: disabled, onPress: openList, style: {
+                    minHeight: metrics.minHeight,
+                    paddingHorizontal: metrics.paddingH,
+                    flexDirection: "row",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    gap: theme.space(2),
+                    borderWidth: 1,
+                    borderColor: open ? theme.color.accent : theme.color.border,
+                    borderRadius: theme.radius.md,
+                    backgroundColor: theme.color.surface,
+                    opacity: disabled ? 0.5 : 1,
+                }, children: [typeof selected?.label === "string" || selected === undefined ? (_jsx(Text, { numberOfLines: 1, style: {
+                            flex: 1,
+                            color: selected ? theme.color.text : theme.color.muted,
+                            fontSize: metrics.fontSize,
+                        }, children: selected ? selected.label : placeholder })) : (_jsx(View, { style: { flex: 1 }, children: selected.label })), _jsx(Text, { style: { color: theme.color.muted, fontSize: 11 }, children: "\u25BE" })] }), _jsx(AnchoredPopup, { open: open, anchor: anchor, onDismiss: () => setOpen(false), align: "start", style: { paddingVertical: theme.space(1), minWidth: 180 }, children: _jsx(View, { accessibilityRole: "menu", children: options.map((option) => {
+                        const isSelected = option.value === value;
+                        return (_jsxs(Pressable, { accessibilityRole: "menuitem", accessibilityState: { selected: isSelected, disabled: !!option.disabled }, disabled: option.disabled, onPress: () => {
+                                if (controlled === undefined)
+                                    setUncontrolled(option.value);
+                                onValueChange?.(option.value);
+                                setOpen(false);
+                            }, style: ({ pressed }) => ({
+                                flexDirection: "row",
+                                alignItems: "center",
+                                justifyContent: "space-between",
+                                gap: theme.space(3),
+                                paddingHorizontal: theme.space(4),
+                                paddingVertical: theme.space(2.5),
+                                opacity: option.disabled ? 0.5 : 1,
+                                backgroundColor: pressed ? theme.color.surfaceHover : "transparent",
+                            }), children: [typeof option.label === "string" ? (_jsx(Text, { style: { color: theme.color.text, fontSize: 14 }, children: option.label })) : (option.label), isSelected ? (_jsx(Text, { style: { color: theme.color.accent, fontSize: 13, fontWeight: "900" }, children: "\u2713" })) : null] }, String(option.value)));
+                    }) }) })] }));
+}

package/dist/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,18 @@
+import { type DimensionValue, type StyleProp, type ViewStyle } from "react-native";
+export interface SkeletonProps {
+    width?: DimensionValue;
+    height?: number;
+    /** Matches the shape of what is loading. `circle` for avatars. */
+    shape?: "rect" | "circle" | "text";
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Still, not shimmering.
+ *
+ * The web version pulses. A looping animation here would run for as long as the
+ * request takes, on a device where that costs battery, and it is the kind of
+ * motion reduce-motion users turn off first. A flat block reads as "loading"
+ * without any of that. Recorded in the parity exceptions table.
+ */
+export declare function Skeleton({ width, height, shape, style, }: SkeletonProps): import("react").JSX.Element;
+//# sourceMappingURL=Skeleton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIzF,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;IACnC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAc,EACd,MAAM,EACN,KAAc,EACd,KAAK,GACN,EAAE,aAAa,+BAwBf"}

package/dist/components/Skeleton/Skeleton.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from "react-native";
+import { useTheme } from "../../theme/index.js";
+/**
+ * Still, not shimmering.
+ *
+ * The web version pulses. A looping animation here would run for as long as the
+ * request takes, on a device where that costs battery, and it is the kind of
+ * motion reduce-motion users turn off first. A flat block reads as "loading"
+ * without any of that. Recorded in the parity exceptions table.
+ */
+export function Skeleton({ width = "100%", height, shape = "rect", style, }) {
+    const theme = useTheme();
+    const resolved = height ?? (shape === "text" ? 14 : 40);
+    return (_jsx(View, { accessibilityRole: "progressbar", accessibilityLabel: "Loading", style: [
+            {
+                width,
+                height: resolved,
+                backgroundColor: theme.scales.neutral[3],
+                borderRadius: shape === "circle"
+                    ? resolved / 2
+                    : shape === "text"
+                        ? theme.radius.sm
+                        : theme.radius.md,
+            },
+            style,
+        ] }));
+}

package/dist/components/Slider/Slider.d.ts

@@ -0,0 +1,29 @@
+import { type StyleProp, type ViewStyle } from "react-native";
+import { type ComponentTone } from "../../theme/index.js";
+export type SliderTone = Extract<ComponentTone, "primary" | "secondary" | "neutral" | "danger">;
+export interface SliderProps {
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    /** Fires once at the end of a drag, for anything expensive. */
+    onValueCommit?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    tone?: SliderTone;
+    style?: StyleProp<ViewStyle>;
+    accessibilityLabel?: string;
+}
+/**
+ * Dragging, on a surface where a drag might belong to something else.
+ *
+ * The web gets pointer capture: once the thumb is grabbed, every move belongs to
+ * the slider until release. React Native has no equivalent, so this claims the
+ * gesture through PanResponder and holds it, which is what stops a horizontal
+ * drag being read as a scroll by whatever list the slider is sitting in.
+ *
+ * Volume sliders live in scroll views, so this matters more here than it looks.
+ */
+export declare function Slider({ value: controlled, defaultValue, onValueChange, onValueCommit, min, max, step, disabled, tone, style, accessibilityLabel, }: SliderProps): import("react").JSX.Element;
+//# sourceMappingURL=Slider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AACA,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,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;AAEhG,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,+DAA+D;IAC/D,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,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;AAKD;;;;;;;;;GASG;AACH,wBAAgB,MAAM,CAAC,EACrB,KAAK,EAAE,UAAU,EACjB,YAAgB,EAChB,aAAa,EACb,aAAa,EACb,GAAO,EACP,GAAS,EACT,IAAQ,EACR,QAAQ,EACR,IAAgB,EAChB,KAAK,EACL,kBAAkB,GACnB,EAAE,WAAW,+BA0Gb"}

package/dist/components/Slider/Slider.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { PanResponder, View, } from "react-native";
+import { toneRamp, useTheme } from "../../theme/index.js";
+const TRACK_HEIGHT = 4;
+const THUMB = 20;
+/**
+ * Dragging, on a surface where a drag might belong to something else.
+ *
+ * The web gets pointer capture: once the thumb is grabbed, every move belongs to
+ * the slider until release. React Native has no equivalent, so this claims the
+ * gesture through PanResponder and holds it, which is what stops a horizontal
+ * drag being read as a scroll by whatever list the slider is sitting in.
+ *
+ * Volume sliders live in scroll views, so this matters more here than it looks.
+ */
+export function Slider({ value: controlled, defaultValue = 0, onValueChange, onValueCommit, min = 0, max = 100, step = 1, disabled, tone = "primary", style, accessibilityLabel, }) {
+    const theme = useTheme();
+    const [uncontrolled, setUncontrolled] = useState(defaultValue);
+    const value = controlled ?? uncontrolled;
+    const [width, setWidth] = useState(0);
+    const ramp = toneRamp(theme, tone);
+    // The responder callbacks are created once and would otherwise close over the
+    // first render's values forever, so the current ones live in refs. Written in
+    // an effect rather than during render: mutating a ref while rendering is the
+    // kind of thing that breaks under concurrent rendering, and the callbacks only
+    // 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 });
+    useEffect(() => {
+        state.current = { width, value, min, max, step, disabled };
+    }, [width, value, min, max, step, disabled]);
+    useEffect(() => {
+        emit.current = { onValueChange, onValueCommit, controlled };
+    }, [onValueChange, onValueCommit, controlled]);
+    const valueFromX = (x) => {
+        const s = state.current;
+        if (s.width <= 0)
+            return s.value;
+        const ratio = Math.max(0, Math.min(1, x / s.width));
+        const raw = s.min + ratio * (s.max - s.min);
+        const stepped = Math.round(raw / s.step) * s.step;
+        return Math.max(s.min, Math.min(s.max, stepped));
+    };
+    const apply = (next) => {
+        if (emit.current.controlled === undefined)
+            setUncontrolled(next);
+        emit.current.onValueChange?.(next);
+    };
+    // useState with an initialiser rather than useRef(...).current, which counts
+    // as reading a ref during render. Created once either way.
+    //
+    // The rule is disabled for the block below because it reads what the closures
+    // mention, not what runs. Every state.current here executes inside a touch
+    // callback, long after render, and none of it decides what is drawn — the
+    // rendered position comes from `value` and `width` directly. The thing the
+    // rule protects against, a component rendering from a ref and not updating,
+    // cannot happen here.
+    /* eslint-disable react-hooks/refs */
+    const [responder] = useState(() => PanResponder.create({
+        onStartShouldSetPanResponder: () => !state.current.disabled,
+        // Claimed on move as well, so a drag that begins as a scroll still lands
+        // here once it is clearly horizontal.
+        onMoveShouldSetPanResponder: () => !state.current.disabled,
+        onPanResponderGrant: (e) => apply(valueFromX(e.nativeEvent.locationX)),
+        onPanResponderMove: (_e, gesture) => {
+            const s = state.current;
+            const ratio = (s.value - s.min) / (s.max - s.min || 1);
+            apply(valueFromX(ratio * s.width + gesture.dx));
+        },
+        onPanResponderRelease: () => emit.current.onValueCommit?.(state.current.value),
+    }));
+    /* eslint-enable react-hooks/refs */
+    const ratio = (value - min) / (max - min || 1);
+    return (_jsxs(View, { accessibilityRole: "adjustable", accessibilityLabel: accessibilityLabel, accessibilityValue: { min, max, now: value }, onLayout: (e) => setWidth(e.nativeEvent.layout.width), style: [{ height: THUMB, justifyContent: "center", opacity: disabled ? 0.5 : 1 }, style], ...responder.panHandlers, children: [_jsx(View, { style: {
+                    height: TRACK_HEIGHT,
+                    borderRadius: TRACK_HEIGHT / 2,
+                    backgroundColor: theme.scales.neutral[4],
+                }, children: _jsx(View, { style: {
+                        width: `${ratio * 100}%`,
+                        height: "100%",
+                        borderRadius: TRACK_HEIGHT / 2,
+                        backgroundColor: ramp[8],
+                    } }) }), _jsx(View, { pointerEvents: "none", style: {
+                    position: "absolute",
+                    left: Math.max(0, ratio * width - THUMB / 2),
+                    width: THUMB,
+                    height: THUMB,
+                    borderRadius: THUMB / 2,
+                    backgroundColor: ramp[8],
+                    borderWidth: 2,
+                    borderColor: theme.color.bg,
+                } })] }));
+}

package/dist/components/Spinner/Spinner.d.ts

@@ -0,0 +1,20 @@
+import { type StyleProp, type ViewStyle } from "react-native";
+export interface SpinnerProps {
+    size?: "small" | "large";
+    /** Defaults to the accent solid step, the same one the web spinner uses. */
+    color?: string;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * The platform indicator rather than a rotating SVG.
+ *
+ * `@gryt/ui`'s Spinner is a CSS animation on a stroked circle, and it could be
+ * reproduced here with Animated and a loop. It should not be: ActivityIndicator
+ * is what the OS draws for "working", it respects reduce-motion for free, and on
+ * iOS and Android it looks different from each other on purpose.
+ *
+ * So this is the first entry on the parity exceptions list — the behaviour
+ * matches, the drawing does not, and matching the drawing would be worse.
+ */
+export declare function Spinner({ size, color, style }: SpinnerProps): import("react").JSX.Element;
+//# sourceMappingURL=Spinner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIjF,MAAM,WAAW,YAAY;IAC3B,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACzB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,OAAO,CAAC,EAAE,IAAc,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,YAAY,+BASrE"}

package/dist/components/Spinner/Spinner.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ActivityIndicator } from "react-native";
+import { useTheme } from "../../theme/index.js";
+/**
+ * The platform indicator rather than a rotating SVG.
+ *
+ * `@gryt/ui`'s Spinner is a CSS animation on a stroked circle, and it could be
+ * reproduced here with Animated and a loop. It should not be: ActivityIndicator
+ * is what the OS draws for "working", it respects reduce-motion for free, and on
+ * iOS and Android it looks different from each other on purpose.
+ *
+ * So this is the first entry on the parity exceptions list — the behaviour
+ * matches, the drawing does not, and matching the drawing would be worse.
+ */
+export function Spinner({ size = "small", color, style }) {
+    const theme = useTheme();
+    return (_jsx(ActivityIndicator, { size: size, color: color ?? theme.scales.accent[8], style: style }));
+}

package/dist/components/Surface/Surface.d.ts

@@ -0,0 +1,17 @@
+import { type StyleProp, type ViewProps, type ViewStyle } from "react-native";
+/**
+ * A panel. The thing almost everything else sits on.
+ *
+ * `@gryt/ui`'s Surface is a div with Tailwind classes picking `--gryt-neutral-*`
+ * steps. The steps are the same here; only the delivery differs.
+ */
+export type SurfaceLevel = "bg" | "surface" | "raised";
+export interface SurfaceProps extends ViewProps {
+    level?: SurfaceLevel;
+    bordered?: boolean;
+    radius?: "sm" | "md" | "lg" | "xl" | "full" | "none";
+    padding?: number;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function Surface({ level, bordered, radius, padding, style, ...rest }: SurfaceProps): import("react").JSX.Element;
+//# sourceMappingURL=Surface.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Surface.d.ts","sourceRoot":"","sources":["../../../src/components/Surface/Surface.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIpF;;;;;GAKG;AACH,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEvD,MAAM,WAAW,YAAa,SAAQ,SAAS;IAC7C,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,OAAO,CAAC,EACtB,KAAiB,EACjB,QAAgB,EAChB,MAAa,EACb,OAAO,EACP,KAAK,EACL,GAAG,IAAI,EACR,EAAE,YAAY,+BA0Bd"}

package/dist/components/Surface/Surface.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from "react-native";
+import { useTheme } from "../../theme/index.js";
+export function Surface({ level = "surface", bordered = false, radius = "md", padding, style, ...rest }) {
+    const theme = useTheme();
+    const background = level === "bg"
+        ? theme.color.bg
+        : level === "raised"
+            ? theme.color.surfaceRaised
+            : theme.color.surface;
+    return (_jsx(View, { style: [
+            {
+                backgroundColor: background,
+                borderRadius: radius === "none" ? 0 : theme.radius[radius],
+                ...(bordered
+                    ? { borderWidth: 1, borderColor: theme.color.border }
+                    : null),
+                ...(padding === undefined ? null : { padding: theme.space(padding) }),
+            },
+            style,
+        ], ...rest }));
+}

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

@@ -0,0 +1,25 @@
+import { type StyleProp, type ViewStyle } from "react-native";
+export type SwitchTone = "primary" | "secondary" | "neutral" | "danger";
+export interface SwitchProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    tone?: SwitchTone;
+    style?: StyleProp<ViewStyle>;
+    accessibilityLabel?: string;
+}
+/**
+ * Not React Native's own Switch.
+ *
+ * `<Switch>` from React Native draws the platform control, which is green on
+ * iOS and follows the Material palette on Android. Neither is the Gryt accent,
+ * and `thumbColor`/`trackColor` do not reach the whole shape. A design system
+ * that cannot colour its own switch is not much of a design system, so this is
+ * drawn from the tokens like everything else.
+ *
+ * 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;
+//# sourceMappingURL=Switch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AACA,OAAO,EAAuB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAKnF,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,+BA0Db"}

package/dist/components/Switch/Switch.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Animated, Pressable } from "react-native";
+import { useReducedMotion } from "../../hooks/useReducedMotion.js";
+import { toneRamp, useTheme } from "../../theme/index.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;
+const THUMB = 16;
+const TRAVEL = 16;
+/**
+ * Not React Native's own Switch.
+ *
+ * `<Switch>` from React Native draws the platform control, which is green on
+ * iOS and follows the Material palette on Android. Neither is the Gryt accent,
+ * and `thumbColor`/`trackColor` do not reach the whole shape. A design system
+ * that cannot colour its own switch is not much of a design system, so this is
+ * drawn from the tokens like everything else.
+ *
+ * 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, }) {
+    const theme = useTheme();
+    const reducedMotion = useReducedMotion();
+    const [uncontrolled, setUncontrolled] = useState(defaultChecked);
+    const checked = controlled ?? uncontrolled;
+    const [offset] = useState(() => new Animated.Value(checked ? TRAVEL : 0));
+    useEffect(() => {
+        if (reducedMotion) {
+            offset.setValue(checked ? TRAVEL : 0);
+            return;
+        }
+        Animated.spring(offset, {
+            toValue: checked ? TRAVEL : 0,
+            useNativeDriver: true,
+            speed: 40,
+            bounciness: 4,
+        }).start();
+    }, [checked, offset, reducedMotion]);
+    const ramp = toneRamp(theme, tone);
+    return (_jsx(Pressable, { accessibilityRole: "switch", accessibilityState: { checked, disabled: !!disabled }, accessibilityLabel: accessibilityLabel, disabled: disabled, onPress: () => {
+            const next = !checked;
+            if (controlled === undefined)
+                setUncontrolled(next);
+            onCheckedChange?.(next);
+        }, 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],
+                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,
+                transform: [{ translateX: offset }],
+            } }) }));
+}

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

@@ -0,0 +1,51 @@
+import { type ReactNode } from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
+type TabValue = string | number;
+export interface TabsProps {
+    value?: TabValue;
+    defaultValue?: TabValue;
+    onValueChange?: (value: TabValue) => void;
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Root({ value: controlled, defaultValue, onValueChange, children, style, }: TabsProps): import("react").JSX.Element;
+export interface TabsListProps {
+    children?: ReactNode;
+    /** Tabs that do not fit scroll sideways rather than wrapping or shrinking. */
+    scrollable?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+declare function List({ children, scrollable, style }: TabsListProps): import("react").JSX.Element;
+export interface TabProps {
+    value: TabValue;
+    children?: ReactNode;
+    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;
+    children?: ReactNode;
+    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. */
+declare function Indicator(): null;
+export declare const Tabs: typeof Root & {
+    List: typeof List;
+    Tab: typeof Tab;
+    Panel: typeof Panel;
+    Indicator: typeof Indicator;
+};
+export { Tab };
+//# sourceMappingURL=Tabs.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState } from "react";
+import { Pressable, ScrollView, Text, View } from "react-native";
+import { useTheme } from "../../theme/index.js";
+const TabsContext = createContext(null);
+function useTabs(part) {
+    const value = useContext(TabsContext);
+    if (!value)
+        throw new Error(`Tabs.${part} must be rendered inside Tabs.`);
+    return value;
+}
+function Root({ value: controlled, defaultValue, onValueChange, children, style, }) {
+    const [uncontrolled, setUncontrolled] = useState(defaultValue ?? null);
+    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 }) }));
+}
+function List({ children, scrollable = true, style }) {
+    const theme = useTheme();
+    const row = (_jsx(View, { accessibilityRole: "tablist", style: [
+            {
+                flexDirection: "row",
+                gap: theme.space(1),
+                borderBottomWidth: 1,
+                borderBottomColor: theme.color.border,
+            },
+            style,
+        ], children: children }));
+    if (!scrollable)
+        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: [
+            {
+                paddingHorizontal: theme.space(4),
+                paddingVertical: theme.space(3),
+                borderBottomWidth: 2,
+                borderBottomColor: active ? theme.color.accent : "transparent",
+                opacity: disabled ? 0.5 : 1,
+            },
+            style,
+        ], children: typeof children === "string" ? (_jsx(Text, { style: {
+                color: active ? theme.color.text : theme.color.muted,
+                fontSize: 14,
+                fontWeight: active ? "600" : "500",
+            }, children: children })) : (children) }));
+}
+function Panel({ value, children, style }) {
+    const tabs = useTabs("Panel");
+    if (tabs.value !== value)
+        return null;
+    // 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 });
+}
+/** See Tab: the underline belongs to the tab here. Kept so call sites match. */
+function Indicator() {
+    return null;
+}
+export const Tabs = Object.assign(Root, { List, Tab, Panel, Indicator });
+export { Tab };

package/dist/components/TextField/TextField.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from "react";
+import { type StyleProp, type TextInputProps, type ViewStyle } from "react-native";
+export type TextFieldSize = "small" | "medium";
+export interface TextFieldProps extends Omit<TextInputProps, "style"> {
+    label?: ReactNode;
+    helperText?: ReactNode;
+    error?: boolean;
+    size?: TextFieldSize;
+    multiline?: boolean;
+    /** Web calls this minRows. Same meaning: the starting height in lines. */
+    minRows?: number;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function TextField({ label, helperText, error, size, multiline, minRows, style, editable, ...rest }: TextFieldProps): import("react").JSX.Element;
+//# sourceMappingURL=TextField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAItB,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,CAAC;AAO/C,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC;IACnE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,UAAU,EACV,KAAa,EACb,IAAe,EACf,SAAiB,EACjB,OAAW,EACX,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,cAAc,+BAsEhB"}