@gryt/ui-native 0.1.0

package/README.md

@@ -0,0 +1,86 @@
+# @gryt/ui-native
+
+Gryt's design system on React Native. The same tokens as `@gryt/ui`, a different
+renderer.
+
+## Status
+
+**Private, and not published.** Thirty-three components across the overlays, the
+form controls, and the layout and feedback set. Flip `private` off once there is
+a reason to install it.
+
+Still missing, and all Gryt-specific or built on something not here yet:
+Composer, ConversationItem, MessageBubble, NavigationMenu, ContextMenu, Drawer,
+PreviewCard, Toolbar, Form, Toast, ScrollArea, Accordion, Autocomplete,
+Combobox, NumberField and OtpField.
+
+Tracked in GRYT-342. The goal is 1:1 with `@gryt/ui`: every component, matching
+behaviour, no mobile-only limits.
+
+## The tokens are imported, not copied
+
+```ts
+import { createNativeTheme } from "@gryt/ui-native";
+```
+
+`createNativeTheme` builds its ramps by calling `neutralScale`, `hueScale` and
+`alphaScale` from `@gryt/ui/theme`. There is one implementation of the OKLab
+maths and both renderers use it, so a curve tuned on the web moves here too.
+
+What it does **not** use is `createGrytTheme`, which returns `CSSProperties` — a
+map of `--gryt-accent-9` custom properties. React Native has no custom
+properties and no cascade, so components take a theme from context instead:
+
+```tsx
+<GrytThemeProvider followSystemAppearance>
+  <Surface level="raised" bordered padding={4}>
+    <Chip label="Live" tone="success" />
+  </Surface>
+</GrytThemeProvider>
+```
+
+Rendered outside a provider, components get the dark theme rather than nothing,
+which matches `@gryt/ui` shipping its dark tokens on `:root`.
+
+## Parity exceptions
+
+Kept from the first component rather than the first argument. Full 1:1 is the
+goal, so the honest list is worth more than a claim of parity that isn't one.
+
+| Component | What differs | Why |
+|---|---|---|
+| `Spinner` | Uses the platform `ActivityIndicator` instead of the web's stroked, CSS-animated circle | It is what the OS draws for "working", it honours reduce-motion for free, and iOS and Android differ from each other deliberately. Reproducing the web drawing would look wrong on both. |
+| *(all)* | No hover state | A phone has no pointer. The web's `scale-[1.03]` on hover has no equivalent and is deliberately not emulated on press, which would fire on every tap and make the whole UI feel loose. |
+| `Button` | Press scale is kept, hover scale is dropped | The web scales to `0.96` on press and `1.03` on hover. Press maps directly onto `onPressIn`/`onPressOut`, so it is here, spring-animated and skipped when reduce-motion is on. |
+| `Button` | `hasPopup` is a prop, not inferred | The web reads `aria-haspopup`, which Base UI sets on a trigger, and skips the scale so the trigger does not drag its own popup sideways while it is being measured. React Native has no such attribute, so a menu trigger has to say so. |
+| `TextField` | Focus changes the border colour instead of drawing an outline | The web's `outline` sits outside the box and shifts nothing. React Native has no outline, and a second ring would move the layout on focus. |
+| `Progress` | Indeterminate renders as an empty track | The web sweeps a partial bar with a CSS keyframe. Doing it here needs an `Animated` loop plus a reduce-motion check, which deserves its own pass rather than a footnote. |
+| `Tooltip` | Opens on long press, closes on release, instead of appearing on hover after a delay | A phone has no hover. This is the same name on a different interaction, and it is the component where 1:1 is least achievable. An interface that needs tooltips to be usable will not survive the port. |
+| *(positioned overlays)* | The popup does not follow a trigger that moves | Floating UI keeps watching the reference element. React Native measures on demand and reports nothing afterwards, so the position is taken once, when the popup opens. If a list scrolls underneath an open menu, the menu stays put. |
+| `Popover` | `Arrow` renders nothing | Base UI positions an arrow against the popup's edge once Floating UI has settled. Here it means a rotated square, a border on two sides only, and knowing which side the popup landed on. Doable, not free, and not done. |
+| `Menu` | `Positioner` is a passthrough | Base UI splits the positioned box from the styled box. There is no stacking context to escape here, so one view does both. |
+| `Dialog` | `Portal` is a passthrough and `Backdrop` renders nothing | React Native's `Modal` already renders above everything and draws its own layer, so there is nothing for a portal to escape and nowhere for a separate backdrop to go. Both are kept so call sites match. |
+| `Dialog` | Android's back button stands in for Escape | It is the only hardware dismiss a phone has. `AlertDialog` disables it along with the scrim, matching Base UI suppressing outside-press and Escape. |
+| `Switch` | Drawn from tokens, not React Native's `Switch` | The platform control is green on iOS and Material on Android, and `thumbColor`/`trackColor` do not reach the whole shape. A design system that cannot colour its own switch is not one. |
+| `Select` | A list, not the platform picker | iOS gives a wheel and Android a dialog. Neither takes the Gryt palette and they look nothing like each other. |
+| `Checkbox` | The tick is a text glyph, not a Phosphor icon | An icon set would be this package's first runtime dependency, for one glyph, and `@phosphor-icons/react` renders SVG that React Native cannot mount without `react-native-svg`. That is a decision for whoever needs icons, not for a checkbox. |
+| `Tabs` | Each tab draws its own underline; `Indicator` renders nothing | Base UI slides one indicator between tabs, measured against the active one. Sliding it here means measuring every tab and animating between them, which is real work for a decoration. The underline appears rather than slides. |
+| `Tabs` | The panel has no `tabpanel` role | React Native has `tab` and `tablist` and no `tabpanel`. The panel is reachable, it just does not announce itself as belonging to the tab. |
+| `Collapsible` | Unmounts when closed instead of animating height | The web animates height, which needs the content measured first. Doable with `onLayout` and `Animated`, at the cost of a frame at the wrong size. |
+| `Alert` | Severity is colour plus a live region, with no icon | Colour alone does not tell anyone this is an error, which is why the web pairs it with an icon. `assertive` for error and warning, `polite` otherwise, reaches a screen reader, which an icon does not. A visible icon still wants an icon set. |
+| `NumberField` | No scrub gesture on the label | The web lets you press the label and drag sideways to change the value. On a phone that competes with scrolling, and the same interaction already exists as `Slider`. |
+| `ScrollArea` | Nearly a passthrough over `ScrollView` | The web version exists to replace scrollbars browsers draw badly. A phone's indicator is drawn by the OS, fades on its own, and already matches every other app. |
+| `Toolbar` | No roving focus | The web's manages arrow-key movement between controls and one tab stop for the group. There is no focus to rove. The role is kept, since that is what tells a screen reader the controls belong together. |
+| `Accordion` | Two glyphs instead of a rotating chevron | Same reasoning as the checkbox tick: rotating one needs a transform and a measurement, and there is no icon set here yet. |
+| `Skeleton` | Does not pulse | A loop running for the length of a request costs battery, and it is the sort of motion reduce-motion users switch off first. A flat block still reads as loading. |
+
+## Not Node-importable
+
+The build is unbundled `tsc` output with extensionless relative imports, which
+is what Metro wants: it resolves `.native.ts` and `.web.ts` per file, and a
+bundle would have no files left to pick between. That also means plain Node
+cannot import `dist/index.js` — it would fail on `react-native` regardless, so
+nothing is lost, but do not add a Node-side consumer expecting it to work.
+
+The theme layer is testable without a native runtime, which is what
+`createNativeTheme.test.ts` covers.

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,35 @@
+import { type ReactNode } from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
+type ItemValue = string | number;
+export interface AccordionRootProps {
+    /** `single` closes the others when one opens. */
+    type?: "single" | "multiple";
+    value?: ItemValue[];
+    defaultValue?: ItemValue[];
+    onValueChange?: (value: ItemValue[]) => void;
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Root({ type, value: controlled, defaultValue, onValueChange, children, style, }: AccordionRootProps): import("react").JSX.Element;
+export interface AccordionItemProps {
+    value: ItemValue;
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Item({ value, children, style }: AccordionItemProps): import("react").JSX.Element;
+declare function Trigger({ children, style }: {
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}): import("react").JSX.Element;
+declare function Panel({ children, style }: {
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}): import("react").JSX.Element | null;
+export declare const Accordion: {
+    Root: typeof Root;
+    Item: typeof Item;
+    Trigger: typeof Trigger;
+    Panel: typeof Panel;
+};
+export {};
+//# sourceMappingURL=Accordion.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5E,OAAO,EAAyB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIrF,KAAK,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAsBjC,MAAM,WAAW,kBAAkB;IACjC,iDAAiD;IACjD,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC7B,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;IACpB,YAAY,CAAC,EAAE,SAAS,EAAE,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,iBAAS,IAAI,CAAC,EACZ,IAAe,EACf,KAAK,EAAE,UAAU,EACjB,YAAiB,EACjB,aAAa,EACb,QAAQ,EACR,KAAK,GACN,EAAE,kBAAkB,+BAoBpB;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,iBAAS,IAAI,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,kBAAkB,+BAc3D;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,+BAkC3F;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,sCAMzF;AAED,eAAO,MAAM,SAAS;;;;;CAAiC,CAAC"}

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useState } from "react";
+import { Pressable, Text, View } from "react-native";
+import { useTheme } from "../../theme/index.js";
+const AccordionContext = createContext(null);
+const ItemContext = createContext(null);
+function useAccordion(part) {
+    const value = useContext(AccordionContext);
+    if (!value)
+        throw new Error(`Accordion.${part} must be rendered inside Accordion.Root.`);
+    return value;
+}
+function useItem(part) {
+    const value = useContext(ItemContext);
+    if (value === null)
+        throw new Error(`Accordion.${part} must be rendered inside Accordion.Item.`);
+    return value;
+}
+function Root({ type = "single", value: controlled, defaultValue = [], onValueChange, children, style, }) {
+    const [uncontrolled, setUncontrolled] = useState(defaultValue);
+    const open = controlled ?? uncontrolled;
+    const toggle = (item) => {
+        const isOpen = open.includes(item);
+        const next = isOpen
+            ? open.filter((v) => v !== item)
+            : type === "single"
+                ? [item]
+                : [...open, item];
+        if (controlled === undefined)
+            setUncontrolled(next);
+        onValueChange?.(next);
+    };
+    return (_jsx(AccordionContext.Provider, { value: { open, toggle }, children: _jsx(View, { style: style, children: children }) }));
+}
+function Item({ value, children, style }) {
+    const theme = useTheme();
+    return (_jsx(ItemContext.Provider, { value: value, children: _jsx(View, { style: [
+                { borderBottomWidth: 1, borderBottomColor: theme.color.border },
+                style,
+            ], children: children }) }));
+}
+function Trigger({ children, style }) {
+    const theme = useTheme();
+    const { open, toggle } = useAccordion("Trigger");
+    const value = useItem("Trigger");
+    const isOpen = open.includes(value);
+    return (_jsxs(Pressable, { accessibilityRole: "button", accessibilityState: { expanded: isOpen }, onPress: () => toggle(value), style: [
+            {
+                flexDirection: "row",
+                alignItems: "center",
+                justifyContent: "space-between",
+                gap: theme.space(3),
+                paddingVertical: theme.space(3.5),
+            },
+            style,
+        ], children: [typeof children === "string" ? (_jsx(Text, { style: { color: theme.color.text, fontSize: 15, fontWeight: "500", flex: 1 }, children: children })) : (_jsx(View, { style: { flex: 1 }, children: children })), _jsx(Text, { style: { color: theme.color.muted, fontSize: 11 }, children: isOpen ? "▾" : "▸" })] }));
+}
+function Panel({ children, style }) {
+    const theme = useTheme();
+    const { open } = useAccordion("Panel");
+    const value = useItem("Panel");
+    if (!open.includes(value))
+        return null;
+    return _jsx(View, { style: [{ paddingBottom: theme.space(3.5) }, style], children: children });
+}
+export const Accordion = { Root, Item, Trigger, Panel };

package/dist/components/Alert/Alert.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
+export type AlertSeverity = "info" | "success" | "warning" | "error";
+export interface AlertProps {
+    severity?: AlertSeverity;
+    title?: ReactNode;
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Severity is carried by colour and by the accessibility role, not by an icon.
+ *
+ * Colour alone is not enough to tell somebody an alert is an error, which is why
+ * the web pairs it with an icon. The equivalent here is the live region: an
+ * `error` or `warning` announces itself as an assertive alert, the other two
+ * politely. That reaches a screen reader, which an icon does not.
+ *
+ * A visible icon still wants an icon set. Noted in the exceptions table.
+ */
+export declare function Alert({ severity, title, children, style }: AlertProps): import("react").JSX.Element;
+//# sourceMappingURL=Alert.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/Alert.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,MAAM,aAAa,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAErE,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AASD;;;;;;;;;GASG;AACH,wBAAgB,KAAK,CAAC,EAAE,QAAiB,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,UAAU,+BAmC9E"}

package/dist/components/Alert/Alert.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text, View } from "react-native";
+import { useTheme } from "../../theme/index.js";
+const RAMP = {
+    info: "accent",
+    success: "success",
+    warning: "warning",
+    error: "danger",
+};
+/**
+ * Severity is carried by colour and by the accessibility role, not by an icon.
+ *
+ * Colour alone is not enough to tell somebody an alert is an error, which is why
+ * the web pairs it with an icon. The equivalent here is the live region: an
+ * `error` or `warning` announces itself as an assertive alert, the other two
+ * politely. That reaches a screen reader, which an icon does not.
+ *
+ * A visible icon still wants an icon set. Noted in the exceptions table.
+ */
+export function Alert({ severity = "info", title, children, style }) {
+    const theme = useTheme();
+    const ramp = theme.scales[RAMP[severity]];
+    const urgent = severity === "error" || severity === "warning";
+    return (_jsxs(View, { accessibilityRole: "alert", accessibilityLiveRegion: urgent ? "assertive" : "polite", style: [
+            {
+                borderRadius: theme.radius.md,
+                borderWidth: 1,
+                borderColor: ramp[6],
+                backgroundColor: ramp[2],
+                padding: theme.space(3),
+                gap: theme.space(1),
+            },
+            style,
+        ], children: [title ? (typeof title === "string" ? (_jsx(Text, { style: { color: ramp[11], fontSize: 14, fontWeight: "600" }, children: title })) : (title)) : null, typeof children === "string" ? (_jsx(Text, { style: { color: ramp[10], fontSize: 13, lineHeight: 18 }, children: children })) : (children)] }));
+}

package/dist/components/AlertDialog/AlertDialog.d.ts

@@ -0,0 +1,38 @@
+import { type DialogPopupProps, type DialogRootProps } from "../Dialog/Dialog.js";
+/**
+ * A dialog that will not go away until it is answered.
+ *
+ * The only difference from Dialog, on the web and here: no dismissal by
+ * accident. Base UI drops the outside-press and Escape handling; this drops the
+ * outside-press and the Android back button, which are the two ways a phone
+ * offers to leave without choosing.
+ *
+ * There is no Footer here, matching the web, which does not export one for
+ * AlertDialog either.
+ */
+export type AlertDialogPopupProps = Omit<DialogPopupProps, "dismissible">;
+declare function Popup(props: AlertDialogPopupProps): import("react").JSX.Element;
+export type AlertDialogRootProps = DialogRootProps;
+export declare const AlertDialog: {
+    Root: ({ children, ...openProps }: DialogRootProps) => import("react").JSX.Element;
+    Trigger: ({ children, style }: import("../../index.js").DialogTriggerProps) => import("react").JSX.Element;
+    Portal: ({ children }: {
+        children?: import("react").ReactNode;
+    }) => import("react").JSX.Element;
+    Backdrop: () => null;
+    Popup: typeof Popup;
+    Title: ({ children, style }: {
+        children?: import("react").ReactNode;
+        style?: import("react-native").StyleProp<import("react-native").TextStyle>;
+    }) => import("react").JSX.Element;
+    Description: ({ children, style }: {
+        children?: import("react").ReactNode;
+        style?: import("react-native").StyleProp<import("react-native").TextStyle>;
+    }) => import("react").JSX.Element;
+    Close: ({ children, style }: {
+        children?: import("react").ReactNode;
+        style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+    }) => import("react").JSX.Element;
+};
+export {};
+//# sourceMappingURL=AlertDialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../../src/components/AlertDialog/AlertDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,gBAAgB,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEvF;;;;;;;;;;GAUG;AAIH,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,gBAAgB,EAAE,aAAa,CAAC,CAAC;AAE1E,iBAAS,KAAK,CAAC,KAAK,EAAE,qBAAqB,+BAE1C;AAED,MAAM,MAAM,oBAAoB,GAAG,eAAe,CAAC;AAEnD,eAAO,MAAM,WAAW;;;;gBAUw0B,CAAC;;;;;gBAAy/E,CAAC;aAAkB,CAAC;;;gBAAiS,CAAC;aAAkB,CAAC;;;gBAAkiB,CAAC;aAAkB,CAAC;;CADxtI,CAAC"}

package/dist/components/AlertDialog/AlertDialog.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dialog } from "../Dialog/Dialog.js";
+function Popup(props) {
+    return _jsx(Dialog.Popup, { ...props, dismissible: false });
+}
+export const AlertDialog = {
+    Root: Dialog.Root,
+    Trigger: Dialog.Trigger,
+    Portal: Dialog.Portal,
+    Backdrop: Dialog.Backdrop,
+    Popup,
+    Title: Dialog.Title,
+    Description: Dialog.Description,
+    Close: Dialog.Close,
+};

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,10 @@
+import { type StyleProp, type ViewStyle } from "react-native";
+export type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
+export interface AvatarProps {
+    name?: string;
+    source?: string;
+    size?: AvatarSize;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function Avatar({ name, source, size, style }: AvatarProps): import("react").JSX.Element;
+//# sourceMappingURL=Avatar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAqB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIjF,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAU1D,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAuBD,wBAAgB,MAAM,CAAC,EAAE,IAAS,EAAE,MAAM,EAAE,IAAW,EAAE,KAAK,EAAE,EAAE,WAAW,+BA+C5E"}

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Image, Text, View } from "react-native";
+import { useTheme } from "../../theme/index.js";
+const SIZES = {
+    xs: 20,
+    sm: 28,
+    md: 36,
+    lg: 48,
+    xl: 64,
+};
+/**
+ * Picks a ramp from the name, so the same person is the same colour everywhere.
+ *
+ * Deliberately the same arithmetic as the web: sum the code units and take the
+ * remainder. Anything cleverer would give a different colour on each platform
+ * for the same person, which is the one outcome to avoid.
+ */
+function toneFor(name) {
+    const tones = ["accent", "secondary", "success", "danger", "warning"];
+    let sum = 0;
+    for (let i = 0; i < name.length; i += 1)
+        sum += name.charCodeAt(i);
+    return tones[sum % tones.length];
+}
+function initials(name) {
+    const parts = name.trim().split(/\s+/).filter(Boolean);
+    if (parts.length === 0)
+        return "?";
+    if (parts.length === 1)
+        return parts[0].slice(0, 2).toUpperCase();
+    return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+}
+export function Avatar({ name = "", source, size = "md", style }) {
+    const theme = useTheme();
+    const [failed, setFailed] = useState(false);
+    const px = SIZES[size];
+    const ramp = theme.scales[toneFor(name)];
+    const frame = {
+        width: px,
+        height: px,
+        borderRadius: px / 2,
+        alignItems: "center",
+        justifyContent: "center",
+        overflow: "hidden",
+    };
+    // A broken image URL falls back to initials rather than to a blank circle.
+    // The web gets this from <img onerror>; here it is onError plus state.
+    if (source && !failed) {
+        return (_jsx(View, { style: [frame, { backgroundColor: theme.color.surfaceRaised }, style], children: _jsx(Image, { source: { uri: source }, onError: () => setFailed(true), accessibilityLabel: name || undefined, style: { width: px, height: px } }) }));
+    }
+    return (_jsx(View, { accessibilityRole: "image", accessibilityLabel: name || undefined, style: [frame, { backgroundColor: ramp[2] }, style], children: _jsx(Text, { style: {
+                color: ramp[10],
+                fontSize: Math.round(px * 0.4),
+                fontWeight: "600",
+            }, children: initials(name) }) }));
+}

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,13 @@
+import { type StyleProp, type ViewStyle } from "react-native";
+export type BadgeTone = "neutral" | "accent" | "secondary" | "success" | "danger" | "warning";
+export interface BadgeProps {
+    /** Rendered as a count. Values above `max` show as "max+". */
+    count?: number;
+    max?: number;
+    /** A dot with no number, for "something happened" without saying how much. */
+    dot?: boolean;
+    tone?: BadgeTone;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function Badge({ count, max, dot, tone, style, }: BadgeProps): import("react").JSX.Element | null;
+//# sourceMappingURL=Badge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAI1E,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE9F,MAAM,WAAW,UAAU;IACzB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,8EAA8E;IAC9E,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,GAAQ,EACR,GAAW,EACX,IAAe,EACf,KAAK,GACN,EAAE,UAAU,sCA0CZ"}

package/dist/components/Badge/Badge.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text, View } from "react-native";
+import { useTheme } from "../../theme/index.js";
+export function Badge({ count, max = 99, dot = false, tone = "danger", style, }) {
+    const theme = useTheme();
+    const ramp = theme.scales[tone];
+    if (dot) {
+        return (_jsx(View, { accessibilityRole: "image", accessibilityLabel: "Unread", style: [
+                { width: 8, height: 8, borderRadius: 4, backgroundColor: ramp[8] },
+                style,
+            ] }));
+    }
+    if (count === undefined || count <= 0)
+        return null;
+    const label = count > max ? `${max}+` : String(count);
+    return (_jsx(View, { accessibilityRole: "text", accessibilityLabel: `${count} unread`, style: [
+            {
+                minWidth: 18,
+                height: 18,
+                paddingHorizontal: 5,
+                borderRadius: 9,
+                alignItems: "center",
+                justifyContent: "center",
+                backgroundColor: ramp[8],
+            },
+            style,
+        ], children: _jsx(Text, { style: { color: theme.color.bg, fontSize: 11, fontWeight: "700" }, children: label }) }));
+}

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,24 @@
+import { type ReactNode } from "react";
+import { type PressableProps, type StyleProp, type ViewStyle } from "react-native";
+export type ButtonTone = "primary" | "secondary" | "neutral" | "danger" | "ghost";
+export type ButtonSize = "xsmall" | "small" | "medium" | "large";
+export interface ButtonProps extends Omit<PressableProps, "style" | "children"> {
+    children?: ReactNode;
+    tone?: ButtonTone;
+    size?: ButtonSize;
+    startIcon?: ReactNode;
+    endIcon?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+    /**
+     * This button opens something.
+     *
+     * The web reads `aria-haspopup`, which Base UI sets on a trigger, and skips
+     * the press scale for it: the popup is positioned against the trigger's
+     * measured box and keeps measuring while open, so a trigger that changes size
+     * drags its own menu sideways. React Native has no equivalent attribute, so
+     * the caller says it.
+     */
+    hasPopup?: boolean;
+}
+export declare function Button({ children, tone, size, startIcon, endIcon, style, hasPopup, disabled, ...rest }: ButtonProps): import("react").JSX.Element;
+//# sourceMappingURL=Button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAKL,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAKtB,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;AAClF,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AASjE,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,UAAU,CAAC;IAC7E,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAKD,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,IAAgB,EAChB,IAAe,EACf,SAAS,EACT,OAAO,EACP,KAAK,EACL,QAAgB,EAChB,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,WAAW,+BAgFb"}

package/dist/components/Button/Button.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Animated, Pressable, Text, View, } from "react-native";
+import { useReducedMotion } from "../../hooks/useReducedMotion.js";
+import { useTheme } from "../../theme/index.js";
+const SIZES = {
+    xsmall: { minHeight: 32, paddingH: 12, fontSize: 12 },
+    small: { minHeight: 36, paddingH: 16, fontSize: 14 },
+    medium: { minHeight: 40, paddingH: 20, fontSize: 14 },
+    large: { minHeight: 48, paddingH: 24, fontSize: 16 },
+};
+const PRESSED_SCALE = 0.96;
+const SPRING = { useNativeDriver: true, speed: 40, bounciness: 6 };
+export function Button({ children, tone = "primary", size = "medium", startIcon, endIcon, style, hasPopup = false, disabled, ...rest }) {
+    const theme = useTheme();
+    const reducedMotion = useReducedMotion();
+    // useState with an initialiser rather than useRef(new Animated.Value(1)):
+    // reading .current during render is a lint error, and the useRef form also
+    // constructs a throwaway Animated.Value on every render.
+    const [scale] = useState(() => new Animated.Value(1));
+    const metrics = SIZES[size];
+    const animate = !reducedMotion && !hasPopup && !disabled;
+    const background = tone === "primary"
+        ? theme.color.accent
+        : tone === "secondary"
+            ? theme.color.secondary
+            : tone === "neutral"
+                ? theme.color.surfaceRaised
+                : tone === "danger"
+                    ? theme.color.danger
+                    : "transparent";
+    const foreground = tone === "primary"
+        ? theme.color.onAccent
+        : tone === "secondary"
+            ? theme.color.onSecondary
+            : tone === "danger"
+                ? theme.color.onDanger
+                : tone === "ghost"
+                    ? theme.color.muted
+                    : theme.color.text;
+    const springTo = (value) => {
+        if (!animate)
+            return;
+        Animated.spring(scale, { toValue: value, ...SPRING }).start();
+    };
+    return (_jsx(Animated.View, { style: [{ transform: [{ scale }] }, style], children: _jsxs(Pressable, { accessibilityRole: "button", accessibilityState: { disabled: !!disabled }, disabled: disabled, onPressIn: () => springTo(PRESSED_SCALE), onPressOut: () => springTo(1), style: {
+                minHeight: metrics.minHeight,
+                paddingHorizontal: metrics.paddingH,
+                flexDirection: "row",
+                alignItems: "center",
+                justifyContent: "center",
+                gap: theme.space(2),
+                borderRadius: theme.radius.full,
+                backgroundColor: background,
+                opacity: disabled ? 0.5 : 1,
+            }, ...rest, children: [startIcon, typeof children === "string" ? (_jsx(Text, { numberOfLines: 1, style: {
+                        color: foreground,
+                        fontSize: metrics.fontSize,
+                        fontWeight: "600",
+                    }, children: children })) : (_jsx(View, { style: { flexDirection: "row", alignItems: "center" }, children: children })), endIcon] }) }));
+}

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+import { type StyleProp, type TextStyle, type ViewStyle } from "react-native";
+export interface CardProps {
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function Card({ children, style }: CardProps): import("react").JSX.Element;
+export interface CardHeaderProps {
+    title?: ReactNode;
+    subtitle?: ReactNode;
+    /** Sits at the end of the header row: an avatar, a menu, a badge. */
+    action?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+    titleStyle?: StyleProp<TextStyle>;
+}
+export declare function CardHeader({ title, subtitle, action, style, titleStyle }: CardHeaderProps): import("react").JSX.Element;
+export declare function CardContent({ children, style }: CardProps): import("react").JSX.Element;
+export declare function CardActions({ children, style }: CardProps): import("react").JSX.Element;
+//# sourceMappingURL=Card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAc,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAI1F,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,IAAI,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,SAAS,+BAkBlD;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,qEAAqE;IACrE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACnC;AAED,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,eAAe,+BAkCzF;AAED,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,SAAS,+BAOzD;AAED,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,SAAS,+BAkBzD"}

package/dist/components/Card/Card.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text, View } from "react-native";
+import { useTheme } from "../../theme/index.js";
+export function Card({ children, style }) {
+    const theme = useTheme();
+    return (_jsx(View, { style: [
+            {
+                backgroundColor: theme.color.surface,
+                borderRadius: theme.radius.lg,
+                borderWidth: 1,
+                borderColor: theme.color.border,
+                overflow: "hidden",
+            },
+            style,
+        ], children: children }));
+}
+export function CardHeader({ title, subtitle, action, style, titleStyle }) {
+    const theme = useTheme();
+    return (_jsxs(View, { style: [
+            {
+                flexDirection: "row",
+                alignItems: "center",
+                gap: theme.space(3),
+                padding: theme.space(4),
+            },
+            style,
+        ], children: [_jsxs(View, { style: { flex: 1, gap: theme.space(0.5) }, children: [typeof title === "string" ? (_jsx(Text, { accessibilityRole: "header", style: [{ color: theme.color.text, fontSize: 16, fontWeight: "600" }, titleStyle], children: title })) : (title), typeof subtitle === "string" ? (_jsx(Text, { style: { color: theme.color.muted, fontSize: 13 }, children: subtitle })) : (subtitle)] }), action] }));
+}
+export function CardContent({ children, style }) {
+    const theme = useTheme();
+    return (_jsx(View, { style: [{ paddingHorizontal: theme.space(4), paddingBottom: theme.space(4), gap: theme.space(2) }, style], children: children }));
+}
+export function CardActions({ children, style }) {
+    const theme = useTheme();
+    return (_jsx(View, { style: [
+            {
+                flexDirection: "row",
+                justifyContent: "flex-end",
+                gap: theme.space(2),
+                paddingHorizontal: theme.space(4),
+                paddingBottom: theme.space(4),
+            },
+            style,
+        ], children: children }));
+}

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,24 @@
+import { type StyleProp, type ViewStyle } from "react-native";
+export type CheckboxTone = "primary" | "secondary" | "neutral" | "danger";
+export interface CheckboxProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    /** Base UI's third state, for a parent of partly-checked children. */
+    indeterminate?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    tone?: CheckboxTone;
+    style?: StyleProp<ViewStyle>;
+    accessibilityLabel?: string;
+}
+/**
+ * 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 declare function Checkbox({ checked: controlled, defaultChecked, indeterminate, onCheckedChange, disabled, tone, style, accessibilityLabel, }: CheckboxProps): import("react").JSX.Element;
+//# sourceMappingURL=Checkbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,EAAmB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAI/E,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE1E,MAAM,WAAW,aAAa;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,sEAAsE;IACtE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAID;;;;;;;;GAQG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EAAE,UAAU,EACnB,cAAsB,EACtB,aAAqB,EACrB,eAAe,EACf,QAAQ,EACR,IAAgB,EAChB,KAAK,EACL,kBAAkB,GACnB,EAAE,aAAa,+BA2Cf"}