@streamscloud/kit 0.2.7 → 0.2.9

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 (7) hide show
  1. package/dist/styles/_input.scss +5 -4
  2. package/dist/ui/datetime-picker/cmp.datetime-picker.svelte +7 -3
  3. package/dist/ui/inputs/input/cmp.input.svelte +9 -4
  4. package/dist/ui/inputs/numeral-input/cmp.numeral-input.svelte +9 -4
  5. package/dist/ui/inputs/rich-text-input/tinymce-input.svelte +5 -4
  6. package/dist/ui/inputs/textarea/cmp.textarea.svelte +5 -4
  7. package/package.json +1 -1
package/dist/styles/_input.scss CHANGED
@@ -12,11 +12,11 @@
12
12
  --_input--border-radius: var(--_--input--border-radius, #{functions.em(4)});
13
13
 
14
14
  --_input--icon--size: var(--_--input--icon--size, 1em);
15
- --_input--icon--color: var(--_--input--icon--color, var(--_input--border-color));
15
+ --_input--icon--color: var(--_--input--icon--color, light-dark(#{colors.$color-neutral-300}, #{colors.$color-neutral-600}));
16
16
 
17
17
  --_input--text--font-size: var(--_--input--text--font-size, #{functions.em(14)});
18
18
  --_input--text--color: var(--_--input--text--color, light-dark(#{colors.$color-gray-800}, #{colors.$color-white}));
19
- --_input--placeholder--color: var(--_--input--placeholder--color, var(--_input--border-color));
19
+ --_input--placeholder--color: var(--_--input--placeholder--color, light-dark(#{colors.$color-neutral-300}, #{colors.$color-neutral-600}));
20
20
 
21
21
  --_input--accent-color: var(--_--input--accent-color, light-dark(#{colors.$color-primary-500}, #{colors.$color-primary-400}));
22
22
 
@@ -42,6 +42,7 @@
42
42
  padding-left: var(--_input--padding-left);
43
43
 
44
44
  @include input-accent-shadow;
45
+ @include transitions.transition(box-shadow border-color width background padding);
45
46
 
46
47
  &--disabled {
47
48
  background-color: var(--_input--background--disabled);
@@ -65,6 +66,8 @@
65
66
  @mixin input-icon() {
66
67
  color: var(--_input--icon--color);
67
68
  font-size: var(--_input--icon--size);
69
+ line-height: 0;
70
+ cursor: pointer;
68
71
  }
69
72
 
70
73
  @mixin input-accent-shadow() {
@@ -72,7 +75,6 @@
72
75
  --_input--accent-shadow: var(--_input--explicit-shadow-color, var(--_input--default-shadow-color));
73
76
  position: relative;
74
77
  box-shadow: inset 0 -0.13em var(--_input--accent-shadow);
75
- @include transitions.transition(box-shadow border-color width background padding);
76
78
 
77
79
  &:focus,
78
80
  &:focus-within {
@@ -94,5 +96,4 @@
94
96
  --_input--background--disabled: transparent;
95
97
  --_input--accent-color: transparent;
96
98
  --_input--explicit-shadow-color: transparent;
97
- --_input--height: auto;
98
99
  }
package/dist/ui/datetime-picker/cmp.datetime-picker.svelte CHANGED
@@ -204,10 +204,10 @@ A date/time picker powered by flatpickr, supporting date, time, and datetime mod
204
204
  --_input--border-color: var(--_--input--border-color, light-dark(#d1d5db, #4b5563));
205
205
  --_input--border-radius: var(--_--input--border-radius, 0.25em);
206
206
  --_input--icon--size: var(--_--input--icon--size, 1em);
207
- --_input--icon--color: var(--_--input--icon--color, var(--_input--border-color));
207
+ --_input--icon--color: var(--_--input--icon--color, light-dark(#d1d5db, #4b5563));
208
208
  --_input--text--font-size: var(--_--input--text--font-size, 0.875em);
209
209
  --_input--text--color: var(--_--input--text--color, light-dark(#2e2e2e, #ffffff));
210
- --_input--placeholder--color: var(--_--input--placeholder--color, var(--_input--border-color));
210
+ --_input--placeholder--color: var(--_--input--placeholder--color, light-dark(#d1d5db, #4b5563));
211
211
  --_input--accent-color: var(--_--input--accent-color, light-dark(#144ab0, #5a8dec));
212
212
  --_input--padding--inline: var(--_--input--padding--inline, 0.5em);
213
213
  --_input--padding--block: var(--_--input--padding--block, 0);
@@ -231,11 +231,13 @@ A date/time picker powered by flatpickr, supporting date, time, and datetime mod
231
231
  --_input--accent-shadow: var(--_input--explicit-shadow-color, var(--_input--default-shadow-color));
232
232
  position: relative;
233
233
  box-shadow: inset 0 -0.13em var(--_input--accent-shadow);
234
- transition: box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), width 250ms cubic-bezier(0.4, 0, 0.2, 1), background 250ms cubic-bezier(0.4, 0, 0.2, 1), padding 250ms cubic-bezier(0.4, 0, 0.2, 1);
235
234
  }
236
235
  .datetime-picker:focus, .datetime-picker:focus-within {
237
236
  --_input--default-shadow-color: var(--_input--accent-color);
238
237
  }
238
+ .datetime-picker {
239
+ transition: box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), width 250ms cubic-bezier(0.4, 0, 0.2, 1), background 250ms cubic-bezier(0.4, 0, 0.2, 1), padding 250ms cubic-bezier(0.4, 0, 0.2, 1);
240
+ }
239
241
  .datetime-picker--disabled {
240
242
  background-color: var(--_input--background--disabled);
241
243
  cursor: default;
@@ -264,6 +266,8 @@ A date/time picker powered by flatpickr, supporting date, time, and datetime mod
264
266
  flex-shrink: 0;
265
267
  color: var(--_input--icon--color);
266
268
  font-size: var(--_input--icon--size);
269
+ line-height: 0;
270
+ cursor: pointer;
267
271
  }
268
272
  .datetime-picker__input {
269
273
  flex: 1;
package/dist/ui/inputs/input/cmp.input.svelte CHANGED
@@ -148,10 +148,10 @@ Text/password input with optional clear button, icon, and emoji picker.
148
148
  --_input--border-color: var(--_--input--border-color, light-dark(#d1d5db, #4b5563));
149
149
  --_input--border-radius: var(--_--input--border-radius, 0.25em);
150
150
  --_input--icon--size: var(--_--input--icon--size, 1em);
151
- --_input--icon--color: var(--_--input--icon--color, var(--_input--border-color));
151
+ --_input--icon--color: var(--_--input--icon--color, light-dark(#d1d5db, #4b5563));
152
152
  --_input--text--font-size: var(--_--input--text--font-size, 0.875em);
153
153
  --_input--text--color: var(--_--input--text--color, light-dark(#2e2e2e, #ffffff));
154
- --_input--placeholder--color: var(--_--input--placeholder--color, var(--_input--border-color));
154
+ --_input--placeholder--color: var(--_--input--placeholder--color, light-dark(#d1d5db, #4b5563));
155
155
  --_input--accent-color: var(--_--input--accent-color, light-dark(#144ab0, #5a8dec));
156
156
  --_input--padding--inline: var(--_--input--padding--inline, 0.5em);
157
157
  --_input--padding--block: var(--_--input--padding--block, 0);
@@ -175,11 +175,13 @@ Text/password input with optional clear button, icon, and emoji picker.
175
175
  --_input--accent-shadow: var(--_input--explicit-shadow-color, var(--_input--default-shadow-color));
176
176
  position: relative;
177
177
  box-shadow: inset 0 -0.13em var(--_input--accent-shadow);
178
- transition: box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), width 250ms cubic-bezier(0.4, 0, 0.2, 1), background 250ms cubic-bezier(0.4, 0, 0.2, 1), padding 250ms cubic-bezier(0.4, 0, 0.2, 1);
179
178
  }
180
179
  .input:focus, .input:focus-within {
181
180
  --_input--default-shadow-color: var(--_input--accent-color);
182
181
  }
182
+ .input {
183
+ transition: box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), width 250ms cubic-bezier(0.4, 0, 0.2, 1), background 250ms cubic-bezier(0.4, 0, 0.2, 1), padding 250ms cubic-bezier(0.4, 0, 0.2, 1);
184
+ }
183
185
  .input--disabled {
184
186
  background-color: var(--_input--background--disabled);
185
187
  cursor: default;
@@ -199,7 +201,6 @@ Text/password input with optional clear button, icon, and emoji picker.
199
201
  --_input--background--disabled: transparent;
200
202
  --_input--accent-color: transparent;
201
203
  --_input--explicit-shadow-color: transparent;
202
- --_input--height: auto;
203
204
  }
204
205
  .input--has-emoji {
205
206
  --_--input--padding-right: 1.5em;
@@ -222,6 +223,8 @@ Text/password input with optional clear button, icon, and emoji picker.
222
223
  margin-right: 0.625em;
223
224
  color: var(--_input--icon--color);
224
225
  font-size: var(--_input--icon--size);
226
+ line-height: 0;
227
+ cursor: pointer;
225
228
  }
226
229
  :global(.input__icon:not(:has(*))) {
227
230
  margin-right: 0 !important;
@@ -229,6 +232,8 @@ Text/password input with optional clear button, icon, and emoji picker.
229
232
  .input__clear-wrapper {
230
233
  color: var(--_input--icon--color);
231
234
  font-size: var(--_input--icon--size);
235
+ line-height: 0;
236
+ cursor: pointer;
232
237
  }
233
238
  .input__clear-button {
234
239
  margin-left: 0.625em;
package/dist/ui/inputs/numeral-input/cmp.numeral-input.svelte CHANGED
@@ -165,10 +165,10 @@ Uses cleave-zen for formatting and cursor tracking.
165
165
  --_input--border-color: var(--_--input--border-color, light-dark(#d1d5db, #4b5563));
166
166
  --_input--border-radius: var(--_--input--border-radius, 0.25em);
167
167
  --_input--icon--size: var(--_--input--icon--size, 1em);
168
- --_input--icon--color: var(--_--input--icon--color, var(--_input--border-color));
168
+ --_input--icon--color: var(--_--input--icon--color, light-dark(#d1d5db, #4b5563));
169
169
  --_input--text--font-size: var(--_--input--text--font-size, 0.875em);
170
170
  --_input--text--color: var(--_--input--text--color, light-dark(#2e2e2e, #ffffff));
171
- --_input--placeholder--color: var(--_--input--placeholder--color, var(--_input--border-color));
171
+ --_input--placeholder--color: var(--_--input--placeholder--color, light-dark(#d1d5db, #4b5563));
172
172
  --_input--accent-color: var(--_--input--accent-color, light-dark(#144ab0, #5a8dec));
173
173
  --_input--padding--inline: var(--_--input--padding--inline, 0.5em);
174
174
  --_input--padding--block: var(--_--input--padding--block, 0);
@@ -192,11 +192,13 @@ Uses cleave-zen for formatting and cursor tracking.
192
192
  --_input--accent-shadow: var(--_input--explicit-shadow-color, var(--_input--default-shadow-color));
193
193
  position: relative;
194
194
  box-shadow: inset 0 -0.13em var(--_input--accent-shadow);
195
- transition: box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), width 250ms cubic-bezier(0.4, 0, 0.2, 1), background 250ms cubic-bezier(0.4, 0, 0.2, 1), padding 250ms cubic-bezier(0.4, 0, 0.2, 1);
196
195
  }
197
196
  .numeral-input:focus, .numeral-input:focus-within {
198
197
  --_input--default-shadow-color: var(--_input--accent-color);
199
198
  }
199
+ .numeral-input {
200
+ transition: box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), width 250ms cubic-bezier(0.4, 0, 0.2, 1), background 250ms cubic-bezier(0.4, 0, 0.2, 1), padding 250ms cubic-bezier(0.4, 0, 0.2, 1);
201
+ }
200
202
  .numeral-input--disabled {
201
203
  background-color: var(--_input--background--disabled);
202
204
  cursor: default;
@@ -215,7 +217,6 @@ Uses cleave-zen for formatting and cursor tracking.
215
217
  --_input--background--disabled: transparent;
216
218
  --_input--accent-color: transparent;
217
219
  --_input--explicit-shadow-color: transparent;
218
- --_input--height: auto;
219
220
  }
220
221
  .numeral-input__input {
221
222
  flex: 1;
@@ -235,6 +236,8 @@ Uses cleave-zen for formatting and cursor tracking.
235
236
  margin-right: 0.625em;
236
237
  color: var(--_input--icon--color);
237
238
  font-size: var(--_input--icon--size);
239
+ line-height: 0;
240
+ cursor: pointer;
238
241
  }
239
242
  :global(.numeral-input__icon:not(:has(*))) {
240
243
  margin-right: 0 !important;
@@ -242,6 +245,8 @@ Uses cleave-zen for formatting and cursor tracking.
242
245
  .numeral-input__clear-wrapper {
243
246
  color: var(--_input--icon--color);
244
247
  font-size: var(--_input--icon--size);
248
+ line-height: 0;
249
+ cursor: pointer;
245
250
  }
246
251
  .numeral-input__clear-button {
247
252
  margin-left: 0.625em;
package/dist/ui/inputs/rich-text-input/tinymce-input.svelte CHANGED
@@ -164,10 +164,10 @@ const setEditorValue = (editor, val) => {
164
164
  --_input--border-color: var(--_--input--border-color, light-dark(#d1d5db, #4b5563));
165
165
  --_input--border-radius: var(--_--input--border-radius, 0.25em);
166
166
  --_input--icon--size: var(--_--input--icon--size, 1em);
167
- --_input--icon--color: var(--_--input--icon--color, var(--_input--border-color));
167
+ --_input--icon--color: var(--_--input--icon--color, light-dark(#d1d5db, #4b5563));
168
168
  --_input--text--font-size: var(--_--input--text--font-size, 0.875em);
169
169
  --_input--text--color: var(--_--input--text--color, light-dark(#2e2e2e, #ffffff));
170
- --_input--placeholder--color: var(--_--input--placeholder--color, var(--_input--border-color));
170
+ --_input--placeholder--color: var(--_--input--placeholder--color, light-dark(#d1d5db, #4b5563));
171
171
  --_input--accent-color: var(--_--input--accent-color, light-dark(#144ab0, #5a8dec));
172
172
  --_input--padding--inline: var(--_--input--padding--inline, 0.5em);
173
173
  --_input--padding--block: var(--_--input--padding--block, 0);
@@ -191,11 +191,13 @@ const setEditorValue = (editor, val) => {
191
191
  --_input--accent-shadow: var(--_input--explicit-shadow-color, var(--_input--default-shadow-color));
192
192
  position: relative;
193
193
  box-shadow: inset 0 -0.13em var(--_input--accent-shadow);
194
- transition: box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), width 250ms cubic-bezier(0.4, 0, 0.2, 1), background 250ms cubic-bezier(0.4, 0, 0.2, 1), padding 250ms cubic-bezier(0.4, 0, 0.2, 1);
195
194
  }
196
195
  .tinymce-input:focus, .tinymce-input:focus-within {
197
196
  --_input--default-shadow-color: var(--_input--accent-color);
198
197
  }
198
+ .tinymce-input {
199
+ transition: box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), width 250ms cubic-bezier(0.4, 0, 0.2, 1), background 250ms cubic-bezier(0.4, 0, 0.2, 1), padding 250ms cubic-bezier(0.4, 0, 0.2, 1);
200
+ }
199
201
  .tinymce-input--disabled {
200
202
  background-color: var(--_input--background--disabled);
201
203
  cursor: default;
@@ -213,7 +215,6 @@ const setEditorValue = (editor, val) => {
213
215
  --_input--background--disabled: transparent;
214
216
  --_input--accent-color: transparent;
215
217
  --_input--explicit-shadow-color: transparent;
216
- --_input--height: auto;
217
218
  }
218
219
  .tinymce-input :global(.tox-tinymce-inline .tox-editor-header) {
219
220
  border-radius: 0.375em !important;
package/dist/ui/inputs/textarea/cmp.textarea.svelte CHANGED
@@ -151,10 +151,10 @@ Auto-resizing textarea with optional emoji picker, single-line mode, and submit-
151
151
  --_input--border-color: var(--_--input--border-color, light-dark(#d1d5db, #4b5563));
152
152
  --_input--border-radius: var(--_--input--border-radius, 0.25em);
153
153
  --_input--icon--size: var(--_--input--icon--size, 1em);
154
- --_input--icon--color: var(--_--input--icon--color, var(--_input--border-color));
154
+ --_input--icon--color: var(--_--input--icon--color, light-dark(#d1d5db, #4b5563));
155
155
  --_input--text--font-size: var(--_--input--text--font-size, 0.875em);
156
156
  --_input--text--color: var(--_--input--text--color, light-dark(#2e2e2e, #ffffff));
157
- --_input--placeholder--color: var(--_--input--placeholder--color, var(--_input--border-color));
157
+ --_input--placeholder--color: var(--_--input--placeholder--color, light-dark(#d1d5db, #4b5563));
158
158
  --_input--accent-color: var(--_--input--accent-color, light-dark(#144ab0, #5a8dec));
159
159
  --_input--padding--inline: var(--_--input--padding--inline, 0.5em);
160
160
  --_input--padding--block: var(--_--input--padding--block, 0);
@@ -178,11 +178,13 @@ Auto-resizing textarea with optional emoji picker, single-line mode, and submit-
178
178
  --_input--accent-shadow: var(--_input--explicit-shadow-color, var(--_input--default-shadow-color));
179
179
  position: relative;
180
180
  box-shadow: inset 0 -0.13em var(--_input--accent-shadow);
181
- transition: box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), width 250ms cubic-bezier(0.4, 0, 0.2, 1), background 250ms cubic-bezier(0.4, 0, 0.2, 1), padding 250ms cubic-bezier(0.4, 0, 0.2, 1);
182
181
  }
183
182
  .textarea-input:focus, .textarea-input:focus-within {
184
183
  --_input--default-shadow-color: var(--_input--accent-color);
185
184
  }
185
+ .textarea-input {
186
+ transition: box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), width 250ms cubic-bezier(0.4, 0, 0.2, 1), background 250ms cubic-bezier(0.4, 0, 0.2, 1), padding 250ms cubic-bezier(0.4, 0, 0.2, 1);
187
+ }
186
188
  .textarea-input--disabled {
187
189
  background-color: var(--_input--background--disabled);
188
190
  cursor: default;
@@ -196,7 +198,6 @@ Auto-resizing textarea with optional emoji picker, single-line mode, and submit-
196
198
  --_input--background--disabled: transparent;
197
199
  --_input--accent-color: transparent;
198
200
  --_input--explicit-shadow-color: transparent;
199
- --_input--height: auto;
200
201
  }
201
202
  .textarea-input--has-emoji {
202
203
  --_--input--padding-right: 1.5em;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@streamscloud/kit",
3
- "version": "0.2.7",
3
+ "version": "0.2.9",
4
4
  "author": "StreamsCloud",
5
5
  "repository": {
6
6
  "type": "git",