@sublime-ui/library 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Aaron Mkandawire and Sublime UI contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,42 @@
+# @sublime-ui/library
+
+The cross-platform design system for [Sublime UI](https://sublime-ui.github.io/sublime-ui/).
+
+It is **tokens-first**: a single serializable `SublimeTokens` object drives both
+the web theme (Material UI) and the mobile theme (React Native Paper), and a
+shared set of components renders idiomatically on each platform.
+
+```tsx
+import { SublimeProvider } from '@sublime-ui/library';
+import { tokens } from './theme/tokens';
+
+export function App() {
+  return (
+    <SublimeProvider tokens={tokens}>
+      {/* navigation + screens */}
+    </SublimeProvider>
+  );
+}
+```
+
+`generateThemes` turns your tokens into the per-platform theme objects, and
+`useTokens()` makes them available anywhere.
+
+## Install
+
+```bash
+npm install @sublime-ui/library
+```
+
+Web apps also need `@mui/material` + `@emotion/{react,styled}`; mobile apps need
+`react-native-paper` + `react-native-safe-area-context` (declared as optional
+peers).
+
+## Documentation
+
+Core components and theming:
+**https://sublime-ui.github.io/sublime-ui/docs/library/components/overview**
+
+## License
+
+MIT

package/dist/components/AppBar/AppBar.d.ts

@@ -0,0 +1,6 @@
+import * as react from 'react';
+import { AppBarProps } from './AppBar.types.js';
+
+declare function AppBar({ title, subtitle, onBack, actions, testID }: AppBarProps): react.JSX.Element;
+
+export { AppBar };

package/dist/components/AppBar/AppBar.js

@@ -0,0 +1,55 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AppBar as MuiAppBar, Toolbar, Typography, IconButton, Box } from "@mui/material";
+import { useTokens } from "../../provider/useTokens.js";
+function AppBar({ title, subtitle, onBack, actions, testID }) {
+  const tokens = useTokens();
+  return /* @__PURE__ */ jsx(
+    MuiAppBar,
+    {
+      position: "static",
+      elevation: 0,
+      "data-testid": testID,
+      sx: {
+        backgroundColor: tokens.color.surface,
+        color: tokens.color.foreground,
+        borderBottom: `1px solid ${tokens.color.surfaceBorder}`
+      },
+      children: /* @__PURE__ */ jsxs(Toolbar, { sx: { gap: `${tokens.spacing.sm}px` }, children: [
+        onBack ? /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            edge: "start",
+            "aria-label": "back",
+            onClick: onBack,
+            sx: { color: tokens.color.foreground },
+            children: /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\u2190" })
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "h6",
+              noWrap: true,
+              sx: { fontWeight: tokens.typography.weights.semibold },
+              children: title
+            }
+          ),
+          subtitle ? /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "caption",
+              noWrap: true,
+              sx: { display: "block", color: tokens.color.mutedFg },
+              children: subtitle
+            }
+          ) : null
+        ] }),
+        actions ?? null
+      ] })
+    }
+  );
+}
+export {
+  AppBar
+};

package/dist/components/AppBar/AppBar.types.d.ts

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

package/dist/components/AppBar/index.d.ts

@@ -0,0 +1,3 @@
+export { AppBar } from './AppBar.js';
+export { AppBarProps } from './AppBar.types.js';
+import 'react';

package/dist/components/AppBar/index.js

@@ -0,0 +1,4 @@
+import { AppBar } from "./AppBar.js";
+export {
+  AppBar
+};

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,7 @@
+import * as react from 'react';
+import { AvatarProps } from './Avatar.types.js';
+import '../common.js';
+
+declare function Avatar({ source, label, size, testID }: AvatarProps): react.JSX.Element;
+
+export { Avatar };

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import { Avatar as MuiAvatar } from "@mui/material";
+import { useTokens } from "../../provider/useTokens.js";
+const pxFor = (size) => size === "sm" ? 28 : size === "lg" ? 56 : 40;
+const initialsOf = (label) => label.trim().split(/\s+/).slice(0, 2).map((w) => w.charAt(0).toUpperCase()).join("");
+function Avatar({ source, label, size = "md", testID }) {
+  const tokens = useTokens();
+  const dim = pxFor(size);
+  const initials = label ? initialsOf(label) : "";
+  return /* @__PURE__ */ jsx(
+    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
+      },
+      children: source ? null : initials
+    }
+  );
+}
+export {
+  Avatar
+};

package/dist/components/Avatar/Avatar.types.d.ts

@@ -0,0 +1,12 @@
+import { Size } from '../common.js';
+
+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;
+}
+
+export type { AvatarProps };

package/dist/components/Avatar/index.d.ts

@@ -0,0 +1,4 @@
+export { Avatar } from './Avatar.js';
+export { AvatarProps } from './Avatar.types.js';
+import 'react';
+import '../common.js';

package/dist/components/Avatar/index.js

@@ -0,0 +1,4 @@
+import { Avatar } from "./Avatar.js";
+export {
+  Avatar
+};

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,7 @@
+import * as react from 'react';
+import { BadgeProps } from './Badge.types.js';
+import '../common.js';
+
+declare function Badge({ label, tone, variant, icon, testID, }: BadgeProps): react.JSX.Element;
+
+export { Badge };

package/dist/components/Badge/Badge.js

@@ -0,0 +1,75 @@
+import { jsx } from "react/jsx-runtime";
+import { Chip } from "@mui/material";
+import { useTokens } from "../../provider/useTokens.js";
+const solidPair = (c, tone) => {
+  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, tone) => {
+  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) => ({
+  bg: c.surfaceHover,
+  fg: c.mutedFg
+});
+const pairFor = (c, tone, variant) => {
+  if (variant === "solid") return solidPair(c, tone);
+  if (variant === "muted") return mutedPair(c);
+  return softPair(c, tone);
+};
+function Badge({
+  label,
+  tone = "neutral",
+  variant = "soft",
+  icon,
+  testID
+}) {
+  const tokens = useTokens();
+  const { bg, fg } = pairFor(tokens.color, tone, variant);
+  return /* @__PURE__ */ jsx(
+    Chip,
+    {
+      size: "small",
+      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: /* @__PURE__ */ jsx("span", { className: "material-icons", "aria-hidden": true, children: icon }) } : {}
+    }
+  );
+}
+export {
+  Badge
+};

package/dist/components/Badge/Badge.types.d.ts

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

package/dist/components/Badge/index.d.ts

@@ -0,0 +1,4 @@
+export { Badge } from './Badge.js';
+export { BadgeProps } from './Badge.types.js';
+import 'react';
+import '../common.js';

package/dist/components/Badge/index.js

@@ -0,0 +1,4 @@
+import { Badge } from "./Badge.js";
+export {
+  Badge
+};

package/dist/components/Banner/Banner.d.ts

@@ -0,0 +1,7 @@
+import * as react from 'react';
+import { BannerProps } from './Banner.types.js';
+import '../common.js';
+
+declare function Banner({ tone, title, children, onClose, action, testID, }: BannerProps): react.JSX.Element;
+
+export { Banner };

package/dist/components/Banner/Banner.js

@@ -0,0 +1,68 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Alert, AlertTitle } from "@mui/material";
+import { useTokens } from "../../provider/useTokens.js";
+const severityFor = (tone) => {
+  switch (tone) {
+    case "success":
+      return "success";
+    case "danger":
+      return "error";
+    case "warning":
+      return "warning";
+    case "primary":
+    case "info":
+    case "neutral":
+    default:
+      return "info";
+  }
+};
+const softPair = (c, tone) => {
+  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 };
+  }
+};
+function Banner({
+  tone = "info",
+  title,
+  children,
+  onClose,
+  action,
+  testID
+}) {
+  const tokens = useTokens();
+  const { bg, fg } = softPair(tokens.color, tone);
+  return /* @__PURE__ */ jsxs(
+    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 }
+      },
+      children: [
+        title ? /* @__PURE__ */ jsx(AlertTitle, { sx: { fontWeight: tokens.typography.weights.semibold }, children: title }) : null,
+        children
+      ]
+    }
+  );
+}
+export {
+  Banner
+};

package/dist/components/Banner/Banner.types.d.ts

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

package/dist/components/Banner/index.d.ts

@@ -0,0 +1,4 @@
+export { Banner } from './Banner.js';
+export { BannerProps } from './Banner.types.js';
+import 'react';
+import '../common.js';

package/dist/components/Banner/index.js

@@ -0,0 +1,4 @@
+import { Banner } from "./Banner.js";
+export {
+  Banner
+};

package/dist/components/BottomNav/BottomNav.d.ts

@@ -0,0 +1,7 @@
+import { BottomNavProps } from './BottomNav.types.js';
+import '../common.js';
+
+/** Web stub: BottomNav is a mobile-only component. */
+declare function BottomNav(_props: BottomNavProps): null;
+
+export { BottomNav };

package/dist/components/BottomNav/BottomNav.js

@@ -0,0 +1,9 @@
+function BottomNav(_props) {
+  if (process.env.NODE_ENV !== "production") {
+    console.warn("BottomNav is mobile-only");
+  }
+  return null;
+}
+export {
+  BottomNav
+};

package/dist/components/BottomNav/BottomNav.types.d.ts

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

package/dist/components/BottomNav/index.d.ts

@@ -0,0 +1,3 @@
+export { BottomNav } from './BottomNav.js';
+export { BottomNavProps } from './BottomNav.types.js';
+import '../common.js';

package/dist/components/BottomNav/index.js

@@ -0,0 +1,4 @@
+import { BottomNav } from "./BottomNav.js";
+export {
+  BottomNav
+};

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,7 @@
+import * as react from 'react';
+import { ButtonProps } from './Button.types.js';
+import '../common.js';
+
+declare function Button({ children, onPress, variant, tone, size, disabled, loading, fullWidth, testID, }: ButtonProps): react.JSX.Element;
+
+export { Button };

package/dist/components/Button/Button.js

@@ -0,0 +1,42 @@
+import { jsx } from "react/jsx-runtime";
+import { Button as MuiButton, CircularProgress } from "@mui/material";
+import { useTokens } from "../../provider/useTokens.js";
+const muiVariant = (v) => v === "solid" ? "contained" : v === "outline" ? "outlined" : "text";
+const muiColor = (t) => t === "danger" ? "error" : t === "neutral" ? "inherit" : t;
+function Button({
+  children,
+  onPress,
+  variant = "solid",
+  tone = "primary",
+  size = "md",
+  disabled,
+  loading,
+  fullWidth,
+  testID
+}) {
+  const tokens = useTokens();
+  const soft = variant === "soft";
+  return /* @__PURE__ */ jsx(
+    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 ? /* @__PURE__ */ jsx(CircularProgress, { size: 16, color: "inherit" }) : void 0,
+      children
+    }
+  );
+}
+export {
+  Button
+};

package/dist/components/Button/Button.types.d.ts

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

package/dist/components/Button/index.d.ts

@@ -0,0 +1,4 @@
+export { Button } from './Button.js';
+export { ButtonProps } from './Button.types.js';
+import 'react';
+import '../common.js';

package/dist/components/Button/index.js

@@ -0,0 +1,4 @@
+import { Button } from "./Button.js";
+export {
+  Button
+};

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,6 @@
+import * as react from 'react';
+import { CardProps } from './Card.types.js';
+
+declare function Card({ children, onPress, padded, testID }: CardProps): react.JSX.Element;
+
+export { Card };

package/dist/components/Card/Card.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { Card as MuiCard, CardActionArea } from "@mui/material";
+import { useTokens } from "../../provider/useTokens.js";
+function Card({ children, onPress, padded = true, testID }) {
+  const tokens = useTokens();
+  const pad = padded ? `${tokens.spacing.lg}px` : 0;
+  const body = onPress ? /* @__PURE__ */ jsx(CardActionArea, { onClick: onPress, sx: { p: pad }, children }) : children;
+  return /* @__PURE__ */ jsx(
+    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 }
+      },
+      children: body
+    }
+  );
+}
+export {
+  Card
+};

package/dist/components/Card/Card.types.d.ts

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

package/dist/components/Card/index.d.ts

@@ -0,0 +1,3 @@
+export { Card } from './Card.js';
+export { CardProps } from './Card.types.js';
+import 'react';

package/dist/components/Card/index.js

@@ -0,0 +1,4 @@
+import { Card } from "./Card.js";
+export {
+  Card
+};

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,7 @@
+import * as react from 'react';
+import { CheckboxProps } from './Checkbox.types.js';
+import '../common.js';
+
+declare function Checkbox({ checked, onChange, label, disabled, tone, testID, }: CheckboxProps): react.JSX.Element;
+
+export { Checkbox };