@expokit/cli 0.0.0-stage → 0.2.0

package/registry/button/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/button-3d/files/src/components/ui/button-3d.tsx

@@ -0,0 +1,212 @@
+import React, { useRef } from 'react';
+import { ActivityIndicator, Animated, Platform, Pressable, StyleSheet, Text, View, type StyleProp, type ViewStyle } from 'react-native';
+import * as Haptics from 'expo-haptics';
+import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg';
+
+import { isTextNode, motion, readableOn, useKit } from '@/lib/kit';
+
+export type Button3DAppearance = 'auto' | 'light' | 'dark' | 'glass';
+export type Button3DSize = 'sm' | 'md' | 'lg';
+export type Button3DShape = 'rounded' | 'pill' | 'circle';
+
+export interface Button3DProps {
+  /** Label, a single glyph (circle buttons) or custom content. */
+  children?: React.ReactNode;
+  onPress?: () => void;
+  /**
+   * Keycap material: `light` (white), `dark` (graphite), `glass` (frosted, for photos) or `auto`
+   * — light on dark screens, dark on light ones (default).
+   */
+  appearance?: Button3DAppearance;
+  /** A custom face colour instead of a material, e.g. your brand colour. */
+  color?: string;
+  size?: Button3DSize;
+  /** `rounded` keycap, `pill` or `circle`. */
+  shape?: Button3DShape;
+  /** Edge height in points (default by size: 4 / 5 / 6). */
+  depth?: number;
+  /** Shown before the label. */
+  icon?: React.ReactNode;
+  /** Stretch to the parent's width. */
+  block?: boolean;
+  /** Swap the label for a spinner and ignore taps. */
+  loading?: boolean;
+  disabled?: boolean;
+  /** Light haptic tap on press (default true). */
+  haptics?: boolean;
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+const SIZES = {
+  sm: { h: 36, px: 14, font: 13, depth: 4, gap: 6 },
+  md: { h: 46, px: 18, font: 15, depth: 5, gap: 8 },
+  lg: { h: 56, px: 24, font: 17, depth: 6, gap: 8 },
+} as const;
+
+/** Darken (amount < 0) or lighten (amount > 0) a #rrggbb colour. */
+function shade(hex: string, amount: number) {
+  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 hex;
+  const mix = (c: number) => Math.round(amount < 0 ? c * (1 + amount) : c + (255 - c) * amount);
+  return '#' + [(n >> 16) & 255, (n >> 8) & 255, n & 255].map((c) => mix(c).toString(16).padStart(2, '0')).join('');
+}
+
+type Material = {
+  face: [string, string];
+  edge: [string, string];
+  ink: string;
+  rim: string;
+  outline: string;
+  shadow: number;
+};
+
+const MATERIALS: Record<'light' | 'dark' | 'glass', Material> = {
+  light: { face: ['#ffffff', '#efeff2'], edge: ['#cfd0d6', '#b4b6bd'], ink: '#18181b', rim: 'rgba(255,255,255,0.9)', outline: 'rgba(0,0,0,0.07)', shadow: 0.28 },
+  dark: { face: ['#3b3b41', '#2a2a2f'], edge: ['#151517', '#0b0b0c'], ink: '#ffffff', rim: 'rgba(255,255,255,0.14)', outline: 'rgba(0,0,0,0.5)', shadow: 0.45 },
+  glass: {
+    face: ['rgba(255,255,255,0.32)', 'rgba(255,255,255,0.18)'],
+    edge: ['rgba(255,255,255,0.22)', 'rgba(255,255,255,0.12)'],
+    ink: '#ffffff',
+    rim: 'rgba(255,255,255,0.55)',
+    outline: 'rgba(255,255,255,0.35)',
+    shadow: 0.18,
+  },
+};
+
+/** A material for a custom colour, built the same way the keycaps are. */
+const tinted = (hex: string): Material => ({
+  face: [shade(hex, 0.1), hex],
+  edge: [shade(hex, -0.3), shade(hex, -0.44)],
+  ink: readableOn(hex),
+  rim: 'rgba(255,255,255,0.35)',
+  outline: 'rgba(0,0,0,0.12)',
+  shadow: 0.35,
+});
+
+/**
+ * A physical, keycap-style button: a softly lit face on a darker edge that sinks in when pressed
+ * — with a light haptic — and springs back. Light, dark or frosted-glass keycaps, or any colour.
+ */
+export function Button3D({
+  children,
+  onPress,
+  appearance = 'auto',
+  color,
+  size = 'md',
+  shape = 'rounded',
+  depth: depthProp,
+  icon,
+  block,
+  loading,
+  disabled,
+  haptics = true,
+  accessibilityLabel,
+  style,
+}: Button3DProps) {
+  const { dark } = useKit();
+  const s = SIZES[size];
+  const depth = depthProp ?? s.depth;
+  const kind = appearance === 'auto' ? (dark ? 'light' : 'dark') : appearance;
+  const m = color ? tinted(color) : MATERIALS[kind];
+  const corner = shape === 'rounded' ? Math.round(s.h * 0.3) : s.h / 2;
+  const round = shape === 'circle';
+  const gid = `b3d-${color ? color.replace('#', '') : kind}`;
+
+  const press = useRef(new Animated.Value(0)).current;
+  const to = (v: number) => Animated.spring(press, { toValue: v, ...(v ? motion.snappy : motion.bouncy), useNativeDriver: true }).start();
+
+  const label = loading ? (
+    <ActivityIndicator color={m.ink} size="small" />
+  ) : isTextNode(children) ? (
+    // No numberOfLines: on a narrow fixed-width key ("esc", "Q") the label may use the padding
+    // instead of being cut to an ellipsis.
+    <Text style={{ color: m.ink, fontSize: round ? s.font + 4 : s.font, fontWeight: '600', letterSpacing: 0.1, flexShrink: 0, textAlign: 'center' }}>
+      {children}
+    </Text>
+  ) : (
+    children
+  );
+
+  const gradient = (id: string, [a, b]: [string, string]) => (
+    <Svg width="100%" height="100%" style={StyleSheet.absoluteFill} preserveAspectRatio="none" viewBox="0 0 1 1">
+      <Defs>
+        <LinearGradient id={id} x1="0" y1="0" x2="0" y2="1">
+          <Stop offset="0" stopColor={a} />
+          <Stop offset="1" stopColor={b} />
+        </LinearGradient>
+      </Defs>
+      <Rect width="1" height="1" fill={`url(#${id})`} />
+    </Svg>
+  );
+
+  return (
+    <Pressable
+      onPress={() => {
+        // Android has no touch delay inside scroll views, so the tap is only felt once it's a press.
+        if (haptics && Platform.OS === 'android') Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light).catch(() => {});
+        onPress?.();
+      }}
+      onPressIn={() => {
+        to(1);
+        // iOS delays touches in scroll views, so a key-down tap here never fires for a scroll.
+        if (haptics && Platform.OS === 'ios') Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light).catch(() => {});
+      }}
+      onPressOut={() => to(0)}
+      disabled={disabled || loading}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      accessibilityState={{ disabled: !!disabled, busy: !!loading }}
+      hitSlop={s.h < 44 ? { top: (44 - s.h) / 2, bottom: (44 - s.h) / 2 } : undefined}
+      style={[{ alignSelf: block ? 'stretch' : undefined, opacity: disabled ? 0.45 : 1 }, style]}
+    >
+      <View style={{ paddingBottom: depth, width: round ? s.h : undefined }}>
+        {/* Contact shadow on the surface: tightens and fades as the key goes down. */}
+        <Animated.View
+          pointerEvents="none"
+          style={[
+            styles.fill,
+            {
+              top: depth,
+              borderRadius: corner,
+              backgroundColor: m.edge[1],
+              shadowOpacity: m.shadow,
+              opacity: press.interpolate({ inputRange: [0, 1], outputRange: [1, 0.55] }),
+            },
+            styles.shadow,
+          ]}
+        />
+        {/* The edge: the keycap's darker side. */}
+        {/* elevation (no background → no shadow) keeps the edge and face above the shadow layer on Android. */}
+        <View style={[styles.fill, { top: depth, borderRadius: corner, overflow: 'hidden', elevation: 3 }]}>{gradient(`${gid}-e`, m.edge)}</View>
+        <Animated.View
+          style={[
+            styles.face,
+            {
+              height: s.h,
+              paddingHorizontal: round ? 0 : s.px,
+              gap: s.gap,
+              borderRadius: corner,
+              elevation: 4,
+              transform: [{ translateY: press.interpolate({ inputRange: [0, 1], outputRange: [0, depth] }) }],
+            },
+          ]}
+        >
+          {gradient(`${gid}-f`, m.face)}
+          {/* A bright rim along the top edge and a hairline outline sell the bevel. */}
+          <View pointerEvents="none" style={[styles.fill, { borderRadius: corner, borderTopWidth: 1, borderTopColor: m.rim }]} />
+          <View pointerEvents="none" style={[styles.fill, { borderRadius: corner, borderWidth: StyleSheet.hairlineWidth, borderColor: m.outline }]} />
+          {loading ? null : icon}
+          {label}
+        </Animated.View>
+      </View>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  fill: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 },
+  shadow: { shadowColor: '#000', shadowRadius: 8, shadowOffset: { width: 0, height: 5 }, elevation: 3 },
+  face: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' },
+});

package/registry/button-3d/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/button-3d.json

@@ -0,0 +1,18 @@
+{
+  "name": "button-3d",
+  "type": "component",
+  "title": "3D Button",
+  "description": "A physical, keycap-style button — a softly lit face on a darker edge that sinks in when pressed, with a light haptic, and springs back. Light, dark or frosted-glass keycaps (auto picks the one that contrasts with your screen) or any colour; three sizes, pill and circle shapes, loading state.",
+  "tier": "free",
+  "dependencies": [
+    "react-native-svg",
+    "expo-haptics"
+  ],
+  "registryDependencies": [
+    "kit"
+  ],
+  "sharedFiles": [
+    "lib/kit.tsx"
+  ],
+  "filesDir": "button-3d/files"
+}

package/registry/button.json

@@ -0,0 +1,18 @@
+{
+  "name": "button",
+  "type": "component",
+  "title": "Button",
+  "description": "Spring press feedback, eleven variants — including a two-tone gradient, a coloured glow and an elevated surface — four sizes, icons and a loading state. Pass any colour and every tinted variant follows it.",
+  "tier": "free",
+  "dependencies": [
+    "react-native-svg",
+    "expo-haptics"
+  ],
+  "registryDependencies": [
+    "kit"
+  ],
+  "sharedFiles": [
+    "lib/kit.tsx"
+  ],
+  "filesDir": "button/files"
+}