@mnee-ui/ui 0.0.1

package/components/ui/table.tsx

@@ -0,0 +1,185 @@
+import { ChevronLeft, ChevronRight, Loader2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+// ─── Compound table primitives ────────────────────────────────────────────────
+
+export function Table({ className, children, ...props }: React.HTMLAttributes<HTMLTableElement>) {
+  return (
+    <div className="w-full overflow-x-auto rounded-lg border border-gray-200 shadow-sm">
+      <table className={cn("w-full border-collapse text-sm", className)} {...props}>
+        {children}
+      </table>
+    </div>
+  );
+}
+
+export function TableHead({ className, children, ...props }: React.HTMLAttributes<HTMLTableSectionElement>) {
+  return (
+    <thead className={cn("bg-gray-50 border-b border-gray-200", className)} {...props}>
+      {children}
+    </thead>
+  );
+}
+
+export function TableBody({ className, children, ...props }: React.HTMLAttributes<HTMLTableSectionElement>) {
+  return (
+    <tbody className={cn("divide-y divide-gray-100", className)} {...props}>
+      {children}
+    </tbody>
+  );
+}
+
+export function TableRow({ className, children, onClick, ...props }: React.HTMLAttributes<HTMLTableRowElement>) {
+  return (
+    <tr
+      className={cn(
+        "transition-colors",
+        onClick ? "cursor-pointer hover:bg-gray-50" : "hover:bg-gray-50/50",
+        className
+      )}
+      onClick={onClick}
+      {...props}
+    >
+      {children}
+    </tr>
+  );
+}
+
+export interface TableHeaderProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
+  sortable?: boolean;
+  sortDirection?: "asc" | "desc" | null;
+  onSort?: () => void;
+}
+
+export function TableHeader({
+  className,
+  children,
+  sortable,
+  sortDirection,
+  onSort,
+  ...props
+}: TableHeaderProps) {
+  return (
+    <th
+      className={cn(
+        "px-4 py-3 text-left text-xs font-semibold text-gray-600 whitespace-nowrap",
+        sortable && "select-none",
+        className
+      )}
+      {...props}
+    >
+      {sortable ? (
+        <button
+          type="button"
+          onClick={onSort}
+          className="inline-flex items-center gap-1 hover:text-gray-900 transition-colors"
+        >
+          {children}
+          <span className="text-gray-400">
+            {sortDirection === "asc" ? "↑" : sortDirection === "desc" ? "↓" : "↕"}
+          </span>
+        </button>
+      ) : (
+        children
+      )}
+    </th>
+  );
+}
+
+export function TableCell({ className, children, ...props }: React.TdHTMLAttributes<HTMLTableCellElement>) {
+  return (
+    <td className={cn("px-4 py-3 text-sm text-gray-700", className)} {...props}>
+      {children}
+    </td>
+  );
+}
+
+// ─── Empty state ──────────────────────────────────────────────────────────────
+
+export interface TableEmptyProps {
+  message?: string;
+  description?: string;
+}
+
+export function TableEmpty({
+  message = "No data",
+  description,
+}: TableEmptyProps) {
+  return (
+    <tr>
+      <td colSpan={999}>
+        <div className="flex flex-col items-center justify-center gap-2 py-16 text-center">
+          <p className="text-sm font-medium text-gray-700">{message}</p>
+          {description && <p className="text-xs text-gray-400 max-w-xs">{description}</p>}
+        </div>
+      </td>
+    </tr>
+  );
+}
+
+// ─── Loading overlay ──────────────────────────────────────────────────────────
+
+export function TableLoading({ cols = 4 }: { cols?: number }) {
+  return (
+    <>
+      {Array.from({ length: 4 }).map((_, r) => (
+        <TableRow key={r}>
+          {Array.from({ length: cols }).map((_, c) => (
+            <TableCell key={c}>
+              <div className="h-3.5 bg-gray-100 rounded animate-pulse" style={{ width: `${60 + ((r + c) % 3) * 15}%` }} />
+            </TableCell>
+          ))}
+        </TableRow>
+      ))}
+    </>
+  );
+}
+
+// ─── Pagination ───────────────────────────────────────────────────────────────
+
+export interface PaginationProps {
+  page: number;
+  totalPages: number;
+  totalItems?: number;
+  onPageChange: (page: number) => void;
+  className?: string;
+}
+
+export function Pagination({ page, totalPages, totalItems, onPageChange, className }: PaginationProps) {
+  return (
+    <div className={cn("flex items-center justify-between px-4 py-3 border-t border-gray-200 text-sm text-gray-600", className)}>
+      <span>
+        {totalItems !== undefined
+          ? `Page ${page} of ${totalPages} (${totalItems} items)`
+          : `Page ${page} of ${totalPages}`}
+      </span>
+      <div className="flex items-center gap-1">
+        <button
+          type="button"
+          onClick={() => onPageChange(page - 1)}
+          disabled={page <= 1}
+          className="flex items-center gap-1 px-2.5 py-1.5 rounded hover:bg-gray-100 disabled:opacity-40 disabled:pointer-events-none transition-colors"
+        >
+          <ChevronLeft size={14} />
+          Previous
+        </button>
+        <span className="px-3 py-1.5 border border-gray-200 rounded text-xs font-medium min-w-[2rem] text-center">
+          {page}
+        </span>
+        <button
+          type="button"
+          onClick={() => onPageChange(page + 1)}
+          disabled={page >= totalPages}
+          className="flex items-center gap-1 px-2.5 py-1.5 rounded hover:bg-gray-100 disabled:opacity-40 disabled:pointer-events-none transition-colors"
+        >
+          Next
+          <ChevronRight size={14} />
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// ─── Convenience loading spinner for table toolbar ────────────────────────────
+
+export { Loader2 };

package/components/ui/toast.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import { createContext, useContext, useRef, useState } from "react";
+import { X, CheckCircle, AlertTriangle, Info } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type ToastType = "success" | "error" | "warning" | "info" | "default";
+
+export interface ToastContextType {
+  showToast: (message: string, type?: ToastType) => void;
+}
+
+// ─── Context ──────────────────────────────────────────────────────────────────
+
+const ToastContext = createContext<ToastContextType | null>(null);
+
+// ─── useToast hook ────────────────────────────────────────────────────────────
+
+export function useToast(): ToastContextType {
+  const ctx = useContext(ToastContext);
+  if (!ctx) {
+    throw new Error("useToast must be used inside <ToastProvider>");
+  }
+  return ctx;
+}
+
+// ─── Toast visual component ───────────────────────────────────────────────────
+// Renders the notification box only — no fixed positioning.
+// ToastProvider wraps it in the fixed top-right container.
+
+const toastStyles: Record<ToastType, { bg: string; text: string; icon: React.ReactNode }> = {
+  success: {
+    bg: "bg-success-bg",
+    text: "text-success",
+    icon: <CheckCircle size={18} className="text-success shrink-0" />,
+  },
+  error: {
+    bg: "bg-error-bg",
+    text: "text-error",
+    icon: <AlertTriangle size={18} className="text-error shrink-0" />,
+  },
+  warning: {
+    bg: "bg-warning-bg",
+    text: "text-warning",
+    icon: <AlertTriangle size={18} className="text-warning shrink-0" />,
+  },
+  info: {
+    bg: "bg-info-bg",
+    text: "text-info",
+    icon: <Info size={18} className="text-info shrink-0" />,
+  },
+  default: {
+    bg: "bg-gray-100",
+    text: "text-gray-700",
+    icon: <CheckCircle size={18} className="text-gray-500 shrink-0" />,
+  },
+};
+
+export interface ToastProps {
+  message: string;
+  type: ToastType;
+  onClose?: () => void;
+  className?: string;
+}
+
+export function Toast({ message, type, onClose = () => {}, className }: ToastProps) {
+  const { bg, text, icon } = toastStyles[type];
+
+  return (
+    <div
+      role="alert"
+      aria-live="polite"
+      className={cn(
+        "flex items-center gap-3 px-4 py-3 rounded-xl shadow-lg w-[380px]",
+        bg,
+        text,
+        className
+      )}
+    >
+      {icon}
+      <span className="flex-1 text-sm font-medium">{message}</span>
+      <button
+        onClick={onClose}
+        aria-label="Dismiss notification"
+        className="opacity-60 hover:opacity-100 transition-opacity"
+      >
+        <X size={16} />
+      </button>
+    </div>
+  );
+}
+
+// ─── ToastProvider ────────────────────────────────────────────────────────────
+
+export function ToastProvider({ children }: { children: React.ReactNode }) {
+  const [toast, setToast] = useState<{ message: string; type: ToastType } | null>(null);
+  const [isExiting, setIsExiting] = useState(false);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const dismiss = () => {
+    setIsExiting(true);
+    if (timerRef.current) clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => {
+      setToast(null);
+      setIsExiting(false);
+    }, 300);
+  };
+
+  const showToast = (message: string, type: ToastType = "default") => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    setIsExiting(false);
+    setToast({ message, type });
+    timerRef.current = setTimeout(dismiss, 4000);
+  };
+
+  return (
+    <ToastContext.Provider value={{ showToast }}>
+      {children}
+      {toast && (
+        <div
+          className="fixed top-6 right-6"
+          style={{
+            zIndex: 9999,
+            animation: isExiting
+              ? "slideOutToast 0.3s ease-in forwards"
+              : "slideInToast 0.3s ease-out",
+          }}
+        >
+          <Toast message={toast.message} type={toast.type} onClose={dismiss} />
+        </div>
+      )}
+    </ToastContext.Provider>
+  );
+}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@mnee-ui/ui",
+  "version": "0.0.1",
+  "description": "MNEE Design System — components and documentation",
+  "license": "MIT",
+  "exports": {
+    ".": "./components/ui/index.ts",
+    "./styles": "./components/ui/mnee-ui.css"
+  },
+  "files": [
+    "components/ui/"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "tailwindcss": ">=3"
+  },
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@mdx-js/loader": "^3.1.1",
+    "@mdx-js/react": "^3.1.1",
+    "@next/mdx": "^16.1.6",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.575.0",
+    "next": "15.2.4",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "shiki": "^3.23.0",
+    "tailwind-merge": "^3.5.0"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "15.2.4",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}