@sublime-ui/library 0.1.0

package/src/components/Badge/Badge.tsx

@@ -0,0 +1,89 @@
+import { Chip } from '@mui/material';
+import { useTokens } from '../../provider/useTokens.js';
+import type { ResolvedTokens } from '../../provider/TokenContext.js';
+import type { Tone } from '../common.js';
+import type { BadgeProps, BadgeVariant } from './Badge.types.js';
+
+interface ColorPair {
+  bg: string;
+  fg: string;
+}
+
+const solidPair = (c: ResolvedTokens['color'], tone: Tone): ColorPair => {
+  switch (tone) {
+    case 'primary':
+      return { bg: c.primary, fg: c.primaryFg };
+    case 'success':
+      return { bg: c.success, fg: c.primaryFg };
+    case 'danger':
+      return { bg: c.danger, fg: c.primaryFg };
+    case 'warning':
+      return { bg: c.warning, fg: c.primaryFg };
+    case 'info':
+      return { bg: c.info, fg: c.primaryFg };
+    case 'neutral':
+    default:
+      return { bg: c.secondary, fg: c.secondaryFg };
+  }
+};
+
+const softPair = (c: ResolvedTokens['color'], tone: Tone): ColorPair => {
+  switch (tone) {
+    case 'primary':
+      return { bg: c.primarySoftBg, fg: c.primarySoftFg };
+    case 'success':
+      return { bg: c.successSoftBg, fg: c.successSoftFg };
+    case 'danger':
+      return { bg: c.dangerSoftBg, fg: c.dangerSoftFg };
+    case 'warning':
+      return { bg: c.warningSoftBg, fg: c.warningSoftFg };
+    case 'info':
+      return { bg: c.infoSoftBg, fg: c.infoSoftFg };
+    case 'neutral':
+    default:
+      return { bg: c.surfaceHover, fg: c.mutedFg };
+  }
+};
+
+const mutedPair = (c: ResolvedTokens['color']): ColorPair => ({
+  bg: c.surfaceHover,
+  fg: c.mutedFg,
+});
+
+const pairFor = (
+  c: ResolvedTokens['color'],
+  tone: Tone,
+  variant: BadgeVariant,
+): ColorPair => {
+  if (variant === 'solid') return solidPair(c, tone);
+  if (variant === 'muted') return mutedPair(c);
+  return softPair(c, tone);
+};
+
+export function Badge({
+  label,
+  tone = 'neutral',
+  variant = 'soft',
+  icon,
+  testID,
+}: BadgeProps) {
+  const tokens = useTokens();
+  const { bg, fg } = pairFor(tokens.color, tone, variant);
+  return (
+    <Chip
+      size="small"
+      label={label}
+      data-testid={testID}
+      sx={{
+        backgroundColor: bg,
+        color: fg,
+        borderRadius: `${tokens.radii.full}px`,
+        fontWeight: tokens.typography.weights.medium,
+        ...(icon ? { '& .MuiChip-icon': { color: fg } } : {}),
+      }}
+      {...(icon
+        ? { icon: <span className="material-icons" aria-hidden>{icon}</span> }
+        : {})}
+    />
+  );
+}

package/src/components/Badge/Badge.types.ts

@@ -0,0 +1,11 @@
+import type { Tone } from '../common.js';
+
+export type BadgeVariant = 'solid' | 'soft' | 'muted';
+
+export interface BadgeProps {
+  label: string;
+  tone?: Tone;
+  variant?: BadgeVariant;
+  icon?: string;
+  testID?: string;
+}

package/src/components/Badge/index.ts

@@ -0,0 +1,2 @@
+export { Badge } from './Badge.js';
+export type { BadgeProps } from './Badge.types.js';

package/src/components/Banner/Banner.native.tsx

@@ -0,0 +1,89 @@
+import { View } from 'react-native';
+import { Text, IconButton } from 'react-native-paper';
+import { useTokens } from '../../provider/useTokens.js';
+import type { ResolvedTokens } from '../../provider/TokenContext.js';
+import type { Tone } from '../common.js';
+import type { BannerProps } from './Banner.types.js';
+
+interface ColorPair {
+  bg: string;
+  fg: string;
+}
+
+const softPair = (c: ResolvedTokens['color'], tone: Tone): ColorPair => {
+  switch (tone) {
+    case 'success':
+      return { bg: c.successSoftBg, fg: c.successSoftFg };
+    case 'danger':
+      return { bg: c.dangerSoftBg, fg: c.dangerSoftFg };
+    case 'warning':
+      return { bg: c.warningSoftBg, fg: c.warningSoftFg };
+    case 'info':
+      return { bg: c.infoSoftBg, fg: c.infoSoftFg };
+    case 'primary':
+    case 'neutral':
+    default:
+      return { bg: c.primarySoftBg, fg: c.primarySoftFg };
+  }
+};
+
+export function Banner({
+  tone = 'info',
+  title,
+  children,
+  onClose,
+  action,
+  testID,
+}: BannerProps) {
+  const tokens = useTokens();
+  const { bg, fg } = softPair(tokens.color, tone);
+  return (
+    <View
+      {...(testID ? { testID } : {})}
+      style={{
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        backgroundColor: bg,
+        borderColor: tokens.color.glassBorder,
+        borderWidth: 1,
+        borderRadius: tokens.radii.md,
+        paddingHorizontal: tokens.spacing.md,
+        paddingVertical: tokens.spacing.sm,
+      }}
+    >
+      <View style={{ flex: 1 }}>
+        {title ? (
+          <Text
+            style={{
+              color: fg,
+              fontSize: tokens.typography.sizes.md,
+              fontWeight: String(tokens.typography.weights.semibold) as '600',
+              marginBottom: tokens.spacing.xs,
+            }}
+          >
+            {title}
+          </Text>
+        ) : null}
+        {typeof children === 'string' ? (
+          <Text style={{ color: fg, fontSize: tokens.typography.sizes.sm }}>
+            {children}
+          </Text>
+        ) : (
+          children
+        )}
+        {action ? (
+          <View style={{ marginTop: tokens.spacing.sm }}>{action}</View>
+        ) : null}
+      </View>
+      {onClose ? (
+        <IconButton
+          icon="close"
+          size={tokens.typography.sizes.md}
+          iconColor={fg}
+          onPress={onClose}
+          accessibilityLabel="close"
+        />
+      ) : null}
+    </View>
+  );
+}

package/src/components/Banner/Banner.tsx

@@ -0,0 +1,78 @@
+import { Alert, AlertTitle } from '@mui/material';
+import type { AlertColor } from '@mui/material';
+import { useTokens } from '../../provider/useTokens.js';
+import type { ResolvedTokens } from '../../provider/TokenContext.js';
+import type { Tone } from '../common.js';
+import type { BannerProps } from './Banner.types.js';
+
+const severityFor = (tone: Tone): AlertColor => {
+  switch (tone) {
+    case 'success':
+      return 'success';
+    case 'danger':
+      return 'error';
+    case 'warning':
+      return 'warning';
+    case 'primary':
+    case 'info':
+    case 'neutral':
+    default:
+      return 'info';
+  }
+};
+
+interface ColorPair {
+  bg: string;
+  fg: string;
+}
+
+const softPair = (c: ResolvedTokens['color'], tone: Tone): ColorPair => {
+  switch (tone) {
+    case 'success':
+      return { bg: c.successSoftBg, fg: c.successSoftFg };
+    case 'danger':
+      return { bg: c.dangerSoftBg, fg: c.dangerSoftFg };
+    case 'warning':
+      return { bg: c.warningSoftBg, fg: c.warningSoftFg };
+    case 'info':
+      return { bg: c.infoSoftBg, fg: c.infoSoftFg };
+    case 'primary':
+    case 'neutral':
+    default:
+      return { bg: c.primarySoftBg, fg: c.primarySoftFg };
+  }
+};
+
+export function Banner({
+  tone = 'info',
+  title,
+  children,
+  onClose,
+  action,
+  testID,
+}: BannerProps) {
+  const tokens = useTokens();
+  const { bg, fg } = softPair(tokens.color, tone);
+  return (
+    <Alert
+      severity={severityFor(tone)}
+      data-testid={testID}
+      {...(onClose ? { onClose } : {})}
+      {...(action ? { action } : {})}
+      sx={{
+        backgroundColor: bg,
+        color: fg,
+        borderRadius: `${tokens.radii.md}px`,
+        '& .MuiAlert-icon': { color: fg },
+        '& .MuiAlert-action': { color: fg },
+      }}
+    >
+      {title ? (
+        <AlertTitle sx={{ fontWeight: tokens.typography.weights.semibold }}>
+          {title}
+        </AlertTitle>
+      ) : null}
+      {children}
+    </Alert>
+  );
+}

package/src/components/Banner/Banner.types.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import type { Tone } from '../common.js';
+
+export interface BannerProps {
+  tone?: Tone;
+  title?: string;
+  children: ReactNode;
+  onClose?: () => void;
+  action?: ReactNode;
+  testID?: string;
+}

package/src/components/Banner/index.ts

@@ -0,0 +1,2 @@
+export { Banner } from './Banner.js';
+export type { BannerProps } from './Banner.types.js';

package/src/components/BottomNav/BottomNav.native.tsx

@@ -0,0 +1,87 @@
+import { View, Pressable } from 'react-native';
+import { Surface, Text, Icon } from 'react-native-paper';
+import { useTokens } from '../../provider/useTokens.js';
+import type { NavItem } from '../common.js';
+import type { BottomNavProps } from './BottomNav.types.js';
+
+function NavBadge({ value, fg, bg }: { value: string | number; fg: string; bg: string }) {
+  return (
+    <View
+      style={{
+        position: 'absolute',
+        top: -4,
+        right: -10,
+        minWidth: 16,
+        height: 16,
+        paddingHorizontal: 4,
+        borderRadius: 8,
+        backgroundColor: bg,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <Text style={{ color: fg, fontSize: 10, fontWeight: '600' as '600' }}>{String(value)}</Text>
+    </View>
+  );
+}
+
+export function BottomNav({ items, activeKey, onSelect, testID }: BottomNavProps) {
+  const tokens = useTokens();
+  return (
+    <Surface
+      elevation={2}
+      {...(testID ? { testID } : {})}
+      style={{
+        flexDirection: 'row',
+        backgroundColor: tokens.color.glassBg,
+        borderTopColor: tokens.color.glassBorder,
+        borderTopWidth: 1,
+        paddingVertical: tokens.spacing.xs,
+      }}
+    >
+      {items.map((item: NavItem) => {
+        const active = item.key === activeKey;
+        const fg = active ? tokens.color.primarySoftFg : tokens.color.mutedFg;
+        return (
+          <Pressable
+            key={item.key}
+            onPress={() => onSelect(item.key)}
+            accessibilityRole="button"
+            accessibilityState={{ selected: active }}
+            testID={`${testID ?? 'bottomnav'}-${item.key}`}
+            style={{
+              flex: 1,
+              alignItems: 'center',
+              justifyContent: 'center',
+              paddingVertical: tokens.spacing.sm,
+              borderRadius: tokens.radii.md,
+              backgroundColor: active ? tokens.color.primarySoftBg : 'transparent',
+            }}
+          >
+            <View>
+              <Icon source={item.icon} size={tokens.typography.sizes.lg} color={fg} />
+              {item.badge != null ? (
+                <NavBadge
+                  value={item.badge}
+                  bg={tokens.color.danger}
+                  fg={tokens.color.primaryFg}
+                />
+              ) : null}
+            </View>
+            <Text
+              style={{
+                color: fg,
+                fontSize: tokens.typography.sizes.xs,
+                fontWeight: String(
+                  active ? tokens.typography.weights.semibold : tokens.typography.weights.medium,
+                ) as '600',
+              }}
+            >
+              {item.label}
+            </Text>
+          </Pressable>
+        );
+      })}
+    </Surface>
+  );
+}

package/src/components/BottomNav/BottomNav.tsx

@@ -0,0 +1,9 @@
+import type { BottomNavProps } from './BottomNav.types.js';
+
+/** Web stub: BottomNav is a mobile-only component. */
+export function BottomNav(_props: BottomNavProps): null {
+  if (process.env.NODE_ENV !== 'production') {
+    console.warn('BottomNav is mobile-only');
+  }
+  return null;
+}

package/src/components/BottomNav/BottomNav.types.ts

@@ -0,0 +1,8 @@
+import type { NavItem } from '../common.js';
+
+export interface BottomNavProps {
+  items: NavItem[];
+  activeKey: string;
+  onSelect: (key: string) => void;
+  testID?: string;
+}

package/src/components/BottomNav/index.ts

@@ -0,0 +1,2 @@
+export { BottomNav } from './BottomNav.js';
+export type { BottomNavProps } from './BottomNav.types.js';

package/src/components/Button/Button.native.tsx

@@ -0,0 +1,27 @@
+import { Button as PaperButton } from 'react-native-paper';
+import { useTokens } from '../../provider/useTokens.js';
+import type { ButtonProps, Variant } from './Button.types.js';
+
+const paperMode = (v: Variant): 'contained' | 'outlined' | 'text' | 'contained-tonal' =>
+  v === 'solid' ? 'contained' : v === 'soft' ? 'contained-tonal' : v === 'outline' ? 'outlined' : 'text';
+
+export function Button({
+  children, onPress, variant = 'solid', size = 'md',
+  disabled, loading, icon, testID,
+}: ButtonProps) {
+  const tokens = useTokens();
+  return (
+    <PaperButton
+      mode={paperMode(variant)}
+      onPress={onPress ?? (() => {})}
+      disabled={Boolean(disabled || loading)}
+      loading={Boolean(loading)}
+      compact={size === 'sm'}
+      style={{ borderRadius: tokens.radii.md }}
+      {...(icon !== undefined ? { icon } : {})}
+      {...(testID !== undefined ? { testID } : {})}
+    >
+      {children}
+    </PaperButton>
+  );
+}

package/src/components/Button/Button.tsx

@@ -0,0 +1,37 @@
+import { Button as MuiButton, CircularProgress } from '@mui/material';
+import { useTokens } from '../../provider/useTokens.js';
+import type { ButtonProps, Variant, Tone } from './Button.types.js';
+
+const muiVariant = (v: Variant): 'contained' | 'outlined' | 'text' =>
+  v === 'solid' ? 'contained' : v === 'outline' ? 'outlined' : 'text';
+
+const muiColor = (t: Tone): 'primary' | 'success' | 'error' | 'warning' | 'info' | 'inherit' =>
+  t === 'danger' ? 'error' : t === 'neutral' ? 'inherit' : t;
+
+export function Button({
+  children, onPress, variant = 'solid', tone = 'primary', size = 'md',
+  disabled, loading, fullWidth, testID,
+}: ButtonProps) {
+  const tokens = useTokens();
+  const soft = variant === 'soft';
+  return (
+    <MuiButton
+      variant={muiVariant(variant)}
+      color={muiColor(tone)}
+      size={size === 'md' ? 'medium' : size === 'sm' ? 'small' : 'large'}
+      disabled={Boolean(disabled || loading)}
+      fullWidth={Boolean(fullWidth)}
+      onClick={onPress}
+      data-testid={testID}
+      sx={{
+        borderRadius: `${tokens.radii.md}px`,
+        textTransform: 'none',
+        fontWeight: tokens.typography.weights.semibold,
+        ...(soft ? { backgroundColor: tokens.color.primarySoftBg, color: tokens.color.primarySoftFg, '&:hover': { backgroundColor: tokens.color.primarySoftBg } } : {}),
+      }}
+      startIcon={loading ? <CircularProgress size={16} color="inherit" /> : undefined}
+    >
+      {children}
+    </MuiButton>
+  );
+}

package/src/components/Button/Button.types.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+import type { Variant, Tone, Size } from '../common.js';
+
+export type { Variant, Tone, Size };
+
+export interface ButtonProps {
+  children: ReactNode;
+  onPress?: () => void;
+  variant?: Variant;
+  tone?: Tone;
+  size?: Size;
+  disabled?: boolean;
+  loading?: boolean;
+  icon?: string;
+  fullWidth?: boolean;
+  testID?: string;
+}

package/src/components/Button/index.ts

@@ -0,0 +1,2 @@
+export { Button } from './Button.js';
+export type { ButtonProps } from './Button.types.js';

package/src/components/Card/Card.native.tsx

@@ -0,0 +1,24 @@
+import { View, Pressable } from 'react-native';
+import { Surface } from 'react-native-paper';
+import { useTokens } from '../../provider/useTokens.js';
+import type { CardProps } from './Card.types.js';
+
+export function Card({ children, onPress, padded = true, testID }: CardProps) {
+  const tokens = useTokens();
+  const surfaceStyle = {
+    backgroundColor: tokens.color.glassBg,
+    borderColor: tokens.color.glassBorder,
+    borderWidth: 1,
+    borderRadius: tokens.radii.lg,
+    padding: padded ? tokens.spacing.lg : 0,
+  };
+  return (
+    <Surface elevation={1} style={surfaceStyle} {...(testID ? { testID } : {})}>
+      {onPress ? (
+        <Pressable onPress={onPress}>{children}</Pressable>
+      ) : (
+        <View>{children}</View>
+      )}
+    </Surface>
+  );
+}

package/src/components/Card/Card.tsx

@@ -0,0 +1,30 @@
+import { Card as MuiCard, CardActionArea } from '@mui/material';
+import { useTokens } from '../../provider/useTokens.js';
+import type { CardProps } from './Card.types.js';
+
+export function Card({ children, onPress, padded = true, testID }: CardProps) {
+  const tokens = useTokens();
+  const pad = padded ? `${tokens.spacing.lg}px` : 0;
+  const body = onPress ? (
+    <CardActionArea onClick={onPress} sx={{ p: pad }}>
+      {children}
+    </CardActionArea>
+  ) : (
+    children
+  );
+  return (
+    <MuiCard
+      elevation={0}
+      data-testid={testID}
+      sx={{
+        backgroundColor: tokens.color.glassBg,
+        border: `1px solid ${tokens.color.glassBorder}`,
+        borderRadius: `${tokens.radii.lg}px`,
+        boxShadow: tokens.shadows.sm,
+        ...(onPress ? {} : { p: pad }),
+      }}
+    >
+      {body}
+    </MuiCard>
+  );
+}

package/src/components/Card/Card.types.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+
+export interface CardProps {
+  children: ReactNode;
+  onPress?: () => void;
+  padded?: boolean;
+  testID?: string;
+}

package/src/components/Card/index.ts

@@ -0,0 +1,2 @@
+export { Card } from './Card.js';
+export type { CardProps } from './Card.types.js';

package/src/components/Checkbox/Checkbox.native.tsx

@@ -0,0 +1,58 @@
+import { Checkbox as PaperCheckbox } from 'react-native-paper';
+import { useTokens } from '../../provider/useTokens.js';
+import type { ResolvedTokens } from '../../provider/TokenContext.js';
+import type { Tone } from '../common.js';
+import type { CheckboxProps } from './Checkbox.types.js';
+
+const toneColor = (c: ResolvedTokens['color'], tone: Tone): string => {
+  switch (tone) {
+    case 'success':
+      return c.success;
+    case 'danger':
+      return c.danger;
+    case 'warning':
+      return c.warning;
+    case 'info':
+      return c.info;
+    case 'neutral':
+      return c.secondary;
+    case 'primary':
+    default:
+      return c.primary;
+  }
+};
+
+export function Checkbox({
+  checked,
+  onChange,
+  label,
+  disabled,
+  tone = 'primary',
+  testID,
+}: CheckboxProps) {
+  const tokens = useTokens();
+  const color = toneColor(tokens.color, tone);
+  const status = checked ? 'checked' : 'unchecked';
+  if (label === undefined) {
+    return (
+      <PaperCheckbox
+        status={status}
+        onPress={() => onChange(!checked)}
+        disabled={disabled ?? false}
+        color={color}
+        {...(testID === undefined ? {} : { testID })}
+      />
+    );
+  }
+  return (
+    <PaperCheckbox.Item
+      label={label}
+      status={status}
+      onPress={() => onChange(!checked)}
+      disabled={disabled ?? false}
+      color={color}
+      labelStyle={{ color: tokens.color.foreground }}
+      {...(testID === undefined ? {} : { testID })}
+    />
+  );
+}

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,35 @@
+import { Checkbox as MuiCheckbox, FormControlLabel } from '@mui/material';
+import type { Tone } from '../common.js';
+import type { CheckboxProps } from './Checkbox.types.js';
+
+const muiColor = (
+  t: Tone,
+): 'primary' | 'success' | 'error' | 'warning' | 'info' | 'default' =>
+  t === 'danger' ? 'error' : t === 'neutral' ? 'default' : t;
+
+export function Checkbox({
+  checked,
+  onChange,
+  label,
+  disabled,
+  tone = 'primary',
+  testID,
+}: CheckboxProps) {
+  const control = (
+    <MuiCheckbox
+      checked={checked}
+      onChange={(e) => onChange(e.target.checked)}
+      disabled={disabled}
+      color={muiColor(tone)}
+      data-testid={testID}
+    />
+  );
+  if (label === undefined) return control;
+  return (
+    <FormControlLabel
+      control={control}
+      label={label}
+      {...(disabled === undefined ? {} : { disabled })}
+    />
+  );
+}

package/src/components/Checkbox/Checkbox.types.ts

@@ -0,0 +1,15 @@
+import type { Tone } from '../common.js';
+
+export interface CheckboxProps {
+  /** Whether the checkbox is checked. */
+  checked: boolean;
+  /** Called with the new checked value when toggled. */
+  onChange: (checked: boolean) => void;
+  /** Optional label rendered beside the checkbox. */
+  label?: string;
+  /** Disables interaction. */
+  disabled?: boolean;
+  /** Color tone applied to the checked state. */
+  tone?: Tone;
+  testID?: string;
+}

package/src/components/Checkbox/index.ts

@@ -0,0 +1,2 @@
+export { Checkbox } from './Checkbox.js';
+export type { CheckboxProps } from './Checkbox.types.js';