@insymetri/styleguide 0.1.6 → 0.1.8
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/IIButton/IIButton.svelte +1 -1
- package/dist/IICombobox/IICombobox.svelte +3 -3
- package/dist/IIDatePicker/IIDatePicker.svelte +1 -1
- package/dist/IIDropdownInput/IIDropdownInput.svelte +44 -22
- package/dist/IIDropdownInput/IIDropdownInput.svelte.d.ts +1 -0
- package/dist/IIDropdownMenu/IIDropdownMenu.svelte +1 -1
- package/dist/IIInput/IIInput.svelte +2 -2
- package/dist/IITextarea/IITextarea.svelte +1 -1
- package/dist/style/colors.css +1 -0
- package/dist/style/tailwind/colors.js +1 -1
- package/dist/style/tailwind/typography.d.ts +6 -6
- package/dist/style/tailwind/typography.js +8 -8
- package/package.json +4 -3
|
@@ -111,13 +111,13 @@
|
|
|
111
111
|
{placeholder}
|
|
112
112
|
{disabled}
|
|
113
113
|
oninput={handleInput}
|
|
114
|
-
class="w-full box-border py-
|
|
114
|
+
class="w-full box-border py-5 px-12 text-small text-input-text bg-input-bg border border-input-border rounded-10 transition-all duration-fast outline-none placeholder:text-input-placeholder hover:border-input-border-hover focus:border-input-border-hover disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-input-bg-disabled motion-reduce:transition-none"
|
|
115
115
|
/>
|
|
116
116
|
<Combobox.Portal>
|
|
117
117
|
{#if filteredItems.length > 0 || emptyContent}
|
|
118
118
|
<Combobox.Content
|
|
119
119
|
class={cn(
|
|
120
|
-
'bg-
|
|
120
|
+
'bg-dropdown-bg border border-dropdown-border rounded-10 shadow-dropdown p-4 max-h-300 overflow-y-auto z-16',
|
|
121
121
|
contentClass
|
|
122
122
|
)}
|
|
123
123
|
style="width: calc(var(--bits-floating-anchor-width) - 4px)"
|
|
@@ -129,7 +129,7 @@
|
|
|
129
129
|
value={getItemValue(item)}
|
|
130
130
|
label=""
|
|
131
131
|
disabled={getItemDisabled?.(item) ?? false}
|
|
132
|
-
class="flex items-center gap-8 py-6 px-12 text-small text-dropdown-item rounded-
|
|
132
|
+
class="flex items-center gap-8 py-6 px-12 text-small text-dropdown-item rounded-6 cursor-default transition-all duration-fast outline-none hover:bg-dropdown-item-hover data-[highlighted]:bg-dropdown-item-hover data-[selected]:bg-dropdown-item-selected data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed motion-reduce:transition-none"
|
|
133
133
|
>
|
|
134
134
|
{#snippet children({selected})}
|
|
135
135
|
{#if renderItem}
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
{/if}
|
|
19
19
|
<div class="relative">
|
|
20
20
|
<DatePicker.Input
|
|
21
|
-
class="flex items-center gap-4 py-
|
|
21
|
+
class="flex items-center gap-4 py-5 px-12 border border-strong rounded-10 text-small text-gray-800 bg-surface transition-all duration-fast [&:has(:focus)]:border-primary [&:has(:focus)]:ring-3 [&:has(:focus)]:ring-primary"
|
|
22
22
|
>
|
|
23
23
|
{#snippet children({segments})}
|
|
24
24
|
{#each segments as { part, value: segValue }, i (`${part}-${i}`)}
|
|
@@ -14,6 +14,7 @@
|
|
|
14
14
|
placeholder?: string
|
|
15
15
|
disabled?: boolean
|
|
16
16
|
onSelect?: (value: string) => void
|
|
17
|
+
matchTriggerWidth?: boolean
|
|
17
18
|
class?: string
|
|
18
19
|
}
|
|
19
20
|
|
|
@@ -23,10 +24,13 @@
|
|
|
23
24
|
placeholder = 'Select...',
|
|
24
25
|
disabled = false,
|
|
25
26
|
onSelect,
|
|
27
|
+
matchTriggerWidth = false,
|
|
26
28
|
class: className,
|
|
27
29
|
}: Props = $props()
|
|
28
30
|
|
|
29
31
|
let open = $state(false)
|
|
32
|
+
let triggerEl = $state<HTMLElement | null>(null)
|
|
33
|
+
let triggerWidth = $state<number | undefined>(undefined)
|
|
30
34
|
|
|
31
35
|
const selectedLabel = $derived(items.find(i => i.value === value)?.label ?? placeholder)
|
|
32
36
|
|
|
@@ -35,13 +39,20 @@
|
|
|
35
39
|
open = false
|
|
36
40
|
onSelect?.(item.value)
|
|
37
41
|
}
|
|
42
|
+
|
|
43
|
+
$effect(() => {
|
|
44
|
+
if (matchTriggerWidth && open && triggerEl) {
|
|
45
|
+
triggerWidth = triggerEl.offsetWidth
|
|
46
|
+
}
|
|
47
|
+
})
|
|
38
48
|
</script>
|
|
39
49
|
|
|
40
50
|
<DropdownMenu.Root bind:open>
|
|
41
51
|
<DropdownMenu.Trigger
|
|
52
|
+
bind:ref={triggerEl}
|
|
42
53
|
{disabled}
|
|
43
54
|
class={cn(
|
|
44
|
-
'
|
|
55
|
+
'flex items-center justify-between gap-4 py-5 pl-12 pr-8 border rounded-10 bg-input-bg cursor-default text-small text-input-text box-border appearance-none font-inherit outline-none focus:border-accent focus:ring-3 focus:ring-primary disabled:opacity-50 disabled:cursor-not-allowed',
|
|
45
56
|
open ? 'border-input-border-hover' : 'border-input-border hover:border-input-border-hover',
|
|
46
57
|
value === undefined && 'text-input-placeholder',
|
|
47
58
|
className
|
|
@@ -52,25 +63,36 @@
|
|
|
52
63
|
>
|
|
53
64
|
<IIIcon icon="caret-down" class="w-14 h-14 text-secondary shrink-0" />
|
|
54
65
|
</DropdownMenu.Trigger>
|
|
55
|
-
<DropdownMenu.
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
66
|
+
<DropdownMenu.Portal>
|
|
67
|
+
<DropdownMenu.Content
|
|
68
|
+
class="min-w-100 bg-dropdown-bg border border-dropdown-border rounded-10 shadow-dropdown p-4 z-16 outline-none"
|
|
69
|
+
sideOffset={2}
|
|
70
|
+
side="bottom"
|
|
71
|
+
align="start"
|
|
72
|
+
>
|
|
73
|
+
{#snippet child({ props, wrapperProps })}
|
|
74
|
+
<div
|
|
75
|
+
{...wrapperProps}
|
|
76
|
+
style:min-width={matchTriggerWidth && triggerWidth ? `${triggerWidth}px` : undefined}
|
|
77
|
+
>
|
|
78
|
+
<div {...props}>
|
|
79
|
+
{#each items as item (item.value)}
|
|
80
|
+
<DropdownMenu.Item
|
|
81
|
+
class={cn(
|
|
82
|
+
'flex items-center justify-between gap-12 px-12 py-6 rounded-6 text-small text-dropdown-item cursor-default outline-none data-[highlighted]:bg-dropdown-item-hover',
|
|
83
|
+
value === item.value && 'text-dropdown-item-selected'
|
|
84
|
+
)}
|
|
85
|
+
onSelect={() => handleSelect(item)}
|
|
86
|
+
>
|
|
87
|
+
<span>{item.label}</span>
|
|
88
|
+
{#if value === item.value}
|
|
89
|
+
<IIIcon icon="check" class="w-14 h-14 text-accent shrink-0" />
|
|
90
|
+
{/if}
|
|
91
|
+
</DropdownMenu.Item>
|
|
92
|
+
{/each}
|
|
93
|
+
</div>
|
|
94
|
+
</div>
|
|
95
|
+
{/snippet}
|
|
96
|
+
</DropdownMenu.Content>
|
|
97
|
+
</DropdownMenu.Portal>
|
|
76
98
|
</DropdownMenu.Root>
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
onSelect={() => handleSelect(item.value)}
|
|
63
63
|
>
|
|
64
64
|
{#if item.icon}
|
|
65
|
-
<div class="w-
|
|
65
|
+
<div class="w-16 h-16 flex items-center justify-center shrink-0 [&_svg]:w-16 [&_svg]:h-16">
|
|
66
66
|
{@render item.icon()}
|
|
67
67
|
</div>
|
|
68
68
|
{/if}
|
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
bind:value
|
|
75
75
|
{type}
|
|
76
76
|
{disabled}
|
|
77
|
-
class="py-
|
|
77
|
+
class="py-5 px-12 text-small font-[family-name:var(--font-family)] text-input-text bg-transparent border-0 outline-none w-full box-border placeholder:text-input-placeholder disabled:text-input-text-disabled disabled:cursor-not-allowed"
|
|
78
78
|
{...restProps}
|
|
79
79
|
/>
|
|
80
80
|
{#if suffix}
|
|
@@ -90,7 +90,7 @@
|
|
|
90
90
|
{type}
|
|
91
91
|
{disabled}
|
|
92
92
|
class={cn(
|
|
93
|
-
'py-
|
|
93
|
+
'py-5 px-12 text-small font-[family-name:var(--font-family)] text-input-text bg-input-bg border border-input-border rounded-10 transition-all duration-fast outline-none w-full box-border placeholder:text-input-placeholder hover:border-input-border-hover focus:border-input-border-hover disabled:bg-input-bg-disabled disabled:text-input-text-disabled disabled:cursor-not-allowed motion-reduce:transition-none motion-reduce:animate-none',
|
|
94
94
|
showError && 'border-input-border-error focus:border-input-border-error focus:ring-error',
|
|
95
95
|
shouldShake && 'animate-shake'
|
|
96
96
|
)}
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
{disabled}
|
|
66
66
|
{rows}
|
|
67
67
|
class={cn(
|
|
68
|
-
'py-
|
|
68
|
+
'py-5 px-12 text-small font-[family-name:var(--font-family)] text-body bg-surface border border-strong rounded-10 transition-all duration-fast outline-none w-full box-border resize-none overflow-hidden min-h-16 placeholder:text-tertiary focus:border-primary focus:ring-3 focus:ring-primary disabled:bg-gray-100 disabled:text-secondary disabled:cursor-not-allowed motion-reduce:transition-none',
|
|
69
69
|
showError && 'border-error focus:border-error focus:ring-error'
|
|
70
70
|
)}
|
|
71
71
|
oninput={handleInput}
|
package/dist/style/colors.css
CHANGED
|
@@ -188,7 +188,7 @@ export const borderColor = {
|
|
|
188
188
|
// Border hierarchy
|
|
189
189
|
primary: 'var(--ii-border)',
|
|
190
190
|
strong: 'var(--ii-border-strong)',
|
|
191
|
-
subtle: 'var(--ii-
|
|
191
|
+
subtle: 'var(--ii-border-subtle)',
|
|
192
192
|
// Input
|
|
193
193
|
'input-border': 'var(--color-input-border)',
|
|
194
194
|
'input-border-hover': 'var(--color-input-border-hover)',
|
|
@@ -51,27 +51,27 @@ export declare const fontSize: {
|
|
|
51
51
|
readonly lineHeight: "2.0rem";
|
|
52
52
|
readonly fontWeight: "500";
|
|
53
53
|
}];
|
|
54
|
-
readonly default: readonly ["1.
|
|
54
|
+
readonly default: readonly ["1.3rem", {
|
|
55
55
|
readonly lineHeight: "1.6rem";
|
|
56
56
|
readonly fontWeight: "400";
|
|
57
57
|
}];
|
|
58
|
-
readonly emphasis: readonly ["1.
|
|
58
|
+
readonly emphasis: readonly ["1.3rem", {
|
|
59
59
|
readonly lineHeight: "1.6rem";
|
|
60
60
|
readonly fontWeight: "500";
|
|
61
61
|
}];
|
|
62
|
-
readonly strong: readonly ["1.
|
|
62
|
+
readonly strong: readonly ["1.3rem", {
|
|
63
63
|
readonly lineHeight: "1.6rem";
|
|
64
64
|
readonly fontWeight: "600";
|
|
65
65
|
}];
|
|
66
|
-
readonly small: readonly ["1.
|
|
66
|
+
readonly small: readonly ["1.2rem", {
|
|
67
67
|
readonly lineHeight: "1.6rem";
|
|
68
68
|
readonly fontWeight: "400";
|
|
69
69
|
}];
|
|
70
|
-
readonly 'small-emphasis': readonly ["1.
|
|
70
|
+
readonly 'small-emphasis': readonly ["1.2rem", {
|
|
71
71
|
readonly lineHeight: "1.6rem";
|
|
72
72
|
readonly fontWeight: "500";
|
|
73
73
|
}];
|
|
74
|
-
readonly 'small-strong': readonly ["1.
|
|
74
|
+
readonly 'small-strong': readonly ["1.2rem", {
|
|
75
75
|
readonly lineHeight: "1.6rem";
|
|
76
76
|
readonly fontWeight: "600";
|
|
77
77
|
}];
|
|
@@ -19,14 +19,14 @@ export const fontSize = {
|
|
|
19
19
|
// Body — large (16px)
|
|
20
20
|
large: ['1.6rem', { lineHeight: '2.0rem', fontWeight: '400' }],
|
|
21
21
|
'large-emphasis': ['1.6rem', { lineHeight: '2.0rem', fontWeight: '500' }],
|
|
22
|
-
// Body — default (
|
|
23
|
-
default: ['1.
|
|
24
|
-
emphasis: ['1.
|
|
25
|
-
strong: ['1.
|
|
26
|
-
// Body — small (
|
|
27
|
-
small: ['1.
|
|
28
|
-
'small-emphasis': ['1.
|
|
29
|
-
'small-strong': ['1.
|
|
22
|
+
// Body — default (13px)
|
|
23
|
+
default: ['1.3rem', { lineHeight: '1.6rem', fontWeight: '400' }],
|
|
24
|
+
emphasis: ['1.3rem', { lineHeight: '1.6rem', fontWeight: '500' }],
|
|
25
|
+
strong: ['1.3rem', { lineHeight: '1.6rem', fontWeight: '600' }],
|
|
26
|
+
// Body — small (12px)
|
|
27
|
+
small: ['1.2rem', { lineHeight: '1.6rem', fontWeight: '400' }],
|
|
28
|
+
'small-emphasis': ['1.2rem', { lineHeight: '1.6rem', fontWeight: '500' }],
|
|
29
|
+
'small-strong': ['1.2rem', { lineHeight: '1.6rem', fontWeight: '600' }],
|
|
30
30
|
// Body — tiny (11px)
|
|
31
31
|
tiny: ['1.1rem', { lineHeight: '1.2rem', fontWeight: '400' }],
|
|
32
32
|
'tiny-emphasis': ['1.1rem', { lineHeight: '1.2rem', fontWeight: '500' }],
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@insymetri/styleguide",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.8",
|
|
4
4
|
"description": "Insymetri shared UI component library built with Svelte 5",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"scripts": {
|
|
@@ -57,10 +57,11 @@
|
|
|
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",
|
|
60
61
|
"storybook": "^10.2.10",
|
|
61
62
|
"svelte": "^5.0.0",
|
|
62
|
-
"
|
|
63
|
-
"
|
|
63
|
+
"tailwindcss": "^4.2.1",
|
|
64
|
+
"typescript": "^5.0.0"
|
|
64
65
|
},
|
|
65
66
|
"license": "UNLICENSED",
|
|
66
67
|
"private": false,
|