@dorsk/tsumikit 0.5.0 → 0.7.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/components/molecules/EmptyState.svelte +129 -0
- package/dist/components/molecules/EmptyState.svelte.d.ts +18 -0
- package/dist/components/molecules/Metric.svelte +138 -0
- package/dist/components/molecules/Metric.svelte.d.ts +18 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +4 -0
- package/package.json +1 -1
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
// Empty / placeholder state — the "nothing here yet" panel every unworked
|
|
3
|
+
// settings section, empty list, and zero-result table reaches for. Centered
|
|
4
|
+
// stack of:
|
|
5
|
+
// • a tinted icon chip (when `icon`/`iconChildren` is set)
|
|
6
|
+
// • a title
|
|
7
|
+
// • a muted, max-width-limited description
|
|
8
|
+
// • an optional action area (slot via `action`, or a built-in button when
|
|
9
|
+
// `actionLabel`+`onAction` are passed)
|
|
10
|
+
// Everything is token-driven. `compact` tightens spacing for inline/table use.
|
|
11
|
+
import type { Snippet } from 'svelte';
|
|
12
|
+
import Button from '../atoms/Button.svelte';
|
|
13
|
+
import Icon, { type IconName } from '../atoms/Icon.svelte';
|
|
14
|
+
|
|
15
|
+
let {
|
|
16
|
+
title,
|
|
17
|
+
description,
|
|
18
|
+
icon,
|
|
19
|
+
// Tints the icon chip with a semantic hue; neutral falls back to accent.
|
|
20
|
+
tone = 'neutral',
|
|
21
|
+
// Built-in primary action button. Provide both to render it; for anything
|
|
22
|
+
// richer (multiple buttons, links) use the `action` snippet instead.
|
|
23
|
+
actionLabel,
|
|
24
|
+
onAction,
|
|
25
|
+
// Tighter padding/sizing for inline use (empty table body, narrow panels).
|
|
26
|
+
compact = false,
|
|
27
|
+
class: klass = '',
|
|
28
|
+
// Raw SVG markup for a custom glyph — passed straight to `Icon`.
|
|
29
|
+
iconChildren,
|
|
30
|
+
// Custom action area (overrides the built-in button when present).
|
|
31
|
+
action,
|
|
32
|
+
...rest
|
|
33
|
+
}: {
|
|
34
|
+
title: string;
|
|
35
|
+
description?: string;
|
|
36
|
+
icon?: IconName;
|
|
37
|
+
tone?: 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
|
|
38
|
+
actionLabel?: string;
|
|
39
|
+
onAction?: () => void;
|
|
40
|
+
compact?: boolean;
|
|
41
|
+
class?: string;
|
|
42
|
+
iconChildren?: Snippet;
|
|
43
|
+
action?: Snippet;
|
|
44
|
+
[key: string]: unknown;
|
|
45
|
+
} = $props();
|
|
46
|
+
</script>
|
|
47
|
+
|
|
48
|
+
<div class="empty empty-{tone} {compact ? 'empty-compact' : ''} {klass}" {...rest}>
|
|
49
|
+
{#if icon || iconChildren}
|
|
50
|
+
<span class="empty-chip" aria-hidden="true">
|
|
51
|
+
<Icon name={icon}>{@render iconChildren?.()}</Icon>
|
|
52
|
+
</span>
|
|
53
|
+
{/if}
|
|
54
|
+
<p class="empty-title">{title}</p>
|
|
55
|
+
{#if description}<p class="empty-desc">{description}</p>{/if}
|
|
56
|
+
{#if action}
|
|
57
|
+
<div class="empty-action">{@render action()}</div>
|
|
58
|
+
{:else if actionLabel && onAction}
|
|
59
|
+
<div class="empty-action">
|
|
60
|
+
<Button variant="primary" onclick={onAction}>{actionLabel}</Button>
|
|
61
|
+
</div>
|
|
62
|
+
{/if}
|
|
63
|
+
</div>
|
|
64
|
+
|
|
65
|
+
<style>
|
|
66
|
+
.empty {
|
|
67
|
+
/* The tone hue the chip pulls from; neutral falls back to accent. */
|
|
68
|
+
--empty-tone: var(--accent);
|
|
69
|
+
display: flex;
|
|
70
|
+
flex-direction: column;
|
|
71
|
+
align-items: center;
|
|
72
|
+
justify-content: center;
|
|
73
|
+
text-align: center;
|
|
74
|
+
gap: var(--sp-3);
|
|
75
|
+
padding: var(--sp-8) var(--sp-5);
|
|
76
|
+
}
|
|
77
|
+
:global(.empty-ok) {
|
|
78
|
+
--empty-tone: var(--ok);
|
|
79
|
+
}
|
|
80
|
+
:global(.empty-warn) {
|
|
81
|
+
--empty-tone: var(--warn);
|
|
82
|
+
}
|
|
83
|
+
:global(.empty-danger) {
|
|
84
|
+
--empty-tone: var(--danger);
|
|
85
|
+
}
|
|
86
|
+
:global(.empty-info) {
|
|
87
|
+
--empty-tone: var(--info);
|
|
88
|
+
}
|
|
89
|
+
.empty-compact {
|
|
90
|
+
gap: var(--sp-2);
|
|
91
|
+
padding: var(--sp-4) var(--sp-3);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.empty-chip {
|
|
95
|
+
display: inline-flex;
|
|
96
|
+
align-items: center;
|
|
97
|
+
justify-content: center;
|
|
98
|
+
flex: none;
|
|
99
|
+
width: 3rem;
|
|
100
|
+
height: 3rem;
|
|
101
|
+
border-radius: var(--r-lg);
|
|
102
|
+
font-size: 1.5rem;
|
|
103
|
+
color: var(--empty-tone);
|
|
104
|
+
background: color-mix(in srgb, var(--empty-tone) 14%, transparent);
|
|
105
|
+
border: 1px solid color-mix(in srgb, var(--empty-tone) 30%, transparent);
|
|
106
|
+
}
|
|
107
|
+
.empty-compact .empty-chip {
|
|
108
|
+
width: 2.25rem;
|
|
109
|
+
height: 2.25rem;
|
|
110
|
+
font-size: 1.125rem;
|
|
111
|
+
}
|
|
112
|
+
.empty-title {
|
|
113
|
+
margin: 0;
|
|
114
|
+
font-size: var(--fs-md);
|
|
115
|
+
font-weight: var(--fw-semibold);
|
|
116
|
+
color: var(--text);
|
|
117
|
+
line-height: 1.3;
|
|
118
|
+
}
|
|
119
|
+
.empty-desc {
|
|
120
|
+
margin: 0;
|
|
121
|
+
max-width: 32ch;
|
|
122
|
+
font-size: var(--fs-sm);
|
|
123
|
+
color: var(--text-muted);
|
|
124
|
+
line-height: 1.5;
|
|
125
|
+
}
|
|
126
|
+
.empty-action {
|
|
127
|
+
margin-top: var(--sp-1);
|
|
128
|
+
}
|
|
129
|
+
</style>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import type { Snippet } from 'svelte';
|
|
2
|
+
import { type IconName } from '../atoms/Icon.svelte';
|
|
3
|
+
type $$ComponentProps = {
|
|
4
|
+
title: string;
|
|
5
|
+
description?: string;
|
|
6
|
+
icon?: IconName;
|
|
7
|
+
tone?: 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
|
|
8
|
+
actionLabel?: string;
|
|
9
|
+
onAction?: () => void;
|
|
10
|
+
compact?: boolean;
|
|
11
|
+
class?: string;
|
|
12
|
+
iconChildren?: Snippet;
|
|
13
|
+
action?: Snippet;
|
|
14
|
+
[key: string]: unknown;
|
|
15
|
+
};
|
|
16
|
+
declare const EmptyState: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
17
|
+
type EmptyState = ReturnType<typeof EmptyState>;
|
|
18
|
+
export default EmptyState;
|
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
// KPI / stat tile — the dashboard's repeating "one number" card. Composes on
|
|
3
|
+
// top of `Card` and lays out four parts:
|
|
4
|
+
// • an uppercase, letter-spaced micro-label (top-left)
|
|
5
|
+
// • a tinted icon chip (top-right) when `icon` is set
|
|
6
|
+
// • a large MONO value with an optional small unit baseline-aligned after it
|
|
7
|
+
// • a faint sub-line under the value (delta / context)
|
|
8
|
+
// `tone` tints the icon chip (and, when set, the value) with a semantic hue;
|
|
9
|
+
// `neutral` keeps the chip on the plain accent. Everything is token-driven.
|
|
10
|
+
import type { Snippet } from 'svelte';
|
|
11
|
+
import Card from '../atoms/Card.svelte';
|
|
12
|
+
import Icon, { type IconName } from '../atoms/Icon.svelte';
|
|
13
|
+
|
|
14
|
+
type Tone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
|
|
15
|
+
|
|
16
|
+
let {
|
|
17
|
+
label,
|
|
18
|
+
value,
|
|
19
|
+
unit,
|
|
20
|
+
sub,
|
|
21
|
+
icon,
|
|
22
|
+
tone = 'neutral',
|
|
23
|
+
// Tint the value itself with the tone (not just the chip).
|
|
24
|
+
tintValue = false,
|
|
25
|
+
class: klass = '',
|
|
26
|
+
// Raw SVG markup for a custom icon — passed through to `Icon` so any glyph
|
|
27
|
+
// outside the registry can fill the chip.
|
|
28
|
+
iconChildren,
|
|
29
|
+
...rest
|
|
30
|
+
}: {
|
|
31
|
+
label: string;
|
|
32
|
+
value: string | number;
|
|
33
|
+
unit?: string;
|
|
34
|
+
sub?: string;
|
|
35
|
+
icon?: IconName;
|
|
36
|
+
tone?: Tone;
|
|
37
|
+
tintValue?: boolean;
|
|
38
|
+
class?: string;
|
|
39
|
+
iconChildren?: Snippet;
|
|
40
|
+
[key: string]: unknown;
|
|
41
|
+
} = $props();
|
|
42
|
+
</script>
|
|
43
|
+
|
|
44
|
+
<Card
|
|
45
|
+
class="metric metric-{tone} {tintValue ? 'metric-tint' : ''} {klass}"
|
|
46
|
+
{...rest}
|
|
47
|
+
>
|
|
48
|
+
<div class="metric-head">
|
|
49
|
+
<span class="metric-label">{label}</span>
|
|
50
|
+
{#if icon || iconChildren}
|
|
51
|
+
<span class="metric-chip" aria-hidden="true">
|
|
52
|
+
<Icon name={icon}>{@render iconChildren?.()}</Icon>
|
|
53
|
+
</span>
|
|
54
|
+
{/if}
|
|
55
|
+
</div>
|
|
56
|
+
<div class="metric-value">
|
|
57
|
+
<span class="metric-num">{value}</span>
|
|
58
|
+
{#if unit}<span class="metric-unit">{unit}</span>{/if}
|
|
59
|
+
</div>
|
|
60
|
+
{#if sub}<div class="metric-sub">{sub}</div>{/if}
|
|
61
|
+
</Card>
|
|
62
|
+
|
|
63
|
+
<style>
|
|
64
|
+
:global(.metric) {
|
|
65
|
+
/* The tone hue the chip / value pull from; neutral falls back to accent. */
|
|
66
|
+
--metric-tone: var(--accent);
|
|
67
|
+
display: flex;
|
|
68
|
+
flex-direction: column;
|
|
69
|
+
gap: var(--sp-2);
|
|
70
|
+
}
|
|
71
|
+
:global(.metric-ok) {
|
|
72
|
+
--metric-tone: var(--ok);
|
|
73
|
+
}
|
|
74
|
+
:global(.metric-warn) {
|
|
75
|
+
--metric-tone: var(--warn);
|
|
76
|
+
}
|
|
77
|
+
:global(.metric-danger) {
|
|
78
|
+
--metric-tone: var(--danger);
|
|
79
|
+
}
|
|
80
|
+
:global(.metric-info) {
|
|
81
|
+
--metric-tone: var(--info);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.metric-head {
|
|
85
|
+
display: flex;
|
|
86
|
+
align-items: flex-start;
|
|
87
|
+
justify-content: space-between;
|
|
88
|
+
gap: var(--sp-2);
|
|
89
|
+
}
|
|
90
|
+
.metric-label {
|
|
91
|
+
font-size: var(--fs-xs);
|
|
92
|
+
font-weight: var(--fw-semibold);
|
|
93
|
+
text-transform: uppercase;
|
|
94
|
+
letter-spacing: 0.06em;
|
|
95
|
+
color: var(--text-muted);
|
|
96
|
+
font-family: var(--font-mono);
|
|
97
|
+
line-height: 1.4;
|
|
98
|
+
}
|
|
99
|
+
.metric-chip {
|
|
100
|
+
display: inline-flex;
|
|
101
|
+
align-items: center;
|
|
102
|
+
justify-content: center;
|
|
103
|
+
flex: none;
|
|
104
|
+
width: 1.75rem;
|
|
105
|
+
height: 1.75rem;
|
|
106
|
+
border-radius: var(--r-md);
|
|
107
|
+
font-size: 1rem;
|
|
108
|
+
color: var(--metric-tone);
|
|
109
|
+
background: color-mix(in srgb, var(--metric-tone) 14%, transparent);
|
|
110
|
+
border: 1px solid color-mix(in srgb, var(--metric-tone) 30%, transparent);
|
|
111
|
+
}
|
|
112
|
+
.metric-value {
|
|
113
|
+
display: flex;
|
|
114
|
+
align-items: baseline;
|
|
115
|
+
gap: var(--sp-1);
|
|
116
|
+
font-family: var(--font-mono);
|
|
117
|
+
line-height: 1.1;
|
|
118
|
+
}
|
|
119
|
+
.metric-num {
|
|
120
|
+
font-size: var(--fs-2xl);
|
|
121
|
+
font-weight: var(--fw-semibold);
|
|
122
|
+
color: var(--text);
|
|
123
|
+
font-variant-numeric: tabular-nums;
|
|
124
|
+
}
|
|
125
|
+
:global(.metric-tint) .metric-num {
|
|
126
|
+
color: var(--metric-tone);
|
|
127
|
+
}
|
|
128
|
+
.metric-unit {
|
|
129
|
+
font-size: var(--fs-sm);
|
|
130
|
+
font-weight: var(--fw-normal);
|
|
131
|
+
color: var(--text-muted);
|
|
132
|
+
}
|
|
133
|
+
.metric-sub {
|
|
134
|
+
font-size: var(--fs-xs);
|
|
135
|
+
color: var(--text-faint);
|
|
136
|
+
line-height: 1.4;
|
|
137
|
+
}
|
|
138
|
+
</style>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import type { Snippet } from 'svelte';
|
|
2
|
+
import { type IconName } from '../atoms/Icon.svelte';
|
|
3
|
+
type Tone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
|
|
4
|
+
type $$ComponentProps = {
|
|
5
|
+
label: string;
|
|
6
|
+
value: string | number;
|
|
7
|
+
unit?: string;
|
|
8
|
+
sub?: string;
|
|
9
|
+
icon?: IconName;
|
|
10
|
+
tone?: Tone;
|
|
11
|
+
tintValue?: boolean;
|
|
12
|
+
class?: string;
|
|
13
|
+
iconChildren?: Snippet;
|
|
14
|
+
[key: string]: unknown;
|
|
15
|
+
};
|
|
16
|
+
declare const Metric: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
17
|
+
type Metric = ReturnType<typeof Metric>;
|
|
18
|
+
export default Metric;
|
package/dist/index.d.ts
CHANGED
|
@@ -27,11 +27,13 @@ export { type AccordionItem, default as Accordion, } from './components/molecule
|
|
|
27
27
|
export { default as CodeBlock } from './components/molecules/CodeBlock.svelte';
|
|
28
28
|
export { default as CopyButton } from './components/molecules/CopyButton.svelte';
|
|
29
29
|
export { default as Dropzone } from './components/molecules/Dropzone.svelte';
|
|
30
|
+
export { default as EmptyState } from './components/molecules/EmptyState.svelte';
|
|
30
31
|
export { default as Field } from './components/molecules/Field.svelte';
|
|
31
32
|
export { default as FileButton } from './components/molecules/FileButton.svelte';
|
|
32
33
|
export { default as FontScalePicker } from './components/molecules/FontScalePicker.svelte';
|
|
33
34
|
export { default as IconButton } from './components/molecules/IconButton.svelte';
|
|
34
35
|
export { default as Menu, type MenuItem } from './components/molecules/Menu.svelte';
|
|
36
|
+
export { default as Metric, default as StatTile, } from './components/molecules/Metric.svelte';
|
|
35
37
|
export { default as Modal } from './components/molecules/Modal.svelte';
|
|
36
38
|
export { default as OptionButton } from './components/molecules/OptionButton.svelte';
|
|
37
39
|
export { default as Popover } from './components/molecules/Popover.svelte';
|
package/dist/index.js
CHANGED
|
@@ -34,12 +34,16 @@ export { default as Accordion, } from './components/molecules/Accordion.svelte';
|
|
|
34
34
|
export { default as CodeBlock } from './components/molecules/CodeBlock.svelte';
|
|
35
35
|
export { default as CopyButton } from './components/molecules/CopyButton.svelte';
|
|
36
36
|
export { default as Dropzone } from './components/molecules/Dropzone.svelte';
|
|
37
|
+
export { default as EmptyState } from './components/molecules/EmptyState.svelte';
|
|
37
38
|
// ---- molecules ----
|
|
38
39
|
export { default as Field } from './components/molecules/Field.svelte';
|
|
39
40
|
export { default as FileButton } from './components/molecules/FileButton.svelte';
|
|
40
41
|
export { default as FontScalePicker } from './components/molecules/FontScalePicker.svelte';
|
|
41
42
|
export { default as IconButton } from './components/molecules/IconButton.svelte';
|
|
42
43
|
export { default as Menu } from './components/molecules/Menu.svelte';
|
|
44
|
+
export { default as Metric,
|
|
45
|
+
// StatTile is an alias for Metric — same component, dashboard-friendly name.
|
|
46
|
+
default as StatTile, } from './components/molecules/Metric.svelte';
|
|
43
47
|
export { default as Modal } from './components/molecules/Modal.svelte';
|
|
44
48
|
export { default as OptionButton } from './components/molecules/OptionButton.svelte';
|
|
45
49
|
export { default as Popover } from './components/molecules/Popover.svelte';
|
package/package.json
CHANGED