@websline/system-components 1.2.9 → 1.3.0
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/icon/components/ArrowDown.svelte +22 -0
- package/dist/components/atoms/icon/components/ArrowDown.svelte.d.ts +41 -0
- package/dist/components/atoms/icon/components/ArrowUp.svelte +22 -0
- package/dist/components/atoms/icon/components/ArrowUp.svelte.d.ts +41 -0
- package/dist/components/atoms/icon/index.d.ts +36 -0
- package/dist/components/atoms/icon/index.js +4 -0
- package/dist/components/atoms/input/input.variants.d.ts +2 -22
- package/dist/components/atoms/input/input.variants.js +5 -0
- package/dist/components/molecules/comboBox/comboBox.variants.js +1 -1
- package/dist/components/molecules/selectorCard/SelectorCard.svelte +10 -4
- package/dist/components/molecules/tagSelector/tagSelector.variants.js +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
/**
|
|
3
|
+
* @typedef {Object} Props
|
|
4
|
+
* @property {string} [color=""] Icon color
|
|
5
|
+
* @property {number} [height=24] Icon height
|
|
6
|
+
* @property {number} [strokeWidth=24] Icon StrokeWidth
|
|
7
|
+
* @property {number} [width=24] Icon width
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
/** @type {Props} */
|
|
11
|
+
let { color, height, width, strokeWidth, ...rest } = $props();
|
|
12
|
+
</script>
|
|
13
|
+
|
|
14
|
+
<svg
|
|
15
|
+
{width}
|
|
16
|
+
{height}
|
|
17
|
+
viewBox="0 0 24 24"
|
|
18
|
+
fill="none"
|
|
19
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
20
|
+
{...rest}>
|
|
21
|
+
<path d="M12,20V4 M12,20l6-5.3 M12,20l-6-5.3" stroke={color} stroke-width={strokeWidth} stroke-linecap="round" stroke-linejoin="round"/>
|
|
22
|
+
</svg>
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
export default ArrowDown;
|
|
2
|
+
type ArrowDown = {
|
|
3
|
+
$on?(type: string, callback: (e: any) => void): () => void;
|
|
4
|
+
$set?(props: Partial<Props>): void;
|
|
5
|
+
};
|
|
6
|
+
declare const ArrowDown: import("svelte").Component<{
|
|
7
|
+
/**
|
|
8
|
+
* Icon color
|
|
9
|
+
*/
|
|
10
|
+
color?: string;
|
|
11
|
+
/**
|
|
12
|
+
* Icon height
|
|
13
|
+
*/
|
|
14
|
+
height?: number;
|
|
15
|
+
/**
|
|
16
|
+
* Icon StrokeWidth
|
|
17
|
+
*/
|
|
18
|
+
strokeWidth?: number;
|
|
19
|
+
/**
|
|
20
|
+
* Icon width
|
|
21
|
+
*/
|
|
22
|
+
width?: number;
|
|
23
|
+
}, {}, "">;
|
|
24
|
+
type Props = {
|
|
25
|
+
/**
|
|
26
|
+
* Icon color
|
|
27
|
+
*/
|
|
28
|
+
color?: string;
|
|
29
|
+
/**
|
|
30
|
+
* Icon height
|
|
31
|
+
*/
|
|
32
|
+
height?: number;
|
|
33
|
+
/**
|
|
34
|
+
* Icon StrokeWidth
|
|
35
|
+
*/
|
|
36
|
+
strokeWidth?: number;
|
|
37
|
+
/**
|
|
38
|
+
* Icon width
|
|
39
|
+
*/
|
|
40
|
+
width?: number;
|
|
41
|
+
};
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
/**
|
|
3
|
+
* @typedef {Object} Props
|
|
4
|
+
* @property {string} [color=""] Icon color
|
|
5
|
+
* @property {number} [height=24] Icon height
|
|
6
|
+
* @property {number} [strokeWidth=24] Icon StrokeWidth
|
|
7
|
+
* @property {number} [width=24] Icon width
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
/** @type {Props} */
|
|
11
|
+
let { color, height, width, strokeWidth, ...rest } = $props();
|
|
12
|
+
</script>
|
|
13
|
+
|
|
14
|
+
<svg
|
|
15
|
+
{width}
|
|
16
|
+
{height}
|
|
17
|
+
viewBox="0 0 24 24"
|
|
18
|
+
fill="none"
|
|
19
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
20
|
+
{...rest}>
|
|
21
|
+
<path d="M12,4v16 M12,4L6,9.3 M12,4l6,5.3" stroke={color} stroke-width={strokeWidth} stroke-linecap="round" stroke-linejoin="round"/>
|
|
22
|
+
</svg>
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
export default ArrowUp;
|
|
2
|
+
type ArrowUp = {
|
|
3
|
+
$on?(type: string, callback: (e: any) => void): () => void;
|
|
4
|
+
$set?(props: Partial<Props>): void;
|
|
5
|
+
};
|
|
6
|
+
declare const ArrowUp: import("svelte").Component<{
|
|
7
|
+
/**
|
|
8
|
+
* Icon color
|
|
9
|
+
*/
|
|
10
|
+
color?: string;
|
|
11
|
+
/**
|
|
12
|
+
* Icon height
|
|
13
|
+
*/
|
|
14
|
+
height?: number;
|
|
15
|
+
/**
|
|
16
|
+
* Icon StrokeWidth
|
|
17
|
+
*/
|
|
18
|
+
strokeWidth?: number;
|
|
19
|
+
/**
|
|
20
|
+
* Icon width
|
|
21
|
+
*/
|
|
22
|
+
width?: number;
|
|
23
|
+
}, {}, "">;
|
|
24
|
+
type Props = {
|
|
25
|
+
/**
|
|
26
|
+
* Icon color
|
|
27
|
+
*/
|
|
28
|
+
color?: string;
|
|
29
|
+
/**
|
|
30
|
+
* Icon height
|
|
31
|
+
*/
|
|
32
|
+
height?: number;
|
|
33
|
+
/**
|
|
34
|
+
* Icon StrokeWidth
|
|
35
|
+
*/
|
|
36
|
+
strokeWidth?: number;
|
|
37
|
+
/**
|
|
38
|
+
* Icon width
|
|
39
|
+
*/
|
|
40
|
+
width?: number;
|
|
41
|
+
};
|
|
@@ -53,6 +53,42 @@ export const registry: {
|
|
|
53
53
|
*/
|
|
54
54
|
width?: number;
|
|
55
55
|
}, {}, "">;
|
|
56
|
+
arrowDown: import("svelte").Component<{
|
|
57
|
+
/**
|
|
58
|
+
* Icon color
|
|
59
|
+
*/
|
|
60
|
+
color?: string;
|
|
61
|
+
/**
|
|
62
|
+
* Icon height
|
|
63
|
+
*/
|
|
64
|
+
height?: number;
|
|
65
|
+
/**
|
|
66
|
+
* Icon StrokeWidth
|
|
67
|
+
*/
|
|
68
|
+
strokeWidth?: number;
|
|
69
|
+
/**
|
|
70
|
+
* Icon width
|
|
71
|
+
*/
|
|
72
|
+
width?: number;
|
|
73
|
+
}, {}, "">;
|
|
74
|
+
arrowUp: import("svelte").Component<{
|
|
75
|
+
/**
|
|
76
|
+
* Icon color
|
|
77
|
+
*/
|
|
78
|
+
color?: string;
|
|
79
|
+
/**
|
|
80
|
+
* Icon height
|
|
81
|
+
*/
|
|
82
|
+
height?: number;
|
|
83
|
+
/**
|
|
84
|
+
* Icon StrokeWidth
|
|
85
|
+
*/
|
|
86
|
+
strokeWidth?: number;
|
|
87
|
+
/**
|
|
88
|
+
* Icon width
|
|
89
|
+
*/
|
|
90
|
+
width?: number;
|
|
91
|
+
}, {}, "">;
|
|
56
92
|
attach: import("svelte").Component<{
|
|
57
93
|
/**
|
|
58
94
|
* Icon color
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import Academy from "./components/Academy.svelte";
|
|
2
2
|
import Add from "./components/Add.svelte";
|
|
3
3
|
import Ai from "./components/Ai.svelte";
|
|
4
|
+
import ArrowDown from "./components/ArrowDown.svelte";
|
|
5
|
+
import ArrowUp from "./components/ArrowUp.svelte";
|
|
4
6
|
import Attach from "./components/Attach.svelte";
|
|
5
7
|
import Block from "./components/Block.svelte";
|
|
6
8
|
import Bold from "./components/Bold.svelte";
|
|
@@ -43,6 +45,8 @@ export const registry = {
|
|
|
43
45
|
academy: Academy,
|
|
44
46
|
add: Add,
|
|
45
47
|
ai: Ai,
|
|
48
|
+
arrowDown: ArrowDown,
|
|
49
|
+
arrowUp: ArrowUp,
|
|
46
50
|
attach: Attach,
|
|
47
51
|
block: Block,
|
|
48
52
|
bold: Bold,
|
|
@@ -1,27 +1,7 @@
|
|
|
1
1
|
export const inputVariants: import("tailwind-variants").TVReturnType<{
|
|
2
|
-
[key: string]: {
|
|
3
|
-
[key: string]: import("tailwind-variants").ClassValue | {
|
|
4
|
-
base?: import("tailwind-variants").ClassValue;
|
|
5
|
-
input?: import("tailwind-variants").ClassValue;
|
|
6
|
-
adornmentStart?: import("tailwind-variants").ClassValue;
|
|
7
|
-
adornmentEnd?: import("tailwind-variants").ClassValue;
|
|
8
|
-
};
|
|
9
|
-
};
|
|
10
|
-
} | {
|
|
11
2
|
disabled: {
|
|
12
|
-
true:
|
|
13
|
-
|
|
14
|
-
input?: import("tailwind-variants").ClassValue;
|
|
15
|
-
adornmentStart?: import("tailwind-variants").ClassValue;
|
|
16
|
-
adornmentEnd?: import("tailwind-variants").ClassValue;
|
|
17
|
-
};
|
|
18
|
-
};
|
|
19
|
-
error: {
|
|
20
|
-
true: import("tailwind-variants").ClassValue | {
|
|
21
|
-
base?: import("tailwind-variants").ClassValue;
|
|
22
|
-
input?: import("tailwind-variants").ClassValue;
|
|
23
|
-
adornmentStart?: import("tailwind-variants").ClassValue;
|
|
24
|
-
adornmentEnd?: import("tailwind-variants").ClassValue;
|
|
3
|
+
true: {
|
|
4
|
+
input: string;
|
|
25
5
|
};
|
|
26
6
|
};
|
|
27
7
|
}, {
|
|
@@ -11,6 +11,11 @@ const inputVariants = tv({
|
|
|
11
11
|
input:
|
|
12
12
|
"h-full w-full border-0 bg-transparent p-0 [font-size:inherit] leading-[inherit] focus:shadow-none focus:ring-0 focus:outline-0",
|
|
13
13
|
},
|
|
14
|
+
variants: {
|
|
15
|
+
disabled: {
|
|
16
|
+
true: { input: "cursor-not-allowed" },
|
|
17
|
+
},
|
|
18
|
+
},
|
|
14
19
|
});
|
|
15
20
|
|
|
16
21
|
export { inputVariants };
|
|
@@ -8,7 +8,7 @@ const comboBoxVariants = tv({
|
|
|
8
8
|
searchInput:
|
|
9
9
|
"h-7.5 w-full appearance-none border-0 bg-transparent py-0 body-small placeholder-neutral-500 focus:ring-0",
|
|
10
10
|
dropdown:
|
|
11
|
-
"absolute w-full max-w-100 overflow-y-auto bg-white p-1 pr-5 shadow-sm dark:border-neutral-700 dark:bg-neutral-800",
|
|
11
|
+
"absolute z-1 w-full max-w-100 overflow-y-auto bg-white p-1 pr-5 shadow-sm dark:border-neutral-700 dark:bg-neutral-800",
|
|
12
12
|
dropdownCheckmark: "ml-auto shrink-0",
|
|
13
13
|
dropdownItem: [
|
|
14
14
|
"flex w-full grow items-center gap-2 rounded-sm p-2 ui-select-label",
|
|
@@ -35,7 +35,15 @@
|
|
|
35
35
|
...rest
|
|
36
36
|
} = $props();
|
|
37
37
|
|
|
38
|
-
let inputProps = $derived({
|
|
38
|
+
let inputProps = $derived({
|
|
39
|
+
disabled,
|
|
40
|
+
id,
|
|
41
|
+
name,
|
|
42
|
+
required,
|
|
43
|
+
value,
|
|
44
|
+
// prevent input click from colliding with card clicks
|
|
45
|
+
onclick: (e) => e.stopPropagation(),
|
|
46
|
+
});
|
|
39
47
|
let styles = $derived(selectorCardVariants({ checked, disabled, error, type }));
|
|
40
48
|
|
|
41
49
|
let localHelperText = $derived.by(() => {
|
|
@@ -47,17 +55,15 @@
|
|
|
47
55
|
});
|
|
48
56
|
|
|
49
57
|
let handleClick = () => {
|
|
50
|
-
if (disabled) return;
|
|
51
58
|
if (type === "radio" && checked) return;
|
|
52
|
-
|
|
53
59
|
checked = !checked;
|
|
54
60
|
};
|
|
55
61
|
</script>
|
|
56
62
|
|
|
57
63
|
<div
|
|
58
|
-
aria-disabled={disabled}
|
|
59
64
|
class={styles.base({ class: className })}
|
|
60
65
|
onclick={handleClick}
|
|
66
|
+
inert={disabled}
|
|
61
67
|
{...rest}>
|
|
62
68
|
{#if type === "radio"}
|
|
63
69
|
<Radio bind:checked class={styles.input()} {...inputProps} />
|
|
@@ -10,7 +10,7 @@ const tagSelectorVariants = tv({
|
|
|
10
10
|
searchInput:
|
|
11
11
|
"absolute inset-0 appearance-none border-0 bg-transparent pr-1 pl-8 ui-tag-badge placeholder-current focus:ring-0",
|
|
12
12
|
dropdown:
|
|
13
|
-
"absolute w-full max-w-100 overflow-y-auto bg-white p-1 pr-5 shadow-sm dark:border-neutral-700 dark:bg-neutral-800",
|
|
13
|
+
"absolute z-1 w-full max-w-100 overflow-y-auto bg-white p-1 pr-5 shadow-sm dark:border-neutral-700 dark:bg-neutral-800",
|
|
14
14
|
dropdownCheckmark: "ml-auto shrink-0",
|
|
15
15
|
dropdownItem: [
|
|
16
16
|
"flex w-full grow items-center gap-2 rounded-sm p-2 ui-select-label",
|