@websline/system-components 1.1.0 → 1.2.1

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 (9) hide show
  1. package/dist/components/atoms/input/Input.svelte +41 -15
  2. package/dist/components/atoms/input/Input.svelte.d.ts +16 -0
  3. package/dist/components/atoms/input/input.variants.d.ts +21 -0
  4. package/dist/components/atoms/input/input.variants.js +5 -0
  5. package/dist/components/atoms/select/select.variants.d.ts +12 -0
  6. package/dist/components/atoms/textarea/textarea.variants.d.ts +12 -0
  7. package/dist/components/molecules/comboBox/comboBox.variants.d.ts +12 -0
  8. package/dist/components/molecules/tagSelector/tagSelector.variants.d.ts +12 -0
  9. package/package.json +1 -1
package/dist/components/atoms/input/Input.svelte CHANGED
@@ -4,6 +4,8 @@
4
4
 
5
5
  /**
6
6
  * @typedef {Object} Props
7
+ * @property {string|import("svelte").SvelteComponent|Function} [adornmentStart=""] Content to display at the start of the input (e.g., icon or text)
8
+ * @property {string|import("svelte").SvelteComponent|Function} [adornmentEnd=""] Content to display at the end of the input (e.g., icon or text)
7
9
  * @property {string} [class=""] Additional CSS classes to apply to the component
8
10
  * @property {boolean} [disabled=false] Whether the input is disabled
9
11
  * @property {boolean} [error=false] Whether the input has an error state
@@ -18,6 +20,8 @@
18
20
 
19
21
  /** @type {Props} */
20
22
  let {
23
+ adornmentStart = "",
24
+ adornmentEnd = "",
21
25
  class: className = "",
22
26
  disabled = false,
23
27
  error = false,
@@ -49,18 +53,40 @@
49
53
  });
50
54
  </script>
51
55
 
52
- <input
53
- class={inputVariants().base({
54
- class: className,
55
- disabled: localValues.disabled,
56
- error: localValues.error,
57
- })}
58
- disabled={localValues.disabled}
59
- id={localValues.id}
60
- {name}
61
- {placeholder}
62
- {readonly}
63
- required={localValues.required}
64
- {type}
65
- {...rest}
66
- bind:value />
56
+ <div class={inputVariants().iconWrapper()}>
57
+ {#if adornmentStart}
58
+ <div class={inputVariants().adornmentStart()}>
59
+ {#if typeof adornmentStart === "function"}
60
+ {@render adornmentStart()}
61
+ {:else}
62
+ {adornmentStart}
63
+ {/if}
64
+ </div>
65
+ {/if}
66
+
67
+ <input
68
+ class={inputVariants().base({
69
+ class: className,
70
+ disabled: localValues.disabled,
71
+ error: localValues.error,
72
+ })}
73
+ disabled={localValues.disabled}
74
+ id={localValues.id}
75
+ {name}
76
+ {placeholder}
77
+ {readonly}
78
+ required={localValues.required}
79
+ {type}
80
+ {...rest}
81
+ bind:value />
82
+
83
+ {#if adornmentEnd}
84
+ <div class={inputVariants().adornmentEnd()}>
85
+ {#if typeof adornmentEnd === "function"}
86
+ {@render adornmentEnd()}
87
+ {:else}
88
+ {adornmentEnd}
89
+ {/if}
90
+ </div>
91
+ {/if}
92
+ </div>
package/dist/components/atoms/input/Input.svelte.d.ts CHANGED
@@ -4,6 +4,14 @@ type Input = {
4
4
  $set?(props: Partial<Props>): void;
5
5
  };
6
6
  declare const Input: import("svelte").Component<{
7
+ /**
8
+ * Content to display at the start of the input (e.g., icon or text)
9
+ */
10
+ adornmentStart?: string | import("svelte").SvelteComponent | Function;
11
+ /**
12
+ * Content to display at the end of the input (e.g., icon or text)
13
+ */
14
+ adornmentEnd?: string | import("svelte").SvelteComponent | Function;
7
15
  /**
8
16
  * Additional CSS classes to apply to the component
9
17
  */
@@ -46,6 +54,14 @@ declare const Input: import("svelte").Component<{
46
54
  value?: string;
47
55
  }, {}, "value">;
48
56
  type Props = {
57
+ /**
58
+ * Content to display at the start of the input (e.g., icon or text)
59
+ */
60
+ adornmentStart?: string | import("svelte").SvelteComponent | Function;
61
+ /**
62
+ * Content to display at the end of the input (e.g., icon or text)
63
+ */
64
+ adornmentEnd?: string | import("svelte").SvelteComponent | Function;
49
65
  /**
50
66
  * Additional CSS classes to apply to the component
51
67
  */
package/dist/components/atoms/input/input.variants.d.ts CHANGED
@@ -13,6 +13,9 @@ export const inputBaseVariant: import("tailwind-variants").TVReturnType<{
13
13
  };
14
14
  };
15
15
  }, {
16
+ iconWrapper: string;
17
+ adornmentStart: string;
18
+ adornmentEnd: string;
16
19
  base: string[];
17
20
  }, undefined, {
18
21
  disabled: {
@@ -26,6 +29,9 @@ export const inputBaseVariant: import("tailwind-variants").TVReturnType<{
26
29
  };
27
30
  };
28
31
  }, {
32
+ iconWrapper: string;
33
+ adornmentStart: string;
34
+ adornmentEnd: string;
29
35
  base: string[];
30
36
  }, import("tailwind-variants").TVReturnType<{
31
37
  disabled: {
@@ -39,6 +45,9 @@ export const inputBaseVariant: import("tailwind-variants").TVReturnType<{
39
45
  };
40
46
  };
41
47
  }, {
48
+ iconWrapper: string;
49
+ adornmentStart: string;
50
+ adornmentEnd: string;
42
51
  base: string[];
43
52
  }, undefined, unknown, unknown, undefined>>;
44
53
  export const inputVariants: import("tailwind-variants").TVReturnType<{
@@ -72,6 +81,9 @@ export const inputVariants: import("tailwind-variants").TVReturnType<{
72
81
  };
73
82
  };
74
83
  }, {
84
+ iconWrapper: string;
85
+ adornmentStart: string;
86
+ adornmentEnd: string;
75
87
  base: string[];
76
88
  }, import("tailwind-variants").TVReturnType<{
77
89
  disabled: {
@@ -85,6 +97,9 @@ export const inputVariants: import("tailwind-variants").TVReturnType<{
85
97
  };
86
98
  };
87
99
  }, {
100
+ iconWrapper: string;
101
+ adornmentStart: string;
102
+ adornmentEnd: string;
88
103
  base: string[];
89
104
  }, undefined, {
90
105
  disabled: {
@@ -98,6 +113,9 @@ export const inputVariants: import("tailwind-variants").TVReturnType<{
98
113
  };
99
114
  };
100
115
  }, {
116
+ iconWrapper: string;
117
+ adornmentStart: string;
118
+ adornmentEnd: string;
101
119
  base: string[];
102
120
  }, import("tailwind-variants").TVReturnType<{
103
121
  disabled: {
@@ -111,5 +129,8 @@ export const inputVariants: import("tailwind-variants").TVReturnType<{
111
129
  };
112
130
  };
113
131
  }, {
132
+ iconWrapper: string;
133
+ adornmentStart: string;
134
+ adornmentEnd: string;
114
135
  base: string[];
115
136
  }, undefined, unknown, unknown, undefined>>>;
package/dist/components/atoms/input/input.variants.js CHANGED
@@ -5,6 +5,11 @@ 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",
8
13
  base: [
9
14
  "w-full rounded-lg px-4 body-small",
10
15
  "text-neutral-900 placeholder-neutral-500 dark:text-neutral-200",
package/dist/components/atoms/select/select.variants.d.ts CHANGED
@@ -30,6 +30,9 @@ export const selectVariants: import("tailwind-variants").TVReturnType<{
30
30
  };
31
31
  };
32
32
  }, {
33
+ iconWrapper: string;
34
+ adornmentStart: string;
35
+ adornmentEnd: string;
33
36
  base: string[];
34
37
  }, import("tailwind-variants").TVReturnType<{
35
38
  disabled: {
@@ -43,6 +46,9 @@ export const selectVariants: import("tailwind-variants").TVReturnType<{
43
46
  };
44
47
  };
45
48
  }, {
49
+ iconWrapper: string;
50
+ adornmentStart: string;
51
+ adornmentEnd: string;
46
52
  base: string[];
47
53
  }, undefined, {
48
54
  disabled: {
@@ -56,6 +62,9 @@ export const selectVariants: import("tailwind-variants").TVReturnType<{
56
62
  };
57
63
  };
58
64
  }, {
65
+ iconWrapper: string;
66
+ adornmentStart: string;
67
+ adornmentEnd: string;
59
68
  base: string[];
60
69
  }, import("tailwind-variants").TVReturnType<{
61
70
  disabled: {
@@ -69,5 +78,8 @@ export const selectVariants: import("tailwind-variants").TVReturnType<{
69
78
  };
70
79
  };
71
80
  }, {
81
+ iconWrapper: string;
82
+ adornmentStart: string;
83
+ adornmentEnd: string;
72
84
  base: string[];
73
85
  }, undefined, unknown, unknown, undefined>>>;
package/dist/components/atoms/textarea/textarea.variants.d.ts CHANGED
@@ -18,6 +18,9 @@ export const textareaVariants: import("tailwind-variants").TVReturnType<{
18
18
  };
19
19
  };
20
20
  }, {
21
+ iconWrapper: string;
22
+ adornmentStart: string;
23
+ adornmentEnd: string;
21
24
  base: string[];
22
25
  }, import("tailwind-variants").TVReturnType<{
23
26
  disabled: {
@@ -31,6 +34,9 @@ export const textareaVariants: import("tailwind-variants").TVReturnType<{
31
34
  };
32
35
  };
33
36
  }, {
37
+ iconWrapper: string;
38
+ adornmentStart: string;
39
+ adornmentEnd: string;
34
40
  base: string[];
35
41
  }, undefined, {
36
42
  disabled: {
@@ -44,6 +50,9 @@ export const textareaVariants: import("tailwind-variants").TVReturnType<{
44
50
  };
45
51
  };
46
52
  }, {
53
+ iconWrapper: string;
54
+ adornmentStart: string;
55
+ adornmentEnd: string;
47
56
  base: string[];
48
57
  }, import("tailwind-variants").TVReturnType<{
49
58
  disabled: {
@@ -57,5 +66,8 @@ export const textareaVariants: import("tailwind-variants").TVReturnType<{
57
66
  };
58
67
  };
59
68
  }, {
69
+ iconWrapper: string;
70
+ adornmentStart: string;
71
+ adornmentEnd: string;
60
72
  base: string[];
61
73
  }, undefined, unknown, unknown, undefined>>>;
package/dist/components/molecules/comboBox/comboBox.variants.d.ts CHANGED
@@ -41,6 +41,9 @@ export const comboBoxVariants: import("tailwind-variants").TVReturnType<{
41
41
  };
42
42
  };
43
43
  }, {
44
+ iconWrapper: string;
45
+ adornmentStart: string;
46
+ adornmentEnd: string;
44
47
  base: string[];
45
48
  }, import("tailwind-variants").TVReturnType<{
46
49
  disabled: {
@@ -54,6 +57,9 @@ export const comboBoxVariants: import("tailwind-variants").TVReturnType<{
54
57
  };
55
58
  };
56
59
  }, {
60
+ iconWrapper: string;
61
+ adornmentStart: string;
62
+ adornmentEnd: string;
57
63
  base: string[];
58
64
  }, undefined, {
59
65
  disabled: {
@@ -67,6 +73,9 @@ export const comboBoxVariants: import("tailwind-variants").TVReturnType<{
67
73
  };
68
74
  };
69
75
  }, {
76
+ iconWrapper: string;
77
+ adornmentStart: string;
78
+ adornmentEnd: string;
70
79
  base: string[];
71
80
  }, import("tailwind-variants").TVReturnType<{
72
81
  disabled: {
@@ -80,5 +89,8 @@ export const comboBoxVariants: import("tailwind-variants").TVReturnType<{
80
89
  };
81
90
  };
82
91
  }, {
92
+ iconWrapper: string;
93
+ adornmentStart: string;
94
+ adornmentEnd: string;
83
95
  base: string[];
84
96
  }, undefined, unknown, unknown, undefined>>>;
package/dist/components/molecules/tagSelector/tagSelector.variants.d.ts CHANGED
@@ -36,6 +36,9 @@ export const tagSelectorVariants: import("tailwind-variants").TVReturnType<{
36
36
  };
37
37
  };
38
38
  }, {
39
+ iconWrapper: string;
40
+ adornmentStart: string;
41
+ adornmentEnd: string;
39
42
  base: string[];
40
43
  }, import("tailwind-variants").TVReturnType<{
41
44
  disabled: {
@@ -49,6 +52,9 @@ export const tagSelectorVariants: import("tailwind-variants").TVReturnType<{
49
52
  };
50
53
  };
51
54
  }, {
55
+ iconWrapper: string;
56
+ adornmentStart: string;
57
+ adornmentEnd: string;
52
58
  base: string[];
53
59
  }, undefined, {
54
60
  disabled: {
@@ -62,6 +68,9 @@ export const tagSelectorVariants: import("tailwind-variants").TVReturnType<{
62
68
  };
63
69
  };
64
70
  }, {
71
+ iconWrapper: string;
72
+ adornmentStart: string;
73
+ adornmentEnd: string;
65
74
  base: string[];
66
75
  }, import("tailwind-variants").TVReturnType<{
67
76
  disabled: {
@@ -75,5 +84,8 @@ export const tagSelectorVariants: import("tailwind-variants").TVReturnType<{
75
84
  };
76
85
  };
77
86
  }, {
87
+ iconWrapper: string;
88
+ adornmentStart: string;
89
+ adornmentEnd: string;
78
90
  base: string[];
79
91
  }, undefined, unknown, unknown, undefined>>>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@websline/system-components",
3
- "version": "1.1.0",
3
+ "version": "1.2.1",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },