@streamscloud/kit 0.9.12 → 0.9.13

package/dist/ui/duration/cmp.duration.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">const { seconds, variant = 'raw', showZero = false } = $props();
+const format = (secs) => {
+    const total = Math.max(0, Math.round(secs));
+    const hours = Math.floor(total / 3600);
+    const minutes = Math.floor((total % 3600) / 60);
+    const ss = (total % 60).toString().padStart(2, '0');
+    return hours > 0 ? `${hours}:${minutes.toString().padStart(2, '0')}:${ss}` : `${minutes}:${ss}`;
+};
+const value = $derived(seconds !== null && seconds > 0 ? format(seconds) : showZero ? format(0) : null);
+</script>
+
+{#if value !== null}
+  <span class="duration" class:duration--badge={variant === 'badge'}>{value}</span>
+{/if}
+
+<!--
+@component
+Renders a media/time duration given in seconds as a human-readable clock string — `m:ss` under an
+hour, `h:mm:ss` at or above (seconds are rounded, so a 60-second carry rolls up). `null` or ≤ 0
+renders nothing; pass `showZero` to force `0:00`. `variant='raw'` (default) is bare text that
+inherits the parent's typography; `variant='badge'` is a dark overlay pill for the bottom corner of
+a video thumbnail. Placement (e.g. absolute over media) is the consumer's job via the cascade.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--duration--badge--background` | Badge background (badge variant) | `rgb(0 0 0 / 55%)` (dark translucent) |
+| `--sc-kit--duration--badge--color` | Badge text color (badge variant) | `var(--sc-kit--color--text--on-accent)` |
+| `--sc-kit--duration--badge--padding` | Badge padding (badge variant) | `var(--sc-kit--space--1) var(--sc-kit--space--2)` |
+| `--sc-kit--duration--badge--border-radius` | Badge corner radius (badge variant) | `var(--sc-kit--radius--sm)` |
+| `--sc-kit--duration--badge--font-size` | Badge font size (badge variant) | `var(--sc-kit--font-size--xs)` |
+-->
+<style>.duration {
+  font-variant-numeric: tabular-nums;
+}
+.duration--badge {
+  --_duration--badge-background: var(--sc-kit--duration--badge--background, rgb(0 0 0 / 55%));
+  --_duration--badge-color: var(--sc-kit--duration--badge--color, var(--sc-kit--color--text--on-accent));
+  --_duration--badge-padding: var(--sc-kit--duration--badge--padding, var(--sc-kit--space--1) var(--sc-kit--space--2));
+  --_duration--badge-border-radius: var(--sc-kit--duration--badge--border-radius, var(--sc-kit--radius--sm));
+  --_duration--badge-font-size: var(--sc-kit--duration--badge--font-size, var(--sc-kit--font-size--xs));
+  display: inline-block;
+  padding: var(--_duration--badge-padding);
+  background: var(--_duration--badge-background);
+  border-radius: var(--_duration--badge-border-radius);
+  color: var(--_duration--badge-color);
+  font-size: var(--_duration--badge-font-size);
+  line-height: var(--sc-kit--leading--normal);
+}</style>

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

@@ -0,0 +1,27 @@
+type Props = {
+    /** Duration in seconds. Zero, negative, or `null` renders nothing unless `showZero`. */
+    seconds: number | null;
+    /** Visual style — `raw` is bare text; `badge` is a dark overlay pill for media thumbnails. @default 'raw' */
+    variant?: 'raw' | 'badge';
+    /** Render `0:00` for a null / zero / negative duration instead of nothing. @default false */
+    showZero?: boolean;
+};
+/**
+ * Renders a media/time duration given in seconds as a human-readable clock string — `m:ss` under an
+ * hour, `h:mm:ss` at or above (seconds are rounded, so a 60-second carry rolls up). `null` or ≤ 0
+ * renders nothing; pass `showZero` to force `0:00`. `variant='raw'` (default) is bare text that
+ * inherits the parent's typography; `variant='badge'` is a dark overlay pill for the bottom corner of
+ * a video thumbnail. Placement (e.g. absolute over media) is the consumer's job via the cascade.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--duration--badge--background` | Badge background (badge variant) | `rgb(0 0 0 / 55%)` (dark translucent) |
+ * | `--sc-kit--duration--badge--color` | Badge text color (badge variant) | `var(--sc-kit--color--text--on-accent)` |
+ * | `--sc-kit--duration--badge--padding` | Badge padding (badge variant) | `var(--sc-kit--space--1) var(--sc-kit--space--2)` |
+ * | `--sc-kit--duration--badge--border-radius` | Badge corner radius (badge variant) | `var(--sc-kit--radius--sm)` |
+ * | `--sc-kit--duration--badge--font-size` | Badge font size (badge variant) | `var(--sc-kit--font-size--xs)` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

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

package/dist/ui/duration/index.js

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

package/dist/ui/stepper-dialog-layout/cmp.stepper-dialog-layout.svelte

@@ -113,7 +113,7 @@ Completed sidebar steps are clickable to go back; `canAdvance(step)` gates Next
 -->
 
 <style>.stepper-dialog-layout {
-  --_sdl--sidebar-width: var(--sc-kit--stepper-dialog-layout--sidebar--width, functions.to-rem(320));
+  --_sdl--sidebar-width: var(--sc-kit--stepper-dialog-layout--sidebar--width, 20rem);
   --_sdl--sidebar-background: var(--sc-kit--stepper-dialog-layout--sidebar--background, var(--sc-kit--color--bg--field-alt));
   --sc-kit--dialog--height: var(--sc-kit--stepper-dialog-layout--height, auto);
   --sc-kit--dialog--body--overflow-y: auto;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.9.12",
+  "version": "0.9.13",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -163,6 +163,10 @@
       "types": "./dist/ui/drawer/index.d.ts",
       "svelte": "./dist/ui/drawer/index.js"
     },
+    "./ui/duration": {
+      "types": "./dist/ui/duration/index.d.ts",
+      "svelte": "./dist/ui/duration/index.js"
+    },
     "./ui/dynamic-component": {
       "types": "./dist/ui/dynamic-component/index.d.ts",
       "svelte": "./dist/ui/dynamic-component/index.js"