@mnee-ui/ui 0.0.1

package/components/ui/drawer.tsx

@@ -0,0 +1,164 @@
+"use client";
+
+import { useEffect, useId, useRef } from "react";
+import { X } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export type DrawerWidth = "sm" | "md" | "lg" | "xl";
+export type DrawerSide = "left" | "right";
+
+export interface DrawerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title?: string;
+  children?: React.ReactNode;
+  width?: DrawerWidth;
+  /** Which edge the drawer slides in from */
+  side?: DrawerSide;
+  /** Footer content — rendered in a sticky bar at the bottom */
+  footer?: React.ReactNode;
+  className?: string;
+}
+
+const widthStyles: Record<DrawerWidth, string> = {
+  sm: "w-80",
+  md: "w-[480px]",
+  lg: "w-[600px]",
+  xl: "w-[800px]",
+};
+
+const sideStyles: Record<DrawerSide, { position: string; translate: string }> = {
+  right: { position: "right-0", translate: "translate-x-full" },
+  left:  { position: "left-0",  translate: "-translate-x-full" },
+};
+
+export function Drawer({
+  isOpen, onClose, title, children, footer,
+  width = "md", side = "right", className,
+}: DrawerProps) {
+  const headingId = useId();
+  const panelRef = useRef<HTMLDivElement>(null);
+  const previousFocusRef = useRef<HTMLElement | null>(null);
+
+  // Close on Escape key
+  useEffect(() => {
+    if (!isOpen) return;
+    const handler = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [isOpen, onClose]);
+
+  // Capture focus before open; move focus into panel on open; restore on close
+  useEffect(() => {
+    if (isOpen) {
+      previousFocusRef.current = document.activeElement as HTMLElement;
+      requestAnimationFrame(() => panelRef.current?.focus());
+    } else {
+      previousFocusRef.current?.focus();
+    }
+  }, [isOpen]);
+
+  // Body scroll lock with scrollbar-width compensation to prevent layout shift
+  useEffect(() => {
+    if (isOpen) {
+      const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+      document.body.style.paddingRight = `${scrollbarWidth}px`;
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+      document.body.style.paddingRight = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+      document.body.style.paddingRight = "";
+    };
+  }, [isOpen]);
+
+  const { position, translate } = sideStyles[side];
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        aria-hidden="true"
+        onClick={onClose}
+        className={cn(
+          "fixed inset-0 z-40 bg-black/50 transition-opacity duration-300",
+          isOpen ? "opacity-100" : "opacity-0 pointer-events-none"
+        )}
+      />
+
+      {/* Panel */}
+      <div
+        ref={panelRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={title ? headingId : undefined}
+        tabIndex={-1}
+        className={cn(
+          "fixed top-0 z-50 h-full bg-white shadow-2xl flex flex-col outline-none",
+          "transition-transform duration-300 ease-in-out",
+          position,
+          widthStyles[width],
+          isOpen ? "translate-x-0" : translate,
+          className
+        )}
+      >
+        {/* Header */}
+        <DrawerHeader>
+          {title && (
+            <h2 id={headingId} className="text-lg font-semibold text-gray-900 flex-1">{title}</h2>
+          )}
+          <button
+            onClick={onClose}
+            aria-label="Close drawer"
+            className="text-gray-400 hover:text-gray-600 transition-colors ml-auto"
+          >
+            <X size={20} />
+          </button>
+        </DrawerHeader>
+
+        {/* Body */}
+        <DrawerBody>{children}</DrawerBody>
+
+        {/* Footer */}
+        {footer && <DrawerFooter>{footer}</DrawerFooter>}
+      </div>
+    </>
+  );
+}
+
+// ─── Sub-components (also usable standalone for custom drawer layouts) ─────────
+
+export function DrawerHeader({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("flex items-center gap-3 px-6 py-4 border-b border-gray-200 shrink-0", className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function DrawerBody({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("flex-1 overflow-y-auto px-6 py-5", className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function DrawerFooter({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("shrink-0 px-6 py-4 border-t border-gray-200 bg-white", className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}

package/components/ui/icons.tsx

@@ -0,0 +1,96 @@
+import { type LucideIcon, type LucideProps } from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { SVGProps } from "react";
+
+// ─── Icon wrapper ──────────────────────────────────────────────────────────────
+
+export type IconSize = "xs" | "sm" | "md" | "lg" | "xl";
+
+const sizeMap: Record<IconSize, number> = {
+  xs: 12,
+  sm: 14,
+  md: 16,
+  lg: 20,
+  xl: 24,
+};
+
+export interface IconProps extends Omit<LucideProps, "size"> {
+  /** Any Lucide icon component, e.g. import { Wallet } from "lucide-react" */
+  icon: LucideIcon;
+  /** Design-system size token. Defaults to "md" (16px). */
+  size?: IconSize;
+}
+
+export function Icon({ icon: LucideComponent, size = "md", className, ...props }: IconProps) {
+  return (
+    <LucideComponent
+      size={sizeMap[size]}
+      className={cn("shrink-0", className)}
+      {...props}
+    />
+  );
+}
+
+// ─── Brand icon ───────────────────────────────────────────────────────────────
+
+export function MneeIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      fill="none"
+      viewBox="0 0 797 797"
+      {...props}
+    >
+      <g filter="url(#MneeIcon_a)">
+        <path
+          fill="url(#MneeIcon_b)"
+          d="M148.438 398.438c0-138.072 111.928-250 250-250 138.071 0 250 111.928 250 250 0 138.071-111.929 250-250 250-138.072 0-250-111.929-250-250"
+          shapeRendering="crispEdges"
+        />
+        <path
+          fill="#05121F"
+          d="M148.438 398.438c0-138.072 111.928-250 250-250 138.071 0 250 111.928 250 250 0 138.071-111.929 250-250 250-138.072 0-250-111.929-250-250"
+          shapeRendering="crispEdges"
+        />
+        <path
+          fill="url(#MneeIcon_c)"
+          d="M164.062 398.438c0-129.442 104.934-234.376 234.376-234.376 129.441 0 234.374 104.934 234.374 234.376 0 129.441-104.933 234.374-234.374 234.374-129.442 0-234.376-104.933-234.376-234.374"
+        />
+        <path
+          fill="url(#MneeIcon_d)"
+          fillRule="evenodd"
+          d="m482.765 413.641-.381-88.048a17.06 17.06 0 0 0-5.028-12.031c-3.206-3.205-7.505-5.027-12.043-5.027-4.539 0-8.838 1.822-12.043 5.027s-5.029 7.5-5.029 12.038v145.674c0 13.255-5.267 25.861-14.637 35.227-9.371 9.369-21.982 14.634-35.237 14.634-13.257 0-25.87-5.265-35.238-14.634-9.371-9.366-14.638-21.972-14.638-35.227V325.6c0-4.538-1.823-8.834-5.028-12.038-3.206-3.205-7.505-5.027-12.043-5.027-4.539 0-8.838 1.822-12.043 5.027a17.06 17.06 0 0 0-5.026 12.031l-.383 88.048c-1.37 11.023-6.398 21.223-14.255 29.082-9.37 9.367-21.982 14.634-35.24 14.634-13.256 0-25.869-5.267-35.237-14.634-7.86-7.859-12.888-18.064-14.258-29.09l-.405-24.216-45.026-.008h-21.109l.168-3.435c3.049-62.067 28.993-120.38 72.935-164.313 47.048-47.036 110.287-73.223 176.823-73.223 66.538 0 129.774 26.187 176.822 73.223 30.786 30.78 53.107 69.091 64.523 111.106l1.121 4.13h-34.039l-.709-2.312c-10.404-33.867-29.041-64.69-54.092-89.735-40.88-40.868-95.814-63.618-153.627-63.618s-112.749 22.75-153.63 63.618c-30.057 30.051-50.697 68.188-59.218 109.832l-.397 1.94h62.284v50.872c0 4.536 1.823 8.836 5.028 12.04s7.505 5.028 12.043 5.028 8.838-1.824 12.043-5.028 5.029-7.501 5.029-12.04v-81.893c0-13.252 5.267-25.861 14.637-35.227 9.368-9.369 21.981-14.635 35.238-14.635 13.258 0 25.866 5.266 35.237 14.635 9.371 9.365 14.638 21.975 14.638 35.227v145.674c0 4.538 1.823 8.836 5.028 12.041s7.505 5.024 12.044 5.024c4.537 0 8.837-1.82 12.042-5.024 3.205-3.205 5.027-7.503 5.027-12.041V325.601c0-13.252 5.267-25.861 14.638-35.227 9.369-9.369 21.981-14.635 35.239-14.635s25.868 5.266 35.237 14.635c9.371 9.365 14.638 21.975 14.638 35.227v81.893c0 4.536 1.823 8.836 5.027 12.04s7.504 5.028 12.042 5.028 8.838-1.824 12.044-5.028c3.205-3.204 5.028-7.501 5.028-12.04v-50.872h62.279l-.004-.025h33.355l.435 2.765a252 252 0 0 1 3.044 39.074c0 66.52-26.198 129.742-73.245 176.778-47.049 47.036-110.286 73.224-176.822 73.224-66.538 0-129.776-26.188-176.824-73.224-43.53-43.519-69.423-101.186-72.845-162.651l-.193-3.457h32.838l.192 3.071c3.302 52.872 25.745 102.398 63.205 139.849 40.878 40.87 95.815 63.616 153.628 63.616s112.747-22.746 153.627-63.616c40.881-40.869 63.635-95.789 63.635-153.587q.001-3.73-.125-7.458l-.053-1.561h-33.291l-.408 24.213c-1.37 11.026-6.398 21.231-14.258 29.09-9.37 9.367-21.981 14.634-35.239 14.634-13.256 0-25.87-5.267-35.238-14.634-7.857-7.856-12.887-18.056-14.257-29.082"
+          clipRule="evenodd"
+        />
+      </g>
+      <defs>
+        <linearGradient id="MneeIcon_b" x1={148.438} x2={648.438} y1={148.438} y2={648.438} gradientUnits="userSpaceOnUse">
+          <stop stopColor="#FF6900" />
+          <stop offset={0.5} stopColor="#FE9A00" />
+          <stop offset={1} stopColor="#FDC700" />
+        </linearGradient>
+        <linearGradient id="MneeIcon_c" x1={450.422} x2={558.798} y1={592.492} y2={90.982} gradientUnits="userSpaceOnUse">
+          <stop stopColor="#05121F" />
+          <stop offset={1} stopColor="#05121F" />
+        </linearGradient>
+        <linearGradient id="MneeIcon_d" x1={253.85} x2={537.261} y1={576.276} y2={231.407} gradientUnits="userSpaceOnUse">
+          <stop stopColor="#E88C1F" />
+          <stop offset={1} stopColor="#FFDC46" />
+        </linearGradient>
+        <filter id="MneeIcon_a" width={796.875} height={796.875} x={0} y={0} colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse">
+          <feFlood floodOpacity={0} result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feMorphology in="SourceAlpha" radius={46.875} result="effect1_dropShadow_3676_2343" />
+          <feOffset />
+          <feGaussianBlur stdDeviation={97.656} />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix values="0 0 0 0 1 0 0 0 0 0.410735 0 0 0 0 0 0 0 0 0.3 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_3676_2343" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_3676_2343" result="shape" />
+        </filter>
+      </defs>
+    </svg>
+  );
+}

package/components/ui/index.ts

@@ -0,0 +1,14 @@
+export * from "./button";
+export * from "./badge";
+export { Card, CardContainer } from "./card";
+export type { CardProps, CardContainerProps } from "./card";
+export * from "./input";
+export * from "./toast";
+export * from "./icons";
+export * from "./banner";
+export * from "./table";
+export * from "./drawer";
+export * from "./modal";
+export * from "./alert";
+export * from "./code-block";
+export type { LucideIcon, LucideProps } from "lucide-react";

package/components/ui/input.tsx

@@ -0,0 +1,129 @@
+import { cn } from "@/lib/utils";
+
+export type InputSize = "sm" | "md" | "lg";
+
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+  label?: string;
+  hint?: string;
+  error?: string;
+  size?: InputSize;
+  prefix?: string;
+  suffix?: string;
+  leadingIcon?: React.ReactNode;
+  trailingIcon?: React.ReactNode;
+}
+
+const sizeStyles: Record<InputSize, string> = {
+  sm: "rounded-md text-xs",
+  md: "rounded-lg text-sm",
+  lg: "rounded-lg text-base",
+};
+
+const inputPaddingStyles: Record<InputSize, string> = {
+  sm: "py-1.5 px-2.5",
+  md: "py-2 px-3",
+  lg: "py-2.5 px-4",
+};
+
+const addonPaddingStyles: Record<InputSize, string> = {
+  sm: "px-2",
+  md: "px-2.5",
+  lg: "px-3",
+};
+
+const iconSizeStyles: Record<InputSize, string> = {
+  sm: "[&>svg]:size-3.5",
+  md: "[&>svg]:size-4",
+  lg: "[&>svg]:size-5",
+};
+
+export function Input({
+  label,
+  hint,
+  error,
+  size = "md",
+  className,
+  id,
+  disabled,
+  required,
+  prefix,
+  suffix,
+  leadingIcon,
+  trailingIcon,
+  ...props
+}: InputProps) {
+  const inputId = id ?? (label ? label.toLowerCase().replace(/\s+/g, "-") : undefined);
+  const hasLeading = leadingIcon != null || prefix != null;
+  const hasTrailing = trailingIcon != null || suffix != null;
+
+  return (
+    <div className={cn("w-full flex flex-col gap-1", className)}>
+      {label && (
+        <label
+          htmlFor={inputId}
+          className="text-sm font-medium text-gray-900"
+        >
+          {label}
+          {required && (
+            <span aria-hidden="true" className="text-error ml-0.5">*</span>
+          )}
+        </label>
+      )}
+      <div
+        className={cn(
+          "flex items-center w-full border bg-white transition-colors",
+          "focus-within:ring-2 focus-within:ring-brand/50",
+          "has-[input:disabled]:pointer-events-none has-[input:disabled]:opacity-50",
+          error
+            ? "border-error focus-within:border-error focus-within:ring-error/30"
+            : "border-gray-300 focus-within:border-brand",
+          sizeStyles[size],
+        )}
+      >
+        {leadingIcon && (
+          <span className={cn("flex items-center pointer-events-none text-gray-400", addonPaddingStyles[size], iconSizeStyles[size])}>
+            {leadingIcon}
+          </span>
+        )}
+        {prefix && (
+          <span className={cn("flex items-center pointer-events-none text-gray-400 select-none", addonPaddingStyles[size])}>
+            {prefix}
+          </span>
+        )}
+        <input
+          id={inputId}
+          disabled={disabled}
+          required={required}
+          aria-invalid={!!error}
+          aria-describedby={error ? `${inputId}-error` : hint ? `${inputId}-hint` : undefined}
+          className={cn(
+            "flex-1 min-w-0 bg-transparent outline-none placeholder:text-gray-400",
+            inputPaddingStyles[size],
+            hasLeading && "pl-1.5",
+            hasTrailing && "pr-1.5",
+          )}
+          {...props}
+        />
+        {suffix && (
+          <span className={cn("flex items-center pointer-events-none text-gray-400 select-none", addonPaddingStyles[size])}>
+            {suffix}
+          </span>
+        )}
+        {trailingIcon && (
+          <span className={cn("flex items-center pointer-events-none text-gray-400", addonPaddingStyles[size], iconSizeStyles[size])}>
+            {trailingIcon}
+          </span>
+        )}
+      </div>
+      {error ? (
+        <p id={`${inputId}-error`} className="text-xs text-error">
+          {error}
+        </p>
+      ) : hint ? (
+        <p id={`${inputId}-hint`} className="text-xs text-muted">
+          {hint}
+        </p>
+      ) : null}
+    </div>
+  );
+}

package/components/ui/mnee-ui.css

@@ -0,0 +1,35 @@
+@theme {
+  /* Brand — amber */
+  --color-brand:          #D97706;
+  --color-brand-dark:     #B45309;
+
+  /* Success */
+  --color-success:        #15803D;
+  --color-success-bg:     #DCFCE7;
+  --color-success-fg:     #14532D;
+
+  /* Warning */
+  --color-warning:        #D97706;
+  --color-warning-bg:     #FEF3C7;
+  --color-warning-fg:     #92400E;
+
+  /* Error */
+  --color-error:          #B91C1C;
+  --color-error-bg:       #FEE2E2;
+  --color-error-fg:       #991B1B;
+
+  /* Info */
+  --color-info:           #1D4ED8;
+  --color-info-bg:        #DBEAFE;
+  --color-info-fg:        #1E3A8A;
+
+  /* Surface */
+  --color-surface:        #ffffff;
+  --color-surface-border: #E5E5E5;
+  --color-muted:          #6B7280;
+  --color-muted-bg:       #F9FAFB;
+
+  /* Typography */
+  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
+  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", monospace;
+}

package/components/ui/modal.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import { useEffect } from "react";
+import { X } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export type ModalSize = "sm" | "md" | "lg";
+
+export interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title?: string;
+  children?: React.ReactNode;
+  size?: ModalSize;
+  /** Footer content — rendered in a sticky bar at the bottom */
+  footer?: React.ReactNode;
+  className?: string;
+}
+
+const sizeStyles: Record<ModalSize, string> = {
+  sm: "w-[400px]",
+  md: "w-[520px]",
+  lg: "w-[640px]",
+};
+
+export function Modal({ isOpen, onClose, title, children, footer, size = "sm", className }: ModalProps) {
+  // Close on Escape key
+  useEffect(() => {
+    if (!isOpen) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [isOpen, onClose]);
+
+  // Prevent body scroll while open
+  useEffect(() => {
+    document.body.style.overflow = isOpen ? "hidden" : "";
+    return () => { document.body.style.overflow = ""; };
+  }, [isOpen]);
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        aria-hidden="true"
+        onClick={onClose}
+        className={cn(
+          "fixed inset-0 z-40 bg-black/50 transition-opacity duration-200",
+          isOpen ? "opacity-100" : "opacity-0 pointer-events-none"
+        )}
+      />
+
+      {/* Centering container — pointer-events-none so clicks reach the backdrop */}
+      <div
+        className={cn(
+          "fixed inset-0 z-50 flex items-center justify-center p-4",
+          "pointer-events-none"
+        )}
+      >
+        {/* Panel */}
+        <div
+          role="dialog"
+          aria-modal="true"
+          aria-label={title}
+          onClick={(e) => e.stopPropagation()}
+          className={cn(
+            "bg-white rounded-lg shadow-2xl flex flex-col max-h-[90vh] pointer-events-auto",
+            "transition-all duration-200 ease-out",
+            sizeStyles[size],
+            isOpen ? "opacity-100 scale-100" : "opacity-0 scale-95",
+            className
+          )}
+        >
+          {/* Header */}
+          <ModalHeader>
+            {title && (
+              <h2 className="text-lg font-semibold text-gray-900 flex-1">{title}</h2>
+            )}
+            <button
+              onClick={onClose}
+              aria-label="Close modal"
+              className="text-gray-400 hover:text-gray-600 transition-colors ml-auto"
+            >
+              <X size={20} />
+            </button>
+          </ModalHeader>
+
+          {/* Body */}
+          <ModalBody>{children}</ModalBody>
+
+          {/* Footer */}
+          {footer && <ModalFooter>{footer}</ModalFooter>}
+        </div>
+      </div>
+    </>
+  );
+}
+
+// ─── Sub-components (also usable standalone for custom modal layouts) ─────────
+
+export function ModalHeader({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("flex items-center gap-3 px-6 py-4 border-b border-gray-200 shrink-0", className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function ModalBody({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("flex-1 overflow-y-auto px-6 py-5", className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function ModalFooter({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("shrink-0 px-6 py-4 border-t border-gray-200 bg-white rounded-b-lg", className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}