@insymetri/styleguide 0.1.7 → 0.1.9
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.
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
|
|
37
37
|
const baseClasses = $derived(
|
|
38
38
|
cn(
|
|
39
|
-
'inline-flex items-center justify-center rounded-6 cursor-default transition-
|
|
39
|
+
'inline-flex items-center justify-center rounded-6 cursor-default transition-colors duration-base ease-in-out no-underline disabled:cursor-not-allowed',
|
|
40
40
|
!iconOnly && 'gap-8 whitespace-nowrap'
|
|
41
41
|
)
|
|
42
42
|
)
|
|
@@ -44,22 +44,22 @@
|
|
|
44
44
|
const variantClasses = {
|
|
45
45
|
primary: 'bg-primary text-inverse border-0 hover:bg-primary-hover disabled:bg-disabled',
|
|
46
46
|
secondary: 'bg-surface text-gray-700 border border-strong hover:bg-gray-70 disabled:opacity-50',
|
|
47
|
-
ghost: '
|
|
47
|
+
ghost: 'text-secondary border-0 hover:bg-button-ghost-hover disabled:opacity-50',
|
|
48
48
|
danger: 'bg-error text-inverse border-0 hover:bg-error-hover disabled:bg-disabled',
|
|
49
49
|
success: 'bg-success text-inverse border-0 hover:bg-success-hover disabled:bg-disabled',
|
|
50
50
|
accent: 'bg-accent text-on-accent border-0 hover:bg-accent-hover disabled:bg-disabled',
|
|
51
51
|
} as const
|
|
52
52
|
|
|
53
53
|
const sizeClasses = {
|
|
54
|
-
sm: 'py-4 px-8 text-tiny
|
|
55
|
-
md: 'py-5 px-
|
|
56
|
-
lg: 'py-10 px-
|
|
54
|
+
sm: 'py-4 px-8 text-tiny h-24',
|
|
55
|
+
md: 'py-5 px-12 text-small h-28',
|
|
56
|
+
lg: 'py-10 px-16 text-large h-32',
|
|
57
57
|
} as const
|
|
58
58
|
|
|
59
59
|
const iconOnlySizeClasses = {
|
|
60
60
|
sm: 'w-24 h-24 p-0 text-small',
|
|
61
|
-
md: 'w-
|
|
62
|
-
lg: 'w-
|
|
61
|
+
md: 'w-28 h-28 p-0 text-default',
|
|
62
|
+
lg: 'w-32 h-32 p-0 text-large',
|
|
63
63
|
} as const
|
|
64
64
|
</script>
|
|
65
65
|
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import IIButton from './IIButton.svelte'
|
|
3
|
+
import IIIcon from '../IIIcon/IIIcon.svelte'
|
|
4
|
+
|
|
5
|
+
const variants = ['primary', 'secondary', 'ghost', 'danger', 'success', 'accent'] as const
|
|
6
|
+
const sizes = ['sm', 'md', 'lg'] as const
|
|
7
|
+
</script>
|
|
8
|
+
|
|
9
|
+
<div class="flex flex-col gap-32">
|
|
10
|
+
<!-- Variants × Sizes matrix -->
|
|
11
|
+
<section>
|
|
12
|
+
<h2 class="text-default-emphasis text-primary mb-8">Variants × Sizes</h2>
|
|
13
|
+
<table class="border-collapse">
|
|
14
|
+
<thead>
|
|
15
|
+
<tr>
|
|
16
|
+
<th class="text-left text-tiny text-secondary pr-16 pb-8"></th>
|
|
17
|
+
{#each sizes as size}
|
|
18
|
+
<th class="text-left text-tiny text-secondary px-8 pb-8">{size}</th>
|
|
19
|
+
{/each}
|
|
20
|
+
</tr>
|
|
21
|
+
</thead>
|
|
22
|
+
<tbody>
|
|
23
|
+
{#each variants as variant}
|
|
24
|
+
<tr>
|
|
25
|
+
<td class="text-tiny text-secondary pr-16 py-8 align-middle">{variant}</td>
|
|
26
|
+
{#each sizes as size}
|
|
27
|
+
<td class="px-8 py-8">
|
|
28
|
+
<IIButton {variant} {size}>Button</IIButton>
|
|
29
|
+
</td>
|
|
30
|
+
{/each}
|
|
31
|
+
</tr>
|
|
32
|
+
{/each}
|
|
33
|
+
</tbody>
|
|
34
|
+
</table>
|
|
35
|
+
</section>
|
|
36
|
+
|
|
37
|
+
<!-- With Icon -->
|
|
38
|
+
<section>
|
|
39
|
+
<h2 class="text-default-emphasis text-primary mb-8">With Icon</h2>
|
|
40
|
+
<div class="flex items-center gap-8 flex-wrap">
|
|
41
|
+
{#each variants as variant}
|
|
42
|
+
<IIButton {variant}>
|
|
43
|
+
<IIIcon icon="plus" />
|
|
44
|
+
{variant}
|
|
45
|
+
</IIButton>
|
|
46
|
+
{/each}
|
|
47
|
+
</div>
|
|
48
|
+
<div class="flex items-center gap-8 flex-wrap mt-8">
|
|
49
|
+
<IIButton variant="primary" size="sm"><IIIcon icon="magnifying-glass" />Search</IIButton>
|
|
50
|
+
<IIButton variant="primary" size="md"><IIIcon icon="upload-simple" />Upload</IIButton>
|
|
51
|
+
<IIButton variant="primary" size="lg"><IIIcon icon="paper-plane-tilt" />Send</IIButton>
|
|
52
|
+
</div>
|
|
53
|
+
<div class="flex items-center gap-8 flex-wrap mt-8">
|
|
54
|
+
<IIButton variant="danger"><IIIcon icon="trash" />Delete</IIButton>
|
|
55
|
+
<IIButton variant="success"><IIIcon icon="check" />Confirm</IIButton>
|
|
56
|
+
<IIButton variant="secondary"><IIIcon icon="pencil-simple" />Edit</IIButton>
|
|
57
|
+
<IIButton variant="ghost"><IIIcon icon="gear" />Settings</IIButton>
|
|
58
|
+
</div>
|
|
59
|
+
</section>
|
|
60
|
+
|
|
61
|
+
<!-- Icon Only -->
|
|
62
|
+
<section>
|
|
63
|
+
<h2 class="text-default-emphasis text-primary mb-8">Icon Only</h2>
|
|
64
|
+
<table class="border-collapse">
|
|
65
|
+
<thead>
|
|
66
|
+
<tr>
|
|
67
|
+
<th class="text-left text-tiny text-secondary pr-16 pb-8"></th>
|
|
68
|
+
{#each sizes as size}
|
|
69
|
+
<th class="text-left text-tiny text-secondary px-8 pb-8">{size}</th>
|
|
70
|
+
{/each}
|
|
71
|
+
</tr>
|
|
72
|
+
</thead>
|
|
73
|
+
<tbody>
|
|
74
|
+
{#each variants as variant}
|
|
75
|
+
<tr>
|
|
76
|
+
<td class="text-tiny text-secondary pr-16 py-8 align-middle">{variant}</td>
|
|
77
|
+
{#each sizes as size}
|
|
78
|
+
<td class="px-8 py-8">
|
|
79
|
+
<IIButton {variant} {size} iconOnly><IIIcon icon="plus" /></IIButton>
|
|
80
|
+
</td>
|
|
81
|
+
{/each}
|
|
82
|
+
</tr>
|
|
83
|
+
{/each}
|
|
84
|
+
</tbody>
|
|
85
|
+
</table>
|
|
86
|
+
</section>
|
|
87
|
+
|
|
88
|
+
<!-- Disabled -->
|
|
89
|
+
<section>
|
|
90
|
+
<h2 class="text-default-emphasis text-primary mb-8">Disabled</h2>
|
|
91
|
+
<div class="flex items-center gap-8 flex-wrap">
|
|
92
|
+
{#each variants as variant}
|
|
93
|
+
<IIButton {variant} disabled>{variant}</IIButton>
|
|
94
|
+
{/each}
|
|
95
|
+
</div>
|
|
96
|
+
</section>
|
|
97
|
+
|
|
98
|
+
<!-- Loading -->
|
|
99
|
+
<section>
|
|
100
|
+
<h2 class="text-default-emphasis text-primary mb-8">Loading</h2>
|
|
101
|
+
<div class="flex items-center gap-8 flex-wrap">
|
|
102
|
+
{#each variants as variant}
|
|
103
|
+
<IIButton {variant} loading>{variant}</IIButton>
|
|
104
|
+
{/each}
|
|
105
|
+
</div>
|
|
106
|
+
</section>
|
|
107
|
+
|
|
108
|
+
<!-- As Link -->
|
|
109
|
+
<section>
|
|
110
|
+
<h2 class="text-default-emphasis text-primary mb-8">As Link (href)</h2>
|
|
111
|
+
<div class="flex items-center gap-8 flex-wrap">
|
|
112
|
+
{#each variants as variant}
|
|
113
|
+
<IIButton {variant} href="#example">{variant}</IIButton>
|
|
114
|
+
{/each}
|
|
115
|
+
</div>
|
|
116
|
+
</section>
|
|
117
|
+
</div>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
2
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
3
|
+
$$bindings?: Bindings;
|
|
4
|
+
} & Exports;
|
|
5
|
+
(internal: unknown, props: {
|
|
6
|
+
$$events?: Events;
|
|
7
|
+
$$slots?: Slots;
|
|
8
|
+
}): Exports & {
|
|
9
|
+
$set?: any;
|
|
10
|
+
$on?: any;
|
|
11
|
+
};
|
|
12
|
+
z_$$bindings?: Bindings;
|
|
13
|
+
}
|
|
14
|
+
declare const IIButtonStories: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
|
|
15
|
+
[evt: string]: CustomEvent<any>;
|
|
16
|
+
}, {}, {}, string>;
|
|
17
|
+
type IIButtonStories = InstanceType<typeof IIButtonStories>;
|
|
18
|
+
export default IIButtonStories;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@insymetri/styleguide",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.9",
|
|
4
4
|
"description": "Insymetri shared UI component library built with Svelte 5",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"scripts": {
|
|
@@ -57,10 +57,13 @@
|
|
|
57
57
|
"@storybook/svelte-vite": "^10.2.10",
|
|
58
58
|
"@sveltejs/package": "^2.3.0",
|
|
59
59
|
"@sveltejs/vite-plugin-svelte": "^5.0.0",
|
|
60
|
+
"@tailwindcss/vite": "^4.2.1",
|
|
61
|
+
"prettier": "^3.8.1",
|
|
62
|
+
"prettier-plugin-svelte": "^3.5.1",
|
|
60
63
|
"storybook": "^10.2.10",
|
|
61
64
|
"svelte": "^5.0.0",
|
|
62
|
-
"
|
|
63
|
-
"
|
|
65
|
+
"tailwindcss": "^4.2.1",
|
|
66
|
+
"typescript": "^5.0.0"
|
|
64
67
|
},
|
|
65
68
|
"license": "UNLICENSED",
|
|
66
69
|
"private": false,
|