@isoline-ui/react-native 0.0.0-stage → 0.1.0-alpha.3

package/dist/preset-tokens.d.ts

@@ -0,0 +1,264 @@
+export declare const presetTokens: {
+    readonly violet: {
+        readonly light: {
+            readonly '--background': "268 30% 99%";
+            readonly '--foreground': "268 10% 11%";
+            readonly '--surface': "268 30% 99%";
+            readonly '--surface-variant': "268 15% 91%";
+            readonly '--on-surface': "268 10% 11%";
+            readonly '--on-surface-variant': "268 8% 32%";
+            readonly '--surface-container-lowest': "0 0% 100%";
+            readonly '--surface-container-low': "268 30% 97%";
+            readonly '--surface-container': "268 24% 95%";
+            readonly '--surface-container-high': "268 20% 92%";
+            readonly '--surface-container-highest': "268 18% 90%";
+            readonly '--card': "268 30% 97%";
+            readonly '--card-foreground': "268 10% 11%";
+            readonly '--popover': "268 20% 93%";
+            readonly '--popover-foreground': "268 10% 11%";
+            readonly '--primary': "268 48% 46%";
+            readonly '--primary-foreground': "0 0% 100%";
+            readonly '--primary-container': "268 80% 92%";
+            readonly '--on-primary-container': "268 60% 18%";
+            readonly '--secondary-container': "268 30% 89%";
+            readonly '--on-secondary-container': "268 25% 14%";
+            readonly '--tertiary': "22 75% 42%";
+            readonly '--on-tertiary': "0 0% 100%";
+            readonly '--tertiary-container': "22 95% 90%";
+            readonly '--on-tertiary-container': "22 70% 15%";
+            readonly '--destructive': "5 75% 45%";
+            readonly '--destructive-foreground': "0 0% 100%";
+            readonly '--error-container': "5 90% 92%";
+            readonly '--on-error-container': "5 60% 20%";
+            readonly '--muted': "268 15% 91%";
+            readonly '--muted-foreground': "268 8% 32%";
+            readonly '--accent': "268 35% 90%";
+            readonly '--accent-foreground': "268 60% 18%";
+            readonly '--outline': "268 6% 48%";
+            readonly '--outline-variant': "268 12% 82%";
+            readonly '--border': "268 12% 84%";
+            readonly '--input': "268 6% 55%";
+            readonly '--ring': "268 48% 46%";
+            readonly '--inverse-surface': "268 10% 18%";
+            readonly '--inverse-on-surface': "268 20% 96%";
+            readonly '--inverse-primary': "268 80% 82%";
+            readonly '--success': "145 55% 32%";
+        };
+        readonly dark: {
+            readonly '--background': "268 10% 11%";
+            readonly '--foreground': "268 12% 92%";
+            readonly '--surface': "268 10% 11%";
+            readonly '--surface-variant': "268 10% 25%";
+            readonly '--on-surface': "268 12% 92%";
+            readonly '--on-surface-variant': "268 10% 78%";
+            readonly '--surface-container-lowest': "268 12% 6%";
+            readonly '--surface-container-low': "268 10% 8%";
+            readonly '--surface-container': "268 10% 13%";
+            readonly '--surface-container-high': "268 10% 17%";
+            readonly '--surface-container-highest': "268 10% 22%";
+            readonly '--card': "268 10% 13%";
+            readonly '--card-foreground': "268 12% 92%";
+            readonly '--popover': "268 10% 17%";
+            readonly '--popover-foreground': "268 12% 92%";
+            readonly '--primary': "268 75% 82%";
+            readonly '--primary-foreground': "268 45% 22%";
+            readonly '--primary-container': "268 35% 32%";
+            readonly '--on-primary-container': "268 80% 92%";
+            readonly '--secondary-container': "268 18% 28%";
+            readonly '--on-secondary-container': "268 30% 89%";
+            readonly '--tertiary': "22 90% 75%";
+            readonly '--on-tertiary': "22 70% 18%";
+            readonly '--tertiary-container': "22 55% 30%";
+            readonly '--on-tertiary-container': "22 95% 90%";
+            readonly '--destructive': "5 80% 75%";
+            readonly '--destructive-foreground': "5 55% 22%";
+            readonly '--error-container': "5 55% 32%";
+            readonly '--on-error-container': "5 90% 92%";
+            readonly '--muted': "268 10% 25%";
+            readonly '--muted-foreground': "268 10% 78%";
+            readonly '--accent': "268 12% 22%";
+            readonly '--accent-foreground': "268 60% 90%";
+            readonly '--outline': "268 6% 54%";
+            readonly '--outline-variant': "268 8% 30%";
+            readonly '--border': "268 8% 22%";
+            readonly '--input': "268 6% 44%";
+            readonly '--ring': "268 75% 82%";
+            readonly '--inverse-surface': "268 12% 92%";
+            readonly '--inverse-on-surface': "268 10% 16%";
+            readonly '--inverse-primary': "268 48% 46%";
+            readonly '--success': "145 45% 65%";
+        };
+    };
+    readonly teal: {
+        readonly light: {
+            readonly '--background': "173 15% 99%";
+            readonly '--foreground': "173 8% 10%";
+            readonly '--surface': "173 15% 99%";
+            readonly '--surface-variant': "173 12% 91%";
+            readonly '--on-surface': "173 8% 10%";
+            readonly '--on-surface-variant': "173 6% 32%";
+            readonly '--surface-container-lowest': "0 0% 100%";
+            readonly '--surface-container-low': "173 20% 97%";
+            readonly '--surface-container': "173 18% 95%";
+            readonly '--surface-container-high': "173 16% 92%";
+            readonly '--surface-container-highest': "173 14% 90%";
+            readonly '--card': "173 20% 97%";
+            readonly '--card-foreground': "173 8% 10%";
+            readonly '--popover': "173 16% 92%";
+            readonly '--popover-foreground': "173 8% 10%";
+            readonly '--primary': "173 60% 28%";
+            readonly '--primary-foreground': "0 0% 100%";
+            readonly '--primary-container': "173 55% 88%";
+            readonly '--on-primary-container': "173 70% 10%";
+            readonly '--secondary-container': "173 25% 88%";
+            readonly '--on-secondary-container': "173 25% 12%";
+            readonly '--tertiary': "243 45% 48%";
+            readonly '--on-tertiary': "0 0% 100%";
+            readonly '--tertiary-container': "243 65% 91%";
+            readonly '--on-tertiary-container': "243 50% 16%";
+            readonly '--destructive': "5 75% 45%";
+            readonly '--destructive-foreground': "0 0% 100%";
+            readonly '--error-container': "5 90% 92%";
+            readonly '--on-error-container': "5 60% 20%";
+            readonly '--muted': "173 12% 91%";
+            readonly '--muted-foreground': "173 6% 32%";
+            readonly '--accent': "173 30% 89%";
+            readonly '--accent-foreground': "173 70% 12%";
+            readonly '--outline': "173 6% 48%";
+            readonly '--outline-variant': "173 10% 82%";
+            readonly '--border': "173 10% 82%";
+            readonly '--input': "173 6% 55%";
+            readonly '--ring': "173 60% 28%";
+            readonly '--inverse-surface': "173 10% 18%";
+            readonly '--inverse-on-surface': "173 15% 96%";
+            readonly '--inverse-primary': "173 55% 78%";
+            readonly '--archive': "152 65% 30%";
+            readonly '--snooze': "38 90% 38%";
+        };
+        readonly dark: {
+            readonly '--background': "173 10% 11%";
+            readonly '--foreground': "173 10% 92%";
+            readonly '--surface': "173 10% 11%";
+            readonly '--surface-variant': "173 10% 24%";
+            readonly '--on-surface': "173 10% 92%";
+            readonly '--on-surface-variant': "173 8% 76%";
+            readonly '--surface-container-lowest': "173 12% 6%";
+            readonly '--surface-container-low': "173 10% 8%";
+            readonly '--surface-container': "173 10% 13%";
+            readonly '--surface-container-high': "173 10% 17%";
+            readonly '--surface-container-highest': "173 10% 22%";
+            readonly '--card': "173 10% 13%";
+            readonly '--card-foreground': "173 10% 92%";
+            readonly '--popover': "173 10% 17%";
+            readonly '--popover-foreground': "173 10% 92%";
+            readonly '--primary': "173 50% 72%";
+            readonly '--primary-foreground': "173 65% 14%";
+            readonly '--primary-container': "173 55% 24%";
+            readonly '--on-primary-container': "173 55% 88%";
+            readonly '--secondary-container': "173 20% 28%";
+            readonly '--on-secondary-container': "173 25% 88%";
+            readonly '--tertiary': "243 65% 82%";
+            readonly '--on-tertiary': "243 45% 20%";
+            readonly '--tertiary-container': "243 45% 32%";
+            readonly '--on-tertiary-container': "243 65% 91%";
+            readonly '--destructive': "5 80% 75%";
+            readonly '--destructive-foreground': "5 55% 22%";
+            readonly '--error-container': "5 55% 32%";
+            readonly '--on-error-container': "5 90% 92%";
+            readonly '--muted': "173 10% 24%";
+            readonly '--muted-foreground': "173 8% 76%";
+            readonly '--accent': "173 12% 22%";
+            readonly '--accent-foreground': "173 45% 88%";
+            readonly '--outline': "173 6% 52%";
+            readonly '--outline-variant': "173 8% 30%";
+            readonly '--border': "173 8% 22%";
+            readonly '--input': "173 6% 44%";
+            readonly '--ring': "173 50% 72%";
+            readonly '--inverse-surface': "173 10% 92%";
+            readonly '--inverse-on-surface': "173 10% 16%";
+            readonly '--inverse-primary': "173 60% 30%";
+            readonly '--archive': "152 55% 55%";
+            readonly '--snooze': "38 95% 62%";
+        };
+    };
+    readonly cyan: {
+        readonly light: {
+            readonly '--background': "210 33% 97%";
+            readonly '--foreground': "216 30% 10%";
+            readonly '--surface': "210 33% 97%";
+            readonly '--surface-variant': "210 20% 86%";
+            readonly '--on-surface': "216 30% 10%";
+            readonly '--on-surface-variant': "214 14% 34%";
+            readonly '--surface-container-lowest': "0 0% 100%";
+            readonly '--surface-container-low': "210 30% 94%";
+            readonly '--surface-container': "210 27% 91%";
+            readonly '--surface-container-high': "210 24% 88%";
+            readonly '--surface-container-highest': "210 22% 85%";
+            readonly '--popover': "210 30% 94%";
+            readonly '--popover-foreground': "216 30% 10%";
+            readonly '--primary': "192 92% 30%";
+            readonly '--primary-foreground': "0 0% 100%";
+            readonly '--primary-container': "188 75% 87%";
+            readonly '--on-primary-container': "195 90% 13%";
+            readonly '--secondary-container': "212 40% 87%";
+            readonly '--on-secondary-container': "214 40% 15%";
+            readonly '--tertiary': "22 90% 40%";
+            readonly '--on-tertiary': "0 0% 100%";
+            readonly '--tertiary-container': "28 100% 89%";
+            readonly '--on-tertiary-container': "18 80% 17%";
+            readonly '--destructive': "4 72% 46%";
+            readonly '--destructive-foreground': "0 0% 100%";
+            readonly '--error-container': "4 90% 92%";
+            readonly '--on-error-container': "4 60% 20%";
+            readonly '--muted': "210 20% 86%";
+            readonly '--muted-foreground': "214 14% 34%";
+            readonly '--outline': "213 10% 48%";
+            readonly '--outline-variant': "212 18% 76%";
+            readonly '--border': "212 20% 80%";
+            readonly '--inverse-surface': "216 25% 14%";
+            readonly '--inverse-on-surface': "210 30% 94%";
+            readonly '--inverse-primary': "187 85% 60%";
+            readonly '--success': "150 60% 30%";
+            readonly '--warning': "36 90% 32%";
+        };
+        readonly dark: {
+            readonly '--background': "216 29% 6%";
+            readonly '--foreground': "210 30% 93%";
+            readonly '--surface': "216 29% 6%";
+            readonly '--surface-variant': "214 18% 24%";
+            readonly '--on-surface': "210 30% 93%";
+            readonly '--on-surface-variant': "213 16% 70%";
+            readonly '--surface-container-lowest': "216 30% 4%";
+            readonly '--surface-container-low': "216 25% 10%";
+            readonly '--surface-container': "215 24% 13%";
+            readonly '--surface-container-high': "215 22% 17%";
+            readonly '--surface-container-highest': "214 20% 21%";
+            readonly '--popover': "215 24% 15%";
+            readonly '--popover-foreground': "210 30% 93%";
+            readonly '--primary': "187 85% 55%";
+            readonly '--primary-foreground': "192 90% 9%";
+            readonly '--primary-container': "191 60% 17%";
+            readonly '--on-primary-container': "186 90% 85%";
+            readonly '--secondary-container': "214 30% 19%";
+            readonly '--on-secondary-container': "210 50% 88%";
+            readonly '--tertiary': "25 95% 58%";
+            readonly '--on-tertiary': "20 90% 10%";
+            readonly '--tertiary-container': "22 55% 21%";
+            readonly '--on-tertiary-container': "30 100% 86%";
+            readonly '--destructive': "4 85% 70%";
+            readonly '--destructive-foreground': "4 60% 15%";
+            readonly '--error-container': "4 50% 25%";
+            readonly '--on-error-container': "4 90% 90%";
+            readonly '--muted': "214 18% 24%";
+            readonly '--muted-foreground': "213 16% 70%";
+            readonly '--outline': "213 12% 45%";
+            readonly '--outline-variant': "214 16% 26%";
+            readonly '--border': "214 18% 20%";
+            readonly '--inverse-surface': "210 30% 93%";
+            readonly '--inverse-on-surface': "216 25% 12%";
+            readonly '--inverse-primary': "192 92% 30%";
+            readonly '--success': "150 55% 60%";
+            readonly '--warning': "42 95% 60%";
+        };
+    };
+};

package/dist/provider.d.ts

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { type ViewProps, type StyleProp, type ViewStyle } from 'react-native';
+import { elevation, type IsolineTheme, type ThemeColors, type RippleColors } from './theme.ts';
+import type { MaterialOptions } from './material.ts';
+export type { MaterialOptions } from './material.ts';
+import { type IsolinePlatform } from './platform.ts';
+export type { IsolinePlatform } from './platform.ts';
+export { elevation };
+export interface IsolineSurfaceProps extends ViewProps, MaterialOptions {
+}
+export interface IsolineSurfaceGroupProps extends ViewProps {
+    spacing?: number;
+    gap?: number;
+    animate?: boolean;
+}
+export type { ThemeColors, RippleColors };
+export interface IsolineLabels {
+    close: string;
+    back: string;
+    showPassword: string;
+    hidePassword: string;
+}
+export interface IsolineHaptics {
+    selectionHaptic: () => void;
+    impactHaptic: (style: 'light' | 'medium') => void;
+}
+export interface IsolineProviderProps {
+    /** Browser design preview; native devices always follow their OS. */
+    platform?: IsolinePlatform;
+    /** Supply MaterialSurface from @isoline-ui/native for native/browser glass. */
+    surfaceComponent?: React.ComponentType<IsolineSurfaceProps>;
+    surfaceGroupComponent?: React.ComponentType<IsolineSurfaceGroupProps>;
+    theme: IsolineTheme;
+    surface?: React.ComponentType<IsolineSurfaceProps>;
+    labels?: Partial<IsolineLabels>;
+    haptics?: Partial<IsolineHaptics>;
+    children: React.ReactNode;
+    className?: string;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Supplies component contracts and CSS roles together. Preferences, translation,
+ * font loading and native haptic implementations remain in the consuming app.
+ * A nested provider inherits labels/haptics; its theme is explicit.
+ */
+export declare function IsolineProvider({ theme, platform, surface, surfaceComponent, surfaceGroupComponent, labels, haptics, children, className, style, }: IsolineProviderProps): React.JSX.Element;
+export declare function useIsolineTheme(): IsolineTheme;
+export declare function useThemeColors(): ThemeColors;
+export declare function useRipple(): RippleColors;
+export declare function useLabels(): IsolineLabels;
+export declare function useHaptics(): IsolineHaptics;
+export declare function useIsolinePlatform(): IsolinePlatform;
+/** Surface adapter keeps optional Expo/native dependencies out of the UI package. */
+export declare function Surface({ material, interactive, glassStyle, tintColor, fallbackColor, style, ...props }: IsolineSurfaceProps): React.JSX.Element;
+export declare function useSurface(): typeof Surface;
+/** Reapply CSS variables inside web modal portals, outside the provider DOM node. */
+export declare function ThemeScope({ style, ...props }: ViewProps): React.JSX.Element;
+/** Native adapters can merge neighboring glass; solid/web adapters retain layout. */
+export declare function SurfaceGroup({ spacing, gap, animate, style, ...props }: IsolineSurfaceGroupProps): React.JSX.Element;

package/dist/reduced-motion.d.ts

@@ -0,0 +1,45 @@
+import { ReduceMotion, useReducedMotion } from 'react-native-reanimated';
+/**
+ * Honouring "Remove animations".
+ *
+ * Android's accessibility settings carry a switch that asks the whole system
+ * to stop moving things, and people turn it on for reasons that are not about
+ * taste: vestibular disorders, migraine, motion sickness, or simply not being
+ * able to read a screen that keeps sliding. This app is unusually animated —
+ * springs everywhere, a wave travelling along every progress bar — so ignoring
+ * that switch is not a small omission.
+ *
+ * The rule is not "turn every animation off". It is: **motion goes, meaning
+ * stays.** Three kinds of animation live in this app and they are treated
+ * differently:
+ *
+ * - **Decoration** — a wave travelling along a bar, a toolbar's items
+ *   unfolding one after another, a card springing in. All of this goes.
+ * - **Orientation** — a sheet rising from the edge it belongs to, a row
+ *   sliding out of a list. The movement goes; the end state arrives at once.
+ * - **Information** — the undo bar's countdown, which is the only thing
+ *   telling the reader how long they have left to change their mind. This one
+ *   *must not* go. Turning it off would not remove a distraction, it would
+ *   remove the answer to "how long do I have", and the reader who needs
+ *   reduced motion is not a reader who needs less information.
+ *
+ * Reanimated already defaults its own animations to `ReduceMotion.System`, so
+ * most of the first two categories are handled by the platform once
+ * `ReducedMotionConfig` states the policy. What this module is for is the
+ * third: the places that have to say `ReduceMotion.Never` on purpose, and the
+ * places where the app's own decorative loops have to be stopped by hand
+ * because Reanimated has no way to know they are decorative.
+ */
+export { useReducedMotion };
+/**
+ * For an animation that carries information rather than polish.
+ *
+ * Spelled out at each call site rather than defaulted, so that opting a piece
+ * of motion out of the accessibility setting is a decision somebody made and
+ * can be argued with — there should only ever be a handful.
+ */
+export declare const KEEP_MOTION = ReduceMotion.Never;
+/** For everything else: the platform's answer, whatever it is. */
+export declare const SYSTEM_MOTION = ReduceMotion.System;
+/** Re-exported so a call site needs one import, not two. See `~/lib/motion`. */
+export { staggerFor } from './motion.ts';

package/dist/selection.d.ts

@@ -0,0 +1,2 @@
+/** Clamp and quantize controlled slider values without accumulating decimal drift. */
+export declare function sliderValue(value: number, min?: number, max?: number, step?: number): number;

package/dist/shape.d.ts

@@ -0,0 +1,99 @@
+/**
+ * Material 3 Expressive shape system.
+ *
+ * Expressive treats shape as a *state*, not a constant. A component's corners
+ * change when it is pressed, selected or busy, and the change is animated by a
+ * spatial spring (see `motion.ts`). The two halves of that idea live here:
+ *
+ * - `corner`, the shape scale every radius in the app is drawn from, so a
+ *   round-to-square morph moves between two named steps rather than two magic
+ *   numbers;
+ * - the polygon helpers, which make a *shape sequence* possible — morphing a
+ *   4-sided shape into a 7-sided one, which is how the Expressive loading
+ *   indicator is drawn.
+ *
+ * Everything here is pure maths with no `expo-*` or React imports, so it is
+ * covered by `node --test`. The functions used inside animated props are
+ * marked `'worklet'` so they can run on the UI thread.
+ */
+/** The Expressive corner scale, in dp. `full` is a pill, sized at runtime. */
+export declare const corner: {
+    readonly none: 0;
+    readonly extraSmall: 4;
+    readonly small: 8;
+    readonly medium: 12;
+    readonly large: 16;
+    readonly largeIncreased: 20;
+    readonly extraLarge: 28;
+    readonly extraLargeIncreased: 32;
+    readonly extraExtraLarge: 48;
+};
+/**
+ * Number of points a shape is sampled at.
+ *
+ * Every shape in a morph sequence is resampled to this many points so two
+ * shapes with different vertex counts can be interpolated pairwise. 48 is
+ * enough that a 9-sided polygon still reads as one, and cheap enough to
+ * rebuild every frame on the UI thread.
+ */
+export declare const SHAPE_SAMPLES = 48;
+/**
+ * Samples a regular polygon as a radius per angle.
+ *
+ * Describing a shape radially — rather than as a vertex list — is what makes
+ * shapes with different vertex counts morphable: two radius arrays of equal
+ * length always interpolate, whereas two vertex lists of different lengths do
+ * not. Radii are normalised so the polygon's corners touch the unit circle.
+ */
+export declare function polygonRadii(vertices: number, samples?: number, rotation?: number): number[];
+/**
+ * Rounds a shape's corners by averaging its radii with their neighbours.
+ *
+ * A circular moving average over the radial function is a corner rounding:
+ * the sharp maxima at the vertices flatten while the edges stay put. `amount`
+ * runs 0 (the raw polygon) to 1 (nearly a circle), which is the "roundness"
+ * dimension of the Expressive shape library.
+ */
+export declare function roundRadii(radii: number[], amount: number): number[];
+/** A shape in a morph sequence: how many corners, how round, how turned. */
+export interface ShapeSpec {
+    vertices: number;
+    roundness: number;
+    rotation: number;
+}
+/** Builds the radius array for a shape, ready to be interpolated. */
+export declare function shapeRadii(shape: ShapeSpec, samples?: number): number[];
+/**
+ * A lobed shape: a circle with `lobes` soft bumps around its edge.
+ *
+ * The scalloped members of the Expressive shape library — the 4-leaf clover,
+ * the 9-sided cookie — are not rounded polygons: their edges dip *inward*
+ * between the lobes, which averaging a polygon's radii can never produce. A
+ * cosine around the circle can. `depth` is how far each dip reaches toward the
+ * centre, as a fraction of the radius; the lobes still touch the unit circle.
+ */
+export declare function lobedRadii(lobes: number, depth: number, samples?: number, rotation?: number): number[];
+/**
+ * Blends two sampled shapes. `t` runs 0 (all `from`) to 1 (all `to`).
+ *
+ * Runs on the UI thread once per frame, which is why it takes prebuilt arrays
+ * rather than `ShapeSpec`s — sampling is done once at module load.
+ */
+export declare function blendRadii(from: number[], to: number[], t: number): number[];
+/**
+ * Turns a radius array into a closed SVG path.
+ *
+ * The points are joined with a Catmull-Rom spline converted to cubic Béziers,
+ * so the outline stays smooth as the radii move under it. Drawing straight
+ * segments instead would make a morph visibly snap between sample points.
+ */
+export declare function radiiToPath(radii: number[], center: number, scale: number): string;
+/**
+ * The Expressive wavy progress track.
+ *
+ * The active half of an Expressive progress indicator is a sine wave rather
+ * than a bar: the wave is what distinguishes "working" from "a coloured
+ * rectangle" at a glance, and its amplitude can fall to zero to signal that
+ * the indicator has settled.
+ */
+export declare function wavePath(width: number, height: number, amplitude: number, wavelength: number, phase: number): string;

package/dist/sheet-physics.d.ts

@@ -0,0 +1,37 @@
+/**
+ * The arithmetic of a bottom sheet under a finger, kept apart from the views
+ * so it can be tested under `node --test`. Every function is a worklet: the
+ * pull runs on the UI thread.
+ */
+/** A pull past this share of the panel's height closes it on release. */
+export declare const CLOSE_SHARE = 0.3;
+/** A flick down faster than this (points a second) closes it however short. */
+export declare const CLOSE_VELOCITY = 900;
+/** How far a pull up can lift the panel, at most: it gives, but not much. */
+export declare const LIFT_LIMIT = 24;
+/** Whether letting go `pull` points below the rest, moving at `velocity`, closes the sheet. */
+export declare function releaseCloses(pull: number, velocity: number, height: number): boolean;
+/**
+ * How far the panel rises for a finger `pull` points up: it follows at first
+ * and gives less the further it goes, never more than `limit`. A panel that
+ * does not move at all under an upward pull feels stuck rather than anchored.
+ */
+export declare function rubberBand(pull: number, limit?: number): number;
+/**
+ * How dark the scrim is, 0–1, with the panel `offset` points below its rest:
+ * full while it rests (or is lifted), clear once it is all the way down. The
+ * scrim follows the panel rather than a clock of its own, so the two arrive
+ * and leave together and a pull lightens it as it goes.
+ */
+export declare function scrimShare(offset: number, height: number): number;
+/** Where a scrolling list inside a sheet is, as the sheet's pull needs to know it. */
+export interface SheetScroll {
+    /** How far it is scrolled from its top. */
+    y: number;
+    /** Whether its content is taller than it is, so that it scrolls at all. */
+    scrollable: boolean;
+}
+/** Whether every list in the sheet is at its top, so a pull down moves the sheet. */
+export declare function listsAtTop(scrolls: Record<string, SheetScroll>): boolean;
+/** Whether a list in the sheet scrolls, so a pull up belongs to it and not to the panel. */
+export declare function anyScrollable(scrolls: Record<string, SheetScroll>): boolean;

package/dist/theme.d.ts

@@ -0,0 +1,103 @@
+export type ColorScheme = 'light' | 'dark';
+export type TextVariant = 'default' | 'display' | 'title' | 'heading' | 'subject' | 'body' | 'reader' | 'muted' | 'caption' | 'labelLarge' | 'label' | 'mono' | 'value' | 'valueLarge' | 'meta';
+export interface TypographyRole {
+    fontFamily?: string;
+    fontSize?: number;
+    lineHeight?: number;
+    fontWeight?: '400' | '500' | '600' | '700' | '800';
+    letterSpacing?: number;
+    textTransform?: 'none' | 'uppercase' | 'lowercase' | 'capitalize';
+    includeFontPadding?: boolean;
+}
+export interface IsolineTheme {
+    name: string;
+    scheme: ColorScheme;
+    /** HSL channel triplets, e.g. "268 75% 82%", matching the NativeWind preset. */
+    tokens: Readonly<Record<string, string>>;
+    typography?: Partial<Record<TextVariant, TypographyRole>>;
+    sheetGesture?: 'handle' | 'panel';
+}
+export declare const ROLE_VARIABLES: {
+    readonly primary: "--primary";
+    readonly onPrimary: "--primary-foreground";
+    readonly primaryContainer: "--primary-container";
+    readonly onPrimaryContainer: "--on-primary-container";
+    readonly secondaryContainer: "--secondary-container";
+    readonly onSecondaryContainer: "--on-secondary-container";
+    readonly tertiary: "--tertiary";
+    readonly onTertiary: "--on-tertiary";
+    readonly tertiaryContainer: "--tertiary-container";
+    readonly onTertiaryContainer: "--on-tertiary-container";
+    readonly error: "--destructive";
+    readonly onError: "--destructive-foreground";
+    readonly errorContainer: "--error-container";
+    readonly onErrorContainer: "--on-error-container";
+    readonly surface: "--surface";
+    readonly onSurface: "--on-surface";
+    readonly surfaceVariant: "--surface-variant";
+    readonly onSurfaceVariant: "--on-surface-variant";
+    readonly surfaceContainerLowest: "--surface-container-lowest";
+    readonly surfaceContainerLow: "--surface-container-low";
+    readonly surfaceContainer: "--surface-container";
+    readonly surfaceContainerHigh: "--surface-container-high";
+    readonly surfaceContainerHighest: "--surface-container-highest";
+    readonly outline: "--outline";
+    readonly outlineVariant: "--outline-variant";
+    readonly inverseSurface: "--inverse-surface";
+    readonly inverseOnSurface: "--inverse-on-surface";
+    readonly inversePrimary: "--inverse-primary";
+    readonly success: "--success";
+};
+export type ThemeColors = {
+    -readonly [K in keyof typeof ROLE_VARIABLES]: string;
+};
+export interface RippleColors {
+    onNeutral: string;
+    onTonal: string;
+}
+export declare function resolveThemeColors(theme: IsolineTheme): ThemeColors;
+export declare function rippleColors(scheme: ColorScheme): RippleColors;
+/** Creates a new theme without mutating the reusable preset. */
+export declare function extendTheme(base: IsolineTheme, overrides: {
+    name?: string;
+    tokens?: Readonly<Record<string, string>>;
+    typography?: IsolineTheme['typography'];
+    sheetGesture?: IsolineTheme['sheetGesture'];
+}): IsolineTheme;
+export declare const themes: {
+    readonly violet: {
+        light: IsolineTheme;
+        dark: IsolineTheme;
+    };
+    readonly teal: {
+        light: IsolineTheme;
+        dark: IsolineTheme;
+    };
+    readonly cyan: {
+        light: IsolineTheme;
+        dark: IsolineTheme;
+    };
+    /** @deprecated Use themes.violet. */
+    readonly inboki: {
+        light: IsolineTheme;
+        dark: IsolineTheme;
+    };
+    /** @deprecated Use themes.teal. */
+    readonly yours: {
+        light: IsolineTheme;
+        dark: IsolineTheme;
+    };
+    /** @deprecated Use themes.cyan. */
+    readonly atlas: {
+        light: IsolineTheme;
+        dark: IsolineTheme;
+    };
+};
+export declare const elevation: {
+    readonly level0: 0;
+    readonly level1: 1;
+    readonly level2: 3;
+    readonly level3: 6;
+    readonly level4: 8;
+    readonly level5: 12;
+};

package/dist/tokens.d.ts

@@ -0,0 +1,2 @@
+export * from './shape.ts';
+export * from './motion.ts';

package/dist/use-keyboard-height.d.ts

@@ -0,0 +1,10 @@
+/**
+ * The on-screen keyboard's height in dp, or 0 while it is closed.
+ *
+ * Anything pinned to the bottom of the screen has to measure the keyboard
+ * itself: `KeyboardAvoidingView` shrinks the layout it wraps, which does
+ * nothing for a view positioned against the window's bottom edge, and
+ * Android's own `adjustResize` stops resizing the window at all once the
+ * app is edge-to-edge.
+ */
+export declare function useKeyboardHeight(): number;

package/dist/utils.d.ts

@@ -0,0 +1,3 @@
+import { type ClassValue } from 'clsx';
+/** Merges Tailwind classes so later conditional classes win over earlier ones. */
+export declare function cn(...inputs: ClassValue[]): string;