@gryt/ui-native 0.1.0

package/dist/components/TextField/TextField.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Text, TextInput, View, } from "react-native";
+import { useTheme } from "../../theme/index.js";
+const SIZES = {
+    small: { minHeight: 36, fontSize: 14, paddingH: 12 },
+    medium: { minHeight: 40, fontSize: 14, paddingH: 14 },
+};
+export function TextField({ label, helperText, error = false, size = "medium", multiline = false, minRows = 3, style, editable, ...rest }) {
+    const theme = useTheme();
+    const [focused, setFocused] = useState(false);
+    const metrics = SIZES[size];
+    const disabled = editable === false;
+    // The web shows focus with an outline, which sits outside the box and does not
+    // move anything. React Native has no outline, so the border changes colour
+    // instead of a second ring appearing, which would shift the layout.
+    const borderColor = error
+        ? theme.color.danger
+        : focused
+            ? theme.color.accent
+            : theme.color.border;
+    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, _jsx(View, { style: {
+                    borderWidth: 1,
+                    borderColor,
+                    borderRadius: theme.radius.md,
+                    backgroundColor: theme.color.surface,
+                    opacity: disabled ? 0.5 : 1,
+                }, children: _jsx(TextInput, { multiline: multiline, editable: editable, onFocus: (e) => {
+                        setFocused(true);
+                        rest.onFocus?.(e);
+                    }, onBlur: (e) => {
+                        setFocused(false);
+                        rest.onBlur?.(e);
+                    }, placeholderTextColor: theme.color.muted, style: {
+                        color: theme.color.text,
+                        fontSize: metrics.fontSize,
+                        paddingHorizontal: metrics.paddingH,
+                        minHeight: multiline
+                            ? metrics.minHeight + metrics.fontSize * 1.4 * (minRows - 1)
+                            : metrics.minHeight,
+                        textAlignVertical: multiline ? "top" : "center",
+                        paddingVertical: multiline ? theme.space(2) : 0,
+                    }, ...rest }) }), helperText ? (_jsx(Text, { style: {
+                    color: error ? theme.scales.danger[10] : theme.color.muted,
+                    fontSize: 12,
+                }, children: helperText })) : null] }));
+}

package/dist/components/Toast/Toast.d.ts

@@ -0,0 +1,31 @@
+import { type ReactNode } from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
+export type ToastSeverity = "info" | "success" | "warning" | "error";
+export interface ToastOptions {
+    title?: string;
+    description?: string;
+    severity?: ToastSeverity;
+    /** Milliseconds. Null keeps it up until it is dismissed. */
+    duration?: number | null;
+}
+interface ToastContextValue {
+    show: (toast: ToastOptions) => number;
+    dismiss: (id: number) => void;
+}
+/**
+ * Toasts need somewhere to live, which on the web is a portal at the document
+ * root and here is a provider near the top of the tree.
+ *
+ * They are deliberately not built on `Modal` like the dialogs are. A modal
+ * intercepts touches for the whole screen, and a toast that blocked the app
+ * until it faded would be worse than no toast.
+ */
+export declare function ToastProvider({ children }: {
+    children?: ReactNode;
+}): import("react").JSX.Element;
+export declare function useToast(): ToastContextValue;
+export interface ToastProps {
+    style?: StyleProp<ViewStyle>;
+}
+export {};
+//# sourceMappingURL=Toast.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5G,OAAO,EAAmC,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAK/F,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAErE,MAAM,WAAW,YAAY;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B;AAMD,UAAU,iBAAiB;IACzB,IAAI,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,MAAM,CAAC;IACtC,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/B;AAID;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,+BAoBnE;AAED,wBAAgB,QAAQ,IAAI,iBAAiB,CAI5C;AAmGD,MAAM,WAAW,UAAU;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B"}

package/dist/components/Toast/Toast.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
+import { Animated, Pressable, Text, View } from "react-native";
+import { useReducedMotion } from "../../hooks/useReducedMotion.js";
+import { useTheme } from "../../theme/index.js";
+const ToastContext = createContext(null);
+/**
+ * Toasts need somewhere to live, which on the web is a portal at the document
+ * root and here is a provider near the top of the tree.
+ *
+ * They are deliberately not built on `Modal` like the dialogs are. A modal
+ * intercepts touches for the whole screen, and a toast that blocked the app
+ * until it faded would be worse than no toast.
+ */
+export function ToastProvider({ children }) {
+    const [toasts, setToasts] = useState([]);
+    const nextId = useRef(1);
+    const dismiss = useCallback((id) => {
+        setToasts((current) => current.filter((t) => t.id !== id));
+    }, []);
+    const show = useCallback((toast) => {
+        const id = nextId.current++;
+        setToasts((current) => [...current, { ...toast, id }]);
+        return id;
+    }, []);
+    return (_jsxs(ToastContext.Provider, { value: { show, dismiss }, children: [children, _jsx(Viewport, { toasts: toasts, onDismiss: dismiss })] }));
+}
+export function useToast() {
+    const value = useContext(ToastContext);
+    if (!value)
+        throw new Error("useToast must be used inside a <ToastProvider>.");
+    return value;
+}
+const RAMP = {
+    info: "accent",
+    success: "success",
+    warning: "warning",
+    error: "danger",
+};
+function Viewport({ toasts, onDismiss, }) {
+    const theme = useTheme();
+    if (toasts.length === 0)
+        return null;
+    return (_jsx(View
+    // Only the toasts take touches; the gaps between them do not.
+    , { 
+        // Only the toasts take touches; the gaps between them do not.
+        pointerEvents: "box-none", style: {
+            position: "absolute",
+            left: 0,
+            right: 0,
+            bottom: theme.space(6),
+            paddingHorizontal: theme.space(4),
+            gap: theme.space(2),
+        }, children: toasts.map((toast) => (_jsx(ToastItem, { toast: toast, onDismiss: onDismiss }, toast.id))) }));
+}
+function ToastItem({ toast, onDismiss, }) {
+    const theme = useTheme();
+    const reducedMotion = useReducedMotion();
+    const [opacity] = useState(() => new Animated.Value(reducedMotion ? 1 : 0));
+    const ramp = theme.scales[RAMP[toast.severity ?? "info"]];
+    const duration = toast.duration === undefined ? 4000 : toast.duration;
+    useEffect(() => {
+        if (!reducedMotion) {
+            Animated.timing(opacity, {
+                toValue: 1,
+                duration: 150,
+                useNativeDriver: true,
+            }).start();
+        }
+        if (duration === null)
+            return;
+        const timer = setTimeout(() => onDismiss(toast.id), duration);
+        return () => clearTimeout(timer);
+    }, [duration, onDismiss, opacity, reducedMotion, toast.id]);
+    return (_jsx(Animated.View, { style: { opacity }, children: _jsxs(Pressable, { accessibilityRole: "alert", accessibilityLiveRegion: toast.severity === "error" || toast.severity === "warning" ? "assertive" : "polite", onPress: () => onDismiss(toast.id), style: {
+                backgroundColor: theme.color.surfaceRaised,
+                borderRadius: theme.radius.md,
+                borderWidth: 1,
+                borderLeftWidth: 3,
+                borderColor: theme.color.border,
+                borderLeftColor: ramp[8],
+                padding: theme.space(3),
+                gap: theme.space(0.5),
+            }, children: [toast.title ? (_jsx(Text, { style: { color: theme.color.text, fontSize: 14, fontWeight: "600" }, children: toast.title })) : null, toast.description ? (_jsx(Text, { style: { color: theme.color.muted, fontSize: 13, lineHeight: 18 }, children: toast.description })) : null] }) }));
+}

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

@@ -0,0 +1,19 @@
+import { type ReactNode } from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
+import { type ComponentTone } from "../../theme/index.js";
+export type ToggleTone = Extract<ComponentTone, "primary" | "secondary" | "neutral" | "danger">;
+export type ToggleSize = "xsmall" | "small" | "medium" | "large";
+export interface ToggleProps {
+    pressed?: boolean;
+    defaultPressed?: boolean;
+    onPressedChange?: (pressed: boolean) => void;
+    disabled?: boolean;
+    tone?: ToggleTone;
+    size?: ToggleSize;
+    children?: ReactNode;
+    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

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

package/dist/components/Toggle/Toggle.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Pressable, Text } from "react-native";
+import { toneRamp, useTheme } from "../../theme/index.js";
+const SIZES = {
+    xsmall: { minHeight: 32, paddingH: 10, fontSize: 12 },
+    small: { minHeight: 36, paddingH: 12, fontSize: 14 },
+    medium: { minHeight: 40, paddingH: 14, fontSize: 14 },
+    large: { minHeight: 48, paddingH: 18, fontSize: 16 },
+};
+/** A button that stays down. Mute, deafen, and the rest of the call controls. */
+export function Toggle({ pressed: controlled, defaultPressed = false, onPressedChange, disabled, tone = "primary", size = "medium", children, style, accessibilityLabel, }) {
+    const theme = useTheme();
+    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: () => {
+            const next = !on;
+            if (controlled === undefined)
+                setUncontrolled(next);
+            onPressedChange?.(next);
+        }, style: [
+            {
+                minHeight: metrics.minHeight,
+                paddingHorizontal: metrics.paddingH,
+                flexDirection: "row",
+                alignItems: "center",
+                justifyContent: "center",
+                gap: theme.space(2),
+                borderRadius: theme.radius.full,
+                backgroundColor: on ? ramp[2] : "transparent",
+                opacity: disabled ? 0.5 : 1,
+            },
+            style,
+        ], children: typeof children === "string" ? (_jsx(Text, { style: {
+                color: on ? ramp[10] : theme.color.muted,
+                fontSize: metrics.fontSize,
+                fontWeight: "600",
+            }, children: children })) : (children) }));
+}

package/dist/components/Toolbar/Toolbar.d.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
+export interface ToolbarProps {
+    children?: ReactNode;
+    orientation?: "horizontal" | "vertical";
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * A row of controls that reads as one thing.
+ *
+ * The web's Toolbar manages roving focus, so arrow keys move between the
+ * buttons and the group takes one tab stop. There is no roving focus to manage
+ * here, so what is left is the grouping: the accessibility role, and the
+ * spacing.
+ *
+ * Kept rather than dropped because the role is what tells a screen reader these
+ * controls belong together, which is most of what the web version was for.
+ */
+export declare function Toolbar({ children, orientation, style }: ToolbarProps): import("react").JSX.Element;
+export interface ToolbarSeparatorProps {
+    orientation?: "horizontal" | "vertical";
+    style?: StyleProp<ViewStyle>;
+}
+export declare function ToolbarSeparator({ orientation, style, }: ToolbarSeparatorProps): import("react").JSX.Element;
+//# sourceMappingURL=Toolbar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../src/components/Toolbar/Toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIpE,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,WAA0B,EAAE,KAAK,EAAE,EAAE,YAAY,+BAiBpF;AAED,MAAM,WAAW,qBAAqB;IACpC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,WAAwB,EACxB,KAAK,GACN,EAAE,qBAAqB,+BAavB"}

package/dist/components/Toolbar/Toolbar.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from "react-native";
+import { useTheme } from "../../theme/index.js";
+/**
+ * A row of controls that reads as one thing.
+ *
+ * The web's Toolbar manages roving focus, so arrow keys move between the
+ * buttons and the group takes one tab stop. There is no roving focus to manage
+ * here, so what is left is the grouping: the accessibility role, and the
+ * spacing.
+ *
+ * Kept rather than dropped because the role is what tells a screen reader these
+ * controls belong together, which is most of what the web version was for.
+ */
+export function Toolbar({ children, orientation = "horizontal", style }) {
+    const theme = useTheme();
+    return (_jsx(View, { accessibilityRole: "toolbar", style: [
+            {
+                flexDirection: orientation === "horizontal" ? "row" : "column",
+                alignItems: "center",
+                gap: theme.space(1),
+            },
+            style,
+        ], children: children }));
+}
+export function ToolbarSeparator({ orientation = "vertical", style, }) {
+    const theme = useTheme();
+    return (_jsx(View, { style: [
+            orientation === "vertical"
+                ? { width: 1, alignSelf: "stretch", marginVertical: theme.space(1.5) }
+                : { height: 1, alignSelf: "stretch", marginHorizontal: theme.space(1.5) },
+            { backgroundColor: theme.color.border },
+            style,
+        ] }));
+}

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,40 @@
+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 TooltipRootProps extends OpenStateProps {
+    children?: ReactNode;
+}
+declare function Root({ children, ...openProps }: TooltipRootProps): import("react").JSX.Element;
+export interface TooltipTriggerProps {
+    children?: ReactNode;
+    /** Still fires on a normal tap, so the tooltip does not eat the action. */
+    onPress?: () => void;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Trigger({ children, onPress, style }: TooltipTriggerProps): import("react").JSX.Element;
+declare function Portal({ children }: {
+    children?: ReactNode;
+}): import("react").JSX.Element;
+export interface TooltipPopupProps {
+    children?: ReactNode;
+    side?: Side;
+    align?: Align;
+    sideOffset?: number;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Popup({ children, style, ...options }: TooltipPopupProps): import("react").JSX.Element;
+/** The web's Provider shares a delay timer between tooltips. There is no delay here. */
+declare function Provider({ children }: {
+    children?: ReactNode;
+}): import("react").JSX.Element;
+export declare const Tooltip: {
+    Root: typeof Root;
+    Trigger: typeof Trigger;
+    Portal: typeof Portal;
+    Popup: typeof Popup;
+    Provider: typeof Provider;
+};
+export declare const TooltipProvider: typeof Provider;
+export {};
+//# sourceMappingURL=Tooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvF,OAAO,EAAyB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGrF,OAAO,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAE5D,OAAO,EAAgB,KAAK,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAgC/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,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,2EAA2E;IAC3E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,iBAAS,OAAO,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,mBAAmB,+BAoBjE;AAED,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,+BA8BhE;AAED,wFAAwF;AACxF,iBAAS,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,+BAEvD;AAED,eAAO,MAAM,OAAO;;;;;;CAA6C,CAAC;AAClE,eAAO,MAAM,eAAe,iBAAW,CAAC"}

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useRef } from "react";
+import { Pressable, Text } 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 TooltipContext = createContext(null);
+function useTooltip(part) {
+    const value = useContext(TooltipContext);
+    if (!value)
+        throw new Error(`Tooltip.${part} must be rendered inside Tooltip.Root.`);
+    return value;
+}
+function Root({ children, ...openProps }) {
+    const { open, setOpen } = useOpenState(openProps);
+    const { anchor, measure } = useAnchorMeasure();
+    return (_jsx(TooltipContext.Provider, { value: { open, setOpen, anchor, measure }, children: children }));
+}
+function Trigger({ children, onPress, style }) {
+    const { setOpen, measure } = useTooltip("Trigger");
+    const ref = useRef(null);
+    const show = useCallback(() => {
+        measure(ref.current);
+        setOpen(true);
+    }, [measure, setOpen]);
+    return (_jsx(Pressable, { ref: ref, onPress: onPress, onLongPress: show, onPressOut: () => setOpen(false), style: style, children: children }));
+}
+function Portal({ children }) {
+    return _jsx(_Fragment, { children: children });
+}
+function Popup({ children, style, ...options }) {
+    const { open, setOpen, anchor } = useTooltip("Popup");
+    const theme = useTheme();
+    return (_jsx(AnchoredPopup, { open: open, anchor: anchor, onDismiss: () => setOpen(false), side: "top", 
+        // A tooltip is never the thing you are trying to touch.
+        pointerEvents: "none", style: [
+            {
+                paddingHorizontal: theme.space(2.5),
+                paddingVertical: theme.space(1.5),
+                maxWidth: 260,
+                backgroundColor: theme.scales.neutral[4],
+            },
+            style,
+        ], ...options, children: typeof children === "string" ? (_jsx(Text, { style: { color: theme.color.text, fontSize: 12 }, children: children })) : (children) }));
+}
+/** The web's Provider shares a delay timer between tooltips. There is no delay here. */
+function Provider({ children }) {
+    return _jsx(_Fragment, { children: children });
+}
+export const Tooltip = { Root, Trigger, Portal, Popup, Provider };
+export const TooltipProvider = Provider;

package/dist/hooks/useReducedMotion.d.ts

@@ -0,0 +1,10 @@
+/**
+ * The web gets this from `motion-safe:`, which Tailwind compiles to a
+ * `prefers-reduced-motion` media query. React Native has the same setting and no
+ * way to express it in a style, so it has to be read and subscribed to.
+ *
+ * Assumes motion is allowed until told otherwise, which matches the web: the
+ * media query only matches once the OS says to reduce.
+ */
+export declare function useReducedMotion(): boolean;
+//# sourceMappingURL=useReducedMotion.d.ts.map

package/dist/hooks/useReducedMotion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useReducedMotion.d.ts","sourceRoot":"","sources":["../../src/hooks/useReducedMotion.ts"],"names":[],"mappings":"AAGA;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,IAAI,OAAO,CAmB1C"}

package/dist/hooks/useReducedMotion.js

@@ -0,0 +1,26 @@
+import { useEffect, useState } from "react";
+import { AccessibilityInfo } from "react-native";
+/**
+ * The web gets this from `motion-safe:`, which Tailwind compiles to a
+ * `prefers-reduced-motion` media query. React Native has the same setting and no
+ * way to express it in a style, so it has to be read and subscribed to.
+ *
+ * Assumes motion is allowed until told otherwise, which matches the web: the
+ * media query only matches once the OS says to reduce.
+ */
+export function useReducedMotion() {
+    const [reduced, setReduced] = useState(false);
+    useEffect(() => {
+        let cancelled = false;
+        AccessibilityInfo.isReduceMotionEnabled().then((value) => {
+            if (!cancelled)
+                setReduced(value);
+        });
+        const sub = AccessibilityInfo.addEventListener("reduceMotionChanged", setReduced);
+        return () => {
+            cancelled = true;
+            sub.remove();
+        };
+    }, []);
+    return reduced;
+}

package/dist/index.d.ts

@@ -0,0 +1,39 @@
+export { createNativeTheme, darkTheme, GrytThemeProvider, lightTheme, useTheme, type GrytAppearance, type GrytThemeProviderProps, type NativeTheme, type NativeThemeOptions, type Ramp, toneRamp, type ComponentTone, } from "./theme/index.js";
+export { AlertDialog, type AlertDialogPopupProps, type AlertDialogRootProps, } from "./components/AlertDialog/AlertDialog.js";
+export { Alert, type AlertProps, type AlertSeverity } from "./components/Alert/Alert.js";
+export { Avatar, type AvatarProps, type AvatarSize } from "./components/Avatar/Avatar.js";
+export { Badge, type BadgeProps, type BadgeTone } from "./components/Badge/Badge.js";
+export { Button, type ButtonProps, type ButtonSize, type ButtonTone } from "./components/Button/Button.js";
+export { Card, CardActions, CardContent, CardHeader, type CardHeaderProps, type CardProps, } from "./components/Card/Card.js";
+export { Checkbox, type CheckboxProps, type CheckboxTone } from "./components/Checkbox/Checkbox.js";
+export { Chip, type ChipProps, type ChipTone, type ChipVariant } from "./components/Chip/Chip.js";
+export { Dialog, type DialogPopupProps, type DialogRootProps, type DialogTriggerProps, } from "./components/Dialog/Dialog.js";
+export { Collapsible, type CollapsibleRootProps, } from "./components/Collapsible/Collapsible.js";
+export { Divider, type DividerProps } from "./components/Divider/Divider.js";
+export { Menu, type MenuItemProps, type MenuPopupProps, type MenuRootProps } from "./components/Menu/Menu.js";
+export { Meter, type MeterProps } from "./components/Meter/Meter.js";
+export { Popover, type PopoverPopupProps, type PopoverRootProps } from "./components/Popover/Popover.js";
+export { Progress, type ProgressProps } from "./components/Progress/Progress.js";
+export { Radio, RadioGroup, type RadioGroupProps, type RadioProps, type RadioTone } from "./components/Radio/Radio.js";
+export { Select, type SelectOption, type SelectProps, type SelectSize, } from "./components/Select/Select.js";
+export { Slider, type SliderProps, type SliderTone, } from "./components/Slider/Slider.js";
+export { Skeleton, type SkeletonProps } from "./components/Skeleton/Skeleton.js";
+export { Spinner, type SpinnerProps } from "./components/Spinner/Spinner.js";
+export { Surface, type SurfaceLevel, type SurfaceProps } from "./components/Surface/Surface.js";
+export { Switch, type SwitchProps, type SwitchTone } from "./components/Switch/Switch.js";
+export { Tab, Tabs, type TabProps, type TabsListProps, type TabsPanelProps, type TabsProps, } from "./components/Tabs/Tabs.js";
+export { TextField, type TextFieldProps, type TextFieldSize } from "./components/TextField/TextField.js";
+export { Toggle, type ToggleProps, type ToggleSize, type ToggleTone } from "./components/Toggle/Toggle.js";
+export { Tooltip, TooltipProvider, type TooltipPopupProps, type TooltipRootProps, type TooltipTriggerProps, } from "./components/Tooltip/Tooltip.js";
+export { Accordion, type AccordionItemProps, type AccordionRootProps, } from "./components/Accordion/Accordion.js";
+export { Drawer, type DrawerPopupProps, type DrawerRootProps, type DrawerSide, } from "./components/Drawer/Drawer.js";
+export { NumberField, type NumberFieldProps } from "./components/NumberField/NumberField.js";
+export { OtpField, type OtpFieldProps } from "./components/OtpField/OtpField.js";
+export { ScrollArea, type ScrollAreaProps } from "./components/ScrollArea/ScrollArea.js";
+export { ToastProvider, useToast, type ToastOptions, type ToastSeverity, } from "./components/Toast/Toast.js";
+export { Toolbar, ToolbarSeparator, type ToolbarProps, type ToolbarSeparatorProps, } from "./components/Toolbar/Toolbar.js";
+export { AnchoredPopup, type AnchoredPopupProps } from "./overlay/AnchoredPopup.js";
+export { placePopup, type Align, type AnchorOptions, type AnchorRect, type PopupPlacement, type Side, } from "./overlay/placePopup.js";
+export { useOpenState, type OpenStateProps } from "./overlay/useOpenState.js";
+export { useReducedMotion } from "./hooks/useReducedMotion.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -0,0 +1,38 @@
+export { createNativeTheme, darkTheme, GrytThemeProvider, lightTheme, useTheme, toneRamp, } from "./theme/index.js";
+export { AlertDialog, } from "./components/AlertDialog/AlertDialog.js";
+export { Alert } from "./components/Alert/Alert.js";
+export { Avatar } from "./components/Avatar/Avatar.js";
+export { Badge } from "./components/Badge/Badge.js";
+export { Button } from "./components/Button/Button.js";
+export { Card, CardActions, CardContent, CardHeader, } from "./components/Card/Card.js";
+export { Checkbox } from "./components/Checkbox/Checkbox.js";
+export { Chip } from "./components/Chip/Chip.js";
+export { Dialog, } from "./components/Dialog/Dialog.js";
+export { Collapsible, } from "./components/Collapsible/Collapsible.js";
+export { Divider } from "./components/Divider/Divider.js";
+export { Menu } from "./components/Menu/Menu.js";
+export { Meter } from "./components/Meter/Meter.js";
+export { Popover } from "./components/Popover/Popover.js";
+export { Progress } from "./components/Progress/Progress.js";
+export { Radio, RadioGroup } from "./components/Radio/Radio.js";
+export { Select, } from "./components/Select/Select.js";
+export { Slider, } from "./components/Slider/Slider.js";
+export { Skeleton } from "./components/Skeleton/Skeleton.js";
+export { Spinner } from "./components/Spinner/Spinner.js";
+export { Surface } from "./components/Surface/Surface.js";
+export { Switch } from "./components/Switch/Switch.js";
+export { Tab, Tabs, } from "./components/Tabs/Tabs.js";
+export { TextField } from "./components/TextField/TextField.js";
+export { Toggle } from "./components/Toggle/Toggle.js";
+export { Tooltip, TooltipProvider, } from "./components/Tooltip/Tooltip.js";
+export { Accordion, } from "./components/Accordion/Accordion.js";
+export { Drawer, } from "./components/Drawer/Drawer.js";
+export { NumberField } from "./components/NumberField/NumberField.js";
+export { OtpField } from "./components/OtpField/OtpField.js";
+export { ScrollArea } from "./components/ScrollArea/ScrollArea.js";
+export { ToastProvider, useToast, } from "./components/Toast/Toast.js";
+export { Toolbar, ToolbarSeparator, } from "./components/Toolbar/Toolbar.js";
+export { AnchoredPopup } from "./overlay/AnchoredPopup.js";
+export { placePopup, } from "./overlay/placePopup.js";
+export { useOpenState } from "./overlay/useOpenState.js";
+export { useReducedMotion } from "./hooks/useReducedMotion.js";

package/dist/overlay/AnchoredPopup.d.ts

@@ -0,0 +1,26 @@
+import { type ReactNode } from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
+import { type AnchorOptions, type AnchorRect } from "./placePopup.js";
+/**
+ * The shared body of every popup that hangs off a trigger.
+ *
+ * Menu, Popover, Tooltip and Select all need the same three things: render above
+ * everything, close on an outside press, and sit next to a measured anchor
+ * without falling off the screen. Base UI's Positioner does this for all of them
+ * on the web, so there is one of them here too.
+ *
+ * It renders once invisibly to find out how big it is, then again in place. That
+ * is the cost of having no layout engine to ask: the popup's size depends on its
+ * content, and the position depends on the size.
+ */
+export interface AnchoredPopupProps extends AnchorOptions {
+    open: boolean;
+    anchor: AnchorRect | null;
+    onDismiss: () => void;
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+    /** Tooltips do not take presses; menus do. */
+    pointerEvents?: "auto" | "none";
+}
+export declare function AnchoredPopup({ open, anchor, onDismiss, children, style, pointerEvents, ...options }: AnchoredPopupProps): import("react").JSX.Element | null;
+//# sourceMappingURL=AnchoredPopup.d.ts.map

package/dist/overlay/AnchoredPopup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnchoredPopup.d.ts","sourceRoot":"","sources":["../../src/overlay/AnchoredPopup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAkD,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9G,OAAO,EAAc,KAAK,aAAa,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAI/E;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,kBAAmB,SAAQ,aAAa;IACvD,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,UAAU,GAAG,IAAI,CAAC;IAC1B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,8CAA8C;IAC9C,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACjC;AAED,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,MAAM,EACN,SAAS,EACT,QAAQ,EACR,KAAK,EACL,aAAsB,EACtB,GAAG,OAAO,EACX,EAAE,kBAAkB,sCA6CpB"}

package/dist/overlay/AnchoredPopup.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Modal, Pressable, View } from "react-native";
+import { placePopup } from "./placePopup.js";
+import { screenSize } from "./useAnchoredPosition.js";
+import { useTheme } from "../theme/index.js";
+export function AnchoredPopup({ open, anchor, onDismiss, children, style, pointerEvents = "auto", ...options }) {
+    const theme = useTheme();
+    const [size, setSize] = useState(null);
+    const onLayout = (e) => {
+        const { width, height } = e.nativeEvent.layout;
+        if (!size || size.width !== width || size.height !== height) {
+            setSize({ width, height });
+        }
+    };
+    if (!open || !anchor)
+        return null;
+    const placement = size
+        ? placePopup(anchor, size, screenSize(), options)
+        : null;
+    return (_jsx(Modal, { visible: true, transparent: true, animationType: "none", onRequestClose: onDismiss, children: _jsx(Pressable, { style: { flex: 1 }, onPress: onDismiss, children: _jsx(View, { onLayout: onLayout, pointerEvents: pointerEvents, style: [
+                    {
+                        position: "absolute",
+                        // Off-screen for the measuring pass, so nothing flashes in the
+                        // wrong place before the position is known.
+                        top: placement?.top ?? -9999,
+                        left: placement?.left ?? -9999,
+                        maxHeight: placement?.maxHeight,
+                        backgroundColor: theme.color.surfaceRaised,
+                        borderRadius: theme.radius.md,
+                        borderWidth: 1,
+                        borderColor: theme.color.border,
+                    },
+                    style,
+                ], children: _jsx(Pressable, { onPress: () => { }, children: children }) }) }) }));
+}