@streamscloud/kit 0.2.42 → 0.9.0

package/dist/ui/visual-select/cmp.visual-select.svelte.d.ts

@@ -0,0 +1,78 @@
+import type { Snippet } from 'svelte';
+declare function $$render<T>(): {
+    props: {
+        options: {
+            value: T;
+            label: string;
+            /**
+             * Tile graphic — SVG source string or snippet. Graphics inherit color from the thumb
+             * container (`fill="currentColor"` in the SVG) so they repaint from muted gray to accent
+             * when the tile becomes selected.
+             */
+            graphic: string | Snippet;
+            disabled?: boolean;
+        }[];
+        /** Tiles per row in the auto-grid. @default 3 */
+        cols?: number;
+        /** Global disabled — every tile is non-interactive. */
+        disabled?: boolean;
+        /** Optional equality fn — defaults to `===`. Useful when `T` is a non-primitive. */
+        compare?: (a: T, b: T) => boolean;
+    } & ({
+        multi: false;
+        value: T | null;
+        on?: {
+            change?: (value: T | null) => void;
+        };
+    } | {
+        multi: true;
+        value: T[];
+        on?: {
+            change?: (value: T[]) => void;
+        };
+    });
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(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>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * Card-radio (or card-checkbox via `multi`) group. Each tile shows a small graphic above an
+ * uppercase label. Graphics render with `fill="currentColor"` so they shift from muted gray to
+ * accent when the tile becomes selected. Selection state recolors the tile's border + background
+ * and lifts the thumb to a panel background with an accent foreground.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--visual-select--tile-width` | Fixed tile width | `120px` |
+ * | `--sc-kit--visual-select--gap` | Gap between tiles | `var(--sc-kit--space--2)` |
+ * | `--sc-kit--visual-select--tile--background` | Tile background (unselected) | `var(--sc-kit--color--bg--panel)` |
+ * | `--sc-kit--visual-select--tile--background--selected` | Tile background when selected | `var(--sc-kit--color--accent--softer)` |
+ * | `--sc-kit--visual-select--tile--border-color` | Tile border (unselected) | `var(--sc-kit--color--border--field)` |
+ * | `--sc-kit--visual-select--tile--border-color--hover` | Tile border on hover | `var(--sc-kit--color--border--strong)` |
+ * | `--sc-kit--visual-select--tile--border-color--selected` | Tile border when selected | `var(--sc-kit--color--accent)` |
+ * | `--sc-kit--visual-select--thumb--background` | Thumb background (unselected) | `var(--sc-kit--color--bg--active)` |
+ * | `--sc-kit--visual-select--thumb--background--selected` | Thumb background when selected | `var(--sc-kit--color--bg--panel)` |
+ * | `--sc-kit--visual-select--thumb--color` | Graphic color (unselected) | `var(--sc-kit--color--text--muted)` |
+ * | `--sc-kit--visual-select--thumb--color--selected` | Graphic color when selected | `var(--sc-kit--color--accent)` |
+ * | `--sc-kit--visual-select--label--color` | Label color (unselected) | `var(--sc-kit--color--text--secondary)` |
+ * | `--sc-kit--visual-select--label--color--selected` | Label color when selected | `var(--sc-kit--color--text--primary)` |
+ */
+declare const Cmp: $$IsomorphicComponent;
+type Cmp<T> = InstanceType<typeof Cmp<T>>;
+export default Cmp;

package/dist/ui/visual-select/index.d.ts

@@ -0,0 +1 @@
+export { default as VisualSelect } from './cmp.visual-select.svelte';

package/dist/ui/visual-select/index.js

@@ -0,0 +1 @@
+export { default as VisualSelect } from './cmp.visual-select.svelte';

package/dist/ui/website-input/cmp.website-input.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">import { Input } from '../input';
+import { WebsiteInputLocalization } from './website-input-localization';
+let { value, size = 'md', prefix = 'https://', on, ...rest } = $props();
+const localization = new WebsiteInputLocalization();
+// Strip any pre-existing http/https prefix from the external value, so users always see just the host.
+const stripPrefix = (raw) => raw.replace(/^https?:\/\//i, '');
+const toFull = (display) => {
+    const cleaned = stripPrefix(display).trim();
+    return cleaned === '' ? '' : prefix + cleaned;
+};
+const displayValue = $derived(stripPrefix(value ?? ''));
+const handleInput = (v) => on?.input?.(toFull(v));
+const handleChange = (v) => on?.change?.(toFull(v));
+</script>
+
+{#snippet prefixSlot()}
+  <span class="website-input__prefix website-input__prefix--{size}" aria-label={localization.prefixLabel}>{prefix}</span>
+{/snippet}
+
+<Input
+  {...rest}
+  value={displayValue}
+  size={size}
+  autocomplete="url"
+  autocapitalize="none"
+  inputmode="url"
+  spellcheck={false}
+  prefix={prefixSlot}
+  on={{
+    input: handleInput,
+    change: handleChange,
+    focus: () => on?.focus?.(),
+    blur: () => on?.blur?.(),
+    mounted: (data) => on?.mounted?.(data)
+  }} />
+
+<!--
+@component
+A URL input with a fixed protocol prefix shown in a tonally distinct gray segment. The bound `value`
+is always the full URL (with `prefix`) or `''`; users type only the host/path.
+
+Built as a thin wrapper around kit `Input` — the prefix segment is rendered through Input's `prefix`
+snippet slot. The slot is full-height, flush against the field's left rounded edge (Input suppresses
+its own left padding when `prefix` is set), and naturally sits behind the underline overlay.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--website-input--prefix--background` | Prefix segment background | `--sc-kit--color--bg--field-alt` |
+| `--sc-kit--website-input--prefix--color` | Prefix text color | `--sc-kit--color--text--muted` |
+| `--sc-kit--website-input--prefix--border-color` | Vertical separator color | `--sc-kit--color--border--field` |
+
+Plus every public CSS variable exposed by `<Input>`.
+-->
+
+<style>.website-input__prefix {
+  --_wi--prefix-background: var(--sc-kit--website-input--prefix--background, var(--sc-kit--color--bg--field-alt));
+  --_wi--prefix-color: var(--sc-kit--website-input--prefix--color, var(--sc-kit--color--text--muted));
+  --_wi--prefix-border-color: var(--sc-kit--website-input--prefix--border-color, var(--sc-kit--color--border--field));
+  display: inline-flex;
+  align-items: center;
+  flex: 1;
+  background: var(--_wi--prefix-background);
+  color: var(--_wi--prefix-color);
+  border-inline-end: 1px solid var(--_wi--prefix-border-color);
+  line-height: var(--sc-kit--leading--tight);
+  user-select: none;
+  white-space: nowrap;
+}
+.website-input__prefix--sm {
+  padding-inline: var(--sc-kit--field--padding-inline--sm);
+}
+.website-input__prefix--md {
+  padding-inline: var(--sc-kit--field--padding-inline--md);
+}
+.website-input__prefix--lg {
+  padding-inline: var(--sc-kit--field--padding-inline--lg);
+}</style>

package/dist/ui/website-input/cmp.website-input.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { InputForwardedProps } from '../input';
+type Props = Omit<InputForwardedProps, 'autocomplete' | 'autocapitalize' | 'inputmode' | 'spellcheck'> & {
+    /** Prefix shown in the leading addon segment. @default 'https://' */
+    prefix?: string;
+};
+/**
+ * A URL input with a fixed protocol prefix shown in a tonally distinct gray segment. The bound `value`
+ * is always the full URL (with `prefix`) or `''`; users type only the host/path.
+ *
+ * Built as a thin wrapper around kit `Input` — the prefix segment is rendered through Input's `prefix`
+ * snippet slot. The slot is full-height, flush against the field's left rounded edge (Input suppresses
+ * its own left padding when `prefix` is set), and naturally sits behind the underline overlay.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--website-input--prefix--background` | Prefix segment background | `--sc-kit--color--bg--field-alt` |
+ * | `--sc-kit--website-input--prefix--color` | Prefix text color | `--sc-kit--color--text--muted` |
+ * | `--sc-kit--website-input--prefix--border-color` | Vertical separator color | `--sc-kit--color--border--field` |
+ *
+ * Plus every public CSS variable exposed by `<Input>`.
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/website-input/index.d.ts

@@ -0,0 +1 @@
+export { default as WebsiteInput } from './cmp.website-input.svelte';

package/dist/ui/website-input/index.js

@@ -0,0 +1 @@
+export { default as WebsiteInput } from './cmp.website-input.svelte';

package/dist/ui/website-input/website-input-localization.d.ts

@@ -0,0 +1,3 @@
+export declare class WebsiteInputLocalization {
+    get prefixLabel(): string;
+}

package/dist/ui/website-input/website-input-localization.js

@@ -0,0 +1,12 @@
+import { AppLocale } from '../../core/locale';
+const loc = {
+    prefixLabel: {
+        en: 'URL protocol',
+        no: 'URL-protokoll'
+    }
+};
+export class WebsiteInputLocalization {
+    get prefixLabel() {
+        return loc.prefixLabel[AppLocale.current];
+    }
+}