@r2digisolutions/components 0.15.0 → 0.15.2
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.
|
@@ -2,12 +2,12 @@
|
|
|
2
2
|
import type { Snippet } from 'svelte';
|
|
3
3
|
|
|
4
4
|
export type IconBoxTone = 'brand' | 'neutral' | 'success' | 'warning' | 'error' | 'info';
|
|
5
|
-
export type IconBoxSize = 'sm' | 'md' | 'lg';
|
|
5
|
+
export type IconBoxSize = 'sm' | 'md' | 'lg' | 'xl';
|
|
6
6
|
|
|
7
7
|
interface IconBoxProps {
|
|
8
8
|
tone?: IconBoxTone;
|
|
9
9
|
size?: IconBoxSize;
|
|
10
|
-
rounded?: 'lg' | 'xl' | 'full';
|
|
10
|
+
rounded?: 'lg' | 'xl' | '2xl' | 'full';
|
|
11
11
|
class?: string;
|
|
12
12
|
children?: Snippet;
|
|
13
13
|
}
|
|
@@ -32,12 +32,14 @@
|
|
|
32
32
|
const sizes: Record<IconBoxSize, string> = {
|
|
33
33
|
sm: 'h-8 w-8 [&_svg]:h-3.5 [&_svg]:w-3.5',
|
|
34
34
|
md: 'h-10 w-10 [&_svg]:h-4 [&_svg]:w-4',
|
|
35
|
-
lg: 'h-12 w-12 [&_svg]:h-5 [&_svg]:w-5'
|
|
35
|
+
lg: 'h-12 w-12 [&_svg]:h-5 [&_svg]:w-5',
|
|
36
|
+
xl: 'h-16 w-16 [&_svg]:h-7 [&_svg]:w-7 sm:h-20 sm:w-20 sm:[&_svg]:h-8 sm:[&_svg]:w-8'
|
|
36
37
|
};
|
|
37
38
|
|
|
38
|
-
const radii: Record<'lg' | 'xl' | 'full', string> = {
|
|
39
|
+
const radii: Record<'lg' | 'xl' | '2xl' | 'full', string> = {
|
|
39
40
|
lg: 'rounded-lg',
|
|
40
41
|
xl: 'rounded-xl',
|
|
42
|
+
'2xl': 'rounded-2xl',
|
|
41
43
|
full: 'rounded-full'
|
|
42
44
|
};
|
|
43
45
|
</script>
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import type { Snippet } from 'svelte';
|
|
2
2
|
export type IconBoxTone = 'brand' | 'neutral' | 'success' | 'warning' | 'error' | 'info';
|
|
3
|
-
export type IconBoxSize = 'sm' | 'md' | 'lg';
|
|
3
|
+
export type IconBoxSize = 'sm' | 'md' | 'lg' | 'xl';
|
|
4
4
|
interface IconBoxProps {
|
|
5
5
|
tone?: IconBoxTone;
|
|
6
6
|
size?: IconBoxSize;
|
|
7
|
-
rounded?: 'lg' | 'xl' | 'full';
|
|
7
|
+
rounded?: 'lg' | 'xl' | '2xl' | 'full';
|
|
8
8
|
class?: string;
|
|
9
9
|
children?: Snippet;
|
|
10
10
|
}
|
|
@@ -48,13 +48,31 @@
|
|
|
48
48
|
const titleSize: Record<PageHeaderSize, string> = {
|
|
49
49
|
sm: 'text-lg font-semibold',
|
|
50
50
|
md: 'text-2xl font-semibold',
|
|
51
|
-
lg: 'text-3xl font-bold'
|
|
51
|
+
lg: 'text-3xl font-bold tracking-tight'
|
|
52
52
|
};
|
|
53
53
|
|
|
54
54
|
const spacing: Record<PageHeaderSize, string> = {
|
|
55
55
|
sm: 'space-y-2',
|
|
56
56
|
md: 'space-y-3',
|
|
57
|
-
lg: 'space-y-
|
|
57
|
+
lg: 'space-y-5'
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
const bodyGap: Record<PageHeaderSize, string> = {
|
|
61
|
+
sm: 'gap-2',
|
|
62
|
+
md: 'gap-3',
|
|
63
|
+
lg: 'gap-4'
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
const textStack: Record<PageHeaderSize, string> = {
|
|
67
|
+
sm: 'space-y-1',
|
|
68
|
+
md: 'space-y-1.5',
|
|
69
|
+
lg: 'space-y-2'
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
const descriptionClass: Record<PageHeaderSize, string> = {
|
|
73
|
+
sm: 'max-w-2xl text-sm leading-snug text-muted',
|
|
74
|
+
md: 'max-w-2xl text-sm leading-relaxed text-muted',
|
|
75
|
+
lg: 'max-w-3xl text-base leading-relaxed text-muted'
|
|
58
76
|
};
|
|
59
77
|
|
|
60
78
|
const resolvedSize = $derived<PageHeaderSize>(
|
|
@@ -75,15 +93,15 @@
|
|
|
75
93
|
<Breadcrumb items={breadcrumbs} />
|
|
76
94
|
{/if}
|
|
77
95
|
|
|
78
|
-
<div class=
|
|
79
|
-
<div class=
|
|
96
|
+
<div class={['flex flex-col sm:flex-row sm:items-start sm:justify-between', bodyGap[resolvedSize]]}>
|
|
97
|
+
<div class={['flex min-w-0 items-start', bodyGap[resolvedSize]]}>
|
|
80
98
|
{#if leading}
|
|
81
|
-
<div class="shrink-0">
|
|
99
|
+
<div class="shrink-0 pt-0.5">
|
|
82
100
|
{@render leading()}
|
|
83
101
|
</div>
|
|
84
102
|
{/if}
|
|
85
103
|
|
|
86
|
-
<div class=
|
|
104
|
+
<div class={['min-w-0', textStack[resolvedSize]]}>
|
|
87
105
|
{#if loading}
|
|
88
106
|
<Skeleton
|
|
89
107
|
variant="rounded"
|
|
@@ -94,8 +112,8 @@
|
|
|
94
112
|
<Skeleton variant="rounded" width="18rem" height="1rem" class="mt-1.5" />
|
|
95
113
|
{/if}
|
|
96
114
|
{:else}
|
|
97
|
-
<div class="flex min-w-0 items-center gap-2">
|
|
98
|
-
<h1 class={['
|
|
115
|
+
<div class="flex min-w-0 flex-wrap items-center gap-2.5">
|
|
116
|
+
<h1 class={['min-w-0 text-primary', titleSize[resolvedSize]]}>
|
|
99
117
|
{title}
|
|
100
118
|
</h1>
|
|
101
119
|
{#if status}
|
|
@@ -105,10 +123,10 @@
|
|
|
105
123
|
{/if}
|
|
106
124
|
</div>
|
|
107
125
|
{#if description}
|
|
108
|
-
<p class=
|
|
126
|
+
<p class={descriptionClass[resolvedSize]}>{description}</p>
|
|
109
127
|
{/if}
|
|
110
128
|
{#if meta}
|
|
111
|
-
<div class=
|
|
129
|
+
<div class={resolvedSize === 'lg' ? 'pt-1' : 'pt-0.5'}>
|
|
112
130
|
{@render meta()}
|
|
113
131
|
</div>
|
|
114
132
|
{/if}
|
|
@@ -117,7 +135,7 @@
|
|
|
117
135
|
</div>
|
|
118
136
|
|
|
119
137
|
{#if actions && !loading}
|
|
120
|
-
<div class="flex shrink-0 flex-wrap items-center gap-2">
|
|
138
|
+
<div class="flex shrink-0 flex-wrap items-center gap-2 sm:pt-1">
|
|
121
139
|
{@render actions()}
|
|
122
140
|
</div>
|
|
123
141
|
{:else if loading}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@r2digisolutions/components",
|
|
3
|
-
"version": "0.15.
|
|
3
|
+
"version": "0.15.2",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "R2DigiSolutions Svelte 5 component library — Atomic Design, Tailwind 4, Light/Dark mode",
|
|
6
6
|
"license": "MIT",
|
|
@@ -66,38 +66,38 @@
|
|
|
66
66
|
},
|
|
67
67
|
"devDependencies": {
|
|
68
68
|
"@eslint/js": "^10.0.1",
|
|
69
|
-
"@lucide/svelte": "^1.
|
|
69
|
+
"@lucide/svelte": "^1.39.0",
|
|
70
70
|
"@playwright/test": "^1.62.1",
|
|
71
|
-
"@storybook/addon-a11y": "^10.
|
|
72
|
-
"@storybook/addon-docs": "^10.
|
|
73
|
-
"@storybook/addon-svelte-csf": "^5.1.
|
|
74
|
-
"@storybook/addon-themes": "^10.
|
|
75
|
-
"@storybook/svelte": "^10.
|
|
76
|
-
"@storybook/sveltekit": "^10.
|
|
71
|
+
"@storybook/addon-a11y": "^10.6.0",
|
|
72
|
+
"@storybook/addon-docs": "^10.6.0",
|
|
73
|
+
"@storybook/addon-svelte-csf": "^5.1.3",
|
|
74
|
+
"@storybook/addon-themes": "^10.6.0",
|
|
75
|
+
"@storybook/svelte": "^10.6.0",
|
|
76
|
+
"@storybook/sveltekit": "^10.6.0",
|
|
77
77
|
"@sveltejs/adapter-static": "next",
|
|
78
78
|
"@sveltejs/kit": "next",
|
|
79
79
|
"@sveltejs/package": "^2.5.8",
|
|
80
80
|
"@sveltejs/vite-plugin-svelte": "^7.3.0",
|
|
81
81
|
"@tailwindcss/vite": "^4.3.3",
|
|
82
|
-
"@types/node": "^26.4.
|
|
82
|
+
"@types/node": "^26.4.1",
|
|
83
83
|
"@vitest/browser-playwright": "^4.1.11",
|
|
84
|
-
"bumpp": "~12.
|
|
84
|
+
"bumpp": "~12.3.0",
|
|
85
85
|
"eslint": "^10.9.1",
|
|
86
86
|
"eslint-config-prettier": "^10.1.8",
|
|
87
87
|
"eslint-plugin-svelte": "^3.23.0",
|
|
88
|
-
"globals": "^17.
|
|
88
|
+
"globals": "^17.12.0",
|
|
89
89
|
"mdsvex": "^0.12.8",
|
|
90
90
|
"playwright": "^1.62.1",
|
|
91
91
|
"prettier": "^3.9.6",
|
|
92
92
|
"prettier-plugin-svelte": "^4.1.1",
|
|
93
93
|
"prettier-plugin-tailwindcss": "^0.8.1",
|
|
94
94
|
"publint": "^0.3.24",
|
|
95
|
-
"storybook": "^10.
|
|
96
|
-
"svelte": "^5.
|
|
95
|
+
"storybook": "^10.6.0",
|
|
96
|
+
"svelte": "^5.57.0",
|
|
97
97
|
"svelte-check": "^4.7.6",
|
|
98
98
|
"tailwindcss": "^4.3.3",
|
|
99
99
|
"typescript": "6.0.3",
|
|
100
|
-
"typescript-eslint": "^8.
|
|
100
|
+
"typescript-eslint": "^8.69.0",
|
|
101
101
|
"vite": "^8.2.2",
|
|
102
102
|
"vitest": "^4.1.11",
|
|
103
103
|
"vitest-browser-svelte": "^3.0.0"
|
|
@@ -111,6 +111,6 @@
|
|
|
111
111
|
"atomic-design"
|
|
112
112
|
],
|
|
113
113
|
"dependencies": {
|
|
114
|
-
"@xyflow/svelte": "^1.6.
|
|
114
|
+
"@xyflow/svelte": "^1.6.6"
|
|
115
115
|
}
|
|
116
116
|
}
|