@lockin90/ui-native 0.0.0-stage → 1.0.1

package/src/components/Spinner.tsx

@@ -0,0 +1,128 @@
+import { useEffect, useId, useRef } from 'react';
+import { Animated, Easing, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import Svg, { Circle, Defs, FeGaussianBlur, Filter, LinearGradient, Stop } from 'react-native-svg';
+import { colors } from '@lockin90/tokens';
+
+export interface SpinnerProps {
+  /** Outer diameter in px (the SVG viewBox is square at this size). */
+  size?: number;
+  /** Arc color — any color. Used as the gradient's leading stop and the glow
+   *  tint; the trailing stop is always the cyan accent for the Aurora
+   *  energy-sweep look. */
+  color?: string;
+  /** Stroke width of both the track and the sweeping arc, in px. */
+  thickness?: number;
+  /** Accessible label, announced to screen readers. */
+  label?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Spinner — an indeterminate circular loading spinner in the Aurora Flux
+ * "energy-ring" style: a faint track with a sweeping gradient arc (a partial
+ * `strokeDasharray` arc, round linecap, soft color glow) that rotates
+ * continuously. Mirrors the `.spin` ring spinner from the loaders showcase and
+ * keeps parity with the web `Spinner`. The 360° loop runs on the native driver.
+ */
+export function Spinner({
+  size = 24,
+  color = colors.accent,
+  thickness = 3,
+  label = 'Loading',
+  style,
+}: SpinnerProps) {
+  const uid = useId();
+  const gradId = `lk-spinner-grad-${uid.replace(/[^a-zA-Z0-9]/g, '')}`;
+
+  // reserve the glow's overhang (a wider stroke than the arc) so neither the arc
+  // nor its halo clips against the square SVG viewBox
+  const r = (size - thickness) / 2 - 3;
+  const c = 2 * Math.PI * r;
+  // sweep ≈ 62% of the circumference (the rest is the gap) — matches the
+  // showcase's ~0.6 dashoffset ratio for a confident partial arc.
+  const dashOffset = c * 0.6;
+  const half = size / 2;
+
+  const spin = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    const loop = Animated.loop(
+      Animated.timing(spin, {
+        toValue: 1,
+        duration: 1000,
+        easing: Easing.linear,
+        useNativeDriver: true,
+      }),
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [spin]);
+
+  const rotate = spin.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '360deg'] });
+
+  return (
+    <Animated.View
+      style={[styles.root, { width: size, height: size, transform: [{ rotate }] }, style]}
+      accessibilityRole="progressbar"
+      accessibilityLabel={label}
+      accessible
+    >
+      <Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+        <Defs>
+          <LinearGradient id={gradId} x1="0%" y1="0%" x2="100%" y2="100%">
+            <Stop offset="0" stopColor={color} />
+            <Stop offset="1" stopColor={colors.cyan} />
+          </LinearGradient>
+          {/* real Gaussian blur for the halo (Fabric-native in react-native-svg 15) —
+              the native twin of the web arc's `drop-shadow(0 0 6px tint)`. Region in
+              user space so the blur is never clipped to the arc's bounding box. */}
+          <Filter
+            id={`${gradId}-blur`}
+            filterUnits="userSpaceOnUse"
+            x={-6}
+            y={-6}
+            width={size + 12}
+            height={size + 12}
+          >
+            <FeGaussianBlur stdDeviation={3} />
+          </Filter>
+        </Defs>
+        {/* faint neutral track */}
+        <Circle cx={half} cy={half} r={r} fill="none" stroke={colors.border2} strokeWidth={thickness} />
+        {/* glow — a Gaussian-blurred duplicate of the arc behind it: the same soft
+            halo the web arc gets from `drop-shadow(0 0 6px tint)`. (Discrete
+            concentric "feather" copies read as banded outlines on device — a real
+            blur is the only thing that looks like a blur.) */}
+        <Circle
+          cx={half}
+          cy={half}
+          r={r}
+          fill="none"
+          stroke={color}
+          strokeWidth={thickness + 2}
+          strokeOpacity={0.55}
+          strokeLinecap="round"
+          strokeDasharray={c}
+          strokeDashoffset={dashOffset}
+          filter={`url(#${gradId}-blur)`}
+        />
+        {/* sweeping gradient arc */}
+        <Circle
+          cx={half}
+          cy={half}
+          r={r}
+          fill="none"
+          stroke={`url(#${gradId})`}
+          strokeWidth={thickness}
+          strokeLinecap="round"
+          strokeDasharray={c}
+          strokeDashoffset={dashOffset}
+        />
+      </Svg>
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: { alignItems: 'center', justifyContent: 'center' },
+});

package/src/components/SplitButton.tsx

@@ -0,0 +1,111 @@
+import { type ReactNode } from 'react';
+import { View, Text, Pressable, StyleSheet } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import { colors, radii, gradients, fonts, nativeShadows } from '@lockin90/tokens';
+import { Icon } from './Icon';
+import { Menu, type MenuItemData } from './Menu';
+
+export type SplitButtonVariant = 'primary' | 'default';
+
+export interface SplitButtonProps {
+  /** Primary action label (the wide left segment). */
+  label: string;
+  /** Fired when the primary segment is pressed. */
+  onPress?: () => void;
+  /** Secondary actions shown in the chevron dropdown. */
+  items: MenuItemData[];
+  /** `primary` = energy-gradient CTA (default); `default` = neutral glass. */
+  variant?: SplitButtonVariant;
+  /** Optional leading glyph on the primary segment. */
+  icon?: ReactNode;
+}
+
+/** A primary action joined to a chevron toggle that opens a {@link Menu} of
+ *  secondary actions (e.g. "Create page ▾" → New page / Duplicate / Import).
+ *  The two segments share one rounded group with a hairline divider between;
+ *  the chevron reuses {@link Menu} for the dropdown panel + outside-close. */
+export function SplitButton({ label, onPress, items, variant = 'primary', icon }: SplitButtonProps) {
+  const isPrimary = variant === 'primary';
+  const fg = isPrimary ? '#0A0A12' : colors.text;
+  const chevColor = isPrimary ? '#0A0A12' : colors.textDim;
+
+  return (
+    <View style={[styles.group, isPrimary ? styles.groupPrimary : styles.groupDefault]}>
+      {/* primary segment */}
+      <Pressable onPress={onPress} style={({ pressed }) => pressed && styles.pressed}>
+        {isPrimary ? (
+          <LinearGradient
+            colors={gradients.cta.stops as unknown as [string, string]}
+            start={{ x: 0, y: 0 }}
+            end={{ x: 1, y: 1 }}
+            style={styles.main}
+          >
+            {icon != null && <View style={styles.icon}>{icon}</View>}
+            <Text style={[styles.label, { color: fg }]} numberOfLines={1}>{label}</Text>
+          </LinearGradient>
+        ) : (
+          <View style={[styles.main, styles.mainDefault]}>
+            {icon != null && <View style={styles.icon}>{icon}</View>}
+            <Text style={[styles.label, { color: fg }]} numberOfLines={1}>{label}</Text>
+          </View>
+        )}
+      </Pressable>
+
+      {/* hairline divider */}
+      <View style={[styles.divider, { backgroundColor: isPrimary ? 'rgba(0,0,0,0.22)' : colors.border }]} />
+
+      {/* chevron segment — reuses Menu (modal panel + outside-close) */}
+      <View style={isPrimary ? styles.chevWrapPrimary : styles.chevWrapDefault}>
+        {isPrimary && (
+          <LinearGradient
+            colors={gradients.cta.stops as unknown as [string, string]}
+            start={{ x: 0, y: 0 }}
+            end={{ x: 1, y: 1 }}
+            style={StyleSheet.absoluteFill}
+          />
+        )}
+        <Menu
+          align="right"
+          items={items}
+          trigger={
+            <View style={styles.chev}>
+              <Icon name="chevron" size={13} color={chevColor} />
+            </View>
+          }
+        />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  group: {
+    flexDirection: 'row',
+    alignItems: 'stretch',
+    alignSelf: 'flex-start',
+    borderRadius: radii.sm,
+    overflow: 'hidden',
+  },
+  groupPrimary: { ...nativeShadows.glowAccent },
+  groupDefault: { borderWidth: 1, borderColor: colors.border },
+  main: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    paddingVertical: 9,
+    paddingHorizontal: 14,
+  },
+  mainDefault: { backgroundColor: colors.glass2 },
+  pressed: { opacity: 0.85 },
+  icon: { flexShrink: 0 },
+  label: { fontFamily: fonts.ui, fontWeight: '600', fontSize: 13 },
+  divider: { width: 1 },
+  chevWrapPrimary: { position: 'relative', justifyContent: 'center', overflow: 'hidden' },
+  chevWrapDefault: { position: 'relative', justifyContent: 'center', backgroundColor: colors.glass2 },
+  chev: {
+    width: 30,
+    alignItems: 'center',
+    justifyContent: 'center',
+    transform: [{ rotate: '90deg' }],
+  },
+});

package/src/components/SsoButton.tsx

@@ -0,0 +1,93 @@
+import { Pressable, Text, View, StyleSheet, type PressableProps } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import { colors, fonts, radii } from '@lockin90/tokens';
+
+export type SsoProvider = 'google' | 'apple';
+
+export interface SsoButtonProps extends Omit<PressableProps, 'children' | 'style'> {
+  provider: SsoProvider;
+}
+
+/** SSO sign-in button — full-color Google G or monochrome Apple glyph + label.
+ *  Mirrors the `.sso` design CSS (10×12 padding, 12.5px/600 label, 16×16 icon,
+ *  rgba(255,255,255,.04) bg, subtle border). Stretches to fill its grid cell. */
+export function SsoButton({ provider, ...rest }: SsoButtonProps) {
+  const label = provider === 'google' ? 'Google' : 'Apple';
+  return (
+    <Pressable
+      {...rest}
+      accessibilityRole="button"
+      accessibilityLabel={`Continue with ${label}`}
+      style={({ pressed }) => [
+        styles.btn,
+        pressed && styles.pressed,
+        rest.disabled === true ? styles.disabled : undefined,
+      ]}
+    >
+      <View style={styles.iconSlot}>
+        {provider === 'google' ? <GoogleBrandIcon /> : <AppleBrandIcon color={colors.text} />}
+      </View>
+      <Text style={styles.label}>{label}</Text>
+    </Pressable>
+  );
+}
+
+function GoogleBrandIcon({ size = 16 }: { size?: number }) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24">
+      <Path
+        fill="#4285F4"
+        d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.76h3.56c2.08-1.92 3.28-4.74 3.28-8.09z"
+      />
+      <Path
+        fill="#34A853"
+        d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.56-2.76c-.98.66-2.23 1.06-3.72 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84A11 11 0 0 0 12 23z"
+      />
+      <Path
+        fill="#FBBC05"
+        d="M5.84 14.11a6.6 6.6 0 0 1 0-4.22V7.05H2.18a11 11 0 0 0 0 9.9l3.66-2.84z"
+      />
+      <Path
+        fill="#EA4335"
+        d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1A11 11 0 0 0 2.18 7.05l3.66 2.84C6.71 7.31 9.14 5.38 12 5.38z"
+      />
+    </Svg>
+  );
+}
+
+function AppleBrandIcon({ size = 16, color = '#FFFFFF' }: { size?: number; color?: string }) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill={color}>
+      <Path d="M16.37 12.78c.02 2.5 2.19 3.33 2.21 3.34-.02.06-.35 1.2-1.15 2.37-.69 1.02-1.41 2.03-2.55 2.05-1.11.02-1.47-.66-2.74-.66-1.27 0-1.67.64-2.72.68-1.1.04-1.93-1.1-2.63-2.11-1.43-2.07-2.53-5.86-1.06-8.42a4.1 4.1 0 0 1 3.46-2.1c1.08-.02 2.1.73 2.76.73.66 0 1.9-.9 3.2-.77.54.02 2.07.22 3.05 1.65-.08.05-1.82 1.07-1.8 3.21M14.3 4.6c.58-.71.98-1.69.87-2.68-.84.04-1.86.56-2.47 1.26-.54.62-1.02 1.62-.89 2.58.94.07 1.9-.48 2.49-1.16" />
+    </Svg>
+  );
+}
+
+const styles = StyleSheet.create({
+  btn: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    borderRadius: radii.sm,
+    backgroundColor: 'rgba(255,255,255,0.04)',
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.10)',
+  },
+  pressed: {
+    backgroundColor: 'rgba(255,255,255,0.06)',
+    borderColor: 'rgba(255,255,255,0.16)',
+  },
+  disabled: { opacity: 0.5 },
+  iconSlot: { width: 16, height: 16, alignItems: 'center', justifyContent: 'center' },
+  label: {
+    color: colors.text,
+    fontFamily: fonts.ui,
+    fontWeight: '600',
+    fontSize: 12.5,
+    letterSpacing: 0.1,
+  },
+});

package/src/components/StackedBar.tsx

@@ -0,0 +1,138 @@
+import { View, Text, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import { colors, fonts, radii } from '@lockin90/tokens';
+
+/** One contiguous segment of the stacked bar, sized by its `value` share. */
+export interface StackedSegment {
+  /** the segment's value — sizes its slice relative to `total` (or the sum) */
+  value: number;
+  /** the slice color — a hex/rgb color string (e.g. colors.mint) */
+  color: string;
+  /** optional label (legend + accessibility) */
+  label?: string;
+}
+
+export interface StackedBarProps {
+  /** the segments laid out left→right, sized by their share of the total */
+  segments: StackedSegment[];
+  /** bar thickness in px */
+  height?: number;
+  /** pill-rounded ends + clipped corners */
+  rounded?: boolean;
+  /** px gap between adjacent segments */
+  gap?: number;
+  /** render a legend (dot + label + value/%) below the bar */
+  showLegend?: boolean;
+  /** denominator for the shares; if omitted, the summed segment values */
+  total?: number;
+  /** optional wrapper style */
+  style?: StyleProp<ViewStyle>;
+}
+
+/** 100%-stacked horizontal bar — one linear track split into colored proportion
+ *  segments sized by each segment's share of the total, with an optional legend
+ *  of dot + label + value/% rows below. Distinct from BarChart (separate
+ *  vertical bars) and DonutChart (radial). Tokens-driven. */
+export function StackedBar({
+  segments,
+  height = 10,
+  rounded = true,
+  gap = 2,
+  showLegend = false,
+  total,
+  style,
+}: StackedBarProps) {
+  const sum = segments.reduce((acc, s) => acc + (s.value > 0 ? s.value : 0), 0);
+  const denom = total != null && total > 0 ? total : sum || 1;
+  const drawn = segments.filter((s) => s.value > 0).length;
+  const r = rounded ? height : radii.sm;
+  const g = drawn > 1 ? Math.max(0, gap) : 0;
+
+  const ariaLabel = `Stacked bar: ${segments
+    .map((s) => `${s.label ?? 'segment'} ${Math.round(((s.value > 0 ? s.value : 0) / denom) * 100)}%`)
+    .join(', ')}.`;
+
+  return (
+    <View style={[styles.wrap, style]}>
+      <View
+        style={[styles.track, { height, borderRadius: r, gap: g }]}
+        accessibilityRole="image"
+        accessibilityLabel={ariaLabel}
+      >
+        {segments.map((s, i) => {
+          const v = s.value > 0 ? s.value : 0;
+          if (v <= 0) return null;
+          const pct = (v / denom) * 100;
+          return (
+            <View
+              key={`${s.label ?? 'seg'}-${i}`}
+              style={{ flexGrow: pct, flexBasis: 0, minWidth: 2, backgroundColor: s.color }}
+            />
+          );
+        })}
+      </View>
+
+      {showLegend && (
+        <View style={styles.legend}>
+          {segments.map((s, i) => {
+            const v = s.value > 0 ? s.value : 0;
+            const pct = Math.round((v / denom) * 100);
+            return (
+              <View style={styles.li} key={`li-${s.label ?? 'seg'}-${i}`}>
+                <View style={[styles.dot, { backgroundColor: s.color }]} />
+                <Text style={styles.name} numberOfLines={1}>
+                  {s.label ?? `Segment ${i + 1}`}
+                </Text>
+                <Text style={styles.val}>{s.value}</Text>
+                <Text style={styles.pct}>{pct}%</Text>
+              </View>
+            );
+          })}
+        </View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrap: { width: '100%', gap: 12 },
+  track: {
+    flexDirection: 'row',
+    width: '100%',
+    overflow: 'hidden',
+    borderWidth: 1,
+    borderColor: colors.border,
+    backgroundColor: colors.glass,
+  },
+  legend: { gap: 2 },
+  li: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    paddingVertical: 6,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: colors.border,
+  },
+  dot: { width: 11, height: 11, borderRadius: 3 },
+  name: {
+    flex: 1,
+    minWidth: 0,
+    fontFamily: fonts.ui,
+    fontSize: 13,
+    fontWeight: '600',
+    color: colors.text,
+  },
+  val: {
+    fontFamily: fonts.mono,
+    fontSize: 12.5,
+    color: colors.textDim,
+    textAlign: 'right',
+  },
+  pct: {
+    fontFamily: fonts.mono,
+    fontSize: 13,
+    fontWeight: '600',
+    color: colors.textFaint,
+    textAlign: 'right',
+    minWidth: 38,
+  },
+});

package/src/components/Stat.tsx

@@ -0,0 +1,118 @@
+import { type ReactNode } from 'react';
+import { View, Text, StyleSheet, type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+import { colors, fonts } from '@lockin90/tokens';
+import { GradientText } from './GradientText';
+
+/** Value color treatment. `gradient` = flux gradient (static flux on the small/
+ *  default sizes, full spectrum on `hero`); `mint` = mint accent. */
+export type StatTone = 'default' | 'gradient' | 'mint';
+/** `md` (default, 30px) · `sm`/`lg` = compact/panel stats (20/28px) · `hero` =
+ *  oversized marketing figure with the label BELOW. */
+export type StatSize = 'sm' | 'md' | 'lg' | 'hero';
+
+export interface StatProps {
+  label: string;
+  value: string;
+  delta?: string;
+  deltaDir?: 'up' | 'down';
+  /** value color treatment (gradient / mint); ignored when `valueColor` is set. */
+  tone?: StatTone;
+  /** explicit value colour (overrides `tone`) — for computed/graded colours. */
+  valueColor?: string;
+  /** size scale (default `md`). */
+  size?: StatSize;
+  /** optional caption under the value (mono, faint). */
+  sub?: ReactNode;
+  /** placeholder mode: renders an em-dash `—` in place of the value, suppresses
+   *  the delta, and shows the optional `hint` instead. */
+  empty?: boolean;
+  /** small helper line shown in empty mode (e.g. "No data yet — connect a wearable"). */
+  hint?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+const SIZE: Record<
+  StatSize,
+  {
+    gap: number;
+    reverse?: boolean;
+    labelSize: number;
+    labelSpacing: number;
+    labelWeight: TextStyle['fontWeight'];
+    labelColor: string;
+    valueSize: number;
+    valueSpacing: number;
+  }
+> = {
+  sm: { gap: 3, labelSize: 10, labelSpacing: 1.2, labelWeight: '400', labelColor: colors.textFaint, valueSize: 20, valueSpacing: -0.4 },
+  md: { gap: 6, labelSize: 10.5, labelSpacing: 1.6, labelWeight: '400', labelColor: colors.textFaint, valueSize: 30, valueSpacing: -0.6 },
+  lg: { gap: 3, labelSize: 10, labelSpacing: 1.2, labelWeight: '400', labelColor: colors.textFaint, valueSize: 28, valueSpacing: -0.56 },
+  hero: { gap: 8, reverse: true, labelSize: 11, labelSpacing: 2, labelWeight: '500', labelColor: colors.textDim, valueSize: 44, valueSpacing: -1.32 },
+};
+
+/** Label + big display value + optional signed delta. `tone="gradient"` renders
+ *  the value as flux-gradient text; `size` scales it (`hero` flips the label below).
+ *  In `empty` mode it shows an em-dash placeholder + an optional `hint`. */
+export function Stat({ label, value, delta, deltaDir, tone = 'default', valueColor, size = 'md', sub, empty, hint, style }: StatProps) {
+  const s = SIZE[size];
+  const isGradient = tone === 'gradient' && !valueColor;
+  const valueColorResolved = valueColor ?? (tone === 'mint' ? colors.mint : colors.text);
+
+  const valueStyle: TextStyle = {
+    fontFamily: fonts.display,
+    fontWeight: '700',
+    fontSize: s.valueSize,
+    letterSpacing: s.valueSpacing,
+  };
+
+  if (empty) {
+    return (
+      <View style={[styles.stat, { gap: s.gap }, s.reverse && styles.reverse, style]}>
+        <Text
+          style={[
+            styles.label,
+            { fontSize: s.labelSize, letterSpacing: s.labelSpacing, fontWeight: s.labelWeight, color: s.labelColor },
+          ]}
+        >
+          {label}
+        </Text>
+        <Text style={[valueStyle, { color: colors.textFaint }]}>—</Text>
+        {hint != null && <Text style={styles.hint}>{hint}</Text>}
+      </View>
+    );
+  }
+
+  return (
+    <View style={[styles.stat, { gap: s.gap }, s.reverse && styles.reverse, style]}>
+      <Text
+        style={[
+          styles.label,
+          { fontSize: s.labelSize, letterSpacing: s.labelSpacing, fontWeight: s.labelWeight, color: s.labelColor },
+        ]}
+      >
+        {label}
+      </Text>
+      {isGradient ? (
+        <GradientText gradient={size === 'hero' ? 'flux' : 'cta'} style={valueStyle}>
+          {value}
+        </GradientText>
+      ) : (
+        <Text style={[valueStyle, { color: valueColorResolved }]}>{value}</Text>
+      )}
+      {delta != null && (
+        <Text style={[styles.delta, { color: deltaDir === 'down' ? colors.zoneLow : colors.zoneHigh }]}>{delta}</Text>
+      )}
+      {sub != null && <Text style={styles.sub}>{sub}</Text>}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  stat: { gap: 6 },
+  reverse: { flexDirection: 'column-reverse' },
+  label: { fontFamily: fonts.mono, textTransform: 'uppercase', color: colors.textFaint },
+  delta: { fontFamily: fonts.mono, fontSize: 12 },
+  sub: { fontFamily: fonts.mono, fontSize: 10.5, color: colors.textFaint },
+  // helper line under the em-dash in empty mode (web `.lk-stat-hint`: mono 11px, 0.02em)
+  hint: { fontFamily: fonts.mono, fontSize: 11, letterSpacing: 0.22, color: colors.textFaint },
+});