react-ui-suite 1.0.0 → 1.1.2

package/README.md

@@ -1,71 +1,174 @@
-# react-ui-suite
-
-`react-ui-suite` is a collection of production-ready React components built with Tailwind-friendly class names and ergonomic APIs. The publishable package lives in the `src/` workspace as `react-ui-suite`, while a separate Vite demo app showcases every component with rich previews.
-
-> **ESM-only:** The npm package only publishes ES modules and type declarations under `dist/`. Tools that still require CommonJS entry points must add an extra build step (e.g., `tsup --format cjs`) before consumption.
-
-## Packages
-
-| Folder   | Description                                                                                                               |
-| -------- | ------------------------------------------------------------------------------------------------------------------------- |
-| `.`      | Root workspace published as `@react-ui-suite/root`. It orchestrates tooling/scripts for every workspace but stays private. |
-| `src/`   | Workspace that publishes `react-ui-suite`. `tsup` compiles this folder to `dist/`.                                        |
-| `demos/` | Demo entries that describe each component preview (slug, description, tags, etc.). These files are not published.         |
-| `demo/`  | Standalone Vite gallery that auto-registers every demo entry via `import.meta.glob`. Useful for local development and QA. |
-
-## Installation
-
-```bash
-npm install react-ui-suite
-# or pnpm / yarn
-```
-
-Because the components rely on React, include the peer dependencies in your application:
-
-```
-react@^18
-react-dom@^18
-```
-
-## Usage
-
-```tsx
-import { Badge, Button, Card } from "react-ui-suite";
-
-export function ExampleCard() {
-  return (
-    <Card title="Weekly report">
-      <Badge variant="success">Live</Badge>
-      <p className="mt-3 text-sm text-slate-600">Performance is trending upward for all KPIs.</p>
-      <Button className="mt-4 w-full">View details</Button>
-    </Card>
-  );
-}
-```
-
-Every component (and its related types) is exported from `src/index.ts`, so tree-shaking works out of the box.
-
-## Development
-
-### Build the library workspace
-
-```bash
-npm install          # installs all workspace deps (library + demo)
-npm run build        # builds react-ui-suite via tsup
-npm run test         # executes Vitest for the library (proxied to the src workspace)
-npm run lint         # lints the library source via ESLint (proxied to the src workspace)
-```
-
-`tsup` cleans `src/dist/` automatically and marks `react` / `react-dom` as externals so the published artifacts only contain the suite's code. Linting and tests provide fast feedback before shipping any new component primitives.
-
-### Run the local demo gallery
-
-```bash
-npm run dev          # starts the demo workspace via Vite on http://localhost:5173
-```
-
-The Vite app aliases `react-ui-suite` to `../src`, so you always preview the latest source without publishing. Demo entries live inside `../demos` and are auto-discovered.
-
-## Publishing
-
-`src/package.json` limits the published files to `dist/`, `README.md`, and `LICENSE` so neither the demo app nor the raw source ship to npm. The `prepublishOnly` script automatically runs `build`, `test`, and `lint` so the release payload is always in a healthy state. Once the API begins to stabilize, consider layering in release tooling such as [Changesets](https://github.com/changesets/changesets) or `semantic-release` to track versions/CHANGELOG entries from tagged commits.
+# react-ui-suite
+
+`react-ui-suite` is a collection of production-ready React components geared toward application UIs (forms, lists, dialogs, pickers, etc.).  
+This repository is a small monorepo that contains:
+
+- the **publishable library package** in `src/`
+- a **Vite-powered demo/gallery** in `demo/`
+- shared tooling and configuration at the **root workspace**
+
+> **ESM-only:** The npm package only publishes ES modules and type declarations under `dist/`.  
+> CommonJS consumers (`require("react-ui-suite")`) are **not** supported. Use a modern bundler (Vite, Webpack 5+, Next.js, etc.) or native ESM in Node.
+
+---
+
+## Packages
+
+| Folder | Description |
+| ------ | ----------- |
+| `.`    | Root workspace named `@react-ui-suite/root`. It orchestrates tooling/scripts for every workspace and is **never published** to npm. |
+| `src/` | Workspace that publishes the `react-ui-suite` library. Components live in `src/components/` alongside their `*.demo.tsx` gallery entries, all compiled to `dist/` via `tsup`. |
+| `demo/` | Standalone Vite gallery that auto-registers every component demo (`src/components/**/*.demo.tsx`) via `import.meta.glob`. Useful for local development and QA. |
+
+---
+
+## Installation (for consumers)
+
+Install from npm into any React 19 project:
+
+```bash
+npm install react-ui-suite
+# or
+pnpm add react-ui-suite
+# or
+yarn add react-ui-suite
+```
+
+Peer dependencies (required in the consuming app):
+
+- `react` ^19.2.4
+- `react-dom` ^19.2.4
+
+The library marks `react` and `react-dom` as externals; they must come from the host application.
+
+### Basic usage
+
+```tsx
+import { Button } from "react-ui-suite";
+
+export function Example() {
+  return <Button variant="primary">Save</Button>;
+}
+```
+
+Because the package is ESM-only, make sure your toolchain supports `import` / `export` and ESM-aware bundling.
+
+---
+
+## Development (this repo)
+
+Clone and install from the root (Node 18+ required):
+
+```bash
+git clone https://github.com/nruimveld7/react-ui-suite.git
+cd react-ui-suite
+npm install
+```
+
+### Workspace commands (run from the root)
+
+These scripts are defined in the **root** `package.json` and proxy into the `react-ui-suite` workspace:
+
+```bash
+npm run build        # builds the library (src/) via tsup into src/dist
+npm run test         # runs Vitest for the library workspace
+npm run lint         # lints the library source via ESLint
+npm run format       # formats the entire repo with Prettier
+npm run format:check # checks formatting without writing changes
+npm run dev          # starts the Vite demo gallery (demo/) at http://localhost:5173
+npm run test:visual  # runs Playwright visual tests for the demo gallery
+npm run publish      # publishes the react-ui-suite workspace to npm (see “Publishing” below)
+```
+
+You can also work directly inside the `src/` workspace:
+
+```bash
+cd src
+npm run build
+npm run test
+npm run lint
+npm run format
+```
+
+---
+
+## Library build details
+
+The library workspace (`src/`) uses [`tsup`](https://tsup.egoist.dev/) to build:
+
+- **Entry:** `src/index.ts`
+- **Output:** ESM bundle at `src/dist/index.js` + corresponding `src/dist/index.d.ts`
+- **Target:** `es2019`
+- **ESM-only:** `format: ["esm"]`
+- **Externals:** `react`, `react-dom`
+
+`src/package.json` restricts the published files to:
+
+- `dist/`
+- `README.md`
+- `LICENSE`
+
+so consumers only install the compiled artifacts plus documentation and license.
+
+---
+
+## Demo gallery
+
+The `demo/` workspace is a Vite app that renders a component gallery:
+
+```bash
+npm run dev
+```
+
+This will:
+
+- start Vite on `http://localhost:5173`
+- alias `react-ui-suite` to the local `src/` workspace
+- auto-load demo definitions from `src/components/**/*.demo.tsx` via `import.meta.glob`
+
+Add a `<Component>.demo.tsx` file (for example `src/components/Button/Button.demo.tsx`) beside the component to have it show up automatically in the gallery.
+
+Use this gallery to iterate on new components and verify changes visually.
+
+---
+
+## Publishing (maintainers)
+
+Publishing is always coordinated from the **library workspace** (`src/`), but you typically invoke it via the root script.
+
+### 1. Bump the version in `src/package.json`
+
+Use semantic versioning (`0.1.1`, `0.2.0`, `1.0.0`, etc.).
+
+### 2. From the repo root
+
+```bash
+npm run publish
+```
+
+This runs:
+
+- `npm publish --workspace react-ui-suite --access public`
+
+Inside the `src/` workspace, `prepublishOnly` is configured to run:
+
+```bash
+npm run build && npm run test && npm run lint
+```
+
+So a publish will only succeed if:
+
+- the library builds,
+- the tests pass, and
+- linting is clean.
+
+You can also publish directly from `src/` if needed:
+
+```bash
+cd src
+npm run publish
+```
+
+(but `npm run publish` at the root is the normal flow).
+
+---

package/dist/Alert-AVVBZ6TP.css

@@ -0,0 +1,134 @@
+.rui-alert {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--rui-space-3);
+  padding: var(--rui-space-3) var(--rui-space-4);
+  border-radius: var(--rui-radius-xl);
+  font-size: 0.875rem;
+  line-height: 1.4;
+  border: 1px solid var(--rui-alert-ring, var(--rui-color-border));
+  background-color: var(--rui-alert-surface, var(--rui-color-surface));
+  color: var(--rui-alert-text, var(--rui-color-text-strong));
+  box-shadow: var(--rui-shadow-button);
+}
+
+.rui-alert__icon {
+  font-size: 1.1rem;
+  margin-top: 2px;
+}
+
+.rui-alert__content {
+  flex: 1;
+  min-width: 0;
+}
+
+.rui-alert__title {
+  margin: 0;
+  font-size: 0.95rem;
+  font-weight: 600;
+}
+
+.rui-alert__description {
+  margin: 0.25rem 0 0;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  opacity: 0.9;
+}
+
+.rui-alert__dismiss {
+  border: none;
+  background: transparent;
+  border-radius: 999px;
+  padding: 0;
+  width: 1.75rem;
+  height: 1.75rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: currentColor;
+  opacity: 0.7;
+  cursor: pointer;
+  line-height: 1;
+}
+
+.rui-alert__dismiss:hover {
+  opacity: 1;
+}
+
+.rui-alert__dismiss:focus-visible {
+  outline: 2px solid var(--rui-color-focus-ring);
+  outline-offset: 2px;
+}
+
+.rui-alert__accent {
+  position: absolute;
+  top: 0.5rem;
+  bottom: 0.5rem;
+  left: 0.5rem;
+  width: 0.25rem;
+  border-radius: 999px;
+  background-color: var(--rui-alert-accent, var(--rui-color-border-strong));
+}
+
+.rui-alert--info {
+  --rui-alert-surface: #f0f9ff;
+  --rui-alert-text: #0c4a6e;
+  --rui-alert-ring: #e0f2fe;
+  --rui-alert-accent: #38bdf8;
+}
+
+[data-theme="dark"] .rui-alert--info {
+  --rui-alert-surface: rgba(14, 165, 233, 0.12);
+  --rui-alert-text: #e0f2fe;
+  --rui-alert-ring: rgba(14, 165, 233, 0.35);
+  --rui-alert-accent: #38bdf8;
+}
+
+.rui-alert--success {
+  --rui-alert-surface: #ecfdf5;
+  --rui-alert-text: #064e3b;
+  --rui-alert-ring: #d1fae5;
+  --rui-alert-accent: #34d399;
+}
+
+[data-theme="dark"] .rui-alert--success {
+  --rui-alert-surface: rgba(16, 185, 129, 0.12);
+  --rui-alert-text: #d1fae5;
+  --rui-alert-ring: rgba(16, 185, 129, 0.35);
+  --rui-alert-accent: #10b981;
+}
+
+.rui-alert--warning {
+  --rui-alert-surface: #fffbeb;
+  --rui-alert-text: #78350f;
+  --rui-alert-ring: #fef3c7;
+  --rui-alert-accent: #fbbf24;
+}
+
+[data-theme="dark"] .rui-alert--warning {
+  --rui-alert-surface: rgba(251, 191, 36, 0.12);
+  --rui-alert-text: #fde68a;
+  --rui-alert-ring: rgba(251, 191, 36, 0.4);
+  --rui-alert-accent: #fbbf24;
+}
+
+.rui-alert--danger {
+  --rui-alert-surface: #fff1f2;
+  --rui-alert-text: #881337;
+  --rui-alert-ring: #ffe4e6;
+  --rui-alert-accent: #fb7185;
+}
+
+[data-theme="dark"] .rui-alert--danger {
+  --rui-alert-surface: rgba(244, 63, 94, 0.12);
+  --rui-alert-text: #fecdd3;
+  --rui-alert-ring: rgba(244, 63, 94, 0.4);
+  --rui-alert-accent: #f43f5e;
+}
+
+

package/dist/Badge-FPJ2X7KC.css

@@ -0,0 +1,80 @@
+.rui-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rui-space-1);
+  padding: 0.25rem 0.75rem;
+  border-radius: 999px;
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  line-height: 1.1;
+  border: 1px solid var(--rui-badge-ring, transparent);
+  background-color: var(--rui-badge-surface, var(--rui-color-surface));
+  color: var(--rui-badge-text, var(--rui-color-text-strong));
+}
+
+.rui-badge > span[aria-hidden="true"] {
+  display: inline-flex;
+  align-items: center;
+}
+
+.rui-badge--neutral {
+  --rui-badge-surface: #f1f5f9;
+  --rui-badge-text: #334155;
+  --rui-badge-ring: #e2e8f0;
+}
+
+[data-theme="dark"] .rui-badge--neutral {
+  --rui-badge-surface: rgba(24, 24, 27, 0.6);
+  --rui-badge-text: #f4f4f5;
+  --rui-badge-ring: rgba(63, 63, 70, 0.6);
+}
+
+.rui-badge--info {
+  --rui-badge-surface: #f0f9ff;
+  --rui-badge-text: #0369a1;
+  --rui-badge-ring: #bae6fd;
+}
+
+[data-theme="dark"] .rui-badge--info {
+  --rui-badge-surface: rgba(14, 165, 233, 0.12);
+  --rui-badge-text: #bae6fd;
+  --rui-badge-ring: rgba(14, 165, 233, 0.35);
+}
+
+.rui-badge--success {
+  --rui-badge-surface: #ecfdf5;
+  --rui-badge-text: #047857;
+  --rui-badge-ring: #a7f3d0;
+}
+
+[data-theme="dark"] .rui-badge--success {
+  --rui-badge-surface: rgba(16, 185, 129, 0.12);
+  --rui-badge-text: #a7f3d0;
+  --rui-badge-ring: rgba(16, 185, 129, 0.35);
+}
+
+.rui-badge--warning {
+  --rui-badge-surface: #fffbeb;
+  --rui-badge-text: #92400e;
+  --rui-badge-ring: #fde68a;
+}
+
+[data-theme="dark"] .rui-badge--warning {
+  --rui-badge-surface: rgba(251, 191, 36, 0.12);
+  --rui-badge-text: #fde68a;
+  --rui-badge-ring: rgba(251, 191, 36, 0.35);
+}
+
+.rui-badge--danger {
+  --rui-badge-surface: #fff1f2;
+  --rui-badge-text: #be123c;
+  --rui-badge-ring: #fecdd3;
+}
+
+[data-theme="dark"] .rui-badge--danger {
+  --rui-badge-surface: rgba(244, 63, 94, 0.12);
+  --rui-badge-text: #fecdd3;
+  --rui-badge-ring: rgba(244, 63, 94, 0.4);
+}

package/dist/Button-S5BQ425L.css

@@ -0,0 +1,49 @@
+.rui-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--rui-space-2);
+  padding-inline: var(--rui-space-4);
+  padding-block: var(--rui-space-2);
+  border-radius: var(--rui-radius-xl);
+  border: 1px solid var(--rui-color-border);
+  font-weight: 600;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  box-shadow: var(--rui-shadow-button);
+  background-color: transparent;
+  cursor: pointer;
+  transition:
+    border-color 150ms ease,
+    background-color 150ms ease,
+    color 150ms ease,
+    box-shadow 150ms ease;
+}
+
+.rui-button:not(:disabled):hover {
+  border-color: var(--rui-color-border-strong);
+  box-shadow: var(--rui-shadow-button), 0 0 0 1px var(--rui-color-border-strong);
+}
+
+.rui-button:focus-visible {
+  outline: none;
+  border-color: var(--rui-color-focus-ring);
+  box-shadow: var(--rui-shadow-button), 0 0 0 2px var(--rui-color-focus-ring);
+}
+
+.rui-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.rui-button--bg-default {
+  background-color: var(--rui-color-surface);
+}
+
+.rui-button--bg-default:not(:disabled):hover {
+  background-color: var(--rui-color-surface-muted);
+}
+
+.rui-button--text-default {
+  color: var(--rui-color-text-strong);
+}

package/dist/Card-SS7L6RAU.css

@@ -0,0 +1,82 @@
+.rui-card {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  border-radius: 1.75rem;
+  border: 1px solid var(--rui-color-border);
+  background-color: var(--rui-color-surface);
+  padding: 1.25rem;
+  box-shadow:
+    0 10px 15px -3px rgb(15 23 42 / 0.12),
+    0 4px 6px -4px rgb(15 23 42 / 0.12);
+}
+
+[data-theme="dark"] .rui-card {
+  box-shadow: none;
+}
+
+.rui-card--muted {
+  background-color: var(--rui-color-surface-muted);
+}
+
+.rui-card__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--rui-space-3);
+  min-height: 1.25rem;
+}
+
+.rui-card__eyebrow {
+  margin: 0;
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.2em;
+  color: var(--rui-color-text-muted);
+}
+
+.rui-card__eyebrow--placeholder {
+  visibility: hidden;
+}
+
+.rui-card__actions {
+  font-size: 0.875rem;
+  color: var(--rui-color-text-muted);
+}
+
+.rui-card__title {
+  margin: 0;
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--rui-color-text-strong);
+}
+
+.rui-card__title--offset {
+  margin-top: var(--rui-space-3);
+}
+
+.rui-card__body {
+  margin-top: var(--rui-space-2);
+  flex: 1;
+  font-size: 0.95rem;
+  line-height: 1.5;
+  color: var(--rui-color-text-muted);
+}
+
+.rui-card__footer {
+  margin-top: var(--rui-space-2);
+  padding-top: var(--rui-space-2);
+  border-top: 1px solid var(--rui-color-border);
+  font-size: 0.8rem;
+  color: var(--rui-color-text-muted);
+}
+
+.rui-card__header,
+.rui-card__eyebrow,
+.rui-card__actions,
+.rui-card__title,
+.rui-card__body,
+.rui-card__footer {
+  min-width: 0;
+}

package/dist/Checkbox-DH24P7XS.css

@@ -0,0 +1,113 @@
+.rui-checkbox {
+  display: flex;
+  align-items: center;
+  gap: var(--rui-space-3);
+  padding: 0.5rem 0.75rem;
+  border-radius: 1rem;
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: background-color 150ms ease, border-color 150ms ease, opacity 150ms ease;
+}
+
+.rui-checkbox:not(.rui-checkbox--disabled):hover {
+  background-color: var(--rui-color-surface-muted);
+}
+
+.rui-checkbox--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.rui-checkbox__control {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.rui-checkbox__input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+  width: 0;
+  height: 0;
+}
+
+.rui-checkbox__box {
+  display: grid;
+  place-items: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 0.4rem;
+  border: 1px solid var(--rui-checkbox-box-border, var(--rui-color-border));
+  background-color: var(--rui-checkbox-box-bg, var(--rui-color-surface));
+  color: var(--rui-checkbox-box-color, var(--rui-color-text-muted));
+  box-shadow: var(--rui-checkbox-box-shadow, none);
+  font-size: 0.75rem;
+  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
+}
+
+[data-theme="dark"] .rui-checkbox__box {
+  box-shadow: var(--rui-checkbox-box-shadow, none);
+}
+
+.rui-checkbox__box--checked {
+  border-color: var(--rui-checkbox-box-border-checked, var(--rui-color-border-strong));
+  background-color: var(--rui-checkbox-box-bg-checked, var(--rui-color-surface-muted));
+  color: var(--rui-checkbox-box-color-checked, var(--rui-color-text-strong));
+  box-shadow: var(
+    --rui-checkbox-box-shadow-checked,
+    0 0 0 1px rgba(148, 163, 184, 0.45)
+  );
+}
+
+[data-theme="dark"] .rui-checkbox__box--checked {
+  box-shadow: var(
+    --rui-checkbox-box-shadow-checked,
+    0 0 0 1px rgba(113, 113, 122, 0.45)
+  );
+}
+
+.rui-checkbox__box--indeterminate {
+  border-color: var(--rui-checkbox-box-border-checked, var(--rui-color-border-strong));
+}
+
+.rui-checkbox__input:focus-visible + .rui-checkbox__box {
+  outline: 2px solid var(--rui-color-focus-ring);
+  outline-offset: 2px;
+}
+
+.rui-checkbox__check {
+  width: 1rem;
+  height: 1rem;
+}
+
+.rui-checkbox__dash {
+  width: 0.6rem;
+  height: 2px;
+  border-radius: 999px;
+  background-color: currentColor;
+}
+
+.rui-checkbox__text {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  gap: 0.1rem;
+}
+
+.rui-checkbox__label {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--rui-color-text-strong);
+}
+
+.rui-checkbox__description {
+  font-size: 0.8rem;
+  color: var(--rui-color-text-muted);
+}
+
+.rui-checkbox__text {
+  min-width: 0;
+}