@mnee-ui/ui 0.0.1 → 0.0.2

package/components/ui/table.tsx

@@ -1,185 +0,0 @@
-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

@@ -1,136 +0,0 @@
-"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>
-  );
-}