@compsych/mobile-ui 1.0.0

package/src/Tooltip.tsx

@@ -0,0 +1,214 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { sys } from './tokens';
+
+export type TooltipVariant = 'filled' | 'elevated';
+/**
+ * The direction the arrow points — i.e. where the tooltip's target is
+ * relative to the bubble.
+ *
+ * `bottom` → bubble sits above target, arrow points down
+ * `top`    → bubble sits below target, arrow points up
+ * `left`   → bubble sits right of target, arrow points left
+ * `right`  → bubble sits left of target, arrow points right
+ * `none`   → no arrow
+ */
+export type TooltipDirection = 'none' | 'top' | 'bottom' | 'left' | 'right';
+
+export interface TooltipProps {
+  text: string;
+  variant?: TooltipVariant;
+  direction?: TooltipDirection;
+}
+
+const { colorRoles: cr, dimensions: dim, typeScale: ts } = sys;
+
+// ── Arrow dimensions ─────────────────────────────────────────────────────────
+const ARROW_BASE = 16; // px — wide axis
+const ARROW_HEIGHT = 6; // px — narrow axis
+
+// ── Component ────────────────────────────────────────────────────────────────
+
+export function Tooltip({
+  text,
+  variant = 'filled',
+  direction = 'none',
+}: TooltipProps) {
+  const isFilled = variant === 'filled';
+
+  const bg = isFilled
+    ? cr.surface.inverse.sysInverseSurface
+    : cr.surface.surfaceContainer.sysSurfaceContainerLowest;
+
+  const textColor = isFilled
+    ? cr.surface.inverse.sysInverseOnSurface
+    : cr.surface.surface.sysOnSurface;
+
+  // ── Arrow (CSS triangle using zero-size View + borders) ───────────────────
+  // Half-base for side calculations
+  const half = ARROW_BASE / 2;
+
+  function renderArrow() {
+    if (direction === 'none') return null;
+
+    // Shared transparent sides
+    const transparent = 'transparent';
+
+    let arrowStyle: object;
+
+    switch (direction) {
+      case 'bottom':
+        // Triangle pointing down — sits below bubble
+        arrowStyle = {
+          width: 0,
+          height: 0,
+          borderLeftWidth: half,
+          borderRightWidth: half,
+          borderTopWidth: ARROW_HEIGHT,
+          borderLeftColor: transparent,
+          borderRightColor: transparent,
+          borderTopColor: bg,
+        };
+        break;
+      case 'top':
+        // Triangle pointing up — sits above bubble
+        arrowStyle = {
+          width: 0,
+          height: 0,
+          borderLeftWidth: half,
+          borderRightWidth: half,
+          borderBottomWidth: ARROW_HEIGHT,
+          borderLeftColor: transparent,
+          borderRightColor: transparent,
+          borderBottomColor: bg,
+        };
+        break;
+      case 'left':
+        // Triangle pointing left — sits to the left of bubble
+        arrowStyle = {
+          width: 0,
+          height: 0,
+          borderTopWidth: half,
+          borderBottomWidth: half,
+          borderRightWidth: ARROW_HEIGHT,
+          borderTopColor: transparent,
+          borderBottomColor: transparent,
+          borderRightColor: bg,
+        };
+        break;
+      case 'right':
+        // Triangle pointing right — sits to the right of bubble
+        arrowStyle = {
+          width: 0,
+          height: 0,
+          borderTopWidth: half,
+          borderBottomWidth: half,
+          borderLeftWidth: ARROW_HEIGHT,
+          borderTopColor: transparent,
+          borderBottomColor: transparent,
+          borderLeftColor: bg,
+        };
+        break;
+    }
+
+    return <View accessible={false} style={arrowStyle!} />;
+  }
+
+  // ── Bubble ────────────────────────────────────────────────────────────────
+  const bubble = (
+    <View
+      accessible
+      accessibilityRole="text"
+      accessibilityLabel={text}
+      style={[
+        styles.bubble,
+        {
+          backgroundColor: bg,
+          paddingHorizontal: dim.spacing.padding.sysPadding12,
+          paddingVertical: dim.spacing.padding.sysPadding8,
+          borderRadius: dim.borderRadius.sysRadiusSm,
+        },
+        !isFilled && styles.elevated,
+        !isFilled && {
+          borderWidth: dim.borderWidth.sysStrokeThin,
+          borderColor: cr.outline.sysOutline,
+        },
+      ]}
+    >
+      <Text
+        style={{
+          color: textColor,
+          fontSize: ts.bodySmall.sysFontSize,
+          lineHeight: ts.bodySmall.sysLineHeight,
+          fontWeight: '400',
+          textAlign: 'center',
+          includeFontPadding: false,
+        }}
+      >
+        {text}
+      </Text>
+    </View>
+  );
+
+  // ── Layout — arrow position determines stacking order ────────────────────
+  if (direction === 'none') {
+    return bubble;
+  }
+
+  if (direction === 'bottom') {
+    return (
+      <View style={styles.colCenter}>
+        {bubble}
+        {renderArrow()}
+      </View>
+    );
+  }
+
+  if (direction === 'top') {
+    return (
+      <View style={styles.colCenter}>
+        {renderArrow()}
+        {bubble}
+      </View>
+    );
+  }
+
+  if (direction === 'right') {
+    return (
+      <View style={styles.rowCenter}>
+        {bubble}
+        {renderArrow()}
+      </View>
+    );
+  }
+
+  // left
+  return (
+    <View style={styles.rowCenter}>
+      {renderArrow()}
+      {bubble}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  bubble: {
+    alignSelf: 'flex-start',
+  },
+  elevated: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.06,
+    shadowRadius: 4,
+    elevation: 1,
+  },
+  colCenter: {
+    alignItems: 'center',
+    alignSelf: 'flex-start',
+  },
+  rowCenter: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    alignSelf: 'flex-start',
+  },
+});

package/src/index.ts

@@ -0,0 +1,62 @@
+// ComPsych Mobile UI — React Native Component Library
+// Version 1.0.0
+
+export { Alert } from './Alert';
+export type { AlertProps, AlertVariant, AlertSize } from './Alert';
+
+export { Avatar } from './Avatar';
+export type { AvatarProps, AvatarSize, AvatarVariant } from './Avatar';
+
+export { Badge } from './Badge';
+export type { BadgeProps, BadgeSize, BadgeStyle } from './Badge';
+
+export { Breadcrumb } from './Breadcrumb';
+export type { BreadcrumbProps, BreadcrumbItem, BreadcrumbSize } from './Breadcrumb';
+
+export { Button } from './Button';
+export type { ButtonProps, ButtonVariant, ButtonSize } from './Button';
+
+export { Card } from './Card';
+export type { CardProps, CardVariant, CardSize } from './Card';
+
+export { Checkbox } from './Checkbox';
+export type { CheckboxProps, CheckboxSize, CheckboxCheckedState } from './Checkbox';
+
+export { Chip } from './Chip';
+export type { ChipProps, ChipSize, ChipUsage } from './Chip';
+
+export { Divider } from './Divider';
+export type { DividerProps, DividerVariant, DividerWeight } from './Divider';
+
+export { EmptyState } from './EmptyState';
+export type { EmptyStateProps, EmptyStateStyle, EmptyStateViewport } from './EmptyState';
+
+export { Input } from './Input';
+export type { InputProps, InputSize } from './Input';
+
+export { Pagination } from './Pagination';
+export type { PaginationProps, PaginationSize } from './Pagination';
+
+export { ProgressTracker, ProgressBar } from './ProgressTracker';
+export type { ProgressTrackerProps, ProgressTrackerSize, ProgressBarProps, TrackerStep, StepState } from './ProgressTracker';
+
+export { RadioButton } from './RadioButton';
+export type { RadioButtonProps, RadioButtonSize } from './RadioButton';
+
+export { Slider } from './Slider';
+export type { SliderProps } from './Slider';
+
+export { Switch } from './Switch';
+export type { SwitchProps } from './Switch';
+
+export { Tooltip } from './Tooltip';
+export type { TooltipProps, TooltipVariant, TooltipDirection } from './Tooltip';
+
+export { BodyText } from './BodyText';
+export type { BodyTextProps, BodyVariant } from './BodyText';
+
+export { HeaderText } from './HeaderText';
+export type { HeaderTextProps, HeaderVariant } from './HeaderText';
+
+// Re-export tokens for consumers who need direct access
+export { sys } from './tokens';

package/src/tokens.ts

@@ -0,0 +1,121 @@
+export const sys = {
+  colorRoles: {
+    accent: {
+      primary: {
+        sysPrimary: '#075cba',
+        sysOnPrimary: '#ffffff',
+        sysPrimaryContainer: '#070f36',
+      },
+    },
+    addOn: {
+      primaryFixed: {
+        sysOnPrimaryFixed: '#075cba',
+        sysOnPrimaryFixedVariant: '#4285f4',
+        sysPrimaryFixedDim: '#e3f2fd',
+      },
+    },
+    custom: {
+      info: {
+        sysInfo: '#226cee',
+        sysInfoContainer: '#daecff',
+        sysOnInfo: '#ffffff',
+        sysOnInfoContainer: '#162755',
+      },
+      success: {
+        sysSuccess: '#278647',
+        sysSuccessContainer: '#c4e9d0',
+        sysOnSuccess: '#ffffff',
+        sysOnSuccessContainer: '#030c09',
+      },
+      warning: {
+        sysWarning: '#d67d00',
+        sysWarningContainer: '#fdeed9',
+        sysOnWarning: '#ffffff',
+        sysOnWarningContainer: '#3a2304',
+      },
+    },
+    error: {
+      sysError: '#d82727',
+      sysErrorContainer: '#f7d4d4',
+      sysOnError: '#ffffff',
+      sysOnErrorContainer: '#570f0f',
+    },
+    outline: {
+      sysOutline: '#ebecf0',
+      sysOutlineFixed: '#8a96a6',
+      sysOutlineVariant: '#d7dbe0',
+    },
+    surface: {
+      surface: {
+        sysSurface: '#f3f4f6',
+        sysOnSurface: '#1b1d22',
+        sysOnSurfaceVariant: '#565f6c',
+      },
+      surfaceContainer: {
+        sysSurfaceContainerLowest: '#ffffff',
+        sysSurfaceContainerLow: '#f9fafb',
+        sysSurfaceContainer: '#f3f4f6',
+        sysSurfaceContainerHighest: '#e6e8ea',
+      },
+      inverse: {
+        sysInverseSurface: '#565f6c',
+        sysInverseOnSurface: '#ffffff',
+      },
+    },
+    transparent: {
+      neutral: {
+        sysBlack10: '#0000001a',
+        sysWhite20: '#ffffff33',
+      },
+      primary: {
+        sysPrimary08: '#075cba14',
+      },
+    },
+  },
+  dimensions: {
+    borderRadius: {
+      sysRadiusXs: 4,
+      sysRadiusSm: 8,
+      sysRadiusMd: 12,
+      sysRadiusLg: 16,
+      sysRadiusXl: 24,
+      sysRadiusFull: 999,
+    },
+    borderWidth: {
+      sysStrokeThin: 1,
+      sysStrokeMedium: 1.5,
+      sysStrokeThick: 2,
+      sysStrokeBold: 4,
+    },
+    spacing: {
+      padding: {
+        sysPadding2: 2,
+        sysPadding4: 4,
+        sysPadding8: 8,
+        sysPadding12: 12,
+        sysPadding16: 16,
+        sysPadding20: 20,
+        sysPadding24: 24,
+        sysPadding32: 32,
+        sysPadding48: 48,
+      },
+    },
+  },
+  typeScale: {
+    displayLarge:  { sysFontSize: 80, sysLineHeight: 80,   sysTracking: -2.4,  sysFontWeight: 'regular', sysFontWeightEmphasized: 'medium' },
+    displayMedium: { sysFontSize: 72, sysLineHeight: 79.2, sysTracking: -1.44, sysFontWeight: 'regular', sysFontWeightEmphasized: 'medium' },
+    displaySmall:  { sysFontSize: 64, sysLineHeight: 76.8, sysTracking: -0.64, sysFontWeight: 'regular', sysFontWeightEmphasized: 'medium' },
+    headlineLarge:  { sysFontSize: 48, sysLineHeight: 57.6, sysTracking: -0.48, sysFontWeight: 'regular', sysFontWeightEmphasized: 'medium' },
+    headlineMedium: { sysFontSize: 40, sysLineHeight: 48,   sysTracking: 0,     sysFontWeight: 'regular', sysFontWeightEmphasized: 'medium' },
+    headlineSmall:  { sysFontSize: 32, sysLineHeight: 38.4, sysTracking: 0,     sysFontWeight: 'regular', sysFontWeightEmphasized: 'medium' },
+    titleLarge:  { sysFontSize: 28, sysLineHeight: 36.4, sysTracking: 0, sysFontWeight: 'regular', sysFontWeightEmphasized: 'medium' },
+    titleMedium: { sysFontSize: 24, sysLineHeight: 31.2, sysTracking: 0, sysFontWeight: 'regular', sysFontWeightEmphasized: 'medium' },
+    titleSmall:  { sysFontSize: 20, sysLineHeight: 28,   sysTracking: 0, sysFontWeight: 'regular', sysFontWeightEmphasized: 'medium' },
+    bodyLarge:  { sysFontSize: 20, sysLineHeight: 30, sysTracking: 0, sysFontWeight: 'regular', sysFontWeightEmphasized: 'medium' },
+    bodyMedium: { sysFontSize: 16, sysLineHeight: 24, sysTracking: 0, sysFontWeight: 'regular', sysFontWeightEmphasized: 'medium' },
+    bodySmall:  { sysFontSize: 14, sysLineHeight: 20, sysTracking: 0, sysFontWeight: 'regular', sysFontWeightEmphasized: 'medium' },
+    labelLarge:  { sysFontSize: 16, sysLineHeight: 22.4, sysTracking: 0,    sysFontWeight: 'regular', sysFontWeightEmphasized: 'medium' },
+    labelMedium: { sysFontSize: 14, sysLineHeight: 20,   sysTracking: 0.07, sysFontWeight: 'medium',  sysFontWeightEmphasized: 'semibold' },
+    labelSmall:  { sysFontSize: 12, sysLineHeight: 18,   sysTracking: 0.12, sysFontWeight: 'medium',  sysFontWeightEmphasized: 'semibold' },
+  },
+} as const;