@sublime-ui/library 0.1.0

package/dist/components/Checkbox/Checkbox.js

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

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

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

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

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

package/dist/components/Checkbox/index.js

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

package/dist/components/Dialog/Dialog.d.ts

@@ -0,0 +1,6 @@
+import * as react from 'react';
+import { DialogProps } from './Dialog.types.js';
+
+declare function Dialog({ open, onClose, title, children, actions, testID }: DialogProps): react.JSX.Element;
+
+export { Dialog };

package/dist/components/Dialog/Dialog.js

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

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

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

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

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

package/dist/components/Dialog/index.js

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

package/dist/components/Divider/Divider.d.ts

@@ -0,0 +1,6 @@
+import * as react from 'react';
+import { DividerProps } from './Divider.types.js';
+
+declare function Divider({ vertical, inset, testID }: DividerProps): react.JSX.Element;
+
+export { Divider };

package/dist/components/Divider/Divider.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { Divider as MuiDivider } from "@mui/material";
+import { useTokens } from "../../provider/useTokens.js";
+function Divider({ vertical, inset, testID }) {
+  const tokens = useTokens();
+  return /* @__PURE__ */ jsx(
+    MuiDivider,
+    {
+      orientation: vertical ? "vertical" : "horizontal",
+      flexItem: vertical === true,
+      ...inset ? { variant: "inset" } : {},
+      "data-testid": testID,
+      sx: { borderColor: tokens.color.divider }
+    }
+  );
+}
+export {
+  Divider
+};

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

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

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

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

package/dist/components/Divider/index.js

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

package/dist/components/Drawer/Drawer.d.ts

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

package/dist/components/Drawer/Drawer.js

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

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

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

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

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

package/dist/components/Drawer/index.js

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

package/dist/components/Fab/Fab.d.ts

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

package/dist/components/Fab/Fab.js

@@ -0,0 +1,33 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fab as MuiFab } from "@mui/material";
+import { useTokens } from "../../provider/useTokens.js";
+const muiColor = (t) => t === "danger" ? "error" : t === "neutral" ? "inherit" : t;
+function Fab({ icon, onPress, tone = "primary", label, testID }) {
+  const tokens = useTokens();
+  const extended = label !== void 0;
+  return /* @__PURE__ */ jsxs(
+    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 }
+      },
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "material-icons", "aria-hidden": true, ...extended ? { style: { marginRight: tokens.spacing.sm } } : {}, children: icon }),
+        label
+      ]
+    }
+  );
+}
+export {
+  Fab
+};

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

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

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

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

package/dist/components/Fab/index.js

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

package/dist/components/GlassAppBar/GlassAppBar.d.ts

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

package/dist/components/GlassAppBar/GlassAppBar.js

@@ -0,0 +1,57 @@
+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 GlassAppBar({ title, subtitle, onBack, actions, transparent, testID }) {
+  const tokens = useTokens();
+  return /* @__PURE__ */ jsx(
+    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"
+      },
+      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 {
+  GlassAppBar
+};

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

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

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

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

package/dist/components/GlassAppBar/index.js

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

package/dist/components/Icon/Icon.d.ts

@@ -0,0 +1,8 @@
+import * as react from 'react';
+import { IconProps } from './Icon.types.js';
+import '../common.js';
+import '../../tokens/tokens.js';
+
+declare function Icon({ name, node, size, color, testID }: IconProps): react.JSX.Element;
+
+export { Icon };

package/dist/components/Icon/Icon.js

@@ -0,0 +1,46 @@
+import { jsx } from "react/jsx-runtime";
+import { useTokens } from "../../provider/useTokens.js";
+const resolveSize = (t, size) => {
+  if (typeof size === "number") return size;
+  const key = size ?? "md";
+  return t.typography.sizes[key];
+};
+const resolveColor = (c, color) => {
+  if (color === void 0) return void 0;
+  if (color in c) return c[color];
+  return color;
+};
+function Icon({ name, node, size, color, testID }) {
+  const tokens = useTokens();
+  const px = resolveSize(tokens, size);
+  const resolved = resolveColor(tokens.color, color);
+  if (node !== void 0) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-testid": testID,
+        style: {
+          display: "inline-flex",
+          fontSize: `${px}px`,
+          ...resolved ? { color: resolved } : {}
+        },
+        children: node
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "material-icons",
+      "data-testid": testID,
+      style: {
+        fontSize: `${px}px`,
+        ...resolved ? { color: resolved } : {}
+      },
+      children: name
+    }
+  );
+}
+export {
+  Icon
+};

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

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

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

@@ -0,0 +1,5 @@
+export { Icon } from './Icon.js';
+export { IconProps } from './Icon.types.js';
+import 'react';
+import '../common.js';
+import '../../tokens/tokens.js';

package/dist/components/Icon/index.js

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

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,6 @@
+import * as react from 'react';
+import { InputProps } from './Input.types.js';
+
+declare function Input({ value, onChangeText, label, placeholder, error, disabled, secureTextEntry, multiline, testID, }: InputProps): react.JSX.Element;
+
+export { Input };

package/dist/components/Input/Input.js

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

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

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

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

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

package/dist/components/Input/index.js

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

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

@@ -0,0 +1,6 @@
+import * as react from 'react';
+import { SelectProps } from './Select.types.js';
+
+declare function Select({ value, onChange, options, label, placeholder, disabled, testID, }: SelectProps): react.JSX.Element;
+
+export { Select };

package/dist/components/Select/Select.js

@@ -0,0 +1,50 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FormControl, InputLabel, MenuItem, Select as MuiSelect } from "@mui/material";
+import { useTokens } from "../../provider/useTokens.js";
+function Select({
+  value,
+  onChange,
+  options,
+  label,
+  placeholder,
+  disabled,
+  testID
+}) {
+  const tokens = useTokens();
+  const labelId = label !== void 0 ? `${label}-select-label` : void 0;
+  return /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, size: "small", disabled: !!disabled, children: [
+    label !== void 0 ? /* @__PURE__ */ jsx(InputLabel, { id: labelId, children: label }) : null,
+    /* @__PURE__ */ jsxs(
+      MuiSelect,
+      {
+        ...labelId !== void 0 ? { labelId } : {},
+        ...label !== void 0 ? { label } : {},
+        ...placeholder !== void 0 ? { displayEmpty: true } : {},
+        ...testID !== void 0 ? { "data-testid": testID } : {},
+        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 }
+        },
+        children: [
+          placeholder !== void 0 ? /* @__PURE__ */ jsx(MenuItem, { value: "", disabled: true, children: placeholder }) : null,
+          options.map((opt) => /* @__PURE__ */ jsx(MenuItem, { value: opt.value, children: opt.label }, opt.value))
+        ]
+      }
+    )
+  ] });
+}
+export {
+  Select
+};

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

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