@streamscloud/kit 0.2.35 → 0.2.37

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 (17) hide show
  1. package/dist/styles/_input.scss +3 -3
  2. package/dist/styles/_theme.scss +1 -1
  3. package/dist/ui/datetime-picker/cmp.datetime-picker.svelte +3 -3
  4. package/dist/ui/grouped-sidebar/cmp.grouped-sidebar.svelte +2 -2
  5. package/dist/ui/grouped-sidebar/types.svelte.d.ts +12 -4
  6. package/dist/ui/grouped-sidebar/types.svelte.js +4 -4
  7. package/dist/ui/inputs/input/cmp.input.svelte +3 -3
  8. package/dist/ui/inputs/numeral-input/cmp.numeral-input.svelte +3 -3
  9. package/dist/ui/inputs/pin-input/cmp.pin-input.svelte +1 -1
  10. package/dist/ui/inputs/rich-text-input/tinymce-input.svelte +3 -3
  11. package/dist/ui/inputs/textarea/cmp.textarea.svelte +3 -3
  12. package/dist/ui/selects/_multiselect.scss +1 -1
  13. package/dist/ui/selects/_singleselect.scss +1 -1
  14. package/dist/ui/selects/cmp.multiselect.svelte +1 -1
  15. package/dist/ui/selects/cmp.search-multiselect.svelte +1 -1
  16. package/dist/ui/selects/cmp.singleselect.svelte +1 -1
  17. package/package.json +1 -1
package/dist/styles/_input.scss CHANGED
@@ -8,15 +8,15 @@
8
8
  --_input--width: var(--_--input--width, 100%);
9
9
  --_input--background: var(--_--input--background, light-dark(#{colors.$color-white}, #{colors.$color-gray-900}));
10
10
  --_input--background--disabled: var(--_--input--background--disabled, light-dark(#{colors.$color-neutral-50}, #{colors.$color-neutral-800}));
11
- --_input--border-color: var(--_--input--border-color, light-dark(#{colors.$color-neutral-300}, #{colors.$color-neutral-600}));
11
+ --_input--border-color: var(--_--input--border-color, light-dark(#{colors.$color-neutral-100}, #{colors.$color-dark-800}));
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, light-dark(#{colors.$color-neutral-100}, #{colors.$color-dark-800}));
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, light-dark(#{colors.$color-neutral-100}, #{colors.$color-dark-800}));
20
20
  --input--placeholder--color: var(--_--input--placeholder--color);
21
21
 
22
22
  --_input--accent-color: var(--_--input--accent-color, light-dark(#{colors.$color-primary-500}, #{colors.$color-primary-400}));
package/dist/styles/_theme.scss CHANGED
@@ -23,7 +23,7 @@
23
23
  --sc-color--border-error: light-dark(#{colors.$color-destructive-500}, #{colors.$color-destructive-600});
24
24
  --sc-color--border-gray: light-dark(#{colors.$color-neutral-200}, #{colors.$color-dark-200});
25
25
  --sc-color--border-green: light-dark(#{colors.$color-success-500}, #{colors.$color-success-700});
26
- --sc-color--border-input: light-dark(#{colors.$color-neutral-300}, #{colors.$color-dark-800});
26
+ --sc-color--border-input: light-dark(#{colors.$color-neutral-100}, #{colors.$color-dark-800});
27
27
  --sc-color--border-input-dark: light-dark(#{colors.$color-neutral-300}, #{colors.$color-neutral-500});
28
28
  --sc-color--border-light: light-dark(#{colors.$color-neutral-100}, #{colors.$color-neutral-300});
29
29
  --sc-color--border-primary: light-dark(#{colors.$color-neutral-100}, #{colors.$color-dark-800});
package/dist/ui/datetime-picker/cmp.datetime-picker.svelte CHANGED
@@ -201,13 +201,13 @@ A date/time picker powered by flatpickr, supporting date, time, and datetime mod
201
201
  --_input--width: var(--_--input--width, 100%);
202
202
  --_input--background: var(--_--input--background, light-dark(#ffffff, #1c1c1c));
203
203
  --_input--background--disabled: var(--_--input--background--disabled, light-dark(#f9fafb, #1f2937));
204
- --_input--border-color: var(--_--input--border-color, light-dark(#d1d5db, #4b5563));
204
+ --_input--border-color: var(--_--input--border-color, light-dark(#f2f2f3, #1e1e1e));
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, light-dark(#f2f2f3, #1e1e1e));
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, light-dark(#f2f2f3, #1e1e1e));
211
211
  --input--placeholder--color: var(--_--input--placeholder--color);
212
212
  --_input--accent-color: var(--_--input--accent-color, light-dark(#144ab0, #5a8dec));
213
213
  --_input--padding--inline: var(--_--input--padding--inline, 0.5em);
package/dist/ui/grouped-sidebar/cmp.grouped-sidebar.svelte CHANGED
@@ -34,7 +34,7 @@ const selectedGroup = $derived(settings.groups.find((d) => d.id === settings.sel
34
34
  </script>
35
35
 
36
36
  <div class="grouped-sidebar">
37
- {#if (settings.groups.length > 1 || settings.alwaysShowAllGroups) && selectedGroup}
37
+ {#if (settings.groups.length > 1 || !settings.hideGroupsWhenSingle) && selectedGroup}
38
38
  <div class="grouped-sidebar__header">
39
39
  <SegmentedControl
40
40
  segments={settings.groups.map((g) => ({ id: g.id, label: g.name, invalid: !g.isValid }))}
@@ -48,7 +48,7 @@ const selectedGroup = $derived(settings.groups.find((d) => d.id === settings.sel
48
48
  <Section
49
49
  section={section}
50
50
  expandToFill={settings.expandToFill}
51
- showSectionCollapser={selectedGroup.sections.length > 1 || settings.alwaysShowAllSections}
51
+ showSectionCollapser={selectedGroup.sections.length > 1 || !settings.hideSectionsWhenSingle}
52
52
  on={{ toggleSection: handleToggleSection }} />
53
53
  {/each}
54
54
  {/if}
package/dist/ui/grouped-sidebar/types.svelte.d.ts CHANGED
@@ -5,16 +5,21 @@ export declare class GroupedSidebarSettings {
5
5
  selectedGroupId: string;
6
6
  allowMultipleExpandedSections: boolean;
7
7
  allowCloseAllSections: boolean;
8
- alwaysShowAllSections: boolean;
9
- alwaysShowAllGroups: boolean;
8
+ hideGroupsWhenSingle: boolean;
9
+ hideSectionsWhenSingle: boolean;
10
10
  expandToFill: boolean;
11
11
  constructor(init: {
12
12
  groups: SidebarGroupInit[];
13
13
  initiallySelectedGroupId?: string;
14
+ /** Allow more than one section open at the same time @default false */
14
15
  allowMultipleExpandedSections?: boolean;
16
+ /** Allow collapsing every section (otherwise at least one stays open) @default false */
15
17
  allowCloseAllSections?: boolean;
16
- alwaysShowAllGroups?: boolean;
17
- alwaysShowAllSections?: boolean;
18
+ /** Hide the group tabs when there is only one group @default false */
19
+ hideGroupsWhenSingle?: boolean;
20
+ /** Hide section headers when a group has only one section @default false */
21
+ hideSectionsWhenSingle?: boolean;
22
+ /** Expanded sections stretch to fill available height @default true */
18
23
  expandToFill?: boolean;
19
24
  });
20
25
  }
@@ -48,15 +53,18 @@ export interface SidebarGroupInit {
48
53
  name: string;
49
54
  sections: SidebarSectionInit[];
50
55
  onSelected?: () => void;
56
+ /** Aggregated with section validators to determine group validity */
51
57
  validator?: SidebarValidator;
52
58
  }
53
59
  export interface SidebarSectionInit {
54
60
  id?: string;
55
61
  name: string;
56
62
  expanded?: boolean;
63
+ /** Remove default content padding @default false */
57
64
  withoutPaddings?: boolean;
58
65
  component: DynamicComponentModel | Snippet;
59
66
  onExpandedChanged?: (val: boolean) => void;
67
+ /** Shows error styling on section title when invalid */
60
68
  validator?: SidebarValidator;
61
69
  }
62
70
  export type SidebarValidator = {
package/dist/ui/grouped-sidebar/types.svelte.js CHANGED
@@ -5,16 +5,16 @@ export class GroupedSidebarSettings {
5
5
  selectedGroupId = $state('');
6
6
  allowMultipleExpandedSections = $state(false);
7
7
  allowCloseAllSections = $state(false);
8
- alwaysShowAllSections = $state(false);
9
- alwaysShowAllGroups = $state(false);
8
+ hideGroupsWhenSingle = $state(false);
9
+ hideSectionsWhenSingle = $state(false);
10
10
  expandToFill = $state(true);
11
11
  constructor(init) {
12
12
  this.groups = init.groups.map((g) => new SidebarGroupModel(g));
13
13
  this.selectedGroupId = init.initiallySelectedGroupId ?? '';
14
14
  this.allowMultipleExpandedSections = init.allowMultipleExpandedSections ?? false;
15
15
  this.allowCloseAllSections = init.allowCloseAllSections ?? false;
16
- this.alwaysShowAllGroups = init.alwaysShowAllGroups ?? false;
17
- this.alwaysShowAllSections = init.alwaysShowAllSections ?? false;
16
+ this.hideGroupsWhenSingle = init.hideGroupsWhenSingle ?? false;
17
+ this.hideSectionsWhenSingle = init.hideSectionsWhenSingle ?? false;
18
18
  this.expandToFill = init.expandToFill ?? true;
19
19
  }
20
20
  }
package/dist/ui/inputs/input/cmp.input.svelte CHANGED
@@ -145,13 +145,13 @@ Text/password input with optional clear button, icon, and emoji picker.
145
145
  --_input--width: var(--_--input--width, 100%);
146
146
  --_input--background: var(--_--input--background, light-dark(#ffffff, #1c1c1c));
147
147
  --_input--background--disabled: var(--_--input--background--disabled, light-dark(#f9fafb, #1f2937));
148
- --_input--border-color: var(--_--input--border-color, light-dark(#d1d5db, #4b5563));
148
+ --_input--border-color: var(--_--input--border-color, light-dark(#f2f2f3, #1e1e1e));
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, light-dark(#f2f2f3, #1e1e1e));
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, light-dark(#f2f2f3, #1e1e1e));
155
155
  --input--placeholder--color: var(--_--input--placeholder--color);
156
156
  --_input--accent-color: var(--_--input--accent-color, light-dark(#144ab0, #5a8dec));
157
157
  --_input--padding--inline: var(--_--input--padding--inline, 0.5em);
package/dist/ui/inputs/numeral-input/cmp.numeral-input.svelte CHANGED
@@ -162,13 +162,13 @@ Uses cleave-zen for formatting and cursor tracking.
162
162
  --_input--width: var(--_--input--width, 100%);
163
163
  --_input--background: var(--_--input--background, light-dark(#ffffff, #1c1c1c));
164
164
  --_input--background--disabled: var(--_--input--background--disabled, light-dark(#f9fafb, #1f2937));
165
- --_input--border-color: var(--_--input--border-color, light-dark(#d1d5db, #4b5563));
165
+ --_input--border-color: var(--_--input--border-color, light-dark(#f2f2f3, #1e1e1e));
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, light-dark(#f2f2f3, #1e1e1e));
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, light-dark(#f2f2f3, #1e1e1e));
172
172
  --input--placeholder--color: var(--_--input--placeholder--color);
173
173
  --_input--accent-color: var(--_--input--accent-color, light-dark(#144ab0, #5a8dec));
174
174
  --_input--padding--inline: var(--_--input--padding--inline, 0.5em);
package/dist/ui/inputs/pin-input/cmp.pin-input.svelte CHANGED
@@ -30,7 +30,7 @@ A PIN code input with configurable number of character cells. Each cell accepts
30
30
  <style>.pin-input {
31
31
  --_pin-input--color: var(--sc-kit--pin-input--color, light-dark(#2e2e2e, #ffffff));
32
32
  --_pin-input--background: var(--sc-kit--pin-input--background, light-dark(#ffffff, #1c1c1c));
33
- --_pin-input--border-color: var(--sc-kit--pin-input--border-color, light-dark(#d1d5db, #4b5563));
33
+ --_pin-input--border-color: var(--sc-kit--pin-input--border-color, light-dark(#f2f2f3, #1e1e1e));
34
34
  --_pin-input--border-color--focused: var(
35
35
  --sc-kit--pin-input--border-color--focused,
36
36
  light-dark(#144ab0, #5a8dec)
package/dist/ui/inputs/rich-text-input/tinymce-input.svelte CHANGED
@@ -161,13 +161,13 @@ const setEditorValue = (editor, val) => {
161
161
  --_input--width: var(--_--input--width, 100%);
162
162
  --_input--background: var(--_--input--background, light-dark(#ffffff, #1c1c1c));
163
163
  --_input--background--disabled: var(--_--input--background--disabled, light-dark(#f9fafb, #1f2937));
164
- --_input--border-color: var(--_--input--border-color, light-dark(#d1d5db, #4b5563));
164
+ --_input--border-color: var(--_--input--border-color, light-dark(#f2f2f3, #1e1e1e));
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, light-dark(#f2f2f3, #1e1e1e));
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, light-dark(#f2f2f3, #1e1e1e));
171
171
  --input--placeholder--color: var(--_--input--placeholder--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);
package/dist/ui/inputs/textarea/cmp.textarea.svelte CHANGED
@@ -148,13 +148,13 @@ Auto-resizing textarea with optional emoji picker, single-line mode, and submit-
148
148
  --_input--width: var(--_--input--width, 100%);
149
149
  --_input--background: var(--_--input--background, light-dark(#ffffff, #1c1c1c));
150
150
  --_input--background--disabled: var(--_--input--background--disabled, light-dark(#f9fafb, #1f2937));
151
- --_input--border-color: var(--_--input--border-color, light-dark(#d1d5db, #4b5563));
151
+ --_input--border-color: var(--_--input--border-color, light-dark(#f2f2f3, #1e1e1e));
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, light-dark(#f2f2f3, #1e1e1e));
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, light-dark(#f2f2f3, #1e1e1e));
158
158
  --input--placeholder--color: var(--_--input--placeholder--color);
159
159
  --_input--accent-color: var(--_--input--accent-color, light-dark(#144ab0, #5a8dec));
160
160
  --_input--padding--inline: var(--_--input--padding--inline, 0.5em);
package/dist/ui/selects/_multiselect.scss CHANGED
@@ -8,7 +8,7 @@
8
8
  --_multiselect--width: var(--sc-kit--multiselect--width, 100%);
9
9
  --_multiselect--background: var(--sc-kit--multiselect--background, light-dark(#{colors.$color-white}, #{colors.$color-gray-900}));
10
10
  --_multiselect--background--disabled: var(--sc-kit--multiselect--background--disabled, light-dark(#{colors.$color-neutral-50}, #{colors.$color-neutral-800}));
11
- --_multiselect--border-color: var(--sc-kit--multiselect--border-color, light-dark(#{colors.$color-neutral-300}, #{colors.$color-neutral-600}));
11
+ --_multiselect--border-color: var(--sc-kit--multiselect--border-color, light-dark(#{colors.$color-neutral-100}, #{colors.$color-dark-800}));
12
12
  --_multiselect--border-radius: var(--sc-kit--multiselect--border-radius, #{functions.em(4)});
13
13
  --_multiselect--text--font-size: var(--sc-kit--multiselect--text--font-size, #{functions.em(14)});
14
14
  --_multiselect--text--color: var(--sc-kit--multiselect--text--color, light-dark(#{colors.$color-gray-800}, #{colors.$color-white}));
package/dist/ui/selects/_singleselect.scss CHANGED
@@ -11,7 +11,7 @@
11
11
  --sc-kit--singleselect--background--disabled,
12
12
  light-dark(#{colors.$color-neutral-50}, #{colors.$color-neutral-800})
13
13
  );
14
- --_singleselect--border-color: var(--sc-kit--singleselect--border-color, light-dark(#{colors.$color-neutral-300}, #{colors.$color-neutral-600}));
14
+ --_singleselect--border-color: var(--sc-kit--singleselect--border-color, light-dark(#{colors.$color-neutral-100}, #{colors.$color-dark-800}));
15
15
  --_singleselect--border-radius: var(--sc-kit--singleselect--border-radius, #{functions.em(4)});
16
16
  --_singleselect--text--font-size: var(--sc-kit--singleselect--text--font-size, #{functions.em(14)});
17
17
  --_singleselect--text--color: var(--sc-kit--singleselect--text--color, light-dark(#{colors.$color-gray-800}, #{colors.$color-white}));
package/dist/ui/selects/cmp.multiselect.svelte CHANGED
@@ -274,7 +274,7 @@ Multi-value select dropdown built on svelte-select with fuzzy search. Supports e
274
274
  --_multiselect--width: var(--sc-kit--multiselect--width, 100%);
275
275
  --_multiselect--background: var(--sc-kit--multiselect--background, light-dark(#ffffff, #1c1c1c));
276
276
  --_multiselect--background--disabled: var(--sc-kit--multiselect--background--disabled, light-dark(#f9fafb, #1f2937));
277
- --_multiselect--border-color: var(--sc-kit--multiselect--border-color, light-dark(#d1d5db, #4b5563));
277
+ --_multiselect--border-color: var(--sc-kit--multiselect--border-color, light-dark(#f2f2f3, #1e1e1e));
278
278
  --_multiselect--border-radius: var(--sc-kit--multiselect--border-radius, 0.25em);
279
279
  --_multiselect--text--font-size: var(--sc-kit--multiselect--text--font-size, 0.875em);
280
280
  --_multiselect--text--color: var(--sc-kit--multiselect--text--color, light-dark(#2e2e2e, #ffffff));
package/dist/ui/selects/cmp.search-multiselect.svelte CHANGED
@@ -270,7 +270,7 @@ Uses the same `--sc-kit--multiselect--*` variables as the Multiselect component.
270
270
  --_multiselect--width: var(--sc-kit--multiselect--width, 100%);
271
271
  --_multiselect--background: var(--sc-kit--multiselect--background, light-dark(#ffffff, #1c1c1c));
272
272
  --_multiselect--background--disabled: var(--sc-kit--multiselect--background--disabled, light-dark(#f9fafb, #1f2937));
273
- --_multiselect--border-color: var(--sc-kit--multiselect--border-color, light-dark(#d1d5db, #4b5563));
273
+ --_multiselect--border-color: var(--sc-kit--multiselect--border-color, light-dark(#f2f2f3, #1e1e1e));
274
274
  --_multiselect--border-radius: var(--sc-kit--multiselect--border-radius, 0.25em);
275
275
  --_multiselect--text--font-size: var(--sc-kit--multiselect--text--font-size, 0.875em);
276
276
  --_multiselect--text--color: var(--sc-kit--multiselect--text--color, light-dark(#2e2e2e, #ffffff));
package/dist/ui/selects/cmp.singleselect.svelte CHANGED
@@ -227,7 +227,7 @@ Single-value select dropdown built on svelte-select with fuzzy search. Supports
227
227
  --sc-kit--singleselect--background--disabled,
228
228
  light-dark(#f9fafb, #1f2937)
229
229
  );
230
- --_singleselect--border-color: var(--sc-kit--singleselect--border-color, light-dark(#d1d5db, #4b5563));
230
+ --_singleselect--border-color: var(--sc-kit--singleselect--border-color, light-dark(#f2f2f3, #1e1e1e));
231
231
  --_singleselect--border-radius: var(--sc-kit--singleselect--border-radius, 0.25em);
232
232
  --_singleselect--text--font-size: var(--sc-kit--singleselect--text--font-size, 0.875em);
233
233
  --_singleselect--text--color: var(--sc-kit--singleselect--text--color, light-dark(#2e2e2e, #ffffff));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@streamscloud/kit",
3
- "version": "0.2.35",
3
+ "version": "0.2.37",
4
4
  "author": "StreamsCloud",
5
5
  "repository": {
6
6
  "type": "git",