@nadicodeai/ui 8.0.1 → 8.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/dist/styles/components.css +126 -0
- package/dist/styles/globals.css +4 -104
- package/docs/contract.md +3 -3
- package/package.json +3 -2
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* @nadicodeai/ui/components.css — what the components need from a stylesheet,
|
|
3
|
+
* and nothing that styles a page.
|
|
4
|
+
*
|
|
5
|
+
* `globals.css` owns an application: it imports Tailwind, the complete design
|
|
6
|
+
* system with its reset and base layer, and this file. A host that already
|
|
7
|
+
* runs Tailwind over base styles of its own cannot take it, because the reset
|
|
8
|
+
* and the base layer would restyle the host. Such a host takes this file
|
|
9
|
+
* instead, after its own `@import "tailwindcss"`:
|
|
10
|
+
*
|
|
11
|
+
* @import "@nadicodeai/design-system/css/host";
|
|
12
|
+
* @import "@nadicodeai/ui/components.css";
|
|
13
|
+
*
|
|
14
|
+
* It carries the three things without which a component renders unstyled: the
|
|
15
|
+
* `@source` lines that let the host's Tailwind see the components' class names
|
|
16
|
+
* (Tailwind never scans node_modules), the `nc-*` utilities those names use,
|
|
17
|
+
* and the few rules that belong to a component and not to a page.
|
|
18
|
+
*
|
|
19
|
+
* What the host must already have: the shadcn role names in its own theme
|
|
20
|
+
* (`--color-popover`, `--color-border`, `--color-muted-foreground`, …), mapped
|
|
21
|
+
* to whatever it likes. The components name those roles (`bg-popover`), and a
|
|
22
|
+
* host without them gets no CSS for those classes. The roles are the host's so
|
|
23
|
+
* that its theming, skins included, reaches our components unchanged.
|
|
24
|
+
*/
|
|
25
|
+
|
|
26
|
+
/*
|
|
27
|
+
* The one glass material (DESIGN.md "Elevation & Depth"): floating chrome —
|
|
28
|
+
* menus, popovers, selects, comboboxes, the command palette, and bars — may
|
|
29
|
+
* carry it; content surfaces stay solid. Glass composites only over our own
|
|
30
|
+
* content, and its elevation falloff's edge ring stays its one separator.
|
|
31
|
+
* Declared as a utility so variant prefixes can gate it (navigation-menu's
|
|
32
|
+
* non-viewport popup). Reduced transparency falls back to the same solid
|
|
33
|
+
* surface at the same elevation.
|
|
34
|
+
*/
|
|
35
|
+
@utility nc-glass {
|
|
36
|
+
background: color-mix(in srgb, var(--popover) var(--nc-material-glass-opacity), transparent);
|
|
37
|
+
backdrop-filter: blur(var(--nc-material-glass-blur)) saturate(var(--nc-material-glass-saturation));
|
|
38
|
+
|
|
39
|
+
@media (prefers-reduced-transparency: reduce) {
|
|
40
|
+
background: var(--popover);
|
|
41
|
+
backdrop-filter: none;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/*
|
|
46
|
+
* The four elevation rungs. Each utility paints the whole recipe of its rung
|
|
47
|
+
* from the generated --nc-elevation-* token, whose last layer is the rung's
|
|
48
|
+
* own optical ring in the current mode (design-system DESIGN.md
|
|
49
|
+
* "core.elevation"). An elevated surface therefore draws no second edge:
|
|
50
|
+
* never pair one of these with border-*, ring-*, or another box-shadow
|
|
51
|
+
* (`nadicodeai/no-elevated-edge` enforces it). Declared as utilities so
|
|
52
|
+
* variant prefixes can gate them.
|
|
53
|
+
*/
|
|
54
|
+
@utility nc-elevation-resting {
|
|
55
|
+
box-shadow: var(--nc-elevation-resting);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
@utility nc-elevation-raised {
|
|
59
|
+
box-shadow: var(--nc-elevation-raised);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
@utility nc-elevation-floating {
|
|
63
|
+
box-shadow: var(--nc-elevation-floating);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
@utility nc-elevation-modal {
|
|
67
|
+
box-shadow: var(--nc-elevation-modal);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
/*
|
|
71
|
+
* The proxy focus outline: the one restatement of the canonical treatment
|
|
72
|
+
* above, for an element that carries the indicator on another element's
|
|
73
|
+
* behalf (the input group around its control, the OTP slot for the hidden
|
|
74
|
+
* input, the chart wrapper for its svg, the slider thumb). The call site adds
|
|
75
|
+
* the hue with outline-ring or outline-destructive and nothing else.
|
|
76
|
+
* Declared as a utility so variant prefixes can gate it, and so the style is
|
|
77
|
+
* literally `solid` rather than Tailwind's `--tw-outline-style`, which any
|
|
78
|
+
* outline-none or outline-hidden on the same element sets to `none` for good.
|
|
79
|
+
*/
|
|
80
|
+
@utility nc-focus-outline {
|
|
81
|
+
outline-style: solid;
|
|
82
|
+
outline-width: var(--outline-width-focus);
|
|
83
|
+
outline-offset: var(--outline-offset-focus);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
@layer components {
|
|
87
|
+
.nc-toast {
|
|
88
|
+
border: 0 !important;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
/*
|
|
93
|
+
* The canonical design-system module owns raw --nc-* mode aliases, semantic
|
|
94
|
+
* roles, and their Tailwind utility bridge for both root and scoped `.dark`
|
|
95
|
+
* surfaces.
|
|
96
|
+
*/
|
|
97
|
+
|
|
98
|
+
.toaster [data-sonner-toast][data-styled="true"] [data-description] {
|
|
99
|
+
color: var(--muted-foreground);
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.toaster [data-sonner-toast][data-styled="true"] [data-button] {
|
|
103
|
+
background: var(--popover-foreground);
|
|
104
|
+
color: var(--popover);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.toaster [data-sonner-toast][data-styled="true"] [data-cancel] {
|
|
108
|
+
background: var(--muted);
|
|
109
|
+
color: var(--popover-foreground);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.toaster [data-sonner-toast][data-styled="true"] [data-close-button] {
|
|
113
|
+
background: var(--popover);
|
|
114
|
+
border-color: var(--border);
|
|
115
|
+
color: var(--popover-foreground);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.toaster [data-sonner-toast][data-styled="true"] [data-close-button]:hover {
|
|
119
|
+
background: var(--accent);
|
|
120
|
+
border-color: var(--border);
|
|
121
|
+
color: var(--accent-foreground);
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
@source "../components";
|
|
125
|
+
@source "../internal";
|
|
126
|
+
@source "../lib";
|
package/dist/styles/globals.css
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
/*
|
|
2
2
|
* @nadicodeai/ui — Tailwind v4 + shadcn entry stylesheet.
|
|
3
3
|
*
|
|
4
|
-
* Tailwind and the complete design-system CSS module are composed here,
|
|
5
|
-
*
|
|
4
|
+
* Tailwind and the complete design-system CSS module are composed here, for an
|
|
5
|
+
* application this package styles whole. A host with base styles of its own
|
|
6
|
+
* takes `components.css`, which this file imports, and never this file. The generated raw-token theme,
|
|
6
7
|
* :root/.dark semantic role maps, and Tailwind semantic bridge come from
|
|
7
8
|
* DESIGN.md, so shadcn utilities (bg-background, text-foreground,
|
|
8
9
|
* border-border, …) resolve to brand tokens through one generated owner.
|
|
@@ -19,6 +20,7 @@
|
|
|
19
20
|
@import "@assistant-ui/react-markdown/styles/dot.css";
|
|
20
21
|
@import "./shadcn.tailwind.css";
|
|
21
22
|
@import "@nadicodeai/design-system/css";
|
|
23
|
+
@import "./components.css";
|
|
22
24
|
|
|
23
25
|
/*
|
|
24
26
|
* Tailwind v4's dark: variant defaults to an OS media query. Match shadcn's
|
|
@@ -76,105 +78,3 @@
|
|
|
76
78
|
stroke-linejoin: round;
|
|
77
79
|
}
|
|
78
80
|
}
|
|
79
|
-
|
|
80
|
-
/*
|
|
81
|
-
* The one glass material (DESIGN.md "Elevation & Depth"): floating chrome —
|
|
82
|
-
* menus, popovers, selects, comboboxes, the command palette, and bars — may
|
|
83
|
-
* carry it; content surfaces stay solid. Glass composites only over our own
|
|
84
|
-
* content, and its elevation falloff's edge ring stays its one separator.
|
|
85
|
-
* Declared as a utility so variant prefixes can gate it (navigation-menu's
|
|
86
|
-
* non-viewport popup). Reduced transparency falls back to the same solid
|
|
87
|
-
* surface at the same elevation.
|
|
88
|
-
*/
|
|
89
|
-
@utility nc-glass {
|
|
90
|
-
background: color-mix(in srgb, var(--popover) var(--nc-material-glass-opacity), transparent);
|
|
91
|
-
backdrop-filter: blur(var(--nc-material-glass-blur)) saturate(var(--nc-material-glass-saturation));
|
|
92
|
-
|
|
93
|
-
@media (prefers-reduced-transparency: reduce) {
|
|
94
|
-
background: var(--popover);
|
|
95
|
-
backdrop-filter: none;
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
/*
|
|
100
|
-
* The four elevation rungs. Each utility paints the whole recipe of its rung
|
|
101
|
-
* from the generated --nc-elevation-* token, whose last layer is the rung's
|
|
102
|
-
* own optical ring in the current mode (design-system DESIGN.md
|
|
103
|
-
* "core.elevation"). An elevated surface therefore draws no second edge:
|
|
104
|
-
* never pair one of these with border-*, ring-*, or another box-shadow
|
|
105
|
-
* (`nadicodeai/no-elevated-edge` enforces it). Declared as utilities so
|
|
106
|
-
* variant prefixes can gate them.
|
|
107
|
-
*/
|
|
108
|
-
@utility nc-elevation-resting {
|
|
109
|
-
box-shadow: var(--nc-elevation-resting);
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
@utility nc-elevation-raised {
|
|
113
|
-
box-shadow: var(--nc-elevation-raised);
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
@utility nc-elevation-floating {
|
|
117
|
-
box-shadow: var(--nc-elevation-floating);
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
@utility nc-elevation-modal {
|
|
121
|
-
box-shadow: var(--nc-elevation-modal);
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
/*
|
|
125
|
-
* The proxy focus outline: the one restatement of the canonical treatment
|
|
126
|
-
* above, for an element that carries the indicator on another element's
|
|
127
|
-
* behalf (the input group around its control, the OTP slot for the hidden
|
|
128
|
-
* input, the chart wrapper for its svg, the slider thumb). The call site adds
|
|
129
|
-
* the hue with outline-ring or outline-destructive and nothing else.
|
|
130
|
-
* Declared as a utility so variant prefixes can gate it, and so the style is
|
|
131
|
-
* literally `solid` rather than Tailwind's `--tw-outline-style`, which any
|
|
132
|
-
* outline-none or outline-hidden on the same element sets to `none` for good.
|
|
133
|
-
*/
|
|
134
|
-
@utility nc-focus-outline {
|
|
135
|
-
outline-style: solid;
|
|
136
|
-
outline-width: var(--outline-width-focus);
|
|
137
|
-
outline-offset: var(--outline-offset-focus);
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
@layer components {
|
|
141
|
-
.nc-toast {
|
|
142
|
-
border: 0 !important;
|
|
143
|
-
}
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
/*
|
|
147
|
-
* The canonical design-system module owns raw --nc-* mode aliases, semantic
|
|
148
|
-
* roles, and their Tailwind utility bridge for both root and scoped `.dark`
|
|
149
|
-
* surfaces.
|
|
150
|
-
*/
|
|
151
|
-
|
|
152
|
-
.toaster [data-sonner-toast][data-styled="true"] [data-description] {
|
|
153
|
-
color: var(--muted-foreground);
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
.toaster [data-sonner-toast][data-styled="true"] [data-button] {
|
|
157
|
-
background: var(--popover-foreground);
|
|
158
|
-
color: var(--popover);
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
.toaster [data-sonner-toast][data-styled="true"] [data-cancel] {
|
|
162
|
-
background: var(--muted);
|
|
163
|
-
color: var(--popover-foreground);
|
|
164
|
-
}
|
|
165
|
-
|
|
166
|
-
.toaster [data-sonner-toast][data-styled="true"] [data-close-button] {
|
|
167
|
-
background: var(--popover);
|
|
168
|
-
border-color: var(--border);
|
|
169
|
-
color: var(--popover-foreground);
|
|
170
|
-
}
|
|
171
|
-
|
|
172
|
-
.toaster [data-sonner-toast][data-styled="true"] [data-close-button]:hover {
|
|
173
|
-
background: var(--accent);
|
|
174
|
-
border-color: var(--border);
|
|
175
|
-
color: var(--accent-foreground);
|
|
176
|
-
}
|
|
177
|
-
|
|
178
|
-
@source "../components";
|
|
179
|
-
@source "../internal";
|
|
180
|
-
@source "../lib";
|
package/docs/contract.md
CHANGED
|
@@ -6,7 +6,7 @@ The normative invariants for the `@nadicodeai/ui` package: what may live here, h
|
|
|
6
6
|
|
|
7
7
|
- **Token-only, no raw literals or shadow aliases.** Components style through semantic shadcn utilities (`bg-background`, `text-foreground`, `border-input`, and the rest), or a canonical generated design-system token when no standard role is precise enough. The UI package does not mint screen-, component-, or product-specific color aliases. No raw `#hex` / `rgb()` / `hsl()` may appear in `.tsx`; a new source value goes to `packages/design-system/DESIGN.md` first and flows through generated output. A narrow protocol adapter may translate third-party classes directly to canonical tokens in `globals.css`, but it must not create another token vocabulary. Enforced by the raw-colour `no-restricted-syntax` selectors in the library ESLint config, `packages/ui/tests/guards/dark-semantic-roles.test.ts`, and `packages/ui/tests/guards/token-reference-integrity.test.ts`.
|
|
8
8
|
- **Dark-ready semantics, no component dark implementation.** Components use the same semantic role or canonical mode-aware token in every mode. They must not ship Tailwind `dark:` color utilities, component-local `.dark` blocks, OS dark-mode branching, or raw dark palette utilities such as `dark:bg-slate-950` and `dark:text-white`. An intentionally fixed-presentation technology surface, such as the dark terminal console, selects canonical fixed-mode tokens as one coherent component treatment rather than branching by app theme. Enforced by `packages/ui/tests/guards/no-dark.test.ts`, `packages/ui/tests/guards/dark-semantic-roles.test.ts`, and `packages/ui/tests/guards/token-reference-integrity.test.ts`. The generated mode and theme architecture lives only in [`packages/design-system/DESIGN.md`](../../design-system/DESIGN.md#css-architecture--token-pipeline).
|
|
9
|
-
- **Components inherit one complete React style interface.** `@nadicodeai/ui/globals.css` composes every style dependency owned by this package, including the complete design-system CSS module. Components carry no theme of their own, and React callers do not compose design-system stylesheets or partials beside it. Installation and source-scanning setup live in the [consumer setup guide](consuming-cross-repo.md). `@nadicodeai/ui/globals.css` is
|
|
9
|
+
- **Components inherit one complete React style interface.** `@nadicodeai/ui/globals.css` composes every style dependency owned by this package, including the complete design-system CSS module. Components carry no theme of their own, and React callers do not compose design-system stylesheets or partials beside it. Installation and source-scanning setup live in the [consumer setup guide](consuming-cross-repo.md). The package ships two stylesheets, split by who owns the page. `@nadicodeai/ui/globals.css` is for an application this design system styles whole: it imports Tailwind, the complete design system with its reset and base layer, and the second file. `@nadicodeai/ui/components.css` is for a host that already runs Tailwind over base styles of its own, such as the Nadia desktop inside Hermes's shell: it carries the `@source` lines, the `nc-*` utilities and the component-owned rules, and nothing that lands on a page. That host imports `@nadicodeai/design-system/css/host` before it, which adds the Tailwind keys only this design system names and leaves the host its shadcn roles, its radius scale and its palette. The components render in both from one source, which is what keeps the products consistent. A surface that loads no Tailwind layer takes the design system's token artifact and writes its own rules against it.
|
|
10
10
|
- **Design-system geometry remains the foundation.** React components compose the kept `nc-*` page grammar and display CSS components; they do not redefine frame math, marker placement, token values, or raw CSS geometry. Use parent-paints-plus-gap for bordered cell grids and keep every visible seam single-owner (doctrine home: `packages/design-system/DESIGN.md` "## Layout").
|
|
11
11
|
|
|
12
12
|
### Persistent notices
|
|
@@ -21,7 +21,7 @@ read-only and stale-data notices use this shared composition directly.
|
|
|
21
21
|
|
|
22
22
|
### Material surfaces
|
|
23
23
|
|
|
24
|
-
`globals.css` declares the four elevation utilities, `nc-elevation-resting`,
|
|
24
|
+
`components.css`, which `globals.css` imports, declares the four elevation utilities, `nc-elevation-resting`,
|
|
25
25
|
`nc-elevation-raised`, `nc-elevation-floating`, and `nc-elevation-modal`. Each
|
|
26
26
|
sets `box-shadow` to the generated `--nc-elevation-<rung>` token, pinned by
|
|
27
27
|
`packages/design-system/DESIGN.md` "core.elevation": one recipe per rung per
|
|
@@ -148,7 +148,7 @@ states to the orb.
|
|
|
148
148
|
- **Charts are stock shadcn charts.** Every chart and KPI here is a registry item, changed as little as possible: `chart.tsx` is shadcn's `chart` over Recharts; `chart-bar-stacked`, `chart-area-stacked`, and `chart-bar-multiple` are the blocks of those names; `chart-sparkline` is `chart-line-linear` stripped of its card, axes, grid and tooltip; `kpi-card` is the `dashboard-01` block's section card; `chart-card` is their shared Card frame. Each pulled file names its registry item on line one. `base-nova` does not publish the chart gallery and the CLI search does not list it, so a chart the kit lacks is pulled from `https://ui.shadcn.com/r/styles/new-york-v4/<name>.json` (`files[0].content`) and added here. What deviates from stock, and why, is listed once in [`DESIGN.md`, "Chart source"](../../design-system/DESIGN.md#chart-source); a change to a pulled chart that is not on that list is drift. There is no hidden table twin, no mark inside a legend, and no second axis. Every chart component renders the whole card — `Card > CardHeader(CardTitle, CardDescription, CardAction) > CardContent(ChartContainer) > CardFooter?` — at a fixed plot height (`h-64`, `h-80` at `size="lg"`), legend below the plot, left-aligned and wrapping. An app composes these, never builds a chart card frame by hand, and never imports `recharts`, which this package alone declares. Which chart a reading question deserves is owned by [`skills/design/product-design/references/charts.md`](../../../skills/design/product-design/references/charts.md).
|
|
149
149
|
|
|
150
150
|
- **Named shadcn blocks stay named.** When a user, plan, or issue selects a shadcn block/example such as `login-02`, `signup-02`, `dashboard-01`, or `sidebar-*`, use that registry item as the source of truth through shadcn CLI/MCP. Do not replace it with a package-authored abstraction unless the plan explicitly records the substitution, the reason, and the true consumer route that proves it.
|
|
151
|
-
- **A change to what the package ships bumps the version.** Any change to exported components, `src/index.ts`, package `exports`, `globals.css`, theme behavior, package docs, or design-system token, CSS, or theme output this package consumes bumps both package versions in lockstep before handoff, and `npm pack --dry-run -w @nadicodeai/ui` shows exactly what consumers receive (procedure: `../../../docs/agents/publish.md`).
|
|
151
|
+
- **A change to what the package ships bumps the version.** Any change to exported components, `src/index.ts`, package `exports`, `globals.css`, `components.css`, theme behavior, package docs, or design-system token, CSS, or theme output this package consumes bumps both package versions in lockstep before handoff, and `npm pack --dry-run -w @nadicodeai/ui` shows exactly what consumers receive (procedure: `../../../docs/agents/publish.md`).
|
|
152
152
|
|
|
153
153
|
## Admission Rules
|
|
154
154
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nadicodeai/ui",
|
|
3
|
-
"version": "8.0
|
|
3
|
+
"version": "8.1.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -14,6 +14,7 @@
|
|
|
14
14
|
"import": "./dist/index.js"
|
|
15
15
|
},
|
|
16
16
|
"./globals.css": "./dist/styles/globals.css",
|
|
17
|
+
"./components.css": "./dist/styles/components.css",
|
|
17
18
|
"./eslint": "./dist/eslint/index.js",
|
|
18
19
|
"./agents": {
|
|
19
20
|
"types": "./dist/agents.d.ts",
|
|
@@ -65,7 +66,7 @@
|
|
|
65
66
|
"@assistant-ui/react": "0.15.20",
|
|
66
67
|
"@assistant-ui/react-markdown": "0.14.15",
|
|
67
68
|
"@base-ui/react": "^1.8.0",
|
|
68
|
-
"@nadicodeai/design-system": "8.0
|
|
69
|
+
"@nadicodeai/design-system": "8.1.0",
|
|
69
70
|
"@paper-design/shaders": "0.0.81",
|
|
70
71
|
"class-variance-authority": "^0.7.1",
|
|
71
72
|
"clsx": "^2.1.1",
|