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

package/src/index.ts

@@ -0,0 +1,62 @@
+export * from './provider.tsx';
+export * from './theme.ts';
+export * from './tokens.ts';
+export type { IconProps } from './components/icons.tsx';
+export * from './components/button.tsx';
+export * from './components/button-group.tsx';
+export * from './components/filter-chip.tsx';
+export * from './components/icon-button.tsx';
+export * from './components/loading-indicator.tsx';
+export * from './components/text-field.tsx';
+export * from './components/wavy-progress.tsx';
+export * from './components/menu-sheet.tsx';
+export * from './components/select-field.tsx';
+export * from './components/expressive-shape.tsx';
+export * from './components/squish.ts';
+export * from './components/row-gap.tsx';
+export * from './components/back-icon.tsx';
+export * from './components/pressable.tsx';
+export * from './components/switch.tsx';
+export * from './components/dialog.tsx';
+export * from './components/bottom-sheet.tsx';
+export * from './components/sheet-transition.ts';
+export * from './components/search-field.tsx';
+export * from './components/text.tsx';
+export * from './components/badge.tsx';
+export * from './components/expand-indicator.tsx';
+export * from './components/refresh-control.tsx';
+export * from './components/keyboard-inset-view.tsx';
+export * from './components/back-button.tsx';
+export * from './components/input.tsx';
+export * from './components/toolbar.tsx';
+export * from './components/split-button.tsx';
+export * from './components/top-bar.tsx';
+export * from './components/sheet-frame.tsx';
+export * from './components/panel-sheet.tsx';
+export * from './components/settings-list.tsx';
+export * from './components/empty-state.tsx';
+export * from './components/snackbar.tsx';
+export * from './components/settings-row.tsx';
+export * from './components/fab-menu.tsx';
+export { usesPlatformMaterial } from './material.ts';
+export * from './components/tab-bar.tsx';
+export * from './components/popover.tsx';
+export * from './components/context-menu.tsx';
+export * from './components/floating-action-button.tsx';
+export { spatial } from './motion.ts';
+export { useReducedMotion } from './reduced-motion.ts';
+export * from './components/checkbox.tsx';
+export * from './components/avatar.tsx';
+export * from './components/slider.tsx';
+export * from './components/action-chip.tsx';
+export * from './components/color-picker.tsx';
+export * from './components/amount-field.tsx';
+export * from './components/date-picker.tsx';
+export * from './components/time-picker.tsx';
+export * from './components/banner.tsx';
+export * from './components/undo-bar.tsx';
+export * from './components/list-controls.tsx';
+export * from './components/swipeable-row.tsx';
+export * from './components/zoomable-image.tsx';
+export { parseLocalizedAmount, formatLocalizedAmount } from './amount.ts';
+export { validDate, validTime, addDays, addMonths, monthDays, formatCalendarDate } from './calendar.ts';

package/src/keyboard.ts

@@ -0,0 +1,5 @@
+/** Browser keyboard occlusion only while editing, at normal zoom. Resized layouts need no extra inset. */
+export function keyboardOcclusion(layoutHeight: number, visualHeight: number, offsetTop = 0, scale = 1, editing = false): number {
+  if (!editing || Math.abs(scale - 1) > 0.01 || ![layoutHeight, visualHeight, offsetTop].every(Number.isFinite)) return 0;
+  return Math.max(0, layoutHeight - visualHeight - offsetTop);
+}

package/src/material.ts

@@ -0,0 +1,16 @@
+/** Shared across core controls and the optional native material adapter. */
+export interface MaterialOptions {
+  material?: 'auto' | 'glass' | 'solid';
+  glassStyle?: 'regular' | 'clear';
+  tintColor?: string;
+  fallbackColor?: string;
+  /** Enables material interaction, not an action handler. */
+  interactive?: boolean;
+}
+/** Surface requests are platform-aware; explicit solid always wins. */
+export function usesPlatformMaterial(
+  platform: string,
+  material: MaterialOptions['material'] = 'solid',
+) {
+  return platform === 'ios' && material !== 'solid';
+}

package/src/media.ts

@@ -0,0 +1,51 @@
+export function clampZoom(value: number, maximum = 5) {
+  'worklet';
+  return Math.max(
+    1,
+    Math.min(
+      Number.isFinite(maximum) ? Math.max(1, maximum) : 5,
+      Number.isFinite(value) ? value : 1,
+    ),
+  );
+}
+/** Pan limits for a contained image, rather than the larger bounds of a cover image. */
+export function imagePanBounds(width: number, height: number, aspect: number, scale: number) {
+  'worklet';
+  const ratio = Math.max(0.001, aspect);
+  const shownWidth = Math.min(width, height * ratio);
+  const shownHeight = Math.min(height, width / ratio);
+  return {
+    x: Math.max(0, (shownWidth * scale - width) / 2),
+    y: Math.max(0, (shownHeight * scale - height) / 2),
+  };
+}
+/** RN uses source dimensions; React Native Web forwards the DOM image load event. */
+export function imageDimensions(event: unknown): { width: number; height: number } | null {
+  if (!event || typeof event !== 'object') return null;
+  const data = event as {
+    target?: { naturalWidth?: number; naturalHeight?: number };
+    currentTarget?: { naturalWidth?: number; naturalHeight?: number };
+    nativeEvent?: {
+      source?: { width?: number; height?: number };
+      target?: { naturalWidth?: number; naturalHeight?: number };
+    };
+  };
+  const width =
+    data.nativeEvent?.source?.width ??
+    data.nativeEvent?.target?.naturalWidth ??
+    data.target?.naturalWidth ??
+    data.currentTarget?.naturalWidth;
+  const height =
+    data.nativeEvent?.source?.height ??
+    data.nativeEvent?.target?.naturalHeight ??
+    data.target?.naturalHeight ??
+    data.currentTarget?.naturalHeight;
+  return typeof width === 'number' &&
+    typeof height === 'number' &&
+    Number.isFinite(width) &&
+    Number.isFinite(height) &&
+    width > 0 &&
+    height > 0
+    ? { width, height }
+    : null;
+}

package/src/motion.ts

@@ -0,0 +1,96 @@
+/**
+ * Material 3 Expressive motion physics.
+ *
+ * Expressive replaced M3's duration-and-easing curves with springs. A spring
+ * has no fixed duration: it is described by how hard it pulls (stiffness) and
+ * how quickly it stops wobbling (damping ratio), and it re-targets mid-flight
+ * instead of restarting. That is what makes an interrupted gesture feel like
+ * an object being redirected rather than an animation being cancelled.
+ *
+ * Two families, and they are not interchangeable:
+ *
+ * - **Spatial** springs move things — position, size, shape, rotation. They
+ *   are under-damped (ratio < 1) so they overshoot slightly and settle back.
+ * - **Effects** springs change appearance — color, opacity, elevation. They
+ *   are critically damped (ratio = 1), because a colour that overshoots reads
+ *   as a flicker, not as weight.
+ *
+ * The values below are the *expressive* motion scheme. The standard scheme is
+ * stiffer and flatter; expressive trades a few milliseconds of settle time for
+ * motion you can actually feel. This app uses it everywhere.
+ */
+
+export interface SpringToken {
+  /** 1 = critically damped (no overshoot); below 1 overshoots and settles. */
+  dampingRatio: number;
+  stiffness: number;
+}
+
+/** Movement: bounds, offset, scale, shape. Slightly under-damped. */
+export const spatialTokens = {
+  fast: { dampingRatio: 0.6, stiffness: 800 },
+  default: { dampingRatio: 0.8, stiffness: 380 },
+  slow: { dampingRatio: 0.8, stiffness: 200 },
+} as const satisfies Record<string, SpringToken>;
+
+/** Appearance: color, opacity, elevation. Critically damped. */
+export const effectsTokens = {
+  fast: { dampingRatio: 1, stiffness: 3800 },
+  default: { dampingRatio: 1, stiffness: 1600 },
+  slow: { dampingRatio: 1, stiffness: 800 },
+} as const satisfies Record<string, SpringToken>;
+
+export interface SpringConfig {
+  mass: number;
+  stiffness: number;
+  damping: number;
+}
+
+/**
+ * Converts an M3 spring token to the physical constants Reanimated wants.
+ *
+ * M3 specifies a damping *ratio* — dimensionless, and therefore stable across
+ * stiffness changes — while Reanimated's physics springs take an absolute
+ * damping coefficient. The two are related by `c = 2ζ√(km)`, so a token can be
+ * retuned by stiffness alone without accidentally changing its bounciness.
+ */
+export function springConfig(token: SpringToken, mass = 1): SpringConfig {
+  'worklet';
+  return {
+    mass,
+    stiffness: token.stiffness,
+    damping: token.dampingRatio * 2 * Math.sqrt(token.stiffness * mass),
+  };
+}
+
+/** Ready-made configs, so call sites read as `spatial.fast` not as numbers. */
+export const spatial = {
+  fast: springConfig(spatialTokens.fast),
+  default: springConfig(spatialTokens.default),
+  slow: springConfig(spatialTokens.slow),
+} as const;
+
+export const effects = {
+  fast: springConfig(effectsTokens.fast),
+  default: springConfig(effectsTokens.default),
+  slow: springConfig(effectsTokens.slow),
+} as const;
+
+/**
+ * Stagger between items in a group that animates in together (FAB menu items,
+ * toolbar contents). Expressive sequences items rather than moving them as one
+ * block — the offset is what makes a menu feel unfolded instead of pasted on.
+ */
+export const STAGGER_MS = 28;
+
+/**
+ * The stagger to actually use, given the reader's motion preference.
+ *
+ * Collapses to zero under "Remove animations": a sequence unfolding is the
+ * effect itself, and with nothing moving, a delay is only a row arriving late
+ * for no visible reason. Here rather than in `~/lib/reduced-motion` so it
+ * stays free of Reanimated and testable under `node --test`.
+ */
+export function staggerFor(reduced: boolean, stagger: number = STAGGER_MS): number {
+  return reduced ? 0 : stagger;
+}

package/src/platform.ts

@@ -0,0 +1,13 @@
+export type IsolinePlatform = 'ios' | 'android';
+/** Native follows the OS. Web can preview either design without spoofing Platform.OS. */
+export function resolvePlatform(
+  os: string,
+  requested?: IsolinePlatform,
+  inherited?: IsolinePlatform,
+): IsolinePlatform {
+  return os === 'ios'
+    ? 'ios'
+    : os === 'android'
+      ? 'android'
+      : (requested ?? inherited ?? 'android');
+}

package/src/preset-tokens.ts

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