@websline/system-components 1.1.0 → 1.2.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.
Files changed (8) hide show
  1. package/dist/components/atoms/input/Input.svelte +39 -15
  2. package/dist/components/atoms/input/input.variants.d.ts +21 -0
  3. package/dist/components/atoms/input/input.variants.js +5 -0
  4. package/dist/components/atoms/select/select.variants.d.ts +12 -0
  5. package/dist/components/atoms/textarea/textarea.variants.d.ts +12 -0
  6. package/dist/components/molecules/comboBox/comboBox.variants.d.ts +12 -0
  7. package/dist/components/molecules/tagSelector/tagSelector.variants.d.ts +12 -0
  8. package/package.json +1 -1
package/dist/components/atoms/input/Input.svelte CHANGED
@@ -18,6 +18,8 @@
18
18
 
19
19
  /** @type {Props} */
20
20
  let {
21
+ adornmentStart = "",
22
+ adornmentEnd = "",
21
23
  class: className = "",
22
24
  disabled = false,
23
25
  error = false,
@@ -49,18 +51,40 @@
49
51
  });
50
52
  </script>
51
53
 
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 />
54
+ <div class={inputVariants().iconWrapper()}>
55
+ {#if adornmentStart}
56
+ <div class={inputVariants().adornmentStart()}>
57
+ {#if typeof adornmentStart === "function"}
58
+ {@render adornmentStart()}
59
+ {:else}
60
+ {adornmentStart}
61
+ {/if}
62
+ </div>
63
+ {/if}
64
+
65
+ <input
66
+ class={inputVariants().base({
67
+ class: className,
68
+ disabled: localValues.disabled,
69
+ error: localValues.error,
70
+ })}
71
+ disabled={localValues.disabled}
72
+ id={localValues.id}
73
+ {name}
74
+ {placeholder}
75
+ {readonly}
76
+ required={localValues.required}
77
+ {type}
78
+ {...rest}
79
+ bind:value />
80
+
81
+ {#if adornmentEnd}
82
+ <div class={inputVariants().adornmentEnd()}>
83
+ {#if typeof adornmentEnd === "function"}
84
+ {@render adornmentEnd()}
85
+ {:else}
86
+ {adornmentEnd}
87
+ {/if}
88
+ </div>
89
+ {/if}
90
+ </div>
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.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },