@bizbasics/ui 0.1.0

package/src/components/Spinner.tsx

@@ -0,0 +1,43 @@
+import type { CSSProperties } from "react";
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: CSSProperties;
+}
+
+export function Spinner({ size = 20, color = "var(--bb-brand)", style }: Props) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      style={{ animation: "bb-spin 0.65s linear infinite", flexShrink: 0, ...style }}
+    >
+      <style>{`@keyframes bb-spin { to { transform: rotate(360deg); } }`}</style>
+      <circle
+        cx="12" cy="12" r="10"
+        stroke={color}
+        strokeWidth="2.5"
+        strokeDasharray="56"
+        strokeDashoffset="14"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+export function PageSpinner() {
+  return (
+    <div style={{
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      height: "100%",
+      minHeight: "200px",
+    }}>
+      <Spinner size={28} />
+    </div>
+  );
+}

package/src/components/Toast.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+import { createContext, useContext, useState, useCallback, type ReactNode, type CSSProperties } from "react";
+
+// ── Types ────────────────────────────────────────────────────────────────────
+
+type Variant = "success" | "error" | "warning" | "info";
+
+interface ToastItem {
+  id: string;
+  message: string;
+  variant: Variant;
+  duration: number;
+}
+
+interface ToastContextValue {
+  toast: (message: string, variant?: Variant, duration?: number) => void;
+}
+
+// ── Context ───────────────────────────────────────────────────────────────────
+
+const ToastContext = createContext<ToastContextValue | null>(null);
+
+export function useToast(): ToastContextValue {
+  const ctx = useContext(ToastContext);
+  if (!ctx) throw new Error("useToast must be used inside <ToastProvider>");
+  return ctx;
+}
+
+// ── Provider ──────────────────────────────────────────────────────────────────
+
+export function ToastProvider({ children }: { children: ReactNode }) {
+  const [items, setItems] = useState<ToastItem[]>([]);
+
+  const toast = useCallback((message: string, variant: Variant = "info", duration = 4000) => {
+    const id = `${Date.now()}-${Math.random()}`;
+    setItems((prev) => [...prev, { id, message, variant, duration }]);
+    setTimeout(() => {
+      setItems((prev) => prev.filter((t) => t.id !== id));
+    }, duration);
+  }, []);
+
+  const dismiss = useCallback((id: string) => {
+    setItems((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+
+  return (
+    <ToastContext.Provider value={{ toast }}>
+      {children}
+      <ToastList items={items} onDismiss={dismiss} />
+    </ToastContext.Provider>
+  );
+}
+
+// ── Display ───────────────────────────────────────────────────────────────────
+
+const variantStyles: Record<Variant, CSSProperties> = {
+  success: { borderLeftColor: "#16a34a", background: "#1a2a1e" },
+  error:   { borderLeftColor: "#dc2626", background: "#2a1a1a" },
+  warning: { borderLeftColor: "#d97706", background: "#2a2218" },
+  info:    { borderLeftColor: "#6366f1", background: "#1e1e2a" },
+};
+
+const variantIcons: Record<Variant, string> = {
+  success: "✓",
+  error:   "✕",
+  warning: "!",
+  info:    "i",
+};
+
+const variantIconColors: Record<Variant, string> = {
+  success: "#16a34a",
+  error:   "#dc2626",
+  warning: "#d97706",
+  info:    "#818cf8",
+};
+
+function ToastList({ items, onDismiss }: { items: ToastItem[]; onDismiss: (id: string) => void }) {
+  if (items.length === 0) return null;
+  return (
+    <div style={{
+      position: "fixed", bottom: "24px", right: "24px",
+      display: "flex", flexDirection: "column", gap: "8px",
+      zIndex: "var(--bb-z-toast, 400)" as unknown as number,
+      maxWidth: "360px", width: "100%",
+      pointerEvents: "none",
+    }}>
+      {items.map((item) => (
+        <div
+          key={item.id}
+          style={{
+            display: "flex", alignItems: "flex-start", gap: "10px",
+            padding: "12px 14px",
+            borderRadius: "var(--bb-radius)",
+            border: "1px solid rgba(255,255,255,0.08)",
+            borderLeft: `3px solid ${variantStyles[item.variant].borderLeftColor}`,
+            background: variantStyles[item.variant].background as string,
+            boxShadow: "0 4px 20px rgba(0,0,0,0.3)",
+            fontSize: "var(--bb-text-sm)",
+            color: "#e2e8f0",
+            fontFamily: "var(--bb-font-sans)",
+            pointerEvents: "all",
+            animation: "bb-toast-in 0.2s ease",
+          }}
+        >
+          <style>{`@keyframes bb-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }`}</style>
+          <span style={{
+            width: "16px", height: "16px", borderRadius: "9999px",
+            background: variantIconColors[item.variant],
+            color: "#fff", fontSize: "10px", fontWeight: 700,
+            display: "flex", alignItems: "center", justifyContent: "center",
+            flexShrink: 0, marginTop: "1px",
+          }}>
+            {variantIcons[item.variant]}
+          </span>
+          <span style={{ flex: 1, lineHeight: 1.5 }}>{item.message}</span>
+          <button
+            onClick={() => onDismiss(item.id)}
+            style={{
+              background: "none", border: "none", color: "#64748b",
+              cursor: "pointer", fontSize: "16px", lineHeight: 1,
+              padding: "0", flexShrink: 0,
+            }}
+          >
+            ×
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/components/UserProfilePanel.tsx

@@ -0,0 +1,148 @@
+"use client";
+
+import { type CSSProperties } from "react";
+import { Avatar } from "./Avatar";
+import type { ProfileCalloutUser } from "./ProfileCallout";
+
+interface Props {
+  user: ProfileCalloutUser;
+  plan?: string;
+  onClose: () => void;
+}
+
+export function UserProfilePanel({ user, plan, onClose }: Props) {
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        onClick={onClose}
+        style={{
+          position: "fixed", inset: 0, zIndex: 290,
+          background: "rgba(0,0,0,0.45)",
+        }}
+      />
+
+      {/* Panel */}
+      <div style={{
+        position: "fixed", top: 0, right: 0, bottom: 0,
+        width: "320px", zIndex: 300,
+        background: "#1a1d24",
+        borderLeft: "1px solid rgba(255,255,255,0.08)",
+        boxShadow: "-20px 0 60px rgba(0,0,0,0.4)",
+        display: "flex", flexDirection: "column",
+        fontFamily: "var(--bb-font-sans)",
+      }}>
+        {/* Header */}
+        <div style={{
+          display: "flex", alignItems: "center", justifyContent: "space-between",
+          padding: "16px 20px",
+          borderBottom: "1px solid rgba(255,255,255,0.07)",
+        }}>
+          <span style={{ fontSize: "14px", fontWeight: 600, color: "#f1f5f9" }}>Profile</span>
+          <button
+            onClick={onClose}
+            style={{ background: "none", border: "none", color: "#64748b", cursor: "pointer", fontSize: "20px", lineHeight: 1, padding: "2px" }}
+          >
+            ×
+          </button>
+        </div>
+
+        {/* Body */}
+        <div style={{ flex: 1, overflowY: "auto", padding: "24px 20px" }}>
+          {/* Avatar + name */}
+          <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "12px", marginBottom: "32px" }}>
+            <Avatar name={user.name} size={72} />
+            <div style={{ textAlign: "center" }}>
+              <div style={{ fontSize: "16px", fontWeight: 700, color: "#f1f5f9" }}>{user.name}</div>
+              <div style={{ fontSize: "13px", color: "#64748b", marginTop: "4px" }}>{user.email}</div>
+              {user.role && (
+                <div style={roleBadgeStyle}>{user.role.replace(/_/g, " ")}</div>
+              )}
+            </div>
+          </div>
+
+          {/* Info rows */}
+          <div style={{ display: "flex", flexDirection: "column", gap: "1px" }}>
+            {plan && (
+              <InfoRow label="Plan" value={<span style={{ textTransform: "capitalize" }}>{plan}</span>} />
+            )}
+          </div>
+
+          {/* Links */}
+          <div style={{ marginTop: "28px", display: "flex", flexDirection: "column", gap: "4px" }}>
+            <PanelLink href="https://app.bizbasics.ai/settings/profile">Edit profile</PanelLink>
+            <PanelLink href="https://app.bizbasics.ai/settings/security">Change password</PanelLink>
+            <PanelLink href="https://app.bizbasics.ai/settings/notifications">Notification preferences</PanelLink>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div style={{
+          padding: "16px 20px",
+          borderTop: "1px solid rgba(255,255,255,0.07)",
+        }}>
+          <a
+            href="https://app.bizbasics.ai/dashboard"
+            style={{
+              display: "block", textAlign: "center",
+              padding: "9px",
+              background: "rgba(255,255,255,0.06)",
+              border: "1px solid rgba(255,255,255,0.08)",
+              borderRadius: "8px",
+              fontSize: "13px", fontWeight: 500,
+              color: "#94a3b8", textDecoration: "none",
+            }}
+          >
+            Go to platform dashboard
+          </a>
+        </div>
+      </div>
+    </>
+  );
+}
+
+function InfoRow({ label, value }: { label: string; value: React.ReactNode }) {
+  return (
+    <div style={{
+      display: "flex", justifyContent: "space-between", alignItems: "center",
+      padding: "10px 12px", background: "rgba(255,255,255,0.03)",
+      borderRadius: "6px",
+    }}>
+      <span style={{ fontSize: "12px", color: "#64748b" }}>{label}</span>
+      <span style={{ fontSize: "13px", color: "#e2e8f0" }}>{value}</span>
+    </div>
+  );
+}
+
+function PanelLink({ href, children }: { href: string; children: string }) {
+  return (
+    <a
+      href={href}
+      style={{
+        display: "flex", alignItems: "center", justifyContent: "space-between",
+        padding: "9px 12px", borderRadius: "7px",
+        fontSize: "13px", color: "#c4c5c9", textDecoration: "none",
+        transition: "background 120ms",
+      }}
+      onMouseEnter={(e) => (e.currentTarget.style.background = "rgba(255,255,255,0.05)")}
+      onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}
+    >
+      {children}
+      <svg width={14} height={14} fill="none" stroke="currentColor" viewBox="0 0 24 24" style={{ color: "#475569" }}>
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+      </svg>
+    </a>
+  );
+}
+
+const roleBadgeStyle: CSSProperties = {
+  display: "inline-block",
+  marginTop: "6px",
+  padding: "2px 10px",
+  background: "rgba(255,255,255,0.07)",
+  border: "1px solid rgba(255,255,255,0.10)",
+  borderRadius: "9999px",
+  fontSize: "11px",
+  color: "#94a3b8",
+  textTransform: "capitalize",
+};

package/src/index.ts

@@ -0,0 +1,32 @@
+// Layout
+export { AppShell } from "./components/AppShell";
+export { AppSidebar } from "./components/AppSidebar";
+export type { AppSidebarProps } from "./components/AppSidebar";
+export { AppTopBar, TopBarIconButton } from "./components/AppTopBar";
+export { SidebarBrand, OrgSwitcher } from "./components/SidebarBrand";
+export { NavItem, type NavItemDef } from "./components/NavItem";
+export { NavSection, NavDivider } from "./components/NavSection";
+export { ProfileCallout, type ProfileCalloutUser } from "./components/ProfileCallout";
+
+// Cross-product navigation (for external products)
+export { PlatformNav } from "./components/PlatformNav";
+export type { PlatformNavApp, PlatformNavUser, PlatformNavProps } from "./components/PlatformNav";
+
+// UI primitives
+export { Button } from "./components/Button";
+export { Input, Textarea, Select } from "./components/Input";
+export { Modal } from "./components/Modal";
+export { Avatar } from "./components/Avatar";
+export { Badge } from "./components/Badge";
+export { Spinner, PageSpinner } from "./components/Spinner";
+export { EmptyState } from "./components/EmptyState";
+export { Card, CardHeader, CardDivider } from "./components/Card";
+
+// Auth layout primitives
+export { AuthLayout, AuthCard, AuthInput, AuthButton } from "./components/Auth";
+
+// Toast / Snackbar
+export { ToastProvider, useToast } from "./components/Toast";
+
+// User profile panel
+export { UserProfilePanel } from "./components/UserProfilePanel";

package/src/tokens.css

@@ -0,0 +1,158 @@
+/*
+ * bizbasics design tokens — single source of truth
+ * Import this file in every app's globals.css:
+ *   @import "@bizbasics/ui/tokens.css";
+ *
+ * All apps share the same sidebar, topbar, and component token values.
+ * Content-area background varies by app (--bb-app-bg).
+ */
+
+:root {
+  /* ─── Brand ─────────────────────────────────────────────── */
+  --bb-brand:          #2563eb;   /* blue-600 — primary accent */
+  --bb-brand-hover:    #1d4ed8;   /* blue-700 */
+  --bb-brand-light:    #93c5fd;   /* blue-300 — links, active text */
+  --bb-brand-muted:    rgba(37, 99, 235, 0.14);   /* active item bg */
+  --bb-brand-ring:     rgba(37, 99, 235, 0.30);   /* focus ring */
+
+  /* ─── Sidebar (always dark, consistent across all apps) ─── */
+  --bb-sidebar-bg:          #0f172a;
+  --bb-sidebar-header-bg:   #0f172a;
+  --bb-sidebar-border:      rgba(255, 255, 255, 0.06);
+  --bb-sidebar-text:        #c4c5c9;
+  --bb-sidebar-text-muted:  #5f6370;
+  --bb-sidebar-hover-bg:    rgba(255, 255, 255, 0.055);
+  --bb-sidebar-active-bg:   rgba(37, 99, 235, 0.16);
+  --bb-sidebar-active-text: #93c5fd;   /* blue-300 */
+  --bb-sidebar-width:       240px;
+  --bb-sidebar-section-label: #4b4f5a;
+
+  /* ─── TopBar (always dark) ───────────────────────────────── */
+  --bb-topbar-bg:       #111827;
+  --bb-topbar-border:   rgba(255, 255, 255, 0.07);
+  --bb-topbar-text:     #e5e7eb;
+  --bb-topbar-muted:    #6b7280;
+  --bb-topbar-height:   48px;
+
+  /* ─── Surface / Content ──────────────────────────────────── */
+  /* Override --bb-app-bg per-app in their own globals.css */
+  --bb-app-bg:          #f4f5f7;   /* default: light (portal, admin) */
+
+  --bb-surface:         #ffffff;
+  --bb-surface-muted:   #f9fafb;
+  --bb-surface-overlay: #ffffff;
+
+  --bb-border:          #e5e7eb;
+  --bb-border-muted:    #f3f4f6;
+  --bb-border-strong:   #d1d5db;
+
+  /* ─── Text (light content area) ─────────────────────────── */
+  --bb-text-primary:    #111827;
+  --bb-text-secondary:  #374151;
+  --bb-text-muted:      #6b7280;
+  --bb-text-disabled:   #9ca3af;
+  --bb-text-inverse:    #f9fafb;
+
+  /* ─── Status colors ─────────────────────────────────────── */
+  --bb-success:         #16a34a;
+  --bb-success-bg:      #f0fdf4;
+  --bb-success-border:  #bbf7d0;
+
+  --bb-warning:         #d97706;
+  --bb-warning-bg:      #fffbeb;
+  --bb-warning-border:  #fde68a;
+
+  --bb-error:           #dc2626;
+  --bb-error-bg:        #fef2f2;
+  --bb-error-border:    #fecaca;
+
+  --bb-info:            #2563eb;
+  --bb-info-bg:         #eff6ff;
+  --bb-info-border:     #bfdbfe;
+
+  /* ─── Slate scale (convenience aliases used by components) ── */
+  --bb-slate-50:  #f8fafc;
+  --bb-slate-100: #f1f5f9;
+  --bb-slate-200: #e2e8f0;
+  --bb-slate-300: #cbd5e1;
+  --bb-slate-400: #94a3b8;
+  --bb-slate-500: #64748b;
+  --bb-slate-600: #475569;
+  --bb-slate-700: #334155;
+  --bb-slate-800: #1e293b;
+  --bb-slate-900: #0f172a;
+
+  /* ─── Typography ─────────────────────────────────────────── */
+  --bb-font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI",
+                  Roboto, Helvetica, Arial, sans-serif;
+  --bb-font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code",
+                  "Source Code Pro", Menlo, monospace;
+
+  --bb-text-xs:   11px;
+  --bb-text-sm:   13px;
+  --bb-text-base: 14px;
+  --bb-text-md:   15px;
+  --bb-text-lg:   17px;
+  --bb-text-xl:   20px;
+  --bb-text-2xl:  24px;
+
+  /* ─── Radius ─────────────────────────────────────────────── */
+  --bb-radius-sm:   4px;
+  --bb-radius:      8px;
+  --bb-radius-md:   10px;
+  --bb-radius-lg:   12px;
+  --bb-radius-xl:   16px;
+  --bb-radius-full: 9999px;
+
+  /* ─── Shadow ─────────────────────────────────────────────── */
+  --bb-shadow-sm:  0 1px 2px rgba(0,0,0,0.06);
+  --bb-shadow:     0 1px 4px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06);
+  --bb-shadow-md:  0 4px 16px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.08);
+  --bb-shadow-lg:  0 8px 32px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.08);
+  --bb-shadow-xl:  0 20px 60px rgba(0,0,0,0.20), 0 4px 12px rgba(0,0,0,0.10);
+
+  /* ─── Transition ─────────────────────────────────────────── */
+  --bb-transition: 120ms ease;
+  --bb-transition-slow: 200ms ease;
+
+  /* ─── Z-index ────────────────────────────────────────────── */
+  --bb-z-dropdown: 100;
+  --bb-z-sticky:   200;
+  --bb-z-modal:    300;
+  --bb-z-toast:    400;
+}
+
+/* Dark content variant — used by relay, monk, and future dark apps */
+.bb-dark-content {
+  --bb-app-bg:          #1a1d21;
+  --bb-surface:         #22252c;
+  --bb-surface-muted:   #1e2128;
+  --bb-surface-overlay: #2a2d36;
+  --bb-border:          rgba(255, 255, 255, 0.07);
+  --bb-border-muted:    rgba(255, 255, 255, 0.04);
+  --bb-border-strong:   rgba(255, 255, 255, 0.12);
+  --bb-text-primary:    #e5e7eb;
+  --bb-text-secondary:  #c4c5c9;
+  --bb-text-muted:      #6b7280;
+  --bb-text-disabled:   #4b5563;
+}
+
+/* ─── Global base styles injected by every app ─────────────── */
+*, *::before, *::after { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  font-family: var(--bb-font-sans);
+  font-size: var(--bb-text-base);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background: var(--bb-app-bg);
+  color: var(--bb-text-primary);
+}
+
+/* Scrollbar — consistent thin dark scrollbar */
+* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.12) transparent; }
+::-webkit-scrollbar { width: 5px; height: 5px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: var(--bb-radius-full); }
+::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "declaration": true,
+    "declarationMap": true
+  },
+  "include": ["src"]
+}