@nocoo/basalt 2.0.3 → 2.1.0
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.
- package/README.md +134 -15
- package/ai/COMPATIBILITY.md +180 -0
- package/ai/INTEGRATION.md +1760 -0
- package/ai/RECIPES.md +161 -0
- package/ai/USAGE.md +99 -0
- package/ai/registry.json +38099 -0
- package/ai/sources.json +10 -0
- package/dist/assets/brand-mark.d.ts +1 -0
- package/dist/assets/brand-mark.js +7 -0
- package/dist/assets/brand-mark.js.map +1 -0
- package/dist/charts/area.d.ts +58 -5
- package/dist/charts/area.js +20 -12
- package/dist/charts/area.js.map +1 -1
- package/dist/charts/bar.d.ts +54 -5
- package/dist/charts/bar.js +16 -10
- package/dist/charts/bar.js.map +1 -1
- package/dist/charts/bullet.d.ts +18 -1
- package/dist/charts/bullet.js +6 -3
- package/dist/charts/bullet.js.map +1 -1
- package/dist/charts/charts.d.ts +58 -5
- package/dist/charts/charts.js +13 -2
- package/dist/charts/charts.js.map +1 -1
- package/dist/charts/config.d.ts +7 -0
- package/dist/charts/config.js +5 -1
- package/dist/charts/config.js.map +1 -1
- package/dist/charts/custom-chart.d.ts +58 -5
- package/dist/charts/custom-chart.js +13 -2
- package/dist/charts/custom-chart.js.map +1 -1
- package/dist/charts/donut.d.ts +18 -1
- package/dist/charts/donut.js +6 -3
- package/dist/charts/donut.js.map +1 -1
- package/dist/charts/frame.d.ts +40 -3
- package/dist/charts/frame.js +55 -28
- package/dist/charts/frame.js.map +1 -1
- package/dist/charts/funnel.d.ts +18 -1
- package/dist/charts/funnel.js +5 -1
- package/dist/charts/funnel.js.map +1 -1
- package/dist/charts/gauge.d.ts +18 -1
- package/dist/charts/gauge.js +38 -20
- package/dist/charts/gauge.js.map +1 -1
- package/dist/charts/grouped-bar.d.ts +54 -5
- package/dist/charts/grouped-bar.js +16 -10
- package/dist/charts/grouped-bar.js.map +1 -1
- package/dist/charts/heatmap-calendar.d.ts +61 -0
- package/dist/charts/heatmap-calendar.js +287 -96
- package/dist/charts/heatmap-calendar.js.map +1 -1
- package/dist/charts/heatmap-matrix.d.ts +99 -0
- package/dist/charts/heatmap-matrix.js +249 -0
- package/dist/charts/heatmap-matrix.js.map +1 -0
- package/dist/charts/line.d.ts +66 -5
- package/dist/charts/line.js +37 -30
- package/dist/charts/line.js.map +1 -1
- package/dist/charts/palette.d.ts +1 -0
- package/dist/charts/palette.js +7 -1
- package/dist/charts/palette.js.map +1 -1
- package/dist/charts/radar.d.ts +18 -1
- package/dist/charts/radar.js +26 -19
- package/dist/charts/radar.js.map +1 -1
- package/dist/charts/sankey.d.ts +18 -1
- package/dist/charts/sankey.js +4 -1
- package/dist/charts/sankey.js.map +1 -1
- package/dist/charts/series.d.ts +5 -7
- package/dist/charts/series.js.map +1 -1
- package/dist/charts/slot-bar.d.ts +38 -6
- package/dist/charts/slot-bar.js +5 -2
- package/dist/charts/slot-bar.js.map +1 -1
- package/dist/charts/sparkline.d.ts +35 -5
- package/dist/charts/sparkline.js +22 -18
- package/dist/charts/sparkline.js.map +1 -1
- package/dist/charts/stacked-bar.d.ts +58 -5
- package/dist/charts/stacked-bar.js +19 -12
- package/dist/charts/stacked-bar.js.map +1 -1
- package/dist/charts/stat-card.d.ts +51 -1
- package/dist/charts/stat-card.js +66 -39
- package/dist/charts/stat-card.js.map +1 -1
- package/dist/charts/timeline.d.ts +3 -0
- package/dist/charts/timeline.js +4 -3
- package/dist/charts/timeline.js.map +1 -1
- package/dist/charts/timeseries.d.ts +58 -5
- package/dist/charts/timeseries.js +13 -2
- package/dist/charts/timeseries.js.map +1 -1
- package/dist/charts/tooltip.d.ts +57 -0
- package/dist/charts/tooltip.js +119 -2
- package/dist/charts/tooltip.js.map +1 -1
- package/dist/components/accordion.d.ts +117 -2
- package/dist/components/accordion.js +20 -13
- package/dist/components/accordion.js.map +1 -1
- package/dist/components/alert-dialog.d.ts +131 -13
- package/dist/components/alert-dialog.js +12 -9
- package/dist/components/alert-dialog.js.map +1 -1
- package/dist/components/app-header.js +18 -17
- package/dist/components/app-header.js.map +1 -1
- package/dist/components/app-shell.js +15 -14
- package/dist/components/app-shell.js.map +1 -1
- package/dist/components/autocomplete.d.ts +4 -0
- package/dist/components/autocomplete.js.map +1 -1
- package/dist/components/avatar.d.ts +76 -3
- package/dist/components/avatar.js.map +1 -1
- package/dist/components/badge.d.ts +15 -1
- package/dist/components/badge.js +17 -16
- package/dist/components/badge.js.map +1 -1
- package/dist/components/banner.d.ts +88 -2
- package/dist/components/banner.js +41 -40
- package/dist/components/banner.js.map +1 -1
- package/dist/components/basalt-mark.js +14 -8
- package/dist/components/basalt-mark.js.map +1 -1
- package/dist/components/battery-meter.d.ts +10 -0
- package/dist/components/battery-meter.js +56 -0
- package/dist/components/battery-meter.js.map +1 -0
- package/dist/components/breadcrumbs.d.ts +27 -7
- package/dist/components/breadcrumbs.js +21 -20
- package/dist/components/breadcrumbs.js.map +1 -1
- package/dist/components/button.d.ts +48 -2
- package/dist/components/button.js +87 -36
- package/dist/components/button.js.map +1 -1
- package/dist/components/chat-bubble.d.ts +7 -0
- package/dist/components/chat-bubble.js +14 -13
- package/dist/components/chat-bubble.js.map +1 -1
- package/dist/components/chat-composer.d.ts +7 -3
- package/dist/components/chat-composer.js.map +1 -1
- package/dist/components/chat-header.d.ts +6 -1
- package/dist/components/chat-header.js +17 -16
- package/dist/components/chat-header.js.map +1 -1
- package/dist/components/chat-inbox.d.ts +7 -2
- package/dist/components/chat-inbox.js.map +1 -1
- package/dist/components/checkbox.js +84 -53
- package/dist/components/checkbox.js.map +1 -1
- package/dist/components/clipboard-text.d.ts +13 -2
- package/dist/components/clipboard-text.js +4 -4
- package/dist/components/clipboard-text.js.map +1 -1
- package/dist/components/collapsible.d.ts +58 -15
- package/dist/components/collapsible.js.map +1 -1
- package/dist/components/command-palette.d.ts +151 -61
- package/dist/components/command-palette.js.map +1 -1
- package/dist/components/confirm-dialog.d.ts +1 -1
- package/dist/components/confirm-dialog.js +6 -4
- package/dist/components/confirm-dialog.js.map +1 -1
- package/dist/components/context-menu.d.ts +210 -2
- package/dist/components/context-menu.js +7 -4
- package/dist/components/context-menu.js.map +1 -1
- package/dist/components/data-table.d.ts +40 -2
- package/dist/components/data-table.js +168 -120
- package/dist/components/data-table.js.map +1 -1
- package/dist/components/date-picker.d.ts +53 -2
- package/dist/components/date-picker.js +387 -219
- package/dist/components/date-picker.js.map +1 -1
- package/dist/components/delete-resource.d.ts +7 -1
- package/dist/components/delete-resource.js +22 -18
- package/dist/components/delete-resource.js.map +1 -1
- package/dist/components/description-list.js +16 -15
- package/dist/components/description-list.js.map +1 -1
- package/dist/components/dialog.d.ts +141 -12
- package/dist/components/dialog.js +42 -38
- package/dist/components/dialog.js.map +1 -1
- package/dist/components/dock.d.ts +1 -1
- package/dist/components/dock.js +39 -58
- package/dist/components/dock.js.map +1 -1
- package/dist/components/dropdown-menu.d.ts +229 -15
- package/dist/components/dropdown-menu.js +9 -6
- package/dist/components/dropdown-menu.js.map +1 -1
- package/dist/components/editable-nav-item.d.ts +33 -0
- package/dist/components/editable-nav-item.js +90 -0
- package/dist/components/editable-nav-item.js.map +1 -0
- package/dist/components/empty.d.ts +22 -2
- package/dist/components/empty.js +22 -13
- package/dist/components/empty.js.map +1 -1
- package/dist/components/field.js +31 -30
- package/dist/components/field.js.map +1 -1
- package/dist/components/file-dropzone.d.ts +37 -0
- package/dist/components/file-dropzone.js +103 -0
- package/dist/components/file-dropzone.js.map +1 -0
- package/dist/components/filter-bar.d.ts +34 -0
- package/dist/components/filter-bar.js +52 -0
- package/dist/components/filter-bar.js.map +1 -0
- package/dist/components/flow.js +19 -18
- package/dist/components/flow.js.map +1 -1
- package/dist/components/grid.d.ts +3 -1
- package/dist/components/grid.js.map +1 -1
- package/dist/components/hover-card.d.ts +111 -1
- package/dist/components/hover-card.js +9 -6
- package/dist/components/hover-card.js.map +1 -1
- package/dist/components/icon-picker.d.ts +34 -0
- package/dist/components/icon-picker.js +77 -0
- package/dist/components/icon-picker.js.map +1 -0
- package/dist/components/inline-editable.d.ts +46 -0
- package/dist/components/inline-editable.js +124 -0
- package/dist/components/inline-editable.js.map +1 -0
- package/dist/components/input-area.js +3 -3
- package/dist/components/input-group.js +7 -7
- package/dist/components/input.js +3 -3
- package/dist/components/label.js +18 -17
- package/dist/components/label.js.map +1 -1
- package/dist/components/layer-card.d.ts +10 -2
- package/dist/components/layer-card.js +71 -68
- package/dist/components/layer-card.js.map +1 -1
- package/dist/components/loader.d.ts +10 -2
- package/dist/components/loader.js.map +1 -1
- package/dist/components/menu-bar.d.ts +174 -6
- package/dist/components/menu-bar.js +33 -29
- package/dist/components/menu-bar.js.map +1 -1
- package/dist/components/meter.d.ts +27 -2
- package/dist/components/meter.js.map +1 -1
- package/dist/components/multi-select.d.ts +64 -0
- package/dist/components/multi-select.js +218 -0
- package/dist/components/multi-select.js.map +1 -0
- package/dist/components/navigation-menu.d.ts +88 -5
- package/dist/components/navigation-menu.js.map +1 -1
- package/dist/components/overlay.js +6 -5
- package/dist/components/overlay.js.map +1 -1
- package/dist/components/page-header.js +23 -21
- package/dist/components/page-header.js.map +1 -1
- package/dist/components/pagination.js +7 -7
- package/dist/components/popover.d.ts +136 -16
- package/dist/components/popover.js +32 -28
- package/dist/components/popover.js.map +1 -1
- package/dist/components/radio.js +38 -37
- package/dist/components/radio.js.map +1 -1
- package/dist/components/resource-list.d.ts +26 -1
- package/dist/components/resource-list.js +28 -15
- package/dist/components/resource-list.js.map +1 -1
- package/dist/components/responsive-master-detail.d.ts +27 -0
- package/dist/components/responsive-master-detail.js +85 -0
- package/dist/components/responsive-master-detail.js.map +1 -0
- package/dist/components/section-rule.js +23 -22
- package/dist/components/section-rule.js.map +1 -1
- package/dist/components/select.d.ts +27 -3
- package/dist/components/select.js +11 -11
- package/dist/components/select.js.map +1 -1
- package/dist/components/sheet.d.ts +115 -11
- package/dist/components/sheet.js +37 -30
- package/dist/components/sheet.js.map +1 -1
- package/dist/components/sidebar.d.ts +109 -17
- package/dist/components/sidebar.js +109 -108
- package/dist/components/sidebar.js.map +1 -1
- package/dist/components/skeleton-line.d.ts +22 -2
- package/dist/components/skeleton-line.js.map +1 -1
- package/dist/components/slider.d.ts +61 -1
- package/dist/components/slider.js +31 -15
- package/dist/components/slider.js.map +1 -1
- package/dist/components/stat-strip.js +16 -15
- package/dist/components/stat-strip.js.map +1 -1
- package/dist/components/switch.js +78 -47
- package/dist/components/switch.js.map +1 -1
- package/dist/components/table-of-contents.js +18 -17
- package/dist/components/table-of-contents.js.map +1 -1
- package/dist/components/table-pager.js +20 -19
- package/dist/components/table-pager.js.map +1 -1
- package/dist/components/table.d.ts +9 -3
- package/dist/components/table.js +19 -18
- package/dist/components/table.js.map +1 -1
- package/dist/components/tabs.js +29 -22
- package/dist/components/tabs.js.map +1 -1
- package/dist/components/tag-badge.d.ts +58 -0
- package/dist/components/tag-badge.js +72 -0
- package/dist/components/tag-badge.js.map +1 -0
- package/dist/components/tag-color-picker.d.ts +20 -0
- package/dist/components/tag-color-picker.js +42 -0
- package/dist/components/tag-color-picker.js.map +1 -0
- package/dist/components/text.js +17 -16
- package/dist/components/text.js.map +1 -1
- package/dist/components/toast.d.ts +173 -3
- package/dist/components/toast.js +1 -1
- package/dist/components/toast.js.map +1 -1
- package/dist/components/toggle-group.d.ts +88 -2
- package/dist/components/toggle-group.js +32 -31
- package/dist/components/toggle-group.js.map +1 -1
- package/dist/components/toggle.d.ts +35 -2
- package/dist/components/toggle.js +12 -11
- package/dist/components/toggle.js.map +1 -1
- package/dist/components/tooltip.d.ts +144 -6
- package/dist/components/tooltip.js +9 -6
- package/dist/components/tooltip.js.map +1 -1
- package/dist/components/typeahead-field.js +193 -132
- package/dist/components/typeahead-field.js.map +1 -1
- package/dist/components/upload-queue.d.ts +51 -0
- package/dist/components/upload-queue.js +116 -0
- package/dist/components/upload-queue.js.map +1 -0
- package/dist/providers/accent.d.ts +46 -2
- package/dist/providers/accent.js +358 -172
- package/dist/providers/accent.js.map +1 -1
- package/dist/providers/link.d.ts +14 -4
- package/dist/providers/link.js.map +1 -1
- package/dist/providers/theme.d.ts +38 -2
- package/dist/providers/theme.js +160 -27
- package/dist/providers/theme.js.map +1 -1
- package/dist/styles/base.css +83 -0
- package/dist/styles/standalone.css +711 -120
- package/dist/styles/tailwind.css +21 -7
- package/dist/styles/tokens.css +145 -91
- package/dist/utils/control-surface.d.ts +2 -1
- package/dist/utils/control-surface.js +4 -4
- package/dist/utils/control-surface.js.map +1 -1
- package/dist/utils/selection-indicator.js +2 -2
- package/dist/utils/selection-indicator.js.map +1 -1
- package/package.json +8 -4
package/README.md
CHANGED
|
@@ -1,41 +1,160 @@
|
|
|
1
|
+
<p align="center">
|
|
2
|
+
<img src="https://raw.githubusercontent.com/nocoo/basalt/main/assets/brand/icon-rounded.png" alt="Basalt" width="128" height="128" />
|
|
3
|
+
</p>
|
|
4
|
+
|
|
1
5
|
# @nocoo/basalt
|
|
2
6
|
|
|
3
|
-
|
|
7
|
+
Matte design system component library. ESM, granular exports, Tailwind CSS v4 or standalone CSS.
|
|
8
|
+
|
|
9
|
+
`BasaltMark` and the default `LoadingScreen` mark embed the transparent corner-tower identity, so consuming applications need no public asset path. The README uses the separate large presentation. [Logo comparison](https://hexly.ai/logos/basalt) · [Brand usage](https://github.com/nocoo/basalt/blob/main/assets/brand/README.md).
|
|
10
|
+
|
|
11
|
+
- **Package:** `@nocoo/basalt`
|
|
12
|
+
- **Documentation & Showcase:** [https://basaltui.com](https://basaltui.com)
|
|
13
|
+
- **Repository:** [https://github.com/nocoo/basalt](https://github.com/nocoo/basalt)
|
|
14
|
+
- **Complete Application Guide:** [ai/INTEGRATION.md](ai/INTEGRATION.md)
|
|
15
|
+
- **Compilable AppFrame / Login / Resources:** [ai/RECIPES.md](ai/RECIPES.md)
|
|
16
|
+
- **Compatibility & Version Policy:** [ai/COMPATIBILITY.md](ai/COMPATIBILITY.md)
|
|
17
|
+
|
|
18
|
+
---
|
|
19
|
+
|
|
20
|
+
## Installation
|
|
21
|
+
|
|
22
|
+
```bash
|
|
23
|
+
npm install @nocoo/basalt lucide-react
|
|
24
|
+
# or
|
|
25
|
+
bun add @nocoo/basalt lucide-react
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
### Peer Dependencies
|
|
29
|
+
|
|
30
|
+
- `react`: `^19` (Required)
|
|
31
|
+
- `react-dom`: `^19` (Required)
|
|
32
|
+
- `lucide-react`: `*` (Required for icons across controls)
|
|
33
|
+
- `tailwindcss`: `^4` (Optional; required only if using the Tailwind stylesheet contract)
|
|
34
|
+
- `recharts`: `^3` (Optional; required for chart subpaths such as `@nocoo/basalt/charts/*`)
|
|
35
|
+
- `react-day-picker`: `^10` (Optional; declared peer for custom calendar integrations; the current DatePicker implementation does not call it)
|
|
36
|
+
- `@tanstack/react-table`: `^9` (Optional; declared peer for custom table integrations; the current DataTable implementation does not call it)
|
|
4
37
|
|
|
5
|
-
|
|
38
|
+
> **Note on optional peers:** Basalt's built-in `DatePicker` and `DataTable` operate independently without requiring `react-day-picker` or `@tanstack/react-table`. Only install optional peers when your application directly utilizes them or imports Recharts visualizations.
|
|
6
39
|
|
|
7
|
-
|
|
40
|
+
---
|
|
41
|
+
|
|
42
|
+
<a id="css-setup"></a>
|
|
43
|
+
## Styling Contracts
|
|
44
|
+
|
|
45
|
+
### Contract 1: Tailwind CSS v4
|
|
46
|
+
|
|
47
|
+
Import order is strict. Register Basalt tokens before the Tailwind framework imports:
|
|
8
48
|
|
|
9
49
|
```css
|
|
10
50
|
@source "../node_modules/@nocoo/basalt/dist/**/*.{js,jsx,ts,tsx}";
|
|
11
51
|
@import "@nocoo/basalt/styles/tailwind";
|
|
12
52
|
@import "tailwindcss";
|
|
53
|
+
|
|
54
|
+
@layer base {
|
|
55
|
+
html, body, #root {
|
|
56
|
+
height: 100%;
|
|
57
|
+
}
|
|
58
|
+
body {
|
|
59
|
+
@apply bg-basalt-background text-basalt-foreground antialiased;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
13
62
|
```
|
|
14
63
|
|
|
15
|
-
|
|
64
|
+
- `@nocoo/basalt/styles/tailwind` (or `@nocoo/basalt/styles`): Defines `--basalt-*` design tokens, luminance surfaces (L0/L1/L2), and `--color-basalt-*` utility classes.
|
|
16
65
|
|
|
17
|
-
|
|
66
|
+
### Contract 2: Standalone CSS (No Tailwind)
|
|
67
|
+
|
|
68
|
+
For projects without Tailwind CSS (e.g. vanilla Vite, legacy frameworks, or Next.js with custom CSS):
|
|
18
69
|
|
|
19
70
|
```ts
|
|
20
71
|
import "@nocoo/basalt/styles/standalone";
|
|
21
72
|
```
|
|
22
73
|
|
|
23
|
-
Standalone
|
|
74
|
+
Standalone CSS contains compiled design tokens, scoped control classes, keyframes, and base surface properties. It does not inject global CSS resets or Preflight. Ensure your container sets `height: 100%`.
|
|
24
75
|
|
|
25
|
-
|
|
76
|
+
---
|
|
26
77
|
|
|
27
|
-
|
|
28
|
-
|
|
78
|
+
<a id="component-usage"></a>
|
|
79
|
+
## Import Architecture
|
|
80
|
+
|
|
81
|
+
### 1. Root Barrel (`@nocoo/basalt`)
|
|
82
|
+
Contains lightweight base components, inputs, layout surfaces, and providers:
|
|
83
|
+
```tsx compile:pkg-readme-root-import
|
|
84
|
+
import {
|
|
85
|
+
Button,
|
|
86
|
+
Input,
|
|
87
|
+
LayerCard,
|
|
88
|
+
ThemeProvider,
|
|
89
|
+
ThemeToggle,
|
|
90
|
+
Tooltip,
|
|
91
|
+
Toast,
|
|
92
|
+
Sidebar
|
|
93
|
+
} from "@nocoo/basalt";
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
### 2. Granular Subpaths (`@nocoo/basalt/components/*`, `@nocoo/basalt/charts/*`, `@nocoo/basalt/providers/*`)
|
|
97
|
+
Keeps initial bundle size small by isolating complex or specialized dependencies:
|
|
98
|
+
```tsx compile:pkg-readme-granular-import
|
|
29
99
|
import { DatePicker } from "@nocoo/basalt/components/date-picker";
|
|
100
|
+
import { DataTable } from "@nocoo/basalt/components/data-table";
|
|
30
101
|
import { DonutChart } from "@nocoo/basalt/charts/donut";
|
|
102
|
+
import { useTheme } from "@nocoo/basalt/providers/theme";
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
---
|
|
106
|
+
|
|
107
|
+
## Framework Integration Highlights
|
|
108
|
+
|
|
109
|
+
### React 19 & Next.js Client Boundaries
|
|
110
|
+
Basalt controls require browser event listeners and React context. When using Next.js App Router, render Basalt components within a client module:
|
|
111
|
+
|
|
112
|
+
```tsx compile:pkg-readme-client-app
|
|
113
|
+
// app/basalt-app.tsx
|
|
114
|
+
"use client";
|
|
115
|
+
|
|
116
|
+
import { Button, ThemeProvider } from "@nocoo/basalt";
|
|
117
|
+
|
|
118
|
+
export function BasaltApp() {
|
|
119
|
+
return (
|
|
120
|
+
<ThemeProvider>
|
|
121
|
+
<Button variant="default">Client Control</Button>
|
|
122
|
+
</ThemeProvider>
|
|
123
|
+
);
|
|
124
|
+
}
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
### Server-Side Theme Pre-Hydration
|
|
128
|
+
To eliminate theme flashing (FOUC), inject the theme class before React renders:
|
|
129
|
+
|
|
130
|
+
```html
|
|
131
|
+
<script>
|
|
132
|
+
(function() {
|
|
133
|
+
try {
|
|
134
|
+
var stored = localStorage.getItem("theme");
|
|
135
|
+
var prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
|
136
|
+
var isDark = stored === "dark" || (stored !== "light" && prefersDark);
|
|
137
|
+
document.documentElement.classList.toggle("dark", isDark);
|
|
138
|
+
document.documentElement.classList.toggle("light", !isDark);
|
|
139
|
+
document.documentElement.dataset.mode = isDark ? "dark" : "light";
|
|
140
|
+
} catch (e) {}
|
|
141
|
+
})();
|
|
142
|
+
</script>
|
|
31
143
|
```
|
|
32
144
|
|
|
33
|
-
|
|
145
|
+
---
|
|
146
|
+
|
|
147
|
+
## Upgrades & Compatibility Policy
|
|
148
|
+
|
|
149
|
+
Basalt follows strict [Semantic Versioning (SemVer)](https://semver.org/):
|
|
150
|
+
- **PATCH** (`2.0.x`): Bug fixes, internal optimizations, visual refinements that do not break layout contracts.
|
|
151
|
+
- **MINOR** (`2.x.0`): New components, additive props, opt-in features, and backward-compatible changes.
|
|
152
|
+
- **MAJOR** (`3.0.0`): Breaking changes to public component signatures, DOM/ARIA structures, or removal of deprecated export paths.
|
|
153
|
+
|
|
154
|
+
All 110 exported entrypoints from `v2.0.3` are locked as a permanent compatibility baseline. See [ai/COMPATIBILITY.md](ai/COMPATIBILITY.md) for full details.
|
|
34
155
|
|
|
35
|
-
|
|
156
|
+
For comprehensive architectural recipes, form adapters, and framework migration instructions, consult the complete package guide at [ai/INTEGRATION.md](ai/INTEGRATION.md).
|
|
36
157
|
|
|
37
|
-
|
|
38
|
-
- `react-day-picker` `^10` — declared for DatePicker consumers; the current DatePicker implementation does not call it
|
|
39
|
-
- `@tanstack/react-table` `^9` — declared for DataTable consumers; the current DataTable implementation does not call it
|
|
158
|
+
## License
|
|
40
159
|
|
|
41
|
-
|
|
160
|
+
[MIT](https://opensource.org/licenses/MIT)
|
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
# Basalt Public API and Compatibility Policy
|
|
2
|
+
|
|
3
|
+
This document defines the stability contracts, export architecture, and semantic versioning guarantees for `@nocoo/basalt`.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## 1. Compatibility Baseline
|
|
8
|
+
|
|
9
|
+
The initial public baseline is locked to version **`2.0.3`** (commit `e61efc1`).
|
|
10
|
+
|
|
11
|
+
- **Entrypoints:** 110 exported entrypoints:
|
|
12
|
+
- 1 root entrypoint: `@nocoo/basalt` (96 root symbols)
|
|
13
|
+
- 77 component subpaths: `@nocoo/basalt/components/*`
|
|
14
|
+
- 29 chart subpaths: `@nocoo/basalt/charts/*`
|
|
15
|
+
- 3 provider subpaths: `@nocoo/basalt/providers/*` (`theme`, `accent`, `link`)
|
|
16
|
+
- Total: 572 exported symbols across all entrypoints (375 runtime symbols, 197 type symbols).
|
|
17
|
+
- **CSS Export Contracts:** 3 export paths:
|
|
18
|
+
- `@nocoo/basalt/styles` (Tailwind contract alias)
|
|
19
|
+
- `@nocoo/basalt/styles/tailwind` (Tailwind token definition)
|
|
20
|
+
- `@nocoo/basalt/styles/standalone` (Zero-dependency compiled tokens and utility CSS)
|
|
21
|
+
|
|
22
|
+
### Machine Verification
|
|
23
|
+
All 110 entrypoints, their export targets, 3 CSS paths, and all 572 exported symbols (with value/type fidelity) are cataloged in `packages/basalt/public-api-baseline.json` and verified via `packages/basalt/scripts/verify-public-api.ts`. No entrypoint or public symbol present in this baseline may be removed or have its value/type identity degraded without a major version bump.
|
|
24
|
+
|
|
25
|
+
---
|
|
26
|
+
|
|
27
|
+
## 2. Export Architecture & Root vs. Granular Principles
|
|
28
|
+
|
|
29
|
+
### Root Barrel (`@nocoo/basalt`)
|
|
30
|
+
The root barrel is reserved for lightweight, frequently-used leaves, standard inputs, core surfaces, and global providers.
|
|
31
|
+
- **Included on root:** `Button`, `Input`, `Checkbox`, `Switch`, `Badge`, `Text`, `Label`, `Separator`, `LayerCard`, `DescriptionList`, `Sidebar`, `Dialog`, `Sheet`, `Popover`, `Tooltip`, `Toast`, `ThemeProvider`, `ThemeToggle`, `LinkProvider`.
|
|
32
|
+
- **Excluded from root:**
|
|
33
|
+
- Radio inputs (`@nocoo/basalt/components/radio`)
|
|
34
|
+
- Heavy visualization libraries (`@nocoo/basalt/charts/*`)
|
|
35
|
+
- Complex table implementations (`@nocoo/basalt/components/data-table`)
|
|
36
|
+
- Calendar pickers with complex date logic (`@nocoo/basalt/components/date-picker`)
|
|
37
|
+
- Application frame layout chrome (`@nocoo/basalt/components/app-shell`, `app-header`, `page-header`, `section-rule`)
|
|
38
|
+
|
|
39
|
+
### Wildcard Subpaths & Legacy Internal Helpers
|
|
40
|
+
<a id="wildcard-subpaths"></a>
|
|
41
|
+
In `v2.0.3`, wildcard exports (`./components/*`, `./charts/*`, `./providers/*`) exposed all non-test modules in the package, including internal building blocks:
|
|
42
|
+
- **`@nocoo/basalt/components/typeahead-field`**: Internal composite input controller for autocomplete and combobox (`TypeaheadField`, `TypeaheadItem`). Provides popup list and keyboard navigation wiring.
|
|
43
|
+
- **`@nocoo/basalt/components/overlay`**: Internal class generators and styling constants for overlay menus and select (`overlayPanelClass`, `overlayItemClass`, `FOCUS_RING`, `FOCUS_BORDER`, `MENU_GAP`, `OVERLAY_GAP`, `OVERLAY_LAYER`, `OVERLAY_MOTION`).
|
|
44
|
+
- **`@nocoo/basalt/charts/sample`**: Static mock datasets used for fallback preview rendering (`SAMPLE`, `BULLET_SAMPLE`, `DONUT_SAMPLE`, `FUNNEL_SAMPLE`, `RADAR_SAMPLE`, `SANKEY_SAMPLE`).
|
|
45
|
+
|
|
46
|
+
**Policy:**
|
|
47
|
+
1. In accordance with zero-breaking-change guarantees, **no existing export path will be removed in 2.x**.
|
|
48
|
+
2. Internal modules are marked as `@internal` or `@legacy` in documentation and metadata.
|
|
49
|
+
3. Callers should import public controls via their designated official export paths.
|
|
50
|
+
|
|
51
|
+
---
|
|
52
|
+
|
|
53
|
+
## 3. Semantic Versioning Rules
|
|
54
|
+
|
|
55
|
+
Basalt strictly follows [SemVer 2.0.0](https://semver.org/):
|
|
56
|
+
|
|
57
|
+
| Change Level | Permitted Changes | Examples |
|
|
58
|
+
|---|---|---|
|
|
59
|
+
| **PATCH** (`2.0.x`) | Backward-compatible bug fixes, internal optimizations, visual refinements that do not alter layout bounding boxes or break existing snapshots. | Fixing event propagation in `Button`, correcting border contrast ratio, fixing broken types. |
|
|
60
|
+
| **MINOR** (`2.x.0`) | Additive, backward-compatible features; new components, new optional props, new granular export paths. | Adding a new `FilterBar` component, introducing an optional `variant` prop to `Badge`. |
|
|
61
|
+
| **MAJOR** (`3.0.0`) | Breaking changes to existing public component signatures, DOM/ARIA structures, or removal of deprecated export paths. | Renaming required props, removing legacy wildcard subpaths, updating peer dependency minimums to React 20. |
|
|
62
|
+
|
|
63
|
+
### Layout & Default Geometry Policy
|
|
64
|
+
Changes to default geometry (such as outer padding, default margins, or intrinsic dimensions) alter the visual balance of consuming applications.
|
|
65
|
+
- **Bug Fixes vs Breaking Changes:** Correcting an unintended layout collapse or overflow bug (e.g., popup clipping in cards or chart height collapsing to 0px) is considered a patch/minor fix. Altering default container padding (e.g. changing `LayerCard` padding from `none` to `md`) affects caller assumptions.
|
|
66
|
+
- If default geometry must evolve, before/after migration notes must be published in `CHANGELOG.md`, and backward-compatible props or opt-ins must be offered.
|
|
67
|
+
|
|
68
|
+
---
|
|
69
|
+
|
|
70
|
+
## 4. Contract Dimensions & Current Implementation Status
|
|
71
|
+
|
|
72
|
+
1. **Import Contract:** Subpaths mapped in `package.json` `"exports"` and declaration `.d.ts` entrypoints are immutable within a major version. (Fully Enforced)
|
|
73
|
+
2. **State & Controlled Contract:** Components supporting controlled usage (`value`, `checked`, `open`) must reliably notify callers via corresponding callbacks (`onValueChange`, `onCheckedChange`, `onOpenChange`). Uncontrolled usage with default props (`defaultValue`, `defaultOpen`) must manage internal state seamlessly.
|
|
74
|
+
3. **Form Contract & Known Limitations:** Standard inputs (`Input`, `InputArea`, `Checkbox`, `Radio`, `Switch`) participate in `FormData` extraction. Native reset, external form association, readOnly validation suppression, and required validation boundaries are fully integrated for `DatePicker`, with forwarded refs properly targeting the underlying native input and errors surfaced on the visible trigger. `Autocomplete` unselected free-text and label matching blur commit preserves natural focus traversal without reclaiming focus.
|
|
75
|
+
4. **Accessibility Contract:** Components follow WAI-ARIA authoring practices. Semantic roles and `aria-*` attributes are maintained. Focus traps and keyboard navigations are incrementally hardened across component milestones.
|
|
76
|
+
5. **Reduced Motion:** Components with motion support respect `@media (prefers-reduced-motion: reduce)`. Streaming carets, loaders, skeleton shimmer, badges, meters, selection indicators, and chart marks are covered by the motion regression gates. Static charts use the shared zero-animation configuration, including Gauge.
|
|
77
|
+
|
|
78
|
+
---
|
|
79
|
+
|
|
80
|
+
## 5. Chart Configuration and Series Subsystems
|
|
81
|
+
|
|
82
|
+
Basalt chart components build upon modular configuration tokens and series utilities designed for Recharts integration.
|
|
83
|
+
|
|
84
|
+
<a id="chart-config"></a>
|
|
85
|
+
### Chart Configuration (`@nocoo/basalt/charts/config`)
|
|
86
|
+
Defines shared tokens, styles, and props for cartesian charts:
|
|
87
|
+
- **Constants**:
|
|
88
|
+
- `CHART_TYPE`: Font sizes (`axisFontSize: 11`, `legendFontSize: 12`, `tooltipTitleSize: 12`, `tooltipBodySize: 12`), `tooltipDot: 8`, stroke width (`strokeWidth: 2`), `gridDash: "3 3"`, `gridOpacity: 0.15`, and `areaFillAlpha: 0.2`.
|
|
89
|
+
- `AXIS_CONFIG` & `cartesianAxisProps(hidden: boolean = false)`: Standard tick styling (`chartTickStyle("axis")`), `axisLine: false`, `tickLine: false`. Returns `{ hide: boolean, tick: { fontSize: number, fill: string }, axisLine: false, tickLine: false }`.
|
|
90
|
+
- `GRID_PROPS`: Horizontal-only grid with theme stroke opacity and dashed strokes (`vertical: false, stroke: chartAxis, strokeOpacity: 0.15, strokeDasharray: "3 3"`).
|
|
91
|
+
- `BAR_RADIUS`: Rounded corner coordinates for vertical (`[4, 4, 0, 0]`) and horizontal (`[0, 4, 4, 0]`) bars.
|
|
92
|
+
- `ANIMATION_PROPS`: Standard zero-animation config for stable rendering (`isAnimationActive: false`).
|
|
93
|
+
- `CHART_TOOLTIP_CURSOR_LINE` / `CHART_TOOLTIP_CURSOR_BAR`: Standard cursor overlays.
|
|
94
|
+
- `RESPONSIVE_CONTAINER_PROPS`: Sizing props (`width: "100%"`, `height: "100%"`, `minWidth: 0`, `minHeight: 0`, `debounce: 150`).
|
|
95
|
+
- `CHART_PLOT_MARGIN`: Standard cartesian plot margins `{ top: 4, right: 4, bottom: 0, left: 0 }`.
|
|
96
|
+
- `CHART_PLOT_MARGIN_BARE`: Minimal plot margins `{ top: 2, right: 2, bottom: 2, left: 2 }`.
|
|
97
|
+
- **Types**:
|
|
98
|
+
- `ChartTypeFace`: `"axis" | "legend" | "tooltipTitle" | "tooltipBody"`.
|
|
99
|
+
- **Functions**:
|
|
100
|
+
- `chartFontSize(face: ChartTypeFace): number`: Returns numeric font size token for given face.
|
|
101
|
+
- `chartTextStyle(face: ChartTypeFace): { fontSize: number }`: Typography style helper.
|
|
102
|
+
- `chartTickStyle(face: ChartTypeFace = "axis"): { fontSize: number, fill: string }`: Axis tick style helper.
|
|
103
|
+
- `getChartColor(index: number): string`: Modular color retrieval from `CHART_COLORS` palette (`CHART_COLORS[index % length]`).
|
|
104
|
+
- `seriesColor(series: ChartSeriesDescriptor | undefined, index: number): string | undefined`: Resolves color by returning explicit `series.color` or palette fallback `CHART_COLORS[index % length]`. Note: returns `string | undefined` (does not guarantee chart-1 fallback; callers such as `ChartLegend` apply `--basalt-chart-1` fallback).
|
|
105
|
+
- `chartTooltipContentStyle()`: Returns `{ background: "transparent", border: "none", borderRadius: "0", boxShadow: "none", fontSize: 12, color: string, padding: "0" }`.
|
|
106
|
+
- `chartTooltipProps(options?: { formatter?: (value: number) => string; cursor?: "bar" | "line" | false; customTooltip?: (props: { active?: boolean; payload?: readonly ChartTooltipItem[]; label?: string | number }) => ReactNode })`: Assembles complete Recharts tooltip props with custom `ChartTooltipContent` element renderer or caller-provided `customTooltip` callback.
|
|
107
|
+
|
|
108
|
+
<a id="chart-series"></a>
|
|
109
|
+
### Chart Series Utilities (`@nocoo/basalt/charts/series`)
|
|
110
|
+
Manages series descriptor shapes, point definitions, and data key fallbacks:
|
|
111
|
+
- **Types**:
|
|
112
|
+
- `ChartSeriesDescriptor`: `{ key: string, label?: string, color?: string }`.
|
|
113
|
+
- `XYSeriesDescriptor`: Restricts `key` to `XYSeriesKey` (`"y" | "y2" | "y3"`).
|
|
114
|
+
- `BulletSeriesDescriptor`: Restricts `key` to `BulletSeriesKey` (`"value" | "target"`).
|
|
115
|
+
- Point types with concrete field shapes:
|
|
116
|
+
- `XYPoint`: `{ x: string | number; y: number; y2?: number; y3?: number }`.
|
|
117
|
+
- `NamedValue`: `{ name: string; value: number }`.
|
|
118
|
+
- `RadarPoint`: `{ subject: string; value: number }`.
|
|
119
|
+
- `BulletPoint`: `{ name: string; value: number; target: number }`.
|
|
120
|
+
- `SankeyData`: `{ nodes: { name: string }[]; links: { source: number; target: number; value: number }[] }`.
|
|
121
|
+
- **Functions**:
|
|
122
|
+
- `resolveChartSeries(series: ChartSeriesDescriptor[] | undefined, fallbackKeys: string[]): ChartSeriesDescriptor[]`: Normalizes user-supplied series or maps `fallbackKeys` to descriptors `{ key }`. Supports generic type-safe series descriptors with dynamic numeric data keys. Arbitrary keys require explicit series; omitted or empty series retain each chart's legacy `y`, `y2`, and `y3` series fallback. Note that TypeScript type inference does not automatically enumerate object keys at runtime.
|
|
123
|
+
- `applyLeadColor(items: ChartSeriesDescriptor[], color?: string): ChartSeriesDescriptor[]`: If `color` is provided and the first item does not specify a `color` (`item.color ?? color`), sets the first item's color. Preserves an explicit first-item color.
|
|
124
|
+
- `xyFallbackKeys(data: Array<{ y2?: number; y3?: number }>): string[]`: Scans data array and dynamically includes `"y2"` and `"y3"` if present, returning `["y", ...]` keys. Compatible with legacy XY series fallback.
|
|
125
|
+
|
|
126
|
+
|
|
127
|
+
---
|
|
128
|
+
|
|
129
|
+
<a id="6-unreleased-migration-notes-p1p10"></a>
|
|
130
|
+
## 6. v2.1.0 migration notes (P1–P10)
|
|
131
|
+
|
|
132
|
+
These notes cover the components, documentation, examples and palette changes included in **v2.1.0**. The original v2.0.3 110-entrypoint / 572-symbol baseline remains byte-for-byte frozen. New entries are recorded in the current registry rather than rewriting that historical baseline.
|
|
133
|
+
|
|
134
|
+
### Palettes and production URL
|
|
135
|
+
|
|
136
|
+
| Before | Current behavior | Consumer action |
|
|
137
|
+
|---|---|---|
|
|
138
|
+
| 24 control accents sharing chart tokens | 12 iMac / iPhone 5C-inspired accents on `--basalt-accent-1…12` | Build pickers from `useAccent().swatches`; do not assume the former count, order, labels, or token values. |
|
|
139
|
+
| 24 distinct `CHART_COLORS` entries | Fixed five-color Blue / Pink / Green / Yellow / Gray cycle; the first four match classic control swatches exactly | Replace direct indexing beyond 4 with `getChartColor(index)` or `index % CHART_COLORS.length`. This is an intentional visual and runtime-value change, not a claim that all prior palette behavior is unchanged. |
|
|
140
|
+
| Numbered chart tokens and 24 `chart` keys | Existing names retained as aliases of five chart colors | Keep imports; expect repeated colors. Use explicit per-series colors and descriptive legends where five categories are insufficient. |
|
|
141
|
+
| Presets only | Optional `AccentProvider.paletteOverrides` with light/dark HSL pairs | Application owns validation and persistence. Overrides affect control swatches and semantic primary, never chart tokens. |
|
|
142
|
+
| Ring remainder tied to a series color | Theme-aware neutral `chartMuted` track | No prop migration. Gauge is static under reduced motion and displays 0, partial, and full values without a black remainder. |
|
|
143
|
+
| `https://basalt.hexly.ai` | `https://basaltui.com` | Update bookmarks and production links. Browser storage is origin-scoped, so old-domain theme/palette preferences cannot transfer automatically. Local `basalt.dev.hexly.ai` is unchanged. |
|
|
144
|
+
|
|
145
|
+
Chart gray retains its prior light/dark values. Marks use solid candy colors without contrasting outlines or shadows; their fills are not darkened. Raw candy fills can fall below 3:1 on light surfaces; use descriptive labels and `summary` / `dataAlternative` alongside them. Custom control palettes remain independent.
|
|
146
|
+
|
|
147
|
+
Named Teal and Purple `Badge` variants use the Bondi and Grape control swatches with readable dark foregrounds in both themes. Their backgrounds use `--basalt-badge-teal` and `--basalt-badge-purple`, keeping named badge hues independent of the numbered chart aliases.
|
|
148
|
+
|
|
149
|
+
v2.1.0 includes the palette count and value changes above as an explicit exception to the usual minor-release compatibility policy. Consumers that index colors or persist palette choices must follow these migration notes. The unchanged export baseline alone does not prove runtime-value compatibility.
|
|
150
|
+
|
|
151
|
+
Persisted accent IDs are normalized on reads and selections:
|
|
152
|
+
|
|
153
|
+
| Old ID | Retained ID |
|
|
154
|
+
|---|---|
|
|
155
|
+
| `jade`, `seafoam` | `teal` |
|
|
156
|
+
| `vermilion`, `crimson` | `red` |
|
|
157
|
+
| `magenta` | `rose` |
|
|
158
|
+
| `orchid` | `purple` |
|
|
159
|
+
| `cobalt` | `indigo` |
|
|
160
|
+
| `steel` | `primary` |
|
|
161
|
+
| `cadet` | `sky` |
|
|
162
|
+
| `olive` | `lime` |
|
|
163
|
+
| `gold` | `amber` |
|
|
164
|
+
| `tangerine` | `orange` |
|
|
165
|
+
|
|
166
|
+
Other retained IDs keep their identity with the new palette values. Unknown IDs fall back to `primary`. Use IDs rather than array positions for saved selections.
|
|
167
|
+
|
|
168
|
+
### Components and application recipes
|
|
169
|
+
|
|
170
|
+
| Area | Additions and compatibility | Application responsibility |
|
|
171
|
+
|---|---|---|
|
|
172
|
+
| Resource screens | Additive DataTable sorting, manual processing/pagination, header and retry options; ResourceList state/toolbar/bulk/footer slots; granular BatteryMeter | Queries, authorization, selection policy, total counts and backend requests |
|
|
173
|
+
| Filtering | MultiSelect, FilterBar and FilterChip, including controlled search and native form/reset support | Search results and business filter state |
|
|
174
|
+
| Uploads | FileDropzone plus UploadQueue/UploadItem, validation, progress and action callbacks | Transport, retry/cancel, object URL lifetime and server validation |
|
|
175
|
+
| Editing and navigation | InlineEditable, EditableNavItem/FolderNavItem, IconPicker, TagBadge/TagColorPicker, ResponsiveMasterDetail | Persistence, routing, allowed icons, stable item IDs and tree policy |
|
|
176
|
+
| App templates | Complete AppFrame, Login and Resources modules in `ai/RECIPES.md`, compiled from the installed package | Router adapters, authentication, permissions, API calls and real data |
|
|
177
|
+
| Chart details | Values heatmap and Timeline rails use fixed chart tokens; optional `TimelineEvent.textColor` pairs custom event backgrounds with readable titles and subtitles | Choose text color for custom backgrounds; omitted `textColor` keeps the legacy white treatment for explicit event colors |
|
|
178
|
+
| Documentation | Generated props retain generics, callback/constructor union precedence, readonly arrays and tuples | Use the declared type parameters; generated text no longer substitutes `unknown` for caller data types |
|
|
179
|
+
|
|
180
|
+
New workflow modules stay on granular subpaths. Existing string table headers, legacy chart `y`/`y2`/`y3` inputs, required ResourceList data, and explicit series colors remain supported. No automatic downstream migration is performed. A full tree adapter, draggable SplitPane, and maps remain outside this release scope.
|