@streamscloud/kit 0.2.29 → 0.2.31

package/dist/ui/grouped-sidebar/cmp.grouped-sidebar-section.svelte

@@ -0,0 +1,127 @@
+<script lang="ts">import { DynamicComponent, DynamicComponentModel } from '../dynamic-component';
+import { Icon } from '../icon';
+import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
+import IconChevronRight from '@fluentui/svg-icons/icons/chevron_right_20_regular.svg?raw';
+let { section, showSectionCollapser = true, expandToFill = true, on } = $props();
+</script>
+
+<div class="grouped-sidebar-section">
+  {#if showSectionCollapser}
+    <button type="button" class="grouped-sidebar-section__trigger" onclick={() => on?.toggleSection?.(section)}>
+      <span class="grouped-sidebar-section__title" class:grouped-sidebar-section__title--invalid={!section.isValid}>{section.name}</span>
+      <span class="grouped-sidebar-section__expand-icon">
+        {#if section.expanded}
+          <Icon src={IconChevronDown} />
+        {:else}
+          <Icon src={IconChevronRight} />
+        {/if}
+      </span>
+    </button>
+  {/if}
+
+  <div
+    class="grouped-sidebar-section__content"
+    class:grouped-sidebar-section__content--expanded={section.expanded}
+    class:grouped-sidebar-section__content--fill={section.expanded && expandToFill}
+    class:grouped-sidebar-section__content--without-paddings={section.withoutPaddings}>
+    {#if section.expanded && section.component}
+      {#if typeof section.component === 'function'}
+        {@render section.component()}
+      {:else if section.component instanceof DynamicComponentModel}
+        <DynamicComponent model={section.component} />
+      {/if}
+    {/if}
+  </div>
+</div>
+
+<!--
+@component
+A collapsible section within a GroupedSidebar. Renders a trigger button with chevron and expandable content area.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--grouped-sidebar-section--trigger--background` | Trigger row background | `light-dark(neutral-50, dark-700)` |
+| `--sc-kit--grouped-sidebar-section--trigger--color` | Trigger text color | `light-dark(gray-800, white)` |
+| `--sc-kit--grouped-sidebar-section--error-color` | Invalid section title color | `light-dark(destructive-500, destructive-400)` |
+| `--sc-kit--grouped-sidebar-section--padding-block` | Content vertical padding | `1rem` |
+| `--sc-kit--grouped-sidebar-section--padding-inline` | Content horizontal padding | `1rem` |
+| `--sc-kit--grouped-sidebar-section--content--display` | Content display mode | `block` |
+-->
+
+<style>.grouped-sidebar-section {
+  --_grouped-sidebar-section--trigger--background: var(
+    --sc-kit--grouped-sidebar-section--trigger--background,
+    light-dark(#f9fafb, #222222)
+  );
+  --_grouped-sidebar-section--trigger--color: var(
+    --sc-kit--grouped-sidebar-section--trigger--color,
+    light-dark(#2e2e2e, #ffffff)
+  );
+  --_grouped-sidebar-section--error-color: var(
+    --sc-kit--grouped-sidebar-section--error-color,
+    light-dark(#e71d36, #f17e8b)
+  );
+  --_grouped-sidebar-section--padding-block: var(--sc-kit--grouped-sidebar-section--padding-block, 1rem);
+  --_grouped-sidebar-section--padding-inline: var(--sc-kit--grouped-sidebar-section--padding-inline, 1rem);
+  --_grouped-sidebar-section--content--display: var(--sc-kit--grouped-sidebar-section--content--display, block);
+  display: contents;
+}
+.grouped-sidebar-section__trigger {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 0.375rem 1rem;
+  background-color: var(--_grouped-sidebar-section--trigger--background);
+  margin-bottom: 1px;
+  color: var(--_grouped-sidebar-section--trigger--color);
+}
+.grouped-sidebar-section__title {
+  font-size: 0.875rem;
+}
+.grouped-sidebar-section__title--invalid {
+  color: var(--_grouped-sidebar-section--error-color);
+}
+.grouped-sidebar-section__expand-icon {
+  margin-left: auto;
+}
+.grouped-sidebar-section__content {
+  display: var(--_grouped-sidebar-section--content--display);
+  transition: flex 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  flex: 0 0 0;
+  overflow: hidden;
+}
+.grouped-sidebar-section__content--expanded {
+  flex: 0 0 auto;
+  padding: var(--_grouped-sidebar-section--padding-block) var(--_grouped-sidebar-section--padding-inline);
+  padding-bottom: 0;
+  margin-bottom: var(--_grouped-sidebar-section--padding-block);
+}
+.grouped-sidebar-section__content--fill {
+  flex: 1;
+  overflow-y: auto;
+  --_cross-browser-scrollbar--thumb-color: transparent;
+  --_cross-browser-scrollbar--track-color: transparent;
+}
+.grouped-sidebar-section__content--fill:hover {
+  --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, light-dark(#d1d5db, #4b5563));
+  --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
+}
+.grouped-sidebar-section__content--fill::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.grouped-sidebar-section__content--fill::-webkit-scrollbar-track {
+  background: var(--_cross-browser-scrollbar--track-color);
+  border-radius: 100vw;
+}
+.grouped-sidebar-section__content--fill::-webkit-scrollbar-thumb {
+  background: var(--_cross-browser-scrollbar--thumb-color);
+  border-radius: 100vw;
+}
+@supports (scrollbar-color: transparent transparent) {
+  .grouped-sidebar-section__content--fill {
+    scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
+    scrollbar-width: thin;
+  }
+}</style>

package/dist/ui/grouped-sidebar/cmp.grouped-sidebar-section.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { SidebarGroupSectionModel } from './types.svelte';
+type Props = {
+    section: SidebarGroupSectionModel;
+    /** @default true */
+    showSectionCollapser?: boolean;
+    /** When true, expanded sections stretch to fill available space @default true */
+    expandToFill?: boolean;
+    on?: {
+        toggleSection?: (section: SidebarGroupSectionModel) => void;
+    };
+};
+/**
+ * A collapsible section within a GroupedSidebar. Renders a trigger button with chevron and expandable content area.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--grouped-sidebar-section--trigger--background` | Trigger row background | `light-dark(neutral-50, dark-700)` |
+ * | `--sc-kit--grouped-sidebar-section--trigger--color` | Trigger text color | `light-dark(gray-800, white)` |
+ * | `--sc-kit--grouped-sidebar-section--error-color` | Invalid section title color | `light-dark(destructive-500, destructive-400)` |
+ * | `--sc-kit--grouped-sidebar-section--padding-block` | Content vertical padding | `1rem` |
+ * | `--sc-kit--grouped-sidebar-section--padding-inline` | Content horizontal padding | `1rem` |
+ * | `--sc-kit--grouped-sidebar-section--content--display` | Content display mode | `block` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/grouped-sidebar/cmp.grouped-sidebar.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">import { SegmentedControl } from '../segmented-control';
+import { default as Section } from './cmp.grouped-sidebar-section.svelte';
+let { settings } = $props();
+const handleSelectGroup = (id) => {
+    settings.selectedGroupId = id;
+    if (selectedGroup?.onSelected) {
+        selectedGroup.onSelected();
+    }
+};
+const handleToggleSection = (section) => {
+    if (!selectedGroup) {
+        return;
+    }
+    const nextStateExpanded = !section.expanded;
+    if (!nextStateExpanded && !settings.allowCloseAllSections) {
+        const currentlyExpandedSectionsCount = selectedGroup.sections.filter((x) => x.expanded).length;
+        if (currentlyExpandedSectionsCount <= 1) {
+            return;
+        }
+    }
+    if (nextStateExpanded && !settings.allowMultipleExpandedSections) {
+        section.onExpandedChanged(true);
+        selectedGroup.sections.forEach((x) => {
+            if (x.id !== section.id) {
+                x.onExpandedChanged(false);
+            }
+        });
+    }
+    else {
+        section.onExpandedChanged(nextStateExpanded);
+    }
+};
+const selectedGroup = $derived(settings.groups.find((d) => d.id === settings.selectedGroupId));
+</script>
+
+<div class="grouped-sidebar">
+  {#if (settings.groups.length > 1 || settings.alwaysShowAllGroups) && selectedGroup}
+    <div class="grouped-sidebar__header">
+      <SegmentedControl
+        segments={settings.groups.map((g) => ({ id: g.id, label: g.name, invalid: !g.isValid }))}
+        selected={selectedGroup.id}
+        on={{ change: handleSelectGroup }} />
+    </div>
+  {/if}
+  <div class="grouped-sidebar__sections">
+    {#if selectedGroup}
+      {#each selectedGroup.sections as section (section.id)}
+        <Section
+          section={section}
+          expandToFill={settings.expandToFill}
+          showSectionCollapser={selectedGroup.sections.length > 1 || settings.alwaysShowAllSections}
+          on={{ toggleSection: handleToggleSection }} />
+      {/each}
+    {/if}
+  </div>
+</div>
+
+<!--
+@component
+A sidebar with tabbed groups and collapsible sections. Supports accordion (single expanded) and multi-expand modes, with optional auto-height sections.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--grouped-sidebar--background` | Sidebar background | `light-dark(white, dark-800)` |
+| `--sc-kit--grouped-sidebar--padding-block` | Header vertical padding | `1rem` |
+| `--sc-kit--grouped-sidebar--padding-inline` | Header horizontal padding | `1rem` |
+-->
+
+<style>.grouped-sidebar {
+  --_grouped-sidebar--background: var(--sc-kit--grouped-sidebar--background, light-dark(#ffffff, #1e1e1e));
+  --_grouped-sidebar--padding-block: var(--sc-kit--grouped-sidebar--padding-block, 1rem);
+  --_grouped-sidebar--padding-inline: var(--sc-kit--grouped-sidebar--padding-inline, 1rem);
+  --sc-kit--grouped-sidebar-section--padding-block: var(--_grouped-sidebar--padding-block);
+  --sc-kit--grouped-sidebar-section--padding-inline: var(--_grouped-sidebar--padding-inline);
+  --sc-kit--segmented-control--background: light-dark(#f2f2f3, #222222);
+  --sc-kit--segmented-control--selected--background: light-dark(#ffffff, #242424);
+  --sc-kit--segmented-control--border-color: light-dark(#f2f2f3, #222222);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: var(--_grouped-sidebar--background);
+}
+.grouped-sidebar__header {
+  padding: var(--_grouped-sidebar--padding-block) var(--_grouped-sidebar--padding-inline);
+}
+.grouped-sidebar__sections {
+  display: flex;
+  overflow-y: auto;
+  flex-direction: column;
+  flex: 1;
+  --_cross-browser-scrollbar--thumb-color: transparent;
+  --_cross-browser-scrollbar--track-color: transparent;
+}
+.grouped-sidebar__sections:hover {
+  --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, light-dark(#d1d5db, #4b5563));
+  --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
+}
+.grouped-sidebar__sections::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.grouped-sidebar__sections::-webkit-scrollbar-track {
+  background: var(--_cross-browser-scrollbar--track-color);
+  border-radius: 100vw;
+}
+.grouped-sidebar__sections::-webkit-scrollbar-thumb {
+  background: var(--_cross-browser-scrollbar--thumb-color);
+  border-radius: 100vw;
+}
+@supports (scrollbar-color: transparent transparent) {
+  .grouped-sidebar__sections {
+    scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
+    scrollbar-width: thin;
+  }
+}</style>

package/dist/ui/grouped-sidebar/cmp.grouped-sidebar.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { GroupedSidebarSettings } from './types.svelte';
+type Props = {
+    settings: GroupedSidebarSettings;
+};
+/**
+ * A sidebar with tabbed groups and collapsible sections. Supports accordion (single expanded) and multi-expand modes, with optional auto-height sections.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--grouped-sidebar--background` | Sidebar background | `light-dark(white, dark-800)` |
+ * | `--sc-kit--grouped-sidebar--padding-block` | Header vertical padding | `1rem` |
+ * | `--sc-kit--grouped-sidebar--padding-inline` | Header horizontal padding | `1rem` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/grouped-sidebar/index.d.ts

@@ -0,0 +1,4 @@
+export { default as GroupedSidebar } from './cmp.grouped-sidebar.svelte';
+export { default as GroupedSidebarSection } from './cmp.grouped-sidebar-section.svelte';
+export { GroupedSidebarSettings, SidebarGroupModel, SidebarGroupSectionModel } from './types.svelte';
+export type { SidebarGroupInit, SidebarSectionInit, SidebarValidator } from './types.svelte';

package/dist/ui/grouped-sidebar/index.js

@@ -0,0 +1,3 @@
+export { default as GroupedSidebar } from './cmp.grouped-sidebar.svelte';
+export { default as GroupedSidebarSection } from './cmp.grouped-sidebar-section.svelte';
+export { GroupedSidebarSettings, SidebarGroupModel, SidebarGroupSectionModel } from './types.svelte';

package/dist/ui/grouped-sidebar/types.svelte.d.ts

@@ -0,0 +1,64 @@
+import { DynamicComponentModel } from '../dynamic-component';
+import type { Snippet } from 'svelte';
+export declare class GroupedSidebarSettings {
+    groups: ReadonlyArray<SidebarGroupModel>;
+    selectedGroupId: string;
+    allowMultipleExpandedSections: boolean;
+    allowCloseAllSections: boolean;
+    alwaysShowAllSections: boolean;
+    alwaysShowAllGroups: boolean;
+    expandToFill: boolean;
+    constructor(init: {
+        groups: SidebarGroupInit[];
+        initiallySelectedGroupId?: string;
+        allowMultipleExpandedSections?: boolean;
+        allowCloseAllSections?: boolean;
+        alwaysShowAllGroups?: boolean;
+        alwaysShowAllSections?: boolean;
+        expandToFill?: boolean;
+    });
+}
+export declare class SidebarGroupModel {
+    readonly id: string;
+    name: string;
+    sections: ReadonlyArray<SidebarGroupSectionModel>;
+    onSelected: () => void;
+    readonly isValid: boolean;
+    private _validator;
+    constructor(init: SidebarGroupInit);
+    get validator(): SidebarValidator;
+    updateValidator: (validator: SidebarValidator) => void;
+}
+export declare class SidebarGroupSectionModel {
+    readonly id: string;
+    name: string;
+    expanded: boolean;
+    component: DynamicComponentModel | Snippet;
+    withoutPaddings: boolean;
+    readonly isValid: boolean;
+    private _validator;
+    private _onExpandedCallback;
+    constructor(init: SidebarSectionInit);
+    get validator(): SidebarValidator | null;
+    onExpandedChanged: (val: boolean) => void;
+    updateValidator: (validator: SidebarValidator) => void;
+}
+export interface SidebarGroupInit {
+    id?: string;
+    name: string;
+    sections: SidebarSectionInit[];
+    onSelected?: () => void;
+    validator?: SidebarValidator;
+}
+export interface SidebarSectionInit {
+    id?: string;
+    name: string;
+    expanded?: boolean;
+    withoutPaddings?: boolean;
+    component: DynamicComponentModel | Snippet;
+    onExpandedChanged?: (val: boolean) => void;
+    validator?: SidebarValidator;
+}
+export type SidebarValidator = {
+    isValid: boolean;
+};

package/dist/ui/grouped-sidebar/types.svelte.js

@@ -0,0 +1,76 @@
+import { randomNanoid } from '../../core/utils';
+import { DynamicComponentModel } from '../dynamic-component';
+export class GroupedSidebarSettings {
+    groups = $state.raw([]);
+    selectedGroupId = $state('');
+    allowMultipleExpandedSections = $state(false);
+    allowCloseAllSections = $state(false);
+    alwaysShowAllSections = $state(false);
+    alwaysShowAllGroups = $state(false);
+    expandToFill = $state(true);
+    constructor(init) {
+        this.groups = init.groups.map((g) => new SidebarGroupModel(g));
+        this.selectedGroupId = init.initiallySelectedGroupId ?? '';
+        this.allowMultipleExpandedSections = init.allowMultipleExpandedSections ?? false;
+        this.allowCloseAllSections = init.allowCloseAllSections ?? false;
+        this.alwaysShowAllGroups = init.alwaysShowAllGroups ?? false;
+        this.alwaysShowAllSections = init.alwaysShowAllSections ?? false;
+        this.expandToFill = init.expandToFill ?? true;
+    }
+}
+export class SidebarGroupModel {
+    id;
+    name;
+    sections = $state.raw([]);
+    onSelected;
+    isValid = $derived.by(() => (this.validator?.isValid ?? true) && this.sections.every((s) => s.isValid));
+    _validator = $state.raw(null);
+    constructor(init) {
+        this.id = init.id ?? randomNanoid();
+        this.name = init.name;
+        this.sections = init.sections.map((s) => new SidebarGroupSectionModel(s));
+        this.onSelected = init.onSelected ?? (() => void 0);
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const that = this;
+        this._validator = init.validator || {
+            get isValid() {
+                return that.sections.every((s) => s.isValid);
+            }
+        };
+    }
+    get validator() {
+        return this._validator;
+    }
+    updateValidator = (validator) => {
+        this._validator = validator;
+    };
+}
+export class SidebarGroupSectionModel {
+    id;
+    name;
+    expanded = $state(false);
+    component;
+    withoutPaddings;
+    isValid = $derived.by(() => this.validator?.isValid ?? true);
+    _validator = $state.raw(null);
+    _onExpandedCallback;
+    constructor(init) {
+        this.id = init.id ?? randomNanoid();
+        this.name = init.name;
+        this.expanded = init.expanded ?? false;
+        this.component = init.component;
+        this._onExpandedCallback = init.onExpandedChanged ?? null;
+        this.withoutPaddings = init.withoutPaddings ?? false;
+        this._validator = init.validator ?? null;
+    }
+    get validator() {
+        return this._validator;
+    }
+    onExpandedChanged = (val) => {
+        this.expanded = val;
+        this._onExpandedCallback?.(val);
+    };
+    updateValidator = (validator) => {
+        this._validator = validator;
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.2.29",
+  "version": "0.2.31",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -141,6 +141,10 @@
       "types": "./dist/ui/form-group/index.d.ts",
       "svelte": "./dist/ui/form-group/index.js"
     },
+    "./ui/grouped-sidebar": {
+      "types": "./dist/ui/grouped-sidebar/index.d.ts",
+      "svelte": "./dist/ui/grouped-sidebar/index.js"
+    },
     "./ui/html-block": {
       "types": "./dist/ui/html-block/index.d.ts",
       "svelte": "./dist/ui/html-block/index.js"