@viibestack/ui 0.1.0 → 0.2.0

package/README.md

@@ -1,18 +1,40 @@
 # @viibestack/ui
 
-Dependency-free React components -- currently a Feather/Lucide-style outline icon set (~28 icons), ported from `services/portal/frontend/src/Icons.tsx`. No runtime dependencies beyond `react` itself, so it's safe to use anywhere React runs, including apps deployed on the OpenNext Cloudflare Workers adapter (no Node-native code, nothing that needs `fs`/`stream`/native bindings).
+Dependency-free React UI kit -- a Feather/Lucide-style outline icon set (~28 icons, ported from `services/portal/frontend/src/Icons.tsx`) plus core components (Button, Card, Input, Textarea, Select, Badge, Modal, EmptyState, Spinner, Alert, Checkbox, Switch, Avatar, Tabs, and Table primitives). No runtime dependencies beyond `react`/`react-dom`, so it's safe to use anywhere React runs, including apps deployed on the OpenNext Cloudflare Workers adapter (no Node-native code, nothing that needs `fs`/`stream`/native bindings). Styled with plain Tailwind utility classes -- the consuming app needs Tailwind already set up (every app this is meant for already has it, see `scratch-scaffold.ts`).
 
 ## Usage
 
 ```tsx
-import { CheckIcon, TrashIcon, SettingsIcon } from "@viibestack/ui";
+import { CheckIcon, TrashIcon, Button, Card, Input, Modal } from "@viibestack/ui";
 
 <CheckIcon size={16} color="green" />
 <TrashIcon className="text-red-500" />
+
+<Button variant="primary" size="md" onClick={...}>Save</Button>
+<Card title="Recent activity">...</Card>
+<Input label="Email" type="email" error={errors.email} />
 ```
 
 Every icon takes the same optional props: `size` (number, default 20), `color` (default `"currentColor"`, so it follows the surrounding text color / a Tailwind `text-*` class unless overridden), and `className`.
 
+## Components
+
+- **Button** -- `variant`: `primary | secondary | outline | ghost | danger`, `size`: `sm | md | lg`, plus every native `<button>` prop.
+- **Card** -- optional `title`, wraps children in a bordered/padded container.
+- **Input** / **Textarea** / **Select** -- optional `label` and `error`, plus every native form prop. `Select` takes `options: {value, label}[]` and an optional `placeholder`.
+- **Badge** -- `variant`: `neutral | success | warning | danger | info`.
+- **Modal** -- `open`, `onClose`, optional `title`; portals to `document.body`, closes on Escape or backdrop click.
+- **EmptyState** -- `title`, optional `icon`/`description`/`action` -- the "nothing here yet" placeholder.
+- **Spinner** -- `size` (number, default 20).
+- **Alert** -- `variant`: `info | success | warning | danger`, optional `title` and `onDismiss`.
+- **Checkbox** -- optional `label`, plus every native checkbox `<input>` prop.
+- **Switch** -- controlled toggle: `checked`, `onChange(checked)`, optional `label`/`disabled`.
+- **Avatar** -- `src` (image) or `name` (renders initials as a fallback), `size` (number, default 32).
+- **Tabs** -- `items: {key, label, content}[]`; uncontrolled by default (`defaultKey`) or controlled via `activeKey`/`onChange`.
+- **Table** / **Thead** / **Tbody** / **Tr** / **Th** / **Td** -- thin styled wrappers around native table elements, wrapped in a horizontal-scroll container. For sorting/filtering/pagination, use the `data-table` package bundle (`@tanstack/react-table`) instead -- these are for simple static display only.
+
+`Button`/`Card`/etc. pick up each app's brand color automatically via the `bg-primary`/`text-primary` Tailwind utilities already wired to the `--primary` CSS variable every generated app's `globals.css` defines (see `template-patches.ts`'s `themedGlobalsCss`) -- no extra setup needed. Dark-mode styling uses Tailwind's default `dark:` variant (`prefers-color-scheme`).
+
 ## Consuming this from an app built outside this monorepo
 
 This package ships raw, untranspiled `.tsx` source (same convention as `@sideblend/shared-types`) -- no build step to keep it trivial to iterate on. Next.js does **not** transpile `node_modules` by default, so any app that installs this from npm needs one line in its `next.config.ts`:

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@viibestack/ui",
-  "version": "0.1.0",
-  "description": "Dependency-free React icon set -- Feather/Lucide-style outline glyphs, no runtime dependency on any icon library.",
+  "version": "0.2.0",
+  "description": "Dependency-free React UI kit -- icons plus core components (Button, Card, Input, Modal, etc.), styled with plain Tailwind utility classes, no runtime dependency beyond react/react-dom.",
   "type": "module",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -9,11 +9,14 @@
     "src"
   ],
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18",
+    "react-dom": ">=18"
   },
   "devDependencies": {
     "@types/react": "^19",
+    "@types/react-dom": "^19",
     "react": "^19",
+    "react-dom": "^19",
     "typescript": "^5"
   },
   "publishConfig": {

package/src/components.tsx

@@ -0,0 +1,460 @@
+"use client";
+
+// Core UI building blocks -- Button, Card, Input, Textarea, Select, Badge,
+// Modal, EmptyState, Spinner, Alert, Checkbox, Switch, Avatar, Tabs, and
+// Table primitives. Styled with plain Tailwind utility classes
+// (the consuming app already has Tailwind v4, see scratch-scaffold.ts) --
+// no runtime dependency beyond react/react-dom. Brand color (bg-primary/
+// text-primary/border-primary) comes from the --primary CSS custom
+// property every generated app's globals.css already defines (see
+// template-patches.ts's themedGlobalsCss) via Tailwind's @theme inline
+// block -- these components pick that up automatically, no extra wiring.
+// dark: variants use Tailwind's default prefers-color-scheme strategy.
+
+import { createPortal } from "react-dom";
+import { useEffect, useRef, useState } from "react";
+import type { ButtonHTMLAttributes, HTMLAttributes, InputHTMLAttributes, ReactNode, SelectHTMLAttributes, TextareaHTMLAttributes, TableHTMLAttributes, ThHTMLAttributes, TdHTMLAttributes } from "react";
+
+function cx(...parts: (string | false | null | undefined)[]): string {
+  return parts.filter(Boolean).join(" ");
+}
+
+// ── Button ──────────────────────────────────────────────────────────────────
+
+export type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "danger";
+export type ButtonSize = "sm" | "md" | "lg";
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+}
+
+const BUTTON_VARIANTS: Record<ButtonVariant, string> = {
+  primary: "bg-primary text-white hover:brightness-90 disabled:opacity-50",
+  secondary: "bg-gray-100 text-gray-900 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-100 dark:hover:bg-gray-700 disabled:opacity-50",
+  outline: "border border-gray-300 text-gray-900 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-100 dark:hover:bg-gray-900 disabled:opacity-50",
+  ghost: "text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800 disabled:opacity-50",
+  danger: "bg-red-600 text-white hover:bg-red-700 disabled:opacity-50",
+};
+
+const BUTTON_SIZES: Record<ButtonSize, string> = {
+  sm: "text-sm px-3 py-1.5 rounded-md",
+  md: "text-sm px-4 py-2 rounded-lg",
+  lg: "text-base px-5 py-2.5 rounded-lg",
+};
+
+export function Button({ variant = "primary", size = "md", className, ...rest }: ButtonProps) {
+  return (
+    <button
+      className={cx(
+        "inline-flex items-center justify-center gap-2 font-medium transition-colors disabled:cursor-not-allowed",
+        BUTTON_VARIANTS[variant],
+        BUTTON_SIZES[size],
+        className,
+      )}
+      {...rest}
+    />
+  );
+}
+
+// ── Card ────────────────────────────────────────────────────────────────────
+
+export interface CardProps {
+  title?: ReactNode;
+  children?: ReactNode;
+  className?: string;
+}
+
+export function Card({ title, children, className }: CardProps) {
+  return (
+    <div className={cx("rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-gray-900", className)}>
+      {title && <div className="mb-3 text-base font-semibold text-gray-900 dark:text-gray-100">{title}</div>}
+      {children}
+    </div>
+  );
+}
+
+// ── Field label wrapper (shared by Input/Textarea/Select) ──────────────────
+
+function FieldWrapper({ label, error, children }: { label?: ReactNode; error?: ReactNode; children: ReactNode }) {
+  if (!label && !error) return <>{children}</>;
+  return (
+    <label className="flex flex-col gap-1.5">
+      {label && <span className="text-sm font-medium text-gray-700 dark:text-gray-300">{label}</span>}
+      {children}
+      {error && <span className="text-sm text-red-600 dark:text-red-400">{error}</span>}
+    </label>
+  );
+}
+
+const FIELD_CLASS =
+  "w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 outline-none " +
+  "focus:border-primary focus:ring-1 focus:ring-primary dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 " +
+  "disabled:cursor-not-allowed disabled:opacity-50";
+
+// ── Input ───────────────────────────────────────────────────────────────────
+
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: ReactNode;
+  error?: ReactNode;
+}
+
+export function Input({ label, error, className, ...rest }: InputProps) {
+  return (
+    <FieldWrapper label={label} error={error}>
+      <input className={cx(FIELD_CLASS, Boolean(error) && "border-red-400 focus:border-red-500 focus:ring-red-500", className)} {...rest} />
+    </FieldWrapper>
+  );
+}
+
+// ── Textarea ────────────────────────────────────────────────────────────────
+
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label?: ReactNode;
+  error?: ReactNode;
+}
+
+export function Textarea({ label, error, className, ...rest }: TextareaProps) {
+  return (
+    <FieldWrapper label={label} error={error}>
+      <textarea className={cx(FIELD_CLASS, "resize-y", Boolean(error) && "border-red-400 focus:border-red-500 focus:ring-red-500", className)} {...rest} />
+    </FieldWrapper>
+  );
+}
+
+// ── Select ──────────────────────────────────────────────────────────────────
+
+export interface SelectOption { value: string; label: string }
+
+export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "children"> {
+  label?: ReactNode;
+  error?: ReactNode;
+  options: SelectOption[];
+  placeholder?: string;
+}
+
+export function Select({ label, error, options, placeholder, className, ...rest }: SelectProps) {
+  return (
+    <FieldWrapper label={label} error={error}>
+      <select className={cx(FIELD_CLASS, Boolean(error) && "border-red-400 focus:border-red-500 focus:ring-red-500", className)} {...rest}>
+        {placeholder && <option value="">{placeholder}</option>}
+        {options.map((o) => (
+          <option key={o.value} value={o.value}>{o.label}</option>
+        ))}
+      </select>
+    </FieldWrapper>
+  );
+}
+
+// ── Badge ───────────────────────────────────────────────────────────────────
+
+export type BadgeVariant = "neutral" | "success" | "warning" | "danger" | "info";
+
+const BADGE_VARIANTS: Record<BadgeVariant, string> = {
+  neutral: "bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300",
+  success: "bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-400",
+  warning: "bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-400",
+  danger: "bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-400",
+  info: "bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-400",
+};
+
+export interface BadgeProps {
+  variant?: BadgeVariant;
+  children?: ReactNode;
+  className?: string;
+}
+
+export function Badge({ variant = "neutral", children, className }: BadgeProps) {
+  return (
+    <span className={cx("inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium", BADGE_VARIANTS[variant], className)}>
+      {children}
+    </span>
+  );
+}
+
+// ── Spinner ─────────────────────────────────────────────────────────────────
+
+export interface SpinnerProps {
+  size?: number;
+  className?: string;
+}
+
+export function Spinner({ size = 20, className }: SpinnerProps) {
+  return (
+    <svg
+      className={cx("animate-spin text-current", className)}
+      style={{ width: size, height: size }}
+      viewBox="0 0 24 24"
+      fill="none"
+      aria-label="Loading"
+    >
+      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
+    </svg>
+  );
+}
+
+// ── EmptyState ──────────────────────────────────────────────────────────────
+
+export interface EmptyStateProps {
+  icon?: ReactNode;
+  title: ReactNode;
+  description?: ReactNode;
+  action?: ReactNode;
+  className?: string;
+}
+
+export function EmptyState({ icon, title, description, action, className }: EmptyStateProps) {
+  return (
+    <div className={cx("flex flex-col items-center justify-center gap-2 rounded-xl border border-dashed border-gray-300 p-10 text-center dark:border-gray-700", className)}>
+      {icon && <div className="text-gray-400 dark:text-gray-600">{icon}</div>}
+      <div className="text-sm font-medium text-gray-900 dark:text-gray-100">{title}</div>
+      {description && <div className="text-sm text-gray-500 dark:text-gray-400">{description}</div>}
+      {action && <div className="mt-2">{action}</div>}
+    </div>
+  );
+}
+
+// ── Modal ───────────────────────────────────────────────────────────────────
+
+export interface ModalProps {
+  open: boolean;
+  onClose: () => void;
+  title?: ReactNode;
+  children?: ReactNode;
+  className?: string;
+}
+
+// Portal to document.body so the modal escapes any parent's overflow/
+// stacking context -- mounted-check guards the createPortal call during
+// Next.js's SSR pass, where `document` doesn't exist yet.
+export function Modal({ open, onClose, title, children, className }: ModalProps) {
+  const [mounted, setMounted] = useState(false);
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => setMounted(true), []);
+
+  useEffect(() => {
+    if (!open) return;
+    function onKey(e: KeyboardEvent) {
+      if (e.key === "Escape") onClose();
+    }
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+
+  if (!mounted || !open) return null;
+
+  return createPortal(
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4" onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
+      <div
+        ref={panelRef}
+        role="dialog"
+        aria-modal="true"
+        className={cx("w-full max-w-md rounded-xl bg-white p-6 shadow-xl dark:bg-gray-900", className)}
+      >
+        {title && <div className="mb-4 text-lg font-semibold text-gray-900 dark:text-gray-100">{title}</div>}
+        {children}
+      </div>
+    </div>,
+    document.body,
+  );
+}
+
+// ── Alert ───────────────────────────────────────────────────────────────────
+
+export type AlertVariant = "info" | "success" | "warning" | "danger";
+
+const ALERT_VARIANTS: Record<AlertVariant, string> = {
+  info: "bg-blue-50 text-blue-800 border-blue-200 dark:bg-blue-900/20 dark:text-blue-300 dark:border-blue-900",
+  success: "bg-green-50 text-green-800 border-green-200 dark:bg-green-900/20 dark:text-green-300 dark:border-green-900",
+  warning: "bg-amber-50 text-amber-800 border-amber-200 dark:bg-amber-900/20 dark:text-amber-300 dark:border-amber-900",
+  danger: "bg-red-50 text-red-800 border-red-200 dark:bg-red-900/20 dark:text-red-300 dark:border-red-900",
+};
+
+export interface AlertProps {
+  variant?: AlertVariant;
+  title?: ReactNode;
+  children?: ReactNode;
+  onDismiss?: () => void;
+  className?: string;
+}
+
+export function Alert({ variant = "info", title, children, onDismiss, className }: AlertProps) {
+  return (
+    <div className={cx("flex items-start justify-between gap-3 rounded-lg border p-3.5 text-sm", ALERT_VARIANTS[variant], className)}>
+      <div>
+        {title && <div className="font-medium">{title}</div>}
+        {children && <div className={title ? "mt-0.5" : undefined}>{children}</div>}
+      </div>
+      {onDismiss && (
+        <button type="button" onClick={onDismiss} aria-label="Dismiss" className="shrink-0 opacity-60 hover:opacity-100">
+          ✕
+        </button>
+      )}
+    </div>
+  );
+}
+
+// ── Checkbox ────────────────────────────────────────────────────────────────
+
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+  label?: ReactNode;
+}
+
+export function Checkbox({ label, className, ...rest }: CheckboxProps) {
+  return (
+    <label className="inline-flex items-center gap-2 text-sm text-gray-900 dark:text-gray-100">
+      <input type="checkbox" className={cx("h-4 w-4 rounded border-gray-300 accent-primary dark:border-gray-700", className)} {...rest} />
+      {label}
+    </label>
+  );
+}
+
+// ── Switch ──────────────────────────────────────────────────────────────────
+
+export interface SwitchProps {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  label?: ReactNode;
+  disabled?: boolean;
+  className?: string;
+}
+
+export function Switch({ checked, onChange, label, disabled, className }: SwitchProps) {
+  return (
+    <label className={cx("inline-flex items-center gap-2 text-sm text-gray-900 dark:text-gray-100", disabled && "opacity-50")}>
+      <button
+        type="button"
+        role="switch"
+        aria-checked={checked}
+        disabled={disabled}
+        onClick={() => onChange(!checked)}
+        className={cx(
+          "relative h-5 w-9 shrink-0 rounded-full transition-colors disabled:cursor-not-allowed",
+          checked ? "bg-primary" : "bg-gray-300 dark:bg-gray-700",
+          className,
+        )}
+      >
+        <span className={cx("absolute left-0.5 top-0.5 h-4 w-4 rounded-full bg-white transition-transform", checked && "translate-x-4")} />
+      </button>
+      {label}
+    </label>
+  );
+}
+
+// ── Avatar ──────────────────────────────────────────────────────────────────
+
+export interface AvatarProps {
+  src?: string;
+  name?: string;
+  size?: number;
+  className?: string;
+}
+
+function initialsFor(name: string): string {
+  const parts = name.trim().split(/\s+/);
+  return ((parts[0]?.[0] ?? "") + (parts.length > 1 ? parts[parts.length - 1][0] : "")).toUpperCase();
+}
+
+export function Avatar({ src, name, size = 32, className }: AvatarProps) {
+  const style = { width: size, height: size, fontSize: size * 0.4 };
+  if (src) {
+    // eslint-disable-next-line @next/next/no-img-element -- a generic package can't depend on next/image
+    return <img src={src} alt={name ?? ""} style={style} className={cx("rounded-full object-cover", className)} />;
+  }
+  return (
+    <div
+      style={style}
+      className={cx("flex items-center justify-center rounded-full bg-primary font-medium text-white", className)}
+      aria-label={name}
+    >
+      {name ? initialsFor(name) : ""}
+    </div>
+  );
+}
+
+// ── Tabs ────────────────────────────────────────────────────────────────────
+
+export interface TabItem {
+  key: string;
+  label: ReactNode;
+  content: ReactNode;
+}
+
+export interface TabsProps {
+  items: TabItem[];
+  defaultKey?: string;
+  activeKey?: string;
+  onChange?: (key: string) => void;
+  className?: string;
+}
+
+// Uncontrolled by default (defaultKey / internal state) -- pass activeKey +
+// onChange together to control it externally instead.
+export function Tabs({ items, defaultKey, activeKey, onChange, className }: TabsProps) {
+  const [internalKey, setInternalKey] = useState(defaultKey ?? items[0]?.key);
+  const key = activeKey ?? internalKey;
+  const active = items.find((i) => i.key === key) ?? items[0];
+
+  function select(k: string) {
+    if (activeKey === undefined) setInternalKey(k);
+    onChange?.(k);
+  }
+
+  return (
+    <div className={className}>
+      <div className="flex gap-1 border-b border-gray-200 dark:border-gray-800">
+        {items.map((item) => (
+          <button
+            key={item.key}
+            type="button"
+            onClick={() => select(item.key)}
+            className={cx(
+              "border-b-2 px-3 py-2 text-sm font-medium transition-colors",
+              item.key === key
+                ? "border-primary text-primary"
+                : "border-transparent text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100",
+            )}
+          >
+            {item.label}
+          </button>
+        ))}
+      </div>
+      <div className="pt-4">{active?.content}</div>
+    </div>
+  );
+}
+
+// ── Table primitives ─────────────────────────────────────────────────────────
+// Thin styled wrappers around native table elements -- for simple, fully
+// client-rendered data. For sorting/filtering/pagination, request the
+// "data-table" package bundle (@tanstack/react-table) instead.
+
+export function Table({ className, ...rest }: TableHTMLAttributes<HTMLTableElement>) {
+  return (
+    <div className="overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-800">
+      <table className={cx("w-full text-left text-sm", className)} {...rest} />
+    </div>
+  );
+}
+
+export function Thead(props: HTMLAttributes<HTMLTableSectionElement>) {
+  return <thead className="bg-gray-50 dark:bg-gray-900" {...props} />;
+}
+
+export function Tbody(props: HTMLAttributes<HTMLTableSectionElement>) {
+  return <tbody className="divide-y divide-gray-200 dark:divide-gray-800" {...props} />;
+}
+
+export function Tr(props: HTMLAttributes<HTMLTableRowElement>) {
+  return <tr {...props} />;
+}
+
+export function Th({ className, ...rest }: ThHTMLAttributes<HTMLTableCellElement>) {
+  return <th className={cx("px-4 py-2.5 font-medium text-gray-500 dark:text-gray-400", className)} {...rest} />;
+}
+
+export function Td({ className, ...rest }: TdHTMLAttributes<HTMLTableCellElement>) {
+  return <td className={cx("px-4 py-2.5 text-gray-900 dark:text-gray-100", className)} {...rest} />;
+}

package/src/index.ts

@@ -1 +1,2 @@
 export * from "./icons";
+export * from "./components";