@streamscloud/kit 0.17.0 → 0.18.0

package/dist/ui/page-toolbar/cmp.reorderable-toggle-list.svelte

@@ -1,153 +0,0 @@
-<script lang="ts">import { Icon } from '../icon';
-import { Toggle } from '../toggle';
-import IconReorderDotsVertical from '@fluentui/svg-icons/icons/re_order_dots_vertical_20_regular.svg?raw';
-import { flip } from 'svelte/animate';
-import { dndzone } from 'svelte-dnd-action';
-let { items, on } = $props();
-const reorderableItems = $derived(items.filter((i) => !i.fixed));
-const fixedItems = $derived(items.filter((i) => i.fixed));
-let dndItems = $state.raw([]);
-$effect(() => {
-    dndItems = reorderableItems.map(({ id, label, enabled }) => ({ id, label, enabled }));
-});
-const flipDurationMs = 200;
-const emitChange = (reordered) => {
-    const merged = [
-        ...fixedItems.map(({ id, label, enabled, fixed }) => ({ id, label, enabled, fixed })),
-        ...reordered.map(({ id, label, enabled }) => ({ id, label, enabled }))
-    ];
-    on.change(merged);
-};
-const handleConsider = (e) => {
-    dndItems = e.detail.items;
-};
-const handleFinalize = (e) => {
-    emitChange(e.detail.items);
-};
-const handleToggle = (id, enabled) => {
-    emitChange(dndItems.map((i) => (i.id === id ? { ...i, enabled } : i)));
-};
-const handleFixedToggle = (id, enabled) => {
-    const updatedFixed = fixedItems.map(({ id: fId, label, enabled: fEnabled, fixed }) => ({
-        id: fId,
-        label,
-        enabled: fId === id ? enabled : fEnabled,
-        fixed
-    }));
-    on.change([...updatedFixed, ...dndItems.map(({ id, label, enabled }) => ({ id, label, enabled }))]);
-};
-</script>
-
-<div class="reorderable-toggle-list">
-  {#each fixedItems as item (item.id)}
-    <div class="reorderable-toggle-list__item">
-      <div class="reorderable-toggle-list__drag-handle reorderable-toggle-list__drag-handle--hidden">
-        <Icon src={IconReorderDotsVertical} />
-      </div>
-      <div class="reorderable-toggle-list__label">
-        {item.label}
-      </div>
-      <div class="reorderable-toggle-list__toggle">
-        <Toggle
-          checked={item.enabled}
-          on={{
-            change: (value) => handleFixedToggle(item.id, value)
-          }} />
-      </div>
-    </div>
-  {/each}
-  <div
-    class="reorderable-toggle-list__dnd"
-    use:dndzone={{
-      items: dndItems,
-      dropTargetStyle: {},
-      flipDurationMs,
-      morphDisabled: true
-    }}
-    onconsider={handleConsider}
-    onfinalize={handleFinalize}>
-    {#each dndItems as item (item.id)}
-      <div class="reorderable-toggle-list__item" animate:flip={{ duration: flipDurationMs }}>
-        <div class="reorderable-toggle-list__drag-handle">
-          <Icon src={IconReorderDotsVertical} />
-        </div>
-        <div class="reorderable-toggle-list__label">
-          {item.label}
-        </div>
-        <div class="reorderable-toggle-list__toggle">
-          <Toggle
-            checked={item.enabled}
-            on={{
-              change: (value) => handleToggle(item.id, value)
-            }} />
-        </div>
-      </div>
-    {/each}
-  </div>
-</div>
-
-<!--
-@component
-A reorderable list of toggle items with drag-and-drop support. Fixed items appear above the reorderable zone.
-
-### CSS Custom Properties
-| Property | Description | Default |
-|---|---|---|
-| `--sc-kit--reorderable-toggle-list--label--color` | Label text color | `var(--sc-kit--color--text--primary)` |
-| `--sc-kit--reorderable-toggle-list--handle--color` | Drag handle icon color | `var(--sc-kit--color--text--secondary)` |
-| `--sc-kit--reorderable-toggle-list--handle--background` | Drag handle background | `var(--sc-kit--color--bg--element)` |
--->
-
-<style>.reorderable-toggle-list {
-  --_reorderable-toggle-list--label--color: var(--sc-kit--reorderable-toggle-list--label--color, var(--sc-kit--color--text--primary));
-  --_reorderable-toggle-list--handle--color: var(--sc-kit--reorderable-toggle-list--handle--color, var(--sc-kit--color--text--secondary));
-  --_reorderable-toggle-list--handle--background: var(--sc-kit--reorderable-toggle-list--handle--background, var(--sc-kit--color--bg--element));
-  display: flex;
-  flex-direction: column;
-  gap: var(--sc-kit--space--3);
-}
-.reorderable-toggle-list__dnd {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sc-kit--space--3);
-}
-.reorderable-toggle-list__item {
-  display: flex;
-  align-items: center;
-  gap: var(--sc-kit--space--3);
-  padding: var(--sc-kit--space--1) var(--sc-kit--space--2);
-}
-.reorderable-toggle-list__drag-handle {
-  --sc-kit--icon--size: 1rem;
-  --sc-kit--icon--color: var(--_reorderable-toggle-list--handle--color);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 1.375rem;
-  padding-inline: 0.1875rem;
-  border-radius: var(--sc-kit--radius--sm) 0 0 var(--sc-kit--radius--sm);
-  cursor: grab;
-  background: var(--_reorderable-toggle-list--handle--background);
-}
-.reorderable-toggle-list__drag-handle:active {
-  cursor: grabbing;
-}
-.reorderable-toggle-list__drag-handle--hidden {
-  visibility: hidden;
-}
-.reorderable-toggle-list__label {
-  flex: 1;
-  min-width: 0;
-  font-size: var(--sc-kit--font-size--md);
-  font-weight: var(--sc-kit--font-weight--regular);
-  line-height: var(--sc-kit--line-height--md);
-  color: var(--_reorderable-toggle-list--label--color);
-  text-overflow: ellipsis;
-  max-width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-}
-.reorderable-toggle-list__toggle {
-  flex-shrink: 0;
-  margin-left: auto;
-}</style>

package/dist/ui/page-toolbar/cmp.reorderable-toggle-list.svelte.d.ts

@@ -1,20 +0,0 @@
-import type { ReorderableToggleItem } from './types';
-type Props = {
-    items: ReorderableToggleItem[];
-    on: {
-        change: (items: ReorderableToggleItem[]) => void;
-    };
-};
-/**
- * A reorderable list of toggle items with drag-and-drop support. Fixed items appear above the reorderable zone.
- *
- * ### CSS Custom Properties
- * | Property | Description | Default |
- * |---|---|---|
- * | `--sc-kit--reorderable-toggle-list--label--color` | Label text color | `var(--sc-kit--color--text--primary)` |
- * | `--sc-kit--reorderable-toggle-list--handle--color` | Drag handle icon color | `var(--sc-kit--color--text--secondary)` |
- * | `--sc-kit--reorderable-toggle-list--handle--background` | Drag handle background | `var(--sc-kit--color--bg--element)` |
- */
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;

package/dist/ui/page-toolbar/cmp.toolbar-checkbox-item.svelte

@@ -1,19 +0,0 @@
-<script lang="ts">import { Checkbox } from '../checkbox';
-const { checked, children, on } = $props();
-</script>
-
-<div class="toolbar-checkbox-item">
-  <Checkbox checked={checked} label={children} on={{ change: (value) => on?.change?.(value) }} />
-</div>
-
-<!--
-@component
-A checkbox item for toolbar panels. Wraps the kit Checkbox with toolbar-appropriate sizing.
--->
-
-<style>.toolbar-checkbox-item {
-  padding: var(--sc-kit--space--1) var(--sc-kit--space--2);
-  overflow: hidden;
-  --sc-kit--checkbox--gap: var(--sc-kit--space--5);
-  --sc-kit--checkbox--icon--size: 1.125rem;
-}</style>

package/dist/ui/page-toolbar/cmp.toolbar-checkbox-item.svelte.d.ts

@@ -1,12 +0,0 @@
-import type { Snippet } from 'svelte';
-type Props = {
-    checked: boolean;
-    children: Snippet;
-    on?: {
-        change?: (value: boolean) => void;
-    };
-};
-/** A checkbox item for toolbar panels. Wraps the kit Checkbox with toolbar-appropriate sizing. */
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;

package/dist/ui/page-toolbar/cmp.toolbar-panel-button.svelte

@@ -1,42 +0,0 @@
-<script lang="ts">const { children, on } = $props();
-export {};
-</script>
-
-<button type="button" class="toolbar-panel-button" onclick={() => on?.click?.()}>
-  {@render children()}
-</button>
-
-<!--
-@component
-A text-row button for toolbar panels / popovers (rendered inside `<ToolbarPanel>` / `<ToolbarPopover>`).
-For the toolbar's primary action area use `<ToolbarButton>` instead.
-
-### CSS Custom Properties
-| Property | Description | Default |
-|---|---|---|
-| `--sc-kit--toolbar-panel-button--color` | Text color | `var(--sc-kit--color--text--primary)` |
-| `--sc-kit--toolbar-panel-button--color-hover` | Text color on hover | `var(--sc-kit--color--accent)` |
--->
-
-<style>.toolbar-panel-button {
-  --_toolbar-panel-button--color: var(--sc-kit--toolbar-panel-button--color, var(--sc-kit--color--text--primary));
-  --_toolbar-panel-button--color-hover: var(--sc-kit--toolbar-panel-button--color-hover, var(--sc-kit--color--accent));
-  appearance: none;
-  background: transparent;
-  border: 0;
-  text-align: inherit;
-  cursor: pointer;
-  font-size: var(--sc-kit--font-size--md);
-  font-weight: var(--sc-kit--font-weight--regular);
-  line-height: var(--sc-kit--line-height--md);
-  color: var(--_toolbar-panel-button--color);
-  padding: var(--sc-kit--space--1) var(--sc-kit--space--2);
-  max-width: 100%;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-}
-.toolbar-panel-button:hover {
-  color: var(--_toolbar-panel-button--color-hover);
-}</style>

package/dist/ui/page-toolbar/cmp.toolbar-panel-button.svelte.d.ts

@@ -1,20 +0,0 @@
-import type { Snippet } from 'svelte';
-type Props = {
-    children: Snippet;
-    on?: {
-        click?: () => void;
-    };
-};
-/**
- * A text-row button for toolbar panels / popovers (rendered inside `<ToolbarPanel>` / `<ToolbarPopover>`).
- * For the toolbar's primary action area use `<ToolbarButton>` instead.
- *
- * ### CSS Custom Properties
- * | Property | Description | Default |
- * |---|---|---|
- * | `--sc-kit--toolbar-panel-button--color` | Text color | `var(--sc-kit--color--text--primary)` |
- * | `--sc-kit--toolbar-panel-button--color-hover` | Text color on hover | `var(--sc-kit--color--accent)` |
- */
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;

package/dist/ui/page-toolbar/cmp.toolbar-panel.svelte

@@ -1,57 +0,0 @@
-<script lang="ts">const { title, children, footer } = $props();
-export {};
-</script>
-
-<div class="toolbar-panel">
-  <div class="toolbar-panel__title">{title}</div>
-  <div class="toolbar-panel__body">
-    {@render children()}
-    {#if footer}
-      <div class="toolbar-panel__divider"></div>
-      {@render footer()}
-    {/if}
-  </div>
-</div>
-
-<!--
-@component
-A panel container used inside toolbar dropdowns. Provides a title, body area, and optional footer.
-
-### CSS Custom Properties
-| Property | Description | Default |
-|---|---|---|
-| `--sc-kit--toolbar-panel--width` | Panel width | `21.875rem` |
-| `--sc-kit--toolbar-panel--title--color` | Title text color | `var(--sc-kit--color--text--primary)` |
-| `--sc-kit--toolbar-panel--divider--color` | Divider line color | `var(--sc-kit--color--border)` |
--->
-
-<style>.toolbar-panel {
-  --_toolbar-panel--width: var(--sc-kit--toolbar-panel--width, 21.875rem);
-  --_toolbar-panel--title--color: var(--sc-kit--toolbar-panel--title--color, var(--sc-kit--color--text--primary));
-  --_toolbar-panel--divider--color: var(--sc-kit--toolbar-panel--divider--color, var(--sc-kit--color--border));
-  width: var(--_toolbar-panel--width);
-  padding: var(--sc-kit--space--6);
-}
-.toolbar-panel__title {
-  font-size: var(--sc-kit--font-size--md);
-  font-weight: var(--sc-kit--font-weight--semibold);
-  line-height: var(--sc-kit--line-height--md);
-  color: var(--_toolbar-panel--title--color);
-  margin-bottom: var(--sc-kit--space--2);
-  min-width: 0;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-}
-.toolbar-panel__body {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sc-kit--space--4);
-  padding-block: var(--sc-kit--space--2);
-}
-.toolbar-panel__divider {
-  height: 1px;
-  background: var(--_toolbar-panel--divider--color);
-  margin: var(--sc-kit--space--1) var(--sc-kit--space--2);
-}</style>

package/dist/ui/page-toolbar/cmp.toolbar-panel.svelte.d.ts

@@ -1,19 +0,0 @@
-import type { Snippet } from 'svelte';
-type Props = {
-    title: string;
-    children: Snippet;
-    footer?: Snippet;
-};
-/**
- * A panel container used inside toolbar dropdowns. Provides a title, body area, and optional footer.
- *
- * ### CSS Custom Properties
- * | Property | Description | Default |
- * |---|---|---|
- * | `--sc-kit--toolbar-panel--width` | Panel width | `21.875rem` |
- * | `--sc-kit--toolbar-panel--title--color` | Title text color | `var(--sc-kit--color--text--primary)` |
- * | `--sc-kit--toolbar-panel--divider--color` | Divider line color | `var(--sc-kit--color--border)` |
- */
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;

package/dist/ui/page-toolbar/cmp.toolbar-toggle-item.svelte

@@ -1,16 +0,0 @@
-<script lang="ts">import { Toggle } from '../toggle';
-const { checked, children, on } = $props();
-</script>
-
-<div class="toolbar-toggle-item">
-  <Toggle checked={checked} label={children} layout="spread" on={{ change: (value) => on?.change?.(value) }} />
-</div>
-
-<!--
-@component
-A toggle item for toolbar panels. Wraps the kit Toggle with toolbar-appropriate padding.
--->
-
-<style>.toolbar-toggle-item {
-  padding: var(--sc-kit--space--1) var(--sc-kit--space--2);
-}</style>

package/dist/ui/page-toolbar/cmp.toolbar-toggle-item.svelte.d.ts

@@ -1,12 +0,0 @@
-import type { Snippet } from 'svelte';
-type Props = {
-    checked: boolean;
-    children: Snippet;
-    on?: {
-        change?: (value: boolean) => void;
-    };
-};
-/** A toggle item for toolbar panels. Wraps the kit Toggle with toolbar-appropriate padding. */
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;

package/dist/ui/table/table-cells/table-select-cell.svelte

@@ -1,28 +0,0 @@
-<script lang="ts" generics="T extends {id: string}">import { Singleselect } from '../../select';
-let { item, column } = $props();
-const getValueForColumn = (column, item) => (column.valueFactory ? column.valueFactory(item) : item[column.id]);
-const onSelected = (value) => {
-    column.onSelected(item, value);
-    item = item;
-};
-</script>
-
-{#if !column.visibilityFactory || column.visibilityFactory(item)}
-  {#if column.clearable}
-    <Singleselect
-      clearable
-      placeholder={column.placeholder || ' '}
-      value={getValueForColumn(column, item)}
-      options={column.optionsFactory(item)}
-      disabled={(column.disabledFactory && column.disabledFactory(item)) || false}
-      on={{ change: (v) => onSelected(v) }} />
-  {:else}
-    <Singleselect
-      clearable={false}
-      placeholder={column.placeholder || ' '}
-      value={getValueForColumn(column, item)}
-      options={column.optionsFactory(item)}
-      disabled={(column.disabledFactory && column.disabledFactory(item)) || false}
-      on={{ change: (v) => onSelected(v) }} />
-  {/if}
-{/if}

package/dist/ui/table/table-cells/table-text-input-cell.svelte

@@ -1,69 +0,0 @@
-<script lang="ts" generics="T extends {id: string}">import { Input } from '../../input';
-import { LineClamp } from '../../line-clamp';
-import { NumeralInput } from '../../numeral-input';
-import { untrack } from 'svelte';
-let { item, column } = $props();
-let errorText = $state('');
-const onInput = async (val) => {
-    item[column.id] = val === null ? '' : String(val);
-    await validate();
-    if (column.onInput) {
-        column.onInput(item, item[column.id]);
-    }
-};
-const validate = async () => {
-    if (!column.validationSchema) {
-        return;
-    }
-    try {
-        await column.validationSchema.validate(item[column.id]);
-        errorText = '';
-    }
-    catch (error) {
-        const err = error;
-        if (err.name !== 'ValidationError') {
-            throw error;
-        }
-        errorText = err.message;
-        return;
-    }
-    finally {
-        if (column.onValidated) {
-            column.onValidated(item, errorText);
-        }
-    }
-};
-$effect(() => {
-    untrack(() => void validate());
-});
-</script>
-
-<div class="table-text-input-cell" class:table-text-input-cell--errored={!!errorText}>
-  {#if column.inputType === 'number'}
-    <NumeralInput clearable value={item[column.id]} on={{ input: onInput }} />
-  {:else}
-    <Input value={item[column.id]} on={{ input: onInput }} />
-  {/if}
-  {#if errorText}
-    <div class="table-text-input-cell__error">
-      <LineClamp maxLines={2}>{errorText}</LineClamp>
-    </div>
-  {/if}
-</div>
-
-<style>.table-text-input-cell {
-  position: relative;
-  font-size: var(--_table--cell--font-size);
-  padding-top: 1.5em;
-  margin-bottom: 1.5em;
-}
-.table-text-input-cell__error {
-  position: absolute;
-  top: calc(100% + 0.1em);
-  left: 0;
-  right: 0;
-  display: block;
-  color: var(--sc-kit--color--danger);
-  font-size: 0.6875rem;
-  font-weight: 400;
-}</style>

package/dist/ui/table/table-cells/table-text-input-cell.svelte.d.ts

@@ -1,38 +0,0 @@
-import type { ITableTextInputColumn } from '../types';
-declare function $$render<T extends {
-    id: string;
-}>(): {
-    props: {
-        item: any;
-        column: ITableTextInputColumn<T>;
-    };
-    exports: {};
-    bindings: "";
-    slots: {};
-    events: {};
-};
-declare class __sveltets_Render<T extends {
-    id: string;
-}> {
-    props(): ReturnType<typeof $$render<T>>['props'];
-    events(): ReturnType<typeof $$render<T>>['events'];
-    slots(): ReturnType<typeof $$render<T>>['slots'];
-    bindings(): "";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <T extends {
-        id: string;
-    }>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
-    } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T extends {
-        id: string;
-    }>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const TableTextInputCell: $$IsomorphicComponent;
-type TableTextInputCell<T extends {
-    id: string;
-}> = InstanceType<typeof TableTextInputCell<T>>;
-export default TableTextInputCell;