@sublime-ui/library 0.1.0

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

@@ -0,0 +1,3 @@
+export { Select } from './Select.js';
+export { SelectOption, SelectProps } from './Select.types.js';
+import 'react';

package/dist/components/Select/index.js

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

package/dist/components/Spinner/Spinner.d.ts

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

package/dist/components/Spinner/Spinner.js

@@ -0,0 +1,35 @@
+import { jsx } from "react/jsx-runtime";
+import { CircularProgress } from "@mui/material";
+import { useTokens } from "../../provider/useTokens.js";
+const sizePx = (size) => size === "sm" ? 16 : size === "lg" ? 40 : 24;
+const toneColor = (c, tone) => {
+  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;
+  }
+};
+function Spinner({ size = "md", tone = "primary", testID }) {
+  const tokens = useTokens();
+  return /* @__PURE__ */ jsx(
+    CircularProgress,
+    {
+      size: sizePx(size),
+      "data-testid": testID,
+      sx: { color: toneColor(tokens.color, tone) }
+    }
+  );
+}
+export {
+  Spinner
+};

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

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

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

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

package/dist/components/Spinner/index.js

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

package/dist/components/Surface/Surface.d.ts

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

package/dist/components/Surface/Surface.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import { Box } from "@mui/material";
+import { useTokens } from "../../provider/useTokens.js";
+const boxShadow = (e, shadows) => e === "none" ? "none" : shadows[e];
+function Surface({
+  children,
+  elevation = "sm",
+  padded = true,
+  testID
+}) {
+  const tokens = useTokens();
+  return /* @__PURE__ */ jsx(
+    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
+    }
+  );
+}
+export {
+  Surface
+};

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

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

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

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

package/dist/components/Surface/index.js

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

package/dist/components/Switch/Switch.d.ts

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

package/dist/components/Switch/Switch.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { Switch as MuiSwitch, FormControlLabel } from "@mui/material";
+const muiColor = (t) => t === "danger" ? "error" : t === "neutral" ? "default" : t;
+function Switch({
+  value,
+  onValueChange,
+  label,
+  disabled,
+  tone = "primary",
+  testID
+}) {
+  const control = /* @__PURE__ */ jsx(
+    MuiSwitch,
+    {
+      checked: value,
+      onChange: (e) => onValueChange(e.target.checked),
+      color: muiColor(tone),
+      "data-testid": testID,
+      ...disabled === void 0 ? {} : { disabled }
+    }
+  );
+  if (label === void 0) return control;
+  return /* @__PURE__ */ jsx(
+    FormControlLabel,
+    {
+      control,
+      label,
+      ...disabled === void 0 ? {} : { disabled }
+    }
+  );
+}
+export {
+  Switch
+};

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

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

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

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

package/dist/components/Switch/index.js

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

package/dist/components/Text/Text.d.ts

@@ -0,0 +1,7 @@
+import * as react from 'react';
+import { TextProps } from './Text.types.js';
+import '../common.js';
+
+declare function Text({ children, variant, numberOfLines, testID, }: TextProps): react.JSX.Element;
+
+export { Text };

package/dist/components/Text/Text.js

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

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

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

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

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

package/dist/components/Text/index.js

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

package/dist/components/Tooltip/Tooltip.d.ts

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

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import { Tooltip as MuiTooltip } from "@mui/material";
+function Tooltip({ label, children, testID }) {
+  return /* @__PURE__ */ jsx(MuiTooltip, { title: label, "data-testid": testID, children });
+}
+export {
+  Tooltip
+};

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

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

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

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

package/dist/components/Tooltip/index.js

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

package/dist/components/common.d.ts

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

package/dist/index.d.ts

@@ -0,0 +1,53 @@
+export { SublimeProvider, SublimeProviderProps } from './provider/SublimeProvider.js';
+export { useTokens } from './provider/useTokens.js';
+export { generateThemes } from './tokens/generateThemes.js';
+export { ColorTokens, SublimeTokens, defaultTokens } from './tokens/tokens.js';
+export { useNotify } from './notifications/useNotify.js';
+export { Button } from './components/Button/Button.js';
+export { ButtonProps } from './components/Button/Button.types.js';
+export { Text } from './components/Text/Text.js';
+export { NavItem } from './components/common.js';
+export { Input } from './components/Input/Input.js';
+export { Card } from './components/Card/Card.js';
+export { Badge } from './components/Badge/Badge.js';
+export { Icon } from './components/Icon/Icon.js';
+export { Surface } from './components/Surface/Surface.js';
+export { Divider } from './components/Divider/Divider.js';
+export { Spinner } from './components/Spinner/Spinner.js';
+export { Dialog } from './components/Dialog/Dialog.js';
+export { Banner } from './components/Banner/Banner.js';
+export { Fab } from './components/Fab/Fab.js';
+export { AppBar } from './components/AppBar/AppBar.js';
+export { Select } from './components/Select/Select.js';
+export { Avatar } from './components/Avatar/Avatar.js';
+export { Tooltip } from './components/Tooltip/Tooltip.js';
+export { Checkbox } from './components/Checkbox/Checkbox.js';
+export { Switch } from './components/Switch/Switch.js';
+export { GlassAppBar } from './components/GlassAppBar/GlassAppBar.js';
+export { BottomNav } from './components/BottomNav/BottomNav.js';
+export { Drawer } from './components/Drawer/Drawer.js';
+import 'react';
+import './provider/TokenContext.js';
+import 'react-native-paper';
+import '@mui/material';
+import './notifications/NotificationContext.js';
+import './components/Text/Text.types.js';
+import './components/Input/Input.types.js';
+import './components/Card/Card.types.js';
+import './components/Badge/Badge.types.js';
+import './components/Icon/Icon.types.js';
+import './components/Surface/Surface.types.js';
+import './components/Divider/Divider.types.js';
+import './components/Spinner/Spinner.types.js';
+import './components/Dialog/Dialog.types.js';
+import './components/Banner/Banner.types.js';
+import './components/Fab/Fab.types.js';
+import './components/AppBar/AppBar.types.js';
+import './components/Select/Select.types.js';
+import './components/Avatar/Avatar.types.js';
+import './components/Tooltip/Tooltip.types.js';
+import './components/Checkbox/Checkbox.types.js';
+import './components/Switch/Switch.types.js';
+import './components/GlassAppBar/GlassAppBar.types.js';
+import './components/BottomNav/BottomNav.types.js';
+import './components/Drawer/Drawer.types.js';

package/dist/index.js

@@ -0,0 +1,54 @@
+import { SublimeProvider } from "./provider/SublimeProvider.js";
+import { useTokens } from "./provider/useTokens.js";
+import { generateThemes } from "./tokens/generateThemes.js";
+import { defaultTokens } from "./tokens/tokens.js";
+import { useNotify } from "./notifications/useNotify.js";
+import { Button } from "./components/Button/index.js";
+import { Text } from "./components/Text/index.js";
+import { Input } from "./components/Input/index.js";
+import { Card } from "./components/Card/index.js";
+import { Badge } from "./components/Badge/index.js";
+import { Icon } from "./components/Icon/index.js";
+import { Surface } from "./components/Surface/index.js";
+import { Divider } from "./components/Divider/index.js";
+import { Spinner } from "./components/Spinner/index.js";
+import { Dialog } from "./components/Dialog/index.js";
+import { Banner } from "./components/Banner/index.js";
+import { Fab } from "./components/Fab/index.js";
+import { AppBar } from "./components/AppBar/index.js";
+import { Select } from "./components/Select/index.js";
+import { Avatar } from "./components/Avatar/index.js";
+import { Tooltip } from "./components/Tooltip/index.js";
+import { Checkbox } from "./components/Checkbox/index.js";
+import { Switch } from "./components/Switch/index.js";
+import { GlassAppBar } from "./components/GlassAppBar/index.js";
+import { BottomNav } from "./components/BottomNav/index.js";
+import { Drawer } from "./components/Drawer/index.js";
+export {
+  AppBar,
+  Avatar,
+  Badge,
+  Banner,
+  BottomNav,
+  Button,
+  Card,
+  Checkbox,
+  Dialog,
+  Divider,
+  Drawer,
+  Fab,
+  GlassAppBar,
+  Icon,
+  Input,
+  Select,
+  Spinner,
+  SublimeProvider,
+  Surface,
+  Switch,
+  Text,
+  Tooltip,
+  defaultTokens,
+  generateThemes,
+  useNotify,
+  useTokens
+};

package/dist/notifications/NotificationContext.d.ts

@@ -0,0 +1,33 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+type Tone = 'success' | 'error' | 'warning' | 'info' | 'neutral';
+interface Notification {
+    id: string;
+    message: string;
+    tone: Tone;
+    duration: number;
+    action?: {
+        label: string;
+        onPress: () => void;
+    };
+}
+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;
+}
+declare function NotificationProvider({ children }: {
+    children: ReactNode;
+}): react.JSX.Element;
+declare function useNotificationQueue(): QueueApi;
+
+export { type Notification, NotificationProvider, type NotifyOptions, type Tone, useNotificationQueue };

package/dist/notifications/NotificationContext.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useMemo, useRef, useState } from "react";
+const Ctx = createContext(null);
+function NotificationProvider({ children }) {
+  const [queue, setQueue] = useState([]);
+  const counter = useRef(0);
+  const dismiss = useCallback((id) => {
+    setQueue((q) => q.filter((n) => n.id !== id));
+  }, []);
+  const notify = useCallback((message, opts = {}) => {
+    counter.current += 1;
+    const id = `n${counter.current}`;
+    const n = {
+      id,
+      message,
+      tone: opts.tone ?? "neutral",
+      duration: opts.duration ?? 4e3,
+      ...opts.action ? { action: opts.action } : {}
+    };
+    setQueue((q) => [...q, n]);
+    return id;
+  }, []);
+  const value = useMemo(() => ({ queue, notify, dismiss }), [queue, notify, dismiss]);
+  return /* @__PURE__ */ jsx(Ctx.Provider, { value, children });
+}
+function useNotificationQueue() {
+  const api = useContext(Ctx);
+  if (api === null) throw new Error("Notifications require a <SublimeProvider>.");
+  return api;
+}
+export {
+  NotificationProvider,
+  useNotificationQueue
+};

package/dist/notifications/NotificationHost.d.ts

@@ -0,0 +1,5 @@
+import * as react from 'react';
+
+declare function NotificationHost(): react.JSX.Element;
+
+export { NotificationHost };

package/dist/notifications/NotificationHost.js

@@ -0,0 +1,22 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { Snackbar, Alert } from "@mui/material";
+import { useNotificationQueue } from "./NotificationContext.js";
+const severityOf = (tone) => tone === "neutral" ? "info" : tone;
+function NotificationHost() {
+  const { queue, dismiss } = useNotificationQueue();
+  return /* @__PURE__ */ jsx(Fragment, { children: queue.map((n, i) => /* @__PURE__ */ jsx(
+    Snackbar,
+    {
+      open: true,
+      autoHideDuration: n.duration,
+      onClose: () => dismiss(n.id),
+      anchorOrigin: { vertical: "bottom", horizontal: "center" },
+      style: { bottom: 16 + i * 64 },
+      children: /* @__PURE__ */ jsx(Alert, { severity: severityOf(n.tone), onClose: () => dismiss(n.id), variant: "filled", children: n.message })
+    },
+    n.id
+  )) });
+}
+export {
+  NotificationHost
+};

package/dist/notifications/useNotify.d.ts

@@ -0,0 +1,13 @@
+import { NotifyOptions } from './NotificationContext.js';
+import 'react';
+
+declare function useNotify(): {
+    notify: (message: string, opts?: NotifyOptions) => string;
+    dismiss: (id: string) => void;
+    success: (message: string, opts?: NotifyOptions) => string;
+    error: (message: string, opts?: NotifyOptions) => string;
+    warning: (message: string, opts?: NotifyOptions) => string;
+    info: (message: string, opts?: NotifyOptions) => string;
+};
+
+export { useNotify };

package/dist/notifications/useNotify.js

@@ -0,0 +1,19 @@
+import { useMemo } from "react";
+import { useNotificationQueue } from "./NotificationContext.js";
+function useNotify() {
+  const { notify, dismiss } = useNotificationQueue();
+  return useMemo(() => {
+    const toned = (tone) => (message, opts) => notify(message, { ...opts, tone });
+    return {
+      notify,
+      dismiss,
+      success: toned("success"),
+      error: toned("error"),
+      warning: toned("warning"),
+      info: toned("info")
+    };
+  }, [notify, dismiss]);
+}
+export {
+  useNotify
+};

package/dist/provider/SublimeProvider.d.ts

@@ -0,0 +1,12 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { SublimeTokens } from '../tokens/tokens.js';
+
+interface SublimeProviderProps {
+    mode?: 'light' | 'dark';
+    tokens?: SublimeTokens;
+    children: ReactNode;
+}
+declare function SublimeProvider({ mode, tokens, children }: SublimeProviderProps): react.JSX.Element;
+
+export { SublimeProvider, type SublimeProviderProps };

package/dist/provider/SublimeProvider.js

@@ -0,0 +1,23 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { ThemeProvider, CssBaseline } from "@mui/material";
+import { generateThemes } from "../tokens/generateThemes.js";
+import { defaultTokens } from "../tokens/tokens.js";
+import { TokenContext } from "./TokenContext.js";
+import { resolveTokens } from "./resolveTokens.js";
+import { NotificationProvider } from "../notifications/NotificationContext.js";
+import { NotificationHost } from "../notifications/NotificationHost.js";
+function SublimeProvider({ mode = "light", tokens = defaultTokens, children }) {
+  const { muiTheme } = useMemo(() => generateThemes(tokens, mode), [tokens, mode]);
+  const resolved = useMemo(() => resolveTokens(tokens, mode), [tokens, mode]);
+  return /* @__PURE__ */ jsxs(ThemeProvider, { theme: muiTheme, children: [
+    /* @__PURE__ */ jsx(CssBaseline, {}),
+    /* @__PURE__ */ jsx(TokenContext.Provider, { value: resolved, children: /* @__PURE__ */ jsxs(NotificationProvider, { children: [
+      children,
+      /* @__PURE__ */ jsx(NotificationHost, {})
+    ] }) })
+  ] });
+}
+export {
+  SublimeProvider
+};

package/dist/provider/TokenContext.d.ts

@@ -0,0 +1,14 @@
+import * as react from 'react';
+import { ColorTokens, SublimeTokens } from '../tokens/tokens.js';
+
+interface ResolvedTokens {
+    color: ColorTokens;
+    radii: SublimeTokens['radii'];
+    shadows: SublimeTokens['shadows'];
+    spacing: SublimeTokens['spacing'];
+    typography: SublimeTokens['typography'];
+    mode: 'light' | 'dark';
+}
+declare const TokenContext: react.Context<ResolvedTokens | null>;
+
+export { type ResolvedTokens, TokenContext };