@websline/system-components 1.3.17 → 1.3.18
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/SpacingL.svelte +37 -0
- package/dist/components/atoms/icon/components/SpacingL.svelte.d.ts +41 -0
- package/dist/components/atoms/icon/components/SpacingM.svelte +37 -0
- package/dist/components/atoms/icon/components/SpacingM.svelte.d.ts +41 -0
- package/dist/components/atoms/icon/components/SpacingNone.svelte +32 -0
- package/dist/components/atoms/icon/components/SpacingNone.svelte.d.ts +41 -0
- package/dist/components/atoms/icon/components/SpacingS.svelte +37 -0
- package/dist/components/atoms/icon/components/SpacingS.svelte.d.ts +41 -0
- package/dist/components/atoms/icon/components/SpacingXL.svelte +37 -0
- package/dist/components/atoms/icon/components/SpacingXL.svelte.d.ts +41 -0
- package/package.json +2 -2
|
@@ -0,0 +1,37 @@
|
|
|
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
|
+
{height}
|
|
16
|
+
{width}
|
|
17
|
+
viewBox="0 0 24 24"
|
|
18
|
+
fill="none"
|
|
19
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
20
|
+
{...rest}>
|
|
21
|
+
<path
|
|
22
|
+
d="M8.94849 7.99535L12.1225 5L15.3014 8M15.3014 16.0047L12.1274 19M12.1274 19L8.94849 16M12.1274 19V6.0046"
|
|
23
|
+
stroke={color}
|
|
24
|
+
stroke-width={strokeWidth}
|
|
25
|
+
stroke-linecap="round"
|
|
26
|
+
stroke-linejoin="round" />
|
|
27
|
+
<path
|
|
28
|
+
d="M21.125 22L12.125 22L3.125 22"
|
|
29
|
+
stroke={color}
|
|
30
|
+
stroke-width={strokeWidth}
|
|
31
|
+
stroke-linecap="round" />
|
|
32
|
+
<path
|
|
33
|
+
d="M21.125 2L12.125 2L3.125 2"
|
|
34
|
+
stroke={color}
|
|
35
|
+
stroke-width={strokeWidth}
|
|
36
|
+
stroke-linecap="round" />
|
|
37
|
+
</svg>
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
export default SpacingL;
|
|
2
|
+
type SpacingL = {
|
|
3
|
+
$on?(type: string, callback: (e: any) => void): () => void;
|
|
4
|
+
$set?(props: Partial<Props>): void;
|
|
5
|
+
};
|
|
6
|
+
declare const SpacingL: 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,37 @@
|
|
|
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
|
+
{height}
|
|
16
|
+
{width}
|
|
17
|
+
viewBox="0 0 24 24"
|
|
18
|
+
fill="none"
|
|
19
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
20
|
+
{...rest}>
|
|
21
|
+
<path
|
|
22
|
+
d="M9.69849 8.99535L12.8725 6L16.0514 9M16.0514 15.0047L12.8774 18M12.8774 18L9.69849 15M12.8774 18V6.0046"
|
|
23
|
+
stroke={color}
|
|
24
|
+
stroke-width={strokeWidth}
|
|
25
|
+
stroke-linecap="round"
|
|
26
|
+
stroke-linejoin="round" />
|
|
27
|
+
<path
|
|
28
|
+
d="M21.875 22L12.875 22L3.875 22"
|
|
29
|
+
stroke={color}
|
|
30
|
+
stroke-width={strokeWidth}
|
|
31
|
+
stroke-linecap="round" />
|
|
32
|
+
<path
|
|
33
|
+
d="M21.875 2L12.875 2L3.875 2"
|
|
34
|
+
stroke={color}
|
|
35
|
+
stroke-width={strokeWidth}
|
|
36
|
+
stroke-linecap="round" />
|
|
37
|
+
</svg>
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
export default SpacingM;
|
|
2
|
+
type SpacingM = {
|
|
3
|
+
$on?(type: string, callback: (e: any) => void): () => void;
|
|
4
|
+
$set?(props: Partial<Props>): void;
|
|
5
|
+
};
|
|
6
|
+
declare const SpacingM: 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,32 @@
|
|
|
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
|
+
{height}
|
|
16
|
+
{width}
|
|
17
|
+
viewBox="0 0 24 24"
|
|
18
|
+
fill="none"
|
|
19
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
20
|
+
{...rest}>
|
|
21
|
+
<path
|
|
22
|
+
d="M21 2L3 2M21 22H3"
|
|
23
|
+
stroke={color}
|
|
24
|
+
stroke-width={strokeWidth}
|
|
25
|
+
stroke-linecap="round" />
|
|
26
|
+
<path
|
|
27
|
+
d="M7.16066 7.83933C9.45854 5.16664 13.488 4.86279 16.1607 7.16067M7.16066 7.83933C4.86278 10.512 5.16662 14.5415 7.83932 16.8393M7.16066 7.83933C6.61428 8.47483 6.19841 9.21176 5.93682 10.008C5.67522 10.8042 5.57301 11.6442 5.63605 12.4799C5.69905 13.3156 5.92606 14.1308 6.3041 14.8787C6.68214 15.6267 7.20381 16.293 7.83932 16.8393M7.16066 7.83933C7.70704 7.20383 8.37328 6.68214 9.12127 6.3041C9.86927 5.92607 10.6844 5.69905 11.5201 5.63606C12.3558 5.57302 13.1958 5.67522 13.992 5.93682C14.7883 6.19843 15.5252 6.61429 16.1607 7.16067M16.1607 7.16067C18.8334 9.45855 19.1372 13.488 16.8393 16.1607C14.5415 18.8334 10.512 19.1372 7.83932 16.8393M16.1607 7.16067L7.83932 16.8393"
|
|
28
|
+
stroke={color}
|
|
29
|
+
stroke-width={strokeWidth}
|
|
30
|
+
stroke-linecap="round"
|
|
31
|
+
stroke-linejoin="round" />
|
|
32
|
+
</svg>
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
export default SpacingNone;
|
|
2
|
+
type SpacingNone = {
|
|
3
|
+
$on?(type: string, callback: (e: any) => void): () => void;
|
|
4
|
+
$set?(props: Partial<Props>): void;
|
|
5
|
+
};
|
|
6
|
+
declare const SpacingNone: 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,37 @@
|
|
|
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
|
+
{height}
|
|
16
|
+
{width}
|
|
17
|
+
viewBox="0 0 24 24"
|
|
18
|
+
fill="none"
|
|
19
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
20
|
+
{...rest}>
|
|
21
|
+
<path
|
|
22
|
+
d="M8.94849 9.99535L12.1225 7L15.3014 10M15.3014 14.0047L12.1274 17L8.94849 14M12.125 7.0023V16.9977"
|
|
23
|
+
stroke={color}
|
|
24
|
+
stroke-width={strokeWidth}
|
|
25
|
+
stroke-linecap="round"
|
|
26
|
+
stroke-linejoin="round" />
|
|
27
|
+
<path
|
|
28
|
+
d="M21.125 2L12.125 2L3.125 2"
|
|
29
|
+
stroke={color}
|
|
30
|
+
stroke-width={strokeWidth}
|
|
31
|
+
stroke-linecap="round" />
|
|
32
|
+
<path
|
|
33
|
+
d="M21.125 22L12.125 22L3.125 22"
|
|
34
|
+
stroke={color}
|
|
35
|
+
stroke-width={strokeWidth}
|
|
36
|
+
stroke-linecap="round" />
|
|
37
|
+
</svg>
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
export default SpacingS;
|
|
2
|
+
type SpacingS = {
|
|
3
|
+
$on?(type: string, callback: (e: any) => void): () => void;
|
|
4
|
+
$set?(props: Partial<Props>): void;
|
|
5
|
+
};
|
|
6
|
+
declare const SpacingS: 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,37 @@
|
|
|
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
|
+
{height}
|
|
16
|
+
{width}
|
|
17
|
+
viewBox="0 0 24 24"
|
|
18
|
+
fill="none"
|
|
19
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
20
|
+
{...rest}>
|
|
21
|
+
<path
|
|
22
|
+
d="M9.69849 6.99535L12.8725 4L16.0514 7M16.0514 17.0047L12.8774 20M12.8774 20L9.69849 17M12.8774 20V4.0046"
|
|
23
|
+
stroke={color}
|
|
24
|
+
stroke-width={strokeWidth}
|
|
25
|
+
stroke-linecap="round"
|
|
26
|
+
stroke-linejoin="round" />
|
|
27
|
+
<path
|
|
28
|
+
d="M21.875 2L12.875 2L3.875 2"
|
|
29
|
+
stroke={color}
|
|
30
|
+
stroke-width={strokeWidth}
|
|
31
|
+
stroke-linecap="round" />
|
|
32
|
+
<path
|
|
33
|
+
d="M21.875 22L12.875 22L3.875 22"
|
|
34
|
+
stroke={color}
|
|
35
|
+
stroke-width={strokeWidth}
|
|
36
|
+
stroke-linecap="round" />
|
|
37
|
+
</svg>
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
export default SpacingXL;
|
|
2
|
+
type SpacingXL = {
|
|
3
|
+
$on?(type: string, callback: (e: any) => void): () => void;
|
|
4
|
+
$set?(props: Partial<Props>): void;
|
|
5
|
+
};
|
|
6
|
+
declare const SpacingXL: 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
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@websline/system-components",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.18",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
"prettier-plugin-tailwindcss": "^0.7.2",
|
|
71
71
|
"publint": "^0.3.18",
|
|
72
72
|
"storybook": "^10.2.17",
|
|
73
|
-
"svelte": "^5.53.
|
|
73
|
+
"svelte": "^5.53.10",
|
|
74
74
|
"tailwindcss": "^4.2.1",
|
|
75
75
|
"typescript": "^5.9.3",
|
|
76
76
|
"vite": "^7.3.1",
|