@insymetri/styleguide 0.1.41 → 0.1.43

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 (12) hide show
  1. package/dist/IIButton/IIButton.svelte +39 -10
  2. package/dist/IIButton/IIButton.svelte.d.ts +1 -1
  3. package/dist/IIModal/IIModal.svelte +25 -7
  4. package/dist/IIModal/IIModal.svelte.d.ts +2 -0
  5. package/dist/IIPopover/IIPopover.svelte +1 -1
  6. package/dist/IIViewFilterChip/IIViewFilterChip.svelte +1 -1
  7. package/dist/icons.d.ts +3 -0
  8. package/dist/icons.js +3 -0
  9. package/dist/style/tailwind/animations.js +10 -0
  10. package/dist/style/tailwind/shadows.d.ts +1 -0
  11. package/dist/style/tailwind/shadows.js +2 -0
  12. package/package.json +2 -1
package/dist/IIButton/IIButton.svelte CHANGED
@@ -7,7 +7,7 @@
7
7
  import {useDensity} from '../density'
8
8
 
9
9
  type BaseProps = {
10
- variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'success' | 'accent'
10
+ variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'success' | 'accent' | 'dashed'
11
11
  size?: 'sm' | 'md' | 'lg'
12
12
  iconName?: IconName
13
13
  loading?: boolean
@@ -32,14 +32,39 @@
32
32
  class: className,
33
33
  href,
34
34
  ref = $bindable(),
35
+ onclick,
35
36
  ...restProps
36
37
  }: Props = $props()
37
38
 
38
39
  const density = useDensity()
39
- const isDisabled = $derived(disabled || loading)
40
+
41
+ // Auto-managed loading: if the onclick handler returns a Promise, we
42
+ // automatically show loading state for its lifetime. Callers can still
43
+ // pass an explicit `loading` prop for manual control.
44
+ let autoLoading = $state(false)
45
+ const isLoading = $derived(loading || autoLoading)
46
+ const isDisabled = $derived(disabled || isLoading)
47
+
48
+ // Minimum time the auto-loading spinner stays visible, so very fast
49
+ // handlers don't flash the spinner for a single frame.
50
+ const MIN_LOADING_MS = 1000
51
+
52
+ async function handleClick(event: MouseEvent) {
53
+ if (isDisabled || !onclick) return
54
+ const result = (onclick as (e: MouseEvent) => unknown)(event)
55
+ if (result && typeof (result as {then?: unknown}).then === 'function') {
56
+ autoLoading = true
57
+ const minDelay = new Promise(resolve => setTimeout(resolve, MIN_LOADING_MS))
58
+ try {
59
+ await Promise.all([result, minDelay])
60
+ } finally {
61
+ autoLoading = false
62
+ }
63
+ }
64
+ }
40
65
 
41
66
  const baseClasses =
42
- 'inline-flex items-center justify-center gap-8 whitespace-nowrap cursor-default transition-colors duration-base ease-in-out no-underline outline-none focus-visible:border-accent focus-visible:ring-3 focus-visible:ring-primary disabled:cursor-not-allowed'
67
+ 'inline-flex items-center justify-center whitespace-nowrap cursor-default transition-colors duration-base ease-in-out no-underline outline-none focus-visible:border-accent focus-visible:ring-3 focus-visible:ring-primary disabled:cursor-not-allowed'
43
68
 
44
69
  const variantClasses = {
45
70
  primary:
@@ -53,18 +78,20 @@
53
78
  'bg-button-success text-button-success border-0 hover:bg-button-success-hover disabled:bg-button-success-disabled',
54
79
  accent:
55
80
  'bg-button-accent text-button-accent border-0 hover:bg-button-accent-hover disabled:bg-button-accent-disabled',
81
+ dashed:
82
+ 'bg-surface text-secondary border border-dashed border-gray-300 hover:bg-gray-50 hover:text-body hover:border-gray-400 disabled:opacity-50',
56
83
  } as const
57
84
 
58
85
  const densityClasses = {
59
- compact: 'h-28 py-4 px-8 text-tiny rounded-control',
60
- default: 'h-32 py-5 px-12 text-small rounded-control',
61
- comfortable: 'h-40 py-8 px-12 text-small rounded-control',
62
- mobile: 'h-48 py-10 px-16 text-default rounded-control',
86
+ compact: 'h-28 py-4 px-8 gap-4 text-tiny rounded-control',
87
+ default: 'h-32 py-5 px-12 gap-6 text-small rounded-control',
88
+ comfortable: 'h-40 py-8 px-12 gap-6 text-small rounded-control',
89
+ mobile: 'h-48 py-10 px-16 gap-8 text-default rounded-control',
63
90
  } as const
64
91
 
65
92
  const fixedSizeClasses = {
66
- sm: 'py-4 px-8 text-tiny h-24 rounded-control',
67
- lg: 'py-10 px-16 text-large h-40 rounded-control',
93
+ sm: 'py-4 px-8 gap-4 text-tiny h-24 rounded-control',
94
+ lg: 'py-10 px-16 gap-8 text-large h-40 rounded-control',
68
95
  } as const
69
96
 
70
97
  const iconSizeClasses = {
@@ -79,7 +106,7 @@
79
106
  </script>
80
107
 
81
108
  {#snippet iconContent()}
82
- {#if loading}
109
+ {#if isLoading}
83
110
  <span class={cn('border-2 border-current border-r-transparent rounded-full animate-spin', iconSizeClasses[size])}
84
111
  ></span>
85
112
  {:else if iconName}
@@ -93,6 +120,7 @@
93
120
  bind:this={ref}
94
121
  {href}
95
122
  class={cn(baseClasses, variantClasses[variant], resolvedSizeClasses, className)}
123
+ {onclick}
96
124
  {...restProps as HTMLAnchorAttributes}
97
125
  >
98
126
  {@render iconContent()}
@@ -102,6 +130,7 @@
102
130
  bind:this={ref}
103
131
  disabled={isDisabled}
104
132
  class={cn(baseClasses, variantClasses[variant], resolvedSizeClasses, className)}
133
+ onclick={handleClick}
105
134
  {...restProps as HTMLButtonAttributes}
106
135
  >
107
136
  {@render iconContent()}
package/dist/IIButton/IIButton.svelte.d.ts CHANGED
@@ -2,7 +2,7 @@ import type { Snippet } from 'svelte';
2
2
  import type { HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
3
3
  import type { IconName } from '../icons';
4
4
  type BaseProps = {
5
- variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'success' | 'accent';
5
+ variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'success' | 'accent' | 'dashed';
6
6
  size?: 'sm' | 'md' | 'lg';
7
7
  iconName?: IconName;
8
8
  loading?: boolean;
package/dist/IIModal/IIModal.svelte CHANGED
@@ -10,9 +10,11 @@
10
10
  onOpenChange?: (open: boolean) => void
11
11
  children: Snippet
12
12
  description?: Snippet
13
+ titleAccessory?: Snippet
13
14
  footer?: Snippet
14
15
  showCloseButton?: boolean
15
16
  size?: 'sm' | 'md' | 'lg'
17
+ overlay?: 'dark' | 'light' | 'none'
16
18
  class?: string
17
19
  }
18
20
 
@@ -22,9 +24,11 @@
22
24
  onOpenChange,
23
25
  children,
24
26
  description,
27
+ titleAccessory,
25
28
  footer,
26
29
  showCloseButton = true,
27
30
  size = 'md',
31
+ overlay = 'dark',
28
32
  class: className,
29
33
  }: Props = $props()
30
34
 
@@ -36,19 +40,33 @@
36
40
 
37
41
  <Dialog.Root {open} onOpenChange={handleOpenChange}>
38
42
  <Dialog.Portal>
39
- <Dialog.Overlay class="fixed inset-0 bg-overlay z-14 animate-fade-in motion-reduce:animate-none" />
43
+ <Dialog.Overlay
44
+ class={cn(
45
+ 'fixed inset-0 z-14 data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out motion-reduce:animate-none',
46
+ overlay === 'dark' && 'bg-overlay',
47
+ overlay === 'light' && 'bg-black/10',
48
+ overlay === 'none' && 'pointer-events-none'
49
+ )}
50
+ />
40
51
  <Dialog.Content
52
+ onOpenAutoFocus={e => e.preventDefault()}
41
53
  class={cn(
42
- 'fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-surface rounded-12 shadow-modal w-[calc(100%-20px)] max-h-[90vh] flex flex-col z-15 animate-modal-in motion-reduce:animate-none',
54
+ 'fixed top-[30%] left-1/2 -translate-x-1/2 -translate-y-1/2 bg-surface rounded-12 w-[calc(100%-20px)] max-h-[90vh] flex flex-col z-15 data-[state=open]:animate-modal-in data-[state=closed]:animate-modal-out motion-reduce:animate-none focus:outline-none',
55
+ overlay === 'none' ? 'shadow-floating' : 'shadow-modal',
43
56
  size === 'sm' && 'max-w-400',
44
57
  size === 'md' && 'max-w-500',
45
58
  size === 'lg' && 'max-w-700',
46
59
  className
47
60
  )}
48
61
  >
49
- <div class="flex items-start justify-between p-16 border-b border-primary shrink-0">
50
- <div>
51
- <Dialog.Title class="text-h4 text-body m-0">{title}</Dialog.Title>
62
+ <div class="flex items-center justify-between gap-12 min-h-44 px-12 py-8 border-b border-primary shrink-0">
63
+ <div class="flex flex-col min-w-0 flex-1">
64
+ <div class="flex items-center gap-12 min-w-0">
65
+ <Dialog.Title class="text-default text-body m-0 shrink-0">{title}</Dialog.Title>
66
+ {#if titleAccessory}
67
+ {@render titleAccessory()}
68
+ {/if}
69
+ </div>
52
70
  {#if description}
53
71
  <Dialog.Description class="text-small text-secondary mt-4">
54
72
  {@render description()}
@@ -63,11 +81,11 @@
63
81
  </Dialog.Close>
64
82
  {/if}
65
83
  </div>
66
- <div class="p-16 flex-auto min-h-0 overflow-y-auto">
84
+ <div class="px-20 py-16 flex-auto min-h-0 overflow-y-auto">
67
85
  {@render children()}
68
86
  </div>
69
87
  {#if footer}
70
- <div class="flex items-center justify-end gap-12 p-16 border-t border-primary shrink-0">
88
+ <div class="flex items-center justify-end gap-12 min-h-44 px-10 py-6 border-t border-primary shrink-0">
71
89
  {@render footer()}
72
90
  </div>
73
91
  {/if}
package/dist/IIModal/IIModal.svelte.d.ts CHANGED
@@ -5,9 +5,11 @@ type Props = {
5
5
  onOpenChange?: (open: boolean) => void;
6
6
  children: Snippet;
7
7
  description?: Snippet;
8
+ titleAccessory?: Snippet;
8
9
  footer?: Snippet;
9
10
  showCloseButton?: boolean;
10
11
  size?: 'sm' | 'md' | 'lg';
12
+ overlay?: 'dark' | 'light' | 'none';
11
13
  class?: string;
12
14
  };
13
15
  declare const IIModal: import("svelte").Component<Props, {}, "open">;
package/dist/IIPopover/IIPopover.svelte CHANGED
@@ -38,7 +38,7 @@
38
38
  {align}
39
39
  {sideOffset}
40
40
  class={cn(
41
- 'bg-dropdown-bg border border-dropdown-border rounded-10 shadow-dropdown p-12 z-12 animate-slide-in motion-reduce:animate-none',
41
+ 'bg-dropdown-bg border border-dropdown-border rounded-10 shadow-dropdown p-12 z-16 animate-slide-in motion-reduce:animate-none',
42
42
  className
43
43
  )}
44
44
  >
package/dist/IIViewFilterChip/IIViewFilterChip.svelte CHANGED
@@ -27,7 +27,7 @@
27
27
  </script>
28
28
 
29
29
  <span
30
- class="inline-flex items-center gap-4 px-8 h-24 bg-gray-100 border border-gray-200 rounded-control text-tiny text-secondary cursor-default"
30
+ class="inline-flex items-center gap-4 px-8 h-24 bg-gray-50 border border-gray-200 rounded-control text-tiny text-secondary cursor-default"
31
31
  >
32
32
  <span class="flex items-center gap-4">
33
33
  <span class="font-medium">{fieldLabel}</span>
package/dist/icons.d.ts CHANGED
@@ -6,6 +6,8 @@ export declare const icons: {
6
6
  readonly plus: "<path fill=\"currentColor\" d=\"M224 128a8 8 0 0 1-8 8h-80v80a8 8 0 0 1-16 0v-80H40a8 8 0 0 1 0-16h80V40a8 8 0 0 1 16 0v80h80a8 8 0 0 1 8 8\"/>";
7
7
  readonly 'arrow-left': "<path fill=\"currentColor\" d=\"M224 128a8 8 0 0 1-8 8H59.31l58.35 58.34a8 8 0 0 1-11.32 11.32l-72-72a8 8 0 0 1 0-11.32l72-72a8 8 0 0 1 11.32 11.32L59.31 120H216a8 8 0 0 1 8 8\"/>";
8
8
  readonly 'arrow-right': "<path fill=\"currentColor\" d=\"m221.66 133.66l-72 72a8 8 0 0 1-11.32-11.32L196.69 136H40a8 8 0 0 1 0-16h156.69l-58.35-58.34a8 8 0 0 1 11.32-11.32l72 72a8 8 0 0 1 0 11.32\"/>";
9
+ readonly 'arrow-up-right': "<path fill=\"currentColor\" d=\"M200 64v112a8 8 0 0 1-16 0V83.31L61.66 205.66a8 8 0 0 1-11.32-11.32L172.69 72H88a8 8 0 0 1 0-16h112a8 8 0 0 1 8 8\"/>";
10
+ readonly 'arrow-bend-double-up-right': "<path fill=\"currentColor\" d=\"M229.66 109.66l-48 48a8 8 0 0 1-11.32-11.32L212.69 104L170.34 61.66a8 8 0 0 1 11.32-11.32l48 48A8 8 0 0 1 229.66 109.66Zm-48-11.32l-48-48a8 8 0 0 0-11.32 11.32L156.69 96H128A104.11 104.11 0 0 0 24 200a8 8 0 0 0 16 0a88.1 88.1 0 0 1 88-88h28.69l-34.35 34.34a8 8 0 0 0 11.32 11.32l48-48A8 8 0 0 0 181.66 98.34Z\"/>";
9
11
  readonly x: "<path fill=\"currentColor\" d=\"M205.66 194.34a8 8 0 0 1-11.32 11.32L128 139.31l-66.34 66.35a8 8 0 0 1-11.32-11.32L116.69 128L50.34 61.66a8 8 0 0 1 11.32-11.32L128 116.69l66.34-66.35a8 8 0 0 1 11.32 11.32L139.31 128Z\"/>";
10
12
  readonly check: "<path fill=\"currentColor\" d=\"m229.66 77.66l-128 128a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69L218.34 66.34a8 8 0 0 1 11.32 11.32\"/>";
11
13
  readonly 'check-circle': "<path fill=\"currentColor\" d=\"M173.66 98.34a8 8 0 0 1 0 11.32l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 0M232 128A104 104 0 1 1 128 24a104.11 104.11 0 0 1 104 104m-16 0a88 88 0 1 0-88 88a88.1 88.1 0 0 0 88-88\"/>";
@@ -53,6 +55,7 @@ export declare const icons: {
53
55
  readonly bank: "<path fill=\"currentColor\" d=\"M24 104h24v64H32a8 8 0 0 0 0 16h192a8 8 0 0 0 0-16h-16v-64h24a8 8 0 0 0 4.19-14.81l-104-64a8 8 0 0 0-8.38 0l-104 64A8 8 0 0 0 24 104m40 0h32v64H64Zm80 0v64h-32v-64Zm48 64h-32v-64h32ZM128 41.39L203.74 88H52.26ZM248 208a8 8 0 0 1-8 8H16a8 8 0 0 1 0-16h224a8 8 0 0 1 8 8\"/>";
54
56
  readonly calendar: "<path fill=\"currentColor\" d=\"M208 32h-24v-8a8 8 0 0 0-16 0v8H88v-8a8 8 0 0 0-16 0v8H48a16 16 0 0 0-16 16v160a16 16 0 0 0 16 16h160a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16M72 48v8a8 8 0 0 0 16 0v-8h80v8a8 8 0 0 0 16 0v-8h24v32H48V48Zm136 160H48V96h160zm-96-88v64a8 8 0 0 1-16 0v-51.06l-4.42 2.22a8 8 0 0 1-7.16-14.32l16-8A8 8 0 0 1 112 120m59.16 30.45L152 176h16a8 8 0 0 1 0 16h-32a8 8 0 0 1-6.4-12.8l28.78-38.37a8 8 0 1 0-13.31-8.83a8 8 0 1 1-13.85-8A24 24 0 0 1 176 136a23.76 23.76 0 0 1-4.84 14.45\"/>";
55
57
  readonly 'calendar-blank': "<path fill=\"currentColor\" d=\"M208 32h-24v-8a8 8 0 0 0-16 0v8H88v-8a8 8 0 0 0-16 0v8H48a16 16 0 0 0-16 16v160a16 16 0 0 0 16 16h160a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16M72 48v8a8 8 0 0 0 16 0v-8h80v8a8 8 0 0 0 16 0v-8h24v32H48V48Zm136 160H48V96h160z\"/>";
58
+ readonly 'calendar-plus': "<path fill=\"currentColor\" d=\"M208 32h-24v-8a8 8 0 0 0-16 0v8H88v-8a8 8 0 0 0-16 0v8H48a16 16 0 0 0-16 16v160a16 16 0 0 0 16 16h160a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16m0 176H48V96h160zM48 80V48h24v8a8 8 0 0 0 16 0v-8h80v8a8 8 0 0 0 16 0v-8h24v32Zm104 80h-16v16a8 8 0 0 1-16 0v-16h-16a8 8 0 0 1 0-16h16v-16a8 8 0 0 1 16 0v16h16a8 8 0 0 1 0 16\"/>";
56
59
  readonly clock: "<path fill=\"currentColor\" d=\"M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m0 192a88 88 0 1 1 88-88a88.1 88.1 0 0 1-88 88m64-88a8 8 0 0 1-8 8h-56a8 8 0 0 1-8-8V72a8 8 0 0 1 16 0v48h48a8 8 0 0 1 8 8\"/>";
57
60
  readonly 'clock-countdown': "<path fill=\"currentColor\" d=\"M232 136.66A104.12 104.12 0 1 1 119.34 24a8 8 0 0 1 1.32 16A88.12 88.12 0 1 0 216 135.34a8 8 0 0 1 16 1.32M120 72v56a8 8 0 0 0 8 8h56a8 8 0 0 0 0-16h-48V72a8 8 0 0 0-16 0m40-24a12 12 0 1 0-12-12a12 12 0 0 0 12 12m36 24a12 12 0 1 0-12-12a12 12 0 0 0 12 12m24 36a12 12 0 1 0-12-12a12 12 0 0 0 12 12\"/>";
58
61
  readonly 'clock-clockwise': "<path fill=\"currentColor\" d=\"M136 80v43.47l36.12 21.67a8 8 0 0 1-8.24 13.72l-40-24A8 8 0 0 1 120 128V80a8 8 0 0 1 16 0m88-24a8 8 0 0 0-8 8v18c-6.35-7.36-12.83-14.45-20.12-21.83a96 96 0 1 0-2 137.7a8 8 0 0 0-11-11.64a80 80 0 1 1 1.66-114.83c8.14 8.24 15.27 16.18 22.46 24.6h-23a8 8 0 0 0 0 16h40a8 8 0 0 0 8-8V64a8 8 0 0 0-8-8\"/>";
package/dist/icons.js CHANGED
@@ -7,6 +7,8 @@ export const icons = {
7
7
  plus: `<path fill="currentColor" d="M224 128a8 8 0 0 1-8 8h-80v80a8 8 0 0 1-16 0v-80H40a8 8 0 0 1 0-16h80V40a8 8 0 0 1 16 0v80h80a8 8 0 0 1 8 8"/>`,
8
8
  'arrow-left': `<path fill="currentColor" d="M224 128a8 8 0 0 1-8 8H59.31l58.35 58.34a8 8 0 0 1-11.32 11.32l-72-72a8 8 0 0 1 0-11.32l72-72a8 8 0 0 1 11.32 11.32L59.31 120H216a8 8 0 0 1 8 8"/>`,
9
9
  'arrow-right': `<path fill="currentColor" d="m221.66 133.66l-72 72a8 8 0 0 1-11.32-11.32L196.69 136H40a8 8 0 0 1 0-16h156.69l-58.35-58.34a8 8 0 0 1 11.32-11.32l72 72a8 8 0 0 1 0 11.32"/>`,
10
+ 'arrow-up-right': `<path fill="currentColor" d="M200 64v112a8 8 0 0 1-16 0V83.31L61.66 205.66a8 8 0 0 1-11.32-11.32L172.69 72H88a8 8 0 0 1 0-16h112a8 8 0 0 1 8 8"/>`,
11
+ 'arrow-bend-double-up-right': `<path fill="currentColor" d="M229.66 109.66l-48 48a8 8 0 0 1-11.32-11.32L212.69 104L170.34 61.66a8 8 0 0 1 11.32-11.32l48 48A8 8 0 0 1 229.66 109.66Zm-48-11.32l-48-48a8 8 0 0 0-11.32 11.32L156.69 96H128A104.11 104.11 0 0 0 24 200a8 8 0 0 0 16 0a88.1 88.1 0 0 1 88-88h28.69l-34.35 34.34a8 8 0 0 0 11.32 11.32l48-48A8 8 0 0 0 181.66 98.34Z"/>`,
10
12
  x: `<path fill="currentColor" d="M205.66 194.34a8 8 0 0 1-11.32 11.32L128 139.31l-66.34 66.35a8 8 0 0 1-11.32-11.32L116.69 128L50.34 61.66a8 8 0 0 1 11.32-11.32L128 116.69l66.34-66.35a8 8 0 0 1 11.32 11.32L139.31 128Z"/>`,
11
13
  check: `<path fill="currentColor" d="m229.66 77.66l-128 128a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69L218.34 66.34a8 8 0 0 1 11.32 11.32"/>`,
12
14
  'check-circle': `<path fill="currentColor" d="M173.66 98.34a8 8 0 0 1 0 11.32l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 0M232 128A104 104 0 1 1 128 24a104.11 104.11 0 0 1 104 104m-16 0a88 88 0 1 0-88 88a88.1 88.1 0 0 0 88-88"/>`,
@@ -59,6 +61,7 @@ export const icons = {
59
61
  // Time & Schedule
60
62
  calendar: `<path fill="currentColor" d="M208 32h-24v-8a8 8 0 0 0-16 0v8H88v-8a8 8 0 0 0-16 0v8H48a16 16 0 0 0-16 16v160a16 16 0 0 0 16 16h160a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16M72 48v8a8 8 0 0 0 16 0v-8h80v8a8 8 0 0 0 16 0v-8h24v32H48V48Zm136 160H48V96h160zm-96-88v64a8 8 0 0 1-16 0v-51.06l-4.42 2.22a8 8 0 0 1-7.16-14.32l16-8A8 8 0 0 1 112 120m59.16 30.45L152 176h16a8 8 0 0 1 0 16h-32a8 8 0 0 1-6.4-12.8l28.78-38.37a8 8 0 1 0-13.31-8.83a8 8 0 1 1-13.85-8A24 24 0 0 1 176 136a23.76 23.76 0 0 1-4.84 14.45"/>`,
61
63
  'calendar-blank': `<path fill="currentColor" d="M208 32h-24v-8a8 8 0 0 0-16 0v8H88v-8a8 8 0 0 0-16 0v8H48a16 16 0 0 0-16 16v160a16 16 0 0 0 16 16h160a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16M72 48v8a8 8 0 0 0 16 0v-8h80v8a8 8 0 0 0 16 0v-8h24v32H48V48Zm136 160H48V96h160z"/>`,
64
+ 'calendar-plus': `<path fill="currentColor" d="M208 32h-24v-8a8 8 0 0 0-16 0v8H88v-8a8 8 0 0 0-16 0v8H48a16 16 0 0 0-16 16v160a16 16 0 0 0 16 16h160a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16m0 176H48V96h160zM48 80V48h24v8a8 8 0 0 0 16 0v-8h80v8a8 8 0 0 0 16 0v-8h24v32Zm104 80h-16v16a8 8 0 0 1-16 0v-16h-16a8 8 0 0 1 0-16h16v-16a8 8 0 0 1 16 0v16h16a8 8 0 0 1 0 16"/>`,
62
65
  clock: `<path fill="currentColor" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m0 192a88 88 0 1 1 88-88a88.1 88.1 0 0 1-88 88m64-88a8 8 0 0 1-8 8h-56a8 8 0 0 1-8-8V72a8 8 0 0 1 16 0v48h48a8 8 0 0 1 8 8"/>`,
63
66
  'clock-countdown': `<path fill="currentColor" d="M232 136.66A104.12 104.12 0 1 1 119.34 24a8 8 0 0 1 1.32 16A88.12 88.12 0 1 0 216 135.34a8 8 0 0 1 16 1.32M120 72v56a8 8 0 0 0 8 8h56a8 8 0 0 0 0-16h-48V72a8 8 0 0 0-16 0m40-24a12 12 0 1 0-12-12a12 12 0 0 0 12 12m36 24a12 12 0 1 0-12-12a12 12 0 0 0 12 12m24 36a12 12 0 1 0-12-12a12 12 0 0 0 12 12"/>`,
64
67
  'clock-clockwise': `<path fill="currentColor" d="M136 80v43.47l36.12 21.67a8 8 0 0 1-8.24 13.72l-40-24A8 8 0 0 1 120 128V80a8 8 0 0 1 16 0m88-24a8 8 0 0 0-8 8v18c-6.35-7.36-12.83-14.45-20.12-21.83a96 96 0 1 0-2 137.7a8 8 0 0 0-11-11.64a80 80 0 1 1 1.66-114.83c8.14 8.24 15.27 16.18 22.46 24.6h-23a8 8 0 0 0 0 16h40a8 8 0 0 0 8-8V64a8 8 0 0 0-8-8"/>`,
package/dist/style/tailwind/animations.js CHANGED
@@ -59,6 +59,14 @@ export const keyframes = {
59
59
  from: { opacity: '0', transform: 'translateY(-8px)' },
60
60
  to: { opacity: '1', transform: 'translateY(0)' },
61
61
  },
62
+ modalOut: {
63
+ from: { opacity: '1', transform: 'scale(1)' },
64
+ to: { opacity: '0', transform: 'scale(0.96)' },
65
+ },
66
+ fadeOut: {
67
+ from: { opacity: '1' },
68
+ to: { opacity: '0' },
69
+ },
62
70
  };
63
71
  export const animation = {
64
72
  spin: 'spin 0.6s linear infinite',
@@ -69,6 +77,8 @@ export const animation = {
69
77
  shimmer: 'shimmer 1.5s infinite',
70
78
  skeleton: 'skeleton-loading 1.2s ease-in-out infinite',
71
79
  'modal-in': 'modalIn 200ms ease-out',
80
+ 'modal-out': 'modalOut 150ms ease-in',
81
+ 'fade-out': 'fadeOut 150ms ease-in',
72
82
  'login-fade-in-up': 'loginFadeInUp 0.6s ease-out',
73
83
  'login-pulse': 'loginPulse 2s ease-in-out infinite',
74
84
  'login-orbit': 'loginOrbit 1.5s linear infinite',
package/dist/style/tailwind/shadows.d.ts CHANGED
@@ -7,6 +7,7 @@ export declare const boxShadow: {
7
7
  dropdown: string;
8
8
  submenu: string;
9
9
  modal: string;
10
+ floating: string;
10
11
  drawer: string;
11
12
  toast: string;
12
13
  'focus-ring': string;
package/dist/style/tailwind/shadows.js CHANGED
@@ -14,6 +14,8 @@ export const boxShadow = {
14
14
  submenu: '0 9px 48px rgba(0, 0, 0, 0.08), 0 6px 24px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.04)',
15
15
  // Modal dialogs
16
16
  modal: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
17
+ // Floating dialogs / modals shown without an overlay — needs to read as elevated on its own
18
+ floating: '0 0 0 1px rgba(0, 0, 0, 0.06), 0 10px 24px -4px rgba(0, 0, 0, 0.12), 0 24px 60px -12px rgba(0, 0, 0, 0.22)',
17
19
  // Side drawers / floating panels
18
20
  drawer: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
19
21
  // Toast notifications
package/package.json CHANGED
@@ -1,10 +1,11 @@
1
1
  {
2
2
  "name": "@insymetri/styleguide",
3
- "version": "0.1.41",
3
+ "version": "0.1.43",
4
4
  "description": "Insymetri shared UI component library built with Svelte 5",
5
5
  "type": "module",
6
6
  "scripts": {
7
7
  "build": "svelte-package -i src/lib -o dist",
8
+ "dev": "svelte-package -i src/lib -o dist --watch",
8
9
  "prepublishOnly": "npm run build",
9
10
  "storybook": "storybook dev -p 6006",
10
11
  "build-storybook": "storybook build"