@gryt/ui-native 0.1.0

package/dist/components/Menu/Menu.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useRef } from "react";
+import { Pressable, Text, View } from "react-native";
+import { AnchoredPopup } from "../../overlay/AnchoredPopup.js";
+import { useAnchorMeasure } from "../../overlay/useAnchoredPosition.js";
+import { useOpenState } from "../../overlay/useOpenState.js";
+import { useTheme } from "../../theme/index.js";
+const MenuContext = createContext(null);
+function useMenu(part) {
+    const value = useContext(MenuContext);
+    if (!value)
+        throw new Error(`Menu.${part} must be rendered inside Menu.Root.`);
+    return value;
+}
+function Root({ children, ...openProps }) {
+    const { open, setOpen } = useOpenState(openProps);
+    const { anchor, measure } = useAnchorMeasure();
+    return (_jsx(MenuContext.Provider, { value: { open, setOpen, anchor, measure }, children: children }));
+}
+function Trigger({ children, style }) {
+    const { setOpen, measure } = useMenu("Trigger");
+    const ref = useRef(null);
+    const onPress = useCallback(() => {
+        measure(ref.current);
+        setOpen(true);
+    }, [measure, setOpen]);
+    return (_jsx(Pressable, { ref: ref, accessibilityRole: "button", onPress: onPress, style: style, children: children }));
+}
+function Portal({ children }) {
+    return _jsx(_Fragment, { children: children });
+}
+/**
+ * Kept as a passthrough for shape.
+ *
+ * Base UI splits Positioner from Popup so the positioned box and the styled box
+ * are separate elements. Here AnchoredPopup is both, because there is no
+ * stacking context to escape and nothing gained by the extra view.
+ */
+function Positioner({ children }) {
+    return _jsx(_Fragment, { children: children });
+}
+function Popup({ children, style, ...options }) {
+    const { open, setOpen, anchor } = useMenu("Popup");
+    const theme = useTheme();
+    return (_jsx(AnchoredPopup, { open: open, anchor: anchor, onDismiss: () => setOpen(false), align: "start", style: [{ paddingVertical: theme.space(1), minWidth: 180 }, style], ...options, children: _jsx(View, { accessibilityRole: "menu", children: children }) }));
+}
+function Item({ children, onPress, disabled, destructive, style }) {
+    const { setOpen } = useMenu("Item");
+    const theme = useTheme();
+    return (_jsx(Pressable, { accessibilityRole: "menuitem", accessibilityState: { disabled: !!disabled }, disabled: disabled, 
+        // Choosing something closes the menu, which is what Base UI does unless
+        // an item opts out. Nothing here opts out yet.
+        onPress: () => {
+            onPress?.();
+            setOpen(false);
+        }, style: ({ pressed }) => [
+            {
+                paddingHorizontal: theme.space(4),
+                paddingVertical: theme.space(2.5),
+                opacity: disabled ? 0.5 : 1,
+                backgroundColor: pressed ? theme.color.surfaceHover : "transparent",
+            },
+            style,
+        ], children: typeof children === "string" ? (_jsx(Text, { style: {
+                color: destructive ? theme.scales.danger[10] : theme.color.text,
+                fontSize: 14,
+            }, children: children })) : (children) }));
+}
+function Separator({ style }) {
+    const theme = useTheme();
+    return (_jsx(View, { style: [
+            { height: 1, backgroundColor: theme.color.border, marginVertical: theme.space(1) },
+            style,
+        ] }));
+}
+export const Menu = { Root, Trigger, Portal, Positioner, Popup, Item, Separator };

package/dist/components/Meter/Meter.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
+export interface MeterProps {
+    value: number;
+    min?: number;
+    max?: number;
+    label?: ReactNode;
+    /** Shows the formatted value at the end of the label row. */
+    showValue?: boolean;
+    format?: (value: number) => string;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * A reading, not a progress bar.
+ *
+ * Progress goes one way and finishes. A meter is a level that moves in both
+ * directions: microphone input, disk use, how full a channel is. `@gryt/ui`
+ * keeps them separate for that reason and so does this.
+ */
+export declare function Meter({ value, min, max, label, showValue, format, style, }: MeterProps): import("react").JSX.Element;
+//# sourceMappingURL=Meter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Meter.d.ts","sourceRoot":"","sources":["../../../src/components/Meter/Meter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAc,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAI1E,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACnC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;;GAMG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,GAAO,EACP,GAAS,EACT,KAAK,EACL,SAAiB,EACjB,MAAM,EACN,KAAK,GACN,EAAE,UAAU,+BAmDZ"}

package/dist/components/Meter/Meter.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text, View } from "react-native";
+import { useTheme } from "../../theme/index.js";
+/**
+ * A reading, not a progress bar.
+ *
+ * Progress goes one way and finishes. A meter is a level that moves in both
+ * directions: microphone input, disk use, how full a channel is. `@gryt/ui`
+ * keeps them separate for that reason and so does this.
+ */
+export function Meter({ value, min = 0, max = 100, label, showValue = false, format, style, }) {
+    const theme = useTheme();
+    const ratio = Math.max(0, Math.min(1, (value - min) / (max - min || 1)));
+    // Green until it is worth noticing, amber, then red. The thresholds match the
+    // web's: two thirds and nine tenths.
+    const ramp = ratio >= 0.9
+        ? theme.scales.danger
+        : ratio >= 0.66
+            ? theme.scales.warning
+            : theme.scales.success;
+    return (_jsxs(View, { style: [{ gap: theme.space(1.5) }, style], children: [label || showValue ? (_jsxs(View, { style: { flexDirection: "row", justifyContent: "space-between" }, children: [typeof label === "string" ? (_jsx(Text, { style: { color: theme.color.muted, fontSize: 13 }, children: label })) : (label), showValue ? (_jsx(Text, { style: { color: theme.color.muted, fontSize: 13 }, children: format ? format(value) : String(Math.round(value)) })) : null] })) : null, _jsx(View, { accessibilityRole: "progressbar", accessibilityValue: { min, max, now: value }, style: {
+                    height: 6,
+                    borderRadius: theme.radius.full,
+                    backgroundColor: theme.scales.neutral[3],
+                    overflow: "hidden",
+                }, children: _jsx(View, { style: {
+                        width: `${ratio * 100}%`,
+                        height: "100%",
+                        borderRadius: theme.radius.full,
+                        backgroundColor: ramp[8],
+                    } }) })] }));
+}

package/dist/components/NumberField/NumberField.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode } from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
+export interface NumberFieldProps {
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    label?: ReactNode;
+    disabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Typed or stepped, with the keyboard set to numeric.
+ *
+ * The web version also scrubs: press the label and drag sideways to change the
+ * value. That gesture is not reproduced. It competes with scrolling on a phone,
+ * and the same interaction already exists here as Slider, which is a better fit
+ * for a screen you touch.
+ */
+export declare function NumberField({ value: controlled, defaultValue, onValueChange, min, max, step, label, disabled, style, }: NumberFieldProps): import("react").JSX.Element;
+//# sourceMappingURL=NumberField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NumberField.d.ts","sourceRoot":"","sources":["../../../src/components/NumberField/NumberField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAoC,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAuChG,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,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,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EAAE,UAAU,EACjB,YAAgB,EAChB,aAAa,EACb,GAA8B,EAC9B,GAA8B,EAC9B,IAAQ,EACR,KAAK,EACL,QAAQ,EACR,KAAK,GACN,EAAE,gBAAgB,+BAgElB"}

package/dist/components/NumberField/NumberField.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Pressable, Text, TextInput, View } from "react-native";
+import { useTheme } from "../../theme/index.js";
+/**
+ * Declared here rather than inside NumberField.
+ *
+ * A component defined in another component's body is a new type on every
+ * render, so React unmounts and remounts it each time and any state inside is
+ * lost. Harmless for a button with no state, and still the kind of thing that
+ * bites later.
+ */
+function StepButton({ glyph, label, disabled, onPress, }) {
+    const theme = useTheme();
+    return (_jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: label, disabled: disabled, onPress: onPress, style: { paddingHorizontal: theme.space(3), paddingVertical: theme.space(2) }, children: _jsx(Text, { style: { color: theme.color.muted, fontSize: 16, fontWeight: "600" }, children: glyph }) }));
+}
+/**
+ * Typed or stepped, with the keyboard set to numeric.
+ *
+ * The web version also scrubs: press the label and drag sideways to change the
+ * value. That gesture is not reproduced. It competes with scrolling on a phone,
+ * and the same interaction already exists here as Slider, which is a better fit
+ * for a screen you touch.
+ */
+export function NumberField({ value: controlled, defaultValue = 0, onValueChange, min = Number.NEGATIVE_INFINITY, max = Number.POSITIVE_INFINITY, step = 1, label, disabled, style, }) {
+    const theme = useTheme();
+    const [uncontrolled, setUncontrolled] = useState(defaultValue);
+    const value = controlled ?? uncontrolled;
+    // Kept separately so a half-typed "-" or "" does not become 0 mid-edit.
+    const [text, setText] = useState(String(defaultValue));
+    const commit = (next) => {
+        const clamped = Math.max(min, Math.min(max, next));
+        if (controlled === undefined)
+            setUncontrolled(clamped);
+        setText(String(clamped));
+        onValueChange?.(clamped);
+    };
+    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(View, { style: {
+                    flexDirection: "row",
+                    alignItems: "center",
+                    borderWidth: 1,
+                    borderColor: theme.color.border,
+                    borderRadius: theme.radius.md,
+                    backgroundColor: theme.color.surface,
+                    opacity: disabled ? 0.5 : 1,
+                }, children: [_jsx(StepButton, { glyph: "\u2212", label: "Decrease", disabled: disabled || value <= min, onPress: () => commit(value - step) }), _jsx(TextInput, { editable: !disabled, keyboardType: "numeric", value: text, onChangeText: setText, onBlur: () => {
+                            const parsed = Number(text);
+                            commit(Number.isFinite(parsed) ? parsed : value);
+                        }, style: {
+                            flex: 1,
+                            textAlign: "center",
+                            color: theme.color.text,
+                            fontSize: 14,
+                            paddingVertical: theme.space(2),
+                        } }), _jsx(StepButton, { glyph: "+", label: "Increase", disabled: disabled || value >= max, onPress: () => commit(value + step) })] })] }));
+}

package/dist/components/OtpField/OtpField.d.ts

@@ -0,0 +1,24 @@
+import { type StyleProp, type ViewStyle } from "react-native";
+export interface OtpFieldProps {
+    length?: number;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    onComplete?: (value: string) => void;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * One hidden input behind a row of boxes.
+ *
+ * The obvious build is one TextInput per digit, and it is a trap: backspace
+ * across an empty box, paste, and autofill all have to be threaded between
+ * inputs by hand, and every platform disagrees about the events. A single
+ * invisible input holding the whole code gets all three for free, and the boxes
+ * become presentation.
+ *
+ * `textContentType="oneTimeCode"` is what makes iOS offer the code from
+ * Messages. Android reads `autoComplete="sms-otp"`.
+ */
+export declare function OtpField({ length, value: controlled, onValueChange, onComplete, disabled, autoFocus, style, }: OtpFieldProps): import("react").JSX.Element;
+//# sourceMappingURL=OtpField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OtpField.d.ts","sourceRoot":"","sources":["../../../src/components/OtpField/OtpField.tsx"],"names":[],"mappings":"AACA,OAAO,EAAoC,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIhG,MAAM,WAAW,aAAa;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,QAAQ,CAAC,EACvB,MAAU,EACV,KAAK,EAAE,UAAU,EACjB,aAAa,EACb,UAAU,EACV,QAAQ,EACR,SAAS,EACT,KAAK,GACN,EAAE,aAAa,+BAgEf"}

package/dist/components/OtpField/OtpField.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { Pressable, Text, TextInput, View } from "react-native";
+import { useTheme } from "../../theme/index.js";
+/**
+ * One hidden input behind a row of boxes.
+ *
+ * The obvious build is one TextInput per digit, and it is a trap: backspace
+ * across an empty box, paste, and autofill all have to be threaded between
+ * inputs by hand, and every platform disagrees about the events. A single
+ * invisible input holding the whole code gets all three for free, and the boxes
+ * become presentation.
+ *
+ * `textContentType="oneTimeCode"` is what makes iOS offer the code from
+ * Messages. Android reads `autoComplete="sms-otp"`.
+ */
+export function OtpField({ length = 6, value: controlled, onValueChange, onComplete, disabled, autoFocus, style, }) {
+    const theme = useTheme();
+    const [uncontrolled, setUncontrolled] = useState("");
+    const value = controlled ?? uncontrolled;
+    const [focused, setFocused] = useState(false);
+    const input = useRef(null);
+    const setValue = (next) => {
+        const digits = next.replace(/\D/g, "").slice(0, length);
+        if (controlled === undefined)
+            setUncontrolled(digits);
+        onValueChange?.(digits);
+        if (digits.length === length)
+            onComplete?.(digits);
+    };
+    return (_jsxs(Pressable, { accessibilityRole: "none", disabled: disabled, onPress: () => input.current?.focus(), style: [{ flexDirection: "row", gap: theme.space(2) }, style], children: [Array.from({ length }).map((_, i) => {
+                const filled = i < value.length;
+                const active = focused && i === value.length;
+                return (_jsx(View, { style: {
+                        flex: 1,
+                        aspectRatio: 0.8,
+                        alignItems: "center",
+                        justifyContent: "center",
+                        borderWidth: 1,
+                        borderColor: active ? theme.color.accent : theme.color.border,
+                        borderRadius: theme.radius.md,
+                        backgroundColor: theme.color.surface,
+                        opacity: disabled ? 0.5 : 1,
+                    }, children: _jsx(Text, { style: { color: theme.color.text, fontSize: 20, fontWeight: "600" }, children: filled ? value[i] : "" }) }, i));
+            }), _jsx(TextInput, { ref: input, value: value, onChangeText: setValue, onFocus: () => setFocused(true), onBlur: () => setFocused(false), editable: !disabled, autoFocus: autoFocus, keyboardType: "number-pad", textContentType: "oneTimeCode", autoComplete: "sms-otp", maxLength: length, 
+                // Off-screen rather than hidden: opacity 0 still takes the caret on
+                // some Android builds, and display:none stops autofill reaching it.
+                style: { position: "absolute", top: -9999, left: -9999, width: 1, height: 1 } })] }));
+}

package/dist/components/Popover/Popover.d.ts

@@ -0,0 +1,48 @@
+import { type ReactNode } from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
+import type { Align, Side } from "../../overlay/placePopup.js";
+import { type OpenStateProps } from "../../overlay/useOpenState.js";
+export interface PopoverRootProps extends OpenStateProps {
+    children?: ReactNode;
+}
+declare function Root({ children, ...openProps }: PopoverRootProps): import("react").JSX.Element;
+declare function Trigger({ children, style }: {
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}): import("react").JSX.Element;
+/** A passthrough. React Native's Modal already renders above everything. */
+declare function Portal({ children }: {
+    children?: ReactNode;
+}): import("react").JSX.Element;
+export interface PopoverPopupProps {
+    children?: ReactNode;
+    side?: Side;
+    align?: Align;
+    sideOffset?: number;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Popup({ children, style, ...options }: PopoverPopupProps): import("react").JSX.Element;
+declare function Close({ children, style }: {
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}): import("react").JSX.Element;
+/**
+ * Not drawn.
+ *
+ * Base UI's Arrow is an element positioned against the popup's edge once
+ * Floating UI has settled. Doing it here means a rotated square, a border that
+ * only shows on two sides, and knowing which side the popup ended up on. It is
+ * doable and it is not free, so it is an exception rather than a silent
+ * omission. Kept as a no-op so call sites match.
+ */
+declare function Arrow(): null;
+export declare const Popover: {
+    Root: typeof Root;
+    Trigger: typeof Trigger;
+    Portal: typeof Portal;
+    Popup: typeof Popup;
+    Close: typeof Close;
+    Arrow: typeof Arrow;
+};
+export {};
+//# sourceMappingURL=Popover.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvF,OAAO,EAAmB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAG/E,OAAO,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAE5D,OAAO,EAAgB,KAAK,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAkB/E,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,iBAAS,IAAI,CAAC,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,EAAE,gBAAgB,+BAQzD;AAED,iBAAS,OAAO,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAAE,+BAc3F;AAED,4EAA4E;AAC5E,iBAAS,MAAM,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,+BAErD;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,iBAAS,KAAK,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,OAAO,EAAE,EAAE,iBAAiB,+BAchE;AAED,iBAAS,KAAK,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAAE,+BAOzF;AAED;;;;;;;;GAQG;AACH,iBAAS,KAAK,SAEb;AAED,eAAO,MAAM,OAAO;;;;;;;CAAiD,CAAC"}

package/dist/components/Popover/Popover.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useRef } from "react";
+import { Pressable } from "react-native";
+import { AnchoredPopup } from "../../overlay/AnchoredPopup.js";
+import { useAnchorMeasure } from "../../overlay/useAnchoredPosition.js";
+import { useOpenState } from "../../overlay/useOpenState.js";
+import { useTheme } from "../../theme/index.js";
+const PopoverContext = createContext(null);
+function usePopover(part) {
+    const value = useContext(PopoverContext);
+    if (!value)
+        throw new Error(`Popover.${part} must be rendered inside Popover.Root.`);
+    return value;
+}
+function Root({ children, ...openProps }) {
+    const { open, setOpen } = useOpenState(openProps);
+    const { anchor, measure } = useAnchorMeasure();
+    return (_jsx(PopoverContext.Provider, { value: { open, setOpen, anchor, measure }, children: children }));
+}
+function Trigger({ children, style }) {
+    const { setOpen, measure } = usePopover("Trigger");
+    const ref = useRef(null);
+    const onPress = useCallback(() => {
+        measure(ref.current);
+        setOpen(true);
+    }, [measure, setOpen]);
+    return (_jsx(Pressable, { ref: ref, accessibilityRole: "button", onPress: onPress, style: style, children: children }));
+}
+/** A passthrough. React Native's Modal already renders above everything. */
+function Portal({ children }) {
+    return _jsx(_Fragment, { children: children });
+}
+function Popup({ children, style, ...options }) {
+    const { open, setOpen, anchor } = usePopover("Popup");
+    const theme = useTheme();
+    return (_jsx(AnchoredPopup, { open: open, anchor: anchor, onDismiss: () => setOpen(false), style: [{ padding: theme.space(3), minWidth: 160 }, style], ...options, children: children }));
+}
+function Close({ children, style }) {
+    const { setOpen } = usePopover("Close");
+    return (_jsx(Pressable, { accessibilityRole: "button", onPress: () => setOpen(false), style: style, children: children }));
+}
+/**
+ * Not drawn.
+ *
+ * Base UI's Arrow is an element positioned against the popup's edge once
+ * Floating UI has settled. Doing it here means a rotated square, a border that
+ * only shows on two sides, and knowing which side the popup ended up on. It is
+ * doable and it is not free, so it is an exception rather than a silent
+ * omission. Kept as a no-op so call sites match.
+ */
+function Arrow() {
+    return null;
+}
+export const Popover = { Root, Trigger, Portal, Popup, Close, Arrow };

package/dist/components/Progress/Progress.d.ts

@@ -0,0 +1,18 @@
+import { type StyleProp, type ViewStyle } from "react-native";
+export interface ProgressProps {
+    /** 0 to 100. Leave undefined for an indeterminate bar. */
+    value?: number;
+    tone?: "accent" | "success" | "danger" | "warning";
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Determinate only for now.
+ *
+ * The web's indeterminate state is a CSS keyframe sweeping a partial bar across
+ * the track. Reproducing it here needs an Animated loop and a reduce-motion
+ * check, which is worth doing properly rather than as a footnote on this one, so
+ * an undefined value currently renders an empty track. Recorded in the parity
+ * exceptions table.
+ */
+export declare function Progress({ value, tone, style }: ProgressProps): import("react").JSX.Element;
+//# sourceMappingURL=Progress.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/Progress.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIpE,MAAM,WAAW,aAAa;IAC5B,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;IACnD,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;;;;GAQG;AACH,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,IAAe,EAAE,KAAK,EAAE,EAAE,aAAa,+BA4BxE"}

package/dist/components/Progress/Progress.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from "react-native";
+import { useTheme } from "../../theme/index.js";
+/**
+ * Determinate only for now.
+ *
+ * The web's indeterminate state is a CSS keyframe sweeping a partial bar across
+ * the track. Reproducing it here needs an Animated loop and a reduce-motion
+ * check, which is worth doing properly rather than as a footnote on this one, so
+ * an undefined value currently renders an empty track. Recorded in the parity
+ * exceptions table.
+ */
+export function Progress({ value, tone = "accent", style }) {
+    const theme = useTheme();
+    const clamped = value === undefined ? 0 : Math.max(0, Math.min(100, value));
+    return (_jsx(View, { accessibilityRole: "progressbar", accessibilityValue: value === undefined ? undefined : { now: clamped, min: 0, max: 100 }, style: [
+            {
+                height: 6,
+                borderRadius: theme.radius.full,
+                backgroundColor: theme.scales.neutral[3],
+                overflow: "hidden",
+            },
+            style,
+        ], children: _jsx(View, { style: {
+                width: `${clamped}%`,
+                height: "100%",
+                borderRadius: theme.radius.full,
+                backgroundColor: theme.scales[tone][8],
+            } }) }));
+}

package/dist/components/Radio/Radio.d.ts

@@ -0,0 +1,28 @@
+import { type ReactNode } from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
+export type RadioTone = "primary" | "secondary" | "neutral" | "danger";
+export interface RadioGroupProps {
+    value?: string | number;
+    defaultValue?: string | number;
+    onValueChange?: (value: string | number) => void;
+    disabled?: boolean;
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * The group holds the value, which is the part a radio cannot do alone.
+ *
+ * The web gets this from Base UI's RadioGroup, and a lone Radio outside one is
+ * a mistake there too. Here it throws, because a radio that silently never
+ * checks is worse than one that says why.
+ */
+export declare function RadioGroup({ value: controlled, defaultValue, onValueChange, disabled, children, style, }: RadioGroupProps): import("react").JSX.Element;
+export interface RadioProps {
+    value: string | number;
+    disabled?: boolean;
+    tone?: RadioTone;
+    style?: StyleProp<ViewStyle>;
+    accessibilityLabel?: string;
+}
+export declare function Radio({ value, disabled, tone, style, accessibilityLabel, }: RadioProps): import("react").JSX.Element;
+//# sourceMappingURL=Radio.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/Radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5E,OAAO,EAAmB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAI/E,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAC;AAUvE,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EAAE,UAAU,EACjB,YAAY,EACZ,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,KAAK,GACN,EAAE,eAAe,+BAsBjB;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAID,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,QAAQ,EACR,IAAgB,EAChB,KAAK,EACL,kBAAkB,GACnB,EAAE,UAAU,+BA0CZ"}

package/dist/components/Radio/Radio.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState } from "react";
+import { Pressable, View } from "react-native";
+import { toneRamp, useTheme } from "../../theme/index.js";
+const RadioGroupContext = createContext(null);
+/**
+ * The group holds the value, which is the part a radio cannot do alone.
+ *
+ * The web gets this from Base UI's RadioGroup, and a lone Radio outside one is
+ * a mistake there too. Here it throws, because a radio that silently never
+ * checks is worse than one that says why.
+ */
+export function RadioGroup({ value: controlled, defaultValue, onValueChange, disabled, children, style, }) {
+    const [uncontrolled, setUncontrolled] = useState(defaultValue ?? null);
+    const value = controlled ?? uncontrolled;
+    return (_jsx(RadioGroupContext.Provider, { value: {
+            value,
+            disabled,
+            setValue: (next) => {
+                if (controlled === undefined)
+                    setUncontrolled(next);
+                onValueChange?.(next);
+            },
+        }, children: _jsx(View, { accessibilityRole: "radiogroup", style: style, children: children }) }));
+}
+const SIZE = 20;
+export function Radio({ value, disabled, tone = "primary", style, accessibilityLabel, }) {
+    const theme = useTheme();
+    const group = useContext(RadioGroupContext);
+    if (!group)
+        throw new Error("Radio must be rendered inside a RadioGroup.");
+    const selected = group.value === value;
+    const isDisabled = disabled || group.disabled;
+    const ramp = toneRamp(theme, tone);
+    return (_jsx(Pressable, { accessibilityRole: "radio", accessibilityState: { checked: selected, disabled: !!isDisabled }, accessibilityLabel: accessibilityLabel, disabled: isDisabled, onPress: () => group.setValue(value), style: [
+            {
+                width: SIZE,
+                height: SIZE,
+                borderRadius: SIZE / 2,
+                alignItems: "center",
+                justifyContent: "center",
+                borderWidth: 1.5,
+                borderColor: selected ? ramp[8] : theme.color.border,
+                opacity: isDisabled ? 0.5 : 1,
+            },
+            style,
+        ], children: selected ? (_jsx(View, { style: {
+                width: SIZE / 2,
+                height: SIZE / 2,
+                borderRadius: SIZE / 4,
+                backgroundColor: ramp[8],
+            } })) : null }));
+}

package/dist/components/ScrollArea/ScrollArea.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+import { type ScrollViewProps, type StyleProp, type ViewStyle } from "react-native";
+export interface ScrollAreaProps extends Omit<ScrollViewProps, "style"> {
+    children?: ReactNode;
+    horizontal?: boolean;
+    style?: StyleProp<ViewStyle>;
+    contentStyle?: StyleProp<ViewStyle>;
+}
+/**
+ * A thin pass over ScrollView.
+ *
+ * The web's ScrollArea exists to replace scrollbars the browser draws badly and
+ * inconsistently. A phone has no scrollbars to replace: the indicator is drawn
+ * by the OS, it fades on its own, and it already matches everything else on the
+ * device. So the component stays for call-site parity and does almost nothing,
+ * which is the honest version.
+ *
+ * Its one job is defaulting the indicator off, since the web version hides the
+ * native scrollbar too.
+ */
+export declare function ScrollArea({ children, horizontal, style, contentStyle, showsVerticalScrollIndicator, showsHorizontalScrollIndicator, ...rest }: ScrollAreaProps): import("react").JSX.Element;
+//# sourceMappingURL=ScrollArea.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollArea.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollArea/ScrollArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAc,KAAK,eAAe,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEhG,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC;IACrE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACrC;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,UAAkB,EAClB,KAAK,EACL,YAAY,EACZ,4BAAoC,EACpC,8BAAsC,EACtC,GAAG,IAAI,EACR,EAAE,eAAe,+BAajB"}

package/dist/components/ScrollArea/ScrollArea.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ScrollView } from "react-native";
+/**
+ * A thin pass over ScrollView.
+ *
+ * The web's ScrollArea exists to replace scrollbars the browser draws badly and
+ * inconsistently. A phone has no scrollbars to replace: the indicator is drawn
+ * by the OS, it fades on its own, and it already matches everything else on the
+ * device. So the component stays for call-site parity and does almost nothing,
+ * which is the honest version.
+ *
+ * Its one job is defaulting the indicator off, since the web version hides the
+ * native scrollbar too.
+ */
+export function ScrollArea({ children, horizontal = false, style, contentStyle, showsVerticalScrollIndicator = false, showsHorizontalScrollIndicator = false, ...rest }) {
+    return (_jsx(ScrollView, { horizontal: horizontal, style: style, contentContainerStyle: contentStyle, showsVerticalScrollIndicator: showsVerticalScrollIndicator, showsHorizontalScrollIndicator: showsHorizontalScrollIndicator, ...rest, children: children }));
+}

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,34 @@
+import { type ReactNode } from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
+export interface SelectOption {
+    label: ReactNode;
+    value: string | number;
+    disabled?: boolean;
+}
+export type SelectSize = "small" | "medium";
+export interface SelectProps {
+    options?: SelectOption[];
+    value?: string | number | null;
+    defaultValue?: string | number | null;
+    onValueChange?: (value: string | number) => void;
+    label?: ReactNode;
+    placeholder?: string;
+    size?: SelectSize;
+    disabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * 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 declare function Select({ options, value: controlled, defaultValue, onValueChange, label, placeholder, size, disabled, style, }: SelectProps): import("react").JSX.Element;
+//# sourceMappingURL=Select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACtE,OAAO,EAAyB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAMrF,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAC;AAO5C,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC/B,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IACtC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IACjD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,MAAM,CAAC,EACrB,OAAY,EACZ,KAAK,EAAE,UAAU,EACjB,YAAmB,EACnB,aAAa,EACb,KAAK,EACL,WAAuB,EACvB,IAAe,EACf,QAAQ,EACR,KAAK,GACN,EAAE,WAAW,+BAgHb"}