@himakarinv/nativex 1.0.0

package/src/components/StatCard/StatCard.tsx

@@ -0,0 +1,393 @@
+import { Platform, StyleSheet, Text, View, type StyleProp, type ViewStyle } from 'react-native';
+import Svg, { Circle, Defs, LinearGradient, Path, Stop } from 'react-native-svg';
+
+import { borders, colors, radius, segmentActiveShadow, spacing, typography } from '../../theme';
+import { a11yHiddenProps } from '../../utils/a11y';
+import { Icon, IconName, isIconName } from '../Icon';
+
+export const StatCardIconTone = {
+  Success: 'success',
+  Primary: 'primary',
+  Warning: 'warning',
+  Error: 'error',
+  Info: 'info',
+  Gray: 'gray',
+} as const;
+
+export type StatCardIconTone = (typeof StatCardIconTone)[keyof typeof StatCardIconTone];
+
+export const StatCardTrendDirection = {
+  Up: 'up',
+  Down: 'down',
+  Neutral: 'neutral',
+} as const;
+
+export type StatCardTrendDirection =
+  (typeof StatCardTrendDirection)[keyof typeof StatCardTrendDirection];
+
+export type StatCardProps = {
+  label: string;
+  value: string | number;
+  valueSuffix?: string;
+  subtitle?: string;
+  icon?: IconName | string;
+  iconTone?: StatCardIconTone;
+  footerIcon?: IconName | string;
+  trend?: string;
+  trendDirection?: StatCardTrendDirection;
+  sparkline?: number[] | false;
+  style?: StyleProp<ViewStyle>;
+};
+
+const FONT = {
+  family: Platform.select({
+    web: 'Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+    default: typography.fontFamily.base,
+  }),
+  label: {
+    fontSize: typography.fontSize.sm,
+    fontWeight: typography.fontWeight.medium,
+    lineHeight: Math.round(typography.fontSize.sm * 1.35),
+  },
+  value: {
+    fontSize: typography.fontSize['2xl'],
+    fontWeight: typography.fontWeight.bold,
+    lineHeight: Math.round(typography.fontSize['2xl'] * 1.15),
+  },
+  valueSuffix: {
+    fontSize: typography.fontSize.sm,
+    fontWeight: typography.fontWeight.regular,
+    lineHeight: Math.round(typography.fontSize.sm * 1.35),
+  },
+  subtitle: {
+    fontSize: typography.fontSize.sm,
+    fontWeight: typography.fontWeight.regular,
+    lineHeight: Math.round(typography.fontSize.sm * 1.4),
+  },
+  trend: {
+    fontSize: typography.fontSize.sm,
+    fontWeight: typography.fontWeight.medium,
+    lineHeight: Math.round(typography.fontSize.sm * 1.35),
+  },
+} as const;
+
+const LAYOUT = {
+  maxWidth: 232,
+  padding: spacing.base,
+  iconWrap: spacing['2xl'],
+  icon: spacing.base,
+  footerIcon: spacing.base,
+  sparklineW: 88,
+  sparklineH: 36,
+} as const;
+
+const DEFAULT_SPARKLINE = [0.35, 0.28, 0.42, 0.38, 0.55, 0.48, 0.62, 0.58, 0.72, 0.68, 0.82, 0.9];
+
+const ICON_TONE_BG: Record<StatCardIconTone, string> = {
+  success: colors.statCard.iconSuccessBg,
+  primary: colors.statCard.iconBg,
+  warning: colors.statCard.iconWarningBg,
+  error: colors.statCard.iconErrorBg,
+  info: colors.statCard.iconInfoBg,
+  gray: colors.statCard.iconGrayBg,
+};
+
+function resolveTrendDirection(
+  trend: string | undefined,
+  trendDirection: StatCardTrendDirection | undefined,
+): StatCardTrendDirection {
+  const raw = (trend ?? '').trim();
+  if (raw.startsWith('-')) {
+    return StatCardTrendDirection.Down;
+  }
+  if (raw.startsWith('+')) {
+    return StatCardTrendDirection.Up;
+  }
+  if (trendDirection) {
+    return trendDirection;
+  }
+  return StatCardTrendDirection.Neutral;
+}
+
+function trendPillColors(direction: StatCardTrendDirection) {
+  switch (direction) {
+    case StatCardTrendDirection.Up:
+      return { bg: colors.badge.success.bg, text: colors.badge.success.text };
+    case StatCardTrendDirection.Down:
+      return { bg: colors.badge.error.bg, text: colors.badge.error.text };
+    default:
+      return { bg: colors.badge.gray.bg, text: colors.badge.gray.text };
+  }
+}
+
+function trendArrow(direction: StatCardTrendDirection) {
+  switch (direction) {
+    case StatCardTrendDirection.Up:
+      return '↑';
+    case StatCardTrendDirection.Down:
+      return '↓';
+    default:
+      return '→';
+  }
+}
+
+const SPARK_DOT_R = 3.5;
+const SPARK_PAD = SPARK_DOT_R + 1;
+
+function buildSparklinePath(points: number[], width: number, height: number) {
+  if (points.length < 2) {
+    return { line: '', fill: '', last: { x: width / 2, y: height / 2 } };
+  }
+
+  const innerW = width - SPARK_PAD * 2;
+  const innerH = height - SPARK_PAD * 2;
+  const stepX = innerW / (points.length - 1);
+  const coords = points.map((p, i) => {
+    const clamped = Math.min(1, Math.max(0, p));
+    return {
+      x: SPARK_PAD + i * stepX,
+      y: SPARK_PAD + (1 - clamped) * innerH,
+    };
+  });
+
+  let line = `M ${coords[0].x} ${coords[0].y}`;
+  for (let i = 1; i < coords.length; i += 1) {
+    const prev = coords[i - 1];
+    const curr = coords[i];
+    const cpx = (prev.x + curr.x) / 2;
+    line += ` C ${cpx} ${prev.y}, ${cpx} ${curr.y}, ${curr.x} ${curr.y}`;
+  }
+
+  const last = coords[coords.length - 1];
+  const fill = `${line} L ${last.x} ${height} L ${coords[0].x} ${height} Z`;
+
+  return { line, fill, last };
+}
+
+function Sparkline({ points, color }: { points: number[]; color: string }) {
+  const { line, fill, last } = buildSparklinePath(points, LAYOUT.sparklineW, LAYOUT.sparklineH);
+
+  return (
+    <Svg
+      width={LAYOUT.sparklineW}
+      height={LAYOUT.sparklineH}
+      viewBox={`0 0 ${LAYOUT.sparklineW} ${LAYOUT.sparklineH}`}
+      {...a11yHiddenProps()}>
+      <Defs>
+        <LinearGradient id="statSparkFill" x1="0" y1="0" x2="0" y2="1">
+          <Stop offset="0" stopColor={color} stopOpacity="0.22" />
+          <Stop offset="1" stopColor={color} stopOpacity="0.02" />
+        </LinearGradient>
+      </Defs>
+      <Path d={fill} fill="url(#statSparkFill)" />
+      <Path
+        d={line}
+        stroke={color}
+        strokeWidth={2.25}
+        fill="none"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <Circle cx={last.x} cy={last.y} r={SPARK_DOT_R} fill={color} />
+    </Svg>
+  );
+}
+
+const softShadow: ViewStyle =
+  Platform.OS === 'web'
+    ? ({ boxShadow: `0 8px 24px ${colors.boxShadowLight}` } as ViewStyle)
+    : {
+        ...segmentActiveShadow(),
+        shadowOpacity: 0.06,
+        shadowRadius: 12,
+        shadowOffset: { width: 0, height: 6 },
+      };
+
+export function StatCard({
+  label,
+  value,
+  valueSuffix,
+  subtitle,
+  icon,
+  iconTone = StatCardIconTone.Primary,
+  footerIcon = IconName.Success,
+  trend,
+  trendDirection,
+  sparkline,
+  style,
+}: StatCardProps) {
+  const showIcon = Boolean(icon && isIconName(icon));
+  const showTrend = Boolean(trend);
+  const showFooter = Boolean(subtitle);
+  const showFooterIcon = Boolean(footerIcon && isIconName(footerIcon));
+  const direction = resolveTrendDirection(trend, trendDirection);
+  const pill = trendPillColors(direction);
+  const accent = ICON_TONE_BG[iconTone];
+  const sparkPoints = sparkline === false ? null : (sparkline ?? DEFAULT_SPARKLINE);
+  const iconColor = colors.statCard.iconColor;
+
+  return (
+    <View
+      accessibilityRole="summary"
+      accessibilityLabel={label}
+      style={[styles.card, style]}>
+      <View style={styles.body}>
+        <View style={styles.topRow}>
+          {showIcon ? (
+            <View
+              style={[styles.iconWrap, { backgroundColor: accent }]}
+              {...a11yHiddenProps()}>
+              <Icon name={icon as string} size={LAYOUT.icon} color={iconColor} decorative />
+            </View>
+          ) : (
+            <View style={styles.topSpacer} />
+          )}
+
+          {showTrend ? (
+            <View style={[styles.trendPill, { backgroundColor: pill.bg }]}>
+              <Text style={[styles.trendPillText, { color: pill.text }]}>
+                {trendArrow(direction)} {trend}
+              </Text>
+            </View>
+          ) : null}
+        </View>
+
+        <View style={styles.metricRow}>
+          <View style={styles.metricText}>
+            <Text style={styles.label} numberOfLines={2}>
+              {label}
+            </Text>
+            <View style={styles.valueRow}>
+              <Text style={[styles.valueMain, { color: accent }]}>{value}</Text>
+              {valueSuffix ? <Text style={styles.valueSuffix}>{valueSuffix}</Text> : null}
+            </View>
+          </View>
+
+          {sparkPoints ? (
+            <View style={styles.sparklineWrap}>
+              <Sparkline points={sparkPoints} color={accent} />
+            </View>
+          ) : null}
+        </View>
+      </View>
+
+      {showFooter ? (
+        <View style={styles.footer}>
+          {showFooterIcon ? (
+            <Icon name={footerIcon as string} size={LAYOUT.footerIcon} color={accent} decorative />
+          ) : null}
+          <Text style={styles.subtitle} numberOfLines={1}>
+            {subtitle}
+          </Text>
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    width: '100%',
+    maxWidth: LAYOUT.maxWidth,
+    minWidth: 0,
+    backgroundColor: colors.statCard.surface,
+    borderRadius: radius.xl,
+    borderWidth: borders.width.thin,
+    borderColor: colors.borderSubtle,
+    overflow: 'hidden',
+    ...softShadow,
+  },
+  body: {
+    gap: spacing.sm,
+    padding: LAYOUT.padding,
+  },
+  topRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: spacing.sm,
+  },
+  topSpacer: {
+    flex: 1,
+  },
+  iconWrap: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: LAYOUT.iconWrap,
+    height: LAYOUT.iconWrap,
+    borderRadius: radius.md,
+  },
+  trendPill: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: spacing.sm,
+    paddingVertical: spacing.xs,
+    borderRadius: radius.pill,
+  },
+  trendPillText: {
+    fontFamily: FONT.family,
+    fontSize: FONT.trend.fontSize,
+    fontWeight: FONT.trend.fontWeight,
+    lineHeight: FONT.trend.lineHeight,
+  },
+  metricRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    justifyContent: 'space-between',
+    gap: spacing.sm,
+    minWidth: 0,
+  },
+  metricText: {
+    flex: 1,
+    minWidth: 0,
+    gap: spacing.xs,
+  },
+  label: {
+    fontFamily: FONT.family,
+    fontSize: FONT.label.fontSize,
+    fontWeight: FONT.label.fontWeight,
+    color: colors.statCard.label,
+    lineHeight: FONT.label.lineHeight,
+  },
+  valueRow: {
+    flexDirection: 'row',
+    alignItems: 'baseline',
+    gap: spacing.xs,
+  },
+  valueMain: {
+    fontFamily: FONT.family,
+    fontSize: FONT.value.fontSize,
+    fontWeight: FONT.value.fontWeight,
+    lineHeight: FONT.value.lineHeight,
+  },
+  valueSuffix: {
+    fontFamily: FONT.family,
+    fontSize: FONT.valueSuffix.fontSize,
+    fontWeight: FONT.valueSuffix.fontWeight,
+    color: colors.statCard.subtitle,
+    lineHeight: FONT.valueSuffix.lineHeight,
+  },
+  sparklineWrap: {
+    flexShrink: 0,
+    marginBottom: spacing.none,
+  },
+  footer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+    paddingHorizontal: LAYOUT.padding,
+    paddingVertical: spacing.sm,
+    borderTopWidth: borders.width.thin,
+    borderTopColor: colors.borderSubtle,
+    backgroundColor: colors.surfaceMuted,
+  },
+  subtitle: {
+    flex: 1,
+    minWidth: 0,
+    fontFamily: FONT.family,
+    fontSize: FONT.subtitle.fontSize,
+    fontWeight: FONT.subtitle.fontWeight,
+    color: colors.statCard.subtitle,
+    lineHeight: FONT.subtitle.lineHeight,
+  },
+});

package/src/components/StatCard/index.ts

@@ -0,0 +1,6 @@
+export {
+  StatCard,
+  StatCardIconTone,
+  StatCardTrendDirection,
+} from './StatCard';
+export type { StatCardProps } from './StatCard';

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,239 @@
+import { useEffect, useMemo, useState } from 'react';
+import { Pressable, ScrollView, StyleSheet, Text, View, type StyleProp, type ViewStyle } from 'react-native';
+
+import { borders, button as buttonTokens, colors, radius, spacing, typography } from '../../theme';
+import { Button, ButtonSize, ButtonVariant } from '../Button';
+
+export const TabsVariant = {
+  Container: 'container',
+  Undergo: 'undergo',
+} as const;
+
+export type TabsVariant = (typeof TabsVariant)[keyof typeof TabsVariant];
+
+export type TabsProps = {
+  tabCount?: number;
+  tabLabels?: string[];
+  activeIndex?: number;
+  variant?: TabsVariant;
+  onActiveIndexChange?: (index: number) => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+const MIN_TABS = 2;
+const MAX_TABS = 6;
+
+function tabCountInRange(tabCount: number) {
+  return Math.min(MAX_TABS, Math.max(MIN_TABS, Math.floor(tabCount)));
+}
+
+function clampIndex(index: number, length: number) {
+  const max = Math.max(0, length - 1);
+  return Math.min(max, Math.max(0, Math.floor(index)));
+}
+
+function tabLabel(index: number, tabLabels: string[]) {
+  const fromInput = tabLabels[index];
+  if (fromInput !== undefined && fromInput !== '') {
+    return fromInput;
+  }
+  return `Tab ${index + 1}`;
+}
+
+export function Tabs({
+  tabCount = MIN_TABS,
+  tabLabels = [],
+  activeIndex = 0,
+  variant = TabsVariant.Container,
+  onActiveIndexChange,
+  style,
+}: TabsProps) {
+  const length = tabCountInRange(tabCount);
+  const tabs = useMemo(() => Array.from({ length }, (_, index) => index), [length]);
+  const [selected, setSelected] = useState(() => clampIndex(activeIndex, length));
+
+  useEffect(() => {
+    setSelected(clampIndex(activeIndex, length));
+  }, [activeIndex, length]);
+
+  const isUndergo = variant === TabsVariant.Undergo;
+  const lineHeight = Math.round(typography.fontSize.sm * 1.3);
+  const hitExtra = Math.max(0, (buttonTokens.minTouch - lineHeight) / 2);
+  const tabHitSlop = hitExtra
+    ? { top: hitExtra, bottom: hitExtra, left: hitExtra, right: hitExtra }
+    : undefined;
+
+  function selectTab(index: number) {
+    const next = clampIndex(index, length);
+    if (next === selected) {
+      return;
+    }
+    setSelected(next);
+    onActiveIndexChange?.(next);
+  }
+
+  return (
+    <View
+      accessibilityRole="tablist"
+      style={[styles.host, isUndergo ? styles.hostUndergo : styles.hostContainer, style]}>
+      <View style={isUndergo ? styles.undergoFrame : styles.containerRule}>
+        <ScrollView
+          horizontal
+          bounces={false}
+          showsHorizontalScrollIndicator={false}
+          style={styles.scroller}
+          contentContainerStyle={[styles.list, isUndergo ? styles.listUndergo : styles.listContainer]}>
+          {tabs.map((index) => {
+            const active = index === selected;
+            const label = tabLabel(index, tabLabels);
+            return (
+              <View
+                key={index}
+                style={[
+                  styles.item,
+                  isUndergo && styles.itemUndergo,
+                  isUndergo && active && styles.itemUndergoActive,
+                  !isUndergo && styles.itemContainer,
+                ]}>
+                {isUndergo ? (
+                  <Button
+                    label={label}
+                    variant={ButtonVariant.TertiaryGray}
+                    size={ButtonSize.Medium}
+                    accessibilityLabel={label}
+                    fullWidth
+                    onPress={() => selectTab(index)}
+                    style={styles.triggerFill}
+                    contentStyle={[
+                      styles.triggerContent,
+                      styles.triggerUndergo,
+                      active && styles.triggerUndergoActive,
+                    ]}
+                  />
+                ) : (
+                  <Pressable
+                    accessibilityRole="tab"
+                    accessibilityState={{ selected: active }}
+                    accessibilityLabel={label}
+                    hitSlop={tabHitSlop}
+                    onPress={() => selectTab(index)}
+                    style={styles.containerPress}>
+                    <Text
+                      style={[
+                        styles.containerLabel,
+                        {
+                          lineHeight,
+                          color: active ? colors.primary.base : colors.tabs.inactiveLabel,
+                          fontWeight: active ? typography.fontWeight.large : typography.fontWeight.medium,
+                        },
+                      ]}>
+                      {label}
+                    </Text>
+                  </Pressable>
+                )}
+                {!isUndergo ? (
+                  <View style={[styles.containerIndicator, active && styles.containerIndicatorActive]} />
+                ) : null}
+              </View>
+            );
+          })}
+        </ScrollView>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  host: {
+    maxWidth: '100%',
+    alignSelf: 'center',
+  },
+  hostContainer: {
+    alignSelf: 'center',
+    maxWidth: '100%',
+  },
+  hostUndergo: {
+    alignSelf: 'center',
+    maxWidth: '100%',
+  },
+  containerRule: {
+    borderBottomWidth: borders.width.medium,
+    borderBottomColor: colors.tabs.rule,
+    overflow: 'visible',
+  },
+  undergoFrame: {
+    padding: spacing.xs,
+    borderRadius: radius.md,
+    borderWidth: borders.width.thin,
+    borderColor: colors.tabs.undergoFrameBorder,
+    backgroundColor: colors.tabs.undergoFrameBackground,
+  },
+  scroller: {
+    flexGrow: 0,
+    overflow: 'visible',
+  },
+  list: {
+    flexDirection: 'row',
+    flexWrap: 'nowrap',
+    alignItems: 'stretch',
+  },
+  listContainer: {
+    gap: spacing.md,
+    alignItems: 'flex-end',
+  },
+  listUndergo: {
+    gap: spacing.xs,
+    minHeight: buttonTokens.minTouch,
+  },
+  item: {
+    flexShrink: 0,
+  },
+  itemContainer: {
+    minHeight: buttonTokens.minTouch,
+    justifyContent: 'flex-end',
+    overflow: 'visible',
+  },
+  containerPress: {
+    minHeight: buttonTokens.minTouch,
+    paddingHorizontal: spacing.xs,
+    justifyContent: 'center',
+  },
+  containerLabel: {
+    fontFamily: typography.fontFamily.base,
+    fontSize: typography.fontSize.sm,
+  },
+  containerIndicator: {
+    height: borders.width.medium,
+    marginBottom: -borders.width.medium,
+    backgroundColor: colors.transparent,
+  },
+  containerIndicatorActive: {
+    height: borders.width.medium,
+    backgroundColor: colors.primary.base,
+  },
+  itemUndergo: {
+    minHeight: buttonTokens.minTouch,
+    justifyContent: 'center',
+    borderRadius: radius.md,
+  },
+  itemUndergoActive: {
+    backgroundColor: colors.tabs.undergoActiveSurface,
+    borderRadius: radius.md,
+  },
+  triggerFill: {
+    width: '100%',
+    alignSelf: 'stretch',
+  },
+  triggerContent: {
+    minHeight: buttonTokens.minTouch,
+    justifyContent: 'center',
+  },
+  triggerUndergo: {
+    paddingHorizontal: spacing.md,
+    backgroundColor: colors.transparent,
+    borderRadius: radius.md,
+  },
+  triggerUndergoActive: {
+    backgroundColor: colors.tabs.undergoActiveSurface,
+  },
+});

package/src/components/Tabs/index.ts

@@ -0,0 +1,2 @@
+export { Tabs, TabsVariant } from './Tabs';
+export type { TabsProps } from './Tabs';