@expokit/cli 0.0.0-stage → 0.2.0

package/registry/bottom-sheet/files/src/lib/kit.tsx

@@ -0,0 +1,219 @@
+import React, { createContext, useContext, useMemo } from 'react';
+import { Platform, useColorScheme, type TextStyle } from 'react-native';
+
+/**
+ * ExpoKit design tokens. Every component reads them through useKit(), so one
+ * <KitProvider> (optional) re-skins the whole kit: light / dark, accent colour, radius.
+ * Without a provider, components follow the system colour scheme.
+ */
+
+/**
+ * Bumped whenever components start using a new kit API (2: radius.scale / radius.capsule).
+ * The CLI won't keep an edited kit.tsx older than the component being added needs.
+ */
+export const KIT_VERSION = 2;
+
+export type ColorScheme = 'light' | 'dark';
+
+export interface Colors {
+  background: string;
+  foreground: string;
+  /** Cards, sheets, inputs. */
+  card: string;
+  cardForeground: string;
+  /** Raised surfaces: popovers, toasts. */
+  popover: string;
+  muted: string;
+  mutedForeground: string;
+  border: string;
+  input: string;
+  primary: string;
+  primaryForeground: string;
+  secondary: string;
+  secondaryForeground: string;
+  accent: string;
+  accentForeground: string;
+  success: string;
+  warning: string;
+  danger: string;
+  dangerForeground: string;
+  ring: string;
+  overlay: string;
+}
+
+export interface Theme {
+  dark: boolean;
+  colors: Colors;
+  /** Corner radius scale. `radius.full` makes pills. */
+  radius: {
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    full: number;
+    /** A corner designed at the default radius (12), scaled to the current one: `radius.scale(16)` is 16 at 12, 0 at 0. */
+    scale: (n: number) => number;
+    /** Corner for a bar or chip of height `h`: a pill at radius ≥ 12, softer below, square at 0. */
+    capsule: (h: number) => number;
+  };
+  /** 4pt spacing scale: space(4) === 16. */
+  space: (n: number) => number;
+  font: { family?: string; mono: string };
+  text: Record<'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl', TextStyle>;
+}
+
+const light: Colors = {
+  background: '#ffffff',
+  foreground: '#09090b',
+  card: '#ffffff',
+  cardForeground: '#09090b',
+  popover: '#ffffff',
+  muted: '#f4f4f5',
+  mutedForeground: '#71717a',
+  border: '#e4e4e7',
+  input: '#d4d4d8',
+  primary: '#18181b',
+  primaryForeground: '#fafafa',
+  secondary: '#f4f4f5',
+  secondaryForeground: '#18181b',
+  accent: '#18181b',
+  accentForeground: '#ffffff',
+  success: '#16a34a',
+  warning: '#f59e0b',
+  danger: '#e5484d',
+  dangerForeground: '#ffffff',
+  ring: '#18181b',
+  overlay: 'rgba(0,0,0,0.4)',
+};
+
+const dark: Colors = {
+  background: '#09090b',
+  foreground: '#fafafa',
+  card: '#111113',
+  cardForeground: '#fafafa',
+  popover: '#18181b',
+  muted: '#1c1c20',
+  mutedForeground: '#a1a1aa',
+  border: '#27272a',
+  input: '#34343a',
+  primary: '#fafafa',
+  primaryForeground: '#18181b',
+  secondary: '#1f1f23',
+  secondaryForeground: '#fafafa',
+  accent: '#fafafa',
+  accentForeground: '#09090b',
+  success: '#3dd68c',
+  warning: '#ffb224',
+  danger: '#ff6369',
+  dangerForeground: '#ffffff',
+  ring: '#d4d4d8',
+  overlay: 'rgba(0,0,0,0.6)',
+};
+
+export const palettes = { light, dark };
+
+function build(scheme: ColorScheme, overrides?: ThemeOverrides): Theme {
+  const base = scheme === 'dark' ? dark : light;
+  const accent = overrides?.accent;
+  const colors: Colors = {
+    ...base,
+    ...(accent ? { accent, ring: accent, accentForeground: readableOn(accent) } : null),
+    ...overrides?.colors?.[scheme],
+  };
+  const r = overrides?.radius ?? 12;
+  return {
+    dark: scheme === 'dark',
+    colors,
+    radius: {
+      sm: Math.round(r * 0.5),
+      md: r,
+      lg: Math.round(r * 1.35),
+      xl: Math.round(r * 1.8),
+      full: 999,
+      scale: (n) => Math.round((n * r) / 12),
+      capsule: (h) => Math.round((h / 2) * Math.min(1, r / 12)),
+    },
+    space: (n) => n * 4,
+    font: {
+      family: overrides?.fontFamily,
+      mono: Platform.select({ ios: 'Menlo', android: 'monospace', default: 'ui-monospace, SFMono-Regular, Menlo, monospace' })!,
+    },
+    text: {
+      xs: { fontSize: 12, lineHeight: 16 },
+      sm: { fontSize: 14, lineHeight: 20 },
+      md: { fontSize: 16, lineHeight: 22 },
+      lg: { fontSize: 18, lineHeight: 24, fontWeight: '400' },
+      xl: { fontSize: 22, lineHeight: 28, fontWeight: '400', letterSpacing: -0.3 },
+      xxl: { fontSize: 30, lineHeight: 36, fontWeight: '400', letterSpacing: -0.8 },
+    },
+  };
+}
+
+export interface ThemeOverrides {
+  /** Brand colour used for focus rings, selected states and accent buttons. */
+  accent?: string;
+  /** Base corner radius in points (default 12). */
+  radius?: number;
+  fontFamily?: string;
+  /** Override any token per scheme. */
+  colors?: Partial<Record<ColorScheme, Partial<Colors>>>;
+}
+
+const KitContext = createContext<{ scheme?: ColorScheme; overrides?: ThemeOverrides } | null>(null);
+
+export function KitProvider({
+  scheme,
+  children,
+  ...overrides
+}: ThemeOverrides & { scheme?: ColorScheme | 'system'; children: React.ReactNode }) {
+  const value = useMemo(
+    () => ({ scheme: scheme === 'system' ? undefined : scheme, overrides }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [scheme, overrides.accent, overrides.radius, overrides.fontFamily, overrides.colors]
+  );
+  return <KitContext.Provider value={value}>{children}</KitContext.Provider>;
+}
+
+export function useKit(): Theme {
+  const ctx = useContext(KitContext);
+  const system = useColorScheme();
+  const scheme: ColorScheme = ctx?.scheme ?? (system === 'dark' ? 'dark' : 'light');
+  return useMemo(() => build(scheme, ctx?.overrides), [scheme, ctx?.overrides]);
+}
+
+/** Shared motion presets so the whole kit moves the same way. */
+export const motion = {
+  /** Toggles, selection indicators. */
+  snappy: { damping: 18, stiffness: 260, mass: 0.8 },
+  /** Press feedback, pops. */
+  bouncy: { damping: 11, stiffness: 220, mass: 0.7 },
+  /** Sheets, layout changes. */
+  gentle: { damping: 22, stiffness: 160, mass: 1 },
+  fast: 160,
+  normal: 240,
+};
+
+/** Adds alpha to a #rrggbb colour: alpha('#6366f1', 0.2). */
+export function alpha(hex: string, a: number) {
+  if (!hex.startsWith('#') || (hex.length !== 7 && hex.length !== 4)) return hex;
+  const full = hex.length === 4 ? '#' + [...hex.slice(1)].map((c) => c + c).join('') : hex;
+  return full + Math.round(Math.max(0, Math.min(1, a)) * 255).toString(16).padStart(2, '0');
+}
+
+/** Black or white, whichever reads better on `hex`. */
+export function readableOn(hex: string) {
+  const full = hex.length === 4 ? '#' + [...hex.slice(1)].map((c) => c + c).join('') : hex;
+  const n = parseInt(full.slice(1, 7), 16);
+  if (Number.isNaN(n)) return '#ffffff';
+  const [r, g, b] = [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+  return (r * 299 + g * 587 + b * 114) / 1000 > 150 ? '#09090b' : '#ffffff';
+}
+
+/**
+ * True for children that must be wrapped in <Text>: strings, numbers and arrays of them —
+ * `{count} new` is the array [3, ' new'], and raw text outside <Text> crashes on native.
+ */
+export function isTextNode(node: React.ReactNode): node is string | number | (string | number)[] {
+  if (typeof node === 'string' || typeof node === 'number') return true;
+  return Array.isArray(node) && node.length > 0 && node.every((n) => typeof n === 'string' || typeof n === 'number');
+}

package/registry/bottom-sheet.json

@@ -0,0 +1,17 @@
+{
+  "name": "bottom-sheet",
+  "type": "component",
+  "title": "Bottom Sheet",
+  "description": "Draggable bottom sheet with snap points, a grabber pill that stretches as you drag, rubber-banding past its limits and release-velocity snapping with a haptic tick on each detent. The scrim dims in step with its height, content scrolls once fully expanded, a footer stays pinned at every detent, and the keyboard lifts it. Large radius, hairline edge and a soft layered top shadow.",
+  "tier": "free",
+  "dependencies": [
+    "expo-haptics"
+  ],
+  "registryDependencies": [
+    "kit"
+  ],
+  "sharedFiles": [
+    "lib/kit.tsx"
+  ],
+  "filesDir": "bottom-sheet/files"
+}

package/registry/bullet.json

@@ -0,0 +1,14 @@
+{
+  "name": "bullet",
+  "type": "chart",
+  "title": "Bullet",
+  "description": "Compact KPI rows with qualitative bands and a target tick. Built on expo-charts.",
+  "tier": "pro",
+  "dependencies": [
+    "expo-charts",
+    "react-native-svg"
+  ],
+  "registryDependencies": [],
+  "sharedFiles": [],
+  "filesDir": null
+}

package/registry/button/files/src/components/ui/button.tsx

@@ -0,0 +1,274 @@
+import * as Haptics from 'expo-haptics';
+import React, { useId, useRef } from 'react';
+import {
+  ActivityIndicator,
+  Animated,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type PressableProps,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg';
+
+import { alpha, isTextNode, motion, readableOn, useKit } from '@/lib/kit';
+
+export type ButtonVariant =
+  | 'primary'
+  | 'accent'
+  | 'secondary'
+  | 'outline'
+  | 'ghost'
+  | 'soft'
+  | 'destructive'
+  | 'link'
+  | 'gradient'
+  | 'glow'
+  | 'elevated';
+export type ButtonSize = 'sm' | 'md' | 'lg' | 'icon';
+
+export interface ButtonProps extends Omit<PressableProps, 'style' | 'children'> {
+  children?: React.ReactNode;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  /** Swaps the label for a spinner and blocks presses. */
+  loading?: boolean;
+  left?: React.ReactNode;
+  right?: React.ReactNode;
+  /** Stretch to the parent's width. */
+  block?: boolean;
+  /** Fully rounded ends. */
+  pill?: boolean;
+  /**
+   * Any colour. Recolours every tinted variant (accent, soft, outline, ghost, link, gradient,
+   * glow, elevated); text on filled buttons picks black or white automatically.
+   */
+  color?: string;
+  /** Second gradient stop for `variant="gradient"` (default: `color` shifted along the hue wheel). */
+  gradientTo?: string;
+  /** Light tap on press (default false — most buttons shouldn't buzz). */
+  haptics?: boolean;
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+}
+
+const SIZES: Record<ButtonSize, { h: number; px: number; font: number; gap: number }> = {
+  sm: { h: 36, px: 14, font: 14, gap: 6 },
+  md: { h: 46, px: 18, font: 15.5, gap: 8 },
+  lg: { h: 54, px: 22, font: 17, gap: 10 },
+  icon: { h: 44, px: 0, font: 15, gap: 0 },
+};
+
+/** Rotates a #rrggbb colour around the hue wheel by `deg` and nudges its lightness by `dl` (0–1). */
+function shift(hex: string, deg: number, dl = 0) {
+  const full = hex.length === 4 ? '#' + [...hex.slice(1)].map((c) => c + c).join('') : hex;
+  const n = parseInt(full.slice(1, 7), 16);
+  if (!hex.startsWith('#') || Number.isNaN(n)) return hex;
+  const [r, g, b] = [(n >> 16) & 255, (n >> 8) & 255, n & 255].map((v) => v / 255);
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const l = (max + min) / 2;
+  const d = max - min;
+  const s = d === 0 ? 0 : d / (1 - Math.abs(2 * l - 1));
+  let h = 0;
+  if (d) h = max === r ? ((g - b) / d) % 6 : max === g ? (b - r) / d + 2 : (r - g) / d + 4;
+  h = (h * 60 + deg + 360) % 360;
+  const L = Math.min(1, Math.max(0, l + dl));
+  const c = (1 - Math.abs(2 * L - 1)) * s;
+  const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+  const m = L - c / 2;
+  const [r1, g1, b1] = h < 60 ? [c, x, 0] : h < 120 ? [x, c, 0] : h < 180 ? [0, c, x] : h < 240 ? [0, x, c] : h < 300 ? [x, 0, c] : [c, 0, x];
+  return '#' + [r1, g1, b1].map((v) => Math.round((v + m) * 255).toString(16).padStart(2, '0')).join('');
+}
+
+/** Midpoint of two #rrggbb colours (to pick readable text for a gradient). */
+function mid(a: string, b: string) {
+  const n = (h: string) => parseInt((h.length === 4 ? '#' + [...h.slice(1)].map((c) => c + c).join('') : h).slice(1, 7), 16);
+  const [x, y] = [n(a), n(b)];
+  if (!a.startsWith('#') || !b.startsWith('#') || Number.isNaN(x) || Number.isNaN(y)) return a;
+  return '#' + [16, 8, 0].map((sh) => Math.round((((x >> sh) & 255) + ((y >> sh) & 255)) / 2).toString(16).padStart(2, '0')).join('');
+}
+
+/**
+ * Pressable with spring feedback, 11 variants, 4 sizes, icons and a loading state. Pass any
+ * `color` and every tinted variant — including the gradient and glow looks — follows it.
+ */
+export function Button({
+  children,
+  variant = 'primary',
+  size = 'md',
+  loading = false,
+  left,
+  right,
+  block,
+  pill,
+  color,
+  gradientTo,
+  haptics = false,
+  disabled,
+  style,
+  textStyle,
+  onPress,
+  onPressIn,
+  onPressOut,
+  ...props
+}: ButtonProps) {
+  const { colors, radius, dark } = useKit();
+  const gid = 'btn' + useId().replace(/[^a-zA-Z0-9]/g, '');
+  const scale = useRef(new Animated.Value(1)).current;
+  const isDisabled = disabled || loading;
+  const tint = color ?? colors.accent;
+  const onTint = color ? readableOn(tint) : colors.accentForeground;
+  const s = SIZES[size];
+  const corner = pill || size === 'icon' ? radius.full : radius.md;
+  // Only the opt-in gradient variant gets a second tone; everything else is one solid colour.
+  const to = variant === 'gradient' ? gradientTo ?? shift(tint, 38, 0.04) : tint;
+
+  const look: Record<ButtonVariant, { bg: string; fg: string; border?: string }> = {
+    primary: { bg: colors.primary, fg: colors.primaryForeground },
+    accent: { bg: tint, fg: onTint },
+    secondary: { bg: colors.secondary, fg: colors.secondaryForeground },
+    outline: { bg: 'transparent', fg: color ?? colors.foreground, border: color ? alpha(tint, 0.5) : colors.border },
+    ghost: { bg: 'transparent', fg: color ?? colors.foreground },
+    soft: { bg: alpha(tint, dark ? 0.2 : 0.14), fg: tint },
+    destructive: { bg: colors.danger, fg: colors.dangerForeground },
+    link: { bg: 'transparent', fg: tint },
+    gradient: { bg: tint, fg: readableOn(mid(tint, to)) },
+    glow: { bg: tint, fg: onTint },
+    elevated: { bg: dark ? colors.popover : colors.card, fg: color ?? colors.foreground, border: alpha(colors.foreground, dark ? 0.1 : 0.06) },
+  };
+  const { bg, fg, border } = look[variant];
+  const solid = bg !== 'transparent';
+  const quiet = variant === 'ghost' || variant === 'outline' || variant === 'link';
+
+  const spring = (to: number) => Animated.spring(scale, { toValue: to, useNativeDriver: true, ...motion.bouncy }).start();
+
+  const label = isTextNode(children) ? (
+    <Text
+      numberOfLines={1}
+      style={[styles.label, { color: fg, fontSize: s.font }, variant === 'link' && styles.link, textStyle]}
+    >
+      {children}
+    </Text>
+  ) : (
+    children
+  );
+
+  return (
+    <Animated.View
+      style={[
+        { transform: [{ scale }] },
+        block && styles.block,
+        style,
+      ]}
+    >
+      <Pressable
+        accessibilityRole="button"
+        accessibilityState={{ disabled: !!isDisabled, busy: loading }}
+        disabled={isDisabled}
+        onPress={(e) => {
+          if (haptics) Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light).catch(() => {});
+          onPress?.(e);
+        }}
+        onPressIn={(e) => {
+          spring(0.96);
+          onPressIn?.(e);
+        }}
+        onPressOut={(e) => {
+          spring(1);
+          onPressOut?.(e);
+        }}
+        style={({ pressed }) => [
+          styles.base,
+          {
+            height: s.h,
+            width: size === 'icon' ? s.h : undefined,
+            paddingHorizontal: variant === 'link' ? 0 : s.px,
+            gap: s.gap,
+            borderRadius: corner,
+            backgroundColor: bg,
+            borderColor: border ?? 'transparent',
+            borderWidth: border ? StyleSheet.hairlineWidth * 2 : 0,
+            opacity: isDisabled ? 0.5 : pressed && variant === 'link' ? 0.6 : 1,
+          },
+          pressed && quiet && variant !== 'link' && { backgroundColor: color ? alpha(tint, 0.1) : colors.muted },
+          // Coloured glow under the button (iOS / web; Android shows plain elevation).
+          variant === 'glow' && !isDisabled && [styles.glow, { shadowColor: tint }],
+          variant === 'elevated' && styles.elevated,
+        ]}
+        {...props}
+      >
+        {({ pressed }) => (
+          <>
+            {variant === 'gradient' || variant === 'glow' ? (
+              // Two-tone fill (gradient) or a faint white top sheen on the solid glow fill, drawn behind the content.
+              <View pointerEvents="none" style={[StyleSheet.absoluteFill, { borderRadius: corner, overflow: 'hidden' }]}>
+                <Svg width="100%" height="100%">
+                  <Defs>
+                    <LinearGradient id={gid} x1="0" y1="0" x2="1" y2="1">
+                      {variant === 'gradient'
+                        ? [
+                            <Stop key="a" offset="0" stopColor={tint} />,
+                            <Stop key="b" offset="1" stopColor={to} />,
+                          ]
+                        : [
+                            <Stop key="a" offset="0" stopColor="#ffffff" stopOpacity={0.12} />,
+                            <Stop key="b" offset="0.55" stopColor="#ffffff" stopOpacity={0} />,
+                          ]}
+                    </LinearGradient>
+                  </Defs>
+                  <Rect width="100%" height="100%" fill={`url(#${gid})`} />
+                </Svg>
+              </View>
+            ) : null}
+            {/* Press feedback on filled buttons: a light wash on dark fills, a shade on light ones. */}
+            {solid && pressed && !quiet ? (
+              <View
+                pointerEvents="none"
+                style={[StyleSheet.absoluteFill, { borderRadius: corner, backgroundColor: readableOn(bg) === '#ffffff' ? alpha('#ffffff', 0.14) : alpha('#000000', 0.08) }]}
+              />
+            ) : null}
+            {loading ? (
+              <View style={styles.row}>
+                <ActivityIndicator size="small" color={fg} />
+                {size !== 'icon' && isTextNode(children) ? (
+                  <Text style={[styles.label, { color: fg, fontSize: s.font, opacity: 0.85 }]}>{children}</Text>
+                ) : null}
+              </View>
+            ) : (
+              <>
+                {left}
+                {label}
+                {right}
+              </>
+            )}
+          </>
+        )}
+      </Pressable>
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  base: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center' },
+  row: { flexDirection: 'row', alignItems: 'center', gap: 8 },
+  block: { alignSelf: 'stretch' },
+  label: { fontWeight: '400', letterSpacing: -0.1 },
+  link: { textDecorationLine: 'underline' },
+  glow: {
+    shadowOpacity: 0.45,
+    shadowRadius: 14,
+    shadowOffset: { width: 0, height: 6 },
+    elevation: 6,
+  },
+  elevated: {
+    shadowColor: '#000',
+    shadowOpacity: 0.1,
+    shadowRadius: 10,
+    shadowOffset: { width: 0, height: 3 },
+    elevation: 3,
+  },
+});