@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/swipeRow.js

@@ -0,0 +1,161 @@
+/**
+ * The rules of a swipeable list row (`SwipeableRow`), as plain numbers, so
+ * they stay testable apart from the gesture. The offset is in points:
+ * positive when the row moves right (it reveals the leading actions),
+ * negative when it moves left (the trailing actions). Velocities are in
+ * points per second, the Gesture Handler unit. Each rule is a worklet, so the
+ * drag runs it on the UI thread.
+ */
+
+/** One action a swipe reveals behind a row. */
+
+/** The revealed widths of each side (0 for a side with no actions) and the row's width. */
+
+/** The width of one revealed action button. */
+export const SWIPE_ACTION_WIDTH = 72;
+
+/** Sideways travel (pt) before the drag takes the row: a tap, or a scroll, never moves it. */
+export const SWIPE_ACTIVE_OFFSET_X = 12;
+
+/** Vertical travel (pt) that hands the touch to the list's scroll first: a small diagonal drag scrolls. */
+export const SWIPE_FAIL_OFFSET_Y = 8;
+
+/**
+ * The pan's sideways thresholds. A row takes a sideways drag past
+ * `SWIPE_ACTIVE_OFFSET_X` either way. Inside a `Pager` it takes only the
+ * directions it has actions for, and a drag the other way fails it at once,
+ * so the pager behind moves instead (a Sessions row swiped right).
+ */
+export function swipeRowActivation(sides, insidePager) {
+  if (!insidePager || sides.leading > 0 && sides.trailing > 0) {
+    return {
+      activeOffsetX: [-SWIPE_ACTIVE_OFFSET_X, SWIPE_ACTIVE_OFFSET_X]
+    };
+  }
+  // Left (negative) reveals the trailing actions; right the leading ones.
+  return sides.trailing > 0 ? {
+    activeOffsetX: -SWIPE_ACTIVE_OFFSET_X,
+    failOffsetX: SWIPE_ACTIVE_OFFSET_X
+  } : {
+    activeOffsetX: SWIPE_ACTIVE_OFFSET_X,
+    failOffsetX: -SWIPE_ACTIVE_OFFSET_X
+  };
+}
+
+/** How far ahead (s) the release velocity carries the row when deciding where it settles. */
+const PROJECTION_S = 0.2;
+
+/** How far a row moves past its reach: less and less the further the finger goes. */
+function rubberband(overshoot) {
+  "worklet";
+
+  const constant = 0.55;
+  return overshoot * SWIPE_ACTION_WIDTH * constant / (SWIPE_ACTION_WIDTH + constant * overshoot);
+}
+
+/**
+ * Where the row sits for a finger `raw` points from where the drag caught
+ * it. Toward a side with actions it follows 1:1, out to its own width; toward
+ * a side with none, and past its width, it meets growing resistance.
+ */
+export function swipeRowOffset(raw, sides) {
+  "worklet";
+
+  const reveal = raw >= 0 ? sides.leading : sides.trailing;
+  const reach = reveal > 0 ? sides.width : 0;
+  const distance = Math.abs(raw);
+  if (distance <= reach) return raw;
+  return Math.sign(raw) * (reach + rubberband(distance - reach));
+}
+
+/** How far the row must travel for a full swipe to commit the first action: half the row, and always past the revealed buttons. */
+export function swipeFullAt(reveal, width) {
+  "worklet";
+
+  return Math.max(reveal + SWIPE_ACTION_WIDTH, width / 2);
+}
+
+/** The side whose first action a release here would commit (the full swipe is armed), or `null`. */
+export function swipeRowArmed(x, sides) {
+  "worklet";
+
+  const side = x >= 0 ? "leading" : "trailing";
+  const reveal = sides[side];
+  if (reveal === 0 || Math.abs(x) < swipeFullAt(reveal, sides.width)) return null;
+  return side;
+}
+/**
+ * Where a released row goes, from where it is (`x`) carried on by its speed
+ * (`vx`): past the full-swipe point, with its buttons already in view, it
+ * commits the first action; past half its buttons it opens; else it closes.
+ * A flick the other way closes it however far it was.
+ */
+export function swipeRowSettle(x, vx, sides) {
+  "worklet";
+
+  if (x === 0) return {
+    kind: "close"
+  };
+  const side = x > 0 ? "leading" : "trailing";
+  const reveal = sides[side];
+  if (reveal === 0) return {
+    kind: "close"
+  };
+  // The projected travel toward this side: negative after a flick back past rest.
+  const reach = Math.sign(x) * (x + vx * PROJECTION_S);
+  if (Math.abs(x) > reveal && reach >= swipeFullAt(reveal, sides.width)) return {
+    kind: "commit",
+    side
+  };
+  if (reach > reveal / 2) return {
+    kind: "open",
+    side
+  };
+  return {
+    kind: "close"
+  };
+}
+
+/** A row that can be closed from outside: the open row closes when another opens, a list scrolls or a row is tapped. */
+
+let openRow = null;
+
+/** Marks `row` as the open row, closing the one open before: one row is open at a time. */
+export function markSwipeRowOpen(row) {
+  if (openRow && openRow !== row) openRow.close();
+  openRow = row;
+}
+
+/** Forgets `row` once it has closed itself. */
+export function markSwipeRowClosed(row) {
+  if (openRow === row) openRow = null;
+}
+
+/** Whether a row is open. A touch on any row then only closes it. */
+export function isSwipeRowOpen() {
+  return openRow !== null;
+}
+
+/** Closes the open row, if any. Pass it to a list's `onScrollBeginDrag`, so a scroll closes the row. */
+export function closeSwipeRows() {
+  const row = openRow;
+  openRow = null;
+  row?.close();
+}
+
+/**
+ * The row's actions for VoiceOver and TalkBack, which cannot swipe a row:
+ * spread on the row's main pressable, so the actions rotor (iOS) or the
+ * actions menu (Android) offers each one, with its label.
+ */
+export function swipeActionsAccessibility(actions) {
+  return {
+    accessibilityActions: actions.map(action => ({
+      name: action.key,
+      label: action.label
+    })),
+    onAccessibilityAction: event => {
+      void actions.find(action => action.key === event.nativeEvent.actionName)?.onPress();
+    }
+  };
+}

package/dist/tabBarRoutes.js

@@ -0,0 +1,41 @@
+// Which routes `FloatingTabBar` draws. No React Native runtime import, so the
+// tests can load this file.
+
+/**
+ * The fields `FloatingTabBar` reads from a route's options (React
+ * Navigation's `BottomTabNavigationOptions`, and Expo Router's `href`).
+ */
+
+/** The `display` a style resolves to: in an array the last one set wins, as in `StyleSheet.flatten`. */
+function displayOf(style) {
+  if (Array.isArray(style)) {
+    let display;
+    for (const item of style) {
+      const value = displayOf(item);
+      if (value !== undefined) display = value;
+    }
+    return display;
+  }
+  return style && typeof style === "object" ? style.display : undefined;
+}
+
+/**
+ * Whether `FloatingTabBar` draws a tab for a route with these options. A route
+ * without a descriptor has none. Apps hide a tab with Expo Router's
+ * `options={{ href: null }}`. Expo Router's `Tabs` can drop `href` and pass
+ * `tabBarItemStyle: { display: "none" }` in its place, so both hide the tab.
+ * Hiding is display-only: `state.index` still counts every route.
+ */
+export function isTabBarRouteVisible(options) {
+  return options !== undefined && options.href !== null && displayOf(options.tabBarItemStyle) !== "none";
+}
+
+/**
+ * Whether `FloatingTabBar` hides itself: the focused route's `tabBarStyle`
+ * resolves to `display: "none"`, the React Navigation way to hide the bar
+ * from a screen (`navigation.setOptions`, or Expo Router's `<Tabs.Screen
+ * options>` inside the screen).
+ */
+export function isTabBarHidden(options) {
+  return displayOf(options?.tabBarStyle) === "none";
+}

package/dist/tabIndicator.js

@@ -0,0 +1,139 @@
+import { c as _c } from "react/compiler-runtime";
+import { cssInterop } from "nativewind";
+import { useState } from "react";
+import Animated, { interpolate, interpolateColor, useAnimatedStyle } from "react-native-reanimated";
+
+// The tab labels are `Animated.Text`s (their colour follows `progress`).
+// NativeWind maps `className` only for components it knows, so it is told
+// about this one, or the labels lose their font and size classes.
+cssInterop(Animated.Text, {
+  className: "style"
+});
+
+/** A tab's box in its row, from its layout. */
+
+/**
+ * The selected fill of a tab row linked to a `Pager`'s `progress` (`PillTabs`,
+ * `TabsList`): one indicator that slides with the pages between the measured
+ * tabs. The tabs sit on one line, so it moves on x and width only; its top
+ * and height are the first tab's. Until every tab has reported its layout,
+ * `measured` is false and each tab paints its own fill, so the first frame
+ * already shows the selection. `boxes` is every tab's box once all are
+ * measured (with or without `progress`), else empty.
+ */
+export function useTabIndicator(progress, count) {
+  const $ = _c(12);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = [];
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const [layouts, setLayouts] = useState(t0);
+  let t1;
+  if ($[1] !== count || $[2] !== layouts) {
+    t1 = layouts.slice(0, count).filter(_temp);
+    $[1] = count;
+    $[2] = layouts;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const found = t1;
+  let t2;
+  if ($[4] !== count || $[5] !== found) {
+    t2 = found.length === count ? found : [];
+    $[4] = count;
+    $[5] = found;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  const boxes = t2;
+  const measured = progress !== undefined && boxes.length > 0;
+  const style = useAnimatedStyle(() => {
+    const first = boxes[0];
+    if (!progress || !measured || !first) {
+      return {
+        opacity: 0
+      };
+    }
+    const pages = boxes.map(_temp2);
+    const at = pick => boxes.length === 1 ? pick(first) : interpolate(progress.get(), pages, boxes.map(pick), "clamp");
+    return {
+      opacity: 1,
+      top: first.y,
+      height: first.height,
+      width: at(_temp3),
+      transform: [{
+        translateX: at(_temp4)
+      }]
+    };
+  });
+  let t3;
+  if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = index_0 => event => {
+      const box_2 = event.nativeEvent.layout;
+      setLayouts(current => {
+        const next = [...current];
+        next[index_0] = box_2;
+        return next;
+      });
+    };
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  const onLayout = t3;
+  let t4;
+  if ($[8] !== boxes || $[9] !== measured || $[10] !== style) {
+    t4 = {
+      measured,
+      style,
+      boxes,
+      onLayout
+    };
+    $[8] = boxes;
+    $[9] = measured;
+    $[10] = style;
+    $[11] = t4;
+  } else {
+    t4 = $[11];
+  }
+  return t4;
+}
+
+/**
+ * A tab label's colour. With `progress` it blends from `muted` to `selected`
+ * as the pages reach tab `index`, so the label turns with the sliding fill
+ * under a swipe, not when the swipe settles. Without it, `fallback`.
+ */
+function _temp4(box_1) {
+  return box_1.x;
+}
+function _temp3(box_0) {
+  return box_0.width;
+}
+function _temp2(_, index) {
+  return index;
+}
+function _temp(box) {
+  return box !== undefined;
+}
+export function useTabLabelStyle(progress, index, colors, fallback) {
+  const {
+    selected,
+    muted
+  } = colors;
+  return useAnimatedStyle(() => {
+    if (!progress) {
+      return {
+        color: fallback
+      };
+    }
+    return {
+      color: interpolateColor(progress.get(), [index - 1, index, index + 1], [muted, selected, muted])
+    };
+  });
+}

package/dist/tailwind-preset.cjs

@@ -0,0 +1,255 @@
+/**
+ * `@vvedantb/native-ui/tailwind-preset`: the NativeWind / Tailwind preset the
+ * Expo apps share. CommonJS, because `tailwind.config.js` `require`s it and
+ * Tailwind loads it outside Metro.
+ *
+ *   const { nativeUiPreset, nativeUiContent } = require("@vvedantb/native-ui/tailwind-preset");
+ *   module.exports = {
+ *     content: ["./app/**\/*.{js,ts,tsx}", nativeUiContent()],
+ *     presets: [nativeUiPreset()],
+ *   };
+ *
+ * It nests `nativewind/preset`, so callers pass only this one. It sets
+ * `darkMode`, the `font-instrument-sans*` font classes (Instrument Sans unless
+ * `font` names other families), the colour keys native-ui
+ * classes use, `borderWidth.hairline` and, when asked, `borderRadius` from
+ * `--radius`.
+ * App colours, display fonts, keyframes and font-weight plugins stay in the
+ * app config.
+ *
+ * `color` maps a CSS variable name (without `--`) to a Tailwind colour, as the
+ * web `tokensPreset({ color })` of `@vvedantb/ui`. With `injectCssVariables`,
+ * the preset also writes those variables (light and dark) from `tokens.ts` and
+ * `palette.ts`, as space-separated RGB channels, and the default `color` is
+ * `rgbAlpha`.
+ */
+"use strict";
+
+const fs = require("node:fs");
+const path = require("node:path");
+
+/** `var(--name)`. */
+const cssVar = (name) => `var(--${name})`;
+/** `hsl(var(--name))`, for variables that hold `h s% l%` channels. */
+const hslVar = (name) => `hsl(var(--${name}))`;
+/** `rgb(var(--name) / <alpha-value>)`, for variables that hold `r g b` channels. Keeps opacity modifiers. */
+const rgbAlpha = (name) => `rgb(var(--${name}) / <alpha-value>)`;
+
+/** The default families of the four font classes, as `fontFamily` in `typography.ts`. */
+const INSTRUMENT_SANS = {
+  regular: "InstrumentSans_400Regular",
+  medium: "InstrumentSans_500Medium",
+  semibold: "InstrumentSans_600SemiBold",
+  bold: "InstrumentSans_700Bold",
+};
+
+/** The glob Tailwind scans for native-ui class names: this package's `src`, at its real path (pnpm symlinks resolve). */
+function nativeUiContent() {
+  return path.join(__dirname, "**/*.{js,ts,tsx}").split(path.sep).join("/");
+}
+
+/**
+ * Reads one `export const name = { … } as const;` object from a sibling
+ * `.ts` file. Plain object literals only, so no TypeScript loader is needed:
+ * `tokens.ts` and `palette.ts` stay the single source of the colours.
+ */
+function readConst(file, name) {
+  const source = fs.readFileSync(path.join(__dirname, file), "utf8");
+  const match = source.match(new RegExp(`export const ${name} = (\\{[\\s\\S]*?\\n\\}) as const;`));
+  if (!match) throw new Error(`@vvedantb/native-ui/tailwind-preset: no \`${name}\` object in ${file}`);
+  return new Function(`return (${match[1]});`)();
+}
+
+let cachedSchemeColors = null;
+
+/** CSS variable name → `{ light, dark }` hex, from `tokens.ts` and `palette.ts`. */
+function schemeColors() {
+  if (cachedSchemeColors) return cachedSchemeColors;
+  const tokens = readConst("tokens.ts", "tokens");
+  const palette = readConst("palette.ts", "palette");
+  const c = tokens.color;
+  cachedSchemeColors = {
+    background: c.background,
+    foreground: c.foreground,
+    border: c.border,
+    input: c.border,
+    ring: palette.primary,
+    separator: c.separator,
+    surface: c.surface,
+    "surface-foreground": c.foreground,
+    "surface-secondary": c.surfaceSecondary,
+    "surface-tertiary": palette.surfaceTertiary,
+    "surface-card": c.surfaceCard,
+    muted: c.muted,
+    "muted-foreground": c.muted,
+    primary: palette.primary,
+    "primary-foreground": palette.primaryForeground,
+    secondary: palette.default,
+    "secondary-foreground": palette.defaultForeground,
+    destructive: palette.danger,
+    "destructive-foreground": palette.dangerForeground,
+    accent: palette.primary,
+    "accent-foreground": palette.primaryForeground,
+    popover: palette.overlay,
+    "popover-foreground": palette.overlayForeground,
+    card: c.surfaceCard,
+    "card-foreground": c.foreground,
+    danger: palette.danger,
+    "danger-foreground": palette.dangerForeground,
+    success: palette.success,
+    "success-foreground": palette.successForeground,
+    warning: palette.warning,
+    "warning-foreground": palette.warningForeground,
+    default: palette.default,
+    "default-foreground": palette.defaultForeground,
+    overlay: palette.overlay,
+    "overlay-foreground": palette.overlayForeground,
+    field: c.surface,
+    "field-placeholder": palette.fieldPlaceholder,
+  };
+  return cachedSchemeColors;
+}
+
+/** `#rrggbb` as `r g b`. */
+function channels(hex) {
+  const n = Number.parseInt(hex.slice(1, 7), 16);
+  return `${(n >> 16) & 255} ${(n >> 8) & 255} ${n & 255}`;
+}
+
+/** `--name: r g b` for every colour in one scheme. */
+function cssVariables(scheme) {
+  return Object.fromEntries(
+    Object.entries(schemeColors()).map(([name, value]) => [`--${name}`, channels(value[scheme])]),
+  );
+}
+
+/** `--radius` from `tokens.radius.lg` (16), so `rounded-lg`, `-md` and `-sm` are 16, 14 and 12 as in `tokens.radius`. */
+function radiusVariable() {
+  return { "--radius": `${readConst("tokens.ts", "tokens").radius.lg}px` };
+}
+
+/** The Tailwind colour keys native-ui classes and the apps share. */
+function themeColors(v) {
+  return {
+    background: v("background"),
+    foreground: v("foreground"),
+    border: v("border"),
+    input: v("input"),
+    ring: v("ring"),
+    separator: v("separator"),
+    surface: {
+      DEFAULT: v("surface"),
+      foreground: v("surface-foreground"),
+      secondary: v("surface-secondary"),
+      tertiary: v("surface-tertiary"),
+      card: v("surface-card"),
+    },
+    primary: { DEFAULT: v("primary"), foreground: v("primary-foreground") },
+    secondary: { DEFAULT: v("secondary"), foreground: v("secondary-foreground") },
+    destructive: { DEFAULT: v("destructive"), foreground: v("destructive-foreground") },
+    muted: { DEFAULT: v("muted"), foreground: v("muted-foreground") },
+    accent: { DEFAULT: v("accent"), foreground: v("accent-foreground") },
+    popover: { DEFAULT: v("popover"), foreground: v("popover-foreground") },
+    card: { DEFAULT: v("card"), foreground: v("card-foreground") },
+    danger: { DEFAULT: v("danger"), foreground: v("danger-foreground") },
+    success: { DEFAULT: v("success"), foreground: v("success-foreground") },
+    warning: { DEFAULT: v("warning"), foreground: v("warning-foreground") },
+    default: { DEFAULT: v("default"), foreground: v("default-foreground") },
+    overlay: { DEFAULT: v("overlay"), foreground: v("overlay-foreground") },
+    field: { DEFAULT: v("field"), placeholder: v("field-placeholder") },
+  };
+}
+
+/** `nativewind/preset`, or none where NativeWind is not installed (this repository's tests). */
+function nestedPresets() {
+  try {
+    return [require("nativewind/preset")];
+  } catch {
+    return [];
+  }
+}
+
+/** `{ hairline: hairlineWidth() }` from `nativewind/theme`, or none without NativeWind. */
+function hairlineBorder() {
+  try {
+    const { hairlineWidth } = require("nativewind/theme");
+    return typeof hairlineWidth === "function" ? { hairline: hairlineWidth() } : {};
+  } catch {
+    return {};
+  }
+}
+
+/** A Tailwind plugin that writes the colour variables: `:root` (light) and the dark set for `darkMode`. */
+function cssVariablesPlugin(darkMode) {
+  return function nativeUiCssVariables({ addBase }) {
+    const dark = cssVariables("dark");
+    addBase(
+      darkMode === "media"
+        ? {
+            ":root": { ...cssVariables("light"), ...radiusVariable() },
+            "@media (prefers-color-scheme: dark)": { ":root": dark },
+          }
+        : {
+            ":root": { ...cssVariables("light"), ...radiusVariable() },
+            ".dark:root, .dark": dark,
+          },
+    );
+  };
+}
+
+/**
+ * The preset. Options:
+ * - `darkMode`: `"class"` (default; `ThemeToggle` and `setColorScheme` need it) or `"media"`.
+ * - `color`: CSS variable name → colour value. Default `cssVar`, or `rgbAlpha` with `injectCssVariables`.
+ * - `injectCssVariables`: write the colour variables and `--radius` from `tokens.ts` and `palette.ts`. Default `false`.
+ * - `radiusVariable`: `rounded-lg`, `-md` and `-sm` from `var(--radius)`, as vibot and Velth. Default: on with
+ *   `injectCssVariables`, else off, so an app without `--radius` keeps the Tailwind radii.
+ * - `font`: `{ regular, medium, semibold, bold }` family names for `sans` and the four `font-instrument-sans*`
+ *   classes. Keys not given keep Instrument Sans. Pass the same names to `configureTheme({ font })`, which sets
+ *   the JS styles; the app loads the font files.
+ */
+function nativeUiPreset(options = {}) {
+  const darkMode = options.darkMode === "media" ? "media" : "class";
+  const font = { ...INSTRUMENT_SANS };
+  for (const [key, value] of Object.entries(options.font || {})) if (value !== undefined) font[key] = value;
+  const inject = options.injectCssVariables === true;
+  const color = options.color || (inject ? rgbAlpha : cssVar);
+  const radius = options.radiusVariable ?? inject;
+  return {
+    darkMode,
+    presets: nestedPresets(),
+    theme: {
+      extend: {
+        colors: themeColors(color),
+        fontFamily: {
+          sans: [font.regular],
+          "instrument-sans": [font.regular],
+          "instrument-sans-medium": [font.medium],
+          "instrument-sans-semibold": [font.semibold],
+          "instrument-sans-bold": [font.bold],
+        },
+        borderRadius: radius
+          ? {
+              lg: "var(--radius)",
+              md: "calc(var(--radius) - 2px)",
+              sm: "calc(var(--radius) - 4px)",
+            }
+          : {},
+        borderWidth: hairlineBorder(),
+      },
+    },
+    plugins: inject ? [cssVariablesPlugin(darkMode)] : [],
+  };
+}
+
+module.exports = {
+  nativeUiPreset,
+  nativeUiContent,
+  cssVar,
+  hslVar,
+  rgbAlpha,
+  cssVariables,
+  schemeColors,
+  INSTRUMENT_SANS,
+};
+module.exports.default = nativeUiPreset();

package/dist/tailwind-preset.d.cts

@@ -0,0 +1,55 @@
+/** Maps a CSS variable name (without `--`) to a Tailwind colour value. */
+export type ColorFn = (name: string) => string;
+
+type Colors = { [key: string]: string | Colors };
+type CssDeclarations = Record<string, string>;
+type AddBase = (base: Record<string, CssDeclarations | Record<string, CssDeclarations>>) => void;
+
+export interface NativeUiPresetOptions {
+  /** Default `"class"`: `ThemeToggle` and NativeWind `setColorScheme` need it. */
+  darkMode?: "class" | "media";
+  /** Default `cssVar`, or `rgbAlpha` with `injectCssVariables`. */
+  color?: ColorFn;
+  /** Write the colour variables (as `r g b` channels) and `--radius` from `tokens.ts` and `palette.ts`. Default `false`. */
+  injectCssVariables?: boolean;
+  /** `rounded-lg`, `-md` and `-sm` from `var(--radius)`. Default: the value of `injectCssVariables`. */
+  radiusVariable?: boolean;
+  /**
+   * Family names for `sans` and the four `font-instrument-sans*` classes. Keys not given keep Instrument Sans.
+   * Pass the same names to `configureTheme({ font })`; the app loads the font files.
+   */
+  font?: { regular?: string; medium?: string; semibold?: string; bold?: string };
+}
+
+export interface NativeUiPreset {
+  darkMode: "class" | "media";
+  presets: unknown[];
+  theme: {
+    extend: {
+      colors: Colors;
+      fontFamily: Record<string, string[]>;
+      borderRadius: Record<string, string>;
+      borderWidth: Record<string, unknown>;
+    };
+  };
+  plugins: Array<(api: { addBase: AddBase }) => void>;
+}
+
+export declare const cssVar: ColorFn;
+export declare const hslVar: ColorFn;
+export declare const rgbAlpha: ColorFn;
+export declare const INSTRUMENT_SANS: {
+  regular: "InstrumentSans_400Regular";
+  medium: "InstrumentSans_500Medium";
+  semibold: "InstrumentSans_600SemiBold";
+  bold: "InstrumentSans_700Bold";
+};
+export declare function nativeUiPreset(options?: NativeUiPresetOptions): NativeUiPreset;
+/** Absolute glob of this package's `src/**\/*.{js,ts,tsx}`, for Tailwind `content`. */
+export declare function nativeUiContent(): string;
+/** CSS variable name → `{ light, dark }` hex, from `tokens.ts` and `palette.ts`. */
+export declare function schemeColors(): Record<string, { light: string; dark: string }>;
+/** `{ "--name": "r g b" }` for one scheme. */
+export declare function cssVariables(scheme: "light" | "dark"): CssDeclarations;
+declare const preset: NativeUiPreset;
+export default preset;