@lyeve-labs/ui-kit 0.31.0 → 0.32.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 +9 -9
- package/dist/components/AccordionItem.svelte +1 -1
- package/dist/components/AccountMenu.svelte +2 -2
- package/dist/components/AccountMenu.svelte.d.ts +1 -1
- package/dist/components/Alert.svelte +2 -2
- package/dist/components/Alert.svelte.d.ts +1 -1
- package/dist/components/AppShell.svelte +7 -7
- package/dist/components/AppShell.svelte.d.ts +2 -2
- package/dist/components/AuthShell.svelte +1 -1
- package/dist/components/AuthShell.svelte.d.ts +1 -1
- package/dist/components/Autocomplete.svelte +1 -1
- package/dist/components/Badge.svelte +2 -2
- package/dist/components/Banner.svelte +1 -1
- package/dist/components/Banner.svelte.d.ts +1 -1
- package/dist/components/Button.svelte +5 -5
- package/dist/components/Button.svelte.d.ts +1 -1
- package/dist/components/Card.svelte +2 -2
- package/dist/components/Checkbox.svelte +3 -3
- package/dist/components/CheckoutSteps.svelte +54 -0
- package/dist/components/CheckoutSteps.svelte.d.ts +12 -0
- package/dist/components/Collapsible.svelte +1 -1
- package/dist/components/Collapsible.svelte.d.ts +1 -1
- package/dist/components/CopyField.svelte +2 -2
- package/dist/components/Field.svelte +1 -1
- package/dist/components/Field.svelte.d.ts +1 -1
- package/dist/components/FileInput.svelte +1 -1
- package/dist/components/FormMessage.svelte +4 -4
- package/dist/components/Logo.svelte +1 -1
- package/dist/components/Logo.svelte.d.ts +1 -1
- package/dist/components/MultiSelect.svelte +1 -1
- package/dist/components/PageHeader.svelte +2 -2
- package/dist/components/PageShell.svelte +4 -4
- package/dist/components/PageShell.svelte.d.ts +4 -4
- package/dist/components/Pagination.svelte +2 -2
- package/dist/components/Panel.svelte +1 -1
- package/dist/components/Panel.svelte.d.ts +1 -1
- package/dist/components/PasswordInput.svelte +5 -2
- package/dist/components/PluginCart.svelte +339 -0
- package/dist/components/PluginCart.svelte.d.ts +45 -0
- package/dist/components/Radio.svelte +2 -2
- package/dist/components/SearchInput.svelte +5 -4
- package/dist/components/SegmentedControl.svelte +4 -4
- package/dist/components/SegmentedControl.svelte.d.ts +2 -2
- package/dist/components/Select.svelte +5 -5
- package/dist/components/Select.svelte.d.ts +4 -4
- package/dist/components/SidebarNav.svelte +5 -5
- package/dist/components/Stat.svelte +1 -1
- package/dist/components/Stat.svelte.d.ts +1 -1
- package/dist/components/Table.svelte +4 -4
- package/dist/components/Tabs.svelte +2 -2
- package/dist/components/ThemeToggle.svelte +1 -1
- package/dist/components/TimePicker.svelte +2 -2
- package/dist/components/Toggle.svelte +3 -3
- package/dist/components/Toolbar.svelte +1 -1
- package/dist/components/Toolbar.svelte.d.ts +1 -1
- package/dist/components/TreeView.svelte +1 -1
- package/dist/components/dialog/Dialog.svelte +1 -1
- package/dist/components/dialog/DialogContainer.svelte +1 -1
- package/dist/components/dialog/dialog-manager.svelte.d.ts +3 -3
- package/dist/components/dialog/dialog-manager.svelte.js +7 -7
- package/dist/components/dialog/types.d.ts +3 -3
- package/dist/index.d.ts +7 -3
- package/dist/index.js +8 -5
- package/dist/internal/calendar.d.ts +1 -1
- package/dist/internal/calendar.js +2 -2
- package/dist/internal/choice.d.ts +6 -6
- package/dist/internal/choice.js +6 -6
- package/dist/internal/copy.svelte.d.ts +2 -2
- package/dist/internal/copy.svelte.js +2 -2
- package/dist/internal/field.d.ts +11 -11
- package/dist/internal/field.js +12 -12
- package/dist/internal/filter.d.ts +3 -3
- package/dist/internal/filter.js +3 -3
- package/dist/internal/href.d.ts +1 -1
- package/dist/internal/href.js +1 -1
- package/dist/internal/layout.d.ts +7 -7
- package/dist/internal/layout.js +7 -7
- package/dist/internal/listbox.svelte.d.ts +1 -1
- package/dist/internal/listbox.svelte.js +3 -3
- package/dist/internal/nav-expansion.svelte.d.ts +1 -1
- package/dist/internal/nav-expansion.svelte.js +2 -2
- package/dist/internal/nav-tree.d.ts +3 -3
- package/dist/internal/nav-tree.js +3 -3
- package/dist/internal/number.d.ts +1 -1
- package/dist/internal/number.js +1 -1
- package/dist/internal/overlay.d.ts +3 -3
- package/dist/internal/overlay.js +3 -3
- package/dist/internal/panel.d.ts +5 -5
- package/dist/internal/panel.js +5 -5
- package/dist/internal/pricing.d.ts +110 -0
- package/dist/internal/pricing.js +77 -0
- package/dist/internal/rollup.d.ts +3 -3
- package/dist/internal/rollup.js +3 -3
- package/dist/internal/scroll-edges.d.ts +4 -4
- package/dist/internal/scroll-edges.js +5 -5
- package/dist/internal/time.d.ts +3 -3
- package/dist/internal/time.js +3 -3
- package/dist/internal/tone.d.ts +3 -3
- package/dist/internal/tone.js +3 -3
- package/dist/internal/touch.d.ts +1 -1
- package/dist/internal/touch.js +1 -1
- package/dist/internal/tree.d.ts +2 -2
- package/dist/internal/tree.js +2 -2
- package/dist/motion.d.ts +3 -3
- package/dist/motion.js +4 -4
- package/dist/stores/toast.svelte.d.ts +1 -1
- package/dist/styles/theme.css +45 -45
- package/dist/utils/cn.d.ts +1 -1
- package/dist/utils/theme.d.ts +6 -6
- package/dist/utils/theme.js +10 -10
- package/package.json +1 -1
- package/src/lib/styles/theme.css +45 -45
|
@@ -37,7 +37,7 @@ export interface SelectOption {
|
|
|
37
37
|
*/
|
|
38
38
|
keywords?: string[];
|
|
39
39
|
/**
|
|
40
|
-
* Groups rows under a heading. A group is a run of
|
|
40
|
+
* Groups rows under a heading. A group is a run of neighboring rows that
|
|
41
41
|
* name it, in both modes, because optgroup nests and cannot describe an
|
|
42
42
|
* interleaved list either. A caller who interleaves two groups gets the
|
|
43
43
|
* heading twice, which is what the array says.
|
|
@@ -51,13 +51,13 @@ export interface SelectOption {
|
|
|
51
51
|
*
|
|
52
52
|
* The native element is the default and stays the default. Most call sites
|
|
53
53
|
* sit inside a form and pass `name`, and a custom listbox is a button, which
|
|
54
|
-
* serializes nothing
|
|
54
|
+
* serializes nothing. One call site submits its form from the change event's
|
|
55
55
|
* `currentTarget.form`, which only a form-associated element carries. So the
|
|
56
56
|
* mode is never inferred, not from `options` and not from `searchable`: a
|
|
57
57
|
* page inside a form opts in to the listbox deliberately or keeps a real
|
|
58
58
|
* select.
|
|
59
59
|
*
|
|
60
|
-
* Listbox mode owns nothing of its own
|
|
60
|
+
* Listbox mode owns nothing of its own behavior. The open state, the active
|
|
61
61
|
* row, the keyboard model and the dismissal come from internal/listbox, the
|
|
62
62
|
* matching from internal/filter and every class in the panel from
|
|
63
63
|
* internal/panel, so this control cannot drift away from the other lists in
|
|
@@ -76,7 +76,7 @@ interface Props {
|
|
|
76
76
|
disabled?: boolean;
|
|
77
77
|
error?: string;
|
|
78
78
|
class?: string;
|
|
79
|
-
/** Native mode only. Its signature is frozen
|
|
79
|
+
/** Native mode only. Its signature is frozen. See SelectChangeEvent. */
|
|
80
80
|
onchange?: (e: SelectChangeEvent) => void;
|
|
81
81
|
/** Option elements, written by hand. Native mode only. */
|
|
82
82
|
children?: Snippet;
|
|
@@ -52,11 +52,11 @@
|
|
|
52
52
|
}
|
|
53
53
|
|
|
54
54
|
/**
|
|
55
|
-
* The row, without the
|
|
55
|
+
* The row, without the colors any one state paints.
|
|
56
56
|
*
|
|
57
57
|
* The rail is a start border on every row, not one added when the branch is
|
|
58
58
|
* active, so marking a branch cannot shift its rows two pixels sideways. Its
|
|
59
|
-
*
|
|
59
|
+
* color is a ternary rather than a second border utility: two color
|
|
60
60
|
* utilities on one element resolve in the order Tailwind emits them, not the
|
|
61
61
|
* order they are written.
|
|
62
62
|
*
|
|
@@ -71,7 +71,7 @@
|
|
|
71
71
|
'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand';
|
|
72
72
|
|
|
73
73
|
/**
|
|
74
|
-
* Exactly one border
|
|
74
|
+
* Exactly one border color, one background and one text color per state.
|
|
75
75
|
*
|
|
76
76
|
* Every state answers the pointer, including the current one. It did not: the
|
|
77
77
|
* current row was the only paint with no hover step, and the current row is
|
|
@@ -222,7 +222,7 @@
|
|
|
222
222
|
<!--
|
|
223
223
|
Rendered whether or not it is open, and shut by collapsing its grid row
|
|
224
224
|
to nothing, the same move AccordionItem makes. aria-controls has to name
|
|
225
|
-
an element that exists
|
|
225
|
+
an element that exists. Pointing it at markup that appears only once the
|
|
226
226
|
group is open leaves the reference dangling in the one state where a
|
|
227
227
|
reader needs it to tell them what the button will reveal. inert keeps a
|
|
228
228
|
shut group out of the tab order and the accessibility tree, which is
|
|
@@ -231,7 +231,7 @@
|
|
|
231
231
|
It keeps the implicit list role. role="group" here overrode it, and a
|
|
232
232
|
listitem whose parent is not a list is an ARIA context error, so every
|
|
233
233
|
row of an open section came back as a serious axe violation. Grouping
|
|
234
|
-
semantics belong to a tree, where the parent is a treeitem
|
|
234
|
+
semantics belong to a tree, where the parent is a treeitem. This is a
|
|
235
235
|
nav of plain links and the disclosure already says what it controls.
|
|
236
236
|
-->
|
|
237
237
|
{@const shown = open && !node.disabled}
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
/** `sm` for a dense row of figures, `md` for a card of its own. */
|
|
24
24
|
size?: Size;
|
|
25
25
|
/**
|
|
26
|
-
* The status the figure reports, which
|
|
26
|
+
* The status the figure reports, which colors the value.
|
|
27
27
|
*
|
|
28
28
|
* Wins over `accent` when it is set. `accent` is the decorative vocabulary
|
|
29
29
|
* and has no warn or danger, so a number that is over its quota could only
|
|
@@ -20,7 +20,7 @@ interface Props {
|
|
|
20
20
|
/** `sm` for a dense row of figures, `md` for a card of its own. */
|
|
21
21
|
size?: Size;
|
|
22
22
|
/**
|
|
23
|
-
* The status the figure reports, which
|
|
23
|
+
* The status the figure reports, which colors the value.
|
|
24
24
|
*
|
|
25
25
|
* Wins over `accent` when it is set. `accent` is the decorative vocabulary
|
|
26
26
|
* and has no warn or danger, so a number that is over its quota could only
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
* and bottom on every cell, the start edge on the first, the end edge on
|
|
68
68
|
* the last, so the four lines meet as one rectangle and the two outer
|
|
69
69
|
* cells of the last row carry it round the frame's corner. The shadow
|
|
70
|
-
* offsets are physical, which is what a shadow is
|
|
70
|
+
* offsets are physical, which is what a shadow is. The first cell is the
|
|
71
71
|
* start cell in either direction and the two agree in left-to-right text.
|
|
72
72
|
*/
|
|
73
73
|
const HOVER_RING = [
|
|
@@ -110,7 +110,7 @@
|
|
|
110
110
|
* Reachable is not the same as discoverable.
|
|
111
111
|
*
|
|
112
112
|
* Making the box a tab stop answered SC 2.1.1 and told nobody the columns
|
|
113
|
-
* were there. A desktop has a scrollbar to give it away
|
|
113
|
+
* were there. A desktop has a scrollbar to give it away. A phone has an
|
|
114
114
|
* overlay scrollbar that is painted while a finger is moving and is invisible
|
|
115
115
|
* the rest of the time. On the admin's plugin list at 390px the column that
|
|
116
116
|
* falls off the edge is ACTIONS, which is the only thing on the page a reader
|
|
@@ -263,7 +263,7 @@
|
|
|
263
263
|
|
|
264
264
|
The last row's outer cells are rounded to the frame's inner radius. A
|
|
265
265
|
row takes no radius, so a ring drawn on it was a square inset in a
|
|
266
|
-
rounded frame and the frame's bottom arcs sat outside it
|
|
266
|
+
rounded frame and the frame's bottom arcs sat outside it. The ring is
|
|
267
267
|
drawn on the cells now (see HOVER_RING) and follows the corner.
|
|
268
268
|
|
|
269
269
|
The hovered row draws a ring, and a ring is a box-shadow: a browser paints
|
|
@@ -271,7 +271,7 @@
|
|
|
271
271
|
same row treatment the panels use would have rendered nothing at all here.
|
|
272
272
|
The separate model paints it. Borders on a row are ignored in that model,
|
|
273
273
|
which is why the lines moved down to the cells they were already drawn
|
|
274
|
-
between
|
|
274
|
+
between. With border-spacing at zero the result is the same line in the
|
|
275
275
|
same place.
|
|
276
276
|
-->
|
|
277
277
|
<table
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
* underline runs along. A tab never breaks inside its own label.
|
|
29
29
|
*
|
|
30
30
|
* The scrollbar is not drawn. A strip of tabs with a bar under it reads as
|
|
31
|
-
* a second rule under the real one
|
|
31
|
+
* a second rule under the real one. The fades carry the same message, the
|
|
32
32
|
* tabs are buttons so the keyboard reaches every one, and the active tab
|
|
33
33
|
* is scrolled into view when it changes.
|
|
34
34
|
*/
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
/*
|
|
58
58
|
* The tab for the active id is brought into view when the id changes, so a
|
|
59
59
|
* page that opens on its fifth tab does not open on a strip that hides it.
|
|
60
|
-
* `nearest` on both axes moves the strip and nothing else
|
|
60
|
+
* `nearest` on both axes moves the strip and nothing else. A test DOM has
|
|
61
61
|
* no layout and no scrollIntoView, and neither is an error here.
|
|
62
62
|
*/
|
|
63
63
|
$effect(() => {
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
|
|
59
59
|
/**
|
|
60
60
|
* A reader on `system` whose OS flips at dusk gets the new palette without
|
|
61
|
-
* touching anything. Without this the preference is
|
|
61
|
+
* touching anything. Without this the preference is honored once, at load,
|
|
62
62
|
* and reads as ignored for the rest of the session.
|
|
63
63
|
*/
|
|
64
64
|
$effect(() =>
|
|
@@ -178,7 +178,7 @@
|
|
|
178
178
|
|
|
179
179
|
/**
|
|
180
180
|
* An empty spinbutton has no aria-valuenow to give, so it says so in words.
|
|
181
|
-
* Omitting both leaves the segment announced as an
|
|
181
|
+
* Omitting both leaves the segment announced as an unlabeled number.
|
|
182
182
|
*/
|
|
183
183
|
function valueText(segment: DigitSegment): string {
|
|
184
184
|
const text = shown(segment);
|
|
@@ -358,7 +358,7 @@
|
|
|
358
358
|
}
|
|
359
359
|
|
|
360
360
|
// Anything else printable would land in the input as free text. Tab,
|
|
361
|
-
// Escape and every shortcut keep their native
|
|
361
|
+
// Escape and every shortcut keep their native behavior.
|
|
362
362
|
if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) e.preventDefault();
|
|
363
363
|
}
|
|
364
364
|
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
/*
|
|
31
31
|
* The track carries a 1px border, so its padding box is 2px smaller than
|
|
32
32
|
* the size class says. A 1px inset from that box puts the knob 2px inside
|
|
33
|
-
* the outer edge,
|
|
33
|
+
* the outer edge, centered, with the same travel it had before the border.
|
|
34
34
|
*/
|
|
35
35
|
const thumb: Record<'sm' | 'md', string> = {
|
|
36
36
|
sm: 'w-3 h-3 top-px start-px',
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
/*
|
|
41
41
|
* The travel is mirrored by hand. `start-0.5` moves the resting knob to the
|
|
42
42
|
* right-hand end of the track in a right-to-left page, and a positive
|
|
43
|
-
* translate from there would carry it straight off the track
|
|
43
|
+
* translate from there would carry it straight off the track. There is no
|
|
44
44
|
* logical translate utility, so the sign is flipped instead.
|
|
45
45
|
*/
|
|
46
46
|
const thumbOn: Record<'sm' | 'md', string> = {
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
* without an edge only the knob showed. line-strong is the resting border
|
|
54
54
|
* every other control draws (see controlBorder and choiceBox) and clears
|
|
55
55
|
* 3:1 against both surface levels in both themes. On, the border takes the
|
|
56
|
-
* fill's
|
|
56
|
+
* fill's color so the fill looks as it did and the track keeps one size.
|
|
57
57
|
*/
|
|
58
58
|
const trackPaint = {
|
|
59
59
|
on: 'border-brand bg-brand',
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
* how their controls sit: some stretched their children to the tallest one,
|
|
7
7
|
* some aligned on the top edge, so a search box, a select and a button in one
|
|
8
8
|
* row sat visibly off by a couple of pixels. The alignment is stated once
|
|
9
|
-
* here, on their vertical
|
|
9
|
+
* here, on their vertical centers, which is the only arrangement that holds
|
|
10
10
|
* when one control is taller than the rest.
|
|
11
11
|
*
|
|
12
12
|
* The row wraps. A filter row that overflows takes a horizontal scrollbar the
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* how their controls sit: some stretched their children to the tallest one,
|
|
6
6
|
* some aligned on the top edge, so a search box, a select and a button in one
|
|
7
7
|
* row sat visibly off by a couple of pixels. The alignment is stated once
|
|
8
|
-
* here, on their vertical
|
|
8
|
+
* here, on their vertical centers, which is the only arrangement that holds
|
|
9
9
|
* when one control is taller than the rest.
|
|
10
10
|
*
|
|
11
11
|
* The row wraps. A filter row that overflows takes a horizontal scrollbar the
|
|
@@ -244,7 +244,7 @@
|
|
|
244
244
|
The focus ring is stated once, on the element that holds the role and the
|
|
245
245
|
focus, and outside every selected and checked branch. A ring inside the
|
|
246
246
|
selected ternary disappears in the state it was meant to mark, and a
|
|
247
|
-
selected row already carries a brand text
|
|
247
|
+
selected row already carries a brand text color that a border-only focus
|
|
248
248
|
state would have nothing to add to. Inset, because a tree of any size
|
|
249
249
|
lives in a scrolling container that would crop an outset ring.
|
|
250
250
|
-->
|
|
@@ -82,7 +82,7 @@
|
|
|
82
82
|
|
|
83
83
|
The base is the modal layer rather than the literal 50 it used to be. 50
|
|
84
84
|
was the number every floating surface in the kit happened to hold, so a
|
|
85
|
-
dialog neither sat above a drawer nor below a tooltip on purpose
|
|
85
|
+
dialog neither sat above a drawer nor below a tooltip on purpose. It sat
|
|
86
86
|
wherever the document put it. The offset climbs from there, and the layer
|
|
87
87
|
above is 100 clear of this one. -->
|
|
88
88
|
<div
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* Mount once near the app root (in +layout.svelte).
|
|
6
6
|
* Reads from the module-level $state store - no props needed.
|
|
7
7
|
*
|
|
8
|
-
* Dialogs stack bottom-to-top
|
|
8
|
+
* Dialogs stack bottom-to-top. Newest renders on top.
|
|
9
9
|
* Each dialog gets its own focus trap, ESC handler, and backdrop.
|
|
10
10
|
*/
|
|
11
11
|
import { getDialogStack } from './dialog-manager.svelte';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Dialog Manager
|
|
2
|
+
* Dialog Manager: module-level Svelte 5 reactive state.
|
|
3
3
|
*
|
|
4
4
|
* Manages a stack of dialogs. Dialogs render in last-to-first order (newest on top).
|
|
5
5
|
* Each dialog returns a Promise that resolves/rejects when closed.
|
|
@@ -32,7 +32,7 @@ export declare function openDialog<T = void>(options: DialogOptions<T>): Promise
|
|
|
32
32
|
*/
|
|
33
33
|
export declare function closeDialog<T = void>(value: T, id?: string): void;
|
|
34
34
|
/**
|
|
35
|
-
* Dismiss (cancel) a dialog
|
|
35
|
+
* Dismiss (cancel) a dialog: rejects the promise.
|
|
36
36
|
* Called when user clicks backdrop or presses ESC on a non-persistent dialog.
|
|
37
37
|
*/
|
|
38
38
|
export declare function dismissDialog(id?: string): void;
|
|
@@ -64,7 +64,7 @@ export interface ConfirmOptions {
|
|
|
64
64
|
}
|
|
65
65
|
/**
|
|
66
66
|
* Convenience: confirm dialog.
|
|
67
|
-
* Returns `true` if user confirmed, `false` if
|
|
67
|
+
* Returns `true` if user confirmed, `false` if canceled.
|
|
68
68
|
*
|
|
69
69
|
* const ok = await confirm('Delete item?', 'This cannot be undone.');
|
|
70
70
|
* const ok = await confirm('Delete item?', 'This cannot be undone.', {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Dialog Manager
|
|
2
|
+
* Dialog Manager: module-level Svelte 5 reactive state.
|
|
3
3
|
*
|
|
4
4
|
* Manages a stack of dialogs. Dialogs render in last-to-first order (newest on top).
|
|
5
5
|
* Each dialog returns a Promise that resolves/rejects when closed.
|
|
@@ -19,10 +19,10 @@ import { lockBodyScroll, unlockBodyScroll } from '../../internal/overlay.js';
|
|
|
19
19
|
// Module-level reactive state
|
|
20
20
|
// ──────────────────────────────────────────────────────────
|
|
21
21
|
let idCounter = 0;
|
|
22
|
-
/** Reactive stack
|
|
22
|
+
/** Reactive stack: topmost dialog = last element */
|
|
23
23
|
let stack = $state([]);
|
|
24
24
|
// ──────────────────────────────────────────────────────────
|
|
25
|
-
// Body scroll lock (counter-based
|
|
25
|
+
// Body scroll lock (counter-based: handles stacked dialogs)
|
|
26
26
|
// ──────────────────────────────────────────────────────────
|
|
27
27
|
/*
|
|
28
28
|
* The count lives in internal/overlay.ts, which is also what Modal and Drawer
|
|
@@ -90,7 +90,7 @@ export function closeDialog(value, id) {
|
|
|
90
90
|
}
|
|
91
91
|
}
|
|
92
92
|
/**
|
|
93
|
-
* Dismiss (cancel) a dialog
|
|
93
|
+
* Dismiss (cancel) a dialog: rejects the promise.
|
|
94
94
|
* Called when user clicks backdrop or presses ESC on a non-persistent dialog.
|
|
95
95
|
*/
|
|
96
96
|
export function dismissDialog(id) {
|
|
@@ -112,7 +112,7 @@ export function dismissDialog(id) {
|
|
|
112
112
|
return;
|
|
113
113
|
}
|
|
114
114
|
stack = stack.filter((e) => e.id !== targetId);
|
|
115
|
-
// Reject the promise
|
|
115
|
+
// Reject the promise: caller can .catch() or let it be
|
|
116
116
|
entry.reject(new DOMException('Dialog dismissed', 'AbortError'));
|
|
117
117
|
for (let i = 0; i < stack.length; i++) {
|
|
118
118
|
stack[i].depth = i;
|
|
@@ -133,7 +133,7 @@ export function dismissAllDialogs() {
|
|
|
133
133
|
}
|
|
134
134
|
/**
|
|
135
135
|
* Convenience: confirm dialog.
|
|
136
|
-
* Returns `true` if user confirmed, `false` if
|
|
136
|
+
* Returns `true` if user confirmed, `false` if canceled.
|
|
137
137
|
*
|
|
138
138
|
* const ok = await confirm('Delete item?', 'This cannot be undone.');
|
|
139
139
|
* const ok = await confirm('Delete item?', 'This cannot be undone.', {
|
|
@@ -153,7 +153,7 @@ export function confirm(title, message, options) {
|
|
|
153
153
|
...(options?.cancelLabel !== undefined ? { cancelLabel: options.cancelLabel } : {}),
|
|
154
154
|
...(options?.detail !== undefined ? { confirmDetail: options.detail } : {}),
|
|
155
155
|
});
|
|
156
|
-
//
|
|
156
|
+
// Canceling a dialog dismisses it, and dismissal rejects. Callers write
|
|
157
157
|
// `if (await confirm(...))`, so a rejection on Cancel is an unhandled
|
|
158
158
|
// rejection on the ordinary path rather than an error anyone meant to
|
|
159
159
|
// handle. Cancel is an answer, not a failure: it resolves false, which is
|
|
@@ -3,7 +3,7 @@ import { type OverlaySize } from '../../internal/layout.js';
|
|
|
3
3
|
/** The shared overlay ladder, whole: a dialog is the one surface that may hold a table. */
|
|
4
4
|
export type DialogSize = OverlaySize;
|
|
5
5
|
export interface DialogOptions<T = void> {
|
|
6
|
-
/** Unique id
|
|
6
|
+
/** Unique id: auto-generated if omitted */
|
|
7
7
|
id?: string;
|
|
8
8
|
/** Dialog heading */
|
|
9
9
|
title?: string | Snippet;
|
|
@@ -17,9 +17,9 @@ export interface DialogOptions<T = void> {
|
|
|
17
17
|
persistent?: boolean;
|
|
18
18
|
/** Called when dialog is about to close. Return false to prevent. */
|
|
19
19
|
onClose?: () => boolean | void;
|
|
20
|
-
/** Resolve payload
|
|
20
|
+
/** Resolve payload: passed to closeDialog */
|
|
21
21
|
resolve?: (value: T) => void;
|
|
22
|
-
/** Reject payload
|
|
22
|
+
/** Reject payload: passed to closeDialog */
|
|
23
23
|
reject?: (reason?: unknown) => void;
|
|
24
24
|
}
|
|
25
25
|
export interface DialogEntry<T = void> {
|
package/dist/index.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @lyeve-labs/ui-kit
|
|
2
|
+
* @lyeve-labs/ui-kit: public API.
|
|
3
3
|
*
|
|
4
4
|
* Every component, utility, and store the library exposes is re-exported
|
|
5
5
|
* from this single entry point. Consumers should import from
|
|
6
|
-
* `'@lyeve-labs/ui-kit'` and never reach into deep paths
|
|
6
|
+
* `'@lyeve-labs/ui-kit'` and never reach into deep paths: the directory layout
|
|
7
7
|
* is an implementation detail.
|
|
8
8
|
*/
|
|
9
9
|
export { default as Card } from './components/Card.svelte';
|
|
@@ -73,6 +73,10 @@ export { default as Progress } from './components/Progress.svelte';
|
|
|
73
73
|
export { default as Spinner } from './components/Spinner.svelte';
|
|
74
74
|
export { default as Skeleton } from './components/Skeleton.svelte';
|
|
75
75
|
export { default as EmptyState } from './components/EmptyState.svelte';
|
|
76
|
+
export { default as CheckoutSteps } from './components/CheckoutSteps.svelte';
|
|
77
|
+
export { default as PluginCart } from './components/PluginCart.svelte';
|
|
78
|
+
export type { QuickPick } from './components/PluginCart.svelte';
|
|
79
|
+
export { billedCount, formatCents, ladderRows, ladderState, type BillingPeriod, type CartCatalog, type CartPlugin, type CartQuote, type CartQuoteItem, type DiscountBracket, type LadderState, } from './internal/pricing.js';
|
|
76
80
|
export { default as Stat } from './components/Stat.svelte';
|
|
77
81
|
export { default as Kbd } from './components/Kbd.svelte';
|
|
78
82
|
export { default as CopyButton } from './components/CopyButton.svelte';
|
|
@@ -94,4 +98,4 @@ export { cn, type ClassValue } from './utils/cn.js';
|
|
|
94
98
|
export { getTheme, getThemePreference, nextThemePreference, resolveTheme, setTheme, setThemePreference, systemTheme, themeBootScript, watchThemePreference, toggleTheme, watchSystemTheme, THEME_PREFERENCES, type Theme, type ThemePreference, } from './utils/theme.js';
|
|
95
99
|
export * as motion from './motion.js';
|
|
96
100
|
export type { Rung as MotionRung, Curve as MotionCurve } from './motion.js';
|
|
97
|
-
export declare const VERSION = "0.
|
|
101
|
+
export declare const VERSION = "0.32.0";
|
package/dist/index.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @lyeve-labs/ui-kit
|
|
2
|
+
* @lyeve-labs/ui-kit: public API.
|
|
3
3
|
*
|
|
4
4
|
* Every component, utility, and store the library exposes is re-exported
|
|
5
5
|
* from this single entry point. Consumers should import from
|
|
6
|
-
* `'@lyeve-labs/ui-kit'` and never reach into deep paths
|
|
6
|
+
* `'@lyeve-labs/ui-kit'` and never reach into deep paths: the directory layout
|
|
7
7
|
* is an implementation detail.
|
|
8
8
|
*/
|
|
9
9
|
// ── Layout & structure ─────────────────────────────────────────────────────
|
|
@@ -71,6 +71,9 @@ export { default as Progress } from './components/Progress.svelte';
|
|
|
71
71
|
export { default as Spinner } from './components/Spinner.svelte';
|
|
72
72
|
export { default as Skeleton } from './components/Skeleton.svelte';
|
|
73
73
|
export { default as EmptyState } from './components/EmptyState.svelte';
|
|
74
|
+
export { default as CheckoutSteps } from './components/CheckoutSteps.svelte';
|
|
75
|
+
export { default as PluginCart } from './components/PluginCart.svelte';
|
|
76
|
+
export { billedCount, formatCents, ladderRows, ladderState, } from './internal/pricing.js';
|
|
74
77
|
export { default as Stat } from './components/Stat.svelte';
|
|
75
78
|
export { default as Kbd } from './components/Kbd.svelte';
|
|
76
79
|
export { default as CopyButton } from './components/CopyButton.svelte';
|
|
@@ -80,7 +83,7 @@ export { default as Avatar } from './components/Avatar.svelte';
|
|
|
80
83
|
export { default as AvatarGroup } from './components/AvatarGroup.svelte';
|
|
81
84
|
// The product mark. Two applications carried their own copy of the same lockup
|
|
82
85
|
// and the two had drifted apart in size, in weight and in how they answered the
|
|
83
|
-
// theme
|
|
86
|
+
// theme. The kit owns it now.
|
|
84
87
|
export { default as Logo } from './components/Logo.svelte';
|
|
85
88
|
// ── Theming & toasts ───────────────────────────────────────────────────────
|
|
86
89
|
export { default as ThemeToggle } from './components/ThemeToggle.svelte';
|
|
@@ -103,5 +106,5 @@ export { getTheme, getThemePreference, nextThemePreference, resolveTheme, setThe
|
|
|
103
106
|
export * as motion from './motion.js';
|
|
104
107
|
// ── Version ────────────────────────────────────────────────────────────────
|
|
105
108
|
// Generated from package.json by `pnpm version:sync`. Bump package.json, never
|
|
106
|
-
// this line
|
|
107
|
-
export const VERSION = '0.
|
|
109
|
+
// this line. The build and the test suite fail when the two disagree.
|
|
110
|
+
export const VERSION = '0.32.0';
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
* file is the no argument one inside todayLocal, which is the only place a real
|
|
25
25
|
* clock is needed.
|
|
26
26
|
*
|
|
27
|
-
* Not exported from the package entry point
|
|
27
|
+
* Not exported from the package entry point: this is an implementation detail.
|
|
28
28
|
*/
|
|
29
29
|
/** A calendar date with no zone and no time. m is 1-12, the month a human says, not the 0-11 the Date constructor takes. */
|
|
30
30
|
export interface CalendarDate {
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
* file is the no argument one inside todayLocal, which is the only place a real
|
|
25
25
|
* clock is needed.
|
|
26
26
|
*
|
|
27
|
-
* Not exported from the package entry point
|
|
27
|
+
* Not exported from the package entry point: this is an implementation detail.
|
|
28
28
|
*/
|
|
29
29
|
/** Month lengths in a common year. February is corrected for leap years in daysInMonth. */
|
|
30
30
|
const MONTH_LENGTHS = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
|
|
@@ -35,7 +35,7 @@ const ISO_DATE = /^(\d{4})-(\d{2})-(\d{2})$/;
|
|
|
35
35
|
*
|
|
36
36
|
* A century is a common year unless it divides by 400. Dropping that clause
|
|
37
37
|
* makes 2000 a common year and puts 29 February 2000 out of reach of the
|
|
38
|
-
* control
|
|
38
|
+
* control. Keeping only the century clause makes 1900 a leap year and invents a
|
|
39
39
|
* day nobody lived through.
|
|
40
40
|
*/
|
|
41
41
|
function isLeapYear(y) {
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
* your place entirely. Composing from here means a fourth choice control cannot
|
|
13
13
|
* reintroduce any of it.
|
|
14
14
|
*
|
|
15
|
-
* Not exported from the package entry point
|
|
15
|
+
* Not exported from the package entry point: this is an implementation detail.
|
|
16
16
|
*/
|
|
17
17
|
/** The scale of the painted box: sm 14px, md 16px, lg 20px. */
|
|
18
18
|
export type ChoiceSize = 'sm' | 'md' | 'lg';
|
|
@@ -51,7 +51,7 @@ export declare const CHOICE_INPUT = "peer absolute inset-0 m-0 h-full w-full cur
|
|
|
51
51
|
* at 14px.
|
|
52
52
|
*
|
|
53
53
|
* `mixed` paints exactly what `checked` paints. A part-selected parent is on,
|
|
54
|
-
* not a third state with a
|
|
54
|
+
* not a third state with a color of its own. Only the mark it holds differs.
|
|
55
55
|
*/
|
|
56
56
|
export declare function choiceBox(kind: 'checkbox' | 'radio', size: ChoiceSize, checked: boolean, mixed: boolean): string;
|
|
57
57
|
/**
|
|
@@ -59,7 +59,7 @@ export declare function choiceBox(kind: 'checkbox' | 'radio', size: ChoiceSize,
|
|
|
59
59
|
*
|
|
60
60
|
* The ring lived inside the checked ternary in three components, so choosing an
|
|
61
61
|
* option removed the only indicator a keyboard user had. It is a ring and not a
|
|
62
|
-
* border
|
|
62
|
+
* border color because a selected box already carries a brand border, which
|
|
63
63
|
* leaves a border-only focus state with nothing to say.
|
|
64
64
|
*/
|
|
65
65
|
export declare const CHOICE_FOCUS = "peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-brand peer-focus-visible:outline-offset-2";
|
|
@@ -90,7 +90,7 @@ export declare const CHOICE_DESCRIPTION = "text-xs text-faint";
|
|
|
90
90
|
* The icon slot ahead of the label.
|
|
91
91
|
*
|
|
92
92
|
* Fixed to the box size so the label starts at the same x in every row of a
|
|
93
|
-
* list, and given no
|
|
93
|
+
* list, and given no color of its own so it inherits the label and dims with
|
|
94
94
|
* the wrapper when the option is disabled.
|
|
95
95
|
*/
|
|
96
96
|
export declare function choiceIcon(size: ChoiceSize): string;
|
|
@@ -99,7 +99,7 @@ export declare function choiceIcon(size: ChoiceSize): string;
|
|
|
99
99
|
* guess.
|
|
100
100
|
*
|
|
101
101
|
* A lucide icon takes a number, not a class, so the slot above cannot size it.
|
|
102
|
-
* These are the same 14, 16 and 20 the slot reserves
|
|
102
|
+
* These are the same 14, 16 and 20 the slot reserves. An icon rendered at any
|
|
103
103
|
* other size overflows the slot or floats inside it.
|
|
104
104
|
*/
|
|
105
105
|
export declare const CHOICE_ICON_PX: Record<ChoiceSize, number>;
|
|
@@ -134,7 +134,7 @@ export declare function choiceGroupList(orientation: ChoiceOrientation): string;
|
|
|
134
134
|
*
|
|
135
135
|
* Drawn as paths because the consistency suite rejects a Unicode check outright,
|
|
136
136
|
* and because a font glyph lands at a different optical weight from every other
|
|
137
|
-
* icon in the library. Both sit in a 10 by 8 viewBox
|
|
137
|
+
* icon in the library. Both sit in a 10 by 8 viewBox centered in the box, at
|
|
138
138
|
* stroke width 1.5 with round caps, so the two marks swap without the box
|
|
139
139
|
* shifting. The mixed bar stops short of the edges so its round caps do not
|
|
140
140
|
* touch the border.
|
package/dist/internal/choice.js
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
* your place entirely. Composing from here means a fourth choice control cannot
|
|
13
13
|
* reintroduce any of it.
|
|
14
14
|
*
|
|
15
|
-
* Not exported from the package entry point
|
|
15
|
+
* Not exported from the package entry point: this is an implementation detail.
|
|
16
16
|
*/
|
|
17
17
|
import { FIELD_HINT, FIELD_LABEL } from './field.js';
|
|
18
18
|
import { HIT_AREA } from './touch.js';
|
|
@@ -75,7 +75,7 @@ const BOX_BASE = 'pointer-events-none flex shrink-0 items-center justify-center
|
|
|
75
75
|
* at 14px.
|
|
76
76
|
*
|
|
77
77
|
* `mixed` paints exactly what `checked` paints. A part-selected parent is on,
|
|
78
|
-
* not a third state with a
|
|
78
|
+
* not a third state with a color of its own. Only the mark it holds differs.
|
|
79
79
|
*/
|
|
80
80
|
export function choiceBox(kind, size, checked, mixed) {
|
|
81
81
|
const on = checked || mixed;
|
|
@@ -92,7 +92,7 @@ export function choiceBox(kind, size, checked, mixed) {
|
|
|
92
92
|
*
|
|
93
93
|
* The ring lived inside the checked ternary in three components, so choosing an
|
|
94
94
|
* option removed the only indicator a keyboard user had. It is a ring and not a
|
|
95
|
-
* border
|
|
95
|
+
* border color because a selected box already carries a brand border, which
|
|
96
96
|
* leaves a border-only focus state with nothing to say.
|
|
97
97
|
*/
|
|
98
98
|
export const CHOICE_FOCUS = 'peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-brand peer-focus-visible:outline-offset-2';
|
|
@@ -130,7 +130,7 @@ export const CHOICE_DESCRIPTION = FIELD_HINT;
|
|
|
130
130
|
* The icon slot ahead of the label.
|
|
131
131
|
*
|
|
132
132
|
* Fixed to the box size so the label starts at the same x in every row of a
|
|
133
|
-
* list, and given no
|
|
133
|
+
* list, and given no color of its own so it inherits the label and dims with
|
|
134
134
|
* the wrapper when the option is disabled.
|
|
135
135
|
*/
|
|
136
136
|
export function choiceIcon(size) {
|
|
@@ -141,7 +141,7 @@ export function choiceIcon(size) {
|
|
|
141
141
|
* guess.
|
|
142
142
|
*
|
|
143
143
|
* A lucide icon takes a number, not a class, so the slot above cannot size it.
|
|
144
|
-
* These are the same 14, 16 and 20 the slot reserves
|
|
144
|
+
* These are the same 14, 16 and 20 the slot reserves. An icon rendered at any
|
|
145
145
|
* other size overflows the slot or floats inside it.
|
|
146
146
|
*/
|
|
147
147
|
export const CHOICE_ICON_PX = {
|
|
@@ -184,7 +184,7 @@ export function choiceGroupList(orientation) {
|
|
|
184
184
|
*
|
|
185
185
|
* Drawn as paths because the consistency suite rejects a Unicode check outright,
|
|
186
186
|
* and because a font glyph lands at a different optical weight from every other
|
|
187
|
-
* icon in the library. Both sit in a 10 by 8 viewBox
|
|
187
|
+
* icon in the library. Both sit in a 10 by 8 viewBox centered in the box, at
|
|
188
188
|
* stroke width 1.5 with round caps, so the two marks swap without the box
|
|
189
189
|
* shifting. The mixed bar stops short of the edges so its round caps do not
|
|
190
190
|
* touch the border.
|
|
@@ -15,8 +15,8 @@ export declare const COPY_FAILED_MESSAGE = "Copy failed";
|
|
|
15
15
|
* self-hosted console reached over a LAN address without TLS runs, and
|
|
16
16
|
* writeText rejects while the document is not focused. Either way the value
|
|
17
17
|
* goes through a selected, off-screen textarea and the legacy copy command,
|
|
18
|
-
* which the browser still
|
|
19
|
-
* refuses is it a failure the control reports
|
|
18
|
+
* which the browser still honors inside the click. Only when that also
|
|
19
|
+
* refuses is it a failure the control reports. It never throws.
|
|
20
20
|
*/
|
|
21
21
|
export declare function writeClipboard(value: string): Promise<boolean>;
|
|
22
22
|
export declare class CopyState {
|
|
@@ -14,8 +14,8 @@ export const COPY_FAILED_MESSAGE = 'Copy failed';
|
|
|
14
14
|
* self-hosted console reached over a LAN address without TLS runs, and
|
|
15
15
|
* writeText rejects while the document is not focused. Either way the value
|
|
16
16
|
* goes through a selected, off-screen textarea and the legacy copy command,
|
|
17
|
-
* which the browser still
|
|
18
|
-
* refuses is it a failure the control reports
|
|
17
|
+
* which the browser still honors inside the click. Only when that also
|
|
18
|
+
* refuses is it a failure the control reports. It never throws.
|
|
19
19
|
*/
|
|
20
20
|
export async function writeClipboard(value) {
|
|
21
21
|
const clipboard = typeof navigator === 'undefined' ? undefined : navigator.clipboard;
|