@rfdtech/components 2.0.0 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/README.md +108 -50
  2. package/dist/components/table/Table.d.ts.map +1 -1
  3. package/dist/index.cjs +1 -1
  4. package/dist/index.css +1 -1
  5. package/dist/index.js +10 -5
  6. package/dist/mcp/generated/components.json +13 -5
  7. package/dist/mcp/generated/index.meta.json +196 -196
  8. package/dist/mcp/generated/rules.json +1 -1
  9. package/dist/mcp/generated/search.json +9 -1
  10. package/dist/mcp/generated/tokens.json +1 -1
  11. package/dist/next.cjs +1 -1
  12. package/dist/next.css +1 -1
  13. package/dist/next.js +10 -5
  14. package/dist/types/table.d.ts +2 -0
  15. package/dist/types/table.d.ts.map +1 -1
  16. package/package.json +1 -1
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # Clet Components
2
2
 
3
- Shared React component library for Clet projects. The `--gsl-*` CSS tokens, `.gsl-*` class names, and the `@rfdtech/components` package name are kept unchanged for backward compatibility; every color token also has an equivalent `--clet-*` alias (see [Customize tokens](#7-customize-tokens)).
3
+ Shared React component library for Clet projects. CSS tokens and class names use the `--clet-*`/`.clet-*` naming (e.g. `--clet-primary`, `.clet-sidebar`); the original `--gsl-*`/`.gsl-*` spelling is kept as a permanent, unchanged alias for backward compatibility, and the `@rfdtech/components` package name is unaffected (see [Customize tokens](#7-customize-tokens)).
4
4
 
5
5
  Requires React 18+ and a bundler that processes CSS (Vite, Webpack, etc.).
6
6
 
@@ -38,11 +38,11 @@ import { ThemeProvider } from "@rfdtech/components";
38
38
  </ThemeProvider>
39
39
  ```
40
40
 
41
- Supports `"light"`, `"dark"`, and `"system"` (follows `prefers-color-scheme`). Use `useTheme()` to read or change the active theme at runtime. Design tokens apply to `.gsl-theme`, `document.documentElement`, and all components (including portaled modals and popovers).
41
+ Supports `"light"`, `"dark"`, and `"system"` (follows `prefers-color-scheme`). Use `useTheme()` to read or change the active theme at runtime. Design tokens apply to `.clet-theme` (the legacy `.gsl-theme` class is also present on the same element), `document.documentElement`, and all components (including portaled modals and popovers).
42
42
 
43
43
  ### 4. Tailwind v4 integration
44
44
 
45
- If your project uses Tailwind v4, all `--gsl-*` design tokens are automatically available as utility classes. Import `style.css` after `tailwindcss` in your CSS entry:
45
+ If your project uses Tailwind v4, all `--clet-*` design tokens are automatically available as utility classes. Import `style.css` after `tailwindcss` in your CSS entry:
46
46
 
47
47
  ```css
48
48
  /* app/src/index.css */
@@ -54,23 +54,25 @@ The `@theme` block ships inside `style.css`. The consumer's Tailwind build proce
54
54
 
55
55
  | Utility | Resolves to |
56
56
  | --------- | ------------- |
57
- | `bg-primary` / `text-primary` | `var(--gsl-primary)` |
58
- | `bg-primary-foreground` / `text-primary-foreground` | `var(--gsl-on-primary)` |
59
- | `bg-background` / `text-foreground` | `var(--gsl-main-bg)` / `var(--gsl-text)` |
60
- | `bg-secondary` / `text-secondary-foreground` | `var(--gsl-surface-dark)` / `var(--gsl-text-secondary)` |
61
- | `bg-muted` / `text-muted-foreground` | `var(--gsl-surface-subtle)` / `var(--gsl-text-secondary)` |
62
- | `bg-accent` / `text-accent-foreground` | `var(--gsl-hover)` / `var(--gsl-text)` |
63
- | `bg-destructive` / `text-destructive-foreground` | `var(--gsl-error)` / `var(--gsl-error-text)` |
64
- | `bg-card` / `text-card-foreground` | `var(--gsl-bg)` / `var(--gsl-text)` |
65
- | `bg-popover` / `text-popover-foreground` | `var(--gsl-bg)` / `var(--gsl-text)` |
66
- | `border` / `input` / `ring` | `var(--gsl-border)` / `var(--gsl-border-strong)` / `var(--gsl-focus)` |
67
- | `rounded-lg` | `var(--gsl-radius-base)` |
68
- | `shadow-sm` / `shadow-md` / `shadow-lg` | `var(--gsl-shadow-sm)` / etc. |
69
- | `font-sans` | `var(--gsl-font)` |
70
-
71
- **Dark mode** supports both conventions: `<html class="dark">` (Tailwind default) and `<html data-gsl-theme="dark">`.
72
-
73
- **Non-Tailwind consumers** are unaffected. Browsers silently ignore `@theme` as an unknown at-rule. All `--gsl-*` tokens continue to work as CSS custom properties.
57
+ | `bg-primary` / `text-primary` | `var(--clet-primary)` |
58
+ | `bg-primary-foreground` / `text-primary-foreground` | `var(--clet-on-primary)` |
59
+ | `bg-background` / `text-foreground` | `var(--clet-main-bg)` / `var(--clet-text)` |
60
+ | `bg-secondary` / `text-secondary-foreground` | `var(--clet-surface-dark)` / `var(--clet-text-secondary)` |
61
+ | `bg-muted` / `text-muted-foreground` | `var(--clet-surface-subtle)` / `var(--clet-text-secondary)` |
62
+ | `bg-accent` / `text-accent-foreground` | `var(--clet-hover)` / `var(--clet-text)` |
63
+ | `bg-destructive` / `text-destructive-foreground` | `var(--clet-error)` / `var(--clet-error-text)` |
64
+ | `bg-card` / `text-card-foreground` | `var(--clet-bg)` / `var(--clet-text)` |
65
+ | `bg-popover` / `text-popover-foreground` | `var(--clet-bg)` / `var(--clet-text)` |
66
+ | `border` / `input` / `ring` | `var(--clet-border)` / `var(--clet-border-strong)` / `var(--clet-focus)` |
67
+ | `rounded-lg` | `var(--clet-radius-base)` |
68
+ | `shadow-sm` / `shadow-md` / `shadow-lg` | `var(--clet-shadow-sm)` / etc. |
69
+ | `font-sans` | `var(--clet-font)` |
70
+
71
+ Every entry above is actually generated as `var(--gsl-<name>, var(--clet-<name>))` — overriding either the `--clet-*` name (preferred) or the legacy `--gsl-*` name works identically; `--gsl-*` wins if both are set.
72
+
73
+ **Dark mode** supports both conventions: `<html class="dark">` (Tailwind default) and `<html data-clet-theme="dark">` (`data-gsl-theme="dark"` is also written to the same element and matches equally).
74
+
75
+ **Non-Tailwind consumers** are unaffected. Browsers silently ignore `@theme` as an unknown at-rule. All `--clet-*` tokens (and their legacy `--gsl-*` aliases) continue to work as CSS custom properties.
74
76
 
75
77
  ### 6. AI-assisted development (automatic)
76
78
 
@@ -111,14 +113,70 @@ See the [RouterAdapter](/docs/router-adapter) docs page for full setup.
111
113
 
112
114
  ### 7. Customize tokens
113
115
 
114
- Components read `--gsl-*` CSS variables. Every color token also has a
115
- `--clet-*` alias with the exact same value — **prefer `--clet-*` in new
116
- override code**; `--gsl-*` keeps working unchanged for existing overrides
117
- (each `--gsl-*` color token is now defined as `var(--clet-*)`, so overriding
118
- either name works — `--clet-*` is just the newer, preferred spelling).
119
- Non-color tokens (radius, shadow, font, spacing) only have a `--gsl-*` name;
120
- there is no `--clet-*` equivalent for those. Override any token by
121
- declaring a new value on the same selectors the library uses.
116
+ Components read `--clet-*` CSS variables — every token, color and
117
+ non-color alike (radius, shadow, font, spacing, z-index included), is
118
+ declared under the `--clet-*` name. The original `--gsl-*` spelling
119
+ also still works unchanged for existing overrides (every internal
120
+ `var(--clet-*)` read resolves as `var(--gsl-*, var(--clet-*))`, so
121
+ overriding either name works identically — `--gsl-*` wins if both are
122
+ set). **Prefer `--clet-*` in new override code**; `--gsl-*` is a
123
+ permanent compatibility alias, not a deprecated one.
124
+
125
+ **Use the `cletTheme()` runtime helper (recommended)** — no separate
126
+ CSS file, no build config. Import it from the package root alongside
127
+ the library CSS, and call it once at startup:
128
+
129
+ ```ts title="src/main.tsx"
130
+ import "@rfdtech/components/style.css";
131
+ import { cletTheme } from "@rfdtech/components";
132
+
133
+ cletTheme({
134
+ all: {
135
+ primary: "#1d4ed8", // used by both modes unless a mode below overrides it
136
+ primaryLight: "#eff6ff",
137
+ focus: "#1d4ed8",
138
+ onPrimary: "#ffffff",
139
+ },
140
+ });
141
+ ```
142
+
143
+ Keys are the **camelCase** form of the `--clet-*` token name
144
+ (`--clet-primary` → `primary`, `--clet-primary-light` → `primaryLight`),
145
+ and `all`/`light`/`dark` are all optional — a token set in `light` or
146
+ `dark` wins over the same token in `all`. `cletTheme()` is fully typed
147
+ against the library's real token set, so a misspelled or wrong-cased
148
+ key (or a value shaped wrong for its token, e.g. a non-color string for
149
+ `primary`) is a compile error, not a silent no-op. Calling it again
150
+ (e.g. on hot reload) replaces the previous overrides instead of
151
+ stacking a new `<style>` tag.
152
+
153
+ To keep every project's override in one predictable place, put the
154
+ `cletTheme(...)` call in its own **`src/clet.theme.ts`** file and
155
+ import it for its side effect, right after the library CSS:
156
+
157
+ ```ts title="src/clet.theme.ts"
158
+ import { cletTheme } from "@rfdtech/components";
159
+
160
+ cletTheme({
161
+ all: { primary: "#1d4ed8" },
162
+ dark: { primary: "#ef4444", primaryLight: "#3f1515" },
163
+ });
164
+ ```
165
+
166
+ ```ts title="src/main.tsx"
167
+ import "@rfdtech/components/style.css";
168
+ import "./clet.theme"; // side-effect import — runs cletTheme() once at startup
169
+ import { ThemeProvider } from "@rfdtech/components";
170
+ ```
171
+
172
+ See the [Theme](/docs/theme#clettheme-recommended) docs page for
173
+ component-scoped overrides, the full token/value type reference, and
174
+ type-safety details.
175
+
176
+ **Alternative: plain CSS, no JS.** Override any token by declaring a
177
+ new value on the same selectors the library uses — useful if you'd
178
+ rather not add a runtime call, or need the override present before any
179
+ JS runs.
122
180
 
123
181
  **Step 1 — Import the library CSS** so its defaults are loaded:
124
182
 
@@ -141,11 +199,11 @@ these selectors:
141
199
  | Selector | When it matches |
142
200
  |----------|-----------------|
143
201
  | `:root` | No theme attribute is set (no `ThemeProvider` mounted) |
144
- | `:root[data-gsl-theme="light"]` | Light mode on `<html>` — `ThemeProvider` writes the attribute here |
145
- | `:root[data-gsl-theme="dark"]` | Dark mode on `<html>` |
146
- | `.gsl-theme` | A consumer wrapper `<div class="gsl-theme">` |
147
- | `.gsl-theme[data-gsl-theme="light"]` | Wrapper + light attribute |
148
- | `.gsl-theme[data-gsl-theme="dark"]` | Wrapper + dark attribute |
202
+ | `:root[data-clet-theme="light"]` | Light mode on `<html>` — `ThemeProvider` writes the attribute here (also writes the legacy `data-gsl-theme="light"`, which matches identically) |
203
+ | `:root[data-clet-theme="dark"]` | Dark mode on `<html>` |
204
+ | `.clet-theme` | A consumer wrapper `<div class="clet-theme">` (the legacy `.gsl-theme` class is also present on the same element) |
205
+ | `.clet-theme[data-clet-theme="light"]` | Wrapper + light attribute |
206
+ | `.clet-theme[data-clet-theme="dark"]` | Wrapper + dark attribute |
149
207
 
150
208
  A bare `:root { ... }` only matches the first row, so the library's
151
209
  default keeps winning on rows 2–6 once `ThemeProvider` mounts. To
@@ -154,10 +212,10 @@ values (don't chain `var(--something)` — just write the color):
154
212
 
155
213
  ```css title="src/styles/theme.css"
156
214
  :root,
157
- :root[data-gsl-theme="light"],
158
- .gsl-theme[data-gsl-theme="light"],
159
- :root[data-gsl-theme="dark"],
160
- .gsl-theme[data-gsl-theme="dark"] {
215
+ :root[data-clet-theme="light"],
216
+ .clet-theme[data-clet-theme="light"],
217
+ :root[data-clet-theme="dark"],
218
+ .clet-theme[data-clet-theme="dark"] {
161
219
  --clet-primary: #1d4ed8;
162
220
  --clet-primary-light: #eff6ff;
163
221
  --clet-focus: #1d4ed8;
@@ -191,7 +249,7 @@ name for the same value:
191
249
  | `success` | `#16a34a` | Success states |
192
250
  | `warning` | `#eab308` | Warnings |
193
251
 
194
- `BulkImportModal` also accepts legacy aliases (`--gsl-bulk-import-primary`, etc.) that map to the shared tokens.
252
+ `BulkImportModal` also has its own component-scoped tokens (`--clet-bulk-import-primary`, etc., falling back to the shared tokens above when unset) — the legacy `--gsl-bulk-import-primary` spelling also still works.
195
253
 
196
254
  See the [Theme](/docs/theme) docs page for the full token reference (radius, shadows, z-index, fonts) and controlled mode.
197
255
 
@@ -482,24 +540,24 @@ Also exported: `useBulkImportFlow`, step components, and utilities (`parseSpread
482
540
 
483
541
  ### Theming
484
542
 
485
- The modal uses a **near full-viewport** layout with a compulsory gutter on all sides (24px desktop, 16px mobile), enforced by overlay padding. Override shared tokens on `.gsl-bulk-import` via the `className` prop (see [Shared theming](#shared-theming)):
543
+ The modal uses a **near full-viewport** layout with a compulsory gutter on all sides (24px desktop, 16px mobile), enforced by overlay padding. Override shared tokens on `.clet-bulk-import` (the legacy `.gsl-bulk-import` class is also present on the same element) via the `className` prop (see [Shared theming](#shared-theming)):
486
544
 
487
545
  ```css
488
546
  .my-import {
489
- --gsl-primary: #dc2626;
490
- --gsl-primary-light: #fef2f2;
491
- --gsl-success: #16a34a;
492
- --gsl-error-bg: #fef2f2;
547
+ --clet-primary: #dc2626;
548
+ --clet-primary-light: #fef2f2;
549
+ --clet-success: #16a34a;
550
+ --clet-error-bg: #fef2f2;
493
551
  }
494
552
  ```
495
553
 
496
- Legacy aliases (`--gsl-bulk-import-primary`, `--gsl-bulk-import-primary-light`, etc.) still work and map to the shared tokens.
554
+ The component-scoped `--clet-bulk-import-primary`, `--clet-bulk-import-primary-light`, etc. (and their legacy `--gsl-bulk-import-primary` spellings) still work too, and fall back to the shared tokens above when unset.
497
555
 
498
- To change the gutter size, override `--gsl-bulk-import-gutter` on `.gsl-bulk-import__overlay` in your app CSS (do not override modal width/height — the dialog always fills the padded overlay area):
556
+ To change the gutter size, override `--clet-bulk-import-gutter` on `.clet-bulk-import__overlay` in your app CSS (do not override modal width/height — the dialog always fills the padded overlay area):
499
557
 
500
558
  ```css
501
- .gsl-bulk-import__overlay {
502
- --gsl-bulk-import-gutter: 32px;
559
+ .clet-bulk-import__overlay {
560
+ --clet-bulk-import-gutter: 32px;
503
561
  }
504
562
  ```
505
563
 
@@ -532,7 +590,7 @@ Props: `variant`, `size`, `loading`, `loadingLabel`, `classNames`, and standard
532
590
 
533
591
  ## Card
534
592
 
535
- Surface card wrapper with optional header and design tokens for padding and background. Uses `--gsl-surface-card` for background and `--gsl-card-padding` for inner spacing. See the [Card](/docs/card) docs page for props and exported types.
593
+ Surface card wrapper with optional header and design tokens for padding and background. Uses `--clet-surface-card` for background and `--clet-card-padding` for inner spacing. See the [Card](/docs/card) docs page for props and exported types.
536
594
 
537
595
  ```tsx
538
596
  import { Card } from "@rfdtech/components";
@@ -879,7 +937,7 @@ Props: `label`, `value`, `icon`, `description`, `trend`, `trendValue`, `variant`
879
937
 
880
938
  ## Modal
881
939
 
882
- Centered modal with four size variants (`sm`, `md`, `lg`, `xl`), popover-style border, and optional close-prevention. Size tokens are independently customizable via `--gsl-modal-max-width-*`. See the [Modal](/docs/modal) docs page for props and exported types.
940
+ Centered modal with four size variants (`sm`, `md`, `lg`, `xl`), popover-style border, and optional close-prevention. Size tokens are independently customizable via `--clet-modal-max-width-*`. See the [Modal](/docs/modal) docs page for props and exported types.
883
941
 
884
942
  ```tsx
885
943
  import {
@@ -1198,7 +1256,7 @@ const [step, setStep] = useState(3);
1198
1256
  </Stepper>
1199
1257
  ```
1200
1258
 
1201
- Exports: `Stepper`, `Step`, `StepLabel`. Also available as `Stepper.Step`, `Stepper.StepLabel` for compound-style imports. Props: `Stepper` — `value`, `clickable`, `onValueChange`, `classNames`, `className`, `children`. `Step` — `value`, `disabled`, `classNames`, `className`, `children`. `StepLabel` — `classNames`, `className`, `children`. Exported types: `StepperProps`, `StepProps`, `StepLabelProps`, `StepperClassNames`, `StepClassNames`, `StepLabelClassNames`, `StepperContextValue`, `StepState`, `StepInternalProps`. Retheme via `--gsl-stepper-accent` (defaults to `--gsl-primary`) and related `--gsl-stepper-*` custom properties.
1259
+ Exports: `Stepper`, `Step`, `StepLabel`. Also available as `Stepper.Step`, `Stepper.StepLabel` for compound-style imports. Props: `Stepper` — `value`, `clickable`, `onValueChange`, `classNames`, `className`, `children`. `Step` — `value`, `disabled`, `classNames`, `className`, `children`. `StepLabel` — `classNames`, `className`, `children`. Exported types: `StepperProps`, `StepProps`, `StepLabelProps`, `StepperClassNames`, `StepClassNames`, `StepLabelClassNames`, `StepperContextValue`, `StepState`, `StepInternalProps`. Retheme via `--clet-stepper-accent` (defaults to `--clet-primary`) and related `--clet-stepper-*` custom properties.
1202
1260
 
1203
1261
  ## Switch
1204
1262
 
package/dist/components/table/Table.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,GAAG,EAET,MAAM,OAAO,CAAC;AAkBf,OAAO,KAAK,EAEV,iBAAiB,EACjB,gBAAgB,EACjB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,EAAE,UAAU,EAAiB,MAAM,mBAAmB,CAAC;AAEnE,OAAO,oBAAoB,CAAC;AA0B5B,eAAO,MAAM,KAAK,uGAoBhB,CAAC;AAqoBH,eAAO,MAAM,YAAY,EAAqC,CAAC,CAAC,EAC9D,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAAE,KACxD,KAAK,CAAC,YAAY,CAAC;AAExB,eAAO,MAAM,WAAW,6GAYvB,CAAC"}
1
+ {"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,GAAG,EAET,MAAM,OAAO,CAAC;AAkBf,OAAO,KAAK,EAEV,iBAAiB,EACjB,gBAAgB,EACjB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,EAAE,UAAU,EAAiB,MAAM,mBAAmB,CAAC;AAEnE,OAAO,oBAAoB,CAAC;AA0B5B,eAAO,MAAM,KAAK,uGAoBhB,CAAC;AAqoBH,eAAO,MAAM,YAAY,EAAqC,CAAC,CAAC,EAC9D,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAAE,KACxD,KAAK,CAAC,YAAY,CAAC;AAExB,eAAO,MAAM,WAAW,6GAiBvB,CAAC"}