@insymetri/styleguide 0.1.71 → 0.1.73
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/IIIconButton/IIIconButton.svelte +11 -7
- package/dist/IIIconButton/IIIconButton.svelte.d.ts +1 -0
- package/dist/IIIconButton/IIIconButtonStories.svelte +13 -0
- package/dist/IIPopover/IIPopover.svelte +9 -1
- package/dist/IIPopover/IIPopover.svelte.d.ts +2 -0
- package/dist/IIPopover/IIPopoverStories.svelte +7 -7
- package/package.json +1 -1
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
iconName: IconName
|
|
10
10
|
variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'success' | 'accent'
|
|
11
11
|
size?: 'sm' | 'md' | 'lg'
|
|
12
|
+
shape?: 'square' | 'circle'
|
|
12
13
|
loading?: boolean
|
|
13
14
|
disabled?: boolean
|
|
14
15
|
class?: string
|
|
@@ -19,6 +20,7 @@
|
|
|
19
20
|
iconName,
|
|
20
21
|
variant = 'ghost',
|
|
21
22
|
size = 'md',
|
|
23
|
+
shape = 'square',
|
|
22
24
|
loading = false,
|
|
23
25
|
disabled = false,
|
|
24
26
|
class: className,
|
|
@@ -47,15 +49,15 @@
|
|
|
47
49
|
} as const
|
|
48
50
|
|
|
49
51
|
const densityClasses = {
|
|
50
|
-
compact: 'w-28 h-28 p-0
|
|
51
|
-
default: 'w-32 h-32 p-0
|
|
52
|
-
comfortable: 'w-40 h-40 p-0
|
|
53
|
-
mobile: 'w-48 h-48 p-0
|
|
52
|
+
compact: 'w-28 h-28 p-0',
|
|
53
|
+
default: 'w-32 h-32 p-0',
|
|
54
|
+
comfortable: 'w-40 h-40 p-0',
|
|
55
|
+
mobile: 'w-48 h-48 p-0',
|
|
54
56
|
} as const
|
|
55
57
|
|
|
56
58
|
const fixedSizeClasses = {
|
|
57
|
-
sm: 'w-24 h-24 p-0
|
|
58
|
-
lg: 'w-40 h-40 p-0
|
|
59
|
+
sm: 'w-24 h-24 p-0',
|
|
60
|
+
lg: 'w-40 h-40 p-0',
|
|
59
61
|
} as const
|
|
60
62
|
|
|
61
63
|
const iconSizeClasses = {
|
|
@@ -67,12 +69,14 @@
|
|
|
67
69
|
const resolvedSizeClasses = $derived(
|
|
68
70
|
size === 'md' ? densityClasses[density.value] : fixedSizeClasses[size]
|
|
69
71
|
)
|
|
72
|
+
|
|
73
|
+
const radiusClass = $derived(shape === 'circle' ? 'rounded-full' : 'rounded-control')
|
|
70
74
|
</script>
|
|
71
75
|
|
|
72
76
|
<button
|
|
73
77
|
bind:this={ref}
|
|
74
78
|
disabled={isDisabled}
|
|
75
|
-
class={cn(baseClasses, variantClasses[variant], resolvedSizeClasses, className)}
|
|
79
|
+
class={cn(baseClasses, variantClasses[variant], resolvedSizeClasses, radiusClass, className)}
|
|
76
80
|
{...restProps}
|
|
77
81
|
>
|
|
78
82
|
{#if loading}
|
|
@@ -4,6 +4,7 @@ type Props = Omit<HTMLButtonAttributes, 'disabled'> & {
|
|
|
4
4
|
iconName: IconName;
|
|
5
5
|
variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'success' | 'accent';
|
|
6
6
|
size?: 'sm' | 'md' | 'lg';
|
|
7
|
+
shape?: 'square' | 'circle';
|
|
7
8
|
loading?: boolean;
|
|
8
9
|
disabled?: boolean;
|
|
9
10
|
class?: string;
|
|
@@ -33,6 +33,19 @@
|
|
|
33
33
|
</table>
|
|
34
34
|
</section>
|
|
35
35
|
|
|
36
|
+
<!-- Shape -->
|
|
37
|
+
<section>
|
|
38
|
+
<h2 class="text-default-emphasis text-primary mb-8">Shape</h2>
|
|
39
|
+
<div class="flex items-center gap-16">
|
|
40
|
+
{#each sizes as size}
|
|
41
|
+
<div class="flex items-center gap-8">
|
|
42
|
+
<IIIconButton iconName="plus" variant="secondary" {size} shape="square" />
|
|
43
|
+
<IIIconButton iconName="plus" variant="secondary" {size} shape="circle" />
|
|
44
|
+
</div>
|
|
45
|
+
{/each}
|
|
46
|
+
</div>
|
|
47
|
+
</section>
|
|
48
|
+
|
|
36
49
|
<!-- Different Icons -->
|
|
37
50
|
<section>
|
|
38
51
|
<h2 class="text-default-emphasis text-primary mb-8">Common Icons</h2>
|
|
@@ -13,6 +13,8 @@
|
|
|
13
13
|
sideOffset?: number
|
|
14
14
|
class?: string
|
|
15
15
|
triggerClass?: string
|
|
16
|
+
/** Strip the default surface (background, border, radius, shadow) — for content that renders its own. */
|
|
17
|
+
unstyled?: boolean
|
|
16
18
|
}
|
|
17
19
|
|
|
18
20
|
let {
|
|
@@ -25,7 +27,12 @@
|
|
|
25
27
|
sideOffset = 4,
|
|
26
28
|
class: className,
|
|
27
29
|
triggerClass,
|
|
30
|
+
unstyled = false,
|
|
28
31
|
}: Props = $props()
|
|
32
|
+
|
|
33
|
+
const surfaceClasses = unstyled
|
|
34
|
+
? ''
|
|
35
|
+
: 'bg-dropdown-bg border border-dropdown-border rounded-10 shadow-dropdown'
|
|
29
36
|
</script>
|
|
30
37
|
|
|
31
38
|
<Popover.Root bind:open {onOpenChange}>
|
|
@@ -38,7 +45,8 @@
|
|
|
38
45
|
{align}
|
|
39
46
|
{sideOffset}
|
|
40
47
|
class={cn(
|
|
41
|
-
|
|
48
|
+
surfaceClasses,
|
|
49
|
+
'z-16 animate-slide-in motion-reduce:animate-none',
|
|
42
50
|
className
|
|
43
51
|
)}
|
|
44
52
|
>
|
|
@@ -9,6 +9,8 @@ type Props = {
|
|
|
9
9
|
sideOffset?: number;
|
|
10
10
|
class?: string;
|
|
11
11
|
triggerClass?: string;
|
|
12
|
+
/** Strip the default surface (background, border, radius, shadow) — for content that renders its own. */
|
|
13
|
+
unstyled?: boolean;
|
|
12
14
|
};
|
|
13
15
|
declare const IIPopover: import("svelte").Component<Props, {}, "open">;
|
|
14
16
|
type IIPopover = ReturnType<typeof IIPopover>;
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
<IIButton variant="secondary" size="sm">Open Popover</IIButton>
|
|
18
18
|
{/snippet}
|
|
19
19
|
{#snippet content()}
|
|
20
|
-
<div class="flex flex-col gap-8 w-200">
|
|
20
|
+
<div class="flex flex-col gap-8 w-200 p-12">
|
|
21
21
|
<p class="text-small-emphasis text-body">Popover Title</p>
|
|
22
22
|
<p class="text-small text-secondary">This is a basic popover with some content inside.</p>
|
|
23
23
|
</div>
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
<IIButton variant="secondary" size="sm">Top</IIButton>
|
|
35
35
|
{/snippet}
|
|
36
36
|
{#snippet content()}
|
|
37
|
-
<p class="text-small text-body">Popover on top</p>
|
|
37
|
+
<p class="text-small text-body p-12">Popover on top</p>
|
|
38
38
|
{/snippet}
|
|
39
39
|
</IIPopover>
|
|
40
40
|
<IIPopover side="right">
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
<IIButton variant="secondary" size="sm">Right</IIButton>
|
|
43
43
|
{/snippet}
|
|
44
44
|
{#snippet content()}
|
|
45
|
-
<p class="text-small text-body">Popover on right</p>
|
|
45
|
+
<p class="text-small text-body p-12">Popover on right</p>
|
|
46
46
|
{/snippet}
|
|
47
47
|
</IIPopover>
|
|
48
48
|
<IIPopover side="bottom">
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
<IIButton variant="secondary" size="sm">Bottom</IIButton>
|
|
51
51
|
{/snippet}
|
|
52
52
|
{#snippet content()}
|
|
53
|
-
<p class="text-small text-body">Popover on bottom</p>
|
|
53
|
+
<p class="text-small text-body p-12">Popover on bottom</p>
|
|
54
54
|
{/snippet}
|
|
55
55
|
</IIPopover>
|
|
56
56
|
<IIPopover side="left">
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
<IIButton variant="secondary" size="sm">Left</IIButton>
|
|
59
59
|
{/snippet}
|
|
60
60
|
{#snippet content()}
|
|
61
|
-
<p class="text-small text-body">Popover on left</p>
|
|
61
|
+
<p class="text-small text-body p-12">Popover on left</p>
|
|
62
62
|
{/snippet}
|
|
63
63
|
</IIPopover>
|
|
64
64
|
</div>
|
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
<IIIconButton iconName="magnifying-glass" variant="ghost" />
|
|
73
73
|
{/snippet}
|
|
74
74
|
{#snippet content()}
|
|
75
|
-
<div class="flex flex-col gap-8 w-200">
|
|
75
|
+
<div class="flex flex-col gap-8 w-200 p-12">
|
|
76
76
|
<p class="text-small-emphasis text-body">Settings</p>
|
|
77
77
|
<p class="text-small text-secondary">Quick settings panel triggered by an icon button.</p>
|
|
78
78
|
</div>
|
|
@@ -88,7 +88,7 @@
|
|
|
88
88
|
<IIButton variant="primary" size="sm">User Info</IIButton>
|
|
89
89
|
{/snippet}
|
|
90
90
|
{#snippet content()}
|
|
91
|
-
<div class="flex flex-col gap-12 w-240">
|
|
91
|
+
<div class="flex flex-col gap-12 w-240 p-12">
|
|
92
92
|
<div class="flex items-center gap-8">
|
|
93
93
|
<div class="w-32 h-32 rounded-full bg-primary flex items-center justify-center text-inverse text-small-emphasis">JD</div>
|
|
94
94
|
<div>
|