@sublime-ui/library 0.1.0

package/src/components/Dialog/Dialog.native.tsx

@@ -0,0 +1,28 @@
+import { Portal, Dialog as PaperDialog, Text } from 'react-native-paper';
+import { useTokens } from '../../provider/useTokens.js';
+import type { DialogProps } from './Dialog.types.js';
+
+export function Dialog({ open, onClose, title, children, actions, testID }: DialogProps) {
+  const tokens = useTokens();
+  return (
+    <Portal>
+      <PaperDialog
+        visible={open}
+        onDismiss={onClose}
+        style={{
+          backgroundColor: tokens.color.glassBg,
+          borderColor: tokens.color.glassBorder,
+          borderWidth: 1,
+          borderRadius: tokens.radii.lg,
+        }}
+        {...(testID ? { testID } : {})}
+      >
+        {title ? <PaperDialog.Title>{title}</PaperDialog.Title> : null}
+        <PaperDialog.Content>
+          {typeof children === 'string' ? <Text>{children}</Text> : children}
+        </PaperDialog.Content>
+        {actions ? <PaperDialog.Actions>{actions}</PaperDialog.Actions> : null}
+      </PaperDialog>
+    </Portal>
+  );
+}

package/src/components/Dialog/Dialog.tsx

@@ -0,0 +1,49 @@
+import {
+  Dialog as MuiDialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  IconButton,
+} from '@mui/material';
+import { useTokens } from '../../provider/useTokens.js';
+import type { DialogProps } from './Dialog.types.js';
+
+export function Dialog({ open, onClose, title, children, actions, testID }: DialogProps) {
+  const tokens = useTokens();
+  return (
+    <MuiDialog
+      open={open}
+      onClose={onClose}
+      data-testid={testID}
+      PaperProps={{
+        sx: {
+          backgroundColor: tokens.color.glassBg,
+          border: `1px solid ${tokens.color.glassBorder}`,
+          borderRadius: `${tokens.radii.lg}px`,
+          backgroundImage: 'none',
+        },
+      }}
+    >
+      {title ? (
+        <DialogTitle
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            fontWeight: tokens.typography.weights.semibold,
+            color: tokens.color.foreground,
+          }}
+        >
+          {title}
+          <IconButton aria-label="close" onClick={onClose} size="small" edge="end">
+            <span className="material-icons" aria-hidden>
+              close
+            </span>
+          </IconButton>
+        </DialogTitle>
+      ) : null}
+      <DialogContent sx={{ color: tokens.color.foreground }}>{children}</DialogContent>
+      {actions ? <DialogActions>{actions}</DialogActions> : null}
+    </MuiDialog>
+  );
+}

package/src/components/Dialog/Dialog.types.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+
+export interface DialogProps {
+  open: boolean;
+  onClose: () => void;
+  title?: string;
+  children: ReactNode;
+  actions?: ReactNode;
+  testID?: string;
+}

package/src/components/Dialog/index.ts

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

package/src/components/Divider/Divider.native.tsx

@@ -0,0 +1,30 @@
+import { View } from 'react-native';
+import { Divider as PaperDivider } from 'react-native-paper';
+import { useTokens } from '../../provider/useTokens.js';
+import type { DividerProps } from './Divider.types.js';
+
+export function Divider({ vertical, inset, testID }: DividerProps) {
+  const tokens = useTokens();
+  if (vertical) {
+    return (
+      <View
+        accessibilityRole="none"
+        style={{
+          alignSelf: 'stretch',
+          width: 1,
+          backgroundColor: tokens.color.divider,
+        }}
+        {...(testID ? { testID } : {})}
+      />
+    );
+  }
+  return (
+    <PaperDivider
+      style={{
+        backgroundColor: tokens.color.divider,
+        marginLeft: inset ? tokens.spacing.lg : 0,
+      }}
+      {...(testID ? { testID } : {})}
+    />
+  );
+}

package/src/components/Divider/Divider.tsx

@@ -0,0 +1,16 @@
+import { Divider as MuiDivider } from '@mui/material';
+import { useTokens } from '../../provider/useTokens.js';
+import type { DividerProps } from './Divider.types.js';
+
+export function Divider({ vertical, inset, testID }: DividerProps) {
+  const tokens = useTokens();
+  return (
+    <MuiDivider
+      orientation={vertical ? 'vertical' : 'horizontal'}
+      flexItem={vertical === true}
+      {...(inset ? { variant: 'inset' as const } : {})}
+      data-testid={testID}
+      sx={{ borderColor: tokens.color.divider }}
+    />
+  );
+}

package/src/components/Divider/Divider.types.ts

@@ -0,0 +1,5 @@
+export interface DividerProps {
+  vertical?: boolean;
+  inset?: boolean;
+  testID?: string;
+}

package/src/components/Divider/index.ts

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

package/src/components/Drawer/Drawer.native.tsx

@@ -0,0 +1,113 @@
+import { View, ScrollView, 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 { DrawerProps } from './Drawer.types.js';
+
+function DrawerBadge({ value, fg, bg }: { value: string | number; fg: string; bg: string }) {
+  return (
+    <View
+      style={{
+        minWidth: 18,
+        height: 18,
+        paddingHorizontal: 5,
+        borderRadius: 9,
+        backgroundColor: bg,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <Text style={{ color: fg, fontSize: 10, fontWeight: '600' as '600' }}>{String(value)}</Text>
+    </View>
+  );
+}
+
+export function Drawer({ items, activeKey, onSelect, header, footer, testID }: DrawerProps) {
+  const tokens = useTokens();
+  return (
+    <Surface
+      elevation={1}
+      {...(testID ? { testID } : {})}
+      style={{
+        flex: 1,
+        backgroundColor: tokens.color.glassBg,
+        borderRightColor: tokens.color.glassBorder,
+        borderRightWidth: 1,
+      }}
+    >
+      {header != null ? (
+        <View
+          style={{
+            padding: tokens.spacing.lg,
+            borderBottomColor: tokens.color.divider,
+            borderBottomWidth: 1,
+          }}
+        >
+          {header}
+        </View>
+      ) : null}
+      <ScrollView
+        contentContainerStyle={{
+          paddingVertical: tokens.spacing.sm,
+          paddingHorizontal: tokens.spacing.sm,
+        }}
+      >
+        {items.map((item: NavItem) => {
+          const active = item.key === activeKey;
+          const fg = active ? tokens.color.primarySoftFg : tokens.color.foreground;
+          return (
+            <Pressable
+              key={item.key}
+              onPress={() => onSelect(item.key)}
+              accessibilityRole="button"
+              accessibilityState={{ selected: active }}
+              testID={`${testID ?? 'drawer'}-${item.key}`}
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                paddingVertical: tokens.spacing.sm,
+                paddingHorizontal: tokens.spacing.md,
+                marginVertical: tokens.spacing.xs / 2,
+                borderRadius: tokens.radii.md,
+                backgroundColor: active ? tokens.color.primarySoftBg : 'transparent',
+              }}
+            >
+              <Icon source={item.icon} size={tokens.typography.sizes.lg} color={fg} />
+              <Text
+                style={{
+                  flex: 1,
+                  marginLeft: tokens.spacing.md,
+                  color: fg,
+                  fontSize: tokens.typography.sizes.md,
+                  fontWeight: String(
+                    active ? tokens.typography.weights.semibold : tokens.typography.weights.medium,
+                  ) as '600',
+                }}
+              >
+                {item.label}
+              </Text>
+              {item.badge != null ? (
+                <DrawerBadge
+                  value={item.badge}
+                  bg={tokens.color.danger}
+                  fg={tokens.color.primaryFg}
+                />
+              ) : null}
+            </Pressable>
+          );
+        })}
+      </ScrollView>
+      {footer != null ? (
+        <View
+          style={{
+            padding: tokens.spacing.lg,
+            borderTopColor: tokens.color.divider,
+            borderTopWidth: 1,
+          }}
+        >
+          {footer}
+        </View>
+      ) : null}
+    </Surface>
+  );
+}

package/src/components/Drawer/Drawer.tsx

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

package/src/components/Drawer/Drawer.types.ts

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

package/src/components/Drawer/index.ts

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

package/src/components/Fab/Fab.native.tsx

@@ -0,0 +1,41 @@
+import { FAB } from 'react-native-paper';
+import { useTokens } from '../../provider/useTokens.js';
+import type { Tone } from '../common.js';
+import type { FabProps } from './Fab.types.js';
+
+const paperColor = (c: ReturnType<typeof useTokens>['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.foreground;
+    case 'primary':
+    default:
+      return c.primary;
+  }
+};
+
+export function Fab({ icon, onPress, tone = 'primary', label, testID }: FabProps) {
+  const tokens = useTokens();
+  return (
+    <FAB
+      icon={icon}
+      color={paperColor(tokens.color, tone)}
+      onPress={onPress ?? (() => {})}
+      style={{
+        backgroundColor: tokens.color.surface,
+        borderColor: tokens.color.surfaceBorder,
+        borderWidth: 1,
+        borderRadius: tokens.radii.full,
+      }}
+      {...(label !== undefined ? { label } : {})}
+      {...(testID !== undefined ? { testID } : {})}
+    />
+  );
+}

package/src/components/Fab/Fab.tsx

@@ -0,0 +1,36 @@
+import { Fab as MuiFab } from '@mui/material';
+import { useTokens } from '../../provider/useTokens.js';
+import type { Tone } from '../common.js';
+import type { FabProps } from './Fab.types.js';
+
+const muiColor = (
+  t: Tone,
+): 'primary' | 'success' | 'error' | 'warning' | 'info' | 'inherit' =>
+  t === 'danger' ? 'error' : t === 'neutral' ? 'inherit' : t;
+
+export function Fab({ icon, onPress, tone = 'primary', label, testID }: FabProps) {
+  const tokens = useTokens();
+  const extended = label !== undefined;
+  return (
+    <MuiFab
+      color={muiColor(tone)}
+      variant={extended ? 'extended' : 'circular'}
+      onClick={onPress}
+      data-testid={testID}
+      sx={{
+        backgroundColor: tokens.color.surface,
+        color: tokens.color.foreground,
+        border: `1px solid ${tokens.color.surfaceBorder}`,
+        backdropFilter: 'blur(12px)',
+        textTransform: 'none',
+        fontWeight: tokens.typography.weights.semibold,
+        '&:hover': { backgroundColor: tokens.color.surfaceHover },
+      }}
+    >
+      <span className="material-icons" aria-hidden {...(extended ? { style: { marginRight: tokens.spacing.sm } } : {})}>
+        {icon}
+      </span>
+      {label}
+    </MuiFab>
+  );
+}

package/src/components/Fab/Fab.types.ts

@@ -0,0 +1,9 @@
+import type { Tone } from '../common.js';
+
+export interface FabProps {
+  icon: string;
+  onPress?: () => void;
+  tone?: Tone;
+  label?: string;
+  testID?: string;
+}

package/src/components/Fab/index.ts

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

package/src/components/GlassAppBar/GlassAppBar.native.tsx

@@ -0,0 +1,29 @@
+import { Appbar } from 'react-native-paper';
+import { useTokens } from '../../provider/useTokens.js';
+import type { GlassAppBarProps } from './GlassAppBar.types.js';
+
+export function GlassAppBar({ title, subtitle, onBack, actions, transparent, testID }: GlassAppBarProps) {
+  const tokens = useTokens();
+  return (
+    <Appbar.Header
+      testID={testID}
+      style={{
+        backgroundColor: transparent ? 'transparent' : tokens.color.glassBg,
+        borderBottomColor: tokens.color.glassBorder,
+        borderBottomWidth: 1,
+        elevation: 0,
+      }}
+    >
+      {onBack ? <Appbar.BackAction onPress={onBack} accessibilityLabel="back" /> : null}
+      <Appbar.Content
+        title={title}
+        {...(subtitle ? { subtitle } : {})}
+        titleStyle={{
+          color: tokens.color.foreground,
+          fontWeight: String(tokens.typography.weights.semibold) as '600',
+        }}
+      />
+      {actions ?? null}
+    </Appbar.Header>
+  );
+}

package/src/components/GlassAppBar/GlassAppBar.tsx

@@ -0,0 +1,53 @@
+import { AppBar as MuiAppBar, Toolbar, Typography, IconButton, Box } from '@mui/material';
+import { useTokens } from '../../provider/useTokens.js';
+import type { GlassAppBarProps } from './GlassAppBar.types.js';
+
+export function GlassAppBar({ title, subtitle, onBack, actions, transparent, testID }: GlassAppBarProps) {
+  const tokens = useTokens();
+  return (
+    <MuiAppBar
+      position="static"
+      elevation={0}
+      data-testid={testID}
+      sx={{
+        backgroundColor: transparent ? 'transparent' : tokens.color.glassBg,
+        backdropFilter: 'blur(12px)',
+        color: tokens.color.foreground,
+        borderBottom: `1px solid ${tokens.color.glassBorder}`,
+        boxShadow: 'none',
+      }}
+    >
+      <Toolbar sx={{ gap: `${tokens.spacing.sm}px` }}>
+        {onBack ? (
+          <IconButton
+            edge="start"
+            aria-label="back"
+            onClick={onBack}
+            sx={{ color: tokens.color.foreground }}
+          >
+            <span aria-hidden>{'←'}</span>
+          </IconButton>
+        ) : null}
+        <Box sx={{ flex: 1, minWidth: 0 }}>
+          <Typography
+            variant="h6"
+            noWrap
+            sx={{ fontWeight: tokens.typography.weights.semibold }}
+          >
+            {title}
+          </Typography>
+          {subtitle ? (
+            <Typography
+              variant="caption"
+              noWrap
+              sx={{ display: 'block', color: tokens.color.mutedFg }}
+            >
+              {subtitle}
+            </Typography>
+          ) : null}
+        </Box>
+        {actions ?? null}
+      </Toolbar>
+    </MuiAppBar>
+  );
+}

package/src/components/GlassAppBar/GlassAppBar.types.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+
+export interface GlassAppBarProps {
+  title: string;
+  subtitle?: string;
+  onBack?: () => void;
+  actions?: ReactNode;
+  transparent?: boolean;
+  testID?: string;
+}

package/src/components/GlassAppBar/index.ts

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

package/src/components/Icon/Icon.native.tsx

@@ -0,0 +1,39 @@
+import { Icon as PaperIcon } from 'react-native-paper';
+import { useTokens } from '../../provider/useTokens.js';
+import type { ResolvedTokens } from '../../provider/TokenContext.js';
+import type { ColorTokens } from '../../tokens/tokens.js';
+import type { IconColor, IconProps } from './Icon.types.js';
+import type { Size } from '../common.js';
+
+const resolveSize = (
+  t: ResolvedTokens,
+  size: number | Size | undefined,
+): number => {
+  if (typeof size === 'number') return size;
+  const key: Size = size ?? 'md';
+  return t.typography.sizes[key];
+};
+
+const resolveColor = (
+  c: ColorTokens,
+  color: IconColor | undefined,
+): string | undefined => {
+  if (color === undefined) return undefined;
+  if (color in c) return c[color as keyof ColorTokens];
+  return color;
+};
+
+export function Icon({ name, size, color, testID }: IconProps) {
+  const tokens = useTokens();
+  const px = resolveSize(tokens, size);
+  const resolved = resolveColor(tokens.color, color);
+
+  return (
+    <PaperIcon
+      source={name}
+      size={px}
+      {...(resolved ? { color: resolved } : {})}
+      {...(testID ? { testID } : {})}
+    />
+  );
+}

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,57 @@
+import { useTokens } from '../../provider/useTokens.js';
+import type { ResolvedTokens } from '../../provider/TokenContext.js';
+import type { ColorTokens } from '../../tokens/tokens.js';
+import type { IconColor, IconProps } from './Icon.types.js';
+import type { Size } from '../common.js';
+
+const resolveSize = (
+  t: ResolvedTokens,
+  size: number | Size | undefined,
+): number => {
+  if (typeof size === 'number') return size;
+  const key: Size = size ?? 'md';
+  return t.typography.sizes[key];
+};
+
+const resolveColor = (
+  c: ColorTokens,
+  color: IconColor | undefined,
+): string | undefined => {
+  if (color === undefined) return undefined;
+  if (color in c) return c[color as keyof ColorTokens];
+  return color;
+};
+
+export function Icon({ name, node, size, color, testID }: IconProps) {
+  const tokens = useTokens();
+  const px = resolveSize(tokens, size);
+  const resolved = resolveColor(tokens.color, color);
+
+  if (node !== undefined) {
+    return (
+      <span
+        data-testid={testID}
+        style={{
+          display: 'inline-flex',
+          fontSize: `${px}px`,
+          ...(resolved ? { color: resolved } : {}),
+        }}
+      >
+        {node}
+      </span>
+    );
+  }
+
+  return (
+    <span
+      className="material-icons"
+      data-testid={testID}
+      style={{
+        fontSize: `${px}px`,
+        ...(resolved ? { color: resolved } : {}),
+      }}
+    >
+      {name}
+    </span>
+  );
+}

package/src/components/Icon/Icon.types.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import type { Size } from '../common.js';
+import type { ColorTokens } from '../../tokens/tokens.js';
+
+export type IconColor = keyof ColorTokens | (string & {});
+
+export interface IconProps {
+  name: string;
+  node?: ReactNode;
+  size?: number | Size;
+  color?: IconColor;
+  testID?: string;
+}

package/src/components/Icon/index.ts

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

package/src/components/Input/Input.native.tsx

@@ -0,0 +1,34 @@
+import { View } from 'react-native';
+import { TextInput, HelperText } from 'react-native-paper';
+import { useTokens } from '../../provider/useTokens.js';
+import type { InputProps } from './Input.types.js';
+
+export function Input({
+  value, onChangeText, label, placeholder, error,
+  disabled, secureTextEntry, multiline, testID,
+}: InputProps) {
+  const tokens = useTokens();
+  return (
+    <View>
+      <TextInput
+        mode="outlined"
+        value={value}
+        onChangeText={onChangeText}
+        {...(label !== undefined ? { label } : {})}
+        {...(placeholder !== undefined ? { placeholder } : {})}
+        {...(testID !== undefined ? { testID } : {})}
+        error={!!error}
+        disabled={!!disabled}
+        secureTextEntry={!!secureTextEntry}
+        multiline={!!multiline}
+        outlineColor={tokens.color.surfaceBorder}
+        style={{ borderRadius: tokens.radii.md }}
+      />
+      {error !== undefined ? (
+        <HelperText type="error" visible={!!error}>
+          {error}
+        </HelperText>
+      ) : null}
+    </View>
+  );
+}

package/src/components/Input/Input.tsx

@@ -0,0 +1,33 @@
+import { TextField } from '@mui/material';
+import { useTokens } from '../../provider/useTokens.js';
+import type { InputProps } from './Input.types.js';
+
+export function Input({
+  value, onChangeText, label, placeholder, error,
+  disabled, secureTextEntry, multiline, testID,
+}: InputProps) {
+  const tokens = useTokens();
+  return (
+    <TextField
+      value={value}
+      onChange={(e) => onChangeText(e.target.value)}
+      {...(label !== undefined ? { label } : {})}
+      {...(placeholder !== undefined ? { placeholder } : {})}
+      {...(error !== undefined ? { helperText: error } : {})}
+      {...(testID !== undefined ? { 'data-testid': testID } : {})}
+      error={!!error}
+      disabled={!!disabled}
+      type={secureTextEntry ? 'password' : 'text'}
+      multiline={!!multiline}
+      fullWidth
+      variant="outlined"
+      size="small"
+      sx={{
+        '& .MuiOutlinedInput-root': {
+          borderRadius: `${tokens.radii.md}px`,
+          '& fieldset': { borderColor: tokens.color.surfaceBorder },
+        },
+      }}
+    />
+  );
+}