@insymetri/styleguide 0.1.57 → 0.1.59

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.
Files changed (6) hide show
  1. package/dist/IICheckbox/IICheckbox.svelte +6 -4
  2. package/dist/IICheckbox/IICheckboxStories.svelte +56 -0
  3. package/dist/IICheckbox/IICheckboxStories.svelte.d.ts +3 -0
  4. package/dist/icons.d.ts +1 -0
  5. package/dist/icons.js +1 -0
  6. package/package.json +1 -1
package/dist/IICheckbox/IICheckbox.svelte CHANGED
@@ -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
- {checked}
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-2 rounded-4 transition-all duration-fast motion-reduce:transition-none',
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 ? 'bg-primary border-accent' : 'border-strong bg-surface',
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-12 h-12 text-white' : 'w-14 h-14 text-white'} />
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>
package/dist/IICheckbox/IICheckboxStories.svelte ADDED
@@ -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>
package/dist/IICheckbox/IICheckboxStories.svelte.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ declare const IICheckboxStories: import("svelte").Component<Record<string, never>, {}, "">;
2
+ type IICheckboxStories = ReturnType<typeof IICheckboxStories>;
3
+ export default IICheckboxStories;
package/dist/icons.d.ts CHANGED
@@ -47,6 +47,7 @@ export declare const icons: {
47
47
  readonly 'clipboard-text': "<path fill=\"currentColor\" d=\"M168 152a8 8 0 0 1-8 8H96a8 8 0 0 1 0-16h64a8 8 0 0 1 8 8m-8-40H96a8 8 0 0 0 0 16h64a8 8 0 0 0 0-16m56-64v168a16 16 0 0 1-16 16H56a16 16 0 0 1-16-16V48a16 16 0 0 1 16-16h36.26a47.92 47.92 0 0 1 71.48 0H200a16 16 0 0 1 16 16M96 64h64a32 32 0 0 0-64 0m104-16h-26.75A47.9 47.9 0 0 1 176 64v8a8 8 0 0 1-8 8H88a8 8 0 0 1-8-8v-8a47.9 47.9 0 0 1 2.75-16H56v168h144Z\"/>";
48
48
  readonly link: "<path fill=\"currentColor\" d=\"M240,88.23a54.43,54.43,0,0,1-16,37L189.25,160a54.27,54.27,0,0,1-38.63,16h-.05A54.63,54.63,0,0,1,96,119.84a8,8,0,0,1,16,.45A38.62,38.62,0,0,0,150.58,160h0a38.39,38.39,0,0,0,27.31-11.31l34.75-34.75a38.63,38.63,0,0,0-54.63-54.63l-11,11A8,8,0,0,1,135.7,59l11-11A54.65,54.65,0,0,1,224,48,54.86,54.86,0,0,1,240,88.23ZM109,185.66l-11,11A38.41,38.41,0,0,1,70.6,208h0a38.63,38.63,0,0,1-27.29-65.94L78,107.31A38.63,38.63,0,0,1,144,135.71a8,8,0,0,0,16,.45A54.86,54.86,0,0,0,144,96a54.65,54.65,0,0,0-77.27,0L32,130.75A54.62,54.62,0,0,0,70.56,224h0a54.28,54.28,0,0,0,38.64-16l11-11A8,8,0,0,0,109,185.66Z\"/>";
49
49
  readonly 'upload-simple': "<path fill=\"currentColor\" d=\"M224 144v64a8 8 0 0 1-8 8H40a8 8 0 0 1-8-8v-64a8 8 0 0 1 16 0v56h160v-56a8 8 0 0 1 16 0M93.66 77.66L120 51.31V144a8 8 0 0 0 16 0V51.31l26.34 26.35a8 8 0 0 0 11.32-11.32l-40-40a8 8 0 0 0-11.32 0l-40 40a8 8 0 0 0 11.32 11.32\"/>";
50
+ readonly 'download-simple': "<path fill=\"currentColor\" d=\"M224 144v64a8 8 0 0 1-8 8H40a8 8 0 0 1-8-8v-64a8 8 0 0 1 16 0v56h160v-56a8 8 0 0 1 16 0M93.66 122.34L120 148.69V56a8 8 0 0 0 16 0V148.69l26.34-26.35a8 8 0 0 0 11.32 11.32l-40 40a8 8 0 0 0-11.32 0l-40-40a8 8 0 0 0 11.32-11.32\"/>";
50
51
  readonly 'note-pencil': "<path fill=\"currentColor\" d=\"m229.66 58.34l-32-32a8 8 0 0 0-11.32 0l-96 96A8 8 0 0 0 88 128v32a8 8 0 0 0 8 8h32a8 8 0 0 0 5.66-2.34l96-96a8 8 0 0 0 0-11.32M124.69 152H104v-20.69l64-64L188.69 88ZM200 76.69L179.31 56L192 43.31L212.69 64ZM224 128v80a16 16 0 0 1-16 16H48a16 16 0 0 1-16-16V48a16 16 0 0 1 16-16h80a8 8 0 0 1 0 16H48v160h160v-80a8 8 0 0 1 16 0\"/>";
51
52
  readonly 'pencil-simple': "<path fill=\"currentColor\" d=\"m227.31 73.37l-44.68-44.69a16 16 0 0 0-22.63 0L36.69 152A15.86 15.86 0 0 0 32 163.31V208a16 16 0 0 0 16 16h44.69a15.86 15.86 0 0 0 11.31-4.69L227.31 96a16 16 0 0 0 0-22.63M92.69 208H48v-44.69l88-88L180.69 120ZM192 108.68L147.31 64l24-24L216 84.68Z\"/>";
52
53
  readonly 'currency-dollar': "<path fill=\"currentColor\" d=\"M152 120h-16V56h8a32 32 0 0 1 32 32a8 8 0 0 0 16 0a48.05 48.05 0 0 0-48-48h-8V24a8 8 0 0 0-16 0v16h-8a48 48 0 0 0 0 96h8v64h-16a32 32 0 0 1-32-32a8 8 0 0 0-16 0a48.05 48.05 0 0 0 48 48h16v16a8 8 0 0 0 16 0v-16h16a48 48 0 0 0 0-96m-40 0a32 32 0 0 1 0-64h8v64Zm40 80h-16v-64h16a32 32 0 0 1 0 64\"/>";
package/dist/icons.js CHANGED
@@ -51,6 +51,7 @@ export const icons = {
51
51
  'clipboard-text': `<path fill="currentColor" d="M168 152a8 8 0 0 1-8 8H96a8 8 0 0 1 0-16h64a8 8 0 0 1 8 8m-8-40H96a8 8 0 0 0 0 16h64a8 8 0 0 0 0-16m56-64v168a16 16 0 0 1-16 16H56a16 16 0 0 1-16-16V48a16 16 0 0 1 16-16h36.26a47.92 47.92 0 0 1 71.48 0H200a16 16 0 0 1 16 16M96 64h64a32 32 0 0 0-64 0m104-16h-26.75A47.9 47.9 0 0 1 176 64v8a8 8 0 0 1-8 8H88a8 8 0 0 1-8-8v-8a47.9 47.9 0 0 1 2.75-16H56v168h144Z"/>`,
52
52
  link: `<path fill="currentColor" d="M240,88.23a54.43,54.43,0,0,1-16,37L189.25,160a54.27,54.27,0,0,1-38.63,16h-.05A54.63,54.63,0,0,1,96,119.84a8,8,0,0,1,16,.45A38.62,38.62,0,0,0,150.58,160h0a38.39,38.39,0,0,0,27.31-11.31l34.75-34.75a38.63,38.63,0,0,0-54.63-54.63l-11,11A8,8,0,0,1,135.7,59l11-11A54.65,54.65,0,0,1,224,48,54.86,54.86,0,0,1,240,88.23ZM109,185.66l-11,11A38.41,38.41,0,0,1,70.6,208h0a38.63,38.63,0,0,1-27.29-65.94L78,107.31A38.63,38.63,0,0,1,144,135.71a8,8,0,0,0,16,.45A54.86,54.86,0,0,0,144,96a54.65,54.65,0,0,0-77.27,0L32,130.75A54.62,54.62,0,0,0,70.56,224h0a54.28,54.28,0,0,0,38.64-16l11-11A8,8,0,0,0,109,185.66Z"/>`,
53
53
  'upload-simple': `<path fill="currentColor" d="M224 144v64a8 8 0 0 1-8 8H40a8 8 0 0 1-8-8v-64a8 8 0 0 1 16 0v56h160v-56a8 8 0 0 1 16 0M93.66 77.66L120 51.31V144a8 8 0 0 0 16 0V51.31l26.34 26.35a8 8 0 0 0 11.32-11.32l-40-40a8 8 0 0 0-11.32 0l-40 40a8 8 0 0 0 11.32 11.32"/>`,
54
+ 'download-simple': `<path fill="currentColor" d="M224 144v64a8 8 0 0 1-8 8H40a8 8 0 0 1-8-8v-64a8 8 0 0 1 16 0v56h160v-56a8 8 0 0 1 16 0M93.66 122.34L120 148.69V56a8 8 0 0 0 16 0V148.69l26.34-26.35a8 8 0 0 0 11.32 11.32l-40 40a8 8 0 0 0-11.32 0l-40-40a8 8 0 0 0 11.32-11.32"/>`,
54
55
  'note-pencil': `<path fill="currentColor" d="m229.66 58.34l-32-32a8 8 0 0 0-11.32 0l-96 96A8 8 0 0 0 88 128v32a8 8 0 0 0 8 8h32a8 8 0 0 0 5.66-2.34l96-96a8 8 0 0 0 0-11.32M124.69 152H104v-20.69l64-64L188.69 88ZM200 76.69L179.31 56L192 43.31L212.69 64ZM224 128v80a16 16 0 0 1-16 16H48a16 16 0 0 1-16-16V48a16 16 0 0 1 16-16h80a8 8 0 0 1 0 16H48v160h160v-80a8 8 0 0 1 16 0"/>`,
55
56
  'pencil-simple': `<path fill="currentColor" d="m227.31 73.37l-44.68-44.69a16 16 0 0 0-22.63 0L36.69 152A15.86 15.86 0 0 0 32 163.31V208a16 16 0 0 0 16 16h44.69a15.86 15.86 0 0 0 11.31-4.69L227.31 96a16 16 0 0 0 0-22.63M92.69 208H48v-44.69l88-88L180.69 120ZM192 108.68L147.31 64l24-24L216 84.68Z"/>`,
56
57
  // Finance & Money
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@insymetri/styleguide",
3
- "version": "0.1.57",
3
+ "version": "0.1.59",
4
4
  "description": "Insymetri shared UI component library built with Svelte 5",
5
5
  "type": "module",
6
6
  "scripts": {