@startsimpli/ui-native 0.0.0-stage → 0.1.1

package/src/styles.ts

@@ -0,0 +1,479 @@
+/**
+ * Pure style builders for the primitives.
+ *
+ * Kept separate from the components (and free of any react-native *value* import
+ * — only the ViewStyle/TextStyle types) so the styling logic is unit-testable in
+ * plain Node without a React Native renderer.
+ */
+
+import type { TextStyle, ViewStyle } from 'react-native';
+import type { Theme } from './theme';
+
+/* ----------------------------------------------------------------- Button -- */
+
+export type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+
+const BUTTON_PADDING: Record<ButtonSize, { paddingVertical: number; paddingHorizontal: number }> = {
+  sm: { paddingVertical: 4, paddingHorizontal: 8 },
+  md: { paddingVertical: 8, paddingHorizontal: 12 },
+  lg: { paddingVertical: 12, paddingHorizontal: 16 },
+};
+
+// Minimum touch-target heights. md (the default) meets the 44px WCAG / Apple
+// HIG / Material guidance for primary controls; sm stays tighter for toolbar
+// chips where layout density matters; lg is slightly more prominent.
+const BUTTON_MIN_HEIGHT: Record<ButtonSize, number> = { sm: 36, md: 44, lg: 52 };
+
+const BUTTON_FONT_SIZE: Record<ButtonSize, number> = { sm: 14, md: 16, lg: 18 };
+
+export function buttonContainerStyle(
+  theme: Theme,
+  variant: ButtonVariant,
+  size: ButtonSize
+): ViewStyle {
+  const base: ViewStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: theme.radii.md,
+    minHeight: BUTTON_MIN_HEIGHT[size],
+    ...BUTTON_PADDING[size],
+  };
+
+  switch (variant) {
+    case 'outline':
+      return { ...base, backgroundColor: 'transparent', borderWidth: 1, borderColor: theme.colors.border };
+    case 'ghost':
+    case 'link':
+      return { ...base, backgroundColor: 'transparent' };
+    case 'secondary':
+      return { ...base, backgroundColor: theme.colors.secondary };
+    case 'destructive':
+      return { ...base, backgroundColor: theme.colors.destructive };
+    case 'primary':
+    default:
+      return { ...base, backgroundColor: theme.colors.primary };
+  }
+}
+
+export function buttonTextStyle(theme: Theme, variant: ButtonVariant, size: ButtonSize): TextStyle {
+  const color: Record<ButtonVariant, string> = {
+    primary: theme.colors.primaryForeground,
+    secondary: theme.colors.secondaryForeground,
+    destructive: theme.colors.destructiveForeground,
+    outline: theme.colors.foreground,
+    ghost: theme.colors.foreground,
+    link: theme.colors.primary,
+  };
+  return {
+    color: color[variant],
+    fontSize: BUTTON_FONT_SIZE[size],
+    fontWeight: theme.fontWeights.semibold as TextStyle['fontWeight'],
+    textDecorationLine: variant === 'link' ? 'underline' : 'none',
+  };
+}
+
+/* ------------------------------------------------------------------ Badge -- */
+
+export type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'success' | 'warning' | 'outline';
+
+export function badgeStyle(theme: Theme, variant: BadgeVariant): ViewStyle {
+  const base: ViewStyle = {
+    alignSelf: 'flex-start',
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: theme.spacing.sm,
+    paddingVertical: 2,
+    borderRadius: theme.radii.full,
+  };
+  switch (variant) {
+    case 'outline':
+      return { ...base, backgroundColor: 'transparent', borderWidth: 1, borderColor: theme.colors.border };
+    case 'secondary':
+      return { ...base, backgroundColor: theme.colors.secondary };
+    case 'destructive':
+      return { ...base, backgroundColor: theme.colors.destructive };
+    case 'success':
+      return { ...base, backgroundColor: theme.colors.success };
+    case 'warning':
+      return { ...base, backgroundColor: theme.colors.warning };
+    case 'default':
+    default:
+      return { ...base, backgroundColor: theme.colors.primary };
+  }
+}
+
+export function badgeTextStyle(theme: Theme, variant: BadgeVariant): TextStyle {
+  const color: Record<BadgeVariant, string> = {
+    default: theme.colors.primaryForeground,
+    secondary: theme.colors.secondaryForeground,
+    destructive: theme.colors.destructiveForeground,
+    success: theme.colors.successForeground,
+    warning: theme.colors.warningForeground,
+    outline: theme.colors.foreground,
+  };
+  return { color: color[variant], fontSize: theme.fontSizes.xs, fontWeight: theme.fontWeights.medium as TextStyle['fontWeight'] };
+}
+
+/* --------------------------------------------------------- Input + Label -- */
+
+export function inputStyle(theme: Theme, opts: { invalid?: boolean } = {}): TextStyle {
+  return {
+    borderWidth: 1,
+    borderColor: opts.invalid ? theme.colors.destructive : theme.colors.input,
+    borderRadius: theme.radii.md,
+    paddingHorizontal: theme.spacing.md,
+    paddingVertical: theme.spacing.sm,
+    fontSize: theme.fontSizes.base,
+    color: theme.colors.foreground,
+    backgroundColor: theme.colors.background,
+  };
+}
+
+export function labelStyle(theme: Theme): TextStyle {
+  return {
+    fontSize: theme.fontSizes.sm,
+    fontWeight: theme.fontWeights.medium as TextStyle['fontWeight'],
+    color: theme.colors.foreground,
+  };
+}
+
+/* -------------------------------------------------------------- Separator -- */
+
+export function separatorStyle(theme: Theme, orientation: 'horizontal' | 'vertical'): ViewStyle {
+  return orientation === 'vertical'
+    ? { width: 1, alignSelf: 'stretch', backgroundColor: theme.colors.border }
+    : { height: 1, width: '100%', backgroundColor: theme.colors.border };
+}
+
+/* --------------------------------------------------------------- Checkbox -- */
+
+export function checkboxStyle(theme: Theme, checked: boolean): ViewStyle {
+  return {
+    width: 22,
+    height: 22,
+    borderRadius: theme.radii.sm,
+    borderWidth: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderColor: checked ? theme.colors.primary : theme.colors.input,
+    backgroundColor: checked ? theme.colors.primary : 'transparent',
+  };
+}
+
+/* --------------------------------------------------------------- Progress -- */
+
+export function progressTrackStyle(theme: Theme): ViewStyle {
+  return {
+    height: 8,
+    borderRadius: theme.radii.full,
+    backgroundColor: theme.colors.muted,
+    overflow: 'hidden',
+  };
+}
+
+export function progressFillStyle(theme: Theme, value: number): ViewStyle {
+  const pct = Math.max(0, Math.min(100, value));
+  return {
+    height: '100%',
+    width: `${pct}%`,
+    borderRadius: theme.radii.full,
+    backgroundColor: theme.colors.primary,
+  };
+}
+
+/* ------------------------------------------------------------------ Alert -- */
+
+export type AlertVariant = 'default' | 'destructive';
+
+export function alertStyle(theme: Theme, variant: AlertVariant): ViewStyle {
+  return {
+    padding: theme.spacing.md,
+    borderRadius: theme.radii.lg,
+    borderWidth: 1,
+    backgroundColor: theme.colors.card,
+    borderColor: variant === 'destructive' ? theme.colors.destructive : theme.colors.border,
+  };
+}
+
+export function alertTitleStyle(theme: Theme, variant: AlertVariant): TextStyle {
+  return {
+    fontSize: theme.fontSizes.base,
+    fontWeight: theme.fontWeights.semibold as TextStyle['fontWeight'],
+    color: variant === 'destructive' ? theme.colors.destructive : theme.colors.foreground,
+  };
+}
+
+export function alertTextStyle(theme: Theme, variant: AlertVariant): TextStyle {
+  return {
+    fontSize: theme.fontSizes.sm,
+    color: variant === 'destructive' ? theme.colors.destructive : theme.colors.mutedForeground,
+  };
+}
+
+/* --------------------------------------------------------------- Skeleton -- */
+
+export function skeletonStyle(theme: Theme): ViewStyle {
+  return { backgroundColor: theme.colors.muted, borderRadius: theme.radii.sm };
+}
+
+/* ----------------------------------------------------------- Card content -- */
+
+export function cardTitleStyle(theme: Theme): TextStyle {
+  return {
+    fontSize: theme.fontSizes.lg,
+    fontWeight: theme.fontWeights.semibold as TextStyle['fontWeight'],
+    color: theme.colors.cardForeground,
+  };
+}
+
+export function cardDescriptionStyle(theme: Theme): TextStyle {
+  return { fontSize: theme.fontSizes.sm, color: theme.colors.mutedForeground };
+}
+
+/* ------------------------------------------------------------------- Text -- */
+
+export type TextVariant = 'display' | 'heading' | 'body' | 'muted' | 'caption';
+
+export function textStyle(theme: Theme, variant: TextVariant): TextStyle {
+  const f: TextStyle = { fontFamily: theme.fontFamily };
+  switch (variant) {
+    case 'display':
+      return {
+        ...f,
+        fontSize: theme.fontSizes['4xl'],
+        fontWeight: theme.fontWeights.extrabold as TextStyle['fontWeight'],
+        color: theme.colors.foreground,
+        letterSpacing: -1,
+      };
+    case 'heading':
+      return {
+        ...f,
+        fontSize: theme.fontSizes.xl,
+        fontWeight: theme.fontWeights.bold as TextStyle['fontWeight'],
+        color: theme.colors.foreground,
+      };
+    case 'muted':
+      return {
+        ...f,
+        fontSize: theme.fontSizes.sm,
+        fontWeight: theme.fontWeights.normal as TextStyle['fontWeight'],
+        color: theme.colors.mutedForeground,
+      };
+    case 'caption':
+      return {
+        ...f,
+        fontSize: theme.fontSizes.xs,
+        fontWeight: theme.fontWeights.normal as TextStyle['fontWeight'],
+        color: theme.colors.mutedForeground,
+      };
+    case 'body':
+    default:
+      return {
+        ...f,
+        fontSize: theme.fontSizes.base,
+        fontWeight: theme.fontWeights.normal as TextStyle['fontWeight'],
+        color: theme.colors.foreground,
+      };
+  }
+}
+
+/* ------------------------------------------------------------------ Card -- */
+
+export function cardStyle(theme: Theme): ViewStyle {
+  return {
+    backgroundColor: theme.colors.card,
+    borderRadius: theme.radii.lg,
+    borderWidth: 1,
+    borderColor: theme.colors.border,
+    // Subtle "lit from above" highlight at the top edge for depth.
+    borderTopColor: 'rgba(255,255,255,0.06)',
+    padding: theme.spacing.lg,
+    // Floating shadow (RN shadow* + web elevation). Cheap depth on dark themes.
+    shadowColor: '#000',
+    shadowOpacity: 0.35,
+    shadowRadius: 16,
+    shadowOffset: { width: 0, height: 8 },
+    elevation: 4,
+  };
+}
+
+/* ----------------------------------------------------------------- Avatar -- */
+
+export type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
+
+const AVATAR_DIAMETER: Record<AvatarSize, number> = { sm: 32, md: 44, lg: 64, xl: 96 };
+
+export function avatarStyle(theme: Theme, size: AvatarSize, color?: string): ViewStyle {
+  const d = AVATAR_DIAMETER[size];
+  return {
+    width: d,
+    height: d,
+    borderRadius: theme.radii.full,
+    backgroundColor: color ?? theme.colors.secondary,
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+  };
+}
+
+export function avatarTextStyle(theme: Theme, size: AvatarSize, onColor?: string): TextStyle {
+  const fontSize = size === 'lg' ? theme.fontSizes.xl : size === 'md' ? theme.fontSizes.base : theme.fontSizes.sm;
+  return {
+    fontSize,
+    fontWeight: theme.fontWeights.semibold as TextStyle['fontWeight'],
+    color: onColor ?? theme.colors.secondaryForeground,
+  };
+}
+
+/* --------------------------------------------------------------- StatTile -- */
+
+export type StatDelta = 'up' | 'down' | 'neutral';
+
+export function statTileStyle(theme: Theme): ViewStyle {
+  return {
+    flex: 1,
+    minWidth: 140,
+    backgroundColor: theme.colors.card,
+    borderRadius: theme.radii.lg,
+    borderWidth: 1,
+    borderColor: theme.colors.border,
+    padding: theme.spacing.md,
+    gap: theme.spacing.xs,
+    // Floating shadow for tile depth on dark themes.
+    shadowColor: '#000',
+    shadowOpacity: 0.25,
+    shadowRadius: 12,
+    shadowOffset: { width: 0, height: 6 },
+    elevation: 3,
+  };
+}
+
+export function statValueStyle(theme: Theme): TextStyle {
+  return {
+    fontFamily: theme.fontFamily,
+    fontSize: theme.fontSizes['3xl'],
+    fontWeight: theme.fontWeights.extrabold as TextStyle['fontWeight'],
+    color: theme.colors.cardForeground,
+    letterSpacing: -0.5,
+  };
+}
+
+export function statLabelStyle(theme: Theme): TextStyle {
+  return {
+    fontFamily: theme.fontFamily,
+    fontSize: theme.fontSizes.xs,
+    color: theme.colors.mutedForeground,
+    textTransform: 'uppercase',
+    letterSpacing: 0.4,
+  };
+}
+
+export function statDeltaColor(theme: Theme, delta: StatDelta): string {
+  if (delta === 'up') return theme.colors.primary;
+  if (delta === 'down') return theme.colors.destructive;
+  return theme.colors.mutedForeground;
+}
+
+/* ---------------------------------------------------------------- ListRow -- */
+
+export function listRowStyle(theme: Theme): ViewStyle {
+  return {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: theme.spacing.md,
+    paddingVertical: theme.spacing.sm,
+  };
+}
+
+export function listRowTitleStyle(theme: Theme): TextStyle {
+  return {
+    fontSize: theme.fontSizes.base,
+    fontWeight: theme.fontWeights.medium as TextStyle['fontWeight'],
+    color: theme.colors.foreground,
+  };
+}
+
+export function listRowSubtitleStyle(theme: Theme): TextStyle {
+  return { fontSize: theme.fontSizes.sm, color: theme.colors.mutedForeground };
+}
+
+/* --------------------------------------------------------------- Timeline -- */
+
+export function timelineDotStyle(theme: Theme, color?: string): ViewStyle {
+  return {
+    width: 11,
+    height: 11,
+    borderRadius: theme.radii.full,
+    backgroundColor: color ?? theme.colors.primary,
+    marginTop: 3,
+  };
+}
+
+export function timelineConnectorStyle(theme: Theme): ViewStyle {
+  return { flex: 1, width: 2, backgroundColor: theme.colors.border, marginTop: 2 };
+}
+
+/* ------------------------------------------------------------------- Chip -- */
+
+export function chipStyle(theme: Theme, selected: boolean): ViewStyle {
+  return {
+    paddingHorizontal: theme.spacing.md,
+    paddingVertical: 6,
+    borderRadius: theme.radii.full,
+    borderWidth: 1,
+    borderColor: selected ? theme.colors.primary : theme.colors.border,
+    backgroundColor: selected ? theme.colors.primary : 'transparent',
+  };
+}
+
+export function chipTextStyle(theme: Theme, selected: boolean): TextStyle {
+  return {
+    fontSize: theme.fontSizes.sm,
+    fontWeight: (selected ? theme.fontWeights.semibold : theme.fontWeights.medium) as TextStyle['fontWeight'],
+    color: selected ? theme.colors.primaryForeground : theme.colors.mutedForeground,
+  };
+}
+
+/* --------------------------------------------------------------- ShareBar -- */
+
+export function shareBarTrackStyle(theme: Theme, height: number): ViewStyle {
+  return {
+    flexDirection: 'row',
+    height,
+    borderRadius: theme.radii.full,
+    overflow: 'hidden',
+    backgroundColor: theme.colors.muted,
+  };
+}
+
+/* ----------------------------------------------------------------- TabBar -- */
+
+export function tabBarStyle(theme: Theme): ViewStyle {
+  return {
+    flexDirection: 'row',
+    borderTopWidth: 1,
+    borderTopColor: theme.colors.border,
+    backgroundColor: theme.colors.card,
+    paddingTop: theme.spacing.sm,
+  };
+}
+
+export function tabItemStyle(theme: Theme): ViewStyle {
+  return {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 2,
+    paddingVertical: theme.spacing.xs,
+  };
+}
+
+export function tabLabelStyle(theme: Theme, active: boolean): TextStyle {
+  return {
+    fontSize: theme.fontSizes.xs,
+    fontWeight: (active ? theme.fontWeights.semibold : theme.fontWeights.normal) as TextStyle['fontWeight'],
+    color: active ? theme.colors.primary : theme.colors.mutedForeground,
+  };
+}

package/src/theme.ts

@@ -0,0 +1,46 @@
+/**
+ * Resolved theme objects for React Native.
+ *
+ * Turns the channel-string palette into ready-to-use hsl() colors and bundles
+ * them with the scheme-independent shape/spacing/type scales. Components and
+ * style functions take a Theme so light/dark (or a custom palette) is a single
+ * swap at the provider/root.
+ */
+
+import {
+  palette,
+  hsl,
+  radii,
+  spacing,
+  fontSizes,
+  fontWeights,
+  fontFamily,
+  durations,
+  type ColorScheme,
+  type ColorToken,
+} from './tokens';
+
+export interface Theme {
+  scheme: ColorScheme;
+  colors: Record<ColorToken, string>;
+  radii: typeof radii;
+  spacing: typeof spacing;
+  fontSizes: typeof fontSizes;
+  fontWeights: typeof fontWeights;
+  /** Base font-family stack. Web apps can load a custom face (e.g. Inter)
+   *  via document.head before mounting; native apps fall through to system. */
+  fontFamily: string;
+  durations: typeof durations;
+}
+
+export function makeTheme(scheme: ColorScheme): Theme {
+  const channels = palette[scheme];
+  const colors = {} as Record<ColorToken, string>;
+  for (const key of Object.keys(channels) as ColorToken[]) {
+    colors[key] = hsl(channels[key]);
+  }
+  return { scheme, colors, radii, spacing, fontSizes, fontWeights, fontFamily, durations };
+}
+
+export const lightTheme = makeTheme('light');
+export const darkTheme = makeTheme('dark');

package/src/tokens.ts

@@ -0,0 +1,145 @@
+/**
+ * Platform-neutral design tokens for React Native.
+ *
+ * Colors are stored as HSL channel strings ("H S% L%") that mirror the CSS
+ * custom properties in packages/ui/theme/contract.css — the same source of
+ * truth the web Tailwind preset consumes via hsl(var(--token)). Keep the two in
+ * sync (follow-up: generate one from the other). The hsl() helper turns a
+ * channel string into a color React Native's parser understands.
+ *
+ * Pure data + a pure helper: no react-native import, so this module is safe to
+ * import from web tooling too.
+ */
+
+export type ColorToken =
+  | 'background'
+  | 'foreground'
+  | 'card'
+  | 'cardForeground'
+  | 'primary'
+  | 'primaryForeground'
+  | 'secondary'
+  | 'secondaryForeground'
+  | 'muted'
+  | 'mutedForeground'
+  | 'accent'
+  | 'accentForeground'
+  | 'destructive'
+  | 'destructiveForeground'
+  | 'success'
+  | 'successForeground'
+  | 'warning'
+  | 'warningForeground'
+  | 'border'
+  | 'input'
+  | 'ring';
+
+export type ColorScheme = 'light' | 'dark';
+
+export const palette: Record<ColorScheme, Record<ColorToken, string>> = {
+  light: {
+    background: '0 0% 100%',
+    foreground: '222.2 84% 4.9%',
+    card: '0 0% 100%',
+    cardForeground: '222.2 84% 4.9%',
+    primary: '221.2 83.2% 53.3%',
+    primaryForeground: '210 40% 98%',
+    secondary: '210 40% 96.1%',
+    secondaryForeground: '222.2 47.4% 11.2%',
+    muted: '210 40% 96.1%',
+    mutedForeground: '215.4 16.3% 46.9%',
+    accent: '210 40% 96.1%',
+    accentForeground: '222.2 47.4% 11.2%',
+    destructive: '0 84.2% 60.2%',
+    destructiveForeground: '210 40% 98%',
+    success: '142.1 76.2% 36.3%',
+    successForeground: '210 40% 98%',
+    warning: '38 92% 50%',
+    warningForeground: '222.2 47.4% 11.2%',
+    border: '214.3 31.8% 91.4%',
+    input: '214.3 31.8% 91.4%',
+    ring: '221.2 83.2% 53.3%',
+  },
+  dark: {
+    background: '222.2 84% 4.9%',
+    foreground: '210 40% 98%',
+    card: '222.2 84% 4.9%',
+    cardForeground: '210 40% 98%',
+    primary: '217.2 91.2% 59.8%',
+    primaryForeground: '222.2 47.4% 11.2%',
+    secondary: '217.2 32.6% 17.5%',
+    secondaryForeground: '210 40% 98%',
+    muted: '217.2 32.6% 17.5%',
+    mutedForeground: '215 20.2% 65.1%',
+    accent: '217.2 32.6% 17.5%',
+    accentForeground: '210 40% 98%',
+    destructive: '0 62.8% 30.6%',
+    destructiveForeground: '210 40% 98%',
+    success: '142.1 70.6% 45.3%',
+    successForeground: '144.9 80.4% 10%',
+    warning: '37.7 92.1% 50.2%',
+    warningForeground: '20.9 91.7% 14.1%',
+    border: '217.2 32.6% 17.5%',
+    input: '217.2 32.6% 17.5%',
+    ring: '224.3 76.3% 48%',
+  },
+};
+
+/** Convert an HSL channel string ("221.2 83.2% 53.3%") into a React
+ *  Native-parseable color ("hsl(221.2, 83.2%, 53.3%)"). */
+export function hsl(channels: string): string {
+  const [h, s, l] = channels.trim().split(/\s+/);
+  return `hsl(${h}, ${s}, ${l})`;
+}
+
+/** Corner radii in px, derived from contract.css (--radius: 0.5rem = 8px). */
+export const radii = {
+  sm: 4,
+  md: 8,
+  lg: 12,
+  xl: 16,
+  full: 9999,
+} as const;
+
+/** 4px-based spacing scale for StyleSheet (web relies on Tailwind's scale). */
+export const spacing = {
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 24,
+  '2xl': 32,
+} as const;
+
+export const fontSizes = {
+  xs: 12,
+  sm: 14,
+  base: 16,
+  lg: 18,
+  xl: 20,
+  '2xl': 24,
+  '3xl': 32,
+  '4xl': 48,
+  '5xl': 64,
+} as const;
+
+export const fontWeights = {
+  normal: '400',
+  medium: '500',
+  semibold: '600',
+  bold: '700',
+  extrabold: '800',
+  black: '900',
+} as const;
+
+/** Base font-family stack. Inter (the display face) loaded via web by the
+ *  app (document.head); falls through to system on native or if Inter fails. */
+export const fontFamily =
+  '"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+
+/** Animation durations in ms, from contract.css. */
+export const durations = {
+  fast: 100,
+  normal: 200,
+  slow: 300,
+} as const;