@expokit/cli 0.0.0-stage → 0.2.0

package/registry/calendar/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/calendar.json

@@ -0,0 +1,17 @@
+{
+  "name": "calendar",
+  "type": "component",
+  "title": "Calendar",
+  "description": "A month calendar for single dates, continuous ranges or multiple picks. Months slide in from the direction you travel (chevrons or a swipe), the title flips to a month / year grid, selected days pop with a spring and ranges draw one band with rounded ends that wraps across weeks. Locale-aware weekday and month names via Intl, Sunday or Monday weeks, min / max / custom disabled days, a today ring, coloured event dots and whole-day colour highlights. Day tiles follow the kit radius — square at 0, circles from 16 up.",
+  "tier": "free",
+  "dependencies": [
+    "react-native-svg"
+  ],
+  "registryDependencies": [
+    "kit"
+  ],
+  "sharedFiles": [
+    "lib/kit.tsx"
+  ],
+  "filesDir": "calendar/files"
+}

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

@@ -0,0 +1,300 @@
+import React, { createContext, useContext, useId, useRef, useState } from 'react';
+import {
+  Animated,
+  Image,
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type GestureResponderEvent,
+  type ImageSourcePropType,
+  type LayoutChangeEvent,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+import Svg, { Defs, RadialGradient, Rect, Stop } from 'react-native-svg';
+
+import { alpha, motion, useKit } from '@/lib/kit';
+
+export type CardVariant = 'default' | 'outline' | 'elevated';
+export type CardHighlight = 'none' | 'spotlight' | 'border';
+
+export interface CardProps {
+  children?: React.ReactNode;
+  variant?: CardVariant;
+  /** Inner padding in points (default 18). Sections are spaced by `gap`. */
+  padding?: number;
+  /** Space between Header, Content and Footer (default 14). */
+  gap?: number;
+  /** Makes the whole card a button with spring press feedback. */
+  onPress?: (e: GestureResponderEvent) => void;
+  onLongPress?: (e: GestureResponderEvent) => void;
+  /** Spring press feedback without an onPress (e.g. the card wraps its own buttons). */
+  pressable?: boolean;
+  /** Light up on press: a soft spotlight that follows the finger, or a glowing accent border. */
+  highlight?: CardHighlight;
+  /** Colour of the highlight (default: theme accent). */
+  accent?: string;
+  disabled?: boolean;
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+const CardContext = createContext({ padding: 18 });
+
+/**
+ * Surface for grouping content. Compose with Card.Header, Card.Title, Card.Description,
+ * Card.Content, Card.Media and Card.Footer. Optional spring press with a finger-following spotlight.
+ */
+export function Card({
+  children,
+  variant = 'default',
+  padding = 18,
+  gap = 14,
+  onPress,
+  onLongPress,
+  pressable,
+  highlight = 'none',
+  accent,
+  disabled,
+  accessibilityLabel,
+  style,
+}: CardProps) {
+  const { colors, radius, dark } = useKit();
+  const tint = accent ?? colors.accent;
+  const interactive = !!(onPress || onLongPress || pressable);
+  const corner = radius.scale(18);
+  const gid = 'card' + useId().replace(/[^a-zA-Z0-9]/g, '');
+
+  const scale = useRef(new Animated.Value(1)).current;
+  const glow = useRef(new Animated.Value(0)).current;
+  const spot = useRef(new Animated.ValueXY({ x: 0, y: 0 })).current;
+  const [size, setSize] = useState({ w: 0, h: 0 });
+  const spotD = Math.max(size.w, size.h) * 1.1;
+
+  const surfaces: Record<CardVariant, ViewStyle> = {
+    default: {
+      backgroundColor: colors.card,
+      borderWidth: StyleSheet.hairlineWidth * 2,
+      borderColor: colors.border,
+      ...shadow(dark ? 0 : 0.04, 2, 6),
+    },
+    outline: { backgroundColor: 'transparent', borderWidth: 1, borderColor: colors.border },
+    elevated: { backgroundColor: dark ? colors.popover : colors.card, ...shadow(dark ? 0.5 : 0.1, 10, 28, 8) },
+  };
+
+  const border = (surfaces[variant].borderWidth as number | undefined) ?? 0;
+
+  const pressIn = (e: GestureResponderEvent) => {
+    Animated.spring(scale, { toValue: 0.975, useNativeDriver: true, ...motion.snappy }).start();
+    if (highlight === 'none') return;
+    moveSpot(e);
+    Animated.spring(glow, { toValue: 1, useNativeDriver: true, ...motion.gentle }).start();
+  };
+  const pressOut = () => {
+    Animated.spring(scale, { toValue: 1, useNativeDriver: true, ...motion.bouncy }).start();
+    if (highlight !== 'none') Animated.timing(glow, { toValue: 0, duration: 420, useNativeDriver: true }).start();
+  };
+  // Touch coordinates are relative to whichever child was hit, so work from page coordinates.
+  const clipRef = useRef<View>(null);
+  const origin = useRef({ x: 0, y: 0 });
+  const placeSpot = (pageX: number, pageY: number) =>
+    spot.setValue({ x: pageX - origin.current.x - spotD / 2, y: pageY - origin.current.y - spotD / 2 });
+  const moveSpot = (e: GestureResponderEvent) => {
+    const { pageX, pageY } = e.nativeEvent;
+    clipRef.current?.measure((_x, _y, _w, _h, px, py) => {
+      origin.current = { x: px, y: py };
+      placeSpot(pageX, pageY);
+    });
+  };
+  const followSpot = (e: GestureResponderEvent) => placeSpot(e.nativeEvent.pageX, e.nativeEvent.pageY);
+
+  const content = (
+    <View ref={clipRef} style={[styles.clip, { borderRadius: Math.max(0, corner - border) }]}>
+      {highlight === 'spotlight' && spotD > 0 ? (
+        <Animated.View
+          pointerEvents="none"
+          style={[
+            styles.spot,
+            {
+              width: spotD,
+              height: spotD,
+              opacity: glow,
+              transform: [
+                { translateX: spot.x },
+                { translateY: spot.y },
+                { scale: glow.interpolate({ inputRange: [0, 1], outputRange: [0.4, 1] }) },
+              ],
+            },
+          ]}
+        >
+          <Svg width={spotD} height={spotD}>
+            <Defs>
+              <RadialGradient id={gid} cx="50%" cy="50%" r="50%">
+                <Stop offset="0" stopColor={tint} stopOpacity={dark ? 0.32 : 0.2} />
+                <Stop offset="0.55" stopColor={tint} stopOpacity={dark ? 0.1 : 0.06} />
+                <Stop offset="1" stopColor={tint} stopOpacity={0} />
+              </RadialGradient>
+            </Defs>
+            <Rect width={spotD} height={spotD} fill={`url(#${gid})`} />
+          </Svg>
+        </Animated.View>
+      ) : null}
+      <View style={{ padding, gap }}>{children}</View>
+      {highlight !== 'none' ? (
+        <Animated.View
+          pointerEvents="none"
+          style={[styles.ring, { borderRadius: Math.max(0, corner - border), borderColor: alpha(tint, 0.85), opacity: glow }]}
+        />
+      ) : null}
+    </View>
+  );
+
+  const onLayout = (e: LayoutChangeEvent) => {
+    const { width: w, height: h } = e.nativeEvent.layout;
+    if (w !== size.w || h !== size.h) setSize({ w, h });
+  };
+
+  return (
+    <CardContext.Provider value={{ padding }}>
+      <Animated.View
+        onLayout={onLayout}
+        style={[
+          { borderRadius: corner, opacity: disabled ? 0.55 : 1 },
+          surfaces[variant],
+          interactive && { transform: [{ scale }] },
+          style,
+        ]}
+      >
+        {interactive ? (
+          <Pressable
+            accessibilityRole={onPress || onLongPress ? 'button' : undefined}
+            accessibilityLabel={accessibilityLabel}
+            accessibilityState={{ disabled: !!disabled }}
+            disabled={disabled}
+            onPress={onPress}
+            onLongPress={onLongPress}
+            onPressIn={pressIn}
+            onPressOut={pressOut}
+            onTouchMove={highlight === 'spotlight' ? followSpot : undefined}
+            style={Platform.OS === 'web' ? ({ cursor: onPress ? 'pointer' : 'auto' } as ViewStyle) : undefined}
+          >
+            {content}
+          </Pressable>
+        ) : (
+          content
+        )}
+      </Animated.View>
+    </CardContext.Provider>
+  );
+}
+
+export interface CardHeaderProps {
+  children?: React.ReactNode;
+  /** Element pinned to the top-right (menu button, badge, avatar). */
+  action?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** Title + description stack, with an optional action on the right. */
+export function CardHeader({ children, action, style }: CardHeaderProps) {
+  return (
+    <View style={[styles.header, style]}>
+      <View style={styles.headerText}>{children}</View>
+      {action ? <View>{action}</View> : null}
+    </View>
+  );
+}
+
+export interface CardTextProps {
+  children?: React.ReactNode;
+  numberOfLines?: number;
+  style?: StyleProp<TextStyle>;
+}
+
+export function CardTitle({ children, numberOfLines, style }: CardTextProps) {
+  const { colors } = useKit();
+  return (
+    <Text accessibilityRole="header" numberOfLines={numberOfLines} style={[styles.title, { color: colors.cardForeground }, style]}>
+      {children}
+    </Text>
+  );
+}
+
+export function CardDescription({ children, numberOfLines, style }: CardTextProps) {
+  const { colors } = useKit();
+  return (
+    <Text numberOfLines={numberOfLines} style={[styles.description, { color: colors.mutedForeground }, style]}>
+      {children}
+    </Text>
+  );
+}
+
+export interface CardSectionProps {
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function CardContent({ children, style }: CardSectionProps) {
+  return <View style={style}>{children}</View>;
+}
+
+/** Row of actions at the bottom. */
+export function CardFooter({ children, style }: CardSectionProps) {
+  return <View style={[styles.footer, style]}>{children}</View>;
+}
+
+export interface CardMediaProps {
+  source: ImageSourcePropType;
+  /** Image height (default 168). */
+  height?: number;
+  /** Optional overlay content (e.g. a badge) placed on top of the image. */
+  children?: React.ReactNode;
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** Full-bleed image. Put it first inside the Card — it cancels the card padding. */
+export function CardMedia({ source, height = 168, children, accessibilityLabel, style }: CardMediaProps) {
+  const { padding } = useContext(CardContext);
+  const { colors } = useKit();
+  return (
+    <View style={[{ height, marginTop: -padding, marginHorizontal: -padding, backgroundColor: colors.muted }, style]}>
+      <Image
+        source={source}
+        accessibilityLabel={accessibilityLabel}
+        accessibilityIgnoresInvertColors
+        resizeMode="cover"
+        style={styles.media}
+      />
+      {children ? <View style={[styles.mediaOverlay, { padding: padding - 4 }]}>{children}</View> : null}
+    </View>
+  );
+}
+
+Card.Header = CardHeader;
+Card.Title = CardTitle;
+Card.Description = CardDescription;
+Card.Content = CardContent;
+Card.Footer = CardFooter;
+Card.Media = CardMedia;
+
+function shadow(opacity: number, y: number, blur: number, elevation = 2): ViewStyle {
+  if (!opacity) return {};
+  return { shadowColor: '#000', shadowOpacity: opacity, shadowRadius: blur / 2, shadowOffset: { width: 0, height: y }, elevation };
+}
+
+const styles = StyleSheet.create({
+  clip: { overflow: 'hidden' },
+  spot: { position: 'absolute', top: 0, left: 0 },
+  ring: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, borderWidth: 1.5 },
+  header: { flexDirection: 'row', alignItems: 'flex-start', gap: 12 },
+  headerText: { flex: 1, gap: 4 },
+  title: { fontSize: 17, lineHeight: 22, fontWeight: '400', letterSpacing: -0.2 },
+  description: { fontSize: 14, lineHeight: 20 },
+  footer: { flexDirection: 'row', alignItems: 'center', gap: 10, marginTop: 2 },
+  media: { width: '100%', height: '100%' },
+  mediaOverlay: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'space-between' },
+});