@ambasada/ui 0.0.0-stage → 0.7.0

package/dist/react.d.ts

@@ -0,0 +1,70 @@
+import { type ButtonHTMLAttributes, type ReactNode } from "react";
+/** The mini-app column: clear of the host bar and the safe areas. */
+export declare function Page({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+export declare function Card({ title, children, className }: {
+    title?: ReactNode;
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: "primary" | "secondary";
+    block?: boolean;
+};
+/** Primary (brand red, one per screen) or secondary. `type` defaults to "button". */
+export declare function Button({ variant, block, className, type, ...rest }: ButtonProps): import("react").JSX.Element;
+export type RowProps = {
+    icon?: ReactNode;
+    title: ReactNode;
+    sub?: ReactNode;
+    right?: ReactNode;
+    onClick?: () => void;
+    href?: string;
+    target?: string;
+    tone?: "danger" | "muted";
+};
+/** Big tappable row: icon on the left, text, value or chevron on the right. A link with `href`, a button with `onClick`. */
+export declare function Row({ icon, title, sub, right, onClick, href, target, tone }: RowProps): import("react").JSX.Element;
+/** A list: rows in one bordered block, with an optional title and action above it. */
+export declare function Group({ children, title, action }: {
+    children: ReactNode;
+    title?: ReactNode;
+    action?: ReactNode;
+}): import("react").JSX.Element;
+export declare function Pill({ tone, children, pulse }: {
+    tone?: "good" | "bad" | "warn" | "muted" | "accent";
+    children: ReactNode;
+    pulse?: boolean;
+}): import("react").JSX.Element;
+/** Bottom sheet (a centred dialog on wide screens). Closes on backdrop tap and Escape; the page behind does not scroll. */
+export declare function Sheet({ open, onClose, title, children, footer }: {
+    open: boolean;
+    onClose: () => void;
+    title?: ReactNode;
+    children: ReactNode;
+    footer?: ReactNode;
+}): import("react").JSX.Element | null;
+export type StepperProps = {
+    value: number;
+    onChange: (v: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    unit?: string;
+    presets?: number[];
+    format?: (v: number) => string;
+};
+/** − value + for amounts, rounded to cents and kept within min..max, with optional preset chips. */
+export declare function Stepper({ value, onChange, min, max, step, unit, presets, format }: StepperProps): import("react").JSX.Element;
+export declare function Empty({ icon, title, hint, action }: {
+    icon?: ReactNode;
+    title: string;
+    hint?: string;
+    action?: ReactNode;
+}): import("react").JSX.Element;
+/** Grey bars where the content will be: use it instead of a spinner. */
+export declare function Skeleton({ lines }: {
+    lines?: number;
+}): import("react").JSX.Element;

package/dist/react.js

@@ -0,0 +1,114 @@
+"use client";
+
+// ../ui/src/react.tsx
+import { useEffect, useId } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var cx = (...names) => names.filter(Boolean).join(" ");
+var fmt = (v) => v.toLocaleString("en-US", { maximumFractionDigits: 2 });
+function Icon({ d, size = 22, ...p }) {
+  return /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.8, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", ...p, children: /* @__PURE__ */ jsx("path", { d }) });
+}
+function Page({ children, className }) {
+  return /* @__PURE__ */ jsx("main", { className: cx("ui-page", className), children });
+}
+function Card({ title, children, className }) {
+  return /* @__PURE__ */ jsxs("section", { className: cx("ui-card", className), children: [
+    title && /* @__PURE__ */ jsx("h2", { className: "ui-card-title", children: title }),
+    children
+  ] });
+}
+function Button({ variant = "primary", block, className, type = "button", ...rest }) {
+  return /* @__PURE__ */ jsx("button", { type, className: cx("ui-button", variant === "secondary" && "secondary", block && "block", className), ...rest });
+}
+function Row({ icon, title, sub, right, onClick, href, target, tone }) {
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    icon && /* @__PURE__ */ jsx("span", { className: "row-icon", children: icon }),
+    /* @__PURE__ */ jsxs("span", { className: "row-text", children: [
+      /* @__PURE__ */ jsx("span", { className: "row-title", children: title }),
+      sub && /* @__PURE__ */ jsx("span", { className: "row-sub", children: sub })
+    ] }),
+    right !== void 0 ? /* @__PURE__ */ jsx("span", { className: "row-right", children: right }) : (onClick || href) && /* @__PURE__ */ jsx(Icon, { d: "m9 6 6 6-6 6", className: "row-chev" })
+  ] });
+  const cls = cx("ui-row", (onClick || href) && "tappable", tone);
+  if (href) return /* @__PURE__ */ jsx("a", { className: cls, href, target, rel: target === "_blank" ? "noopener" : void 0, children: body });
+  if (onClick) return /* @__PURE__ */ jsx("button", { type: "button", className: cls, onClick, children: body });
+  return /* @__PURE__ */ jsx("div", { className: cls, children: body });
+}
+function Group({ children, title, action }) {
+  return /* @__PURE__ */ jsxs("section", { className: "ui-group", children: [
+    (title || action) && /* @__PURE__ */ jsxs("div", { className: "ui-group-head", children: [
+      /* @__PURE__ */ jsx("h2", { children: title }),
+      action
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "ui-group-body", children })
+  ] });
+}
+function Pill({ tone = "muted", children, pulse }) {
+  return /* @__PURE__ */ jsxs("span", { className: cx("ui-pill", tone, pulse && "pulse"), children: [
+    /* @__PURE__ */ jsx("i", {}),
+    children
+  ] });
+}
+function Sheet({ open, onClose, title, children, footer }) {
+  const id = useId();
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => e.key === "Escape" && onClose();
+    document.addEventListener("keydown", onKey);
+    document.body.classList.add("ui-sheet-open");
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.body.classList.remove("ui-sheet-open");
+    };
+  }, [open, onClose]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsx("div", { className: "ui-sheet-backdrop", onClick: onClose, children: /* @__PURE__ */ jsxs("div", { className: "ui-sheet", role: "dialog", "aria-modal": "true", "aria-labelledby": title ? id : void 0, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsx("div", { className: "ui-sheet-grip" }),
+    title && /* @__PURE__ */ jsxs("div", { className: "ui-sheet-head", children: [
+      /* @__PURE__ */ jsx("h2", { id, children: title }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "ui-icon-btn", "aria-label": "Close", onClick: onClose, children: /* @__PURE__ */ jsx(Icon, { d: "M6 6l12 12M18 6 6 18" }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "ui-sheet-body", children }),
+    footer && /* @__PURE__ */ jsx("div", { className: "ui-sheet-foot", children: footer })
+  ] }) });
+}
+function Stepper({ value, onChange, min = 0, max = 1e5, step = 1, unit, presets, format = fmt }) {
+  const clamp = (v) => Math.min(max, Math.max(min, Math.round(v * 100) / 100));
+  return /* @__PURE__ */ jsxs("div", { className: "ui-stepper-wrap", children: [
+    /* @__PURE__ */ jsxs("div", { className: "ui-stepper", children: [
+      /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Less", onClick: () => onChange(clamp(value - step)), disabled: value <= min, children: /* @__PURE__ */ jsx(Icon, { d: "M5 12h14" }) }),
+      /* @__PURE__ */ jsxs("span", { className: "ui-stepper-value", children: [
+        format(value),
+        unit && /* @__PURE__ */ jsxs(Fragment, { children: [
+          " ",
+          /* @__PURE__ */ jsx("small", { children: unit })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "More", onClick: () => onChange(clamp(value + step)), disabled: value >= max, children: /* @__PURE__ */ jsx(Icon, { d: "M12 5v14M5 12h14" }) })
+    ] }),
+    presets && /* @__PURE__ */ jsx("div", { className: "ui-presets", children: presets.map((p) => /* @__PURE__ */ jsx("button", { type: "button", className: p === value ? "on" : "", onClick: () => onChange(p), children: format(p) }, p)) })
+  ] });
+}
+function Empty({ icon, title, hint, action }) {
+  return /* @__PURE__ */ jsxs("div", { className: "ui-empty", children: [
+    icon && /* @__PURE__ */ jsx("span", { className: "ui-empty-icon", children: icon }),
+    /* @__PURE__ */ jsx("strong", { children: title }),
+    hint && /* @__PURE__ */ jsx("span", { children: hint }),
+    action
+  ] });
+}
+function Skeleton({ lines = 3 }) {
+  return /* @__PURE__ */ jsx("div", { className: "ui-skeleton", "aria-busy": "true", children: Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ jsx("span", { style: { width: `${90 - i % 3 * 18}%` } }, i)) });
+}
+export {
+  Button,
+  Card,
+  Empty,
+  Group,
+  Page,
+  Pill,
+  Row,
+  Sheet,
+  Skeleton,
+  Stepper
+};

package/dist/tokens.css

@@ -0,0 +1,121 @@
+/*
+ * @ambasada/ui design tokens: the Ambasada look as CSS custom properties.
+ *
+ * Source of truth is the Ambasada hub (repo ambasada-landing, hub.ambasada.id / ambasada.pro):
+ *   - src/app/globals.css        the @theme block ("V5 light + brand red")
+ *   - src/app/layout.tsx         Inter + JetBrains Mono via next/font
+ *   - src/lib/member/card-style.ts  wallet pass palettes (Apple / Google Wallet)
+ *   - src/app/card/frames.tsx    WalletCard, the on-screen copy of the pass
+ * Light only: the Ambasada app is light, and so are its mini apps (docs/MINI-APPS.md §9).
+ * Usage and rules: docs/DESIGN-SYSTEM.md. The fonts themselves are in fonts.css.
+ */
+
+:root {
+  color-scheme: light;
+
+  /* Brand */
+  --color-accent: #ff002e; /* hub --color-accent, the logo red; "Ambasada red" pass palette rgb(255,0,46) */
+  --color-accent-hover: #e5002a; /* hub .prose-ambasada a:hover */
+  --color-accent-text: #e5002a; /* red for small text on light: #ff002e is 3.8:1 on bg, this is 4.6:1 (AA) */
+  --color-accent-press: #b30020; /* hub tier-theme "Active" gradient end */
+  --color-accent-2: #ff6b00; /* hub --color-accent-2, used sparingly (warm highlights) */
+  --color-accent-soft: #ffe9ec; /* hub --color-accent-soft, tinted backgrounds */
+  --color-accent-ring: rgba(255, 0, 46, 0.45); /* hub .card-hover:hover border */
+  --color-on-accent: #ffffff; /* hub primary button text, pass foreground */
+
+  /* Neutrals */
+  --color-bg: #fafaf9; /* hub --color-bg (stone-50) */
+  --color-surface: #ffffff; /* hub --color-surface */
+  --color-surface-2: #f5f5f4; /* stone-100, hub Clerk card footer and row hover */
+  --color-ink: #0c0a09; /* hub --color-ink (stone-950) */
+  --color-ink-2: #57534e; /* hub --color-ink-2 (stone-600), secondary text */
+  --color-ink-3: #78716c; /* hub --color-ink-3 (stone-500), labels, WCAG AA on bg */
+  --color-line: #e7e5e4; /* hub --color-line (stone-200), borders and dividers */
+  --color-line-strong: #d6d3d1; /* stone-300, input borders on hover */
+  --color-backdrop: rgba(12, 10, 9, 0.5); /* behind bottom sheets: ink at 50% */
+
+  /* Status */
+  --color-success: #16a34a; /* hub --color-success */
+  --color-warn: #f59e0b; /* hub --color-warn */
+  --color-danger: #dc2626; /* red-600: distinct from the brand red so errors never read as branding */
+  --color-info: #2563eb; /* hub --color-info */
+  --color-success-soft: #ecfdf3; /* tint of success for notices */
+  --color-warn-soft: #fff8eb; /* tint of warn for notices */
+  --color-danger-soft: #fef2f2; /* tint of danger for notices */
+  --color-warn-line: #fcd9a0;
+  --color-danger-line: #fecaca;
+  --color-success-line: #bbf7d0;
+
+  /* The member card (wallet pass, "Ambasada red" palette, src/lib/member/card-style.ts) */
+  --card-bg: #ff002e; /* pass backgroundColor rgb(255,0,46) */
+  --card-fg: #ffffff; /* pass foregroundColor rgb(255,255,255) */
+  --card-label: #ffc8d2; /* pass labelColor rgb(255,200,210) */
+  --card-divider: rgba(255, 255, 255, 0.28);
+  /* The dark card ("Midnight" palette, also the hub's .card-dark / terminal surface) */
+  --card-dark-bg: #0c0a09; /* pass Midnight rgb(12,10,9), hub --color-terminal-bg */
+  --card-dark-fg: #ffffff;
+  --card-dark-label: #a5a09b; /* pass Midnight labelColor rgb(165,160,155) */
+
+  /* Typography */
+  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; /* hub layout.tsx Inter */
+  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* hub layout.tsx JetBrains_Mono 400/500/700 */
+  --font-native: -apple-system, BlinkMacSystemFont, system-ui, sans-serif; /* hub .native-shell body */
+
+  --text-label: 0.6875rem; /* 11px, hub .section-label (mono, uppercase, 0.1em): the mono label, .ui-label */
+  --text-micro: 0.625rem; /* 10px, hub card labels ("membership", business card rows) */
+  --text-xs: 0.75rem; /* 12px, hub nav links */
+  --text-sm: 0.875rem; /* 14px, hub body small / buttons */
+  --text-base: 1rem; /* 16px */
+  --text-lg: 1.0625rem; /* 17px, pass "Name" value */
+  --text-xl: 1.375rem; /* 22px, business card name */
+  --text-2xl: 1.75rem; /* 28px, page titles on mobile */
+  --text-display: 2.75rem; /* 44px, wallet balance (hub card numbers, text-3xl and up) */
+  --tracking-label: 0.1em; /* hub .section-label */
+  --tracking-tight: -0.02em; /* hub headings, tracking-tight */
+  --weight-regular: 400;
+  --weight-medium: 500; /* hub headings are font-medium */
+  --weight-semibold: 600; /* hub card names */
+  --weight-bold: 700; /* hub numbers (events count) */
+
+  /* Radii */
+  --radius-xs: 4px; /* hub QR plate on the wallet card */
+  --radius-sm: 8px; /* hub --radius-sm, Clerk borderRadius 0.5rem: buttons and inputs */
+  --radius-md: 12px; /* hub article images, notices */
+  --radius-card: 16px; /* hub --radius-card, WalletCard rounded-2xl */
+  --radius-hero: 28px; /* hub MemberCard and BusinessCard rounded-[28px], bottom sheets */
+  --radius-pill: 9999px; /* hub --radius-pill */
+
+  /* Shadows */
+  --shadow-card: 0 1px 2px rgba(12, 10, 9, 0.04); /* hub cards are flat: border first, barely any shadow */
+  --shadow-raised: 0 12px 40px -20px rgba(0, 0, 0, 0.35); /* hub BusinessCard */
+  --shadow-pass: 0 30px 60px -30px rgba(0, 0, 0, 0.55); /* hub WalletCard */
+  --shadow-glow: 0 0 0 1px rgba(255, 0, 46, 0.25), 0 12px 40px -8px rgba(255, 0, 46, 0.18); /* hub .glow-red */
+  --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent); /* hub: 2px accent outline, offset 2px */
+
+  /* Spacing (4px grid, as Tailwind in the hub) */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px; /* hub WalletCard horizontal padding (px-5) */
+  --space-6: 24px; /* hub MemberCard padding (p-6), page gutter (px-6) */
+  --space-8: 32px;
+  --space-10: 40px;
+  --page-max: 480px; /* the mini-app column; the hub's member pages use max-w-md..lg */
+  --tap: 44px; /* minimum touch target */
+
+  /* Motion */
+  --ease: cubic-bezier(0.2, 0, 0, 1);
+  --duration: 200ms; /* hub .card transitions */
+
+  /*
+   * The Ambasada app's shell (docs/MINI-APPS.md §6). Inside the app, @ambasada/miniapp (applyCssVars, run by
+   * ready()) sets these on <html> from the shell context, which wins over :root. On the web the safe areas
+   * fall back to the browser's own insets (non-zero only with viewport-fit=cover) and there is no host bar.
+   */
+  --ambasada-safe-area-top: env(safe-area-inset-top, 0px);
+  --ambasada-safe-area-bottom: env(safe-area-inset-bottom, 0px);
+  --ambasada-safe-area-left: env(safe-area-inset-left, 0px);
+  --ambasada-safe-area-right: env(safe-area-inset-right, 0px);
+  --ambasada-host-bar: 0px; /* height of the shell's top bar (back, app name, "…" menu) */
+}

package/package.json

@@ -1,6 +1,69 @@
 {
   "name": "@ambasada/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.7.0",
+  "description": "The Ambasada look for mini apps: design tokens (colours, Inter + JetBrains Mono, radii, spacing, safe areas) and a small component set in plain CSS, with optional React wrappers. One stylesheet to <link>.",
+  "type": "module",
+  "license": "MIT",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": "./dist/ambasada-ui.css",
+    "./ambasada-ui.css": "./dist/ambasada-ui.css",
+    "./tokens.css": "./dist/tokens.css",
+    "./components.css": "./dist/components.css",
+    "./fonts.css": "./dist/fonts.css",
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "default": "./dist/react.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/node": "^22.20.5",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "esbuild": "^0.28.2",
+    "react": "~19.3.1",
+    "react-dom": "~19.3.1",
+    "typescript": "~5.9.3",
+    "vitest": "^4.1.12"
+  },
+  "author": "CENTYSO (https://centyso.com)",
+  "homepage": "https://ambasada.id",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ambasada/cli.git",
+    "directory": "packages/ui"
+  },
+  "bugs": {
+    "url": "https://github.com/ambasada/cli/issues"
+  },
+  "keywords": [
+    "ambasada",
+    "mini-app",
+    "design-tokens",
+    "css",
+    "react"
+  ],
+  "scripts": {
+    "build": "node scripts/build.mjs",
+    "typecheck": "tsc -p .",
+    "test": "vitest run"
+  }
 }