@sublime-ui/library 0.1.0

package/src/components/Input/Input.types.ts

@@ -0,0 +1,11 @@
+export interface InputProps {
+  value: string;
+  onChangeText: (text: string) => void;
+  label?: string;
+  placeholder?: string;
+  error?: string;
+  disabled?: boolean;
+  secureTextEntry?: boolean;
+  multiline?: boolean;
+  testID?: string;
+}

package/src/components/Input/index.ts

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

package/src/components/Select/Select.native.tsx

@@ -0,0 +1,63 @@
+import { useState } from 'react';
+import { Pressable, View } from 'react-native';
+import { Menu, TextInput } from 'react-native-paper';
+import { useTokens } from '../../provider/useTokens.js';
+import type { SelectProps } from './Select.types.js';
+
+export function Select({
+  value, onChange, options, label, placeholder, disabled, testID,
+}: SelectProps) {
+  const tokens = useTokens();
+  const [open, setOpen] = useState(false);
+  const selected = options.find((o) => o.value === value);
+  const display = selected?.label ?? placeholder ?? '';
+  return (
+    <View {...(testID !== undefined ? { testID } : {})}>
+      <Menu
+        visible={open}
+        onDismiss={() => setOpen(false)}
+        contentStyle={{
+          backgroundColor: tokens.color.glassBg,
+          borderColor: tokens.color.glassBorder,
+          borderWidth: 1,
+          borderRadius: tokens.radii.md,
+        }}
+        anchor={
+          <Pressable
+            onPress={() => {
+              if (!disabled) setOpen(true);
+            }}
+          >
+            <TextInput
+              mode="outlined"
+              editable={false}
+              pointerEvents="none"
+              disabled={!!disabled}
+              value={display}
+              {...(label !== undefined ? { label } : {})}
+              {...(placeholder !== undefined ? { placeholder } : {})}
+              outlineColor={tokens.color.surfaceBorder}
+              right={<TextInput.Icon icon="menu-down" />}
+              style={{ borderRadius: tokens.radii.md }}
+            />
+          </Pressable>
+        }
+      >
+        {options.length === 0 ? (
+          <Menu.Item disabled title="No options" />
+        ) : (
+          options.map((opt) => (
+            <Menu.Item
+              key={opt.value}
+              title={opt.label}
+              onPress={() => {
+                onChange(opt.value);
+                setOpen(false);
+              }}
+            />
+          ))
+        )}
+      </Menu>
+    </View>
+  );
+}

package/src/components/Select/Select.tsx

@@ -0,0 +1,48 @@
+import { FormControl, InputLabel, MenuItem, Select as MuiSelect } from '@mui/material';
+import { useTokens } from '../../provider/useTokens.js';
+import type { SelectProps } from './Select.types.js';
+
+export function Select({
+  value, onChange, options, label, placeholder, disabled, testID,
+}: SelectProps) {
+  const tokens = useTokens();
+  const labelId = label !== undefined ? `${label}-select-label` : undefined;
+  return (
+    <FormControl fullWidth size="small" disabled={!!disabled}>
+      {label !== undefined ? <InputLabel id={labelId}>{label}</InputLabel> : null}
+      <MuiSelect
+        {...(labelId !== undefined ? { labelId } : {})}
+        {...(label !== undefined ? { label } : {})}
+        {...(placeholder !== undefined ? { displayEmpty: true } : {})}
+        {...(testID !== undefined ? { 'data-testid': testID } : {})}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        MenuProps={{
+          PaperProps: {
+            sx: {
+              backgroundColor: tokens.color.glassBg,
+              border: `1px solid ${tokens.color.glassBorder}`,
+              backdropFilter: 'blur(12px)',
+              borderRadius: `${tokens.radii.md}px`,
+            },
+          },
+        }}
+        sx={{
+          borderRadius: `${tokens.radii.md}px`,
+          '& fieldset': { borderColor: tokens.color.surfaceBorder },
+        }}
+      >
+        {placeholder !== undefined ? (
+          <MenuItem value="" disabled>
+            {placeholder}
+          </MenuItem>
+        ) : null}
+        {options.map((opt) => (
+          <MenuItem key={opt.value} value={opt.value}>
+            {opt.label}
+          </MenuItem>
+        ))}
+      </MuiSelect>
+    </FormControl>
+  );
+}

package/src/components/Select/Select.types.ts

@@ -0,0 +1,14 @@
+export interface SelectOption {
+  value: string;
+  label: string;
+}
+
+export interface SelectProps {
+  value: string;
+  onChange: (value: string) => void;
+  options: SelectOption[];
+  label?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  testID?: string;
+}

package/src/components/Select/index.ts

@@ -0,0 +1,2 @@
+export { Select } from './Select.js';
+export type { SelectProps, SelectOption } from './Select.types.js';

package/src/components/Spinner/Spinner.native.tsx

@@ -0,0 +1,38 @@
+import { ActivityIndicator } from 'react-native-paper';
+import { useTokens } from '../../provider/useTokens.js';
+import type { ResolvedTokens } from '../../provider/TokenContext.js';
+import type { Tone, Size } from '../common.js';
+import type { SpinnerProps } from './Spinner.types.js';
+
+const paperSize = (size: Size): 'small' | 'large' =>
+  size === 'lg' ? 'large' : 'small';
+
+const toneColor = (c: ResolvedTokens['color'], tone: Tone): string => {
+  switch (tone) {
+    case 'primary':
+      return c.primary;
+    case 'success':
+      return c.success;
+    case 'danger':
+      return c.danger;
+    case 'warning':
+      return c.warning;
+    case 'info':
+      return c.info;
+    case 'neutral':
+    default:
+      return c.mutedFg;
+  }
+};
+
+export function Spinner({ size = 'md', tone = 'primary', testID }: SpinnerProps) {
+  const tokens = useTokens();
+  return (
+    <ActivityIndicator
+      animating
+      size={paperSize(size)}
+      color={toneColor(tokens.color, tone)}
+      {...(testID ? { testID } : {})}
+    />
+  );
+}

package/src/components/Spinner/Spinner.tsx

@@ -0,0 +1,37 @@
+import { CircularProgress } from '@mui/material';
+import { useTokens } from '../../provider/useTokens.js';
+import type { ResolvedTokens } from '../../provider/TokenContext.js';
+import type { Tone, Size } from '../common.js';
+import type { SpinnerProps } from './Spinner.types.js';
+
+const sizePx = (size: Size): number =>
+  size === 'sm' ? 16 : size === 'lg' ? 40 : 24;
+
+const toneColor = (c: ResolvedTokens['color'], tone: Tone): string => {
+  switch (tone) {
+    case 'primary':
+      return c.primary;
+    case 'success':
+      return c.success;
+    case 'danger':
+      return c.danger;
+    case 'warning':
+      return c.warning;
+    case 'info':
+      return c.info;
+    case 'neutral':
+    default:
+      return c.mutedFg;
+  }
+};
+
+export function Spinner({ size = 'md', tone = 'primary', testID }: SpinnerProps) {
+  const tokens = useTokens();
+  return (
+    <CircularProgress
+      size={sizePx(size)}
+      data-testid={testID}
+      sx={{ color: toneColor(tokens.color, tone) }}
+    />
+  );
+}

package/src/components/Spinner/Spinner.types.ts

@@ -0,0 +1,7 @@
+import type { Tone, Size } from '../common.js';
+
+export interface SpinnerProps {
+  size?: Size;
+  tone?: Tone;
+  testID?: string;
+}

package/src/components/Spinner/index.ts

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

package/src/components/Surface/Surface.native.tsx

@@ -0,0 +1,32 @@
+import { Surface as PaperSurface } from 'react-native-paper';
+import { useTokens } from '../../provider/useTokens.js';
+import type { SurfaceProps, SurfaceElevation } from './Surface.types.js';
+
+type PaperElevation = 0 | 1 | 2 | 3 | 4 | 5;
+
+const paperElevation = (e: SurfaceElevation): PaperElevation =>
+  e === 'none' ? 0 : e === 'sm' ? 1 : e === 'md' ? 2 : 4;
+
+export function Surface({
+  children,
+  elevation = 'sm',
+  padded = true,
+  testID,
+}: SurfaceProps) {
+  const tokens = useTokens();
+  return (
+    <PaperSurface
+      elevation={paperElevation(elevation)}
+      style={{
+        backgroundColor: tokens.color.surface,
+        borderColor: tokens.color.surfaceBorder,
+        borderWidth: 1,
+        borderRadius: tokens.radii.lg,
+        padding: padded ? tokens.spacing.lg : 0,
+      }}
+      {...(testID ? { testID } : {})}
+    >
+      {children}
+    </PaperSurface>
+  );
+}

package/src/components/Surface/Surface.tsx

@@ -0,0 +1,31 @@
+import { Box } from '@mui/material';
+import { useTokens } from '../../provider/useTokens.js';
+import type { SurfaceProps, SurfaceElevation } from './Surface.types.js';
+
+const boxShadow = (
+  e: SurfaceElevation,
+  shadows: { sm: string; md: string; lg: string },
+): string => (e === 'none' ? 'none' : shadows[e]);
+
+export function Surface({
+  children,
+  elevation = 'sm',
+  padded = true,
+  testID,
+}: SurfaceProps) {
+  const tokens = useTokens();
+  return (
+    <Box
+      data-testid={testID}
+      sx={{
+        backgroundColor: tokens.color.surface,
+        border: `1px solid ${tokens.color.surfaceBorder}`,
+        borderRadius: `${tokens.radii.lg}px`,
+        boxShadow: boxShadow(elevation, tokens.shadows),
+        padding: padded ? `${tokens.spacing.lg}px` : 0,
+      }}
+    >
+      {children}
+    </Box>
+  );
+}

package/src/components/Surface/Surface.types.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+
+export type SurfaceElevation = 'none' | 'sm' | 'md' | 'lg';
+
+export interface SurfaceProps {
+  children: ReactNode;
+  elevation?: SurfaceElevation;
+  padded?: boolean;
+  testID?: string;
+}

package/src/components/Surface/index.ts

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

package/src/components/Switch/Switch.native.tsx

@@ -0,0 +1,58 @@
+import { View } from 'react-native';
+import { Switch as PaperSwitch, Text } 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 { SwitchProps } from './Switch.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 Switch({
+  value,
+  onValueChange,
+  label,
+  disabled,
+  tone = 'primary',
+  testID,
+}: SwitchProps) {
+  const tokens = useTokens();
+  const color = toneColor(tokens.color, tone);
+  const control = (
+    <PaperSwitch
+      value={value}
+      onValueChange={onValueChange}
+      disabled={disabled ?? false}
+      color={color}
+      {...(testID === undefined ? {} : { testID })}
+    />
+  );
+  if (label === undefined) return control;
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: tokens.spacing.sm,
+      }}
+    >
+      {control}
+      <Text style={{ color: tokens.color.foreground }}>{label}</Text>
+    </View>
+  );
+}

package/src/components/Switch/Switch.tsx

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

package/src/components/Switch/Switch.types.ts

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

package/src/components/Switch/index.ts

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

package/src/components/Text/Text.native.tsx

@@ -0,0 +1,31 @@
+import { Text as PaperText } from 'react-native-paper';
+import { useTokens } from '../../provider/useTokens.js';
+import type { TextProps, TextVariant } from './Text.types.js';
+
+const paperVariant = (
+  v: TextVariant,
+): 'titleMedium' | 'titleSmall' | 'bodyMedium' | 'bodySmall' =>
+  v === 'title'
+    ? 'titleMedium'
+    : v === 'subtitle'
+      ? 'titleSmall'
+      : v === 'caption'
+        ? 'bodySmall'
+        : 'bodyMedium';
+
+export function Text({
+  children, variant = 'body', numberOfLines, testID,
+}: TextProps) {
+  const tokens = useTokens();
+  const muted = variant === 'caption' || variant === 'subtitle';
+  return (
+    <PaperText
+      variant={paperVariant(variant)}
+      numberOfLines={numberOfLines}
+      testID={testID}
+      style={{ color: muted ? tokens.color.mutedFg : tokens.color.foreground }}
+    >
+      {children}
+    </PaperText>
+  );
+}

package/src/components/Text/Text.tsx

@@ -0,0 +1,34 @@
+import { Typography } from '@mui/material';
+import { useTokens } from '../../provider/useTokens.js';
+import type { TextProps, TextVariant } from './Text.types.js';
+
+const muiVariant = (v: TextVariant): 'h6' | 'subtitle1' | 'body1' | 'caption' =>
+  v === 'title' ? 'h6' : v === 'subtitle' ? 'subtitle1' : v === 'caption' ? 'caption' : 'body1';
+
+export function Text({
+  children, variant = 'body', numberOfLines, testID,
+}: TextProps) {
+  const tokens = useTokens();
+  const muted = variant === 'caption' || variant === 'subtitle';
+  const clamp =
+    numberOfLines !== undefined
+      ? {
+          display: '-webkit-box',
+          WebkitLineClamp: numberOfLines,
+          WebkitBoxOrient: 'vertical' as const,
+          overflow: 'hidden',
+        }
+      : {};
+  return (
+    <Typography
+      variant={muiVariant(variant)}
+      data-testid={testID}
+      sx={{
+        color: muted ? tokens.color.mutedFg : tokens.color.foreground,
+        ...clamp,
+      }}
+    >
+      {children}
+    </Typography>
+  );
+}

package/src/components/Text/Text.types.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+import type { Tone } from '../common.js';
+
+export type TextVariant = 'title' | 'subtitle' | 'body' | 'caption';
+
+export interface TextProps {
+  children: ReactNode;
+  variant?: TextVariant;
+  tone?: Tone;
+  numberOfLines?: number;
+  testID?: string;
+}

package/src/components/Text/index.ts

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

package/src/components/Tooltip/Tooltip.native.tsx

@@ -0,0 +1,6 @@
+import { Tooltip as PaperTooltip } from 'react-native-paper';
+import type { TooltipProps } from './Tooltip.types.js';
+
+export function Tooltip({ label, children }: TooltipProps) {
+  return <PaperTooltip title={label}>{children}</PaperTooltip>;
+}

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,10 @@
+import { Tooltip as MuiTooltip } from '@mui/material';
+import type { TooltipProps } from './Tooltip.types.js';
+
+export function Tooltip({ label, children, testID }: TooltipProps) {
+  return (
+    <MuiTooltip title={label} data-testid={testID}>
+      {children}
+    </MuiTooltip>
+  );
+}

package/src/components/Tooltip/Tooltip.types.ts

@@ -0,0 +1,9 @@
+import type { ReactElement } from 'react';
+
+export interface TooltipProps {
+  /** The tooltip text shown on hover/long-press. */
+  label: string;
+  /** The single element the tooltip wraps. */
+  children: ReactElement;
+  testID?: string;
+}

package/src/components/Tooltip/index.ts

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

package/src/components/common.ts

@@ -0,0 +1,10 @@
+export type Variant = 'solid' | 'soft' | 'outline' | 'ghost';
+export type Tone = 'primary' | 'success' | 'danger' | 'warning' | 'info' | 'neutral';
+export type Size = 'sm' | 'md' | 'lg';
+
+export interface NavItem {
+  key: string;
+  label: string;
+  icon: string;
+  badge?: string | number;
+}

package/src/index.ts

@@ -0,0 +1,33 @@
+// theming
+export { SublimeProvider } from './provider/SublimeProvider.js';
+export type { SublimeProviderProps } from './provider/SublimeProvider.js';
+export { useTokens } from './provider/useTokens.js';
+export { generateThemes } from './tokens/generateThemes.js';
+export { defaultTokens } from './tokens/tokens.js';
+export type { SublimeTokens, ColorTokens } from './tokens/tokens.js';
+// notifications
+export { useNotify } from './notifications/useNotify.js';
+// components
+export { Button } from './components/Button/index.js';
+export type { ButtonProps } from './components/Button/index.js';
+export { Text } from './components/Text/index.js';
+export { Input } from './components/Input/index.js';
+export { Card } from './components/Card/index.js';
+export { Badge } from './components/Badge/index.js';
+export { Icon } from './components/Icon/index.js';
+export { Surface } from './components/Surface/index.js';
+export { Divider } from './components/Divider/index.js';
+export { Spinner } from './components/Spinner/index.js';
+export { Dialog } from './components/Dialog/index.js';
+export { Banner } from './components/Banner/index.js';
+export { Fab } from './components/Fab/index.js';
+export { AppBar } from './components/AppBar/index.js';
+export { Select } from './components/Select/index.js';
+export { Avatar } from './components/Avatar/index.js';
+export { Tooltip } from './components/Tooltip/index.js';
+export { Checkbox } from './components/Checkbox/index.js';
+export { Switch } from './components/Switch/index.js';
+export { GlassAppBar } from './components/GlassAppBar/index.js';
+export { BottomNav } from './components/BottomNav/index.js';
+export { Drawer } from './components/Drawer/index.js';
+export type { NavItem } from './components/common.js';

package/src/notifications/NotificationContext.tsx

@@ -0,0 +1,57 @@
+import { createContext, useCallback, useContext, useMemo, useRef, useState, type ReactNode } from 'react';
+
+export type Tone = 'success' | 'error' | 'warning' | 'info' | 'neutral';
+
+export interface Notification {
+  id: string;
+  message: string;
+  tone: Tone;
+  duration: number;
+  action?: { label: string; onPress: () => void };
+}
+
+export interface NotifyOptions {
+  tone?: Tone;
+  duration?: number;
+  action?: { label: string; onPress: () => void };
+}
+
+interface QueueApi {
+  queue: Notification[];
+  notify: (message: string, opts?: NotifyOptions) => string;
+  dismiss: (id: string) => void;
+}
+
+const Ctx = createContext<QueueApi | null>(null);
+
+export function NotificationProvider({ children }: { children: ReactNode }) {
+  const [queue, setQueue] = useState<Notification[]>([]);
+  const counter = useRef(0);
+
+  const dismiss = useCallback((id: string) => {
+    setQueue((q) => q.filter((n) => n.id !== id));
+  }, []);
+
+  const notify = useCallback((message: string, opts: NotifyOptions = {}) => {
+    counter.current += 1;
+    const id = `n${counter.current}`;
+    const n: Notification = {
+      id,
+      message,
+      tone: opts.tone ?? 'neutral',
+      duration: opts.duration ?? 4000,
+      ...(opts.action ? { action: opts.action } : {}),
+    };
+    setQueue((q) => [...q, n]);
+    return id;
+  }, []);
+
+  const value = useMemo<QueueApi>(() => ({ queue, notify, dismiss }), [queue, notify, dismiss]);
+  return <Ctx.Provider value={value}>{children}</Ctx.Provider>;
+}
+
+export function useNotificationQueue(): QueueApi {
+  const api = useContext(Ctx);
+  if (api === null) throw new Error('Notifications require a <SublimeProvider>.');
+  return api;
+}