@mnee-ui/ui 0.0.1 → 0.0.2

package/dist/lib/utils.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;

package/package.json

@@ -1,14 +1,22 @@
 {
   "name": "@mnee-ui/ui",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "MNEE Design System — components and documentation",
   "license": "MIT",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/components/ui/index.d.ts",
   "exports": {
-    ".": "./components/ui/index.ts",
+    ".": {
+      "types": "./dist/components/ui/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
     "./styles": "./components/ui/mnee-ui.css"
   },
   "files": [
-    "components/ui/"
+    "dist/",
+    "components/ui/mnee-ui.css"
   ],
   "publishConfig": {
     "access": "public"
@@ -18,10 +26,13 @@
     "tailwindcss": ">=3"
   },
   "scripts": {
+    "build:lib": "tsup && tsc --project tsconfig.lib.json",
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "figma:parse": "npx figma connect parse --dry-run",
+    "figma:publish": "npx figma connect publish"
   },
   "dependencies": {
     "@mdx-js/loader": "^3.1.1",
@@ -29,21 +40,23 @@
     "@next/mdx": "^16.1.6",
     "clsx": "^2.1.1",
     "lucide-react": "^0.575.0",
-    "next": "15.2.4",
-    "react": "^19.0.0",
+    "next": "^15.5.12",
+    "react": ">=18",
     "react-dom": "^19.0.0",
     "shiki": "^3.23.0",
     "tailwind-merge": "^3.5.0"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
+    "@figma/code-connect": "^1.4.1",
     "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "eslint": "^9",
-    "eslint-config-next": "15.2.4",
+    "eslint-config-next": "^15.5.12",
     "tailwindcss": "^4",
+    "tsup": "^8.5.1",
     "typescript": "^5"
   }
 }

package/components/ui/alert.tsx

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

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

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

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

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

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