@sublime-ui/library 0.1.0

package/dist/provider/TokenContext.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+const TokenContext = createContext(null);
+export {
+  TokenContext
+};

package/dist/provider/resolveTokens.d.ts

@@ -0,0 +1,7 @@
+import { SublimeTokens } from '../tokens/tokens.js';
+import { ResolvedTokens } from './TokenContext.js';
+import 'react';
+
+declare function resolveTokens(tokens: SublimeTokens, mode: 'light' | 'dark'): ResolvedTokens;
+
+export { resolveTokens };

package/dist/provider/resolveTokens.js

@@ -0,0 +1,13 @@
+function resolveTokens(tokens, mode) {
+  return {
+    color: tokens.color[mode],
+    radii: tokens.radii,
+    shadows: tokens.shadows,
+    spacing: tokens.spacing,
+    typography: tokens.typography,
+    mode
+  };
+}
+export {
+  resolveTokens
+};

package/dist/provider/useTokens.d.ts

@@ -0,0 +1,7 @@
+import { ResolvedTokens } from './TokenContext.js';
+import 'react';
+import '../tokens/tokens.js';
+
+declare function useTokens(): ResolvedTokens;
+
+export { useTokens };

package/dist/provider/useTokens.js

@@ -0,0 +1,12 @@
+import { useContext } from "react";
+import { TokenContext } from "./TokenContext.js";
+function useTokens() {
+  const tokens = useContext(TokenContext);
+  if (tokens === null) {
+    throw new Error("useTokens must be used within a <SublimeProvider>.");
+  }
+  return tokens;
+}
+export {
+  useTokens
+};

package/dist/tokens/generateThemes.d.ts

@@ -0,0 +1,10 @@
+import { MD3Theme } from 'react-native-paper';
+import { Theme } from '@mui/material';
+import { SublimeTokens } from './tokens.js';
+
+declare function generateThemes(tokens: SublimeTokens, mode: 'light' | 'dark'): {
+    paperTheme: MD3Theme;
+    muiTheme: Theme;
+};
+
+export { generateThemes };

package/dist/tokens/generateThemes.js

@@ -0,0 +1,44 @@
+import { MD3LightTheme, MD3DarkTheme } from "react-native-paper";
+import { createTheme } from "@mui/material";
+function generateThemes(tokens, mode) {
+  const c = tokens.color[mode];
+  const base = mode === "dark" ? MD3DarkTheme : MD3LightTheme;
+  const paperTheme = {
+    ...base,
+    roundness: tokens.radii.md,
+    colors: {
+      ...base.colors,
+      primary: c.primary,
+      onPrimary: c.primaryFg,
+      secondary: c.secondary,
+      onSecondary: c.secondaryFg,
+      error: c.danger,
+      background: c.background,
+      onBackground: c.foreground,
+      surface: c.surface,
+      onSurface: c.foreground,
+      outline: c.surfaceBorder,
+      outlineVariant: c.divider
+    }
+  };
+  const muiTheme = createTheme({
+    palette: {
+      mode,
+      primary: { main: c.primary, contrastText: c.primaryFg },
+      secondary: { main: c.secondary, contrastText: c.secondaryFg },
+      success: { main: c.success },
+      warning: { main: c.warning },
+      error: { main: c.danger },
+      info: { main: c.info },
+      background: { default: c.background, paper: c.surface },
+      text: { primary: c.foreground, secondary: c.mutedFg },
+      divider: c.divider
+    },
+    shape: { borderRadius: tokens.radii.md },
+    typography: { fontFamily: tokens.typography.family }
+  });
+  return { paperTheme, muiTheme };
+}
+export {
+  generateThemes
+};

package/dist/tokens/tokens.d.ts

@@ -0,0 +1,74 @@
+interface ColorTokens {
+    primary: string;
+    primaryFg: string;
+    secondary: string;
+    secondaryFg: string;
+    success: string;
+    warning: string;
+    danger: string;
+    info: string;
+    background: string;
+    foreground: string;
+    mutedFg: string;
+    surface: string;
+    surfaceBorder: string;
+    surfaceHover: string;
+    glassBg: string;
+    glassBorder: string;
+    divider: string;
+    ring: string;
+    primarySoftBg: string;
+    primarySoftFg: string;
+    successSoftBg: string;
+    successSoftFg: string;
+    warningSoftBg: string;
+    warningSoftFg: string;
+    dangerSoftBg: string;
+    dangerSoftFg: string;
+    infoSoftBg: string;
+    infoSoftFg: string;
+}
+interface SublimeTokens {
+    color: {
+        light: ColorTokens;
+        dark: ColorTokens;
+    };
+    radii: {
+        sm: number;
+        md: number;
+        lg: number;
+        full: number;
+    };
+    shadows: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    spacing: {
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+    };
+    typography: {
+        family: string;
+        sizes: {
+            xs: number;
+            sm: number;
+            md: number;
+            lg: number;
+            xl: number;
+            '2xl': number;
+        };
+        weights: {
+            regular: number;
+            medium: number;
+            semibold: number;
+            bold: number;
+        };
+    };
+}
+declare const defaultTokens: SublimeTokens;
+
+export { type ColorTokens, type SublimeTokens, defaultTokens };

package/dist/tokens/tokens.js

@@ -0,0 +1,78 @@
+const light = {
+  primary: "rgb(37,99,235)",
+  primaryFg: "rgb(255,255,255)",
+  secondary: "rgb(100,116,139)",
+  secondaryFg: "rgb(255,255,255)",
+  success: "rgb(22,163,74)",
+  warning: "rgb(217,119,6)",
+  danger: "rgb(220,38,38)",
+  info: "rgb(2,132,199)",
+  background: "rgb(247,250,255)",
+  foreground: "rgb(15,23,42)",
+  mutedFg: "rgba(71,85,105,0.85)",
+  surface: "rgba(243,248,255,0.90)",
+  surfaceBorder: "rgba(15,23,42,0.08)",
+  surfaceHover: "rgba(59,130,246,0.06)",
+  glassBg: "rgba(236,244,255,0.60)",
+  glassBorder: "rgba(15,23,42,0.08)",
+  divider: "rgba(15,23,42,0.06)",
+  ring: "rgba(59,130,246,0.45)",
+  primarySoftBg: "rgba(59,130,246,0.08)",
+  primarySoftFg: "rgb(29,78,216)",
+  successSoftBg: "rgba(34,197,94,0.10)",
+  successSoftFg: "rgb(21,128,61)",
+  warningSoftBg: "rgba(245,158,11,0.12)",
+  warningSoftFg: "rgb(180,83,9)",
+  dangerSoftBg: "rgba(244,63,94,0.08)",
+  dangerSoftFg: "rgb(190,18,60)",
+  infoSoftBg: "rgba(14,165,233,0.10)",
+  infoSoftFg: "rgb(3,105,161)"
+};
+const dark = {
+  primary: "rgb(96,165,250)",
+  primaryFg: "rgb(8,12,20)",
+  secondary: "rgb(148,163,184)",
+  secondaryFg: "rgb(8,12,20)",
+  success: "rgb(74,222,128)",
+  warning: "rgb(251,191,36)",
+  danger: "rgb(251,113,133)",
+  info: "rgb(56,189,248)",
+  background: "rgb(8,12,20)",
+  foreground: "rgb(245,247,251)",
+  mutedFg: "rgba(229,231,235,0.65)",
+  surface: "rgba(96,165,250,0.06)",
+  surfaceBorder: "rgba(255,255,255,0.08)",
+  surfaceHover: "rgba(255,255,255,0.06)",
+  glassBg: "rgba(96,165,250,0.05)",
+  glassBorder: "rgba(255,255,255,0.08)",
+  divider: "rgba(255,255,255,0.06)",
+  ring: "rgba(96,165,250,0.55)",
+  primarySoftBg: "rgba(59,130,246,0.12)",
+  primarySoftFg: "rgb(147,197,253)",
+  successSoftBg: "rgba(34,197,94,0.16)",
+  successSoftFg: "rgb(134,239,172)",
+  warningSoftBg: "rgba(245,158,11,0.18)",
+  warningSoftFg: "rgb(253,224,71)",
+  dangerSoftBg: "rgba(244,63,94,0.18)",
+  dangerSoftFg: "rgb(253,164,175)",
+  infoSoftBg: "rgba(14,165,233,0.16)",
+  infoSoftFg: "rgb(125,211,252)"
+};
+const defaultTokens = {
+  color: { light, dark },
+  radii: { sm: 8, md: 12, lg: 16, full: 999 },
+  shadows: {
+    sm: "0 1px 2px rgba(15,23,42,0.06)",
+    md: "0 4px 12px rgba(15,23,42,0.10)",
+    lg: "0 12px 32px rgba(15,23,42,0.16)"
+  },
+  spacing: { xs: 4, sm: 8, md: 12, lg: 16, xl: 24 },
+  typography: {
+    family: "Inter, system-ui, sans-serif",
+    sizes: { xs: 12, sm: 14, md: 16, lg: 18, xl: 22, "2xl": 28 },
+    weights: { regular: 400, medium: 500, semibold: 600, bold: 700 }
+  }
+};
+export {
+  defaultTokens
+};

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@sublime-ui/library",
+  "version": "0.1.0",
+  "description": "Tokens-first cross-platform design system — one theme drives MUI (web) and React Native Paper (mobile).",
+  "keywords": ["sublime-ui", "design-system", "mui", "react-native-paper", "theme", "tokens", "components", "cross-platform", "typescript"],
+  "homepage": "https://sublime-ui.github.io/sublime-ui/",
+  "bugs": "https://github.com/sublime-ui/sublime-ui/issues",
+  "repository": { "type": "git", "url": "git+https://github.com/sublime-ui/sublime-ui.git", "directory": "library" },
+  "license": "MIT",
+  "author": "Aaron Mkandawire",
+  "publishConfig": { "access": "public" },
+  "type": "module",
+  "exports": { ".": { "types": "./dist/index.d.ts", "import": "./dist/index.js" } },
+  "react-native": "./src/index.ts",
+  "files": ["dist", "src"],
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run --passWithNoTests",
+    "lint": "eslint src"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-native": ">=0.74",
+    "react-native-paper": ">=5",
+    "@mui/material": ">=6",
+    "@emotion/react": ">=11",
+    "@emotion/styled": ">=11"
+  },
+  "peerDependenciesMeta": {
+    "react-native": { "optional": true },
+    "react-native-paper": { "optional": true },
+    "@mui/material": { "optional": true },
+    "@emotion/react": { "optional": true },
+    "@emotion/styled": { "optional": true }
+  },
+  "devDependencies": {
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@mui/material": "^6.1.6",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.0.1",
+    "@types/node": "^22",
+    "@types/react": "^18.3.12",
+    "jsdom": "^25.0.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-native": "^0.76.1",
+    "react-native-paper": "^5.12.5",
+    "react-native-safe-area-context": "^4.14.0",
+    "react-test-renderer": "^18.3.1"
+  }
+}

package/src/components/AppBar/AppBar.native.tsx

@@ -0,0 +1,28 @@
+import { Appbar } from 'react-native-paper';
+import { useTokens } from '../../provider/useTokens.js';
+import type { AppBarProps } from './AppBar.types.js';
+
+export function AppBar({ title, subtitle, onBack, actions, testID }: AppBarProps) {
+  const tokens = useTokens();
+  return (
+    <Appbar.Header
+      testID={testID}
+      style={{
+        backgroundColor: tokens.color.surface,
+        borderBottomColor: tokens.color.surfaceBorder,
+        borderBottomWidth: 1,
+      }}
+    >
+      {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/AppBar/AppBar.tsx

@@ -0,0 +1,51 @@
+import { AppBar as MuiAppBar, Toolbar, Typography, IconButton, Box } from '@mui/material';
+import { useTokens } from '../../provider/useTokens.js';
+import type { AppBarProps } from './AppBar.types.js';
+
+export function AppBar({ title, subtitle, onBack, actions, testID }: AppBarProps) {
+  const tokens = useTokens();
+  return (
+    <MuiAppBar
+      position="static"
+      elevation={0}
+      data-testid={testID}
+      sx={{
+        backgroundColor: tokens.color.surface,
+        color: tokens.color.foreground,
+        borderBottom: `1px solid ${tokens.color.surfaceBorder}`,
+      }}
+    >
+      <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/AppBar/AppBar.types.ts

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

package/src/components/AppBar/index.ts

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

package/src/components/Avatar/Avatar.native.tsx

@@ -0,0 +1,38 @@
+import { Avatar as PaperAvatar } from 'react-native-paper';
+import { useTokens } from '../../provider/useTokens.js';
+import type { Size } from '../common.js';
+import type { AvatarProps } from './Avatar.types.js';
+
+const pxFor = (size: Size): number =>
+  size === 'sm' ? 28 : size === 'lg' ? 56 : 40;
+
+const initialsOf = (label: string): string =>
+  label
+    .trim()
+    .split(/\s+/)
+    .slice(0, 2)
+    .map((w) => w.charAt(0).toUpperCase())
+    .join('');
+
+export function Avatar({ source, label, size = 'md', testID }: AvatarProps) {
+  const tokens = useTokens();
+  const dim = pxFor(size);
+  if (source) {
+    return (
+      <PaperAvatar.Image
+        {...(testID ? { testID } : {})}
+        size={dim}
+        source={{ uri: source }}
+      />
+    );
+  }
+  return (
+    <PaperAvatar.Text
+      {...(testID ? { testID } : {})}
+      size={dim}
+      label={label ? initialsOf(label) : ''}
+      style={{ backgroundColor: tokens.color.primarySoftBg }}
+      labelStyle={{ color: tokens.color.primarySoftFg }}
+    />
+  );
+}

package/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,38 @@
+import { Avatar as MuiAvatar } from '@mui/material';
+import { useTokens } from '../../provider/useTokens.js';
+import type { Size } from '../common.js';
+import type { AvatarProps } from './Avatar.types.js';
+
+const pxFor = (size: Size): number =>
+  size === 'sm' ? 28 : size === 'lg' ? 56 : 40;
+
+const initialsOf = (label: string): string =>
+  label
+    .trim()
+    .split(/\s+/)
+    .slice(0, 2)
+    .map((w) => w.charAt(0).toUpperCase())
+    .join('');
+
+export function Avatar({ source, label, size = 'md', testID }: AvatarProps) {
+  const tokens = useTokens();
+  const dim = pxFor(size);
+  const initials = label ? initialsOf(label) : '';
+  return (
+    <MuiAvatar
+      data-testid={testID}
+      {...(source ? { src: source } : {})}
+      {...(label ? { alt: label } : {})}
+      sx={{
+        width: dim,
+        height: dim,
+        backgroundColor: tokens.color.primarySoftBg,
+        color: tokens.color.primarySoftFg,
+        fontWeight: tokens.typography.weights.semibold,
+        fontSize: dim * 0.4,
+      }}
+    >
+      {source ? null : initials}
+    </MuiAvatar>
+  );
+}

package/src/components/Avatar/Avatar.types.ts

@@ -0,0 +1,10 @@
+import type { Size } from '../common.js';
+
+export interface AvatarProps {
+  /** Image URI; when present the avatar shows the image. */
+  source?: string;
+  /** Fallback text; initials are derived from it when no source is present. */
+  label?: string;
+  size?: Size;
+  testID?: string;
+}

package/src/components/Avatar/index.ts

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

package/src/components/Badge/Badge.native.tsx

@@ -0,0 +1,97 @@
+import { View } from 'react-native';
+import { Text, Icon } 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 { 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 pairFor = (
+  c: ResolvedTokens['color'],
+  tone: Tone,
+  variant: BadgeVariant,
+): ColorPair => {
+  if (variant === 'solid') return solidPair(c, tone);
+  if (variant === 'muted') return { bg: c.surfaceHover, fg: c.mutedFg };
+  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 (
+    <View
+      {...(testID ? { testID } : {})}
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        alignSelf: 'flex-start',
+        backgroundColor: bg,
+        borderRadius: tokens.radii.full,
+        paddingHorizontal: tokens.spacing.sm,
+        paddingVertical: tokens.spacing.xs,
+      }}
+    >
+      {icon ? (
+        <View style={{ marginRight: tokens.spacing.xs }}>
+          <Icon source={icon} size={tokens.typography.sizes.sm} color={fg} />
+        </View>
+      ) : null}
+      <Text
+        style={{
+          color: fg,
+          fontSize: tokens.typography.sizes.sm,
+          fontWeight: String(tokens.typography.weights.medium) as '500',
+        }}
+      >
+        {label}
+      </Text>
+    </View>
+  );
+}