@streamscloud/kit 0.2.42 → 0.9.1

package/dist/ui/spinner/cmp.spinner.svelte

@@ -0,0 +1,156 @@
+<script lang="ts">let { size = 'md', color, label, position, blocking = false, timeout = 0 } = $props();
+let visible = $state(false);
+$effect(() => {
+    if (timeout <= 0) {
+        visible = true;
+        return;
+    }
+    visible = false;
+    const timer = setTimeout(() => (visible = true), timeout);
+    return () => clearTimeout(timer);
+});
+</script>
+
+{#if visible}
+  {#if blocking}
+    <div class="spinner-overlay" class:spinner-overlay--fixed={position === 'fixed-center'}></div>
+  {/if}
+
+  <span
+    class="spinner spinner--{size}"
+    class:spinner--accent={color === 'accent'}
+    class:spinner--muted={color === 'muted'}
+    class:spinner--success={color === 'success'}
+    class:spinner--warning={color === 'warning'}
+    class:spinner--danger={color === 'danger'}
+    class:spinner--text={color === 'text'}
+    class:spinner--on-accent={color === 'on-accent'}
+    class:spinner--absolute-center={position === 'absolute-center'}
+    class:spinner--fixed-center={position === 'fixed-center'}
+    role={label ? 'status' : undefined}
+    aria-label={label}
+    aria-hidden={label ? undefined : true}>
+    <svg class="spinner__svg" viewBox="0 0 24 24" aria-hidden="true">
+      <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" fill="none" stroke-dasharray="40 60" stroke-linecap="round"></circle>
+    </svg>
+  </span>
+{/if}
+
+<!--
+@component
+Spinner — indeterminate loading indicator. Single-arc circle rotating at a constant rate. Color preset (`accent` default) resolves to a semantic token; override the public CSS vars on any ancestor for global theming. Pass `label` to expose it to screen readers as a live status region.
+
+Convenience props for the common "load happens, show a centered spinner with optional dimmer" pattern: `position` centers it within the nearest positioned ancestor (`absolute-center`) or the viewport (`fixed-center`); `blocking` adds a semi-transparent overlay; `timeout` delays visibility to avoid flicker for fast operations.
+
+For tight inline glyphs inside other kit cmps (Button loading state, async Select), use the internal `_internal/spinner` instead — that one fills its inline box and inherits `currentColor` for stroke.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--spinner--size` | Outer box size | per `size` preset |
+| `--sc-kit--spinner--color` | Stroke color | `--sc-kit--color--accent` |
+| `--sc-kit--spinner--color-accent` | Color for `accent` preset | `--sc-kit--color--accent` |
+| `--sc-kit--spinner--color-muted` | Color for `muted` preset | `--sc-kit--color--text--muted` |
+| `--sc-kit--spinner--color-success` | Color for `success` preset | `--sc-kit--color--success` |
+| `--sc-kit--spinner--color-warning` | Color for `warning` preset | `--sc-kit--color--warning` |
+| `--sc-kit--spinner--color-danger` | Color for `danger` preset | `--sc-kit--color--danger` |
+| `--sc-kit--spinner--color-text` | Color for `text` preset | `--sc-kit--color--text--primary` |
+| `--sc-kit--spinner--color-on-accent` | Color for `on-accent` preset | `--sc-kit--color--text--on-accent` |
+| `--sc-kit--spinner--duration` | Rotation duration | `1.6s` |
+| `--sc-kit--spinner--overlay--background` | Backdrop color when `blocking` is true | `rgba(0, 0, 0, 0.3)` |
+| `--sc-kit--spinner--overlay--z-index` | Backdrop stacking | `--sc-kit--z-index--popover` minus 1 |
+
+### Size presets
+| Class | `--sc-kit--spinner--size` |
+|---|---|
+| `spinner--sm` | `0.875rem` (14px) |
+| `spinner--md` | `1.25rem` (20px) |
+| `spinner--lg` | `2rem` (32px) |
+-->
+
+<style>.spinner-overlay {
+  --_overlay--background: var(--sc-kit--spinner--overlay--background, rgb(0 0 0 / 30%));
+  --_overlay--z-index: var(--sc-kit--spinner--overlay--z-index, calc(var(--sc-kit--z-index--popover) - 1));
+  position: absolute;
+  inset: 0;
+  background: var(--_overlay--background);
+  z-index: var(--_overlay--z-index);
+}
+.spinner-overlay--fixed {
+  position: fixed;
+}
+
+.spinner {
+  --_spinner--size: var(--sc-kit--spinner--size, 1.25rem);
+  --_spinner--color: var(--sc-kit--spinner--color, var(--_spinner--color-accent));
+  --_spinner--color-accent: var(--sc-kit--spinner--color-accent, var(--sc-kit--color--accent));
+  --_spinner--color-muted: var(--sc-kit--spinner--color-muted, var(--sc-kit--color--text--muted));
+  --_spinner--color-success: var(--sc-kit--spinner--color-success, var(--sc-kit--color--success));
+  --_spinner--color-warning: var(--sc-kit--spinner--color-warning, var(--sc-kit--color--warning));
+  --_spinner--color-danger: var(--sc-kit--spinner--color-danger, var(--sc-kit--color--danger));
+  --_spinner--color-text: var(--sc-kit--spinner--color-text, var(--sc-kit--color--text--primary));
+  --_spinner--color-on-accent: var(--sc-kit--spinner--color-on-accent, var(--sc-kit--color--text--on-accent));
+  --_spinner--duration: var(--sc-kit--spinner--duration, 1.6s);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--_spinner--size);
+  height: var(--_spinner--size);
+  color: var(--_spinner--color);
+  line-height: 0;
+  z-index: var(--sc-kit--z-index--popover);
+}
+.spinner--sm {
+  --sc-kit--spinner--size: 0.875rem;
+}
+.spinner--md {
+  --sc-kit--spinner--size: 1.25rem;
+}
+.spinner--lg {
+  --sc-kit--spinner--size: 2rem;
+}
+.spinner--accent {
+  --_spinner--color: var(--_spinner--color-accent);
+}
+.spinner--muted {
+  --_spinner--color: var(--_spinner--color-muted);
+}
+.spinner--success {
+  --_spinner--color: var(--_spinner--color-success);
+}
+.spinner--warning {
+  --_spinner--color: var(--_spinner--color-warning);
+}
+.spinner--danger {
+  --_spinner--color: var(--_spinner--color-danger);
+}
+.spinner--text {
+  --_spinner--color: var(--_spinner--color-text);
+}
+.spinner--on-accent {
+  --_spinner--color: var(--_spinner--color-on-accent);
+}
+.spinner--absolute-center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.spinner--fixed-center {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.spinner__svg {
+  width: 100%;
+  height: 100%;
+  animation: kit-spinner-rotate var(--_spinner--duration) linear infinite;
+}
+
+@keyframes kit-spinner-rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}</style>

package/dist/ui/spinner/cmp.spinner.svelte.d.ts

@@ -0,0 +1,47 @@
+type Props = {
+    /** Size preset (14 / 20 / 32 px). @default 'md' */
+    size?: 'sm' | 'md' | 'lg';
+    /** Color preset. Omit to fall through to the default (`accent`). */
+    color?: 'accent' | 'muted' | 'success' | 'warning' | 'danger' | 'text' | 'on-accent';
+    /** Screen-reader label. When set, the spinner becomes a live status region (`role="status"`); when omitted, the spinner is decorative (`aria-hidden`). */
+    label?: string;
+    /** Centering mode. `absolute-center` centers within the closest positioned ancestor; `fixed-center` centers in the viewport. Omit for an inline-flex glyph at the current position. */
+    position?: 'absolute-center' | 'fixed-center';
+    /** Renders a semi-transparent overlay behind the spinner. Pair with `position` for a full-area dimmer. */
+    blocking?: boolean;
+    /** Delay in ms before the spinner becomes visible (and the optional overlay renders). Prevents flicker for fast operations. @default 0 */
+    timeout?: number;
+};
+/**
+ * Spinner — indeterminate loading indicator. Single-arc circle rotating at a constant rate. Color preset (`accent` default) resolves to a semantic token; override the public CSS vars on any ancestor for global theming. Pass `label` to expose it to screen readers as a live status region.
+ *
+ * Convenience props for the common "load happens, show a centered spinner with optional dimmer" pattern: `position` centers it within the nearest positioned ancestor (`absolute-center`) or the viewport (`fixed-center`); `blocking` adds a semi-transparent overlay; `timeout` delays visibility to avoid flicker for fast operations.
+ *
+ * For tight inline glyphs inside other kit cmps (Button loading state, async Select), use the internal `_internal/spinner` instead — that one fills its inline box and inherits `currentColor` for stroke.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--spinner--size` | Outer box size | per `size` preset |
+ * | `--sc-kit--spinner--color` | Stroke color | `--sc-kit--color--accent` |
+ * | `--sc-kit--spinner--color-accent` | Color for `accent` preset | `--sc-kit--color--accent` |
+ * | `--sc-kit--spinner--color-muted` | Color for `muted` preset | `--sc-kit--color--text--muted` |
+ * | `--sc-kit--spinner--color-success` | Color for `success` preset | `--sc-kit--color--success` |
+ * | `--sc-kit--spinner--color-warning` | Color for `warning` preset | `--sc-kit--color--warning` |
+ * | `--sc-kit--spinner--color-danger` | Color for `danger` preset | `--sc-kit--color--danger` |
+ * | `--sc-kit--spinner--color-text` | Color for `text` preset | `--sc-kit--color--text--primary` |
+ * | `--sc-kit--spinner--color-on-accent` | Color for `on-accent` preset | `--sc-kit--color--text--on-accent` |
+ * | `--sc-kit--spinner--duration` | Rotation duration | `1.6s` |
+ * | `--sc-kit--spinner--overlay--background` | Backdrop color when `blocking` is true | `rgba(0, 0, 0, 0.3)` |
+ * | `--sc-kit--spinner--overlay--z-index` | Backdrop stacking | `--sc-kit--z-index--popover` minus 1 |
+ *
+ * ### Size presets
+ * | Class | `--sc-kit--spinner--size` |
+ * |---|---|
+ * | `spinner--sm` | `0.875rem` (14px) |
+ * | `spinner--md` | `1.25rem` (20px) |
+ * | `spinner--lg` | `2rem` (32px) |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/spinner/index.d.ts

@@ -0,0 +1 @@
+export { default as Spinner } from './cmp.spinner.svelte';

package/dist/ui/spinner/index.js

@@ -0,0 +1 @@
+export { default as Spinner } from './cmp.spinner.svelte';

package/dist/ui/stack/cmp.stack.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">const { direction = 'column', gap = 4, align = 'stretch', justify = 'start', wrap = false, children } = $props();
+const justifyValue = $derived(justify === 'between' ? 'space-between' : justify === 'around' ? 'space-around' : justify);
+export {};
+</script>
+
+<div
+  class="stack"
+  style:flex-direction={direction}
+  style:gap={`var(--sc-kit--space--${gap})`}
+  style:align-items={align}
+  style:justify-content={justifyValue}
+  style:flex-wrap={wrap ? 'wrap' : 'nowrap'}>
+  {@render children()}
+</div>
+
+<!--
+@component
+Stack — flex layout primitive. `direction="column"` stacks children vertically, `"row"` lays them
+out horizontally. `gap` maps to the `--sc-kit--space--N` token scale (0–12); `align` / `justify`
+control the cross- / main-axis; `wrap` allows multi-line rows.
+-->
+<style>.stack {
+  display: flex;
+  min-width: 0;
+}</style>

package/dist/ui/stack/cmp.stack.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    /** Layout direction. @default 'column' (vertical stack) */
+    direction?: 'column' | 'row';
+    /** Gap between items, mapped to the `--sc-kit--space--N` token scale. @default 4 */
+    gap?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12;
+    /** Cross-axis alignment (`align-items`). @default 'stretch' */
+    align?: 'start' | 'center' | 'end' | 'stretch';
+    /** Main-axis alignment (`justify-content`). @default 'start' */
+    justify?: 'start' | 'center' | 'end' | 'between' | 'around';
+    /** Wrap items onto multiple lines (row direction only). @default false */
+    wrap?: boolean;
+    children: Snippet;
+};
+/**
+ * Stack — flex layout primitive. `direction="column"` stacks children vertically, `"row"` lays them
+ * out horizontally. `gap` maps to the `--sc-kit--space--N` token scale (0–12); `align` / `justify`
+ * control the cross- / main-axis; `wrap` allows multi-line rows.
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/stack/index.d.ts

@@ -0,0 +1 @@
+export { default as Stack } from './cmp.stack.svelte';

package/dist/ui/stack/index.js

@@ -0,0 +1 @@
+export { default as Stack } from './cmp.stack.svelte';

package/dist/ui/stat/cmp.stat.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">import { Icon } from '../icon';
+import IconArrowDown from '@fluentui/svg-icons/icons/arrow_down_12_regular.svg?raw';
+import IconArrowUp from '@fluentui/svg-icons/icons/arrow_up_12_regular.svg?raw';
+import IconSubtract from '@fluentui/svg-icons/icons/subtract_12_regular.svg?raw';
+let { label, value, caption = '', delta = null, deltaSuffix = '%', invertSentiment = false } = $props();
+const sentiment = $derived(delta === null || delta === 0 ? 'neutral' : delta > 0 !== invertSentiment ? 'positive' : 'negative');
+const deltaIcon = $derived(delta === null ? null : delta > 0 ? IconArrowUp : delta < 0 ? IconArrowDown : IconSubtract);
+</script>
+
+<div class="stat">
+  <div class="stat__label">{label}</div>
+  <div class="stat__value-row">
+    <div class="stat__value">{value}</div>
+    {#if delta !== null && deltaIcon}
+      <div class="stat__delta stat__delta--{sentiment}">
+        <span class="stat__delta-icon" aria-hidden="true"><Icon src={deltaIcon} /></span>
+        <span>{Math.abs(delta)}{deltaSuffix}</span>
+      </div>
+    {/if}
+  </div>
+  {#if caption}<div class="stat__caption">{caption}</div>{/if}
+</div>
+
+<!--
+@component
+A metric tile: uppercase label on top, a big tabular-nums number, optional `delta` indicator with an
+arrow and tinted color, optional caption beneath. The `delta` sentiment maps to success/danger by
+default; pass `invertSentiment` for metrics where "going up is bad" (errors, latency).
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--stat--label--color` | Label color | `--sc-kit--color--text--muted` |
+| `--sc-kit--stat--label--font-size` | Label font size | `--sc-kit--font-size--sm` |
+| `--sc-kit--stat--value--color` | Value color | `--sc-kit--color--text--primary` |
+| `--sc-kit--stat--value--font-size` | Value font size | `--sc-kit--font-size--2xl` |
+| `--sc-kit--stat--caption--color` | Caption color | `--sc-kit--color--text--muted` |
+| `--sc-kit--stat--delta--positive` | Positive-sentiment color | `--sc-kit--color--success` |
+| `--sc-kit--stat--delta--negative` | Negative-sentiment color | `--sc-kit--color--danger` |
+| `--sc-kit--stat--delta--neutral` | Neutral (zero / no delta) color | `--sc-kit--color--text--muted` |
+-->
+
+<style>.stat {
+  --_stat--label-color: var(--sc-kit--stat--label--color, var(--sc-kit--color--text--muted));
+  --_stat--label-font-size: var(--sc-kit--stat--label--font-size, var(--sc-kit--font-size--sm));
+  --_stat--value-color: var(--sc-kit--stat--value--color, var(--sc-kit--color--text--primary));
+  --_stat--value-font-size: var(--sc-kit--stat--value--font-size, var(--sc-kit--font-size--2xl));
+  --_stat--caption-color: var(--sc-kit--stat--caption--color, var(--sc-kit--color--text--muted));
+  --_stat--delta-positive: var(--sc-kit--stat--delta--positive, var(--sc-kit--color--success));
+  --_stat--delta-negative: var(--sc-kit--stat--delta--negative, var(--sc-kit--color--danger));
+  --_stat--delta-neutral: var(--sc-kit--stat--delta--neutral, var(--sc-kit--color--text--muted));
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.stat__label {
+  font-size: var(--_stat--label-font-size);
+  color: var(--_stat--label-color);
+  font-weight: var(--sc-kit--font-weight--medium);
+  text-transform: uppercase;
+  letter-spacing: var(--sc-kit--letter-spacing--wide);
+  line-height: var(--sc-kit--leading--tight);
+}
+.stat__value-row {
+  display: flex;
+  align-items: baseline;
+  gap: var(--sc-kit--space--2);
+}
+.stat__value {
+  font-size: var(--_stat--value-font-size);
+  font-weight: var(--sc-kit--font-weight--semibold);
+  color: var(--_stat--value-color);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: var(--sc-kit--letter-spacing--tight);
+  line-height: var(--sc-kit--leading--tight);
+}
+.stat__delta {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.125rem;
+  font-size: var(--sc-kit--font-size--sm);
+  font-variant-numeric: tabular-nums;
+  font-weight: var(--sc-kit--font-weight--medium);
+  line-height: var(--sc-kit--leading--tight);
+}
+.stat__delta-icon {
+  display: inline-flex;
+  align-items: center;
+  --sc-kit--icon--size: 0.75rem;
+  --sc-kit--icon--color: currentColor;
+}
+.stat__delta--positive {
+  color: var(--_stat--delta-positive);
+}
+.stat__delta--negative {
+  color: var(--_stat--delta-negative);
+}
+.stat__delta--neutral {
+  color: var(--_stat--delta-neutral);
+}
+.stat__caption {
+  font-size: var(--sc-kit--font-size--sm);
+  color: var(--_stat--caption-color);
+  line-height: var(--sc-kit--leading--tight);
+}</style>

package/dist/ui/stat/cmp.stat.svelte.d.ts

@@ -0,0 +1,34 @@
+type Props = {
+    /** Caption above the value (e.g. "Active users", "Errors"). */
+    label: string;
+    /** The headline number / string. */
+    value: string | number;
+    /** Optional small caption rendered under the value (e.g. "this week"). */
+    caption?: string;
+    /** Numeric change vs. comparison. Positive renders as success (green) by default, negative as danger. */
+    delta?: number | null;
+    /** Suffix appended to `delta` after the absolute value. @default '%' */
+    deltaSuffix?: string;
+    /** Flip the green/red mapping — for metrics where a positive delta is BAD (e.g. errors). @default false */
+    invertSentiment?: boolean;
+};
+/**
+ * A metric tile: uppercase label on top, a big tabular-nums number, optional `delta` indicator with an
+ * arrow and tinted color, optional caption beneath. The `delta` sentiment maps to success/danger by
+ * default; pass `invertSentiment` for metrics where "going up is bad" (errors, latency).
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--stat--label--color` | Label color | `--sc-kit--color--text--muted` |
+ * | `--sc-kit--stat--label--font-size` | Label font size | `--sc-kit--font-size--sm` |
+ * | `--sc-kit--stat--value--color` | Value color | `--sc-kit--color--text--primary` |
+ * | `--sc-kit--stat--value--font-size` | Value font size | `--sc-kit--font-size--2xl` |
+ * | `--sc-kit--stat--caption--color` | Caption color | `--sc-kit--color--text--muted` |
+ * | `--sc-kit--stat--delta--positive` | Positive-sentiment color | `--sc-kit--color--success` |
+ * | `--sc-kit--stat--delta--negative` | Negative-sentiment color | `--sc-kit--color--danger` |
+ * | `--sc-kit--stat--delta--neutral` | Neutral (zero / no delta) color | `--sc-kit--color--text--muted` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/stat/index.d.ts

@@ -0,0 +1 @@
+export { default as Stat } from './cmp.stat.svelte';

package/dist/ui/stat/index.js

@@ -0,0 +1 @@
+export { default as Stat } from './cmp.stat.svelte';