@bizbasics/ui 0.1.0

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@bizbasics/ui",
+  "version": "0.1.0",
+  "private": false,
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./tokens.css": "./src/tokens.css"
+  },
+  "peerDependencies": {
+    "react": "^18",
+    "react-dom": "^18",
+    "lucide-react": ">=0.400.0",
+    "next": ">=14"
+  }
+}

package/src/components/AppShell.tsx

@@ -0,0 +1,44 @@
+import type { CSSProperties, ReactNode } from "react";
+
+interface Props {
+  sidebar: ReactNode;
+  topBar?: ReactNode;
+  children: ReactNode;
+  /** Apply dark content variant — sets --bb-app-bg to dark. Used by relay, monk. */
+  dark?: boolean;
+}
+
+const shellStyle: CSSProperties = {
+  display: "flex",
+  height: "100vh",
+  overflow: "hidden",
+};
+
+const mainColStyle: CSSProperties = {
+  display: "flex",
+  flexDirection: "column",
+  flex: 1,
+  minWidth: 0,
+  overflow: "hidden",
+};
+
+const contentStyle: CSSProperties = {
+  flex: 1,
+  overflowY: "auto",
+  overflowX: "hidden",
+  background: "var(--bb-app-bg)",
+};
+
+export function AppShell({ sidebar, topBar, children, dark }: Props) {
+  return (
+    <div style={shellStyle} className={dark ? "bb-dark-content" : undefined}>
+      {sidebar}
+      <div style={mainColStyle}>
+        {topBar}
+        <div style={contentStyle}>
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/AppSidebar.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import type { CSSProperties, ReactNode } from "react";
+import { ProfileCallout } from "./ProfileCallout";
+import type { ProfileCalloutUser } from "./ProfileCallout";
+
+export interface AppSidebarProps {
+  /** Brand section — rendered at top of sidebar */
+  brand: ReactNode;
+  /** Main nav content — NavSection + NavItem components */
+  nav: ReactNode;
+  /** User for the profile callout at the bottom */
+  user: ProfileCalloutUser;
+  onSignOut: () => void;
+  settingsHref?: string;
+  /** Extra profile menu items (e.g. "Profile", "Keyboard shortcuts") */
+  profileMenuItems?: Array<{
+    label: string;
+    href?: string;
+    onClick?: () => void;
+    danger?: boolean;
+  }>;
+  /** Status slot — rendered above the profile row (relay uses this for StatusPicker) */
+  statusSlot?: ReactNode;
+}
+
+const sidebarStyle: CSSProperties = {
+  width: "var(--bb-sidebar-width)",
+  minWidth: "var(--bb-sidebar-width)",
+  background: "var(--bb-sidebar-bg)",
+  display: "flex",
+  flexDirection: "column",
+  height: "100vh",
+  position: "sticky",
+  top: 0,
+  borderRight: "1px solid var(--bb-sidebar-border)",
+  overflowY: "auto",
+  overflowX: "hidden",
+};
+
+export function AppSidebar({
+  brand,
+  nav,
+  user,
+  onSignOut,
+  settingsHref,
+  profileMenuItems,
+  statusSlot,
+}: AppSidebarProps) {
+  return (
+    <aside style={sidebarStyle}>
+      {/* Brand/header */}
+      <div style={{
+        borderBottom: "1px solid var(--bb-sidebar-border)",
+        flexShrink: 0,
+      }}>
+        {brand}
+      </div>
+
+      {/* Main nav — scrollable */}
+      <div style={{ flex: 1, overflowY: "auto", padding: "8px 0" }}>
+        {nav}
+      </div>
+
+      {/* Profile callout — pinned to bottom */}
+      <ProfileCallout
+        user={user}
+        onSignOut={onSignOut}
+        settingsHref={settingsHref}
+        extraItems={profileMenuItems}
+        statusSlot={statusSlot}
+      />
+    </aside>
+  );
+}

package/src/components/AppTopBar.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+import type { CSSProperties, ReactNode } from "react";
+
+interface Props {
+  /** Left side: page title or breadcrumb */
+  title?: ReactNode;
+  /** Left side actions/breadcrumb extras */
+  titleActions?: ReactNode;
+  /** Right side: notification bells, search, etc. */
+  actions?: ReactNode;
+  /** Optional border-bottom override */
+  noBorder?: boolean;
+}
+
+const barStyle: CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  height: "var(--bb-topbar-height)",
+  padding: "0 20px",
+  background: "var(--bb-topbar-bg)",
+  borderBottom: "1px solid var(--bb-topbar-border)",
+  flexShrink: 0,
+  zIndex: 10,
+};
+
+const leftStyle: CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  gap: "12px",
+  minWidth: 0,
+};
+
+const titleStyle: CSSProperties = {
+  fontSize: "var(--bb-text-md)",
+  fontWeight: 600,
+  color: "var(--bb-topbar-text)",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+};
+
+const rightStyle: CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  gap: "4px",
+  flexShrink: 0,
+};
+
+export function AppTopBar({ title, titleActions, actions, noBorder }: Props) {
+  return (
+    <div style={{ ...barStyle, borderBottom: noBorder ? "none" : barStyle.borderBottom }}>
+      <div style={leftStyle}>
+        {title && (
+          <span style={titleStyle}>{title}</span>
+        )}
+        {titleActions}
+      </div>
+      <div style={rightStyle}>
+        {actions}
+      </div>
+    </div>
+  );
+}
+
+/** Small icon button for the top bar (notifications, search, etc.) */
+export function TopBarIconButton({
+  children,
+  title,
+  onClick,
+  badge,
+}: {
+  children: ReactNode;
+  title?: string;
+  onClick?: () => void;
+  badge?: number;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      title={title}
+      style={{
+        position: "relative",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: "32px",
+        height: "32px",
+        borderRadius: "var(--bb-radius)",
+        background: "transparent",
+        border: "none",
+        color: "var(--bb-topbar-muted)",
+        cursor: "pointer",
+        transition: "background var(--bb-transition), color var(--bb-transition)",
+      }}
+      onMouseEnter={(e) => {
+        (e.currentTarget).style.background = "rgba(255,255,255,0.07)";
+        (e.currentTarget).style.color = "var(--bb-topbar-text)";
+      }}
+      onMouseLeave={(e) => {
+        (e.currentTarget).style.background = "transparent";
+        (e.currentTarget).style.color = "var(--bb-topbar-muted)";
+      }}
+    >
+      {children}
+      {badge !== undefined && badge > 0 && (
+        <span style={{
+          position: "absolute",
+          top: "2px",
+          right: "2px",
+          background: "var(--bb-brand)",
+          color: "#fff",
+          fontSize: "9px",
+          fontWeight: 700,
+          lineHeight: 1,
+          padding: "1px 3px",
+          borderRadius: "var(--bb-radius-full)",
+          minWidth: "14px",
+          textAlign: "center",
+        }}>
+          {badge > 99 ? "99+" : badge}
+        </span>
+      )}
+    </button>
+  );
+}

package/src/components/Auth.tsx

@@ -0,0 +1,197 @@
+"use client";
+
+import type { CSSProperties, ReactNode, InputHTMLAttributes, ButtonHTMLAttributes } from "react";
+
+// ── AuthLayout ────────────────────────────────────────────────────────────────
+
+interface AuthLayoutProps {
+  children: ReactNode;
+  brand?: ReactNode;
+  footer?: ReactNode;
+}
+
+export function AuthLayout({ children, brand, footer }: AuthLayoutProps) {
+  return (
+    <div style={{
+      minHeight: "100vh",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      background: "#0f1117",
+      fontFamily: "var(--bb-font-sans)",
+      padding: "24px 16px",
+    }}>
+      {brand && (
+        <div style={{ marginBottom: "28px", textAlign: "center" }}>{brand}</div>
+      )}
+      {children}
+      {footer && (
+        <div style={{
+          marginTop: "24px",
+          fontSize: "var(--bb-text-xs)",
+          color: "var(--bb-slate-500)",
+          textAlign: "center",
+        }}>
+          {footer}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ── AuthCard ──────────────────────────────────────────────────────────────────
+
+interface AuthCardProps {
+  title: string;
+  subtitle?: ReactNode;
+  children: ReactNode;
+  width?: number;
+}
+
+export function AuthCard({ title, subtitle, children, width = 380 }: AuthCardProps) {
+  return (
+    <div style={{
+      width: "100%",
+      maxWidth: `${width}px`,
+      background: "#1a1d24",
+      border: "1px solid rgba(255,255,255,0.08)",
+      borderRadius: "var(--bb-radius-lg)",
+      boxShadow: "0 20px 60px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.2)",
+      padding: "32px",
+    }}>
+      <div style={{ marginBottom: "24px" }}>
+        <h1 style={{
+          margin: 0,
+          fontSize: "var(--bb-text-xl)",
+          fontWeight: 700,
+          color: "#f1f5f9",
+          letterSpacing: "-0.01em",
+        }}>
+          {title}
+        </h1>
+        {subtitle && (
+          <p style={{
+            margin: "8px 0 0",
+            fontSize: "var(--bb-text-sm)",
+            color: "var(--bb-slate-400)",
+            lineHeight: 1.5,
+          }}>
+            {subtitle}
+          </p>
+        )}
+      </div>
+      {children}
+    </div>
+  );
+}
+
+// ── AuthInput ─────────────────────────────────────────────────────────────────
+
+interface AuthInputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: string;
+}
+
+export function AuthInput({ label, error, style, ...rest }: AuthInputProps) {
+  const inputStyle: CSSProperties = {
+    width: "100%",
+    boxSizing: "border-box",
+    background: "rgba(255,255,255,0.05)",
+    border: `1px solid ${error ? "var(--bb-error)" : "rgba(255,255,255,0.10)"}`,
+    borderRadius: "var(--bb-radius)",
+    padding: "10px 12px",
+    fontSize: "var(--bb-text-sm)",
+    fontFamily: "var(--bb-font-sans)",
+    color: "#e5e7eb",
+    outline: "none",
+    transition: "border-color var(--bb-transition), box-shadow var(--bb-transition)",
+    ...style,
+  };
+
+  return (
+    <div>
+      {label && (
+        <label style={{
+          display: "block",
+          fontSize: "var(--bb-text-xs)",
+          fontWeight: 500,
+          color: "var(--bb-slate-400)",
+          marginBottom: "5px",
+        }}>
+          {label}
+        </label>
+      )}
+      <input
+        style={inputStyle}
+        onFocus={(e) => {
+          e.currentTarget.style.borderColor = error ? "var(--bb-error)" : "rgba(99,102,241,0.7)";
+          e.currentTarget.style.boxShadow = error
+            ? "0 0 0 3px rgba(220,38,38,0.15)"
+            : "0 0 0 3px rgba(99,102,241,0.15)";
+        }}
+        onBlur={(e) => {
+          e.currentTarget.style.borderColor = error ? "var(--bb-error)" : "rgba(255,255,255,0.10)";
+          e.currentTarget.style.boxShadow = "none";
+        }}
+        {...rest}
+      />
+      {error && (
+        <p style={{ margin: "5px 0 0", fontSize: "var(--bb-text-xs)", color: "var(--bb-error)" }}>
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}
+
+// ── AuthButton ────────────────────────────────────────────────────────────────
+
+interface AuthButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  loading?: boolean;
+  brandColor?: string;
+  children: ReactNode;
+}
+
+export function AuthButton({ loading, brandColor = "#6366f1", children, disabled, style, ...rest }: AuthButtonProps) {
+  return (
+    <button
+      disabled={disabled || loading}
+      style={{
+        width: "100%",
+        padding: "11px 20px",
+        background: disabled || loading ? `${brandColor}99` : brandColor,
+        color: "#fff",
+        border: "none",
+        borderRadius: "var(--bb-radius)",
+        fontSize: "var(--bb-text-sm)",
+        fontWeight: 600,
+        fontFamily: "var(--bb-font-sans)",
+        cursor: disabled || loading ? "not-allowed" : "pointer",
+        transition: "background var(--bb-transition), opacity var(--bb-transition)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "8px",
+        ...style,
+      }}
+      {...rest}
+    >
+      {loading && <BtnSpinner />}
+      {children}
+    </button>
+  );
+}
+
+function BtnSpinner() {
+  return (
+    <svg
+      width={14} height={14} viewBox="0 0 24 24" fill="none"
+      style={{ animation: "bb-spin 0.7s linear infinite", flexShrink: 0 }}
+    >
+      <style>{`@keyframes bb-spin { to { transform: rotate(360deg); } }`}</style>
+      <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="3"
+        strokeDasharray="60" strokeDashoffset="15" strokeLinecap="round" />
+    </svg>
+  );
+}

package/src/components/Avatar.tsx

@@ -0,0 +1,81 @@
+import type { CSSProperties } from "react";
+
+interface Props {
+  name: string;
+  size?: number;
+  /** Online/offline dot */
+  online?: boolean;
+  src?: string;
+  style?: CSSProperties;
+}
+
+function initials(name: string) {
+  const parts = name.trim().split(/\s+/);
+  if (parts.length === 1) return parts[0].charAt(0).toUpperCase();
+  return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
+}
+
+function hueFromName(name: string) {
+  let h = 0;
+  for (let i = 0; i < name.length; i++) h = (h * 31 + name.charCodeAt(i)) & 0xffffff;
+  return h % 360;
+}
+
+export function Avatar({ name, size = 32, online, src, style }: Props) {
+  const hue = hueFromName(name);
+  const bg = `hsl(${hue}, 55%, 40%)`;
+
+  const containerStyle: CSSProperties = {
+    position: "relative",
+    display: "inline-flex",
+    flexShrink: 0,
+    width: size,
+    height: size,
+    ...style,
+  };
+
+  const imgStyle: CSSProperties = {
+    width: size,
+    height: size,
+    borderRadius: "var(--bb-radius-full)",
+    objectFit: "cover",
+  };
+
+  const initialsStyle: CSSProperties = {
+    width: size,
+    height: size,
+    borderRadius: "var(--bb-radius-full)",
+    background: bg,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: `${Math.round(size * 0.38)}px`,
+    fontWeight: 600,
+    color: "#fff",
+    userSelect: "none",
+    letterSpacing: "-0.02em",
+  };
+
+  const dotStyle: CSSProperties = {
+    position: "absolute",
+    bottom: -1,
+    right: -1,
+    width: Math.max(8, Math.round(size * 0.28)),
+    height: Math.max(8, Math.round(size * 0.28)),
+    borderRadius: "var(--bb-radius-full)",
+    background: online ? "#22c55e" : "#6b7280",
+    border: "2px solid var(--bb-sidebar-bg)",
+  };
+
+  return (
+    <div style={containerStyle}>
+      {src ? (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img src={src} alt={name} style={imgStyle} />
+      ) : (
+        <div style={initialsStyle}>{initials(name)}</div>
+      )}
+      {online !== undefined && <div style={dotStyle} />}
+    </div>
+  );
+}

package/src/components/Badge.tsx

@@ -0,0 +1,47 @@
+import type { CSSProperties, ReactNode } from "react";
+
+type Variant = "default" | "brand" | "success" | "warning" | "error" | "info";
+
+interface Props {
+  children: ReactNode;
+  variant?: Variant;
+  dot?: boolean;
+}
+
+const variantStyles: Record<Variant, CSSProperties> = {
+  default: { background: "#f3f4f6", color: "#374151", border: "1px solid #e5e7eb" },
+  brand:   { background: "rgba(124,58,237,0.12)", color: "var(--bb-brand-light)", border: "1px solid rgba(124,58,237,0.25)" },
+  success: { background: "var(--bb-success-bg)", color: "var(--bb-success)", border: "1px solid var(--bb-success-border)" },
+  warning: { background: "var(--bb-warning-bg)", color: "var(--bb-warning)", border: "1px solid var(--bb-warning-border)" },
+  error:   { background: "var(--bb-error-bg)", color: "var(--bb-error)", border: "1px solid var(--bb-error-border)" },
+  info:    { background: "var(--bb-info-bg)", color: "var(--bb-info)", border: "1px solid var(--bb-info-border)" },
+};
+
+export function Badge({ children, variant = "default", dot }: Props) {
+  return (
+    <span style={{
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "5px",
+      padding: "2px 8px",
+      borderRadius: "var(--bb-radius-full)",
+      fontSize: "var(--bb-text-xs)",
+      fontWeight: 500,
+      lineHeight: "18px",
+      userSelect: "none",
+      whiteSpace: "nowrap",
+      ...variantStyles[variant],
+    }}>
+      {dot && (
+        <span style={{
+          width: "6px",
+          height: "6px",
+          borderRadius: "var(--bb-radius-full)",
+          background: "currentColor",
+          flexShrink: 0,
+        }} />
+      )}
+      {children}
+    </span>
+  );
+}

package/src/components/Button.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import type { CSSProperties, ReactNode, ButtonHTMLAttributes } from "react";
+
+type Variant = "primary" | "secondary" | "ghost" | "danger" | "outline";
+type Size = "sm" | "md" | "lg";
+
+interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: Variant;
+  size?: Size;
+  loading?: boolean;
+  children: ReactNode;
+  fullWidth?: boolean;
+  icon?: ReactNode;
+}
+
+const variantStyles: Record<Variant, CSSProperties> = {
+  primary: {
+    background: "var(--bb-brand)",
+    color: "#fff",
+    border: "1px solid transparent",
+  },
+  secondary: {
+    background: "var(--bb-surface)",
+    color: "var(--bb-text-secondary)",
+    border: "1px solid var(--bb-border)",
+  },
+  ghost: {
+    background: "transparent",
+    color: "var(--bb-text-secondary)",
+    border: "1px solid transparent",
+  },
+  danger: {
+    background: "var(--bb-error-bg)",
+    color: "var(--bb-error)",
+    border: "1px solid var(--bb-error-border)",
+  },
+  outline: {
+    background: "transparent",
+    color: "var(--bb-brand-light)",
+    border: "1px solid var(--bb-brand)",
+  },
+};
+
+const sizeStyles: Record<Size, CSSProperties> = {
+  sm: { padding: "5px 12px", fontSize: "var(--bb-text-xs)", height: "28px" },
+  md: { padding: "8px 16px", fontSize: "var(--bb-text-sm)", height: "36px" },
+  lg: { padding: "10px 20px", fontSize: "var(--bb-text-base)", height: "42px" },
+};
+
+export function Button({
+  variant = "primary",
+  size = "md",
+  loading,
+  children,
+  fullWidth,
+  icon,
+  disabled,
+  style,
+  ...rest
+}: Props) {
+  const base: CSSProperties = {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "7px",
+    borderRadius: "var(--bb-radius)",
+    fontWeight: 500,
+    fontFamily: "var(--bb-font-sans)",
+    cursor: disabled || loading ? "not-allowed" : "pointer",
+    opacity: disabled || loading ? 0.55 : 1,
+    transition: "background var(--bb-transition), opacity var(--bb-transition), box-shadow var(--bb-transition)",
+    userSelect: "none",
+    whiteSpace: "nowrap",
+    width: fullWidth ? "100%" : undefined,
+    ...variantStyles[variant],
+    ...sizeStyles[size],
+    ...style,
+  };
+
+  return (
+    <button disabled={disabled || loading} style={base} {...rest}>
+      {loading ? <Spinner size={14} /> : icon}
+      {children}
+    </button>
+  );
+}
+
+function Spinner({ size }: { size: number }) {
+  return (
+    <svg
+      width={size} height={size} viewBox="0 0 24 24" fill="none"
+      style={{ animation: "bb-spin 0.7s linear infinite", flexShrink: 0 }}
+    >
+      <style>{`@keyframes bb-spin { to { transform: rotate(360deg); } }`}</style>
+      <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="3" strokeDasharray="60" strokeDashoffset="15" strokeLinecap="round" />
+    </svg>
+  );
+}