@viliha/vui-ui 1.0.0

package/src/select.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import * as React from "react";
+import {
+  CheckIcon as Check,
+  ChevronDownIcon as ChevronDown,
+} from "@radix-ui/react-icons";
+
+import { cn } from "./utils";
+
+export interface SelectOption {
+  value: string;
+  label: string;
+}
+
+/**
+ * Custom single-select styled to match the app (Input-like trigger + popover
+ * list), replacing the native `<select>`. Click-to-open, outside-click/Escape
+ * to close, checkmark on the active option.
+ */
+export function Select({
+  value,
+  onValueChange,
+  options,
+  id,
+  ariaLabel,
+  placeholder = "Select…",
+  className,
+}: {
+  value: string;
+  onValueChange: (value: string) => void;
+  options: SelectOption[];
+  id?: string;
+  ariaLabel?: string;
+  placeholder?: string;
+  /** Applied to the root (e.g. width in a flex row). */
+  className?: string;
+}) {
+  const [open, setOpen] = React.useState(false);
+  const ref = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    if (!open) return;
+    const onDown = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", onDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+
+  const selected = options.find((o) => o.value === value);
+
+  return (
+    <div className={cn("relative", className)} ref={ref}>
+      <button
+        type="button"
+        id={id}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        aria-label={ariaLabel}
+        onClick={() => setOpen((v) => !v)}
+        className={cn(
+          "flex h-8 w-full items-center justify-between gap-2 rounded-md border border-input bg-background px-2.5 transition-colors",
+          "hover:bg-accent/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+        )}
+      >
+        <span className={cn("truncate", !selected && "text-muted-foreground")}>
+          {selected ? selected.label : placeholder}
+        </span>
+        <ChevronDown
+          className={cn(
+            "size-3.5 shrink-0 text-muted-foreground transition-transform",
+            open && "rotate-180",
+          )}
+          aria-hidden="true"
+        />
+      </button>
+      {open && (
+        <div
+          role="listbox"
+          aria-label={ariaLabel}
+          tabIndex={-1}
+          className="vui-pop-in absolute z-50 mt-1 max-h-60 w-full min-w-max overflow-auto rounded-md border border-border bg-popover text-popover-foreground shadow-md"
+        >
+          {options.map((o) => {
+            const active = o.value === value;
+            return (
+              <button
+                key={o.value}
+                type="button"
+                role="option"
+                aria-selected={active}
+                onClick={() => {
+                  onValueChange(o.value);
+                  setOpen(false);
+                }}
+                className={cn(
+                  "flex w-full items-center justify-between gap-2 border-b border-border px-3 py-2 text-left last:border-b-0 hover:bg-accent hover:text-accent-foreground",
+                  active && "bg-accent/60",
+                )}
+              >
+                <span className="truncate">{o.label}</span>
+                {active && (
+                  <Check className="size-3.5 shrink-0 text-[var(--button-primary)]" />
+                )}
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/table-io.ts

@@ -0,0 +1,114 @@
+/**
+ * Import/export helpers for RecordView datatables — no external dependencies.
+ * CSV/JSON round-trip fully; "Excel" is an HTML table saved as .xls (Excel opens
+ * it); PDF is browser print-to-PDF. True .xlsx read/write would need a library.
+ */
+
+export type IoColumn = { key: string; label: string };
+type Row = Record<string, unknown>;
+
+function csvEscape(value: string): string {
+  return /[",\n]/.test(value) ? `"${value.replace(/"/g, '""')}"` : value;
+}
+
+function htmlEscape(value: string): string {
+  return value
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;");
+}
+
+export function rowsToCSV(cols: IoColumn[], rows: Row[]): string {
+  const head = cols.map((c) => csvEscape(c.label)).join(",");
+  const body = rows
+    .map((r) => cols.map((c) => csvEscape(String(r[c.key] ?? ""))).join(","))
+    .join("\n");
+  return `${head}\n${body}`;
+}
+
+export function rowsToTableHTML(cols: IoColumn[], rows: Row[]): string {
+  const head = cols.map((c) => `<th>${htmlEscape(c.label)}</th>`).join("");
+  const body = rows
+    .map(
+      (r) =>
+        `<tr>${cols
+          .map((c) => `<td>${htmlEscape(String(r[c.key] ?? ""))}</td>`)
+          .join("")}</tr>`,
+    )
+    .join("");
+  return `<table border="1" cellspacing="0" cellpadding="6"><thead><tr>${head}</tr></thead><tbody>${body}</tbody></table>`;
+}
+
+export function downloadFile(
+  filename: string,
+  content: string,
+  mime: string,
+): void {
+  const blob = new Blob([content], { type: mime });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  URL.revokeObjectURL(url);
+}
+
+/** Open a print window with the table; the user saves as PDF from the dialog. */
+export function printTable(title: string, tableHTML: string): void {
+  const w = window.open("", "_blank");
+  if (!w) return;
+  w.document.write(
+    `<!doctype html><html><head><meta charset="utf-8"><title>${htmlEscape(
+      title,
+    )}</title><style>body{font-family:Inter,system-ui,sans-serif;font-size:12px;padding:24px;color:#101112}h1{font-size:16px;margin:0 0 12px}table{border-collapse:collapse;width:100%}th,td{border:1px solid #e2e0e8;padding:6px 8px;text-align:left}th{background:#f4f4f6}</style></head><body><h1>${htmlEscape(
+      title,
+    )}</h1>${tableHTML}</body></html>`,
+  );
+  w.document.close();
+  w.focus();
+  w.print();
+}
+
+/** Minimal CSV parser → objects keyed by header row. Handles quoted fields. */
+export function parseCSV(text: string): Record<string, string>[] {
+  const rows: string[][] = [];
+  let field = "";
+  let row: string[] = [];
+  let inQuotes = false;
+  for (let i = 0; i < text.length; i++) {
+    const ch = text[i];
+    if (inQuotes) {
+      if (ch === '"') {
+        if (text[i + 1] === '"') {
+          field += '"';
+          i++;
+        } else inQuotes = false;
+      } else field += ch;
+    } else if (ch === '"') inQuotes = true;
+    else if (ch === ",") {
+      row.push(field);
+      field = "";
+    } else if (ch === "\n" || ch === "\r") {
+      if (ch === "\r" && text[i + 1] === "\n") i++;
+      row.push(field);
+      field = "";
+      if (row.some((c) => c !== "")) rows.push(row);
+      row = [];
+    } else field += ch;
+  }
+  if (field !== "" || row.length) {
+    row.push(field);
+    if (row.some((c) => c !== "")) rows.push(row);
+  }
+  const header = rows[0];
+  if (!header) return [];
+  return rows.slice(1).map((r) => {
+    const obj: Record<string, string> = {};
+    header.forEach((h, idx) => {
+      obj[h] = r[idx] ?? "";
+    });
+    return obj;
+  });
+}

package/src/table.tsx

@@ -0,0 +1,100 @@
+import * as React from "react";
+
+import { cn } from "./utils";
+
+export const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <table
+    ref={ref}
+    className={cn("w-full caption-bottom text-sm font-normal", className)}
+    {...props}
+  />
+));
+Table.displayName = "Table";
+
+export const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+));
+TableHeader.displayName = "TableHeader";
+
+export const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody ref={ref} className={className} {...props} />
+));
+TableBody.displayName = "TableBody";
+
+export const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn("border-t bg-muted/40 font-medium", className)}
+    {...props}
+  />
+));
+TableFooter.displayName = "TableFooter";
+
+export const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b border-border transition-colors hover:bg-muted/50",
+      className,
+    )}
+    {...props}
+  />
+));
+TableRow.displayName = "TableRow";
+
+export const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-8 border-r border-border px-3 text-left align-middle font-semibold text-foreground last:border-r-0 [&:has([role=checkbox])]:pr-0",
+      className,
+    )}
+    {...props}
+  />
+));
+TableHead.displayName = "TableHead";
+
+export const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn(
+      "border-r border-border px-3 py-1.5 align-middle last:border-r-0 [&:has([role=checkbox])]:pr-0",
+      className,
+    )}
+    {...props}
+  />
+));
+TableCell.displayName = "TableCell";
+
+export const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-muted-foreground", className)}
+    {...props}
+  />
+));
+TableCaption.displayName = "TableCaption";

package/src/theme.css

@@ -0,0 +1,296 @@
+/**
+ * VUI Starter design system — single source of truth, shared across web apps.
+ *
+ * Neutral shadcn/ui token set (oklch) plus the PULSE brand palette kept for the
+ * gradient wordmark. Each app's globals.css just `@import`s this file after
+ * Tailwind; the token→utility mapping (`@theme inline`), the base reset, and the
+ * component-scan (`@source`) all live here so nothing is duplicated per app.
+ */
+
+/* Scan this package's components from any consuming app. */
+@source "../";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.177 0 0); /* #101112 — global text color */
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  /* Per-page accent (overridden by the app per route) — tints module icons. */
+  --page-accent: var(--muted-foreground);
+  /* Text highlight (::selection) */
+  --selection: #266df0;
+  --selection-foreground: #ffffff;
+  /* brand primary action button */
+  --button-primary: #266df0;
+  --button-primary-hover: #215bc4;
+  --button-primary-foreground: #ffffff;
+  --button-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.06),
+    0px 2px 4px -2px rgba(38, 109, 240, 0.12),
+    0px 3px 6px -2px rgba(38, 109, 240, 0.08);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: var(--foreground);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+
+  /* Brand palette — used by the gradient wordmark (from-brand-indigo …). */
+  --brand-indigo: #0866ff;
+  --brand-violet: #3b82f6;
+  --brand-coral: #ff5c40;
+  --brand-mint: #4fe3c1;
+  --brand-ink: #060914;
+  --brand-mist: #eef1fb;
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  /* --sidebar-foreground inherits var(--foreground) from :root */
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@theme inline {
+  --font-sans: var(--font-inter), ui-sans-serif, system-ui, -apple-system,
+    "Segoe UI", Roboto, sans-serif;
+  --font-mono: var(--font-jetbrains-mono), ui-monospace, SFMono-Regular, Menlo,
+    monospace;
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-selection: var(--selection);
+  --color-selection-foreground: var(--selection-foreground);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --color-brand-indigo: var(--brand-indigo);
+  --color-brand-violet: var(--brand-violet);
+  --color-brand-coral: var(--brand-coral);
+  --color-brand-mint: var(--brand-mint);
+  --color-brand-ink: var(--brand-ink);
+  --color-brand-mist: var(--brand-mist);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  html {
+    overscroll-behavior: none;
+    scroll-behavior: smooth;
+  }
+  body {
+    @apply bg-background text-foreground font-sans antialiased;
+    min-height: 100vh;
+    /* Global type baseline: Inter 14px / medium, with ligatures. */
+    font-size: 14px;
+    font-weight: 500;
+    font-feature-settings: "calt", "liga";
+  }
+  ::selection {
+    background-color: var(--selection);
+    color: var(--selection-foreground);
+  }
+  /* Every clickable element shows the hand cursor (global — no inline needed). */
+  button:not(:disabled),
+  [role="button"],
+  [role="menuitem"],
+  [role="menuitemcheckbox"],
+  [role="tab"],
+  summary,
+  label[for],
+  a[href] {
+    cursor: pointer;
+  }
+  /* Every icon is a bordered chip. Radix icons render `<svg width="15">`, so we
+     target that (custom SVGs like the logo use viewBox only and are exempt). The
+     Tailwind size utility (e.g. size-4) sets the glyph box, and content-box adds
+     the border + padding outside it so the glyph stays crisp. Active/emphasis
+     states just flip bg/border/color via utilities (they win in the later layer). */
+  svg[width="15"] {
+    box-sizing: content-box;
+    padding: 2px;
+    border: 1px solid var(--border);
+    border-radius: calc(var(--radius) - 4px);
+  }
+  /* Radix icons are thin filled glyphs; add a matching stroke so they read
+     bolder/heavier throughout the app. */
+  svg[width="15"] path {
+    stroke: currentColor;
+    stroke-width: 0.55px;
+    stroke-linejoin: round;
+    stroke-linecap: round;
+  }
+  /* ponytail: rest of the paste's reset is already covered by Tailwind preflight. */
+  @media (prefers-reduced-motion: reduce) {
+    * {
+      scroll-behavior: auto !important;
+      transition-duration: 0.01ms !important;
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+    }
+  }
+}
+
+/* Motion primitives — enterprise-style entrance transitions. Reduced-motion is
+   respected via the rule above (animation-duration is clamped for those users). */
+/* Opacity-only (no transform) so a faded page never becomes the containing
+   block for the fixed detail-panel overlay — the backdrop must cover the whole
+   viewport (sidebar, top bar, footer), not just the content area. */
+@keyframes vui-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes vui-overlay-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes vui-slide-in-right {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+@keyframes vui-pop-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96) translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+.vui-fade-in {
+  animation: vui-fade-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+.vui-overlay-in {
+  animation: vui-overlay-in 0.2s ease-out both;
+}
+.vui-panel-in {
+  animation: vui-slide-in-right 0.3s cubic-bezier(0.32, 0.72, 0, 1) both;
+}
+.vui-pop-in {
+  animation: vui-pop-in 0.14s ease-out both;
+  transform-origin: var(--vui-pop-origin, top);
+}
+
+@keyframes vui-slide-out-right {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+@keyframes vui-overlay-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.vui-panel-out {
+  animation: vui-slide-out-right 0.24s cubic-bezier(0.32, 0.72, 0, 1) both;
+}
+.vui-overlay-out {
+  animation: vui-overlay-out 0.2s ease-out both;
+}

package/src/utils.ts

@@ -0,0 +1,7 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/** Merge conditional class names, de-duplicating conflicting Tailwind utilities. */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}