@startsimpli/ui-native 0.0.0-stage → 0.1.0

package/src/components/ShareBar.tsx

@@ -0,0 +1,32 @@
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { useTheme } from './ThemeProvider';
+import { shareBarTrackStyle } from '../styles';
+
+export interface ShareSegment {
+  value: number;
+  color: string;
+  /** Optional, for accessibility / legends rendered by the caller. */
+  label?: string;
+}
+
+export interface ShareBarProps {
+  segments: ShareSegment[];
+  /** Bar thickness in px. */
+  height?: number;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** Horizontal segmented proportion bar (e.g. audience share by platform). Each
+ *  segment's width is its value as a fraction of the total. */
+export function ShareBar({ segments, height = 10, style }: ShareBarProps) {
+  const theme = useTheme();
+  const total = segments.reduce((sum, s) => sum + Math.max(0, s.value), 0);
+  return (
+    <View style={[shareBarTrackStyle(theme, height), style]} accessibilityRole="image">
+      {total > 0 &&
+        segments.map((s, i) => (
+          <View key={`${s.label ?? i}`} style={{ flex: Math.max(0, s.value) / total, backgroundColor: s.color }} />
+        ))}
+    </View>
+  );
+}

package/src/components/Skeleton.tsx

@@ -0,0 +1,29 @@
+import { useEffect, useRef } from 'react';
+import { Animated, type DimensionValue, type ViewStyle } from 'react-native';
+import { useTheme } from './ThemeProvider';
+import { skeletonStyle } from '../styles';
+
+export interface SkeletonProps {
+  width?: DimensionValue;
+  height?: number;
+  style?: ViewStyle;
+}
+
+/** Pulsing placeholder for loading content. Mirrors @startsimpli/ui skeleton. */
+export function Skeleton({ width = '100%', height = 16, style }: SkeletonProps) {
+  const theme = useTheme();
+  const opacity = useRef(new Animated.Value(0.5)).current;
+
+  useEffect(() => {
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(opacity, { toValue: 1, duration: 700, useNativeDriver: true }),
+        Animated.timing(opacity, { toValue: 0.4, duration: 700, useNativeDriver: true }),
+      ])
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [opacity]);
+
+  return <Animated.View style={[skeletonStyle(theme), { width, height, opacity }, style]} />;
+}

package/src/components/SkeletonList.tsx

@@ -0,0 +1,23 @@
+import { View } from 'react-native';
+import { Skeleton } from './Skeleton';
+import { useTheme } from './ThemeProvider';
+
+export interface SkeletonListProps {
+  /** Number of placeholder blocks. */
+  count?: number;
+  /** Height of each block. */
+  height?: number;
+  gap?: number;
+}
+
+/** A column of card-shaped Skeleton placeholders for loading data screens. */
+export function SkeletonList({ count = 3, height = 84, gap }: SkeletonListProps) {
+  const theme = useTheme();
+  return (
+    <View style={{ gap: gap ?? theme.spacing.md }}>
+      {Array.from({ length: count }).map((_, i) => (
+        <Skeleton key={i} width="100%" height={height} />
+      ))}
+    </View>
+  );
+}

package/src/components/Sparkline.tsx

@@ -0,0 +1,38 @@
+import Svg, { Path } from 'react-native-svg';
+import { linePath, areaPath } from '../charts-math';
+
+export interface SparklineProps {
+  data: number[];
+  width?: number;
+  height?: number;
+  /** Stroke (and area fill) color. Defaults to a neutral; pass a brand color. */
+  color?: string;
+  strokeWidth?: number;
+  /** Draw a faint filled area under the line. */
+  fill?: boolean;
+}
+
+/** Tiny inline trend line (no axes), for placing next to a metric. */
+export function Sparkline({
+  data,
+  width = 72,
+  height = 24,
+  color = '#3B82F6',
+  strokeWidth = 2,
+  fill = true,
+}: SparklineProps) {
+  const box = { width, height, pad: strokeWidth };
+  return (
+    <Svg width={width} height={height}>
+      {fill && <Path d={areaPath(data, box)} fill={color} opacity={0.15} />}
+      <Path
+        d={linePath(data, box)}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        fill="none"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/components/Spinner.tsx

@@ -0,0 +1,8 @@
+import { ActivityIndicator, type ActivityIndicatorProps } from 'react-native';
+import { useTheme } from './ThemeProvider';
+
+/** Activity indicator defaulting to the brand color. Mirrors @startsimpli/ui page-loader. */
+export function Spinner({ color, ...rest }: ActivityIndicatorProps) {
+  const theme = useTheme();
+  return <ActivityIndicator color={color ?? theme.colors.primary} {...rest} />;
+}

package/src/components/StatTile.tsx

@@ -0,0 +1,69 @@
+import { type ReactNode } from 'react';
+import { View, Text as RNText, type ViewProps } from 'react-native';
+import { useTheme } from './ThemeProvider';
+import { useAccent } from './AccentContext';
+import {
+  statTileStyle,
+  statValueStyle,
+  statLabelStyle,
+  statDeltaColor,
+  type StatDelta,
+} from '../styles';
+
+export interface StatTileProps extends ViewProps {
+  /** Pre-formatted metric value, e.g. "1.2M" or "$48,000". */
+  value: string;
+  /** Caption below the value. */
+  label: string;
+  /** Optional pre-formatted change, e.g. "+12%". */
+  delta?: string;
+  /** Drives the delta color (up = primary, down = destructive). */
+  deltaDirection?: StatDelta;
+  /** Optional leading glyph/icon node (kept icon-library-agnostic). */
+  icon?: ReactNode;
+}
+
+/** Dashboard metric tile: big value, caption, optional trend + icon. */
+export function StatTile({
+  value,
+  label,
+  delta,
+  deltaDirection = 'neutral',
+  icon,
+  style,
+  ...rest
+}: StatTileProps) {
+  const theme = useTheme();
+  const accent = useAccent();
+  return (
+    <View
+      style={[
+        statTileStyle(theme),
+        // A 3px accent stripe at the top ties every tile to the screen's
+        // active accent — picks up the artist colour automatically.
+        { borderTopWidth: 3, borderTopColor: accent },
+        style,
+      ]}
+      {...rest}
+    >
+      {(icon || delta) && (
+        <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
+          <View>{icon}</View>
+          {delta ? (
+            <RNText
+              style={{
+                fontSize: theme.fontSizes.xs,
+                fontWeight: theme.fontWeights.semibold as never,
+                color: statDeltaColor(theme, deltaDirection),
+              }}
+            >
+              {delta}
+            </RNText>
+          ) : null}
+        </View>
+      )}
+      <RNText style={statValueStyle(theme)}>{value}</RNText>
+      <RNText style={statLabelStyle(theme)}>{label}</RNText>
+    </View>
+  );
+}

package/src/components/Switch.tsx

@@ -0,0 +1,17 @@
+import { Switch as RNSwitch, type SwitchProps as RNSwitchProps } from 'react-native';
+import { useTheme } from './ThemeProvider';
+
+export type SwitchProps = RNSwitchProps;
+
+/** Themed toggle (uses the platform Switch with brand track color). */
+export function Switch({ value, ...rest }: SwitchProps) {
+  const theme = useTheme();
+  return (
+    <RNSwitch
+      value={value}
+      trackColor={{ false: theme.colors.input, true: theme.colors.primary }}
+      ios_backgroundColor={theme.colors.input}
+      {...rest}
+    />
+  );
+}

package/src/components/TabBar.tsx

@@ -0,0 +1,50 @@
+import { type ReactNode } from 'react';
+import { View, Pressable, Text as RNText, type StyleProp, type ViewStyle } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useTheme } from './ThemeProvider';
+import { tabBarStyle, tabItemStyle, tabLabelStyle } from '../styles';
+
+export interface TabItem {
+  key: string;
+  label: string;
+  /**
+   * Optional icon renderer. Receives the active state and theme-resolved color
+   * so the app can supply any icon library (or emoji) without ui-native taking
+   * an icon dependency.
+   */
+  icon?: (state: { active: boolean; color: string }) => ReactNode;
+}
+
+export interface TabBarProps {
+  items: TabItem[];
+  activeKey: string;
+  onChange: (key: string) => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** Bottom tab bar. Pads for the home-indicator safe area; active tab uses the
+ *  primary color. Icon-library-agnostic — pass an `icon` renderer per item. */
+export function TabBar({ items, activeKey, onChange, style }: TabBarProps) {
+  const theme = useTheme();
+  const insets = useSafeAreaInsets();
+  return (
+    <View style={[tabBarStyle(theme), { paddingBottom: insets.bottom + theme.spacing.xs }, style]}>
+      {items.map((item) => {
+        const active = item.key === activeKey;
+        const color = active ? theme.colors.primary : theme.colors.mutedForeground;
+        return (
+          <Pressable
+            key={item.key}
+            accessibilityRole="tab"
+            accessibilityState={{ selected: active }}
+            onPress={() => onChange(item.key)}
+            style={tabItemStyle(theme)}
+          >
+            {item.icon?.({ active, color })}
+            <RNText style={tabLabelStyle(theme, active)}>{item.label}</RNText>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}

package/src/components/Text.tsx

@@ -0,0 +1,13 @@
+import { Text as RNText, type TextProps as RNTextProps } from 'react-native';
+import { useTheme } from './ThemeProvider';
+import { textStyle, type TextVariant } from '../styles';
+
+export interface TextProps extends RNTextProps {
+  variant?: TextVariant;
+}
+
+/** Themed text. variant controls size/weight/color (heading/body/muted/caption). */
+export function Text({ variant = 'body', style, ...rest }: TextProps) {
+  const theme = useTheme();
+  return <RNText style={[textStyle(theme, variant), style]} {...rest} />;
+}

package/src/components/ThemeProvider.tsx

@@ -0,0 +1,25 @@
+import { createContext, useContext, type ReactNode } from 'react';
+import { useColorScheme } from 'react-native';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { lightTheme, darkTheme, type Theme } from '../theme';
+
+const ThemeContext = createContext<Theme>(lightTheme);
+
+/**
+ * Provides a Theme to the primitives (and a SafeAreaProvider so Screen can read
+ * insets). With no `theme` prop it follows the OS light/dark setting; pass
+ * `theme` to pin or customize.
+ */
+export function ThemeProvider({ theme, children }: { theme?: Theme; children: ReactNode }) {
+  const scheme = useColorScheme();
+  const resolved = theme ?? (scheme === 'dark' ? darkTheme : lightTheme);
+  return (
+    <ThemeContext.Provider value={resolved}>
+      <SafeAreaProvider>{children}</SafeAreaProvider>
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme(): Theme {
+  return useContext(ThemeContext);
+}

package/src/components/Timeline.tsx

@@ -0,0 +1,47 @@
+import { type ReactNode } from 'react';
+import { View, Text as RNText } from 'react-native';
+import { useTheme } from './ThemeProvider';
+import { timelineDotStyle, timelineConnectorStyle, listRowTitleStyle, listRowSubtitleStyle } from '../styles';
+
+export interface TimelineItem {
+  key: string;
+  title: string;
+  /** Secondary line under the title (e.g. a date). */
+  meta?: string;
+  /** Marker dot color (defaults to theme.primary). */
+  color?: string;
+  /** Right-aligned content (e.g. an amount or badge). */
+  trailing?: ReactNode;
+}
+
+export interface TimelineProps {
+  items: TimelineItem[];
+}
+
+/** Vertical timeline: colored marker dots joined by a connector rail, each with
+ *  a title/meta and optional trailing content. Generic — events, payouts, etc. */
+export function Timeline({ items }: TimelineProps) {
+  const theme = useTheme();
+  return (
+    <View>
+      {items.map((item, i) => {
+        const last = i === items.length - 1;
+        return (
+          <View key={item.key} style={{ flexDirection: 'row', gap: theme.spacing.md }}>
+            <View style={{ width: 12, alignItems: 'center' }}>
+              <View style={timelineDotStyle(theme, item.color)} />
+              {!last && <View style={timelineConnectorStyle(theme)} />}
+            </View>
+            <View style={{ flex: 1, flexDirection: 'row', alignItems: 'flex-start', paddingBottom: last ? 0 : theme.spacing.lg }}>
+              <View style={{ flex: 1 }}>
+                <RNText style={listRowTitleStyle(theme)}>{item.title}</RNText>
+                {item.meta ? <RNText style={listRowSubtitleStyle(theme)}>{item.meta}</RNText> : null}
+              </View>
+              {item.trailing ? <View>{item.trailing}</View> : null}
+            </View>
+          </View>
+        );
+      })}
+    </View>
+  );
+}

package/src/components/TrendCard.tsx

@@ -0,0 +1,39 @@
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { Card, CardContent } from './Card';
+import { Text } from './Text';
+import { TrendChart } from './TrendChart';
+
+export interface TrendCardProps {
+  /** Small label, top-left (e.g. "Streams · 28 days"). */
+  caption: string;
+  /** Headline value, top-right (pre-formatted). */
+  value: string;
+  data: number[];
+  color?: string;
+  height?: number;
+  /** [start, end] captions under the chart. */
+  labels?: [string, string];
+  style?: StyleProp<ViewStyle>;
+}
+
+/** A card with a caption + headline value over an area trend chart. The common
+ *  "metric over time" block (reach, engagement, per-platform streams, …). */
+export function TrendCard({ caption, value, data, color, height = 120, labels, style }: TrendCardProps) {
+  return (
+    <Card style={style}>
+      <CardContent>
+        <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'baseline' }}>
+          <Text variant="caption">{caption}</Text>
+          <Text variant="body" style={{ fontWeight: '700' }}>
+            {value}
+          </Text>
+        </View>
+        {data.length > 0 && (
+          <View style={{ marginTop: 10 }}>
+            <TrendChart data={data} height={height} color={color} labels={labels} />
+          </View>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/TrendChart.tsx

@@ -0,0 +1,68 @@
+import { useState } from 'react';
+import { View, Text as RNText, type LayoutChangeEvent } from 'react-native';
+import Svg, { Path, Line, Defs, LinearGradient, Stop } from 'react-native-svg';
+import { useTheme } from './ThemeProvider';
+import { linePath, areaPath } from '../charts-math';
+
+export interface TrendChartProps {
+  data: number[];
+  height?: number;
+  color?: string;
+  /** Number of horizontal gridlines. */
+  gridLines?: number;
+  /** [start, end] captions under the chart (e.g. dates). */
+  labels?: [string, string];
+  strokeWidth?: number;
+}
+
+/** Full-width area+line trend chart with faint gridlines. Measures its own
+ *  width via onLayout so it fills the parent. */
+export function TrendChart({
+  data,
+  height = 130,
+  color = '#3B82F6',
+  gridLines = 3,
+  labels,
+  strokeWidth = 2,
+}: TrendChartProps) {
+  const theme = useTheme();
+  const [width, setWidth] = useState(0);
+  const onLayout = (e: LayoutChangeEvent) => setWidth(e.nativeEvent.layout.width);
+  const chartH = labels ? height - 18 : height;
+  const box = { width, height: chartH, pad: strokeWidth + 1 };
+  const gradId = 'trendFill';
+
+  return (
+    <View onLayout={onLayout}>
+      {width > 0 && (
+        <Svg width={width} height={chartH}>
+          <Defs>
+            <LinearGradient id={gradId} x1="0" y1="0" x2="0" y2="1">
+              <Stop offset="0" stopColor={color} stopOpacity={0.35} />
+              <Stop offset="1" stopColor={color} stopOpacity={0.02} />
+            </LinearGradient>
+          </Defs>
+          {Array.from({ length: gridLines }).map((_, i) => {
+            const y = (chartH / (gridLines + 1)) * (i + 1);
+            return <Line key={i} x1={0} y1={y} x2={width} y2={y} stroke={theme.colors.border} strokeWidth={1} />;
+          })}
+          <Path d={areaPath(data, box)} fill={`url(#${gradId})`} />
+          <Path
+            d={linePath(data, box)}
+            stroke={color}
+            strokeWidth={strokeWidth}
+            fill="none"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </Svg>
+      )}
+      {labels && (
+        <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 4 }}>
+          <RNText style={{ fontSize: theme.fontSizes.xs, color: theme.colors.mutedForeground }}>{labels[0]}</RNText>
+          <RNText style={{ fontSize: theme.fontSizes.xs, color: theme.colors.mutedForeground }}>{labels[1]}</RNText>
+        </View>
+      )}
+    </View>
+  );
+}

package/src/index.ts

@@ -0,0 +1,64 @@
+/**
+ * @startsimpli/ui-native — React Native UI primitives fed by shared design
+ * tokens. The native counterpart to @startsimpli/ui (web/Tailwind); both draw
+ * from the same token values (see ./tokens and packages/ui/theme/contract.css).
+ */
+
+// Design tokens + resolved themes + pure style builders
+export * from './tokens';
+export * from './theme';
+export * from './styles';
+
+// Theming + layout
+export { ThemeProvider, useTheme } from './components/ThemeProvider';
+export { Screen, type ScreenProps } from './components/Screen';
+export { ErrorBoundary, type ErrorBoundaryProps } from './components/ErrorBoundary';
+
+// Primitives
+export { Text, type TextProps } from './components/Text';
+export { Button, type ButtonProps } from './components/Button';
+export { Badge, type BadgeProps } from './components/Badge';
+export { Label } from './components/Label';
+export { Input, type InputProps } from './components/Input';
+export { Separator, type SeparatorProps } from './components/Separator';
+export { Checkbox, type CheckboxProps } from './components/Checkbox';
+export { Switch, type SwitchProps } from './components/Switch';
+export { Progress, type ProgressProps } from './components/Progress';
+export { Alert, type AlertProps } from './components/Alert';
+export { Skeleton, type SkeletonProps } from './components/Skeleton';
+export { SkeletonList, type SkeletonListProps } from './components/SkeletonList';
+export { Spinner } from './components/Spinner';
+export {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from './components/Card';
+export { Avatar, type AvatarProps } from './components/Avatar';
+export { Flag, type FlagProps } from './components/Flag';
+export { StatTile, type StatTileProps } from './components/StatTile';
+export { EmptyState, type EmptyStateProps } from './components/EmptyState';
+export { ListRow, type ListRowProps } from './components/ListRow';
+export { MetricRow, type MetricRowProps } from './components/MetricRow';
+export { TabBar, type TabBarProps, type TabItem } from './components/TabBar';
+export { ShareBar, type ShareBarProps, type ShareSegment } from './components/ShareBar';
+export { Chip, type ChipProps } from './components/Chip';
+export { SegmentedControl, type SegmentedControlProps, type SegmentedOption } from './components/SegmentedControl';
+export { Timeline, type TimelineProps, type TimelineItem } from './components/Timeline';
+
+// Charts (require the optional react-native-svg peer dependency)
+export * from './charts-math';
+export { Sparkline, type SparklineProps } from './components/Sparkline';
+export { DonutChart, type DonutChartProps } from './components/DonutChart';
+export { DonutLegend, type DonutLegendProps, type DonutLegendItem } from './components/DonutLegend';
+export { TrendChart, type TrendChartProps } from './components/TrendChart';
+export { TrendCard, type TrendCardProps } from './components/TrendCard';
+export { CompareChart, type CompareChartProps, type CompareSeries } from './components/CompareChart';
+export { DemographicBars, type DemographicBarsProps, type DemographicBar } from './components/DemographicBars';
+export { MultiLineLegend, type MultiLineLegendProps, type MultiLineLegendItem } from './components/MultiLineLegend';
+export { DualRangeControl, type DualRangeControlProps } from './components/DualRangeControl';
+export { GradientBox, type GradientBoxProps } from './components/GradientBox';
+export { HeroBanner, type HeroBannerProps } from './components/HeroBanner';
+export { AccentProvider, useAccent } from './components/AccentContext';
+export { DataTable, type DataTableProps, type DataColumn, type DataRow } from './components/DataTable';