@nuvin/ui-design-system 0.1.0

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-Ctl3DYP3.cjs");exports.Accordion=e.Accordion;exports.AccordionContent=e.AccordionContent;exports.AccordionItem=e.AccordionItem;exports.AccordionTrigger=e.AccordionTrigger;exports.AlertBanner=e.AlertBanner;exports.ApprovalCard=e.ApprovalCard;exports.AssistantMessage=e.AssistantMessage;exports.Avatar=e.Avatar;exports.Badge=e.Badge;exports.Box=e.Box;exports.Breadcrumb=e.Breadcrumb;exports.BreadcrumbItem=e.BreadcrumbItem;exports.BreadcrumbLink=e.BreadcrumbLink;exports.BreadcrumbList=e.BreadcrumbList;exports.BreadcrumbPage=e.BreadcrumbPage;exports.BreadcrumbSeparator=e.BreadcrumbSeparator;exports.Button=e.Button;exports.Callout=e.Callout;exports.Card=e.Card;exports.Checkbox=e.Checkbox;exports.Chip=e.Chip;exports.Code=e.Code;exports.Combobox=e.Combobox;exports.CommandPalette=e.CommandPalette;exports.Composer=e.Composer;exports.ConfirmDialog=e.ConfirmDialog;exports.CopyButton=e.CopyButton;exports.DiffBlock=e.DiffBlock;exports.Divider=e.Divider;exports.DropdownMenu=e.DropdownMenu;exports.DropdownMenuItem=e.DropdownMenuItem;exports.DropdownMenuLabel=e.DropdownMenuLabel;exports.DropdownMenuSeparator=e.DropdownMenuSeparator;exports.DropdownMenuTrigger=e.DropdownMenuTrigger;exports.EmptyState=e.EmptyState;exports.Field=e.Field;exports.Heading=e.Heading;exports.Inline=e.Inline;exports.Input=e.Input;exports.Kbd=e.Kbd;exports.Link=e.Link;exports.Markdown=e.Markdown;exports.Modal=e.Modal;exports.Pagination=e.Pagination;exports.Popover=e.Popover;exports.PopoverContent=e.PopoverContent;exports.PopoverTrigger=e.PopoverTrigger;exports.Progress=e.Progress;exports.RadioGroup=e.RadioGroup;exports.ReasoningDisclosure=e.ReasoningDisclosure;exports.ScrollArea=e.ScrollArea;exports.Select=e.Select;exports.Separator=e.Separator;exports.Sidebar=e.Sidebar;exports.SidebarFooter=e.SidebarFooter;exports.SidebarHeader=e.SidebarHeader;exports.SidebarNav=e.SidebarNav;exports.SidebarNavItem=e.SidebarNavItem;exports.Skeleton=e.Skeleton;exports.Spinner=e.Spinner;exports.Stack=e.Stack;exports.StatCard=e.StatCard;exports.StatusLine=e.StatusLine;exports.Switch=e.Switch;exports.Table=e.Table;exports.Tabs=e.Tabs;exports.TabsContent=e.TabsContent;exports.TabsList=e.TabsList;exports.TabsTrigger=e.TabsTrigger;exports.Text=e.Text;exports.Textarea=e.Textarea;exports.ThemeProvider=e.ThemeProvider;exports.Toaster=e.Toaster;exports.ToolCard=e.ToolCard;exports.ToolGroup=e.ToolGroup;exports.Tooltip=e.Tooltip;exports.UserMessage=e.UserMessage;exports.cn=e.cn;exports.toast=e.toast;exports.useField=e.useField;exports.useTheme=e.useTheme;

package/dist/index.d.ts

@@ -0,0 +1,59 @@
+export { cn } from "./lib/cn.js";
+export { ThemeProvider, useTheme, type ThemeMode } from "./theme/ThemeProvider.js";
+export { Button, type ButtonProps } from "./components/Button.js";
+export { Spinner } from "./components/Spinner.js";
+export { ToolCard, type ToolCardProps, type ToolStatus, type ToolKind, } from "./components/ToolCard.js";
+export { ToolGroup, type ToolGroupProps, type ToolGroupFacts } from "./components/ToolGroup.js";
+export { Badge, type BadgeProps } from "./components/Badge.js";
+export { Chip } from "./components/Chip.js";
+export { Card } from "./components/Card.js";
+export { Callout, type CalloutProps } from "./components/Callout.js";
+export { UserMessage, type UserMessageProps, } from "./components/UserMessage.js";
+export { AssistantMessage, type AssistantMessageProps, } from "./components/AssistantMessage.js";
+export { DiffBlock, type DiffBlockProps, type DiffLine } from "./components/DiffBlock.js";
+export { Markdown, type MarkdownProps } from "./components/Markdown.js";
+export { ReasoningDisclosure, type ReasoningDisclosureProps, } from "./components/ReasoningDisclosure.js";
+export { ApprovalCard, type ApprovalCardProps, type ApprovalDecision, } from "./components/ApprovalCard.js";
+export { Composer, type ComposerProps, type ComposerCommand, } from "./components/Composer.js";
+export { StatusLine, type StatusLineProps } from "./components/StatusLine.js";
+export { Field, useField, type FieldProps, type FieldContextValue, } from "./components/forms/Field.js";
+export { Input, type InputProps } from "./components/forms/Input.js";
+export { Textarea, type TextareaProps } from "./components/forms/Textarea.js";
+export { Select, type SelectProps, type SelectOption } from "./components/forms/Select.js";
+export { Combobox, type ComboboxProps, type ComboboxOption, } from "./components/forms/Combobox.js";
+export { Checkbox, type CheckboxProps } from "./components/forms/Checkbox.js";
+export { RadioGroup, type RadioGroupProps } from "./components/forms/RadioGroup.js";
+export { Switch, type SwitchProps } from "./components/forms/Switch.js";
+export { Modal, type ModalProps } from "./components/overlays/Modal.js";
+export { ConfirmDialog, type ConfirmDialogProps } from "./components/overlays/ConfirmDialog.js";
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuLabel, } from "./components/overlays/DropdownMenu.js";
+export { Popover, PopoverTrigger, PopoverContent } from "./components/overlays/Popover.js";
+export { Tooltip, type TooltipProps } from "./components/overlays/Tooltip.js";
+export { Toaster } from "./components/overlays/Toaster.js";
+export { toast, type ToastOptions } from "./components/overlays/toast.js";
+export { Skeleton, type SkeletonProps } from "./components/overlays/Skeleton.js";
+export { EmptyState, type EmptyStateProps } from "./components/overlays/EmptyState.js";
+export { Kbd, type KbdProps } from "./components/data/Kbd.js";
+export { CopyButton, type CopyButtonProps } from "./components/data/CopyButton.js";
+export { Avatar, type AvatarProps } from "./components/data/Avatar.js";
+export { StatCard, type StatCardProps } from "./components/data/StatCard.js";
+export { Table } from "./components/data/Table.js";
+export type { TableColumn, SortState, FilterState, TableProps } from "./components/data/Table.js";
+export { Box, type BoxProps } from "./components/layout/Box.js";
+export { Stack, type StackProps } from "./components/layout/Stack.js";
+export { Inline, type InlineProps } from "./components/layout/Inline.js";
+export { Divider, type DividerProps } from "./components/layout/Divider.js";
+export { ScrollArea, type ScrollAreaProps } from "./components/layout/ScrollArea.js";
+export { Separator, type SeparatorProps } from "./components/layout/Separator.js";
+export { Heading, type HeadingProps } from "./components/typography/Heading.js";
+export { Text, type TextProps } from "./components/typography/Text.js";
+export { Code, type CodeProps } from "./components/typography/Code.js";
+export { Link, type LinkProps } from "./components/typography/Link.js";
+export { CommandPalette, type CommandPaletteProps, type CommandPaletteGroup, type CommandPaletteItem, } from "./components/navigation/CommandPalette.js";
+export { Tabs, TabsList, TabsTrigger, TabsContent } from "./components/navigation/Tabs.js";
+export { Pagination, type PaginationProps } from "./components/navigation/Pagination.js";
+export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator, BreadcrumbPage, type BreadcrumbProps, type BreadcrumbListProps, type BreadcrumbItemProps, type BreadcrumbLinkProps, type BreadcrumbSeparatorProps, type BreadcrumbPageProps, } from "./components/navigation/Breadcrumb.js";
+export { Sidebar, SidebarHeader, SidebarNav, SidebarNavItem, SidebarFooter, type SidebarProps, type SidebarHeaderProps, type SidebarNavProps, type SidebarNavItemProps, type SidebarFooterProps, } from "./components/navigation/Sidebar.js";
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent, } from "./components/disclosure/Accordion.js";
+export { Progress, type ProgressProps } from "./components/feedback/Progress.js";
+export { AlertBanner, type AlertBannerProps, type AlertBannerVariant, } from "./components/feedback/AlertBanner.js";

package/dist/index.js

@@ -0,0 +1,84 @@
+import { A as e, a as r, b as o, d as t, e as n, f as i, g as d, h as p, B as b, i as c, j as l, k as u, l as m, m as g, n as T, o as C, p as S, C as B, q as v, r as A, s as D, t as M, u as k, v as P, w, x as h, y as x, D as I, z as L, F as f, G as F, H as y, I as G, J as H, K as N, L as R, M as j, N as q, O as K, P as U, Q as z, R as E, T as J, U as O, W as Q, X as W, Y as X, Z as Y, _ as Z, $ as _, a0 as $, a1 as V, a2 as aa, a3 as sa, a4 as ea, a5 as ra, a6 as oa, a7 as ta, a8 as na, a9 as ia, aa as da, ab as pa, ac as ba, ad as ca, ae as la, af as ua, ag as ma, ah as ga, ai as Ta, aj as Ca, ak as Sa, al as Ba, am as va, an as Aa, ao as Da, ap as Ma, aq as ka, ar as Pa, as as wa, at as ha, au as xa } from "./index-B8qLWEuY.js";
+export {
+  e as Accordion,
+  r as AccordionContent,
+  o as AccordionItem,
+  t as AccordionTrigger,
+  n as AlertBanner,
+  i as ApprovalCard,
+  d as AssistantMessage,
+  p as Avatar,
+  b as Badge,
+  c as Box,
+  l as Breadcrumb,
+  u as BreadcrumbItem,
+  m as BreadcrumbLink,
+  g as BreadcrumbList,
+  T as BreadcrumbPage,
+  C as BreadcrumbSeparator,
+  S as Button,
+  B as Callout,
+  v as Card,
+  A as Checkbox,
+  D as Chip,
+  M as Code,
+  k as Combobox,
+  P as CommandPalette,
+  w as Composer,
+  h as ConfirmDialog,
+  x as CopyButton,
+  I as DiffBlock,
+  L as Divider,
+  f as DropdownMenu,
+  F as DropdownMenuItem,
+  y as DropdownMenuLabel,
+  G as DropdownMenuSeparator,
+  H as DropdownMenuTrigger,
+  N as EmptyState,
+  R as Field,
+  j as Heading,
+  q as Inline,
+  K as Input,
+  U as Kbd,
+  z as Link,
+  E as Markdown,
+  J as Modal,
+  O as Pagination,
+  Q as Popover,
+  W as PopoverContent,
+  X as PopoverTrigger,
+  Y as Progress,
+  Z as RadioGroup,
+  _ as ReasoningDisclosure,
+  $ as ScrollArea,
+  V as Select,
+  aa as Separator,
+  sa as Sidebar,
+  ea as SidebarFooter,
+  ra as SidebarHeader,
+  oa as SidebarNav,
+  ta as SidebarNavItem,
+  na as Skeleton,
+  ia as Spinner,
+  da as Stack,
+  pa as StatCard,
+  ba as StatusLine,
+  ca as Switch,
+  la as Table,
+  ua as Tabs,
+  ma as TabsContent,
+  ga as TabsList,
+  Ta as TabsTrigger,
+  Ca as Text,
+  Sa as Textarea,
+  Ba as ThemeProvider,
+  va as Toaster,
+  Aa as ToolCard,
+  Da as ToolGroup,
+  Ma as Tooltip,
+  ka as UserMessage,
+  Pa as cn,
+  wa as toast,
+  ha as useField,
+  xa as useTheme
+};

package/dist/lib/cn.d.ts

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

package/dist/mermaid-HWGCJPDP-B921Bgi1.js

@@ -0,0 +1,4 @@
+import { V as r } from "./index-B8qLWEuY.js";
+export {
+  r as Mermaid
+};

package/dist/mermaid-HWGCJPDP-DwanGdS4.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-Ctl3DYP3.cjs");exports.Mermaid=e.Vo;

package/dist/primitives.css

@@ -0,0 +1,34 @@
+/* Tier 1 — primitive tokens. NOT a public contract; consumers must bind only
+   to semantic names. Values are oklch conversions of the sketch hex palette. */
+
+:root {
+  /* Hue ramps derived from sketch accents (green/red/yellow/orange/magenta/cyan) */
+  --ui-green-500: oklch(0.871 0.117 145.5);   /* #a6e3a1 */
+  --ui-red-500: oklch(0.762 0.14 356.9);      /* #f38ba8 */
+  --ui-yellow-500: oklch(0.83 0.11 60);       /* #fab387 */
+  --ui-orange-500: oklch(0.806 0.098 55.8);   /* #e8a878 */
+  --ui-magenta-500: oklch(0.883 0.069 320.4); /* #f5c2e7 */
+  --ui-cyan-500: oklch(0.906 0.062 213.9);    /* #89dceb */
+  --ui-brand-500: oklch(0.736 0.098 51.7);    /* #dd945d */
+
+  /* Neutral ramp anchored on sketch bg #18181f → text #e2e4ef */
+  --ui-neutral-900: oklch(0.183 0.012 285.8); /* #18181f bg */
+  --ui-neutral-800: oklch(0.223 0.013 285.8); /* #1f1f27 panel */
+  --ui-neutral-700: oklch(0.263 0.014 285.8); /* #26262f panel-2 */
+  --ui-neutral-600: oklch(0.32 0.015 285.8);  /* #30303c border */
+  --ui-neutral-300: oklch(0.75 0.02 264.3);   /* #a6adc8 text-2 */
+  --ui-neutral-200: oklch(0.94 0.01 260);     /* #e2e4ef text-1 */
+  --ui-neutral-100: oklch(0.98 0.005 260);
+
+  /* User bubble tint #24304a and code bg #14141b */
+  --ui-blue-tint: oklch(0.293 0.048 264.5);
+  --ui-code-black: oklch(0.157 0.012 285.8);
+
+  /* Type */
+  --ui-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
+    sans-serif;
+  --ui-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+
+  /* Base radius (scale derives via calc in @theme) */
+  --ui-radius-base: 12px;
+}

package/dist/semantic.css

@@ -0,0 +1,98 @@
+/* Tier 2 — SEMANTIC TOKENS. This file is the public token contract.
+   Dark is the default (:root); light overrides live in themes/light.css.
+   Names follow shadcn-compatible pairs where applicable plus chat-domain roles. */
+
+@layer theme {
+  :root {
+    color-scheme: dark;
+
+    /* Surfaces */
+    --color-background: var(--ui-neutral-900);
+    --color-panel: var(--ui-neutral-800);
+    --color-panel-2: var(--ui-neutral-700);
+    --color-border: var(--ui-neutral-600);
+    --color-input: var(--ui-neutral-600);
+    --color-overlay: color-mix(in srgb, var(--ui-neutral-900) 70%, transparent);
+
+    /* Text */
+    --color-foreground: var(--ui-neutral-200);
+    --color-text-2: var(--ui-neutral-300);
+    --color-text-3: oklch(0.58 0.02 264.3); /* #6c7086 dim */
+
+    /* Brand + accent */
+    --color-brand: var(--ui-brand-500);
+    --color-primary: var(--ui-green-500);
+    --color-primary-foreground: oklch(0.22 0.05 150); /* dark green ink #14201a-ish */
+    --color-accent: var(--ui-yellow-500);
+
+    /* Feedback (shadcn-compatible destructive) */
+    --color-destructive: var(--ui-red-500);
+    --color-destructive-foreground: oklch(0.98 0.005 260);
+    --color-muted: var(--ui-neutral-700);
+    --color-muted-foreground: var(--ui-neutral-300);
+    --color-ring: color-mix(in srgb, var(--ui-green-500) 45%, transparent);
+
+    /* Chat domain */
+    --color-bubble-user: var(--ui-blue-tint);
+    --color-bubble-assistant: transparent;
+    --color-code-bg: var(--ui-code-black);
+    --color-add-bg: color-mix(in srgb, var(--ui-green-500) 8%, transparent);
+    --color-del-bg: color-mix(in srgb, var(--ui-red-500) 8%, transparent);
+
+    /* Tool status */
+    --color-status-ok: var(--ui-green-500);
+    --color-status-error: var(--ui-red-500);
+    --color-status-warning: var(--ui-yellow-500);
+    --color-status-running: var(--ui-orange-500);
+    --color-status-pending: var(--ui-yellow-500);
+
+    /* Informational accent (info callouts, read-tool glyph, diff file paths) */
+    --color-info: var(--ui-cyan-500);
+
+    /* Shape */
+    --radius: var(--ui-radius-base);
+
+    /* Typography */
+    --text-xs: 0.75rem;
+    --text-sm: 0.875rem;
+    --text-base: 1rem;
+    --text-lg: 1.125rem;
+    --text-xl: 1.25rem;
+    --text-2xl: 1.5rem;
+
+    --leading-tight: 1.25;
+    --leading-normal: 1.5;
+    --leading-relaxed: 1.75;
+
+    --font-normal: 400;
+    --font-medium: 500;
+    --font-semibold: 600;
+    --font-bold: 700;
+
+    /* Shadows */
+    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.15);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.2), 0 2px 4px -2px rgb(0 0 0 / 0.15);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.25), 0 4px 6px -4px rgb(0 0 0 / 0.2);
+    --shadow-overlay: 0 20px 25px -5px rgb(0 0 0 / 0.3), 0 8px 10px -6px rgb(0 0 0 / 0.2);
+
+    /* Z-index */
+    --z-dropdown: 40;
+    --z-overlay: 45;
+    --z-modal: 50;
+    --z-popover: 50;
+    --z-tooltip: 55;
+    --z-toast: 60;
+
+    /* Motion */
+    --duration-75: 75ms;
+    --duration-100: 100ms;
+    --duration-150: 150ms;
+    --duration-200: 200ms;
+    --duration-300: 300ms;
+    --duration-500: 500ms;
+
+    --ease-in: cubic-bezier(0.4, 0, 1, 1);
+    --ease-out: cubic-bezier(0, 0, 0.2, 1);
+    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  }
+}

package/dist/showcases/Conversation.stories.d.ts

@@ -0,0 +1,13 @@
+import type { StoryObj } from "@storybook/react-vite";
+declare function ConversationScene(): import("react").JSX.Element;
+declare const meta: {
+    title: string;
+    component: typeof ConversationScene;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const DemoTranscript: Story;

package/dist/spacing.css

@@ -0,0 +1,16 @@
+/* src/tokens/spacing.css — Tier 1.5: layout spacing scale (4px grid).
+   Tailwind convention: --space-N = N * 0.25rem. Public contract. */
+
+:root {
+	--space-0: 0;
+	--space-1: 0.25rem;	/* 4px */
+	--space-2: 0.5rem;	/* 8px */
+	--space-3: 0.75rem;	/* 12px */
+	--space-4: 1rem;	/* 16px */
+	--space-5: 1.25rem;	/* 20px */
+	--space-6: 1.5rem;	/* 24px */
+	--space-8: 2rem;	/* 32px */
+	--space-10: 2.5rem;	/* 40px */
+	--space-12: 3rem;	/* 48px */
+	--space-16: 4rem;	/* 64px */
+}

package/dist/styles.css

@@ -0,0 +1,5 @@
+/* Non-Tailwind consumer bundle: tokens only, no utilities. */
+@import "./primitives.css";
+@import "./spacing.css";
+@import "./semantic.css";
+@import "./themes/light.css";

package/dist/theme/ThemeProvider.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode } from "react";
+export type ThemeMode = "dark" | "light";
+type ThemeContextValue = {
+    mode: ThemeMode;
+    setMode: (mode: ThemeMode) => void;
+    toggleMode: () => void;
+};
+export declare function ThemeProvider({ children, defaultMode, storageKey, }: {
+    children?: ReactNode;
+    defaultMode?: ThemeMode | "system";
+    storageKey?: string;
+}): import("react").JSX.Element;
+export declare function useTheme(): ThemeContextValue;
+export {};

package/dist/theme.css

@@ -0,0 +1,96 @@
+/* Consumer entry: after "@import 'tailwindcss';" import this file.
+   Maps semantic variables into Tailwind namespaces so utilities respond to
+   live [data-theme] switching. @theme inline is REQUIRED: without it, var()
+   resolution binds at declaration scope and theme overrides silently fail. */
+
+@import "tw-animate-css";
+@import "./primitives.css";
+@import "./spacing.css";
+@import "./semantic.css";
+@import "./themes/light.css";
+
+@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
+
+@theme inline {
+  --color-background: var(--color-background);
+  --color-foreground: var(--color-foreground);
+  --color-panel: var(--color-panel);
+  --color-panel-2: var(--color-panel-2);
+  --color-border: var(--color-border);
+  --color-input: var(--color-input);
+  --color-text-2: var(--color-text-2);
+  --color-text-3: var(--color-text-3);
+  --color-brand: var(--color-brand);
+  --color-primary: var(--color-primary);
+  --color-primary-foreground: var(--color-primary-foreground);
+  --color-accent: var(--color-accent);
+  --color-destructive: var(--color-destructive);
+  --color-destructive-foreground: var(--color-destructive-foreground);
+  --color-muted: var(--color-muted);
+  --color-muted-foreground: var(--color-muted-foreground);
+  --color-ring: var(--color-ring);
+  --color-bubble-user: var(--color-bubble-user);
+  --color-bubble-assistant: var(--color-bubble-assistant);
+  --color-code-bg: var(--color-code-bg);
+  --color-add-bg: var(--color-add-bg);
+  --color-del-bg: var(--color-del-bg);
+  --color-status-ok: var(--color-status-ok);
+  --color-status-error: var(--color-status-error);
+  --color-status-warning: var(--color-status-warning);
+  --color-status-running: var(--color-status-running);
+  --color-status-pending: var(--color-status-pending);
+  --color-info: var(--color-info);
+  --color-overlay: var(--color-overlay);
+
+  --font-sans: var(--ui-font-sans);
+  --font-mono: var(--ui-font-mono);
+
+  --spacing-0: var(--space-0);
+  --spacing-1: var(--space-1);
+  --spacing-2: var(--space-2);
+  --spacing-3: var(--space-3);
+  --spacing-4: var(--space-4);
+  --spacing-5: var(--space-5);
+  --spacing-6: var(--space-6);
+  --spacing-8: var(--space-8);
+  --spacing-10: var(--space-10);
+  --spacing-12: var(--space-12);
+  --spacing-16: var(--space-16);
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  --text-xs: var(--text-xs);
+  --text-sm: var(--text-sm);
+  --text-base: var(--text-base);
+  --text-lg: var(--text-lg);
+  --text-xl: var(--text-xl);
+  --text-2xl: var(--text-2xl);
+
+  --leading-tight: var(--leading-tight);
+  --leading-normal: var(--leading-normal);
+  --leading-relaxed: var(--leading-relaxed);
+
+  --font-normal: var(--font-normal);
+  --font-medium: var(--font-medium);
+  --font-semibold: var(--font-semibold);
+  --font-bold: var(--font-bold);
+
+  --shadow-sm: var(--shadow-sm);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-overlay: var(--shadow-overlay);
+
+  --duration-75: var(--duration-75);
+  --duration-100: var(--duration-100);
+  --duration-150: var(--duration-150);
+  --duration-200: var(--duration-200);
+  --duration-300: var(--duration-300);
+  --duration-500: var(--duration-500);
+
+  --ease-in: var(--ease-in);
+  --ease-out: var(--ease-out);
+  --ease-in-out: var(--ease-in-out);
+}

package/dist/themes/light.css

@@ -0,0 +1,55 @@
+/* Light theme — same semantic contract, light values (Catppuccin Latte-leaning). */
+
+@layer theme {
+  [data-theme="light"] {
+    color-scheme: light;
+
+    --color-background: oklch(0.968 0.008 247.9);      /* #eff1f5 */
+    --color-panel: oklch(0.955 0.008 236.8);           /* #eef2f5 */
+    --color-panel-2: oklch(0.92 0.01 240);
+    --color-border: oklch(0.85 0.015 240);
+    --color-input: oklch(0.85 0.015 240);
+    --color-overlay: color-mix(in srgb, oklch(0.47 0.03 264.4) 30%, transparent);
+
+    --color-foreground: oklch(0.47 0.03 264.4);        /* #4c4f69 */
+    --color-text-2: oklch(0.52 0.025 254.7);           /* #5c5f77 */
+    --color-text-3: oklch(0.72 0.02 255);
+
+    --color-brand: oklch(0.65 0.17 40);                /* #fe640b-leaning */
+    --color-primary: oklch(0.59 0.13 149.3);           /* #40a02b */
+    --color-primary-foreground: oklch(0.98 0.005 260);
+    --color-accent: oklch(0.71 0.14 66.4);             /* #df8e1d */
+
+    --color-destructive: oklch(0.57 0.21 17.5);        /* #d20f39 */
+    --color-destructive-foreground: oklch(0.98 0.005 260);
+    --color-muted: oklch(0.92 0.01 240);
+    --color-muted-foreground: oklch(0.52 0.025 254.7);
+    --color-ring: color-mix(in srgb, oklch(0.59 0.13 149.3) 45%, transparent);
+
+    --color-bubble-user: oklch(0.93 0.03 247.9);       /* #e1ecf7 */
+    --color-bubble-assistant: transparent;
+    --color-code-bg: oklch(0.93 0.01 250);
+    --color-add-bg: color-mix(in srgb, oklch(0.59 0.13 149.3) 10%, transparent);
+    --color-del-bg: color-mix(in srgb, oklch(0.57 0.21 17.5) 10%, transparent);
+
+    /* Tool status — dark pastels are illegible on light; these values keep the
+       Catppuccin Latte hues but lower lightness so small text passes WCAG AA
+       (≥4.5:1 vs --color-panel #ebf1f5). */
+    --color-status-ok: oklch(0.51 0.13 149.3);         /* #1e7b3b-leaning */
+    --color-status-error: oklch(0.56 0.21 17.5);       /* #d31e44-leaning */
+    --color-status-warning: oklch(0.54 0.14 66.4);     /* #a35a00-leaning */
+    --color-status-running: oklch(0.55 0.17 40);       /* #bf4306-leaning */
+    --color-status-pending: oklch(0.54 0.14 66.4);     /* #a35a00-leaning */
+
+    /* Informational accent — dark cyan is too light on Latte bg */
+    --color-info: oklch(0.52 0.11 222);                /* #007696-leaning */
+
+    --radius: var(--ui-radius-base);
+
+    /* Shadows */
+    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.06);
+    --shadow-overlay: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.07);
+  }
+}

package/package.json

@@ -0,0 +1,81 @@
+{
+	"name": "@nuvin/ui-design-system",
+	"version": "0.1.0",
+	"type": "module",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/marschhuynh/ui-design-system.git",
+		"directory": "packages/ui"
+	},
+	"main": "./dist/index.cjs",
+	"module": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/index.js",
+			"require": "./dist/index.cjs"
+		},
+		"./theme.css": "./dist/theme.css",
+		"./styles.css": "./dist/styles.css"
+	},
+	"files": ["dist"],
+	"scripts": {
+		"build": "vite build && tsc --emitDeclarationOnly && cp src/tokens/theme.css src/tokens/styles.css src/tokens/primitives.css src/tokens/spacing.css src/tokens/semantic.css dist/ && mkdir -p dist/themes && cp src/tokens/themes/light.css dist/themes/",
+		"storybook": "storybook dev -p 6006",
+		"build-storybook": "storybook build",
+		"test": "vitest run",
+		"test:watch": "vitest",
+		"changeset": "changeset",
+		"changeset:version": "changeset version"
+	},
+	"peerDependencies": {
+		"react": "^18.0.0 || ^19.0.0",
+		"react-dom": "^18.0.0 || ^19.0.0"
+	},
+	"dependencies": {
+		"@radix-ui/react-accordion": "^1.2.20",
+		"@radix-ui/react-checkbox": "^1.3.11",
+		"@radix-ui/react-collapsible": "^1.1.2",
+		"@radix-ui/react-dialog": "^1.1.23",
+		"@radix-ui/react-dropdown-menu": "^2.1.24",
+		"@radix-ui/react-popover": "^1.1.23",
+		"@radix-ui/react-progress": "^1.1.16",
+		"@radix-ui/react-radio-group": "^1.4.7",
+		"@radix-ui/react-scroll-area": "^1.2.10",
+		"@radix-ui/react-select": "^2.3.7",
+		"@radix-ui/react-separator": "^1.1.15",
+		"@radix-ui/react-switch": "^1.3.7",
+		"@radix-ui/react-tabs": "^1.1.21",
+		"@radix-ui/react-toast": "^1.2.23",
+		"@radix-ui/react-tooltip": "^1.2.16",
+		"class-variance-authority": "^0.7.1",
+		"clsx": "^2.1.1",
+		"cmdk": "^1.1.1",
+		"lucide-react": "^1.33.0",
+		"streamdown": "^2.6.0",
+		"tailwind-merge": "^2.6.0",
+		"tw-animate-css": "^1.4.0"
+	},
+	"devDependencies": {
+		"@storybook/addon-a11y": "^10.6.0",
+		"@storybook/addon-docs": "^10.6.0",
+		"@storybook/addon-themes": "^10.6.0",
+		"@storybook/react-vite": "^10.6.0",
+		"@tailwindcss/vite": "^4",
+		"@testing-library/jest-dom": "^6.6.3",
+		"@testing-library/react": "^16.2.0",
+		"@testing-library/user-event": "^14.6.6",
+		"@types/react": "^19.3.0",
+		"@types/react-dom": "^19.3.0",
+		"jsdom": "^25.0.1",
+		"react": "^19.3.0",
+		"react-dom": "^19.3.0",
+		"storybook": "^10.6.0",
+		"tailwindcss": "^4.0.0",
+		"typescript": "^5.7.2",
+		"vite": "^6.0.7",
+		"vite-plugin-dts": "^4.5.0",
+		"vitest": "^2.1.8"
+	}
+}