@gryt/ui-native 0.1.0

package/dist/overlay/placePopup.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Where to put a popup relative to the thing that opened it.
+ *
+ * Deliberately free of React and React Native, so it can be tested as
+ * arithmetic. React Native's own source is Flow-typed and cannot be parsed by
+ * the test runner, so anything importing it is untestable here; keeping the
+ * geometry separate is what makes this the part with tests on it.
+ *
+ * This is also the piece with no React Native equivalent. On the web, Base UI
+ * hands positioning to Floating UI: it watches the reference element, flips the
+ * popup when it would overflow, shifts it to stay on screen, and keeps doing all
+ * of that while the page scrolls. None of that exists here, so this places the
+ * popup once against a measurement taken when it opened.
+ *
+ * It flips and clamps, which is the useful part of Floating UI. It does not
+ * follow: if the trigger moves while the popup is open, because a list scrolled
+ * underneath it, the popup stays where it was. Both are in the parity
+ * exceptions table.
+ */
+export type Side = "top" | "bottom" | "left" | "right";
+export type Align = "start" | "center" | "end";
+export interface AnchorRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface PopupPlacement {
+    top: number;
+    left: number;
+    /** The side actually used, which is not the one asked for if it had to flip. */
+    side: Side;
+    /** How much room the popup has, so it can cap its own height. */
+    maxHeight: number;
+}
+export interface AnchorOptions {
+    side?: Side;
+    align?: Align;
+    /** Gap between trigger and popup, in points. Base UI calls this sideOffset. */
+    sideOffset?: number;
+    /** Keep this much clear of the screen edge. */
+    screenPadding?: number;
+}
+export declare function placePopup(anchor: AnchorRect, popup: {
+    width: number;
+    height: number;
+}, screen: {
+    width: number;
+    height: number;
+}, { side, align, sideOffset, screenPadding }?: AnchorOptions): PopupPlacement;
+//# sourceMappingURL=placePopup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"placePopup.d.ts","sourceRoot":"","sources":["../../src/overlay/placePopup.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,MAAM,MAAM,IAAI,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AACvD,MAAM,MAAM,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAE/C,MAAM,WAAW,UAAU;IACzB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,gFAAgF;IAChF,IAAI,EAAE,IAAI,CAAC;IACX,iEAAiE;IACjE,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,+EAA+E;IAC/E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,+CAA+C;IAC/C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,UAAU,CACxB,MAAM,EAAE,UAAU,EAClB,KAAK,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,EACxC,MAAM,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,EACzC,EAAE,IAAe,EAAE,KAAgB,EAAE,UAAc,EAAE,aAAiB,EAAE,GAAE,aAAkB,GAC3F,cAAc,CAmDhB"}

package/dist/overlay/placePopup.js

@@ -0,0 +1,63 @@
+/**
+ * Where to put a popup relative to the thing that opened it.
+ *
+ * Deliberately free of React and React Native, so it can be tested as
+ * arithmetic. React Native's own source is Flow-typed and cannot be parsed by
+ * the test runner, so anything importing it is untestable here; keeping the
+ * geometry separate is what makes this the part with tests on it.
+ *
+ * This is also the piece with no React Native equivalent. On the web, Base UI
+ * hands positioning to Floating UI: it watches the reference element, flips the
+ * popup when it would overflow, shifts it to stay on screen, and keeps doing all
+ * of that while the page scrolls. None of that exists here, so this places the
+ * popup once against a measurement taken when it opened.
+ *
+ * It flips and clamps, which is the useful part of Floating UI. It does not
+ * follow: if the trigger moves while the popup is open, because a list scrolled
+ * underneath it, the popup stays where it was. Both are in the parity
+ * exceptions table.
+ */
+export function placePopup(anchor, popup, screen, { side = "bottom", align = "center", sideOffset = 8, screenPadding = 8 } = {}) {
+    const spaceBelow = screen.height - (anchor.y + anchor.height) - sideOffset - screenPadding;
+    const spaceAbove = anchor.y - sideOffset - screenPadding;
+    // Flip only when the preferred side cannot hold it and the other side can do
+    // better. Flipping to something equally cramped just moves the problem.
+    let resolved = side;
+    if (side === "bottom" && popup.height > spaceBelow && spaceAbove > spaceBelow) {
+        resolved = "top";
+    }
+    else if (side === "top" && popup.height > spaceAbove && spaceBelow > spaceAbove) {
+        resolved = "bottom";
+    }
+    const maxHeight = Math.max(0, resolved === "top" ? spaceAbove : resolved === "bottom" ? spaceBelow : screen.height - screenPadding * 2);
+    let top;
+    if (resolved === "top") {
+        top = anchor.y - Math.min(popup.height, maxHeight) - sideOffset;
+    }
+    else if (resolved === "bottom") {
+        top = anchor.y + anchor.height + sideOffset;
+    }
+    else {
+        top = anchor.y + anchor.height / 2 - popup.height / 2;
+    }
+    let left;
+    if (resolved === "left") {
+        left = anchor.x - popup.width - sideOffset;
+    }
+    else if (resolved === "right") {
+        left = anchor.x + anchor.width + sideOffset;
+    }
+    else if (align === "start") {
+        left = anchor.x;
+    }
+    else if (align === "end") {
+        left = anchor.x + anchor.width - popup.width;
+    }
+    else {
+        left = anchor.x + anchor.width / 2 - popup.width / 2;
+    }
+    // Clamp last, so a popup wider than its anchor still stays on screen.
+    left = Math.min(Math.max(screenPadding, left), Math.max(screenPadding, screen.width - popup.width - screenPadding));
+    top = Math.min(Math.max(screenPadding, top), Math.max(screenPadding, screen.height - Math.min(popup.height, maxHeight) - screenPadding));
+    return { top, left, side: resolved, maxHeight };
+}

package/dist/overlay/useAnchoredPosition.d.ts

@@ -0,0 +1,18 @@
+import { type View } from "react-native";
+import type { AnchorRect } from "./placePopup.js";
+/**
+ * Measures a trigger in window coordinates.
+ *
+ * `measureInWindow` is asynchronous and its callback can fire after the popup
+ * has closed again, so a stale result is dropped rather than applied.
+ */
+export declare function useAnchorMeasure(): {
+    anchor: AnchorRect | null;
+    measure: (node: View | null) => void;
+    clear: () => void;
+};
+export declare function screenSize(): {
+    width: number;
+    height: number;
+};
+//# sourceMappingURL=useAnchoredPosition.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useAnchoredPosition.d.ts","sourceRoot":"","sources":["../../src/overlay/useAnchoredPosition.ts"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,IAAI,EAAE,MAAM,cAAc,CAAC;AAErD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C;;;;;GAKG;AACH,wBAAgB,gBAAgB;;oBAGK,IAAI,GAAG,IAAI;;EAW/C;AAED,wBAAgB,UAAU;;;EAGzB"}

package/dist/overlay/useAnchoredPosition.js

@@ -0,0 +1,25 @@
+import { useCallback, useState } from "react";
+import { Dimensions } from "react-native";
+/**
+ * Measures a trigger in window coordinates.
+ *
+ * `measureInWindow` is asynchronous and its callback can fire after the popup
+ * has closed again, so a stale result is dropped rather than applied.
+ */
+export function useAnchorMeasure() {
+    const [anchor, setAnchor] = useState(null);
+    const measure = useCallback((node) => {
+        if (!node) {
+            setAnchor(null);
+            return;
+        }
+        node.measureInWindow((x, y, width, height) => {
+            setAnchor({ x, y, width, height });
+        });
+    }, []);
+    return { anchor, measure, clear: useCallback(() => setAnchor(null), []) };
+}
+export function screenSize() {
+    const { width, height } = Dimensions.get("window");
+    return { width, height };
+}

package/dist/overlay/useOpenState.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Controlled or uncontrolled open state, matching Base UI's props.
+ *
+ * `open` with `onOpenChange` drives it from outside; `defaultOpen` alone lets it
+ * manage itself. Base UI takes both and so does everything here, so a call site
+ * moving between the two libraries does not change shape.
+ */
+export interface OpenStateProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+export declare function useOpenState({ open: controlled, defaultOpen, onOpenChange, }: OpenStateProps): {
+    open: boolean;
+    setOpen: (next: boolean) => void;
+};
+//# sourceMappingURL=useOpenState.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useOpenState.d.ts","sourceRoot":"","sources":["../../src/overlay/useOpenState.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAED,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EAAE,UAAU,EAChB,WAAmB,EACnB,YAAY,GACb,EAAE,cAAc;;oBAMN,OAAO;EAQjB"}

package/dist/overlay/useOpenState.js

@@ -0,0 +1,12 @@
+import { useCallback, useState } from "react";
+export function useOpenState({ open: controlled, defaultOpen = false, onOpenChange, }) {
+    const [uncontrolled, setUncontrolled] = useState(defaultOpen);
+    const isControlled = controlled !== undefined;
+    const open = isControlled ? controlled : uncontrolled;
+    const setOpen = useCallback((next) => {
+        if (!isControlled)
+            setUncontrolled(next);
+        onOpenChange?.(next);
+    }, [isControlled, onOpenChange]);
+    return { open, setOpen };
+}

package/dist/theme/ThemeProvider.d.ts

@@ -0,0 +1,17 @@
+import { type ReactNode } from "react";
+import { type GrytAppearance, type NativeThemeOptions } from "./createNativeTheme.js";
+export interface GrytThemeProviderProps {
+    appearance?: GrytAppearance;
+    color?: NativeThemeOptions["color"];
+    radius?: NativeThemeOptions["radius"];
+    /**
+     * Follow the OS setting when `appearance` is not given.
+     *
+     * The web equivalent is a `prefers-color-scheme` media query, which the
+     * client already honours.
+     */
+    followSystemAppearance?: boolean;
+    children?: ReactNode;
+}
+export declare function GrytThemeProvider({ appearance, color, radius, followSystemAppearance, children, }: GrytThemeProviderProps): import("react").JSX.Element;
+//# sourceMappingURL=ThemeProvider.d.ts.map

package/dist/theme/ThemeProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGhD,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,kBAAkB,EACxB,MAAM,qBAAqB,CAAC;AAG7B,MAAM,WAAW,sBAAsB;IACrC,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,KAAK,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACpC,MAAM,CAAC,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACtC;;;;;OAKG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,UAAU,EACV,KAAK,EACL,MAAM,EACN,sBAA8B,EAC9B,QAAQ,GACT,EAAE,sBAAsB,+BAgBxB"}

package/dist/theme/ThemeProvider.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useColorScheme } from "react-native";
+import { createNativeTheme, } from "./createNativeTheme.js";
+import { ThemeContext } from "./themeContext.js";
+export function GrytThemeProvider({ appearance, color, radius, followSystemAppearance = false, children, }) {
+    const systemScheme = useColorScheme();
+    // Named props rather than a spread options object, so the dependencies are
+    // the actual inputs. Spreading meant either a stale theme or rebuilding every
+    // ramp on every render, and building a theme is real colour maths.
+    const theme = useMemo(() => {
+        const resolved = appearance ??
+            (followSystemAppearance && systemScheme === "light" ? "light" : undefined);
+        return createNativeTheme({ appearance: resolved, color, radius });
+    }, [appearance, color, radius, followSystemAppearance, systemScheme]);
+    return (_jsx(ThemeContext.Provider, { value: theme, children: children }));
+}

package/dist/theme/createNativeTheme.d.ts

@@ -0,0 +1,82 @@
+import { grytTokens } from "@gryt/ui/theme";
+/**
+ * The same theme, without CSS.
+ *
+ * `createGrytTheme` in `@gryt/ui` returns `CSSProperties` — a map of
+ * `--gryt-accent-9` style custom properties. React Native has no custom
+ * properties and no cascade, so it cannot consume that at all.
+ *
+ * What it can consume is the maths underneath. `neutralScale`, `hueScale` and
+ * `alphaScale` are exported from `@gryt/ui/theme` for exactly this, so the two
+ * renderers compute their ramps from one implementation of the OKLab
+ * conversions rather than two. A copy here would drift the moment somebody
+ * tunes a curve on the web.
+ *
+ * Same inputs as `createGrytTheme`, so a theme a person built in the web client
+ * — and which travels as an encoded document — produces the same colours here.
+ */
+export type GrytAppearance = "dark" | "light";
+export interface NativeThemeOptions {
+    color?: Partial<Record<keyof typeof grytTokens.color, string>>;
+    radius?: Partial<Record<keyof typeof grytTokens.radius, number>>;
+    appearance?: GrytAppearance;
+}
+/** Twelve steps, the same shape `@gryt/ui` uses. Index 0 is the page. */
+export type Ramp = readonly string[];
+export interface NativeTheme {
+    appearance: GrytAppearance;
+    /** The semantic colours, resolved. What most components reach for. */
+    color: {
+        bg: string;
+        surface: string;
+        surfaceRaised: string;
+        surfaceHover: string;
+        border: string;
+        text: string;
+        muted: string;
+        accent: string;
+        accentLight: string;
+        secondary: string;
+        secondaryLight: string;
+        success: string;
+        danger: string;
+        dangerLight: string;
+        warning: string;
+        onAccent: string;
+        onSecondary: string;
+        onDanger: string;
+    };
+    /** The full ramps, for anything that needs a step rather than a role. */
+    scales: {
+        neutral: Ramp;
+        accent: Ramp;
+        secondary: Ramp;
+        success: Ramp;
+        danger: Ramp;
+        warning: Ramp;
+    };
+    /**
+     * Translucent neutral and accent, already composited over the background.
+     *
+     * The web gets these as real alpha. React Native's shadow and overlay
+     * handling is inconsistent enough across platforms that a pre-composited
+     * opaque colour is the predictable choice, which is what `alphaScale` returns.
+     */
+    alpha: {
+        neutral: Ramp;
+        accent: Ramp;
+    };
+    radius: {
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+        full: number;
+    };
+    /** Multiples of 4, matching the Tailwind spacing the web components use. */
+    space: (steps: number) => number;
+}
+export declare function createNativeTheme(options?: NativeThemeOptions): NativeTheme;
+export declare const darkTheme: NativeTheme;
+export declare const lightTheme: NativeTheme;
+//# sourceMappingURL=createNativeTheme.d.ts.map

package/dist/theme/createNativeTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createNativeTheme.d.ts","sourceRoot":"","sources":["../../src/theme/createNativeTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EAKX,MAAM,gBAAgB,CAAC;AAExB;;;;;;;;;;;;;;;GAeG;AAEH,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,OAAO,CAAC;AAE9C,MAAM,WAAW,kBAAkB;IACjC,KAAK,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,OAAO,UAAU,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC;IAC/D,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,OAAO,UAAU,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IACjE,UAAU,CAAC,EAAE,cAAc,CAAC;CAC7B;AAED,yEAAyE;AACzE,MAAM,MAAM,IAAI,GAAG,SAAS,MAAM,EAAE,CAAC;AAErC,MAAM,WAAW,WAAW;IAC1B,UAAU,EAAE,cAAc,CAAC;IAC3B,sEAAsE;IACtE,KAAK,EAAE;QACL,EAAE,EAAE,MAAM,CAAC;QACX,OAAO,EAAE,MAAM,CAAC;QAChB,aAAa,EAAE,MAAM,CAAC;QACtB,YAAY,EAAE,MAAM,CAAC;QACrB,MAAM,EAAE,MAAM,CAAC;QACf,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;QACf,WAAW,EAAE,MAAM,CAAC;QACpB,SAAS,EAAE,MAAM,CAAC;QAClB,cAAc,EAAE,MAAM,CAAC;QACvB,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,EAAE,MAAM,CAAC;QACf,WAAW,EAAE,MAAM,CAAC;QACpB,OAAO,EAAE,MAAM,CAAC;QAChB,QAAQ,EAAE,MAAM,CAAC;QACjB,WAAW,EAAE,MAAM,CAAC;QACpB,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,yEAAyE;IACzE,MAAM,EAAE;QACN,OAAO,EAAE,IAAI,CAAC;QACd,MAAM,EAAE,IAAI,CAAC;QACb,SAAS,EAAE,IAAI,CAAC;QAChB,OAAO,EAAE,IAAI,CAAC;QACd,MAAM,EAAE,IAAI,CAAC;QACb,OAAO,EAAE,IAAI,CAAC;KACf,CAAC;IACF;;;;;;OAMG;IACH,KAAK,EAAE;QACL,OAAO,EAAE,IAAI,CAAC;QACd,MAAM,EAAE,IAAI,CAAC;KACd,CAAC;IACF,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACzE,4EAA4E;IAC5E,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CAClC;AAID,wBAAgB,iBAAiB,CAAC,OAAO,GAAE,kBAAuB,GAAG,WAAW,CAkE/E;AAED,eAAO,MAAM,SAAS,aAAsB,CAAC;AAC7C,eAAO,MAAM,UAAU,aAA6C,CAAC"}

package/dist/theme/createNativeTheme.js

@@ -0,0 +1,65 @@
+import { alphaScale, grytLightTokens, grytTokens, hueScale, hueScaleLight, neutralScale, neutralScaleLight, } from "@gryt/ui/theme";
+const SPACE_UNIT = 4;
+export function createNativeTheme(options = {}) {
+    const light = options.appearance === "light";
+    const color = {
+        ...grytTokens.color,
+        ...(light
+            ? {
+                bg: grytLightTokens.bg,
+                surface: grytLightTokens.surface,
+                surfaceRaised: grytLightTokens.surfaceRaised,
+                border: grytLightTokens.border,
+                muted: grytLightTokens.muted,
+                text: grytLightTokens.text,
+            }
+            : {}),
+        ...options.color,
+    };
+    const neutral = light
+        ? neutralScaleLight({
+            bg: color.bg,
+            surface: color.surface,
+            surfaceRaised: color.surfaceRaised,
+            border: color.border,
+            muted: color.muted,
+            text: color.text,
+        })
+        : neutralScale({
+            bg: color.bg,
+            surface: color.surface,
+            surfaceRaised: color.surfaceRaised,
+            border: color.border,
+            muted: color.muted,
+            text: color.text,
+        });
+    const ramp = (solid, solidHover) => light ? hueScaleLight(solid) : hueScale(solid, solidHover);
+    const scales = {
+        neutral,
+        accent: ramp(color.accent, color.accentLight),
+        secondary: ramp(color.secondary, color.secondaryLight),
+        success: ramp(color.success, color.success),
+        danger: ramp(color.danger, color.dangerLight),
+        warning: ramp(color.warning, color.warning),
+    };
+    return {
+        appearance: light ? "light" : "dark",
+        color: {
+            ...color,
+            // `.light` never set a hover fill on the web either, and a neutral
+            // component hovering to the dark slate on a white panel was the bug that
+            // came from it. Step 4 is "component background, hovered", so take it
+            // from the ramp rather than writing a second literal.
+            surfaceHover: light ? scales.neutral[3] : color.surfaceHover,
+        },
+        scales,
+        alpha: {
+            neutral: alphaScale(scales.neutral, color.bg),
+            accent: alphaScale(scales.accent, color.bg),
+        },
+        radius: { ...grytTokens.radius, ...options.radius },
+        space: (steps) => steps * SPACE_UNIT,
+    };
+}
+export const darkTheme = createNativeTheme();
+export const lightTheme = createNativeTheme({ appearance: "light" });

package/dist/theme/index.d.ts

@@ -0,0 +1,6 @@
+export { createNativeTheme, darkTheme, lightTheme, type GrytAppearance, type NativeTheme, type NativeThemeOptions, type Ramp, } from "./createNativeTheme.js";
+export { GrytThemeProvider, type GrytThemeProviderProps } from "./ThemeProvider.js";
+export { ThemeContext } from "./themeContext.js";
+export { toneRamp, type ComponentTone } from "./tones.js";
+export { useTheme } from "./useTheme.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/theme/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,SAAS,EACT,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACvB,KAAK,IAAI,GACV,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,iBAAiB,EAAE,KAAK,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AACjF,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,SAAS,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/dist/theme/index.js

@@ -0,0 +1,5 @@
+export { createNativeTheme, darkTheme, lightTheme, } from "./createNativeTheme.js";
+export { GrytThemeProvider } from "./ThemeProvider.js";
+export { ThemeContext } from "./themeContext.js";
+export { toneRamp } from "./tones.js";
+export { useTheme } from "./useTheme.js";

package/dist/theme/themeContext.d.ts

@@ -0,0 +1,9 @@
+import { type NativeTheme } from "./createNativeTheme.js";
+/**
+ * Defaults to dark with no provider mounted, matching `@gryt/ui`, which ships
+ * its dark tokens on `:root`. A component rendered outside a provider is
+ * therefore themed rather than blank — the failure mode stays "wrong palette"
+ * instead of "no colours at all".
+ */
+export declare const ThemeContext: import("react").Context<NativeTheme>;
+//# sourceMappingURL=themeContext.d.ts.map

package/dist/theme/themeContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"themeContext.d.ts","sourceRoot":"","sources":["../../src/theme/themeContext.ts"],"names":[],"mappings":"AAEA,OAAO,EAAa,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElE;;;;;GAKG;AACH,eAAO,MAAM,YAAY,sCAAwC,CAAC"}

package/dist/theme/themeContext.js

@@ -0,0 +1,9 @@
+import { createContext } from "react";
+import { darkTheme } from "./createNativeTheme.js";
+/**
+ * Defaults to dark with no provider mounted, matching `@gryt/ui`, which ships
+ * its dark tokens on `:root`. A component rendered outside a provider is
+ * therefore themed rather than blank — the failure mode stays "wrong palette"
+ * instead of "no colours at all".
+ */
+export const ThemeContext = createContext(darkTheme);

package/dist/theme/tones.d.ts

@@ -0,0 +1,15 @@
+import type { NativeTheme, Ramp } from "./createNativeTheme.js";
+/**
+ * Roles to ramps.
+ *
+ * `@gryt/ui` names its component tones by role — primary, secondary, neutral,
+ * danger — while the ramps are named by hue. On the web the mapping is buried in
+ * Tailwind classes, one component at a time: Button says
+ * `primary: "bg-gryt-accent"`, Checkbox says the same thing again.
+ *
+ * Written once here, because four copies of "primary means accent" is how one of
+ * them eventually stops meaning it.
+ */
+export type ComponentTone = "primary" | "secondary" | "neutral" | "danger" | "success" | "warning";
+export declare function toneRamp(theme: NativeTheme, tone: ComponentTone): Ramp;
+//# sourceMappingURL=tones.d.ts.map

package/dist/theme/tones.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tones.d.ts","sourceRoot":"","sources":["../../src/theme/tones.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAE7D;;;;;;;;;;GAUG;AACH,MAAM,MAAM,aAAa,GACrB,SAAS,GACT,WAAW,GACX,SAAS,GACT,QAAQ,GACR,SAAS,GACT,SAAS,CAAC;AAWd,wBAAgB,QAAQ,CAAC,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,aAAa,GAAG,IAAI,CAEtE"}

package/dist/theme/tones.js

@@ -0,0 +1,11 @@
+const TONE_TO_RAMP = {
+    primary: "accent",
+    secondary: "secondary",
+    neutral: "neutral",
+    danger: "danger",
+    success: "success",
+    warning: "warning",
+};
+export function toneRamp(theme, tone) {
+    return theme.scales[TONE_TO_RAMP[tone]];
+}

package/dist/theme/useTheme.d.ts

@@ -0,0 +1,8 @@
+import type { NativeTheme } from "./createNativeTheme.js";
+/**
+ * The web reads tokens off the cascade, so a component never asks for a theme —
+ * it inherits one. React Native has no cascade, so components ask, and this is
+ * what they ask.
+ */
+export declare function useTheme(): NativeTheme;
+//# sourceMappingURL=useTheme.d.ts.map

package/dist/theme/useTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../src/theme/useTheme.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAEvD;;;;GAIG;AACH,wBAAgB,QAAQ,IAAI,WAAW,CAEtC"}

package/dist/theme/useTheme.js

@@ -0,0 +1,10 @@
+import { useContext } from "react";
+import { ThemeContext } from "./themeContext.js";
+/**
+ * The web reads tokens off the cascade, so a component never asks for a theme —
+ * it inherits one. React Native has no cascade, so components ask, and this is
+ * what they ask.
+ */
+export function useTheme() {
+    return useContext(ThemeContext);
+}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@gryt/ui-native",
+  "version": "0.1.0",
+  "type": "module",
+  "license": "MIT",
+  "description": "Gryt's design system on React Native. Same tokens as @gryt/ui, a different renderer.",
+  "homepage": "https://gryt.chat",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Gryt-chat/ui.git",
+    "directory": "packages/ui-native"
+  },
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json && node scripts/add-esm-extensions.mjs",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "vitest run",
+    "prepublishOnly": "bun run typecheck && bun run build"
+  },
+  "peerDependencies": {
+    "react": ">=18.3.0 || >=19.0.0",
+    "react-native": ">=0.76.0"
+  },
+  "dependencies": {
+    "@gryt/ui": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "react": "^19.0.0",
+    "react-native": "^0.76.0",
+    "vitest": "^3.0.0"
+  }
+}