@cosxai/ui 1.0.0-alpha.0 → 1.0.0-alpha.2

package/CHANGELOG.md

@@ -1,3 +1,45 @@
+## 1.0.0-alpha.2 (2026-09-29)
+
+MetaRoom product patterns (spec P0), checked light / ink × en / zh.
+
+- Surfaces: ActionBar (pages register actions; idle / selection / mode,
+  Esc steps back; folds by group and past six; responsive, fold handle
+  with status dot, drag + remembered position), Menu, CommandPalette
+  (async sources, no "No results" until all return), SidePanel (one
+  right-hand slot), Dialog sizes 800 / 1120, ConfirmDialog (type to
+  confirm), PromptDialog, StepUpDialog.
+- Data display: useSelection, FileCard, FileList/FileRow, ListToolbar,
+  VirtualList + InfiniteLoader, FolderTree (WAI-ARIA tree, lazy,
+  reveal, partial ticks), Breadcrumb, PageHeader, Steps, ActivityTimeline.
+- Inputs: SearchField, CopyField, SegmentedControl, ChoiceCards,
+  DateInput, FuzzyDateInput, CodeInput, AsyncSelect, RecipientsInput,
+  MentionInput.
+- Upload and status: Progress, StageProgress, Dropzone, WindowDrop,
+  UploadCheck, UploadList, SyncStatus, PulseDot, Skeleton, PageState.
+- Button: disabled sinks into the well with grey text (was opacity);
+  busy keeps its look. Dialog returns focus to whatever opened it.
+- 144 tests (behaviour + axe). Test files no longer ship in the package.
+
+## 1.0.0-alpha.1 (2026-09-29)
+
+All 22 COSX Design System 3.0 primitives, checked against their
+design.cosx.co pages in light / ink × English / Chinese.
+
+- Core: Button (six types, grounds, 32/38/44, shortcut and count,
+  disabled-with-reason, busy/done in place + `useButtonAction`),
+  IconButton, Badge (shape carries urgency; compact dot keeps the
+  wording), Tag, Card, Figure, Marker, MetaLabel, Logo, Icon (Lucide),
+  Spinner, ThemeProvider (system / light / ink).
+- Forms: Field (label, hint, error, prefix/suffix, read-only), Input,
+  Textarea, Select (portal, auto placement, keyboard, groups, disabled
+  rows, meta, filter above 8), Checkbox (indeterminate), RadioGroup, Switch.
+- Tabs (underline, pills), Dialog, Toast (`toast()` + `<Toaster>`),
+  Tooltip, Table (sortable, washes for attention/overdue, cards on phones).
+- `--brand-field` / `--brand-mark` for workspace brands; the 3.0 ink
+  marker rule for `data-mode="ink"`; an `ink:` Tailwind variant.
+- 65 tests (behaviour + axe). Spec/source differences and what was
+  built: docs/workdocs/2026-09-29_feature-ui-1.0.
+
 ## 1.0.0-alpha.0 (2026-09-29)
 
 **A new system — breaking for every 0.x consumer.** 0.x continues on the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosxai/ui",
-  "version": "1.0.0-alpha.0",
+  "version": "1.0.0-alpha.2",
   "description": "COSX Design System 3.0 — tokens, Tailwind v4 theme and React components",
   "license": "UNLICENSED",
   "type": "module",
@@ -15,6 +15,7 @@
   "files": [
     "src",
     "!src/**/*.test.ts",
+    "!src/**/*.test.tsx",
     "README.md",
     "CHANGELOG.md",
     "NOTICE"
@@ -31,7 +32,8 @@
   "scripts": {
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
-    "check:css": "tailwindcss -i test/fixture.css -o test/out.css"
+    "check:css": "tailwindcss -i test/fixture.css -o test/out.css",
+    "playground": "vite --config playground/vite.config.ts"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -40,12 +42,23 @@
   },
   "devDependencies": {
     "@tailwindcss/cli": "^4",
+    "@tailwindcss/vite": "^4.3.3",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.7",
     "@types/node": "^26.6.3",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "axe-core": "^4.13.0",
+    "jsdom": "^30.1.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "tailwindcss": "^4",
     "typescript": "^5.6.0",
-    "vitest": "^3.2.0"
+    "vite": "^6.0.0",
+    "vitest": "^3.2.0",
+    "vitest-axe": "^0.1.0"
   },
   "sideEffects": [
     "**/*.css"
@@ -53,7 +66,23 @@
   "dependencies": {
     "@fontsource-variable/geist": "^5.3.0",
     "@fontsource-variable/noto-sans-sc": "^5.3.0",
+    "@radix-ui/react-checkbox": "^1.3.11",
+    "@radix-ui/react-dialog": "^1.1.23",
+    "@radix-ui/react-dropdown-menu": "^2.1.24",
+    "@radix-ui/react-label": "^2.1.15",
+    "@radix-ui/react-popover": "^1.1.23",
+    "@radix-ui/react-radio-group": "^1.4.7",
+    "@radix-ui/react-slot": "^1.3.3",
+    "@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",
+    "@tanstack/react-virtual": "^3.14.13",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "lucide-react": "^1.48.0",
+    "react-day-picker": "^10.0.1",
     "tailwind-merge": "^3.3.1"
   },
   "peerDependenciesMeta": {

package/src/brand.css

@@ -0,0 +1,13 @@
+/* @cosxai/ui — workspace brand injection (MetaRoom spec §01).
+ *
+ * A customer's colour replaces the COSX yellow through two variables;
+ * everything else stays ink, so any colour keeps text readable:
+ *   --brand-field  large areas: selected nav and tabs, section grounds
+ *   --brand-mark   small marks: dots, progress, highlights, attention fills
+ * Ink (text, primary button, icons) and --status-error are not injectable.
+ * Default: the COSX yellow. A workspace sets both on <html>.
+ */
+:root {
+  --brand-field: var(--yellow);
+  --brand-mark: var(--yellow-accent);
+}