@gryt/ui-native 0.1.0

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,43 @@
+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 SIZE = 20;
+/**
+ * The tick is a text glyph rather than an icon.
+ *
+ * `@gryt/ui` renders a Phosphor `Check`. Pulling an icon library in here would
+ * be the first runtime dependency this package has, for one glyph, and
+ * `@phosphor-icons/react` renders SVG that React Native cannot mount without
+ * react-native-svg on top. Both are decisions for whoever needs a full icon set,
+ * not for a checkbox.
+ */
+export function Checkbox({ checked: controlled, defaultChecked = false, indeterminate = false, onCheckedChange, disabled, tone = "primary", style, accessibilityLabel, }) {
+    const theme = useTheme();
+    const [uncontrolled, setUncontrolled] = useState(defaultChecked);
+    const checked = controlled ?? uncontrolled;
+    const ramp = toneRamp(theme, tone);
+    const filled = checked || indeterminate;
+    return (_jsx(Pressable, { accessibilityRole: "checkbox", accessibilityState: {
+            checked: indeterminate ? "mixed" : checked,
+            disabled: !!disabled,
+        }, accessibilityLabel: accessibilityLabel, disabled: disabled, onPress: () => {
+            const next = !checked;
+            if (controlled === undefined)
+                setUncontrolled(next);
+            onCheckedChange?.(next);
+        }, style: [
+            {
+                width: SIZE,
+                height: SIZE,
+                borderRadius: theme.radius.sm,
+                alignItems: "center",
+                justifyContent: "center",
+                borderWidth: filled ? 0 : 1.5,
+                borderColor: theme.color.border,
+                backgroundColor: filled ? ramp[8] : "transparent",
+                opacity: disabled ? 0.5 : 1,
+            },
+            style,
+        ], children: filled ? (_jsx(Text, { style: { color: theme.color.bg, fontSize: 13, fontWeight: "900", lineHeight: 15 }, children: indeterminate ? "–" : "✓" })) : null }));
+}

package/dist/components/Chip/Chip.d.ts

@@ -0,0 +1,17 @@
+import { type StyleProp, type ViewStyle } from "react-native";
+export type ChipTone = "neutral" | "accent" | "secondary" | "success" | "danger" | "warning";
+export type ChipVariant = "soft" | "solid" | "outline";
+export interface ChipProps {
+    label: string;
+    tone?: ChipTone;
+    variant?: ChipVariant;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * A small status label. No interaction — that is Button's job.
+ *
+ * Steps 3, 9 and 11 are the same ones `@gryt/ui` picks: 3 is the soft fill, 9
+ * is the solid one, 11 is text that passes contrast against both.
+ */
+export declare function Chip({ label, tone, variant, style, }: ChipProps): import("react").JSX.Element;
+//# sourceMappingURL=Chip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAI1E,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;AAC7F,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;AAEvD,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;GAKG;AACH,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,IAAgB,EAChB,OAAgB,EAChB,KAAK,GACN,EAAE,SAAS,+BA4CX"}

package/dist/components/Chip/Chip.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text, View } from "react-native";
+import { useTheme } from "../../theme/index.js";
+/**
+ * A small status label. No interaction — that is Button's job.
+ *
+ * Steps 3, 9 and 11 are the same ones `@gryt/ui` picks: 3 is the soft fill, 9
+ * is the solid one, 11 is text that passes contrast against both.
+ */
+export function Chip({ label, tone = "neutral", variant = "soft", style, }) {
+    const theme = useTheme();
+    const ramp = theme.scales[tone];
+    const background = variant === "solid" ? ramp[8] : variant === "soft" ? ramp[2] : "transparent";
+    const foreground = variant === "solid"
+        ? tone === "accent"
+            ? theme.color.onAccent
+            : tone === "secondary"
+                ? theme.color.onSecondary
+                : tone === "danger"
+                    ? theme.color.onDanger
+                    : theme.color.bg
+        : ramp[10];
+    return (_jsx(View, { style: [
+            {
+                alignSelf: "flex-start",
+                flexDirection: "row",
+                alignItems: "center",
+                backgroundColor: background,
+                borderRadius: theme.radius.full,
+                paddingHorizontal: theme.space(2.5),
+                paddingVertical: theme.space(1),
+                ...(variant === "outline"
+                    ? { borderWidth: 1, borderColor: ramp[6] }
+                    : null),
+            },
+            style,
+        ], children: _jsx(Text, { numberOfLines: 1, style: { color: foreground, fontSize: 12, fontWeight: "600" }, children: label }) }));
+}

package/dist/components/Collapsible/Collapsible.d.ts

@@ -0,0 +1,31 @@
+import { type ReactNode } from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
+import { type OpenStateProps } from "../../overlay/useOpenState.js";
+export interface CollapsibleRootProps extends OpenStateProps {
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Root({ children, style, ...openProps }: CollapsibleRootProps): import("react").JSX.Element;
+declare function Trigger({ children, style }: {
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}): import("react").JSX.Element;
+/**
+ * Unmounted when closed, rather than animated to zero height.
+ *
+ * The web animates the panel's height, which needs the content measured first.
+ * React Native can do it with `onLayout` plus `Animated`, and it costs a frame
+ * of the content rendered at the wrong size before the measurement lands. Not
+ * worth it for the first pass, and it is in the exceptions table.
+ */
+declare function Panel({ children, style }: {
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}): import("react").JSX.Element | null;
+export declare const Collapsible: {
+    Root: typeof Root;
+    Trigger: typeof Trigger;
+    Panel: typeof Panel;
+};
+export {};
+//# sourceMappingURL=Collapsible.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Collapsible.d.ts","sourceRoot":"","sources":["../../../src/components/Collapsible/Collapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,EAAmB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE/E,OAAO,EAAgB,KAAK,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAe/E,MAAM,WAAW,oBAAqB,SAAQ,cAAc;IAC1D,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,iBAAS,IAAI,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,EAAE,oBAAoB,+BAOpE;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,+BAY3F;AAED;;;;;;;GAOG;AACH,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,sCAIzF;AAED,eAAO,MAAM,WAAW;;;;CAA2B,CAAC"}

package/dist/components/Collapsible/Collapsible.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { Pressable, View } from "react-native";
+import { useOpenState } from "../../overlay/useOpenState.js";
+const CollapsibleContext = createContext(null);
+function useCollapsible(part) {
+    const value = useContext(CollapsibleContext);
+    if (!value)
+        throw new Error(`Collapsible.${part} must be rendered inside Collapsible.Root.`);
+    return value;
+}
+function Root({ children, style, ...openProps }) {
+    const state = useOpenState(openProps);
+    return (_jsx(CollapsibleContext.Provider, { value: state, children: _jsx(View, { style: style, children: children }) }));
+}
+function Trigger({ children, style }) {
+    const { open, setOpen } = useCollapsible("Trigger");
+    return (_jsx(Pressable, { accessibilityRole: "button", accessibilityState: { expanded: open }, onPress: () => setOpen(!open), style: style, children: children }));
+}
+/**
+ * Unmounted when closed, rather than animated to zero height.
+ *
+ * The web animates the panel's height, which needs the content measured first.
+ * React Native can do it with `onLayout` plus `Animated`, and it costs a frame
+ * of the content rendered at the wrong size before the measurement lands. Not
+ * worth it for the first pass, and it is in the exceptions table.
+ */
+function Panel({ children, style }) {
+    const { open } = useCollapsible("Panel");
+    if (!open)
+        return null;
+    return _jsx(View, { style: style, children: children });
+}
+export const Collapsible = { Root, Trigger, Panel };

package/dist/components/Dialog/Dialog.d.ts

@@ -0,0 +1,67 @@
+import { type ReactNode } from "react";
+import { type StyleProp, type TextStyle, type ViewStyle } from "react-native";
+import { type OpenStateProps } from "../../overlay/useOpenState.js";
+export interface DialogRootProps extends OpenStateProps {
+    children?: ReactNode;
+}
+declare function Root({ children, ...openProps }: DialogRootProps): import("react").JSX.Element;
+export interface DialogTriggerProps {
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Trigger({ children, style }: DialogTriggerProps): import("react").JSX.Element;
+/**
+ * A passthrough.
+ *
+ * On the web a portal is how the popup escapes overflow and stacking contexts.
+ * React Native's `Modal` already renders above everything, so there is nothing
+ * to escape. It exists so call sites keep the same shape.
+ */
+declare function Portal({ children }: {
+    children?: ReactNode;
+}): import("react").JSX.Element;
+export interface DialogPopupProps {
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+    dismissible?: boolean;
+    /** Long content scrolls rather than growing past the screen. */
+    scrollable?: boolean;
+}
+declare function Popup({ children, style, dismissible, scrollable, }: DialogPopupProps): import("react").JSX.Element;
+/**
+ * Not rendered.
+ *
+ * The scrim is drawn by Popup, because React Native's Modal owns that layer and
+ * a separate backdrop element would have nothing to render into. Kept so call
+ * sites written against `@gryt/ui` do not have to drop a line.
+ */
+declare function Backdrop(): null;
+declare function Title({ children, style }: {
+    children?: ReactNode;
+    style?: StyleProp<TextStyle>;
+}): import("react").JSX.Element;
+declare function Description({ children, style }: {
+    children?: ReactNode;
+    style?: StyleProp<TextStyle>;
+}): import("react").JSX.Element;
+declare function Footer({ children, style }: {
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}): import("react").JSX.Element;
+declare function Close({ children, style }: {
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}): import("react").JSX.Element;
+export declare const Dialog: {
+    Root: typeof Root;
+    Trigger: typeof Trigger;
+    Portal: typeof Portal;
+    Backdrop: typeof Backdrop;
+    Popup: typeof Popup;
+    Title: typeof Title;
+    Description: typeof Description;
+    Footer: typeof Footer;
+    Close: typeof Close;
+};
+export {};
+//# sourceMappingURL=Dialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,EAML,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAgB,KAAK,cAAc,EAAE,MAAM,4BAA4B,CAAC;AA2B/E,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACrD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,iBAAS,IAAI,CAAC,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,EAAE,eAAe,+BAKxD;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,iBAAS,OAAO,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,kBAAkB,+BAOvD;AAED;;;;;;GAMG;AACH,iBAAS,MAAM,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,+BAErD;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gEAAgE;IAChE,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,iBAAS,KAAK,CAAC,EACb,QAAQ,EACR,KAAK,EACL,WAAkB,EAClB,UAAiB,GAClB,EAAE,gBAAgB,+BA+DlB;AAED;;;;;;GAMG;AACH,iBAAS,QAAQ,IAAI,IAAI,CAExB;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,+BAUzF;AAED,iBAAS,WAAW,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAAE,+BAO/F;AAED,iBAAS,MAAM,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAAE,+BAY1F;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,eAAO,MAAM,MAAM;;;;;;;;;;CAUlB,CAAC"}

package/dist/components/Dialog/Dialog.js

@@ -0,0 +1,112 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { Modal, Pressable, ScrollView, Text, View, } from "react-native";
+import { useOpenState } from "../../overlay/useOpenState.js";
+import { useTheme } from "../../theme/index.js";
+const DialogContext = createContext(null);
+function useDialog(part) {
+    const value = useContext(DialogContext);
+    if (!value) {
+        throw new Error(`Dialog.${part} must be rendered inside Dialog.Root.`);
+    }
+    return value;
+}
+function Root({ children, ...openProps }) {
+    const state = useOpenState(openProps);
+    return (_jsx(DialogContext.Provider, { value: state, children: children }));
+}
+function Trigger({ children, style }) {
+    const { setOpen } = useDialog("Trigger");
+    return (_jsx(Pressable, { accessibilityRole: "button", onPress: () => setOpen(true), style: style, children: children }));
+}
+/**
+ * A passthrough.
+ *
+ * On the web a portal is how the popup escapes overflow and stacking contexts.
+ * React Native's `Modal` already renders above everything, so there is nothing
+ * to escape. It exists so call sites keep the same shape.
+ */
+function Portal({ children }) {
+    return _jsx(_Fragment, { children: children });
+}
+function Popup({ children, style, dismissible = true, scrollable = true, }) {
+    const { open, setOpen } = useDialog("Popup");
+    const theme = useTheme();
+    const body = (_jsx(View
+    // iOS hides everything behind a modal from VoiceOver with this; Android
+    // gets the same effect from Modal itself.
+    , { 
+        // iOS hides everything behind a modal from VoiceOver with this; Android
+        // gets the same effect from Modal itself.
+        accessibilityViewIsModal: true, style: [
+            {
+                width: "100%",
+                maxWidth: 480,
+                maxHeight: "80%",
+                backgroundColor: theme.color.surfaceRaised,
+                borderRadius: theme.radius.lg,
+                borderWidth: 1,
+                borderColor: theme.color.border,
+                padding: theme.space(5),
+                gap: theme.space(3),
+            },
+            style,
+        ], children: scrollable ? (_jsx(ScrollView, { contentContainerStyle: { gap: theme.space(3) }, children: children })) : (children) }));
+    return (_jsx(Modal, { visible: open, transparent: true, animationType: "fade", 
+        // Android's hardware back button, which is the closest thing a phone has
+        // to the Escape key Base UI listens for. AlertDialog turns it off for the
+        // same reason it turns off the scrim: neither is an answer.
+        onRequestClose: dismissible ? () => setOpen(false) : undefined, children: _jsx(Pressable
+        // The scrim doubles as the outside-press target, which is how Base UI
+        // dismisses too.
+        , { 
+            // The scrim doubles as the outside-press target, which is how Base UI
+            // dismisses too.
+            onPress: dismissible ? () => setOpen(false) : undefined, style: {
+                flex: 1,
+                alignItems: "center",
+                justifyContent: "center",
+                padding: theme.space(5),
+                backgroundColor: "rgba(0,0,0,0.6)",
+            }, children: _jsx(Pressable, { onPress: () => { }, style: { width: "100%", alignItems: "center" }, children: body }) }) }));
+}
+/**
+ * Not rendered.
+ *
+ * The scrim is drawn by Popup, because React Native's Modal owns that layer and
+ * a separate backdrop element would have nothing to render into. Kept so call
+ * sites written against `@gryt/ui` do not have to drop a line.
+ */
+function Backdrop() {
+    return null;
+}
+function Title({ children, style }) {
+    const theme = useTheme();
+    return (_jsx(Text, { accessibilityRole: "header", style: [{ color: theme.color.text, fontSize: 18, fontWeight: "600" }, style], children: children }));
+}
+function Description({ children, style }) {
+    const theme = useTheme();
+    return (_jsx(Text, { style: [{ color: theme.color.muted, fontSize: 14, lineHeight: 20 }, style], children: children }));
+}
+function Footer({ children, style }) {
+    const theme = useTheme();
+    return (_jsx(View, { style: [
+            { flexDirection: "row", justifyContent: "flex-end", gap: theme.space(3) },
+            style,
+        ], children: children }));
+}
+function Close({ children, style }) {
+    const { setOpen } = useDialog("Close");
+    return (_jsx(Pressable, { accessibilityRole: "button", onPress: () => setOpen(false), style: style, children: children }));
+}
+export const Dialog = {
+    Root,
+    Trigger,
+    Portal,
+    Backdrop,
+    Popup,
+    Title,
+    Description,
+    Footer,
+    Close,
+};

package/dist/components/Divider/Divider.d.ts

@@ -0,0 +1,16 @@
+import { type StyleProp, type ViewStyle } from "react-native";
+export interface DividerProps {
+    orientation?: "horizontal" | "vertical";
+    /** Inset from both ends, in 4pt steps. */
+    inset?: number;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * A hairline.
+ *
+ * The web uses 1px. Here it is `1` in device-independent points, which lands on
+ * one physical pixel on a 1x screen and stays a hairline on 2x and 3x — the same
+ * thing the web gets from a 1px border on a retina display.
+ */
+export declare function Divider({ orientation, inset, style, }: DividerProps): import("react").JSX.Element;
+//# sourceMappingURL=Divider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../src/components/Divider/Divider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIpE,MAAM,WAAW,YAAY;IAC3B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;;GAMG;AACH,wBAAgB,OAAO,CAAC,EACtB,WAA0B,EAC1B,KAAS,EACT,KAAK,GACN,EAAE,YAAY,+BAgBd"}

package/dist/components/Divider/Divider.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from "react-native";
+import { useTheme } from "../../theme/index.js";
+/**
+ * A hairline.
+ *
+ * The web uses 1px. Here it is `1` in device-independent points, which lands on
+ * one physical pixel on a 1x screen and stays a hairline on 2x and 3x — the same
+ * thing the web gets from a 1px border on a retina display.
+ */
+export function Divider({ orientation = "horizontal", inset = 0, style, }) {
+    const theme = useTheme();
+    const gap = theme.space(inset);
+    return (_jsx(View, { accessibilityRole: "none", style: [
+            orientation === "horizontal"
+                ? { height: 1, alignSelf: "stretch", marginHorizontal: gap }
+                : { width: 1, alignSelf: "stretch", marginVertical: gap },
+            { backgroundColor: theme.color.border },
+            style,
+        ] }));
+}

package/dist/components/Drawer/Drawer.d.ts

@@ -0,0 +1,44 @@
+import { type ReactNode } from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
+import { type OpenStateProps } from "../../overlay/useOpenState.js";
+export type DrawerSide = "left" | "right" | "bottom";
+export interface DrawerRootProps extends OpenStateProps {
+    children?: ReactNode;
+}
+declare function Root({ children, ...openProps }: DrawerRootProps): import("react").JSX.Element;
+declare function Trigger({ children, style }: {
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}): import("react").JSX.Element;
+declare function Portal({ children }: {
+    children?: ReactNode;
+}): import("react").JSX.Element;
+export interface DrawerPopupProps {
+    children?: ReactNode;
+    side?: DrawerSide;
+    /** Fraction of the screen, 0 to 1. */
+    size?: number;
+    dismissible?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Slides in from an edge, which is the one place an animation is not decoration.
+ *
+ * A drawer that appears without moving reads as a screen change rather than a
+ * panel, so this one animates even though Collapsible and Skeleton do not.
+ * Reduce-motion still turns it off: the drawer arrives in place instead.
+ */
+declare function Popup({ children, side, size, dismissible, style, }: DrawerPopupProps): import("react").JSX.Element;
+declare function Close({ children, style }: {
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}): import("react").JSX.Element;
+export declare const Drawer: {
+    Root: typeof Root;
+    Trigger: typeof Trigger;
+    Portal: typeof Portal;
+    Popup: typeof Popup;
+    Close: typeof Close;
+};
+export {};
+//# sourceMappingURL=Drawer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvF,OAAO,EAKL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAgB,KAAK,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAG/E,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAerD,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACrD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,iBAAS,IAAI,CAAC,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,EAAE,eAAe,+BAGxD;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,+BAO3F;AAED,iBAAS,MAAM,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,+BAErD;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,sCAAsC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;;GAMG;AACH,iBAAS,KAAK,CAAC,EACb,QAAQ,EACR,IAAa,EACb,IAAU,EACV,WAAkB,EAClB,KAAK,GACN,EAAE,gBAAgB,+BAuElB;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,eAAO,MAAM,MAAM;;;;;;CAA0C,CAAC"}

package/dist/components/Drawer/Drawer.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useState } from "react";
+import { Animated, Dimensions, Modal, Pressable, } from "react-native";
+import { useReducedMotion } from "../../hooks/useReducedMotion.js";
+import { useOpenState } from "../../overlay/useOpenState.js";
+import { useTheme } from "../../theme/index.js";
+const DrawerContext = createContext(null);
+function useDrawer(part) {
+    const value = useContext(DrawerContext);
+    if (!value)
+        throw new Error(`Drawer.${part} must be rendered inside Drawer.Root.`);
+    return value;
+}
+function Root({ children, ...openProps }) {
+    const state = useOpenState(openProps);
+    return _jsx(DrawerContext.Provider, { value: state, children: children });
+}
+function Trigger({ children, style }) {
+    const { setOpen } = useDrawer("Trigger");
+    return (_jsx(Pressable, { accessibilityRole: "button", onPress: () => setOpen(true), style: style, children: children }));
+}
+function Portal({ children }) {
+    return _jsx(_Fragment, { children: children });
+}
+/**
+ * Slides in from an edge, which is the one place an animation is not decoration.
+ *
+ * A drawer that appears without moving reads as a screen change rather than a
+ * panel, so this one animates even though Collapsible and Skeleton do not.
+ * Reduce-motion still turns it off: the drawer arrives in place instead.
+ */
+function Popup({ children, side = "left", size = 0.8, dismissible = true, style, }) {
+    const { open, setOpen } = useDrawer("Popup");
+    const theme = useTheme();
+    const reducedMotion = useReducedMotion();
+    const screen = Dimensions.get("window");
+    const vertical = side === "bottom";
+    const extent = vertical ? screen.height * size : screen.width * size;
+    const [progress] = useState(() => new Animated.Value(0));
+    useEffect(() => {
+        if (!open) {
+            progress.setValue(0);
+            return;
+        }
+        if (reducedMotion) {
+            progress.setValue(1);
+            return;
+        }
+        Animated.spring(progress, {
+            toValue: 1,
+            useNativeDriver: true,
+            speed: 20,
+            bounciness: 0,
+        }).start();
+    }, [open, progress, reducedMotion]);
+    const hidden = side === "right" ? extent : side === "left" ? -extent : extent;
+    const translate = progress.interpolate({
+        inputRange: [0, 1],
+        outputRange: [hidden, 0],
+    });
+    return (_jsx(Modal, { visible: open, transparent: true, animationType: "none", onRequestClose: dismissible ? () => setOpen(false) : undefined, children: _jsx(Pressable, { onPress: dismissible ? () => setOpen(false) : undefined, style: { flex: 1, backgroundColor: "rgba(0,0,0,0.6)" }, children: _jsx(Animated.View, { accessibilityViewIsModal: true, style: {
+                    position: "absolute",
+                    top: side === "bottom" ? undefined : 0,
+                    bottom: 0,
+                    left: side === "right" ? undefined : 0,
+                    right: side === "left" ? undefined : 0,
+                    width: vertical ? "100%" : extent,
+                    height: vertical ? extent : "100%",
+                    backgroundColor: theme.color.surface,
+                    borderColor: theme.color.border,
+                    borderRightWidth: side === "left" ? 1 : 0,
+                    borderLeftWidth: side === "right" ? 1 : 0,
+                    borderTopWidth: vertical ? 1 : 0,
+                    borderTopLeftRadius: vertical ? theme.radius.lg : 0,
+                    borderTopRightRadius: vertical ? theme.radius.lg : 0,
+                    transform: [vertical ? { translateY: translate } : { translateX: translate }],
+                }, children: _jsx(Pressable, { onPress: () => { }, style: [{ flex: 1 }, style], children: children }) }) }) }));
+}
+function Close({ children, style }) {
+    const { setOpen } = useDrawer("Close");
+    return (_jsx(Pressable, { accessibilityRole: "button", onPress: () => setOpen(false), style: style, children: children }));
+}
+export const Drawer = { Root, Trigger, Portal, Popup, Close };

package/dist/components/Menu/Menu.d.ts

@@ -0,0 +1,56 @@
+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 MenuRootProps extends OpenStateProps {
+    children?: ReactNode;
+}
+declare function Root({ children, ...openProps }: MenuRootProps): import("react").JSX.Element;
+declare function Trigger({ children, style }: {
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}): import("react").JSX.Element;
+declare function Portal({ children }: {
+    children?: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * 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.
+ */
+declare function Positioner({ children }: {
+    children?: ReactNode;
+}): import("react").JSX.Element;
+export interface MenuPopupProps {
+    children?: ReactNode;
+    side?: Side;
+    align?: Align;
+    sideOffset?: number;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Popup({ children, style, ...options }: MenuPopupProps): import("react").JSX.Element;
+export interface MenuItemProps {
+    children?: ReactNode;
+    onPress?: () => void;
+    disabled?: boolean;
+    /** Renders in the danger ramp, for destructive actions. */
+    destructive?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Item({ children, onPress, disabled, destructive, style }: MenuItemProps): import("react").JSX.Element;
+declare function Separator({ style }: {
+    style?: StyleProp<ViewStyle>;
+}): import("react").JSX.Element;
+export declare const Menu: {
+    Root: typeof Root;
+    Trigger: typeof Trigger;
+    Portal: typeof Portal;
+    Positioner: typeof Positioner;
+    Popup: typeof Popup;
+    Item: typeof Item;
+    Separator: typeof Separator;
+};
+export {};
+//# sourceMappingURL=Menu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.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;AAkB/E,MAAM,WAAW,aAAc,SAAQ,cAAc;IACnD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,iBAAS,IAAI,CAAC,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,EAAE,aAAa,+BAQtD;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,+BAY3F;AAED,iBAAS,MAAM,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,+BAErD;AAED;;;;;;GAMG;AACH,iBAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,+BAEzD;AAED,MAAM,WAAW,cAAc;IAC7B,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,cAAc,+BAe7D;AAED,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2DAA2D;IAC3D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,iBAAS,IAAI,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,aAAa,+BAuC/E;AAED,iBAAS,SAAS,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAAE,+BAU7D;AAED,eAAO,MAAM,IAAI;;;;;;;;CAAgE,CAAC"}