@hanzo/ui 8.0.40 → 8.0.42
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/backends/gui/badge.cjs +1 -1
- package/dist/backends/gui/badge.d.ts.map +1 -1
- package/dist/backends/gui/badge.js +1 -1
- package/dist/backends/gui/badge.js.map +1 -1
- package/dist/backends/gui/button.cjs +5 -2
- package/dist/backends/gui/button.d.ts.map +1 -1
- package/dist/backends/gui/button.js +5 -2
- package/dist/backends/gui/button.js.map +1 -1
- package/dist/backends/gui/card.cjs +3 -2
- package/dist/backends/gui/card.d.ts +2 -2
- package/dist/backends/gui/card.d.ts.map +1 -1
- package/dist/backends/gui/card.js +3 -2
- package/dist/backends/gui/card.js.map +1 -1
- package/dist/backends/gui/collapsible.cjs +6 -1
- package/dist/backends/gui/collapsible.d.ts +1 -1
- package/dist/backends/gui/collapsible.d.ts.map +1 -1
- package/dist/backends/gui/collapsible.js +6 -1
- package/dist/backends/gui/collapsible.js.map +1 -1
- package/dist/backends/gui/scroll-area.cjs +2 -1
- package/dist/backends/gui/scroll-area.d.ts.map +1 -1
- package/dist/backends/gui/scroll-area.js +2 -1
- package/dist/backends/gui/scroll-area.js.map +1 -1
- package/dist/backends/gui/slider.cjs +8 -1
- package/dist/backends/gui/slider.d.ts.map +1 -1
- package/dist/backends/gui/slider.js +8 -1
- package/dist/backends/gui/slider.js.map +1 -1
- package/dist/backends/gui/switch.cjs +3 -1
- package/dist/backends/gui/switch.d.ts.map +1 -1
- package/dist/backends/gui/switch.js +3 -1
- package/dist/backends/gui/switch.js.map +1 -1
- package/dist/backends/gui/tabs.cjs +1 -1
- package/dist/backends/gui/tabs.d.ts +1 -1
- package/dist/backends/gui/tabs.d.ts.map +1 -1
- package/dist/backends/gui/tabs.js +1 -1
- package/dist/backends/gui/tabs.js.map +1 -1
- package/dist/core/cn.cjs +1 -1
- package/dist/core/cn.d.ts +1 -1
- package/dist/core/cn.js +1 -1
- package/dist/gallery.cjs +23 -0
- package/dist/gallery.d.ts +7 -0
- package/dist/gallery.d.ts.map +1 -0
- package/dist/gallery.js +20 -0
- package/dist/gallery.js.map +1 -0
- package/dist/gui-config.cjs +1 -1
- package/dist/gui-config.js +1 -1
- package/dist/gui-config.js.map +1 -1
- package/dist/index.cjs +6 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +4 -0
- package/dist/index.js.map +1 -1
- package/dist/product/DataTable.cjs +4 -4
- package/dist/product/DataTable.js +4 -4
- package/dist/product/DataTable.js.map +1 -1
- package/dist/product/FadeIn.cjs +1 -1
- package/dist/product/FadeIn.d.ts +1 -1
- package/dist/product/FadeIn.js +1 -1
- package/dist/product/FadeIn.js.map +1 -1
- package/dist/product/Metric.cjs +2 -2
- package/dist/product/Metric.js +2 -2
- package/dist/product/Metric.js.map +1 -1
- package/dist/product/Reorder.cjs +1 -1
- package/dist/product/Reorder.js +1 -1
- package/dist/product/Reorder.js.map +1 -1
- package/dist/product/SlideOver.cjs +3 -3
- package/dist/product/SlideOver.d.ts +1 -1
- package/dist/product/SlideOver.js +3 -3
- package/dist/product/SlideOver.js.map +1 -1
- package/dist/product/social/SocialResource.cjs +1 -1
- package/dist/product/social/SocialResource.js +1 -1
- package/dist/product/social/SocialResource.js.map +1 -1
- package/dist/product/social/SocialSummaryBar.cjs +1 -1
- package/dist/product/social/SocialSummaryBar.js +1 -1
- package/dist/product/social/SocialSummaryBar.js.map +1 -1
- package/dist/root.cjs +67 -0
- package/dist/root.d.ts +10 -0
- package/dist/root.d.ts.map +1 -0
- package/dist/root.js +64 -0
- package/dist/root.js.map +1 -0
- package/dist/styles/{hanzo-motion.css → motion.css} +34 -34
- package/dist/styles.css +1259 -0
- package/dist/theme.css +75 -44
- package/package.json +15 -5
package/dist/theme.css
CHANGED
|
@@ -9,14 +9,18 @@
|
|
|
9
9
|
* transparent). Values originate in `@hanzo/tokens` (dark/light theme sets) —
|
|
10
10
|
* the same source `@hanzo/ui/tokens` exposes to code — so CSS and runtime agree.
|
|
11
11
|
*
|
|
12
|
-
* Dark-first Hanzo identity: neutral zinc-on-black, calm, high-contrast.
|
|
13
|
-
*
|
|
14
|
-
*
|
|
12
|
+
* Dark-first Hanzo identity: neutral zinc-on-black, calm, high-contrast. `:root`
|
|
13
|
+
* IS the dark look — the file said "dark-first" while shipping light at `:root`,
|
|
14
|
+
* so an app that mounted <Hanzo> (dark by default) and read `--background` in its
|
|
15
|
+
* own CSS got white. `.light` retunes. Both themes also answer to gui's own
|
|
16
|
+
* `.t_light` / `.t_dark`, which <Hanzo> stamps on the body, so the CSS custom
|
|
17
|
+
* properties and the component tokens name one theme and never disagree.
|
|
18
|
+
* Typography is Geist Sans (UI/body) + Geist Mono (code) — bound
|
|
15
19
|
* through `--font-geist-sans` / `--font-geist-mono`; a host that loads Geist
|
|
16
20
|
* (next/font, @fontsource, CDN) binds those variables and everything inherits
|
|
17
21
|
* it. No Inter, no system-stack default anywhere.
|
|
18
22
|
*
|
|
19
|
-
* Plain CSS, nothing else: `:root
|
|
23
|
+
* Plain CSS, nothing else: `:root` / `.light` custom properties plus the base font
|
|
20
24
|
* and the touch/elevation rules the components name. The Tailwind v4 `@theme
|
|
21
25
|
* inline` block that used to map these onto utilities is gone with Tailwind.
|
|
22
26
|
*/
|
|
@@ -30,10 +34,52 @@
|
|
|
30
34
|
--font-geist-mono: var(--font-geist-mono-provided, 'Geist Mono');
|
|
31
35
|
}
|
|
32
36
|
|
|
33
|
-
/*
|
|
34
|
-
:
|
|
37
|
+
/* Dark-first Hanzo identity — neutral zinc-on-black.
|
|
38
|
+
Borders are HAIRLINES: 10% white, never a solid chalk line on black. */
|
|
39
|
+
:root,
|
|
40
|
+
.dark,
|
|
41
|
+
.t_dark {
|
|
35
42
|
--radius: 0.5rem;
|
|
36
43
|
|
|
44
|
+
--background: oklch(0.145 0 0);
|
|
45
|
+
--foreground: oklch(0.985 0 0);
|
|
46
|
+
--card: oklch(0.205 0 0);
|
|
47
|
+
--card-foreground: oklch(0.985 0 0);
|
|
48
|
+
--popover: oklch(0.269 0 0);
|
|
49
|
+
--popover-foreground: oklch(0.985 0 0);
|
|
50
|
+
--primary: oklch(0.922 0 0);
|
|
51
|
+
--primary-foreground: oklch(0.205 0 0);
|
|
52
|
+
--secondary: oklch(0.269 0 0);
|
|
53
|
+
--secondary-foreground: oklch(0.985 0 0);
|
|
54
|
+
--muted: oklch(0.269 0 0);
|
|
55
|
+
--muted-foreground: oklch(0.708 0 0);
|
|
56
|
+
--accent: oklch(0.371 0 0);
|
|
57
|
+
--accent-foreground: oklch(0.985 0 0);
|
|
58
|
+
--destructive: oklch(0.704 0.191 22.216);
|
|
59
|
+
--border: oklch(1 0 0 / 10%);
|
|
60
|
+
--input: oklch(1 0 0 / 15%);
|
|
61
|
+
--ring: oklch(0.556 0 0);
|
|
62
|
+
|
|
63
|
+
--chart-1: oklch(0.488 0.243 264.376);
|
|
64
|
+
--chart-2: oklch(0.696 0.17 162.48);
|
|
65
|
+
--chart-3: oklch(0.769 0.188 70.08);
|
|
66
|
+
--chart-4: oklch(0.627 0.265 303.9);
|
|
67
|
+
--chart-5: oklch(0.645 0.246 16.439);
|
|
68
|
+
|
|
69
|
+
--sidebar: oklch(0.205 0 0);
|
|
70
|
+
--sidebar-foreground: oklch(0.985 0 0);
|
|
71
|
+
--sidebar-primary: oklch(0.488 0.243 264.376);
|
|
72
|
+
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
73
|
+
--sidebar-accent: oklch(0.269 0 0);
|
|
74
|
+
--sidebar-accent-foreground: oklch(0.985 0 0);
|
|
75
|
+
--sidebar-border: oklch(1 0 0 / 10%);
|
|
76
|
+
--sidebar-ring: oklch(0.439 0 0);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
/* Light — the counterpart. Ordered before `.dark` so an explicit `.dark` inside
|
|
80
|
+
a light subtree still wins the specificity tie. */
|
|
81
|
+
.light,
|
|
82
|
+
.t_light {
|
|
37
83
|
--background: oklch(1 0 0);
|
|
38
84
|
--foreground: oklch(0.145 0 0);
|
|
39
85
|
--card: oklch(1 0 0);
|
|
@@ -69,41 +115,26 @@
|
|
|
69
115
|
--sidebar-ring: oklch(0.708 0 0);
|
|
70
116
|
}
|
|
71
117
|
|
|
72
|
-
/*
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
--primary: oklch(0.922 0 0);
|
|
81
|
-
--primary-foreground: oklch(0.205 0 0);
|
|
82
|
-
--secondary: oklch(0.269 0 0);
|
|
83
|
-
--secondary-foreground: oklch(0.985 0 0);
|
|
84
|
-
--muted: oklch(0.269 0 0);
|
|
85
|
-
--muted-foreground: oklch(0.708 0 0);
|
|
86
|
-
--accent: oklch(0.371 0 0);
|
|
87
|
-
--accent-foreground: oklch(0.985 0 0);
|
|
88
|
-
--destructive: oklch(0.704 0.191 22.216);
|
|
89
|
-
--border: oklch(1 0 0 / 10%);
|
|
90
|
-
--input: oklch(1 0 0 / 15%);
|
|
91
|
-
--ring: oklch(0.556 0 0);
|
|
92
|
-
|
|
93
|
-
--chart-1: oklch(0.488 0.243 264.376);
|
|
94
|
-
--chart-2: oklch(0.696 0.17 162.48);
|
|
95
|
-
--chart-3: oklch(0.769 0.188 70.08);
|
|
96
|
-
--chart-4: oklch(0.627 0.265 303.9);
|
|
97
|
-
--chart-5: oklch(0.645 0.246 16.439);
|
|
118
|
+
/* ── The UA reset ─────────────────────────────────────────────────────────────
|
|
119
|
+
gui renders REAL <button>, <input> and <textarea> elements, and the browser
|
|
120
|
+
has opinions about those: a button is #efefef with a 2px OUTSET border. gui
|
|
121
|
+
compiles style props to border-WIDTH and border-COLOR and never emits
|
|
122
|
+
border-STYLE, so the UA's `outset` survived every one of them — which is why
|
|
123
|
+
a Collapsible trigger rendered as a white bar across a dark page and a Switch
|
|
124
|
+
wore a 2px black ring. A <div> was never affected (its border-style starts at
|
|
125
|
+
`none`), so this only ever showed on the components that are really buttons.
|
|
98
126
|
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
127
|
+
`:where()` carries ZERO specificity, so every gui atomic class still wins;
|
|
128
|
+
`border: 0 solid transparent` leaves the STYLE resolved so that a component
|
|
129
|
+
setting only a width and a colour actually draws its line. */
|
|
130
|
+
:where(button, input, textarea) {
|
|
131
|
+
appearance: none;
|
|
132
|
+
background-color: transparent;
|
|
133
|
+
border: 0 solid transparent;
|
|
134
|
+
color: inherit;
|
|
135
|
+
font: inherit;
|
|
136
|
+
margin: 0;
|
|
137
|
+
padding: 0;
|
|
107
138
|
}
|
|
108
139
|
|
|
109
140
|
/* Geist by default — UI/body inherits Geist Sans; code/mono surfaces get Geist
|
|
@@ -179,7 +210,7 @@
|
|
|
179
210
|
[data-touch-y="24"]::after { top: -24px; bottom: -24px; }
|
|
180
211
|
|
|
181
212
|
/* Elevation ladder — the shadow steps components name by class. */
|
|
182
|
-
.
|
|
183
|
-
.
|
|
184
|
-
.
|
|
185
|
-
.
|
|
213
|
+
.elevation-1 { box-shadow: var(--hz-elevation-1, 0 1px 2px rgba(0, 0, 0, 0.16)); }
|
|
214
|
+
.elevation-2 { box-shadow: var(--hz-elevation-2, 0 4px 12px rgba(0, 0, 0, 0.24)); }
|
|
215
|
+
.elevation-3 { box-shadow: var(--hz-elevation-3, 0 8px 24px rgba(0, 0, 0, 0.36)); }
|
|
216
|
+
.elevation-4 { box-shadow: var(--hz-elevation-4, 0 16px 48px rgba(0, 0, 0, 0.44)); }
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hanzo/ui",
|
|
3
|
-
"version": "8.0.
|
|
3
|
+
"version": "8.0.42",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Hanzo UI — the one canonical Hanzo component library, on @hanzo/gui + @hanzo/tokens. ONE substrate: every component renders through @hanzo/gui primitives, so the same import works on web, native (expo) and desktop (Tauri). Self-contained (theme.css), presentational, host-agnostic, clean-room.",
|
|
6
6
|
"exports": {
|
|
@@ -10,6 +10,13 @@
|
|
|
10
10
|
"require": "./dist/index.cjs",
|
|
11
11
|
"default": "./dist/index.js"
|
|
12
12
|
},
|
|
13
|
+
"./gallery": {
|
|
14
|
+
"types": "./dist/gallery.d.ts",
|
|
15
|
+
"import": "./dist/gallery.js",
|
|
16
|
+
"require": "./dist/gallery.cjs",
|
|
17
|
+
"default": "./dist/gallery.js"
|
|
18
|
+
},
|
|
19
|
+
"./styles.css": "./dist/styles.css",
|
|
13
20
|
"./models": {
|
|
14
21
|
"types": "./dist/models/index.d.ts",
|
|
15
22
|
"import": "./dist/models/index.js",
|
|
@@ -136,7 +143,7 @@
|
|
|
136
143
|
"require": "./dist/telemetry.cjs",
|
|
137
144
|
"default": "./dist/telemetry.js"
|
|
138
145
|
},
|
|
139
|
-
"./styles/motion.css": "./dist/styles/
|
|
146
|
+
"./styles/motion.css": "./dist/styles/motion.css",
|
|
140
147
|
"./package.json": "./package.json"
|
|
141
148
|
},
|
|
142
149
|
"main": "./dist/index.cjs",
|
|
@@ -214,6 +221,7 @@
|
|
|
214
221
|
"react-native-web": "^0.21.2",
|
|
215
222
|
"typescript": "^5.9.3",
|
|
216
223
|
"vitest": "^4.1.8",
|
|
224
|
+
"@playwright/test": "^1.61.0",
|
|
217
225
|
"@hanzo/cd": "0.1.1"
|
|
218
226
|
},
|
|
219
227
|
"publishConfig": {
|
|
@@ -222,13 +230,15 @@
|
|
|
222
230
|
"license": "BSD-3-Clause",
|
|
223
231
|
"author": "Hanzo AI <dev@hanzo.ai>",
|
|
224
232
|
"scripts": {
|
|
225
|
-
"build": "rm -rf dist dist-cjs && tsc -p tsconfig.build.json && tsc -p tsconfig.cjs.json --noCheck && mkdir -p dist/styles && cp src/theme.css dist/theme.css && cp src/styles/
|
|
233
|
+
"build": "rm -rf dist dist-cjs && tsc -p tsconfig.build.json && tsc -p tsconfig.cjs.json --noCheck && mkdir -p dist/styles && cp src/theme.css dist/theme.css && cp src/styles/motion.css dist/styles/motion.css && node scripts/postbuild.mjs && node scripts/gen-css.mjs",
|
|
226
234
|
"clean": "rm -rf dist dist-cjs types",
|
|
227
235
|
"gen:primitives": "node scripts/gen-primitives.mjs",
|
|
228
236
|
"tc": "tsc --noEmit",
|
|
229
237
|
"typecheck": "tsc --noEmit",
|
|
230
238
|
"typecheck:ui": "tsc -p tsconfig.check.json",
|
|
231
|
-
"test": "vitest run",
|
|
232
|
-
"test:watch": "vitest"
|
|
239
|
+
"test": "vitest run && node scripts/consumer-test.mjs",
|
|
240
|
+
"test:watch": "vitest",
|
|
241
|
+
"test:consumer": "node scripts/consumer-test.mjs",
|
|
242
|
+
"test:unit": "vitest run"
|
|
233
243
|
}
|
|
234
244
|
}
|