@streamscloud/kit 0.2.7-1772698500959 → 0.2.7

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 +4 -3
  2. package/dist/ui/datetime-picker/cmp.datetime-picker.svelte +3 -5
  3. package/dist/ui/inputs/input/cmp.input.svelte +4 -5
  4. package/dist/ui/inputs/numeral-input/cmp.numeral-input.svelte +4 -5
  5. package/dist/ui/inputs/rich-text-input/tinymce-input.svelte +4 -5
  6. package/dist/ui/inputs/textarea/cmp.textarea.svelte +4 -5
  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, light-dark(#{colors.$color-neutral-300}, #{colors.$color-neutral-600}));
15
+ --_input--icon--color: var(--_--input--icon--color, var(--_input--border-color));
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, light-dark(#{colors.$color-neutral-300}, #{colors.$color-neutral-600}));
19
+ --_input--placeholder--color: var(--_--input--placeholder--color, var(--_input--border-color));
20
20
 
21
21
  --_input--accent-color: var(--_--input--accent-color, light-dark(#{colors.$color-primary-500}, #{colors.$color-primary-400}));
22
22
 
@@ -42,7 +42,6 @@
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);
46
45
 
47
46
  &--disabled {
48
47
  background-color: var(--_input--background--disabled);
@@ -73,6 +72,7 @@
73
72
  --_input--accent-shadow: var(--_input--explicit-shadow-color, var(--_input--default-shadow-color));
74
73
  position: relative;
75
74
  box-shadow: inset 0 -0.13em var(--_input--accent-shadow);
75
+ @include transitions.transition(box-shadow border-color width background padding);
76
76
 
77
77
  &:focus,
78
78
  &:focus-within {
@@ -94,4 +94,5 @@
94
94
  --_input--background--disabled: transparent;
95
95
  --_input--accent-color: transparent;
96
96
  --_input--explicit-shadow-color: transparent;
97
+ --_input--height: auto;
97
98
  }
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, light-dark(#d1d5db, #4b5563));
207
+ --_input--icon--color: var(--_--input--icon--color, var(--_input--border-color));
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, light-dark(#d1d5db, #4b5563));
210
+ --_input--placeholder--color: var(--_--input--placeholder--color, var(--_input--border-color));
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,13 +231,11 @@ 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);
234
235
  }
235
236
  .datetime-picker:focus, .datetime-picker:focus-within {
236
237
  --_input--default-shadow-color: var(--_input--accent-color);
237
238
  }
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
- }
241
239
  .datetime-picker--disabled {
242
240
  background-color: var(--_input--background--disabled);
243
241
  cursor: default;
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, light-dark(#d1d5db, #4b5563));
151
+ --_input--icon--color: var(--_--input--icon--color, var(--_input--border-color));
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, light-dark(#d1d5db, #4b5563));
154
+ --_input--placeholder--color: var(--_--input--placeholder--color, var(--_input--border-color));
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,13 +175,11 @@ 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);
178
179
  }
179
180
  .input:focus, .input:focus-within {
180
181
  --_input--default-shadow-color: var(--_input--accent-color);
181
182
  }
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
- }
185
183
  .input--disabled {
186
184
  background-color: var(--_input--background--disabled);
187
185
  cursor: default;
@@ -201,6 +199,7 @@ Text/password input with optional clear button, icon, and emoji picker.
201
199
  --_input--background--disabled: transparent;
202
200
  --_input--accent-color: transparent;
203
201
  --_input--explicit-shadow-color: transparent;
202
+ --_input--height: auto;
204
203
  }
205
204
  .input--has-emoji {
206
205
  --_--input--padding-right: 1.5em;
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, light-dark(#d1d5db, #4b5563));
168
+ --_input--icon--color: var(--_--input--icon--color, var(--_input--border-color));
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, light-dark(#d1d5db, #4b5563));
171
+ --_input--placeholder--color: var(--_--input--placeholder--color, var(--_input--border-color));
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,13 +192,11 @@ 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);
195
196
  }
196
197
  .numeral-input:focus, .numeral-input:focus-within {
197
198
  --_input--default-shadow-color: var(--_input--accent-color);
198
199
  }
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
- }
202
200
  .numeral-input--disabled {
203
201
  background-color: var(--_input--background--disabled);
204
202
  cursor: default;
@@ -217,6 +215,7 @@ Uses cleave-zen for formatting and cursor tracking.
217
215
  --_input--background--disabled: transparent;
218
216
  --_input--accent-color: transparent;
219
217
  --_input--explicit-shadow-color: transparent;
218
+ --_input--height: auto;
220
219
  }
221
220
  .numeral-input__input {
222
221
  flex: 1;
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, light-dark(#d1d5db, #4b5563));
167
+ --_input--icon--color: var(--_--input--icon--color, var(--_input--border-color));
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, light-dark(#d1d5db, #4b5563));
170
+ --_input--placeholder--color: var(--_--input--placeholder--color, var(--_input--border-color));
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,13 +191,11 @@ 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);
194
195
  }
195
196
  .tinymce-input:focus, .tinymce-input:focus-within {
196
197
  --_input--default-shadow-color: var(--_input--accent-color);
197
198
  }
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
- }
201
199
  .tinymce-input--disabled {
202
200
  background-color: var(--_input--background--disabled);
203
201
  cursor: default;
@@ -215,6 +213,7 @@ const setEditorValue = (editor, val) => {
215
213
  --_input--background--disabled: transparent;
216
214
  --_input--accent-color: transparent;
217
215
  --_input--explicit-shadow-color: transparent;
216
+ --_input--height: auto;
218
217
  }
219
218
  .tinymce-input :global(.tox-tinymce-inline .tox-editor-header) {
220
219
  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, light-dark(#d1d5db, #4b5563));
154
+ --_input--icon--color: var(--_--input--icon--color, var(--_input--border-color));
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, light-dark(#d1d5db, #4b5563));
157
+ --_input--placeholder--color: var(--_--input--placeholder--color, var(--_input--border-color));
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,13 +178,11 @@ 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);
181
182
  }
182
183
  .textarea-input:focus, .textarea-input:focus-within {
183
184
  --_input--default-shadow-color: var(--_input--accent-color);
184
185
  }
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
- }
188
186
  .textarea-input--disabled {
189
187
  background-color: var(--_input--background--disabled);
190
188
  cursor: default;
@@ -198,6 +196,7 @@ Auto-resizing textarea with optional emoji picker, single-line mode, and submit-
198
196
  --_input--background--disabled: transparent;
199
197
  --_input--accent-color: transparent;
200
198
  --_input--explicit-shadow-color: transparent;
199
+ --_input--height: auto;
201
200
  }
202
201
  .textarea-input--has-emoji {
203
202
  --_--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-1772698500959",
3
+ "version": "0.2.7",
4
4
  "author": "StreamsCloud",
5
5
  "repository": {
6
6
  "type": "git",