@saasflare/ui 3.1.1 → 3.2.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 +68 -2
- package/dist/{button-0Bdl7Nqm.d.ts → button-BA7OcXqy.d.mts} +12 -17
- package/dist/{button-Brb4BhPO.d.mts → button-Bfg2Tnvx.d.ts} +12 -17
- package/dist/{chunk-D5LKWKG7.js → chunk-2GOPD64T.js} +117 -89
- package/dist/{chunk-WPOOC2FX.mjs → chunk-2ONA6OMO.mjs} +33 -44
- package/dist/{chunk-RW2S3KNB.mjs → chunk-5C65JNGY.mjs} +7 -6
- package/dist/{chunk-DNLCSV5M.js → chunk-7UD3SGPP.js} +32 -43
- package/dist/chunk-GI6VN7XU.mjs +2143 -0
- package/dist/{chunk-FT66KYRN.js → chunk-ITALEYDI.js} +2 -2
- package/dist/{chunk-4BOMMZEY.js → chunk-JC7EIEGI.js} +14 -13
- package/dist/chunk-N65HIOBD.js +234 -0
- package/dist/{chunk-EJHYM2HP.mjs → chunk-OZAWULTM.mjs} +1 -1
- package/dist/chunk-R3AVBLJ3.js +2207 -0
- package/dist/{chunk-WRONFPRI.mjs → chunk-RMQBB72G.mjs} +118 -91
- package/dist/chunk-XNDTCYSO.mjs +211 -0
- package/dist/{dialog-BmY55WSX.d.ts → dialog-CZRwrqDa.d.ts} +2 -2
- package/dist/{dialog-CcaHMAsS.d.mts → dialog-Cr0becOL.d.mts} +2 -2
- package/dist/entries/calendar.d.mts +3 -3
- package/dist/entries/calendar.d.ts +3 -3
- package/dist/entries/calendar.js +13 -214
- package/dist/entries/calendar.mjs +5 -196
- package/dist/entries/carousel.d.mts +3 -3
- package/dist/entries/carousel.d.ts +3 -3
- package/dist/entries/carousel.js +17 -14
- package/dist/entries/carousel.mjs +10 -7
- package/dist/entries/chart.d.mts +1 -1
- package/dist/entries/chart.d.ts +1 -1
- package/dist/entries/chart.js +11 -11
- package/dist/entries/chart.mjs +1 -1
- package/dist/entries/command.d.mts +3 -3
- package/dist/entries/command.d.ts +3 -3
- package/dist/entries/command.js +21 -19
- package/dist/entries/command.mjs +8 -6
- package/dist/entries/drawer.d.mts +1 -1
- package/dist/entries/drawer.d.ts +1 -1
- package/dist/entries/drawer.js +9 -9
- package/dist/entries/drawer.mjs +2 -2
- package/dist/entries/input-otp.d.mts +2 -2
- package/dist/entries/input-otp.d.ts +2 -2
- package/dist/entries/input-otp.js +10 -8
- package/dist/entries/input-otp.mjs +6 -4
- package/dist/entries/resizable.d.mts +3 -2
- package/dist/entries/resizable.d.ts +3 -2
- package/dist/entries/resizable.js +8 -6
- package/dist/entries/resizable.mjs +6 -4
- package/dist/index.d.mts +974 -31
- package/dist/index.d.ts +974 -31
- package/dist/index.js +2994 -556
- package/dist/index.mjs +2488 -201
- package/dist/{use-saasflare-props-NrM2Glmp.d.ts → use-saasflare-props-BrjMhU0U.d.mts} +53 -4
- package/dist/{use-saasflare-props-NrM2Glmp.d.mts → use-saasflare-props-BrjMhU0U.d.ts} +53 -4
- package/package.json +4 -3
- package/styles/aurora.css +47 -0
- package/styles/palettes.css +487 -3
- package/styles/surfaces.css +89 -10
- package/styles/theme.css +41 -19
package/styles/theme.css
CHANGED
|
@@ -26,6 +26,7 @@
|
|
|
26
26
|
@import "tailwindcss";
|
|
27
27
|
@import "./motion.css";
|
|
28
28
|
@import "./surfaces.css";
|
|
29
|
+
@import "./aurora.css";
|
|
29
30
|
@import "./palettes.css";
|
|
30
31
|
|
|
31
32
|
/* Tailwind v4 source discovery — scan the package itself so consumers
|
|
@@ -91,13 +92,13 @@
|
|
|
91
92
|
--ring: oklch(var(--primary-l) var(--primary-c) var(--primary-h));
|
|
92
93
|
|
|
93
94
|
/* ── Semantic (fixed hues, brand-independent) ── */
|
|
94
|
-
--destructive: oklch(0.
|
|
95
|
+
--destructive: oklch(0.583 0.239 28.476);
|
|
95
96
|
--destructive-foreground: oklch(1 0 0);
|
|
96
|
-
--success: oklch(0.
|
|
97
|
-
--success-foreground: oklch(
|
|
98
|
-
--warning: oklch(0.
|
|
99
|
-
--warning-foreground: oklch(0.22 0.05
|
|
100
|
-
--info: oklch(0.
|
|
97
|
+
--success: oklch(0.750 0.146 161.279);
|
|
98
|
+
--success-foreground: oklch(0.22 0.05 161);
|
|
99
|
+
--warning: oklch(0.849 0.144 93.533);
|
|
100
|
+
--warning-foreground: oklch(0.22 0.05 93);
|
|
101
|
+
--info: oklch(0.590 0.133 254.001);
|
|
101
102
|
--info-foreground: oklch(1 0 0);
|
|
102
103
|
|
|
103
104
|
/* ── Charts (offsets from primary hue) ── */
|
|
@@ -149,14 +150,14 @@
|
|
|
149
150
|
--input: oklch(1 0 0 / 0.15);
|
|
150
151
|
--ring: oklch(var(--primary-l) var(--primary-c) var(--primary-h));
|
|
151
152
|
|
|
152
|
-
--destructive: oklch(0.
|
|
153
|
-
--destructive-foreground: oklch(0
|
|
154
|
-
--success: oklch(0.
|
|
155
|
-
--success-foreground: oklch(0.
|
|
156
|
-
--warning: oklch(0.
|
|
157
|
-
--warning-foreground: oklch(0.
|
|
158
|
-
--info: oklch(0.
|
|
159
|
-
--info-foreground: oklch(0
|
|
153
|
+
--destructive: oklch(0.700 0.200 28.476);
|
|
154
|
+
--destructive-foreground: oklch(1 0 0);
|
|
155
|
+
--success: oklch(0.770 0.146 161.279);
|
|
156
|
+
--success-foreground: oklch(0.22 0.05 161);
|
|
157
|
+
--warning: oklch(0.830 0.150 93.533);
|
|
158
|
+
--warning-foreground: oklch(0.22 0.05 93);
|
|
159
|
+
--info: oklch(0.680 0.140 254.001);
|
|
160
|
+
--info-foreground: oklch(1 0 0);
|
|
160
161
|
|
|
161
162
|
--chart-1: oklch(var(--primary-l) var(--primary-c) var(--primary-h));
|
|
162
163
|
--chart-2: oklch(0.68 0.19 calc(var(--primary-h) - 110));
|
|
@@ -330,20 +331,25 @@ textarea,
|
|
|
330
331
|
}
|
|
331
332
|
|
|
332
333
|
/* ============================================
|
|
333
|
-
* Radius axis — discrete preset switched via [data-radius]
|
|
334
|
+
* Radius axis — discrete preset switched via [data-radius].
|
|
334
335
|
*
|
|
335
336
|
* Baseline default is "rounded" (set in :root above as --radius: 0.625rem).
|
|
336
337
|
* "pill" overrides the entire derived scale explicitly: relying on calc()
|
|
337
338
|
* would give 9995–10003px for sm/lg, which is visually pill on tall elements
|
|
338
339
|
* but NOT pill on a 200px-wide component. Lock the whole scale instead.
|
|
339
340
|
*
|
|
341
|
+
* The selectors deliberately drop the `:root` prefix so a per-component
|
|
342
|
+
* `data-radius` attribute (e.g. `<Button radius="pill">`) creates its own
|
|
343
|
+
* cascade scope and overrides the inherited page-wide value. Without that
|
|
344
|
+
* scope a component-level `radius` prop would have no visible effect.
|
|
345
|
+
*
|
|
340
346
|
* Custom per-palette override (CustomPalette.radius) sets --radius inline
|
|
341
347
|
* and wins by specificity — intentional escape hatch.
|
|
342
348
|
* ============================================ */
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
349
|
+
[data-radius="sharp"] { --radius: 0; }
|
|
350
|
+
[data-radius="soft"] { --radius: 0.35rem; }
|
|
351
|
+
[data-radius="rounded"] { --radius: 0.625rem; }
|
|
352
|
+
[data-radius="pill"] {
|
|
347
353
|
--radius: 9999px;
|
|
348
354
|
--radius-sm: 9999px;
|
|
349
355
|
--radius-md: 9999px;
|
|
@@ -355,33 +361,49 @@ textarea,
|
|
|
355
361
|
* Intent color system — components set
|
|
356
362
|
* data-intent="primary|success|warning|…" to
|
|
357
363
|
* activate intent-aware coloring via --intent.
|
|
364
|
+
*
|
|
365
|
+
* Three tokens per intent:
|
|
366
|
+
* --intent fill color (used as background in solid/shadow variants)
|
|
367
|
+
* --intent-fg paired text color readable on top of --intent
|
|
368
|
+
* --intent-text text color when rendered without a fill (transparent bg)
|
|
369
|
+
*
|
|
370
|
+
* For colored intents --intent-text === --intent (the saturated brand color
|
|
371
|
+
* is itself readable as text on a page background). For neutral, --intent
|
|
372
|
+
* is a light surface, so --intent-text falls back to --secondary-foreground
|
|
373
|
+
* (dark gray) so soft/outline/ghost/link/glass variants stay legible.
|
|
358
374
|
* ============================================ */
|
|
359
375
|
[data-intent="primary"] {
|
|
360
376
|
--intent: var(--primary);
|
|
361
377
|
--intent-fg: var(--primary-foreground);
|
|
378
|
+
--intent-text: var(--primary);
|
|
362
379
|
}
|
|
363
380
|
|
|
364
381
|
[data-intent="neutral"] {
|
|
365
382
|
--intent: var(--secondary);
|
|
366
383
|
--intent-fg: var(--secondary-foreground);
|
|
384
|
+
--intent-text: var(--secondary-foreground);
|
|
367
385
|
}
|
|
368
386
|
|
|
369
387
|
[data-intent="success"] {
|
|
370
388
|
--intent: var(--success);
|
|
371
389
|
--intent-fg: var(--success-foreground);
|
|
390
|
+
--intent-text: var(--success);
|
|
372
391
|
}
|
|
373
392
|
|
|
374
393
|
[data-intent="warning"] {
|
|
375
394
|
--intent: var(--warning);
|
|
376
395
|
--intent-fg: var(--warning-foreground);
|
|
396
|
+
--intent-text: var(--warning);
|
|
377
397
|
}
|
|
378
398
|
|
|
379
399
|
[data-intent="danger"] {
|
|
380
400
|
--intent: var(--destructive);
|
|
381
401
|
--intent-fg: var(--destructive-foreground);
|
|
402
|
+
--intent-text: var(--destructive);
|
|
382
403
|
}
|
|
383
404
|
|
|
384
405
|
[data-intent="info"] {
|
|
385
406
|
--intent: var(--info);
|
|
386
407
|
--intent-fg: var(--info-foreground);
|
|
408
|
+
--intent-text: var(--info);
|
|
387
409
|
}
|