@websline/system-components 1.2.2 → 1.2.3

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/components/atoms/input/Input.svelte +11 -8
  2. package/dist/components/atoms/input/input.variants.d.ts +12 -21
  3. package/dist/components/atoms/input/input.variants.js +5 -5
  4. package/dist/components/atoms/select/select.variants.d.ts +0 -12
  5. package/dist/components/atoms/select/select.variants.js +1 -1
  6. package/dist/components/atoms/textarea/textarea.variants.d.ts +0 -12
  7. package/dist/components/atoms/utils/xScroll/XScroll.svelte +6 -1
  8. package/dist/components/molecules/comboBox/comboBox.variants.d.ts +0 -14
  9. package/dist/components/molecules/comboBox/comboBox.variants.js +3 -5
  10. package/dist/components/molecules/tagSelector/TagSelector.svelte +3 -1
  11. package/dist/components/molecules/tagSelector/tagSelector.variants.d.ts +0 -12
  12. package/package.json +6 -6
package/dist/components/atoms/input/Input.svelte CHANGED
@@ -51,11 +51,18 @@
51
51
  required,
52
52
  };
53
53
  });
54
+
55
+ let styles = $derived(
56
+ inputVariants({
57
+ disabled: localValues.disabled,
58
+ error: localValues.error,
59
+ }),
60
+ );
54
61
  </script>
55
62
 
56
- <div class={inputVariants().iconWrapper()}>
63
+ <div class={styles.iconWrapper()}>
57
64
  {#if adornmentStart}
58
- <div class={inputVariants().adornmentStart()}>
65
+ <div class={styles.adornmentStart()}>
59
66
  {#if typeof adornmentStart === "function"}
60
67
  {@render adornmentStart()}
61
68
  {:else}
@@ -65,11 +72,7 @@
65
72
  {/if}
66
73
 
67
74
  <input
68
- class={inputVariants().base({
69
- class: className,
70
- disabled: localValues.disabled,
71
- error: localValues.error,
72
- })}
75
+ class={styles.base({ class: className })}
73
76
  disabled={localValues.disabled}
74
77
  id={localValues.id}
75
78
  {name}
@@ -81,7 +84,7 @@
81
84
  bind:value />
82
85
 
83
86
  {#if adornmentEnd}
84
- <div class={inputVariants().adornmentEnd()}>
87
+ <div class={styles.adornmentEnd()}>
85
88
  {#if typeof adornmentEnd === "function"}
86
89
  {@render adornmentEnd()}
87
90
  {:else}
package/dist/components/atoms/input/input.variants.d.ts CHANGED
@@ -13,9 +13,6 @@ export const inputBaseVariant: import("tailwind-variants").TVReturnType<{
13
13
  };
14
14
  };
15
15
  }, {
16
- iconWrapper: string;
17
- adornmentStart: string;
18
- adornmentEnd: string;
19
16
  base: string[];
20
17
  }, undefined, {
21
18
  disabled: {
@@ -29,9 +26,6 @@ export const inputBaseVariant: import("tailwind-variants").TVReturnType<{
29
26
  };
30
27
  };
31
28
  }, {
32
- iconWrapper: string;
33
- adornmentStart: string;
34
- adornmentEnd: string;
35
29
  base: string[];
36
30
  }, import("tailwind-variants").TVReturnType<{
37
31
  disabled: {
@@ -45,30 +39,39 @@ export const inputBaseVariant: import("tailwind-variants").TVReturnType<{
45
39
  };
46
40
  };
47
41
  }, {
48
- iconWrapper: string;
49
- adornmentStart: string;
50
- adornmentEnd: string;
51
42
  base: string[];
52
43
  }, undefined, unknown, unknown, undefined>>;
53
44
  export const inputVariants: import("tailwind-variants").TVReturnType<{
54
45
  [key: string]: {
55
46
  [key: string]: import("tailwind-variants").ClassValue | {
56
47
  base?: import("tailwind-variants").ClassValue;
48
+ adornmentStart?: import("tailwind-variants").ClassValue;
49
+ adornmentEnd?: import("tailwind-variants").ClassValue;
50
+ iconWrapper?: import("tailwind-variants").ClassValue;
57
51
  };
58
52
  };
59
53
  } | {
60
54
  disabled: {
61
55
  true: import("tailwind-variants").ClassValue | {
62
56
  base?: import("tailwind-variants").ClassValue;
57
+ adornmentStart?: import("tailwind-variants").ClassValue;
58
+ adornmentEnd?: import("tailwind-variants").ClassValue;
59
+ iconWrapper?: import("tailwind-variants").ClassValue;
63
60
  };
64
61
  };
65
62
  error: {
66
63
  true: import("tailwind-variants").ClassValue | {
67
64
  base?: import("tailwind-variants").ClassValue;
65
+ adornmentStart?: import("tailwind-variants").ClassValue;
66
+ adornmentEnd?: import("tailwind-variants").ClassValue;
67
+ iconWrapper?: import("tailwind-variants").ClassValue;
68
68
  };
69
69
  };
70
70
  }, {
71
+ adornmentStart: string;
72
+ adornmentEnd: string;
71
73
  base: string;
74
+ iconWrapper: string;
72
75
  }, undefined, {
73
76
  disabled: {
74
77
  true: {
@@ -81,9 +84,6 @@ export const inputVariants: import("tailwind-variants").TVReturnType<{
81
84
  };
82
85
  };
83
86
  }, {
84
- iconWrapper: string;
85
- adornmentStart: string;
86
- adornmentEnd: string;
87
87
  base: string[];
88
88
  }, import("tailwind-variants").TVReturnType<{
89
89
  disabled: {
@@ -97,9 +97,6 @@ export const inputVariants: import("tailwind-variants").TVReturnType<{
97
97
  };
98
98
  };
99
99
  }, {
100
- iconWrapper: string;
101
- adornmentStart: string;
102
- adornmentEnd: string;
103
100
  base: string[];
104
101
  }, undefined, {
105
102
  disabled: {
@@ -113,9 +110,6 @@ export const inputVariants: import("tailwind-variants").TVReturnType<{
113
110
  };
114
111
  };
115
112
  }, {
116
- iconWrapper: string;
117
- adornmentStart: string;
118
- adornmentEnd: string;
119
113
  base: string[];
120
114
  }, import("tailwind-variants").TVReturnType<{
121
115
  disabled: {
@@ -129,8 +123,5 @@ export const inputVariants: import("tailwind-variants").TVReturnType<{
129
123
  };
130
124
  };
131
125
  }, {
132
- iconWrapper: string;
133
- adornmentStart: string;
134
- adornmentEnd: string;
135
126
  base: string[];
136
127
  }, undefined, unknown, unknown, undefined>>>;
package/dist/components/atoms/input/input.variants.js CHANGED
@@ -5,11 +5,6 @@ import { tv } from "tailwind-variants";
5
5
  */
6
6
  const inputBaseVariant = tv({
7
7
  slots: {
8
- iconWrapper: "relative",
9
- adornmentStart:
10
- "pointer-events-none absolute top-1/2 left-4 -translate-y-1/2 body-small text-neutral-900 dark:text-neutral-200",
11
- adornmentEnd:
12
- "pointer-events-none absolute top-1/2 right-4 -translate-y-1/2 body-small text-neutral-900 dark:text-neutral-200",
13
8
  base: [
14
9
  "w-full rounded-lg px-4 body-small",
15
10
  "text-neutral-900 placeholder-neutral-500 dark:text-neutral-200",
@@ -53,7 +48,12 @@ const inputBaseVariant = tv({
53
48
  const inputVariants = tv({
54
49
  extend: inputBaseVariant,
55
50
  slots: {
51
+ adornmentStart:
52
+ "pointer-events-none absolute top-1/2 left-4 -translate-y-1/2 body-small text-neutral-900 dark:text-neutral-200",
53
+ adornmentEnd:
54
+ "pointer-events-none absolute top-1/2 right-4 -translate-y-1/2 body-small text-neutral-900 dark:text-neutral-200",
56
55
  base: "h-10",
56
+ iconWrapper: "relative",
57
57
  },
58
58
  });
59
59
 
package/dist/components/atoms/select/select.variants.d.ts CHANGED
@@ -30,9 +30,6 @@ export const selectVariants: import("tailwind-variants").TVReturnType<{
30
30
  };
31
31
  };
32
32
  }, {
33
- iconWrapper: string;
34
- adornmentStart: string;
35
- adornmentEnd: string;
36
33
  base: string[];
37
34
  }, import("tailwind-variants").TVReturnType<{
38
35
  disabled: {
@@ -46,9 +43,6 @@ export const selectVariants: import("tailwind-variants").TVReturnType<{
46
43
  };
47
44
  };
48
45
  }, {
49
- iconWrapper: string;
50
- adornmentStart: string;
51
- adornmentEnd: string;
52
46
  base: string[];
53
47
  }, undefined, {
54
48
  disabled: {
@@ -62,9 +56,6 @@ export const selectVariants: import("tailwind-variants").TVReturnType<{
62
56
  };
63
57
  };
64
58
  }, {
65
- iconWrapper: string;
66
- adornmentStart: string;
67
- adornmentEnd: string;
68
59
  base: string[];
69
60
  }, import("tailwind-variants").TVReturnType<{
70
61
  disabled: {
@@ -78,8 +69,5 @@ export const selectVariants: import("tailwind-variants").TVReturnType<{
78
69
  };
79
70
  };
80
71
  }, {
81
- iconWrapper: string;
82
- adornmentStart: string;
83
- adornmentEnd: string;
84
72
  base: string[];
85
73
  }, undefined, unknown, unknown, undefined>>>;
package/dist/components/atoms/select/select.variants.js CHANGED
@@ -34,7 +34,7 @@ const selectVariants = tv({
34
34
  },
35
35
  variant: {
36
36
  default: {
37
- base: "min-h-10 border border-neutral-500 pr-2 pl-4",
37
+ base: "min-h-10 border border-neutral-300 pr-2 pl-4",
38
38
  },
39
39
  button: {
40
40
  base: "gap-0.5 border-none bg-white pr-1 pl-2 leading-5 ring-transparent! dark:bg-neutral-800",
package/dist/components/atoms/textarea/textarea.variants.d.ts CHANGED
@@ -18,9 +18,6 @@ export const textareaVariants: import("tailwind-variants").TVReturnType<{
18
18
  };
19
19
  };
20
20
  }, {
21
- iconWrapper: string;
22
- adornmentStart: string;
23
- adornmentEnd: string;
24
21
  base: string[];
25
22
  }, import("tailwind-variants").TVReturnType<{
26
23
  disabled: {
@@ -34,9 +31,6 @@ export const textareaVariants: import("tailwind-variants").TVReturnType<{
34
31
  };
35
32
  };
36
33
  }, {
37
- iconWrapper: string;
38
- adornmentStart: string;
39
- adornmentEnd: string;
40
34
  base: string[];
41
35
  }, undefined, {
42
36
  disabled: {
@@ -50,9 +44,6 @@ export const textareaVariants: import("tailwind-variants").TVReturnType<{
50
44
  };
51
45
  };
52
46
  }, {
53
- iconWrapper: string;
54
- adornmentStart: string;
55
- adornmentEnd: string;
56
47
  base: string[];
57
48
  }, import("tailwind-variants").TVReturnType<{
58
49
  disabled: {
@@ -66,8 +57,5 @@ export const textareaVariants: import("tailwind-variants").TVReturnType<{
66
57
  };
67
58
  };
68
59
  }, {
69
- iconWrapper: string;
70
- adornmentStart: string;
71
- adornmentEnd: string;
72
60
  base: string[];
73
61
  }, undefined, unknown, unknown, undefined>>>;
package/dist/components/atoms/utils/xScroll/XScroll.svelte CHANGED
@@ -1,5 +1,6 @@
1
1
  <script>
2
2
  import { onMount } from "svelte";
3
+ import { on } from "svelte/events";
3
4
  import { xScrollVariants } from "./xScroll.variants.js";
4
5
 
5
6
  /**
@@ -12,6 +13,7 @@
12
13
  let { children, class: className = "", ...rest } = $props();
13
14
 
14
15
  let ro;
16
+ let offWheel;
15
17
  let scroller = $state();
16
18
  let edgeStart = $state(true);
17
19
  let edgeEnd = $state(false);
@@ -41,10 +43,14 @@
41
43
  });
42
44
 
43
45
  ro.observe(scroller);
46
+
47
+ // can't be passive as the vertical scroll needs to be prevented
48
+ offWheel = on(scroller, "wheel", onwheel, { passive: false });
44
49
  }
45
50
 
46
51
  return () => {
47
52
  ro?.disconnect();
53
+ offWheel?.();
48
54
  };
49
55
  });
50
56
  </script>
@@ -55,7 +61,6 @@
55
61
  {/if}
56
62
  <div
57
63
  class={styles.scroller()}
58
- {onwheel}
59
64
  onscrollend={(e) => updateEdges(e.target)}
60
65
  bind:this={scroller}>
61
66
  <div class={styles.inner()}>{@render children?.()}</div>
package/dist/components/molecules/comboBox/comboBox.variants.d.ts CHANGED
@@ -23,8 +23,6 @@ export const comboBoxVariants: import("tailwind-variants").TVReturnType<{
23
23
  }, {
24
24
  base: string;
25
25
  value: string;
26
- item: string;
27
- searchField: string;
28
26
  searchInput: string;
29
27
  dropdown: string;
30
28
  dropdownCheckmark: string;
@@ -41,9 +39,6 @@ export const comboBoxVariants: import("tailwind-variants").TVReturnType<{
41
39
  };
42
40
  };
43
41
  }, {
44
- iconWrapper: string;
45
- adornmentStart: string;
46
- adornmentEnd: string;
47
42
  base: string[];
48
43
  }, import("tailwind-variants").TVReturnType<{
49
44
  disabled: {
@@ -57,9 +52,6 @@ export const comboBoxVariants: import("tailwind-variants").TVReturnType<{
57
52
  };
58
53
  };
59
54
  }, {
60
- iconWrapper: string;
61
- adornmentStart: string;
62
- adornmentEnd: string;
63
55
  base: string[];
64
56
  }, undefined, {
65
57
  disabled: {
@@ -73,9 +65,6 @@ export const comboBoxVariants: import("tailwind-variants").TVReturnType<{
73
65
  };
74
66
  };
75
67
  }, {
76
- iconWrapper: string;
77
- adornmentStart: string;
78
- adornmentEnd: string;
79
68
  base: string[];
80
69
  }, import("tailwind-variants").TVReturnType<{
81
70
  disabled: {
@@ -89,8 +78,5 @@ export const comboBoxVariants: import("tailwind-variants").TVReturnType<{
89
78
  };
90
79
  };
91
80
  }, {
92
- iconWrapper: string;
93
- adornmentStart: string;
94
- adornmentEnd: string;
95
81
  base: string[];
96
82
  }, undefined, unknown, unknown, undefined>>>;
package/dist/components/molecules/comboBox/comboBox.variants.js CHANGED
@@ -4,12 +4,10 @@ import { inputBaseVariant } from "../../atoms/input/input.variants.js";
4
4
  const comboBoxVariants = tv({
5
5
  extend: inputBaseVariant,
6
6
  slots: {
7
- base: "relative min-h-10 p-1",
8
- value: "flex flex-wrap gap-1",
9
- item: "h-7.5",
10
- searchField: "relative h-7.5 w-30",
7
+ base: "relative p-1",
8
+ value: "",
11
9
  searchInput:
12
- "w-full appearance-none border-0 bg-transparent ui-tag-badge placeholder-current focus:ring-0",
10
+ "h-7.5 w-full appearance-none border-0 bg-transparent py-0 body-small placeholder-neutral-500 focus:ring-0",
13
11
  dropdown:
14
12
  "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",
15
13
  dropdownCheckmark: "ml-auto shrink-0",
package/dist/components/molecules/tagSelector/TagSelector.svelte CHANGED
@@ -213,8 +213,10 @@
213
213
  : {}}
214
214
  {...rest}>
215
215
  {#if name}
216
+ <input type="hidden" {name} value="" disabled={value.length > 0} />
217
+
216
218
  {#each value as tag (tag)}
217
- <input type="hidden" name={`${name}[]`} value={tag} readonly />
219
+ <input type="hidden" name={`${name}[]`} value={tag} />
218
220
  {/each}
219
221
  {/if}
220
222
  <ValueList
package/dist/components/molecules/tagSelector/tagSelector.variants.d.ts CHANGED
@@ -36,9 +36,6 @@ export const tagSelectorVariants: import("tailwind-variants").TVReturnType<{
36
36
  };
37
37
  };
38
38
  }, {
39
- iconWrapper: string;
40
- adornmentStart: string;
41
- adornmentEnd: string;
42
39
  base: string[];
43
40
  }, import("tailwind-variants").TVReturnType<{
44
41
  disabled: {
@@ -52,9 +49,6 @@ export const tagSelectorVariants: import("tailwind-variants").TVReturnType<{
52
49
  };
53
50
  };
54
51
  }, {
55
- iconWrapper: string;
56
- adornmentStart: string;
57
- adornmentEnd: string;
58
52
  base: string[];
59
53
  }, undefined, {
60
54
  disabled: {
@@ -68,9 +62,6 @@ export const tagSelectorVariants: import("tailwind-variants").TVReturnType<{
68
62
  };
69
63
  };
70
64
  }, {
71
- iconWrapper: string;
72
- adornmentStart: string;
73
- adornmentEnd: string;
74
65
  base: string[];
75
66
  }, import("tailwind-variants").TVReturnType<{
76
67
  disabled: {
@@ -84,8 +75,5 @@ export const tagSelectorVariants: import("tailwind-variants").TVReturnType<{
84
75
  };
85
76
  };
86
77
  }, {
87
- iconWrapper: string;
88
- adornmentStart: string;
89
- adornmentEnd: string;
90
78
  base: string[];
91
79
  }, undefined, unknown, unknown, undefined>>>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@websline/system-components",
3
- "version": "1.2.2",
3
+ "version": "1.2.3",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -45,10 +45,10 @@
45
45
  "devDependencies": {
46
46
  "@eslint/compat": "^2.0.0",
47
47
  "@eslint/js": "^9.39.2",
48
- "@storybook/addon-a11y": "^10.1.10",
49
- "@storybook/addon-docs": "^10.1.10",
48
+ "@storybook/addon-a11y": "^10.1.11",
49
+ "@storybook/addon-docs": "^10.1.11",
50
50
  "@storybook/addon-svelte-csf": "^5.0.10",
51
- "@storybook/sveltekit": "^10.1.10",
51
+ "@storybook/sveltekit": "^10.1.11",
52
52
  "@sveltejs/adapter-auto": "^7.0.0",
53
53
  "@sveltejs/kit": "^2.49.2",
54
54
  "@sveltejs/package": "^2.5.7",
@@ -60,7 +60,7 @@
60
60
  "@vitest/browser": "^4.0.16",
61
61
  "eslint": "^9.39.2",
62
62
  "eslint-config-prettier": "^10.1.8",
63
- "eslint-plugin-storybook": "^10.1.10",
63
+ "eslint-plugin-storybook": "^10.1.11",
64
64
  "eslint-plugin-svelte": "^3.13.1",
65
65
  "globals": "^16.5.0",
66
66
  "playwright": "^1.57.0",
@@ -69,7 +69,7 @@
69
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.10",
72
+ "storybook": "^10.1.11",
73
73
  "svelte": "^5.46.1",
74
74
  "tailwindcss": "^4.1.18",
75
75
  "typescript": "^5.9.3",