@dorsk/tsumikit 0.1.0

package/dist/components/atoms/Slider.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+	// Range/slider primitive. A real <input type="range"> (keeps the native
+	// slider role, keyboard stepping and form participation) restyled across
+	// engines from tokens. The track shows a filled portion up to the current
+	// value, and an optional `output` displays the value with a correct
+	// for-association. `bind:value` and all native attrs/events pass through.
+	import type { HTMLInputAttributes } from 'svelte/elements';
+
+	let {
+		value = $bindable(0),
+		min = 0,
+		max = 100,
+		step = 1,
+		label,
+		showValue = false,
+		format = (v: number) => String(v),
+		id = `slider-${Math.random().toString(36).slice(2, 8)}`,
+		class: klass = '',
+		el = $bindable(null),
+		...rest
+	}: HTMLInputAttributes & {
+		value?: number;
+		min?: number;
+		max?: number;
+		step?: number;
+		label?: string;
+		showValue?: boolean;
+		format?: (v: number) => string;
+		el?: HTMLInputElement | null;
+	} = $props();
+
+	// Fill percentage for the track gradient.
+	const pct = $derived(
+		Math.max(0, Math.min(100, ((Number(value) - +min) / (+max - +min || 1)) * 100))
+	);
+</script>
+
+<div class="slider {klass}" style="--pct: {pct}%">
+	<input
+		bind:this={el}
+		{id}
+		type="range"
+		{min}
+		{max}
+		{step}
+		bind:value
+		aria-label={label}
+		{...rest}
+	/>
+	{#if showValue}
+		<output for={id} class="slider-out">{format(Number(value))}</output>
+	{/if}
+</div>
+
+<style>
+	.slider {
+		display: flex;
+		align-items: center;
+		gap: var(--sp-3);
+		width: 100%;
+	}
+	input[type='range'] {
+		appearance: none;
+		-webkit-appearance: none;
+		flex: 1;
+		height: 1.25rem;
+		background: none;
+		cursor: pointer;
+	}
+	/* Track — WebKit/Blink. Filled up to --pct with the accent, then the rail. */
+	input[type='range']::-webkit-slider-runnable-track {
+		height: 0.35rem;
+		border-radius: var(--r-pill);
+		background: linear-gradient(
+			to right,
+			var(--accent) var(--pct),
+			var(--bg-elevated-2) var(--pct)
+		);
+	}
+	input[type='range']::-moz-range-track {
+		height: 0.35rem;
+		border-radius: var(--r-pill);
+		background: var(--bg-elevated-2);
+	}
+	input[type='range']::-moz-range-progress {
+		height: 0.35rem;
+		border-radius: var(--r-pill);
+		background: var(--accent);
+	}
+	/* Thumb */
+	input[type='range']::-webkit-slider-thumb {
+		appearance: none;
+		-webkit-appearance: none;
+		margin-top: -0.425rem; /* center on the 0.35rem track */
+		width: 1.2rem;
+		height: 1.2rem;
+		border-radius: 50%;
+		background: var(--accent);
+		border: 2px solid var(--bg);
+		box-shadow: var(--shadow-sm);
+		transition: transform 0.1s var(--ease);
+	}
+	input[type='range']::-moz-range-thumb {
+		width: 1.2rem;
+		height: 1.2rem;
+		border-radius: 50%;
+		background: var(--accent);
+		border: 2px solid var(--bg);
+		box-shadow: var(--shadow-sm);
+	}
+	input[type='range']:active::-webkit-slider-thumb {
+		transform: scale(1.12);
+	}
+	input[type='range']:focus-visible {
+		outline: none;
+	}
+	input[type='range']:focus-visible::-webkit-slider-thumb {
+		outline: 2px solid var(--accent);
+		outline-offset: 2px;
+	}
+	input[type='range']:focus-visible::-moz-range-thumb {
+		outline: 2px solid var(--accent);
+		outline-offset: 2px;
+	}
+	input[type='range']:disabled {
+		opacity: 0.45;
+		cursor: not-allowed;
+	}
+	.slider-out {
+		min-width: 2.5rem;
+		text-align: right;
+		font-size: var(--fs-sm);
+		font-variant-numeric: tabular-nums;
+		color: var(--text-muted);
+	}
+</style>

package/dist/components/atoms/Slider.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLInputAttributes & {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    label?: string;
+    showValue?: boolean;
+    format?: (v: number) => string;
+    el?: HTMLInputElement | null;
+};
+declare const Slider: import("svelte").Component<$$ComponentProps, {}, "value" | "el">;
+type Slider = ReturnType<typeof Slider>;
+export default Slider;

package/dist/components/atoms/Switch.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	// Canonical on/off toggle (role="switch") — a pill track with a sliding knob.
+	// Owns its sizing/colors from theme tokens; the parent supplies `checked`
+	// and an `onclick` handler plus an accessible label/title.
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+
+	let {
+		checked = false,
+		label,
+		class: klass = '',
+		...rest
+	}: HTMLButtonAttributes & { checked?: boolean; label: string } = $props();
+</script>
+
+<button
+	{...rest}
+	type="button"
+	class="switch {klass}"
+	class:on={checked}
+	role="switch"
+	aria-checked={checked}
+	aria-label={label}
+>
+	<span class="knob"></span>
+</button>
+
+<style>
+	.switch {
+		flex: none;
+		width: 2.75rem;
+		height: 1.6rem;
+		border-radius: var(--r-pill);
+		border: 1px solid var(--border-strong);
+		background: var(--bg-elevated-2);
+		padding: 2px;
+		display: flex;
+		align-items: center;
+		cursor: pointer;
+		transition:
+			background 0.14s var(--ease),
+			border-color 0.14s var(--ease);
+	}
+	.switch .knob {
+		width: 1.25rem;
+		height: 1.25rem;
+		border-radius: 50%;
+		background: var(--text-muted);
+		transition:
+			transform 0.14s var(--ease),
+			background 0.14s var(--ease);
+	}
+	.switch.on {
+		background: var(--accent);
+		border-color: var(--accent);
+	}
+	.switch.on .knob {
+		transform: translateX(1.15rem);
+		background: var(--text-on-accent);
+	}
+	.switch:disabled {
+		opacity: 0.45;
+		cursor: not-allowed;
+	}
+</style>

package/dist/components/atoms/Switch.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLButtonAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLButtonAttributes & {
+    checked?: boolean;
+    label: string;
+};
+declare const Switch: import("svelte").Component<$$ComponentProps, {}, "">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;

package/dist/components/atoms/Text.svelte

@@ -0,0 +1,127 @@
+<script lang="ts">
+	// Text primitive: the ONLY place body/label/caption/code text and its bearing
+	// elements (<p>/<span>/<label>/<div> of pure text) are emitted. `variant` picks
+	// a token preset; `tone`/`weight`/`size` override individual axes; bare <Text>
+	// (no props) inherits the surrounding style like a plain <span> so it can wrap
+	// inline glue text without changing rendering. All values come from tokens.
+	import type { Snippet } from 'svelte';
+
+	type Size = 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl';
+
+	let {
+		as = 'span',
+		variant,
+		tone = 'inherit',
+		weight,
+		size,
+		truncate = false,
+		class: klass = '',
+		children,
+		...rest
+	}: {
+		as?: 'span' | 'p' | 'div' | 'label';
+		// body: default reading text · label: form-label · caption: small meta ·
+		// code: monospace. Omit for inline glue that should inherit its parent.
+		variant?: 'body' | 'label' | 'caption' | 'code';
+		tone?: 'inherit' | 'default' | 'muted' | 'faint' | 'danger' | 'accent';
+		weight?: 'normal' | 'medium' | 'semibold' | 'bold';
+		size?: Size;
+		truncate?: boolean;
+		class?: string;
+		children?: Snippet;
+		[key: string]: unknown;
+	} = $props();
+</script>
+
+<svelte:element
+	this={as}
+	class="text {variant ? `v-${variant}` : ''} tone-{tone} {weight ? `fw-${weight}` : ''} {size
+		? `fs-${size}`
+		: ''} {truncate ? 'truncate' : ''} {klass}"
+	{...rest}
+>
+	{@render children?.()}
+</svelte:element>
+
+<style>
+	/* Base: inherit everything — a bare <Text> renders like a plain span. */
+	.text {
+		margin: 0;
+	}
+	/* Variants (presets) — listed before tone/weight/size so those override. */
+	.v-body {
+		font-size: var(--fs-base);
+		line-height: var(--lh-normal);
+		color: var(--text);
+	}
+	.v-label {
+		font-size: var(--fs-sm);
+		font-weight: var(--fw-medium);
+		color: var(--text-muted);
+	}
+	.v-caption {
+		font-size: var(--fs-xs);
+		color: var(--text-faint);
+	}
+	.v-code {
+		font-family: var(--font-mono);
+		font-size: 0.92em;
+	}
+	/* Tone (colour) — overrides variant colour. */
+	.tone-default {
+		color: var(--text);
+	}
+	.tone-muted {
+		color: var(--text-muted);
+	}
+	.tone-faint {
+		color: var(--text-faint);
+	}
+	.tone-danger {
+		color: var(--danger);
+	}
+	.tone-accent {
+		color: var(--accent);
+	}
+	/* Weight — overrides variant weight. */
+	.fw-normal {
+		font-weight: var(--fw-normal);
+	}
+	.fw-medium {
+		font-weight: var(--fw-medium);
+	}
+	.fw-semibold {
+		font-weight: var(--fw-semibold);
+	}
+	.fw-bold {
+		font-weight: var(--fw-bold);
+	}
+	/* Size — overrides variant size (listed last so it wins). */
+	.fs-xs {
+		font-size: var(--fs-xs);
+	}
+	.fs-sm {
+		font-size: var(--fs-sm);
+	}
+	.fs-base {
+		font-size: var(--fs-base);
+	}
+	.fs-md {
+		font-size: var(--fs-md);
+	}
+	.fs-lg {
+		font-size: var(--fs-lg);
+	}
+	.fs-xl {
+		font-size: var(--fs-xl);
+	}
+	.fs-2xl {
+		font-size: var(--fs-2xl);
+	}
+	.truncate {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		min-width: 0;
+	}
+</style>

package/dist/components/atoms/Text.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+type Size = 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl';
+type $$ComponentProps = {
+    as?: 'span' | 'p' | 'div' | 'label';
+    variant?: 'body' | 'label' | 'caption' | 'code';
+    tone?: 'inherit' | 'default' | 'muted' | 'faint' | 'danger' | 'accent';
+    weight?: 'normal' | 'medium' | 'semibold' | 'bold';
+    size?: Size;
+    truncate?: boolean;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const Text: import("svelte").Component<$$ComponentProps, {}, "">;
+type Text = ReturnType<typeof Text>;
+export default Text;

package/dist/components/atoms/Textarea.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	// Multi-line text input primitive. Owns its styling from theme tokens;
+	// supports `bind:value` and passes through every native <textarea> attribute
+	// and event (Svelte 5 events are props, so `...rest` forwards them). `mono`
+	// switches to the monospace family. `autoresize` opts into the grow-with-
+	// content action without the call-site wiring `use:` itself. `bind:el`
+	// exposes the underlying element for focus/measure.
+	import type { HTMLTextareaAttributes } from 'svelte/elements';
+	import { autoresize as autoresizeAction } from '../../autoresize';
+
+	type Props = HTMLTextareaAttributes & {
+		mono?: boolean;
+		autoresize?: boolean;
+		class?: string;
+		value?: HTMLTextareaAttributes['value'];
+		el?: HTMLTextAreaElement | null;
+	};
+
+	let {
+		mono = false,
+		autoresize = false,
+		class: klass = '',
+		value = $bindable(),
+		el = $bindable(null),
+		...rest
+	}: Props = $props();
+</script>
+
+{#if autoresize}
+	<textarea
+		bind:this={el}
+		class="textarea {klass}"
+		class:mono
+		bind:value
+		use:autoresizeAction={typeof value === 'string' ? value : ''}
+		{...rest}
+	></textarea>
+{:else}
+	<textarea bind:this={el} class="textarea {klass}" class:mono bind:value {...rest}></textarea>
+{/if}
+
+<style>
+	.textarea {
+		width: 100%;
+		padding: var(--sp-3);
+		background: var(--bg);
+		border: 1px solid var(--border-strong);
+		border-radius: var(--r-md);
+		color: var(--text);
+		transition: border-color 0.12s var(--ease);
+		resize: vertical;
+		min-height: 5rem;
+		font-family: inherit;
+	}
+	.textarea:focus {
+		outline: none;
+		border-color: var(--accent);
+	}
+	.mono {
+		font-family: var(--font-mono);
+	}
+</style>

package/dist/components/atoms/Textarea.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLTextareaAttributes } from 'svelte/elements';
+type Props = HTMLTextareaAttributes & {
+    mono?: boolean;
+    autoresize?: boolean;
+    class?: string;
+    value?: HTMLTextareaAttributes['value'];
+    el?: HTMLTextAreaElement | null;
+};
+declare const Textarea: import("svelte").Component<Props, {}, "value" | "el">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;