@mnee-ui/ui 0.0.1

package/README.md

@@ -0,0 +1,92 @@
+# @mnee/ui
+
+MNEE Design System — the component library that powers the MNEE merchant portal.
+
+## Install
+
+```bash
+npm install @mnee/ui
+```
+
+## Setup
+
+Add the design tokens to your project's `globals.css` (Tailwind v4):
+
+```css
+@import "tailwindcss";
+
+@theme {
+  --color-brand:       #D97706;
+  --color-brand-dark:  #B45309;
+  --color-success:     #15803D;
+  --color-success-bg:  #DCFCE7;
+  --color-success-fg:  #14532D;
+  --color-warning:     #D97706;
+  --color-warning-bg:  #FEF3C7;
+  --color-warning-fg:  #92400E;
+  --color-error:       #B91C1C;
+  --color-error-bg:    #FEE2E2;
+  --color-error-fg:    #991B1B;
+  --color-info:        #1D4ED8;
+  --color-info-bg:     #DBEAFE;
+  --color-info-fg:     #1E3A8A;
+}
+```
+
+## Usage
+
+```tsx
+import { Button, Badge, Card, CardHeader, CardTitle, CardContent } from "@mnee/ui"
+
+export function PaymentCard() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Last payment</CardTitle>
+      </CardHeader>
+      <CardContent className="flex items-center gap-3">
+        <Badge variant="success">Completed</Badge>
+        <Button variant="outline" size="sm">View receipt</Button>
+      </CardContent>
+    </Card>
+  )
+}
+```
+
+## Components
+
+| Component | Description |
+|-----------|-------------|
+| `Button` | primary / secondary / destructive / ghost / outline — sm/md/lg sizes, loading state |
+| `Badge` | success / warning / error / info / default status chips |
+| `Card` | Container with CardHeader, CardTitle, CardDescription, CardContent, CardFooter |
+
+## Publishing a new version
+
+Tag the commit and push — the GitHub Action in `.github/workflows/publish.yml` handles the rest:
+
+```bash
+git tag v0.0.2
+git push origin v0.0.2
+```
+
+Requires `NPM_TOKEN` set as a repository secret in `github.com/mnee-xyz/ui`.
+
+## Docs site
+
+Run locally:
+
+```bash
+npm run dev
+# → http://localhost:3000
+```
+
+## Project structure
+
+```
+components/ui/        ← the library (@mnee/ui exports)
+components/site/      ← docs site only (not exported)
+app/docs/             ← documentation pages
+app/                  ← Next.js App Router
+figma/                ← Figma Code Connect (V2)
+```

package/components/ui/alert.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { Info, AlertTriangle, Lightbulb, CheckCircle } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export type AlertVariant = "info" | "warning" | "tip" | "error" | "success";
+
+export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: AlertVariant;
+  title?: string;
+  children?: React.ReactNode;
+}
+
+const variantStyles: Record<AlertVariant, { wrapper: string; text: string }> = {
+  info: {
+    wrapper: "border-blue-800 bg-blue-50",
+    text: "text-blue-800",
+  },
+  warning: {
+    wrapper: "border-[#FFF085] bg-[#FEFCE8]",
+    text: "text-[#A65F00]",
+  },
+  tip: {
+    wrapper: "border-[#FFF085] bg-[#FEFCE8]",
+    text: "text-[#A65F00]",
+  },
+  error: {
+    wrapper: "border-error/40 bg-error-bg",
+    text: "text-error",
+  },
+  success: {
+    wrapper: "border-success/40 bg-success-bg",
+    text: "text-success",
+  },
+};
+
+const variantIcons: Record<AlertVariant, React.ElementType> = {
+  info: Info,
+  warning: AlertTriangle,
+  tip: Lightbulb,
+  error: AlertTriangle,
+  success: CheckCircle,
+};
+
+const variantLabels: Record<AlertVariant, string> = {
+  info: "Note",
+  warning: "Warning",
+  tip: "Tip",
+  error: "Error",
+  success: "Success",
+};
+
+export function Alert({
+  variant = "info",
+  title,
+  children,
+  className,
+  ...props
+}: AlertProps) {
+  const styles = variantStyles[variant];
+  const Icon = variantIcons[variant];
+  const label = title ?? variantLabels[variant];
+
+  return (
+    <div
+      className={cn(
+        "rounded-lg border px-4 py-2",
+        styles.wrapper,
+        className
+      )}
+      {...props}
+    >
+      <div className={cn("flex items-center gap-2 font-medium text-[12px]", styles.text)}>
+        <Icon size={15} />
+        <span>{label}</span>
+      </div>
+      {children && (
+        <div className={cn("pl-6 font-light text-[12px]", styles.text)}>
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}

package/components/ui/badge.tsx

@@ -0,0 +1,38 @@
+import { cn } from "@/lib/utils";
+
+export type BadgeVariant = "success" | "warning" | "error" | "info" | "default" | "brand";
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+  variant?: BadgeVariant;
+  children?: React.ReactNode;
+}
+
+const variantStyles: Record<BadgeVariant, string> = {
+  success: "bg-success text-white",
+  warning: "bg-warning text-white",
+  error:   "bg-red-600 text-white",
+  info:    "bg-info text-white",
+  default: "bg-gray-600 text-white",
+  brand:   "bg-brand text-white",
+};
+
+export function Badge({
+  variant = "default",
+  className,
+  children,
+  ...props
+}: BadgeProps) {
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center justify-center px-2.5 py-0.5 rounded-lg",
+        "text-xs font-medium leading-4 whitespace-nowrap",
+        variantStyles[variant],
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </span>
+  );
+}

package/components/ui/banner.tsx

@@ -0,0 +1,73 @@
+import { cn } from "@/lib/utils";
+
+export type BannerVariant = "gradient" | "info" | "success" | "warning" | "error";
+
+export interface BannerProps extends React.HTMLAttributes<HTMLDivElement> {
+  title: string;
+  description?: string;
+  variant?: BannerVariant;
+  action?: React.ReactNode;
+}
+
+const variantStyles: Record<BannerVariant, { wrapper: string; title: string; desc: string }> = {
+  gradient: {
+    wrapper: "border border-[var(--color-surface-border)]",
+    title:   "text-gray-800",
+    desc:    "text-gray-600",
+  },
+  info: {
+    wrapper: "bg-info-bg border border-info/20",
+    title:   "text-info",
+    desc:    "text-info/80",
+  },
+  success: {
+    wrapper: "bg-success-bg border border-success/20",
+    title:   "text-success",
+    desc:    "text-success/80",
+  },
+  warning: {
+    wrapper: "bg-warning-bg border border-warning/20",
+    title:   "text-warning",
+    desc:    "text-warning/80",
+  },
+  error: {
+    wrapper: "bg-error-bg border border-error/20",
+    title:   "text-error",
+    desc:    "text-error/80",
+  },
+};
+
+export function Banner({
+  title,
+  description,
+  variant = "gradient",
+  action,
+  className,
+  ...props
+}: BannerProps) {
+  const styles = variantStyles[variant];
+
+  return (
+    <div
+      className={cn(
+        "rounded-lg p-4 flex items-center justify-between gap-4 shadow-sm",
+        styles.wrapper,
+        className
+      )}
+      style={
+        variant === "gradient"
+          ? { background: "linear-gradient(90deg, #F0FDFA 0%, #FFF7ED 100%)" }
+          : undefined
+      }
+      {...props}
+    >
+      <div className="flex flex-col gap-0.5">
+        <p className={cn("font-semibold text-sm", styles.title)}>{title}</p>
+        {description && (
+          <p className={cn("text-sm", styles.desc)}>{description}</p>
+        )}
+      </div>
+      {action && <div className="shrink-0">{action}</div>}
+    </div>
+  );
+}

package/components/ui/button.tsx

@@ -0,0 +1,59 @@
+import { Loader2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export type ButtonVariant = "primary" | "secondary" | "destructive" | "ghost" | "outline";
+export type ButtonSize = "sm" | "md" | "lg";
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  loading?: boolean;
+  children?: React.ReactNode;
+}
+
+const variantStyles: Record<ButtonVariant, string> = {
+  primary:
+    "bg-brand text-white hover:bg-brand-dark active:bg-brand-dark shadow-sm",
+  secondary:
+    "bg-gray-100 text-gray-900 hover:bg-gray-200 active:bg-gray-200",
+  destructive:
+    "bg-error text-white hover:opacity-90 active:opacity-90 shadow-sm",
+  ghost:
+    "bg-transparent text-gray-700 hover:bg-gray-100 active:bg-gray-100",
+  outline:
+    "bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 active:bg-gray-100 shadow-sm",
+};
+
+const sizeStyles: Record<ButtonSize, string> = {
+  sm: "h-7 px-3 text-xs rounded-md gap-1.5",
+  md: "h-9 px-4 text-sm rounded-lg gap-2",
+  lg: "h-11 px-6 text-base rounded-lg gap-2.5",
+};
+
+export function Button({
+  variant = "primary",
+  size = "md",
+  loading = false,
+  disabled,
+  className,
+  children,
+  ...props
+}: ButtonProps) {
+  return (
+    <button
+      className={cn(
+        "inline-flex items-center justify-center font-medium transition-colors",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/50",
+        "disabled:pointer-events-none disabled:opacity-50",
+        variantStyles[variant],
+        sizeStyles[size],
+        className
+      )}
+      disabled={disabled || loading}
+      {...props}
+    >
+      {loading && <Loader2 className="animate-spin" size={size === "lg" ? 18 : 14} />}
+      {children}
+    </button>
+  );
+}

package/components/ui/card.tsx

@@ -0,0 +1,156 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { Badge } from "./badge";
+import { Button } from "./button";
+
+/* ── Discriminated union ──────────────────────────────── */
+
+type BalanceCardProps = {
+  variant: "balance";
+  title: string;
+  description?: string;
+  amount: string;
+  action?: React.ReactNode;
+  loading?: boolean;
+  className?: string;
+};
+
+type ModuleCardProps = {
+  variant: "module";
+  title: string;
+  description?: string;
+  status?: "success" | "warning" | "error" | "info" | "default";
+  statusLabel?: string;
+  onEdit?: () => void;
+  onView?: () => void;
+  loading?: boolean;
+  className?: string;
+};
+
+export type CardProps = BalanceCardProps | ModuleCardProps;
+
+/* ── CardContainer — generic composable card ─────────── */
+
+export interface CardContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export function CardContainer({ className, children, ...props }: CardContainerProps) {
+  return (
+    <div
+      className={cn("bg-white rounded-lg border border-[#E5E5E5] shadow-sm", className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+/* ── Card ─────────────────────────────────────────────── */
+
+export function Card(props: CardProps) {
+  if (props.variant === "balance") {
+    return <BalanceCard {...props} />;
+  }
+  return <ModuleCard {...props} />;
+}
+
+/* ── Internal: shell ──────────────────────────────────── */
+
+function CardShell({ className, children }: { className?: string; children: React.ReactNode }) {
+  return (
+    <div className={cn("bg-white rounded-lg border border-[#E5E5E5] shadow-sm", className)}>
+      {children}
+    </div>
+  );
+}
+
+/* ── Internal: skeleton block ─────────────────────────── */
+
+function Skeleton({ className }: { className?: string }) {
+  return <div className={cn("animate-pulse rounded bg-gray-200", className)} />;
+}
+
+/* ── Internal: BalanceCard ────────────────────────────── */
+
+function BalanceCard({ title, description, amount, action, loading, className }: BalanceCardProps) {
+  return (
+    <CardShell className={className}>
+      <div className="px-6 pt-6 pb-4">
+        {loading ? (
+          <>
+            <Skeleton className="h-4 w-32" />
+            {description !== undefined && <Skeleton className="mt-2 h-3 w-48" />}
+          </>
+        ) : (
+          <>
+            <h3 className="text-base font-semibold text-gray-900 leading-tight">{title}</h3>
+            {description && (
+              <p className="mt-1 text-sm text-gray-500 leading-normal">{description}</p>
+            )}
+          </>
+        )}
+      </div>
+      <div className="px-6 pb-4">
+        {loading ? (
+          <Skeleton className="h-9 w-36" />
+        ) : (
+          <p className="text-3xl font-bold text-gray-900">{amount}</p>
+        )}
+      </div>
+      {action && (
+        <div className="flex items-center px-6 py-4 border-t border-[#E5E5E5] bg-gray-50 rounded-b-lg">
+          {action}
+        </div>
+      )}
+    </CardShell>
+  );
+}
+
+/* ── Internal: ModuleCard ─────────────────────────────── */
+
+function ModuleCard({ title, description, status, statusLabel, onEdit, onView, loading, className }: ModuleCardProps) {
+  return (
+    <CardShell className={className}>
+      <div className="px-6 pt-6 pb-4">
+        {loading ? (
+          <>
+            <div className="flex items-center justify-between">
+              <Skeleton className="h-4 w-36" />
+              <Skeleton className="h-5 w-16 rounded-full" />
+            </div>
+            {description !== undefined && <Skeleton className="mt-2 h-3 w-52" />}
+          </>
+        ) : (
+          <>
+            <div className="flex items-center justify-between">
+              <h3 className="text-base font-semibold text-gray-900 leading-tight">{title}</h3>
+              {status && statusLabel && (
+                <Badge variant={status}>{statusLabel}</Badge>
+              )}
+            </div>
+            {description && (
+              <p className="mt-1 text-sm text-gray-500 leading-normal">{description}</p>
+            )}
+          </>
+        )}
+      </div>
+      {(onEdit || onView) && (
+        <div className="flex items-center justify-end gap-2 px-6 py-4 border-t border-[#E5E5E5] bg-gray-50 rounded-b-lg">
+          {loading ? (
+            <>
+              <Skeleton className="h-7 w-12" />
+              <Skeleton className="h-7 w-12" />
+            </>
+          ) : (
+            <>
+              {onEdit && <Button variant="ghost" size="sm" onClick={onEdit}>Edit</Button>}
+              {onView && <Button variant="primary" size="sm" onClick={onView}>View</Button>}
+            </>
+          )}
+        </div>
+      )}
+    </CardShell>
+  );
+}

package/components/ui/code-block.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Copy } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { useToast } from "@/components/ui/toast";
+import type { ThemedToken } from "shiki";
+
+export interface CodeBlockProps {
+  code: string;
+  language?: string;
+  title?: string;
+  className?: string;
+}
+
+type TokenLine = ThemedToken[];
+
+export function CodeBlock({
+  code,
+  language = "bash",
+  title,
+  className,
+}: CodeBlockProps) {
+  const [tokens, setTokens] = useState<TokenLine[] | null>(null);
+  const [bg, setBg] = useState("#000000");
+  const [fg, setFg] = useState("#d4d4d4");
+  const [copied, setCopied] = useState(false);
+  const { showToast } = useToast();
+
+  useEffect(() => {
+    const highlight = async () => {
+      try {
+        const { codeToTokens } = await import("shiki");
+        const result = await codeToTokens(code.trim(), {
+          lang: language as Parameters<typeof codeToTokens>[1]["lang"],
+          theme: "dark-plus",
+        });
+        setTokens(result.tokens);
+        if (result.bg) setBg(result.bg);
+        if (result.fg) setFg(result.fg);
+      } catch {
+        // leave tokens null — fallback pre renders raw code
+      }
+    };
+    highlight();
+  }, [code, language]);
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(code);
+    setCopied(true);
+    showToast("Copied to clipboard!", "success");
+    setTimeout(() => setCopied(false), 1500);
+  };
+
+  const copyButton = (
+    <button
+      onClick={handleCopy}
+      className="flex items-center gap-1 bg-gray-700 hover:bg-gray-600 text-gray-200 px-2 py-1 rounded text-xs transition-colors"
+    >
+      <Copy size={13} />
+      {copied ? "Copied!" : "Copy"}
+    </button>
+  );
+
+  return (
+    <div
+      className={cn(
+        "relative border border-gray-700 rounded-lg overflow-hidden",
+        className
+      )}
+    >
+      {title ? (
+        <div className="flex items-center justify-between bg-[#161B22] px-4 py-2 text-sm text-gray-300 border-b border-gray-700">
+          <span className="truncate">{title}</span>
+          {copyButton}
+        </div>
+      ) : (
+        <div className="absolute top-2 right-2 z-10">{copyButton}</div>
+      )}
+
+      {tokens === null ? (
+        <pre
+          className="p-4 overflow-x-auto text-sm font-mono"
+          style={{ background: bg, color: fg }}
+        >
+          <code>{code}</code>
+        </pre>
+      ) : (
+        <pre
+          className="p-4 overflow-x-auto text-sm font-mono !m-0 !rounded-none"
+          style={{ background: bg, color: fg }}
+        >
+          <code>
+            {tokens.map((line, i) => (
+              <span key={i} className="block">
+                {line.map((token, j) => (
+                  <span key={j} style={{ color: token.color }}>
+                    {token.content}
+                  </span>
+                ))}
+              </span>
+            ))}
+          </code>
+        </pre>
+      )}
+    </div>
+  );
+}