@insymetri/styleguide 0.1.63 → 0.1.64
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.
|
@@ -83,15 +83,15 @@
|
|
|
83
83
|
} as const
|
|
84
84
|
|
|
85
85
|
const densityClasses = {
|
|
86
|
-
compact: 'h-28
|
|
87
|
-
default: 'h-32
|
|
88
|
-
comfortable: 'h-40
|
|
89
|
-
mobile: 'h-48
|
|
86
|
+
compact: 'h-28 px-8 gap-4 text-tiny leading-[22px] rounded-control',
|
|
87
|
+
default: 'h-32 px-12 gap-6 text-default leading-[26px] rounded-control',
|
|
88
|
+
comfortable: 'h-40 px-12 gap-6 text-small leading-[32px] rounded-control',
|
|
89
|
+
mobile: 'h-48 px-16 gap-8 text-default leading-[40px] rounded-control',
|
|
90
90
|
} as const
|
|
91
91
|
|
|
92
92
|
const fixedSizeClasses = {
|
|
93
|
-
sm: '
|
|
94
|
-
lg: '
|
|
93
|
+
sm: 'h-24 px-8 gap-4 text-tiny leading-[18px] rounded-control',
|
|
94
|
+
lg: 'h-40 px-16 gap-8 text-large leading-[32px] rounded-control',
|
|
95
95
|
} as const
|
|
96
96
|
|
|
97
97
|
const iconSizeClasses = {
|
|
@@ -119,18 +119,20 @@
|
|
|
119
119
|
style="padding: {thumbInset[density.value]}px; grid-template-columns: repeat({items.length}, 1fr);"
|
|
120
120
|
>
|
|
121
121
|
<!-- Sliding thumb -->
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
122
|
+
{#if activeIndex >= 0}
|
|
123
|
+
<div
|
|
124
|
+
class="absolute"
|
|
125
|
+
style:border-radius="calc(var(--ii-radius-control) - {thumbInset[density.value]}px)"
|
|
126
|
+
style="
|
|
127
|
+
top: {thumbInset[density.value]}px;
|
|
128
|
+
bottom: {thumbInset[density.value]}px;
|
|
129
|
+
left: calc({thumbInset[density.value]}px + {activeIndex} * (100% - {thumbInset[density.value] * 2}px) / {items.length});
|
|
130
|
+
width: calc((100% - {thumbInset[density.value] * 2}px) / {items.length});
|
|
131
|
+
background: {getThumbColor(items[activeIndex])};
|
|
132
|
+
transition: left 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
133
|
+
"
|
|
134
|
+
></div>
|
|
135
|
+
{/if}
|
|
134
136
|
|
|
135
137
|
{#each items as item (item.value)}
|
|
136
138
|
{@const isActive = value === item.value}
|
|
@@ -7,6 +7,9 @@
|
|
|
7
7
|
|
|
8
8
|
let validationMode = $state('allow')
|
|
9
9
|
let focusValidation: (() => void) | undefined = $state()
|
|
10
|
+
|
|
11
|
+
let fullWidthMode = $state('allow')
|
|
12
|
+
let fullWidthThree = $state('monthly')
|
|
10
13
|
</script>
|
|
11
14
|
|
|
12
15
|
<div class="flex flex-col gap-32">
|
|
@@ -89,6 +92,65 @@
|
|
|
89
92
|
</button>
|
|
90
93
|
</section>
|
|
91
94
|
|
|
95
|
+
<!-- Full width -->
|
|
96
|
+
<section>
|
|
97
|
+
<h2 class="text-default-emphasis text-primary mb-8">Full Width</h2>
|
|
98
|
+
<p class="text-small text-secondary mb-12">
|
|
99
|
+
When the control is given a width (e.g. <code>w-full</code> in a constrained container),
|
|
100
|
+
each segment and the thumb should grow proportionally while the text stays centered.
|
|
101
|
+
</p>
|
|
102
|
+
<div class="max-w-400 flex flex-col gap-12">
|
|
103
|
+
<IISegmentedControl
|
|
104
|
+
class="w-full"
|
|
105
|
+
items={[
|
|
106
|
+
{label: 'Allow list', value: 'allow'},
|
|
107
|
+
{label: 'Block list', value: 'block'},
|
|
108
|
+
]}
|
|
109
|
+
bind:value={fullWidthMode}
|
|
110
|
+
/>
|
|
111
|
+
<IISegmentedControl
|
|
112
|
+
class="w-full"
|
|
113
|
+
items={[
|
|
114
|
+
{label: 'Monthly', value: 'monthly'},
|
|
115
|
+
{label: 'Quarterly', value: 'quarterly'},
|
|
116
|
+
{label: 'Annual', value: 'annual'},
|
|
117
|
+
]}
|
|
118
|
+
bind:value={fullWidthThree}
|
|
119
|
+
/>
|
|
120
|
+
</div>
|
|
121
|
+
</section>
|
|
122
|
+
|
|
123
|
+
<!-- Undefined value -->
|
|
124
|
+
<section>
|
|
125
|
+
<h2 class="text-default-emphasis text-primary mb-8">Undefined Value</h2>
|
|
126
|
+
<p class="text-small text-secondary mb-12">
|
|
127
|
+
When <code>value</code> is <code>undefined</code>, no segment is active and the thumb is
|
|
128
|
+
hidden.
|
|
129
|
+
</p>
|
|
130
|
+
<IISegmentedControl
|
|
131
|
+
items={[
|
|
132
|
+
{label: 'Allow list', value: 'allow'},
|
|
133
|
+
{label: 'Block list', value: 'block'},
|
|
134
|
+
]}
|
|
135
|
+
value={undefined as unknown as string}
|
|
136
|
+
/>
|
|
137
|
+
</section>
|
|
138
|
+
|
|
139
|
+
<!-- Null value -->
|
|
140
|
+
<section>
|
|
141
|
+
<h2 class="text-default-emphasis text-primary mb-8">Null Value</h2>
|
|
142
|
+
<p class="text-small text-secondary mb-12">
|
|
143
|
+
When <code>value</code> is <code>null</code>, no segment is active and the thumb is hidden.
|
|
144
|
+
</p>
|
|
145
|
+
<IISegmentedControl
|
|
146
|
+
items={[
|
|
147
|
+
{label: 'Allow list', value: 'allow'},
|
|
148
|
+
{label: 'Block list', value: 'block'},
|
|
149
|
+
]}
|
|
150
|
+
value={null as unknown as string}
|
|
151
|
+
/>
|
|
152
|
+
</section>
|
|
153
|
+
|
|
92
154
|
<!-- Density-responsive -->
|
|
93
155
|
<section>
|
|
94
156
|
<h2 class="text-default-emphasis text-primary mb-8">Density Responsive</h2>
|
package/dist/style/base.css
CHANGED
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
font-style: normal;
|
|
5
5
|
font-display: block;
|
|
6
6
|
font-weight: 100 900;
|
|
7
|
-
ascent-override:
|
|
8
|
-
descent-override:
|
|
7
|
+
ascent-override: 92%;
|
|
8
|
+
descent-override: 20.5%;
|
|
9
9
|
line-gap-override: 0%;
|
|
10
10
|
size-adjust: 100%;
|
|
11
11
|
src: url('/fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
|
|
@@ -19,8 +19,8 @@
|
|
|
19
19
|
font-style: normal;
|
|
20
20
|
font-display: block;
|
|
21
21
|
font-weight: 100 900;
|
|
22
|
-
ascent-override:
|
|
23
|
-
descent-override:
|
|
22
|
+
ascent-override: 92%;
|
|
23
|
+
descent-override: 20.5%;
|
|
24
24
|
line-gap-override: 0%;
|
|
25
25
|
size-adjust: 100%;
|
|
26
26
|
src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
|