@websline/system-components 1.0.10-beta → 1.0.11
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/components/atoms/actions/button/button.variants.d.ts +9 -0
- package/dist/components/atoms/actions/button/button.variants.js +13 -10
- package/dist/components/atoms/actions/closeButton/CloseButton.svelte +1 -1
- package/dist/components/atoms/actions/iconButton/iconButton.variants.js +3 -3
- package/dist/components/atoms/avatar/avatar.variants.js +2 -2
- package/dist/components/atoms/badge/badge.variants.js +1 -1
- package/dist/components/atoms/chip/chip.variants.js +2 -2
- package/dist/components/atoms/feedback/progressBar/progressBar.variants.js +2 -2
- package/dist/components/atoms/helperText/helperText.variants.d.ts +2 -2
- package/dist/components/atoms/helperText/helperText.variants.js +1 -1
- package/dist/components/atoms/input/input.variants.js +1 -1
- package/dist/components/atoms/label/label.variants.d.ts +2 -2
- package/dist/components/atoms/label/label.variants.js +1 -1
- package/dist/components/atoms/select/select.variants.js +2 -2
- package/dist/components/molecules/notification/notification.variants.js +4 -4
- package/dist/components/molecules/pickers/colorSwatch/colorSwatch.variants.js +2 -2
- package/dist/components/molecules/richTextEditor/richTextEditor.variants.js +1 -1
- package/dist/components/molecules/selectorCard/selectorCard.variants.js +5 -6
- package/dist/components/molecules/toggleGroup/ToggleGroupItem.svelte +6 -16
- package/dist/components/molecules/toggleGroup/ToggleGroupItem.svelte.d.ts +0 -8
- package/dist/components/molecules/toggleGroup/toggleGroup.variants.js +3 -3
- package/dist/components/molecules/toggleGroup/toggleGroupItem.variants.d.ts +0 -6
- package/dist/components/molecules/toggleGroup/toggleGroupItem.variants.js +10 -11
- package/dist/components/organisms/modal/modal.variants.js +3 -4
- package/dist/components/organisms/popover/popover.variants.js +1 -1
- package/package.json +16 -16
|
@@ -34,6 +34,9 @@ export const buttonVariants: import("tailwind-variants").TVReturnType<{
|
|
|
34
34
|
};
|
|
35
35
|
};
|
|
36
36
|
variant: {
|
|
37
|
+
filled: {
|
|
38
|
+
base: string;
|
|
39
|
+
};
|
|
37
40
|
outlined: {
|
|
38
41
|
base: string;
|
|
39
42
|
};
|
|
@@ -81,6 +84,9 @@ export const buttonVariants: import("tailwind-variants").TVReturnType<{
|
|
|
81
84
|
};
|
|
82
85
|
};
|
|
83
86
|
variant: {
|
|
87
|
+
filled: {
|
|
88
|
+
base: string;
|
|
89
|
+
};
|
|
84
90
|
outlined: {
|
|
85
91
|
base: string;
|
|
86
92
|
};
|
|
@@ -128,6 +134,9 @@ export const buttonVariants: import("tailwind-variants").TVReturnType<{
|
|
|
128
134
|
};
|
|
129
135
|
};
|
|
130
136
|
variant: {
|
|
137
|
+
filled: {
|
|
138
|
+
base: string;
|
|
139
|
+
};
|
|
131
140
|
outlined: {
|
|
132
141
|
base: string;
|
|
133
142
|
};
|
|
@@ -2,7 +2,7 @@ import { tv } from "tailwind-variants";
|
|
|
2
2
|
|
|
3
3
|
const buttonVariants = tv({
|
|
4
4
|
slots: {
|
|
5
|
-
base: "inline-flex cursor-pointer items-center rounded
|
|
5
|
+
base: "inline-flex cursor-pointer items-center rounded align-middle transition duration-200 select-none focus:outline-offset-2",
|
|
6
6
|
icon: "flex h-lh items-center",
|
|
7
7
|
spinner: "flex h-lh items-center justify-center",
|
|
8
8
|
},
|
|
@@ -29,24 +29,27 @@ const buttonVariants = tv({
|
|
|
29
29
|
},
|
|
30
30
|
size: {
|
|
31
31
|
small: {
|
|
32
|
-
base: "gap-2 px-3 py-1.25
|
|
32
|
+
base: "gap-2 px-3 py-1.25 button-small",
|
|
33
33
|
spinner: "w-4",
|
|
34
34
|
},
|
|
35
35
|
medium: {
|
|
36
|
-
base: "gap-2 px-3 py-
|
|
36
|
+
base: "gap-2 px-3 py-1.5 button-default",
|
|
37
37
|
spinner: "w-5",
|
|
38
38
|
},
|
|
39
39
|
large: {
|
|
40
|
-
base: "gap-3 px-3 py-
|
|
40
|
+
base: "gap-3 px-3 py-2.5 button-default",
|
|
41
41
|
spinner: "w-5",
|
|
42
42
|
},
|
|
43
43
|
},
|
|
44
44
|
variant: {
|
|
45
|
+
filled: {
|
|
46
|
+
base: "border-1 border-transparent",
|
|
47
|
+
},
|
|
45
48
|
outlined: {
|
|
46
|
-
base: "border-
|
|
49
|
+
base: "border-1",
|
|
47
50
|
},
|
|
48
51
|
text: {
|
|
49
|
-
base: "relative px-0
|
|
52
|
+
base: "relative !px-0 after:absolute after:bottom-0 after:left-0 after:h-[1.5px] after:w-0 after:transition-all after:duration-300 after:content-[''] hover:after:w-full",
|
|
50
53
|
},
|
|
51
54
|
},
|
|
52
55
|
},
|
|
@@ -62,7 +65,7 @@ const buttonVariants = tv({
|
|
|
62
65
|
color: "primary",
|
|
63
66
|
variant: "outlined",
|
|
64
67
|
class: {
|
|
65
|
-
base: "text-blue-500 hover:border-blue-600 hover:bg-blue-600 hover:text-white dark:text-blue-400 dark:hover:border-blue-500 dark:hover:bg-blue-500",
|
|
68
|
+
base: "border-blue-500 text-blue-500 hover:border-blue-600 hover:bg-blue-600 hover:text-white dark:border-blue-400 dark:text-blue-400 dark:hover:border-blue-500 dark:hover:bg-blue-500",
|
|
66
69
|
},
|
|
67
70
|
},
|
|
68
71
|
{
|
|
@@ -75,7 +78,7 @@ const buttonVariants = tv({
|
|
|
75
78
|
color: "secondary",
|
|
76
79
|
variant: "outlined",
|
|
77
80
|
class: {
|
|
78
|
-
base: "text-neutral-900 hover:border-neutral-700 hover:bg-neutral-700 hover:text-white dark:text-neutral-200 dark:hover:border-neutral-500 dark:hover:bg-neutral-500 dark:hover:text-
|
|
81
|
+
base: "text-neutral-900 hover:border-neutral-700 hover:bg-neutral-700 hover:text-white dark:border-neutral-200 dark:text-neutral-200 dark:hover:border-neutral-500 dark:hover:bg-neutral-500 dark:hover:text-inherit",
|
|
79
82
|
},
|
|
80
83
|
},
|
|
81
84
|
{
|
|
@@ -89,7 +92,7 @@ const buttonVariants = tv({
|
|
|
89
92
|
color: "success",
|
|
90
93
|
variant: "outlined",
|
|
91
94
|
class: {
|
|
92
|
-
base: "text-green-500 hover:border-green-700 hover:bg-green-700 hover:text-white dark:text-green-500 dark:hover:border-green-700 dark:hover:bg-green-700",
|
|
95
|
+
base: "border-green-500 text-green-500 hover:border-green-700 hover:bg-green-700 hover:text-white dark:border-green-500 dark:text-green-500 dark:hover:border-green-700 dark:hover:bg-green-700",
|
|
93
96
|
},
|
|
94
97
|
},
|
|
95
98
|
{
|
|
@@ -103,7 +106,7 @@ const buttonVariants = tv({
|
|
|
103
106
|
color: "error",
|
|
104
107
|
variant: "outlined",
|
|
105
108
|
class: {
|
|
106
|
-
base: "text-red-500 hover:border-red-700 hover:bg-red-700 hover:text-white dark:text-red-500 dark:hover:border-red-700 dark:hover:bg-red-700",
|
|
109
|
+
base: "border-red-500 text-red-500 hover:border-red-700 hover:bg-red-700 hover:text-white dark:border-red-500 dark:text-red-500 dark:hover:border-red-700 dark:hover:bg-red-700",
|
|
107
110
|
},
|
|
108
111
|
},
|
|
109
112
|
{
|
|
@@ -19,9 +19,9 @@ const iconButtonVariants = tv({
|
|
|
19
19
|
large: "p-2.75",
|
|
20
20
|
},
|
|
21
21
|
variant: {
|
|
22
|
-
filled: "border border-transparent",
|
|
23
|
-
outlined: "border",
|
|
24
|
-
transparent: "border border-transparent",
|
|
22
|
+
filled: "border-1 border-transparent",
|
|
23
|
+
outlined: "border-1",
|
|
24
|
+
transparent: "border-1 border-transparent",
|
|
25
25
|
},
|
|
26
26
|
},
|
|
27
27
|
compoundVariants: [
|
|
@@ -5,7 +5,7 @@ const avatarVariants = tv({
|
|
|
5
5
|
base: "flex overflow-hidden",
|
|
6
6
|
image: "h-full w-full object-cover",
|
|
7
7
|
fallback:
|
|
8
|
-
"flex h-full w-full items-center justify-center bg-blue-100
|
|
8
|
+
"flex h-full w-full items-center justify-center bg-blue-100 heading-h6 text-neutral-900",
|
|
9
9
|
},
|
|
10
10
|
variants: {
|
|
11
11
|
as: {
|
|
@@ -13,7 +13,7 @@ const avatarVariants = tv({
|
|
|
13
13
|
},
|
|
14
14
|
shape: {
|
|
15
15
|
circle: "rounded-full",
|
|
16
|
-
square: "rounded
|
|
16
|
+
square: "rounded",
|
|
17
17
|
},
|
|
18
18
|
},
|
|
19
19
|
});
|
|
@@ -2,7 +2,7 @@ import { tv } from "tailwind-variants";
|
|
|
2
2
|
|
|
3
3
|
const badgeVariants = tv({
|
|
4
4
|
slots: {
|
|
5
|
-
base: "absolute inline-flex items-center justify-center rounded-full
|
|
5
|
+
base: "absolute inline-flex items-center justify-center rounded-full body-extra-small select-none",
|
|
6
6
|
wrapper: "relative inline-flex gap-0.5",
|
|
7
7
|
},
|
|
8
8
|
variants: {
|
|
@@ -2,7 +2,7 @@ import { tv } from "tailwind-variants";
|
|
|
2
2
|
|
|
3
3
|
const chipVariants = tv({
|
|
4
4
|
base: [
|
|
5
|
-
"relative inline-flex items-center gap-1 rounded
|
|
5
|
+
"relative inline-flex items-center gap-1 rounded border align-middle select-none [button]:cursor-pointer",
|
|
6
6
|
"ring-blue-500 ring-offset-1 ring-offset-transparent outline-0 focus-visible:ring-1 dark:ring-blue-400",
|
|
7
7
|
],
|
|
8
8
|
variants: {
|
|
@@ -15,7 +15,7 @@ const chipVariants = tv({
|
|
|
15
15
|
warning: "bg-yellow-500 text-neutral-900",
|
|
16
16
|
},
|
|
17
17
|
size: {
|
|
18
|
-
small: "min-h-[20px] px-2 py-0.5
|
|
18
|
+
small: "min-h-[20px] px-2 py-0.5 body-extra-small",
|
|
19
19
|
big: "min-h-[28px] px-3 py-1.5 body-small",
|
|
20
20
|
},
|
|
21
21
|
iconPosition: {
|
|
@@ -2,9 +2,9 @@ import { tv } from "tailwind-variants";
|
|
|
2
2
|
|
|
3
3
|
const progressBarVariants = tv({
|
|
4
4
|
slots: {
|
|
5
|
-
bar: "h-1 w-full rounded-sm bg-neutral-100 after:block after:h-full after:w-(--progress) after:rounded-sm after:bg-neutral-900 after:transition-[width] after:duration-300 after:ease-in-out dark:bg-neutral-900 dark:after:bg-neutral-100",
|
|
5
|
+
bar: "h-1 w-full rounded-sm bg-neutral-100 after:block after:h-full after:w-[var(--progress)] after:rounded-sm after:bg-neutral-900 after:transition-[width] after:duration-300 after:ease-in-out dark:bg-neutral-900 dark:after:bg-neutral-100",
|
|
6
6
|
base: "flex items-center gap-4",
|
|
7
|
-
label: "
|
|
7
|
+
label: "body-small text-nowrap text-neutral-500 tabular-nums",
|
|
8
8
|
},
|
|
9
9
|
});
|
|
10
10
|
|
|
@@ -2,7 +2,7 @@ export const helperTextVariants: import("tailwind-variants").TVReturnType<{
|
|
|
2
2
|
error: {
|
|
3
3
|
true: string;
|
|
4
4
|
};
|
|
5
|
-
}, undefined, "
|
|
5
|
+
}, undefined, "body-extra-small text-neutral-500", {
|
|
6
6
|
error: {
|
|
7
7
|
true: string;
|
|
8
8
|
};
|
|
@@ -10,4 +10,4 @@ export const helperTextVariants: import("tailwind-variants").TVReturnType<{
|
|
|
10
10
|
error: {
|
|
11
11
|
true: string;
|
|
12
12
|
};
|
|
13
|
-
}, undefined, "
|
|
13
|
+
}, undefined, "body-extra-small text-neutral-500", unknown, unknown, undefined>>;
|
|
@@ -6,7 +6,7 @@ import { tv } from "tailwind-variants";
|
|
|
6
6
|
const inputBaseVariant = tv({
|
|
7
7
|
slots: {
|
|
8
8
|
base: [
|
|
9
|
-
"w-full rounded
|
|
9
|
+
"w-full rounded bg-transparent px-4 body-default",
|
|
10
10
|
"text-neutral-900 placeholder-neutral-500 dark:text-neutral-200",
|
|
11
11
|
"bg-white dark:bg-neutral-800",
|
|
12
12
|
"outline-transparent transition-[border,color,outline] duration-300",
|
|
@@ -5,7 +5,7 @@ export const labelVariants: import("tailwind-variants").TVReturnType<{
|
|
|
5
5
|
hidden: {
|
|
6
6
|
true: string;
|
|
7
7
|
};
|
|
8
|
-
}, undefined, "
|
|
8
|
+
}, undefined, "body-small text-neutral-500", {
|
|
9
9
|
error: {
|
|
10
10
|
true: string;
|
|
11
11
|
};
|
|
@@ -19,4 +19,4 @@ export const labelVariants: import("tailwind-variants").TVReturnType<{
|
|
|
19
19
|
hidden: {
|
|
20
20
|
true: string;
|
|
21
21
|
};
|
|
22
|
-
}, undefined, "
|
|
22
|
+
}, undefined, "body-small text-neutral-500", unknown, unknown, undefined>>;
|
|
@@ -6,7 +6,7 @@ const selectVariants = tv({
|
|
|
6
6
|
slots: {
|
|
7
7
|
base: [
|
|
8
8
|
"flex items-center",
|
|
9
|
-
"[&::picker(select)]:my-1 [&::picker(select)]:rounded
|
|
9
|
+
"[&::picker(select)]:my-1 [&::picker(select)]:rounded [&::picker(select)]:border-0 [&::picker(select)]:p-1",
|
|
10
10
|
"[&::picker-icon]:hidden",
|
|
11
11
|
"[&::picker(select)]:bg-white [&::picker(select)]:shadow-sm dark:[&::picker(select)]:bg-neutral-800",
|
|
12
12
|
"bg-none after:bg-current after:bg-size-[100%] after:bg-center after:bg-no-repeat",
|
|
@@ -14,7 +14,7 @@ const selectVariants = tv({
|
|
|
14
14
|
"[&:open]:after:rotate-180",
|
|
15
15
|
],
|
|
16
16
|
option: [
|
|
17
|
-
"flex rounded
|
|
17
|
+
"flex rounded p-2 body-small",
|
|
18
18
|
"bg-white dark:bg-neutral-800",
|
|
19
19
|
"bg-linear-to-r to-transparent",
|
|
20
20
|
"[&::checkmark]:order-1 [&::checkmark]:ml-auto [&::checkmark]:shrink-0",
|
|
@@ -2,12 +2,12 @@ import { tv } from "tailwind-variants";
|
|
|
2
2
|
|
|
3
3
|
const notificationVariants = tv({
|
|
4
4
|
slots: {
|
|
5
|
-
base: "grid grid-cols-[40px_1fr_24px] gap-2 rounded-lg border border-neutral-300 bg-white p-2 dark:border-neutral-700 dark:bg-neutral-900",
|
|
6
|
-
close: "col-3 self-start",
|
|
5
|
+
base: "grid grid-cols-[40px_1fr_24px] gap-2 rounded-lg border-1 border-neutral-300 bg-white p-2 dark:border-neutral-700 dark:bg-neutral-900",
|
|
6
|
+
close: "col-[3] self-start",
|
|
7
7
|
icon: "flex h-10 w-10 items-center justify-center rounded-sm text-white",
|
|
8
8
|
content: "flex flex-col justify-center",
|
|
9
|
-
message: "
|
|
10
|
-
title: "body-
|
|
9
|
+
message: "body-extra-small text-neutral-500",
|
|
10
|
+
title: "body-default dark:text-white",
|
|
11
11
|
},
|
|
12
12
|
variants: {
|
|
13
13
|
variant: {
|
|
@@ -2,8 +2,8 @@ import { tv } from "tailwind-variants";
|
|
|
2
2
|
|
|
3
3
|
const colorSwatchVariants = tv({
|
|
4
4
|
slots: {
|
|
5
|
-
base: "flex cursor-pointer items-center justify-center gap-1 rounded
|
|
6
|
-
iconText: "flex h-4 w-4 items-center justify-center rounded
|
|
5
|
+
base: "flex cursor-pointer items-center justify-center gap-1 rounded transition duration-200 select-none hover:bg-neutral-300 dark:hover:bg-neutral-700",
|
|
6
|
+
iconText: "flex h-4 w-4 items-center justify-center rounded",
|
|
7
7
|
iconArrow: "dark:text-white",
|
|
8
8
|
},
|
|
9
9
|
variants: {
|
|
@@ -2,7 +2,7 @@ import { tv } from "tailwind-variants";
|
|
|
2
2
|
|
|
3
3
|
const richTextEditorVariants = tv({
|
|
4
4
|
slots: {
|
|
5
|
-
base: "body-
|
|
5
|
+
base: "body-default text-neutral-800 dark:text-white",
|
|
6
6
|
toolbar:
|
|
7
7
|
"pointer flex gap-0.5 rounded-t-sm border border-b-0 border-neutral-300 px-5 py-2 dark:border-neutral-700",
|
|
8
8
|
field: [
|
|
@@ -2,12 +2,11 @@ import { tv } from "tailwind-variants";
|
|
|
2
2
|
|
|
3
3
|
const selectorCardVariants = tv({
|
|
4
4
|
slots: {
|
|
5
|
-
base: "flex cursor-pointer gap-3 rounded-
|
|
6
|
-
content: "",
|
|
7
|
-
helperText: "
|
|
5
|
+
base: "flex cursor-pointer gap-3 rounded-sm border border-neutral-300 bg-white px-4 py-3 dark:border-neutral-700 dark:bg-neutral-800",
|
|
6
|
+
content: "flex grow flex-col items-start gap-1",
|
|
7
|
+
helperText: "body-small text-neutral-500",
|
|
8
8
|
input: "shrink-0",
|
|
9
|
-
label:
|
|
10
|
-
"mb-0.5 cursor-[inherit] ui-title-2 text-neutral-900 dark:text-neutral-200",
|
|
9
|
+
label: "cursor-[inherit] heading-h6 text-neutral-900 dark:text-neutral-200",
|
|
11
10
|
},
|
|
12
11
|
variants: {
|
|
13
12
|
disabled: {
|
|
@@ -17,7 +16,7 @@ const selectorCardVariants = tv({
|
|
|
17
16
|
},
|
|
18
17
|
error: {
|
|
19
18
|
true: {
|
|
20
|
-
base: "border-red-500
|
|
19
|
+
base: "!border-red-500 outline-1 !outline-red-500",
|
|
21
20
|
label: "text-red-500 dark:text-red-500",
|
|
22
21
|
},
|
|
23
22
|
},
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
<script>
|
|
2
2
|
import { getContext } from "svelte";
|
|
3
|
-
import { Icon } from "../../../index.js";
|
|
4
3
|
import {
|
|
5
4
|
toggleGroupItemVariants,
|
|
6
5
|
toggleGroupItemTabVariants,
|
|
@@ -10,16 +9,15 @@
|
|
|
10
9
|
* @typedef {Object} Props
|
|
11
10
|
* @property {import('svelte').Snippet} [children] Children content – can be text, HTML, or other Svelte components
|
|
12
11
|
* @property {string} [class=""] Additional CSS classes to apply to the component
|
|
13
|
-
* @property {string} [icon] The name of the icon to display alongside the content
|
|
14
12
|
* @property {string} [value=""] The value of the toggle group item
|
|
15
13
|
*/
|
|
16
14
|
|
|
17
15
|
/** @type {Props} */
|
|
18
|
-
let { children, class: className = "",
|
|
16
|
+
let { children, class: className = "", value: localeValue } = $props();
|
|
19
17
|
|
|
20
|
-
let store =
|
|
21
|
-
let { appearance, send, receive, size, variant } = $derived(store);
|
|
22
|
-
let isActive = $derived(store.value === localeValue);
|
|
18
|
+
let store = getContext("toggle-group-store");
|
|
19
|
+
let { appearance, send, receive, size, variant } = $derived(store());
|
|
20
|
+
let isActive = $derived(store().value === localeValue);
|
|
23
21
|
|
|
24
22
|
let stylesByVariant = $derived.by(() => {
|
|
25
23
|
if (variant === "tabs") {
|
|
@@ -35,18 +33,10 @@
|
|
|
35
33
|
class={stylesByVariant.button({ appearance, class: className, isActive, size })}
|
|
36
34
|
role="tab"
|
|
37
35
|
onclick={() => {
|
|
38
|
-
store.update(localeValue);
|
|
36
|
+
store().update(localeValue);
|
|
39
37
|
}}
|
|
40
38
|
type="button">
|
|
41
|
-
<span class={stylesByVariant.span()}>
|
|
42
|
-
{#if icon}
|
|
43
|
-
<Icon
|
|
44
|
-
class={stylesByVariant.icon()}
|
|
45
|
-
name={icon}
|
|
46
|
-
size={variant === "tabs" || size === "small" ? 16 : 24} />
|
|
47
|
-
{/if}
|
|
48
|
-
{@render children?.()}
|
|
49
|
-
</span>
|
|
39
|
+
<span class={stylesByVariant.span()}>{@render children?.()}</span>
|
|
50
40
|
{#if isActive}
|
|
51
41
|
<div
|
|
52
42
|
class={stylesByVariant.trigger({ appearance })}
|
|
@@ -12,10 +12,6 @@ declare const ToggleGroupItem: import("svelte").Component<{
|
|
|
12
12
|
* Additional CSS classes to apply to the component
|
|
13
13
|
*/
|
|
14
14
|
class?: string;
|
|
15
|
-
/**
|
|
16
|
-
* The name of the icon to display alongside the content
|
|
17
|
-
*/
|
|
18
|
-
icon?: string;
|
|
19
15
|
/**
|
|
20
16
|
* The value of the toggle group item
|
|
21
17
|
*/
|
|
@@ -30,10 +26,6 @@ type Props = {
|
|
|
30
26
|
* Additional CSS classes to apply to the component
|
|
31
27
|
*/
|
|
32
28
|
class?: string;
|
|
33
|
-
/**
|
|
34
|
-
* The name of the icon to display alongside the content
|
|
35
|
-
*/
|
|
36
|
-
icon?: string;
|
|
37
29
|
/**
|
|
38
30
|
* The value of the toggle group item
|
|
39
31
|
*/
|
|
@@ -2,7 +2,7 @@ import { tv } from "tailwind-variants";
|
|
|
2
2
|
|
|
3
3
|
const toggleGroupVariants = tv({
|
|
4
4
|
slots: {
|
|
5
|
-
base: "overflow-hidden rounded-
|
|
5
|
+
base: "overflow-hidden rounded-sm bg-current",
|
|
6
6
|
tabs: "flex gap-1",
|
|
7
7
|
},
|
|
8
8
|
variants: {
|
|
@@ -12,7 +12,7 @@ const toggleGroupVariants = tv({
|
|
|
12
12
|
},
|
|
13
13
|
size: {
|
|
14
14
|
small: {
|
|
15
|
-
tabs: "h-
|
|
15
|
+
tabs: "h-6 p-0.5",
|
|
16
16
|
},
|
|
17
17
|
medium: {
|
|
18
18
|
tabs: "h-10 p-1",
|
|
@@ -24,7 +24,7 @@ const toggleGroupVariants = tv({
|
|
|
24
24
|
const toggleGroupTabVariants = tv({
|
|
25
25
|
slots: {
|
|
26
26
|
base: "",
|
|
27
|
-
tabs: "flex h-
|
|
27
|
+
tabs: "flex h-10 gap-5 border-b border-b-neutral-500",
|
|
28
28
|
},
|
|
29
29
|
});
|
|
30
30
|
|
|
@@ -18,7 +18,6 @@ export const toggleGroupItemVariants: import("tailwind-variants").TVReturnType<{
|
|
|
18
18
|
}, {
|
|
19
19
|
base: string;
|
|
20
20
|
button: string;
|
|
21
|
-
icon: string;
|
|
22
21
|
span: string;
|
|
23
22
|
trigger: string;
|
|
24
23
|
}, undefined, {
|
|
@@ -41,7 +40,6 @@ export const toggleGroupItemVariants: import("tailwind-variants").TVReturnType<{
|
|
|
41
40
|
}, {
|
|
42
41
|
base: string;
|
|
43
42
|
button: string;
|
|
44
|
-
icon: string;
|
|
45
43
|
span: string;
|
|
46
44
|
trigger: string;
|
|
47
45
|
}, import("tailwind-variants").TVReturnType<{
|
|
@@ -64,7 +62,6 @@ export const toggleGroupItemVariants: import("tailwind-variants").TVReturnType<{
|
|
|
64
62
|
}, {
|
|
65
63
|
base: string;
|
|
66
64
|
button: string;
|
|
67
|
-
icon: string;
|
|
68
65
|
span: string;
|
|
69
66
|
trigger: string;
|
|
70
67
|
}, undefined, unknown, unknown, undefined>>;
|
|
@@ -80,7 +77,6 @@ export const toggleGroupItemTabVariants: import("tailwind-variants").TVReturnTyp
|
|
|
80
77
|
}, {
|
|
81
78
|
base: string;
|
|
82
79
|
button: string;
|
|
83
|
-
icon: string;
|
|
84
80
|
span: string;
|
|
85
81
|
trigger: string;
|
|
86
82
|
}, undefined, {
|
|
@@ -95,7 +91,6 @@ export const toggleGroupItemTabVariants: import("tailwind-variants").TVReturnTyp
|
|
|
95
91
|
}, {
|
|
96
92
|
base: string;
|
|
97
93
|
button: string;
|
|
98
|
-
icon: string;
|
|
99
94
|
span: string;
|
|
100
95
|
trigger: string;
|
|
101
96
|
}, import("tailwind-variants").TVReturnType<{
|
|
@@ -110,7 +105,6 @@ export const toggleGroupItemTabVariants: import("tailwind-variants").TVReturnTyp
|
|
|
110
105
|
}, {
|
|
111
106
|
base: string;
|
|
112
107
|
button: string;
|
|
113
|
-
icon: string;
|
|
114
108
|
span: string;
|
|
115
109
|
trigger: string;
|
|
116
110
|
}, undefined, unknown, unknown, undefined>>;
|
|
@@ -4,9 +4,8 @@ const toggleGroupItemVariants = tv({
|
|
|
4
4
|
slots: {
|
|
5
5
|
base: "relative h-full w-full whitespace-nowrap",
|
|
6
6
|
button:
|
|
7
|
-
"block h-full w-full cursor-pointer rounded-sm bg-transparent
|
|
8
|
-
|
|
9
|
-
span: "relative z-2 flex items-center justify-center gap-2",
|
|
7
|
+
"block h-full w-full cursor-pointer rounded-sm bg-transparent button-small transition-[background,color]",
|
|
8
|
+
span: "relative z-2 block",
|
|
10
9
|
trigger: "absolute inset-0 z-1 rounded-sm bg-white shadow-sm",
|
|
11
10
|
},
|
|
12
11
|
variants: {
|
|
@@ -20,7 +19,7 @@ const toggleGroupItemVariants = tv({
|
|
|
20
19
|
},
|
|
21
20
|
size: {
|
|
22
21
|
small: {
|
|
23
|
-
button: "px-1",
|
|
22
|
+
button: "px-1.5",
|
|
24
23
|
},
|
|
25
24
|
medium: {
|
|
26
25
|
button: "px-3",
|
|
@@ -49,19 +48,19 @@ const toggleGroupItemVariants = tv({
|
|
|
49
48
|
|
|
50
49
|
const toggleGroupItemTabVariants = tv({
|
|
51
50
|
slots: {
|
|
52
|
-
base: "relative h-full w-full whitespace-nowrap
|
|
53
|
-
button: "h-full w-full cursor-pointer
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
51
|
+
base: "relative h-full w-full px-1 whitespace-nowrap",
|
|
52
|
+
button: "h-full w-full cursor-pointer button-default transition-[color]",
|
|
53
|
+
span: "block",
|
|
54
|
+
trigger:
|
|
55
|
+
"absolute -bottom-px left-0 h-0.5 w-full rounded-t-xs bg-blue-500 dark:bg-blue-400",
|
|
57
56
|
},
|
|
58
57
|
variants: {
|
|
59
58
|
isActive: {
|
|
60
59
|
true: {
|
|
61
|
-
button: "text-
|
|
60
|
+
button: "text-neutral-900 dark:text-white",
|
|
62
61
|
},
|
|
63
62
|
false: {
|
|
64
|
-
button: "text-neutral-500 hover:text-
|
|
63
|
+
button: "text-neutral-500 hover:text-neutral-900 dark:hover:text-white",
|
|
65
64
|
},
|
|
66
65
|
},
|
|
67
66
|
},
|
|
@@ -4,12 +4,11 @@ const modalVariants = tv({
|
|
|
4
4
|
slots: {
|
|
5
5
|
close: "ml-auto",
|
|
6
6
|
container:
|
|
7
|
-
"my-4 grid max-h-[calc(100vh-32px)] w-[calc(100vw-32px)] min-w-xs grid-rows-[auto_1fr] overflow-hidden rounded-
|
|
8
|
-
header:
|
|
9
|
-
"flex items-end border-b border-neutral-300 px-4 py-3 ui-title-2 dark:border-neutral-700",
|
|
7
|
+
"my-4 grid max-h-[calc(100vh-32px)] w-[calc(100vw-32px)] min-w-xs grid-rows-[auto_1fr] overflow-hidden rounded-2xl bg-white leading-[1.486] shadow-sm dark:bg-neutral-800 dark:text-neutral-200",
|
|
8
|
+
header: "flex items-start border-b border-neutral-300 px-4 py-3",
|
|
10
9
|
body: "h-full overflow-auto",
|
|
11
10
|
overlay: "fixed inset-0 z-modal-backdrop bg-black/25",
|
|
12
|
-
positioner: "fixed inset-0 z-modal grid items-center justify-items-center",
|
|
11
|
+
positioner: "fixed inset-0 z-1 z-modal grid items-center justify-items-center",
|
|
13
12
|
trigger: "cursor-pointer",
|
|
14
13
|
},
|
|
15
14
|
variants: {
|
|
@@ -7,7 +7,7 @@ const popoverVariants = tv({
|
|
|
7
7
|
content:
|
|
8
8
|
"flex flex-col-reverse rounded-2xl bg-white shadow-sm dark:bg-neutral-800",
|
|
9
9
|
header:
|
|
10
|
-
"flex items-center justify-between gap-3 border-b border-gray-300
|
|
10
|
+
"flex items-center justify-between gap-3 border-b border-gray-300 heading-h6 dark:text-neutral-200",
|
|
11
11
|
trigger: "cursor-pointer",
|
|
12
12
|
},
|
|
13
13
|
variants: {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@websline/system-components",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.11",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -44,37 +44,37 @@
|
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@eslint/compat": "^2.0.0",
|
|
47
|
-
"@eslint/js": "^9.39.
|
|
48
|
-
"@storybook/addon-a11y": "^10.1.
|
|
49
|
-
"@storybook/addon-docs": "^10.1.
|
|
47
|
+
"@eslint/js": "^9.39.2",
|
|
48
|
+
"@storybook/addon-a11y": "^10.1.10",
|
|
49
|
+
"@storybook/addon-docs": "^10.1.10",
|
|
50
50
|
"@storybook/addon-svelte-csf": "^5.0.10",
|
|
51
|
-
"@storybook/sveltekit": "^10.1.
|
|
51
|
+
"@storybook/sveltekit": "^10.1.10",
|
|
52
52
|
"@sveltejs/adapter-auto": "^7.0.0",
|
|
53
53
|
"@sveltejs/kit": "^2.49.2",
|
|
54
54
|
"@sveltejs/package": "^2.5.7",
|
|
55
55
|
"@sveltejs/vite-plugin-svelte": "^6.2.1",
|
|
56
56
|
"@tailwindcss/forms": "^0.5.10",
|
|
57
57
|
"@tailwindcss/typography": "^0.5.19",
|
|
58
|
-
"@tailwindcss/vite": "^4.1.
|
|
59
|
-
"@types/node": "^
|
|
60
|
-
"@vitest/browser": "^4.0.
|
|
61
|
-
"eslint": "^9.39.
|
|
58
|
+
"@tailwindcss/vite": "^4.1.18",
|
|
59
|
+
"@types/node": "^25.0.3",
|
|
60
|
+
"@vitest/browser": "^4.0.16",
|
|
61
|
+
"eslint": "^9.39.2",
|
|
62
62
|
"eslint-config-prettier": "^10.1.8",
|
|
63
|
-
"eslint-plugin-storybook": "^10.1.
|
|
63
|
+
"eslint-plugin-storybook": "^10.1.10",
|
|
64
64
|
"eslint-plugin-svelte": "^3.13.1",
|
|
65
65
|
"globals": "^16.5.0",
|
|
66
66
|
"playwright": "^1.57.0",
|
|
67
67
|
"postcss-url": "^10.1.3",
|
|
68
68
|
"prettier": "^3.7.4",
|
|
69
|
-
"prettier-plugin-svelte": "^3.4.
|
|
69
|
+
"prettier-plugin-svelte": "^3.4.1",
|
|
70
70
|
"prettier-plugin-tailwindcss": "^0.7.2",
|
|
71
71
|
"publint": "^0.3.16",
|
|
72
|
-
"storybook": "^10.1.
|
|
73
|
-
"svelte": "^5.
|
|
74
|
-
"tailwindcss": "^4.1.
|
|
72
|
+
"storybook": "^10.1.10",
|
|
73
|
+
"svelte": "^5.46.0",
|
|
74
|
+
"tailwindcss": "^4.1.18",
|
|
75
75
|
"typescript": "^5.9.3",
|
|
76
|
-
"vite": "^7.
|
|
77
|
-
"vitest": "^4.0.
|
|
76
|
+
"vite": "^7.3.0",
|
|
77
|
+
"vitest": "^4.0.16",
|
|
78
78
|
"vitest-browser-svelte": "^2.0.1"
|
|
79
79
|
},
|
|
80
80
|
"keywords": [
|