@insymetri/styleguide 0.1.56 → 0.1.58
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.
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
<label class={cn('flex items-center gap-8', className)}>
|
|
35
35
|
<Checkbox.Root
|
|
36
36
|
class="peer [all:unset] cursor-default shrink-0 inline-block data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"
|
|
37
|
-
|
|
37
|
+
bind:checked
|
|
38
38
|
{onCheckedChange}
|
|
39
39
|
{disabled}
|
|
40
40
|
{name}
|
|
@@ -43,14 +43,16 @@
|
|
|
43
43
|
>
|
|
44
44
|
<div
|
|
45
45
|
class={cn(
|
|
46
|
-
'flex items-center justify-center border
|
|
46
|
+
'flex items-center justify-center border rounded-6 transition-all duration-fast motion-reduce:transition-none',
|
|
47
47
|
size === 'sm' ? 'w-16 h-16' : 'w-18 h-18',
|
|
48
|
-
checked
|
|
48
|
+
checked
|
|
49
|
+
? 'bg-primary border-accent'
|
|
50
|
+
: 'border-strong bg-transparent hover:border-input-border-hover',
|
|
49
51
|
disabled && 'opacity-50'
|
|
50
52
|
)}
|
|
51
53
|
>
|
|
52
54
|
{#if checked}
|
|
53
|
-
<IIIcon iconName="check" class={size === 'sm' ? 'w-
|
|
55
|
+
<IIIcon iconName="check" class={size === 'sm' ? 'w-14 h-14 text-white' : 'w-16 h-16 text-white'} />
|
|
54
56
|
{/if}
|
|
55
57
|
</div>
|
|
56
58
|
</Checkbox.Root>
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import IICheckbox from './IICheckbox.svelte'
|
|
3
|
+
|
|
4
|
+
let basic = $state(false)
|
|
5
|
+
let preChecked = $state(true)
|
|
6
|
+
let newsletter = $state(false)
|
|
7
|
+
let small = $state(false)
|
|
8
|
+
let smallChecked = $state(true)
|
|
9
|
+
|
|
10
|
+
const features = ['Notifications', 'Auto-sync', 'Beta features']
|
|
11
|
+
let featureStates = $state<Record<string, boolean>>({
|
|
12
|
+
Notifications: true,
|
|
13
|
+
'Auto-sync': false,
|
|
14
|
+
'Beta features': false,
|
|
15
|
+
})
|
|
16
|
+
</script>
|
|
17
|
+
|
|
18
|
+
<div class="flex flex-col gap-32">
|
|
19
|
+
<section>
|
|
20
|
+
<h2 class="text-default-emphasis text-primary mb-8">Basic</h2>
|
|
21
|
+
<p class="text-small text-secondary mb-12">Click to toggle the checked state.</p>
|
|
22
|
+
<div class="flex flex-col gap-8">
|
|
23
|
+
<IICheckbox bind:checked={basic} label="Accept terms and conditions" />
|
|
24
|
+
<IICheckbox bind:checked={preChecked} label="Pre-checked option" />
|
|
25
|
+
<IICheckbox bind:checked={newsletter} label="Subscribe to newsletter" />
|
|
26
|
+
</div>
|
|
27
|
+
</section>
|
|
28
|
+
|
|
29
|
+
<section>
|
|
30
|
+
<h2 class="text-default-emphasis text-primary mb-8">Sizes</h2>
|
|
31
|
+
<div class="flex items-center gap-16">
|
|
32
|
+
<IICheckbox bind:checked={small} size="sm" label="Small" />
|
|
33
|
+
<IICheckbox bind:checked={smallChecked} size="sm" label="Small (checked)" />
|
|
34
|
+
</div>
|
|
35
|
+
</section>
|
|
36
|
+
|
|
37
|
+
<section>
|
|
38
|
+
<h2 class="text-default-emphasis text-primary mb-8">Group</h2>
|
|
39
|
+
<div class="flex flex-col gap-8">
|
|
40
|
+
{#each features as feature}
|
|
41
|
+
<IICheckbox bind:checked={featureStates[feature]} label={feature} />
|
|
42
|
+
{/each}
|
|
43
|
+
</div>
|
|
44
|
+
<p class="text-small text-secondary mt-8">
|
|
45
|
+
Enabled: {Object.entries(featureStates).filter(([, v]) => v).map(([k]) => k).join(', ') || 'None'}
|
|
46
|
+
</p>
|
|
47
|
+
</section>
|
|
48
|
+
|
|
49
|
+
<section>
|
|
50
|
+
<h2 class="text-default-emphasis text-primary mb-8">Disabled</h2>
|
|
51
|
+
<div class="flex items-center gap-16">
|
|
52
|
+
<IICheckbox checked={false} disabled label="Disabled (off)" />
|
|
53
|
+
<IICheckbox checked={true} disabled label="Disabled (on)" />
|
|
54
|
+
</div>
|
|
55
|
+
</section>
|
|
56
|
+
</div>
|