@orochibraru/ui 1.0.0 → 1.0.1-canary.1

package/dist/components/blocks/music-player/labelled-slider.svelte

@@ -7,15 +7,13 @@
 		step: number;
 		label: string;
 		valueText: string;
-		onchange?: (value: number) => void;
-		oncommit?: (value: number) => void;
+		onchange: (value: number) => void;
 		orientation?: "horizontal" | "vertical";
 		disabled?: boolean;
 		class?: string;
 	}
 
-	const { value, label, valueText, onchange, oncommit, ...rest }: Props =
-		$props();
+	const { value, label, valueText, onchange, ...rest }: Props = $props();
 
 	let ref: HTMLElement | null = $state(null);
 
@@ -26,11 +24,4 @@
 	});
 </script>
 
-<Slider
-	bind:ref
-	type="single"
-	{value}
-	onValueChange={onchange}
-	onValueCommit={oncommit}
-	{...rest}
-/>
+<Slider bind:ref type="single" {value} onValueChange={onchange} {...rest} />

package/dist/components/blocks/music-player/labelled-slider.svelte.d.ts

@@ -4,8 +4,7 @@ interface Props {
     step: number;
     label: string;
     valueText: string;
-    onchange?: (value: number) => void;
-    oncommit?: (value: number) => void;
+    onchange: (value: number) => void;
     orientation?: "horizontal" | "vertical";
     disabled?: boolean;
     class?: string;

package/dist/components/blocks/music-player.svelte

@@ -21,8 +21,8 @@
 	import { haptic } from "../../haptics.js";
 
 	import { formatTime } from "./music-player/format-time.js";
-	import LabelledSlider from "./music-player/labelled-slider.svelte";
 	import VolumeControl from "./music-player/volume-control.svelte";
+	import ScrubBar from "./video-player/scrub-bar.svelte";
 
 	const defaultMessages = {
 		player: "Music player",
@@ -176,7 +176,7 @@
 {#if track}
 	<section
 		aria-label={text.player}
-		class="glass grid w-full grid-cols-[minmax(0,1fr)_auto] items-center gap-x-3 gap-y-2 rounded-3xl p-3 [grid-template-areas:'meta_volume'_'seek_seek'_'controls_controls'] md:grid-cols-[minmax(0,16rem)_minmax(0,1fr)_auto] md:gap-x-6 md:px-4 md:[grid-template-areas:'meta_controls_volume'_'meta_seek_volume']"
+		class="glass grid w-full grid-cols-[minmax(0,1fr)_auto] items-center gap-x-3 gap-y-2 rounded-3xl p-4 [grid-template-areas:'meta_volume'_'seek_seek'_'controls_controls'] md:grid-cols-[minmax(0,16rem)_minmax(0,1fr)_auto] md:gap-x-6 md:px-6 md:py-5 md:[grid-template-areas:'meta_controls_volume'_'meta_seek_volume']"
 	>
 		<div class="flex min-w-0 items-center gap-3 [grid-area:meta]">
 			{#if track.artwork}
@@ -206,16 +206,17 @@
 			<span class="text-muted-foreground tabular min-w-10 text-xs">
 				{formatTime(currentTime)}
 			</span>
-			<LabelledSlider
-				class="flex-1"
-				value={seekable ? currentTime : 0}
-				max={seekable ? duration : 1}
-				step={1}
-				disabled={!seekable}
-				label={text.seek}
-				valueText={`${formatTime(currentTime)} / ${formatTime(duration)}`}
-				oncommit={(value) => (currentTime = value)}
-			/>
+			<div class="min-w-0 flex-1">
+				<ScrubBar
+					variant="surface"
+					{currentTime}
+					duration={seekable ? duration : 0}
+					bufferedEnd={0}
+					chapters={[]}
+					label={text.seek}
+					onseek={(time) => (currentTime = time)}
+				/>
+			</div>
 			<span class="text-muted-foreground tabular min-w-10 text-right text-xs">
 				{formatTime(duration)}
 			</span>

package/dist/components/blocks/otp-field.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
+	import FieldFrame, {
+		errorList,
+	} from "../kit/field-frame.svelte";
 	import * as InputOTP from "../ui/input-otp/index.js";
+	import { cn } from "../../utils.js";
 
 	interface Props {
 		value?: string;
@@ -9,6 +13,13 @@
 		disabled?: boolean;
 		invalid?: boolean;
 		oncomplete?: (code: string) => void;
+		label?: string;
+		description?: string;
+		error?: string | string[];
+		required?: boolean;
+		/** `center` centres the label and the boxes, as a code screen usually does. */
+		align?: "start" | "center";
+		class?: string;
 	}
 
 	let {
@@ -19,41 +30,74 @@
 		disabled = false,
 		invalid = false,
 		oncomplete,
+		label,
+		description,
+		error,
+		required = false,
+		align = "start",
+		class: className,
 	}: Props = $props();
 
 	const half = $derived(Math.ceil(length / 2));
+	const generatedId = $props.id();
+	const inputId = $derived(id ?? generatedId);
+	const framed = $derived(Boolean(label || description || error));
+	const showInvalid = $derived(invalid || errorList(error).length > 0);
+	const centered = $derived(align === "center");
 </script>
 
-<InputOTP.Root
-	maxlength={length}
-	pattern="^\d+$"
-	inputmode="numeric"
-	autocomplete="one-time-code"
-	{name}
-	inputId={id}
-	{disabled}
-	bind:value
-	onComplete={() => oncomplete?.(value)}
->
-	{#snippet children({ cells })}
-		<InputOTP.Group>
-			{#each cells.slice(0, half) as cell (cell)}
-				<InputOTP.Slot
-					{cell}
-					aria-invalid={invalid}
-					class="h-13 w-11 text-xl font-semibold tabular md:h-12 md:w-10"
-				/>
-			{/each}
-		</InputOTP.Group>
-		<InputOTP.Separator />
-		<InputOTP.Group>
-			{#each cells.slice(half) as cell (cell)}
-				<InputOTP.Slot
-					{cell}
-					aria-invalid={invalid}
-					class="h-13 w-11 text-xl font-semibold tabular md:h-12 md:w-10"
-				/>
-			{/each}
-		</InputOTP.Group>
-	{/snippet}
-</InputOTP.Root>
+{#snippet boxes()}
+	<div class={cn("flex", centered && "justify-center", !framed && className)}>
+		<InputOTP.Root
+			maxlength={length}
+			pattern="^\d+$"
+			inputmode="numeric"
+			autocomplete="one-time-code"
+			{name}
+			{inputId}
+			{disabled}
+			bind:value
+			onComplete={() => oncomplete?.(value)}
+		>
+			{#snippet children({ cells })}
+				<InputOTP.Group>
+					{#each cells.slice(0, half) as cell (cell)}
+						<InputOTP.Slot
+							{cell}
+							aria-invalid={showInvalid}
+							class="h-13 w-11 text-xl font-semibold tabular md:h-12 md:w-10"
+						/>
+					{/each}
+				</InputOTP.Group>
+				<InputOTP.Separator />
+				<InputOTP.Group>
+					{#each cells.slice(half) as cell (cell)}
+						<InputOTP.Slot
+							{cell}
+							aria-invalid={showInvalid}
+							class="h-13 w-11 text-xl font-semibold tabular md:h-12 md:w-10"
+						/>
+					{/each}
+				</InputOTP.Group>
+			{/snippet}
+		</InputOTP.Root>
+	</div>
+{/snippet}
+
+{#if framed}
+	<FieldFrame
+		id={inputId}
+		{label}
+		{description}
+		{error}
+		{required}
+		class={cn(
+			centered && "items-center text-center *:data-[slot=field-label]:w-fit",
+			className,
+		)}
+	>
+		{@render boxes()}
+	</FieldFrame>
+{:else}
+	{@render boxes()}
+{/if}

package/dist/components/blocks/otp-field.svelte.d.ts

@@ -6,6 +6,13 @@ interface Props {
     disabled?: boolean;
     invalid?: boolean;
     oncomplete?: (code: string) => void;
+    label?: string;
+    description?: string;
+    error?: string | string[];
+    required?: boolean;
+    /** `center` centres the label and the boxes, as a code screen usually does. */
+    align?: "start" | "center";
+    class?: string;
 }
 declare const OtpField: import("svelte").Component<Props, {}, "value">;
 type OtpField = ReturnType<typeof OtpField>;

package/dist/components/blocks/password-input.svelte

@@ -4,6 +4,9 @@
 	import type { HTMLInputAttributes } from "svelte/elements";
 
 	import IconButton from "./icon-button.svelte";
+	import FieldFrame, {
+		errorList,
+	} from "../kit/field-frame.svelte";
 	import { Input } from "../ui/input/index.js";
 	import { cn } from "../../utils.js";
 
@@ -15,6 +18,9 @@
 	type Props = Omit<HTMLInputAttributes, "type" | "value" | "files"> & {
 		value?: string;
 		visible?: boolean;
+		label?: string;
+		description?: string;
+		error?: string | string[];
 		messages?: Partial<typeof defaultMessages>;
 	};
 
@@ -23,29 +29,63 @@
 		visible = $bindable(false),
 		name = "password",
 		autocomplete = "current-password",
+		id,
+		label,
+		description,
+		error,
 		messages = {},
 		class: className,
 		...rest
 	}: Props = $props();
 
 	const text = $derived({ ...defaultMessages, ...messages });
+	const generatedId = $props.id();
+	const inputId = $derived(id ?? generatedId);
+	const framed = $derived(Boolean(label || description || error));
+	const invalid = $derived(errorList(error).length > 0);
+	const describedBy = $derived(
+		invalid
+			? `${inputId}-error`
+			: description
+				? `${inputId}-description`
+				: undefined,
+	);
 </script>
 
-<div class="relative">
-	<Input
-		{...rest}
-		{name}
-		{autocomplete}
-		type={visible ? "text" : "password"}
-		bind:value
-		class={cn("h-11 pr-12", className)}
-	/>
-	<div class="absolute inset-y-0 right-0 flex items-center">
-		<IconButton
-			label={visible ? text.hide : text.show}
-			icon={visible ? EyeOffIcon : EyeIcon}
-			onclick={() => (visible = !visible)}
-			class="size-11 md:size-11"
+{#snippet control()}
+	<div class="relative">
+		<Input
+			aria-invalid={invalid || undefined}
+			aria-describedby={describedBy}
+			{...rest}
+			id={inputId}
+			{name}
+			{autocomplete}
+			type={visible ? "text" : "password"}
+			bind:value
+			class={cn("h-11 pr-12", className)}
 		/>
+		<div class="absolute inset-y-0 right-0 flex items-center">
+			<IconButton
+				label={visible ? text.hide : text.show}
+				icon={visible ? EyeOffIcon : EyeIcon}
+				onclick={() => (visible = !visible)}
+				class="size-11 md:size-11"
+			/>
+		</div>
 	</div>
-</div>
+{/snippet}
+
+{#if framed}
+	<FieldFrame
+		id={inputId}
+		{label}
+		{description}
+		{error}
+		required={Boolean(rest.required)}
+	>
+		{@render control()}
+	</FieldFrame>
+{:else}
+	{@render control()}
+{/if}

package/dist/components/blocks/password-input.svelte.d.ts

@@ -2,6 +2,9 @@ import type { HTMLInputAttributes } from "svelte/elements";
 declare const PasswordInput: import("svelte").Component<Omit<HTMLInputAttributes, "type" | "value" | "files"> & {
     value?: string;
     visible?: boolean;
+    label?: string;
+    description?: string;
+    error?: string | string[];
     messages?: Partial<{
         show: string;
         hide: string;

package/dist/components/blocks/stepper/stepper-phone-header.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+	import ArrowRightIcon from "@lucide/svelte/icons/arrow-right";
+
+	import type { StepperStep } from "../stepper.svelte";
+
+	interface Props {
+		steps: StepperStep[];
+		active: number;
+		reached: number;
+		progress: string;
+		upNext: string;
+		stepLabel: (step: number, label: string) => string;
+		onselect: (step: number) => void;
+	}
+
+	const {
+		steps,
+		active,
+		reached,
+		progress,
+		upNext,
+		stepLabel,
+		onselect,
+	}: Props = $props();
+
+	const current = $derived(steps[active]);
+	const following = $derived(steps[active + 1]);
+
+	function segmentClass(step: number): string {
+		if (step <= active) {
+			return "bg-primary";
+		}
+		if (step <= reached) {
+			return "bg-primary/30";
+		}
+		return "bg-muted";
+	}
+</script>
+
+<div class="sm:hidden">
+	<ol class="-my-3 flex gap-1.5">
+		{#each steps as step, index (step.label)}
+			<li class="flex-1">
+				<button
+					type="button"
+					class="focus-visible:ring-ring/50 flex h-11 w-full items-center rounded-full outline-none focus-visible:ring-3 disabled:cursor-not-allowed"
+					aria-current={index === active ? "step" : undefined}
+					aria-label={stepLabel(index + 1, step.label)}
+					disabled={index > reached}
+					onclick={() => onselect(index)}
+				>
+					<span
+						class="h-1.5 w-full rounded-full transition-colors duration-300 {segmentClass(
+							index,
+						)}"
+					></span>
+				</button>
+			</li>
+		{/each}
+	</ol>
+	{#if current}
+		<div class="mt-4 flex items-center gap-3">
+			<span
+				class="bg-accent text-accent-foreground flex size-11 shrink-0 items-center justify-center rounded-xl"
+				aria-hidden="true"
+			>
+				{#if current.icon}
+					<current.icon class="size-5" />
+				{:else}
+					<span class="text-sm font-semibold tabular">{active + 1}</span>
+				{/if}
+			</span>
+			<div class="min-w-0" aria-live="polite" aria-atomic="true">
+				<p
+					class="text-muted-foreground text-[0.6875rem] font-medium tracking-wide uppercase"
+				>
+					{progress}
+				</p>
+				<p class="text-base leading-tight font-semibold">{current.label}</p>
+			</div>
+		</div>
+		{#if current.description}
+			<p class="text-muted-foreground mt-2 text-sm">{current.description}</p>
+		{/if}
+		{#if following}
+			<p class="text-muted-foreground mt-1.5 flex items-center gap-1 text-xs">
+				{upNext}
+				{following.label}
+				<ArrowRightIcon class="size-3" aria-hidden="true" />
+			</p>
+		{/if}
+	{/if}
+</div>

package/dist/components/blocks/stepper/stepper-phone-header.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { StepperStep } from "../stepper.svelte";
+interface Props {
+    steps: StepperStep[];
+    active: number;
+    reached: number;
+    progress: string;
+    upNext: string;
+    stepLabel: (step: number, label: string) => string;
+    onselect: (step: number) => void;
+}
+declare const StepperPhoneHeader: import("svelte").Component<Props, {}, "">;
+type StepperPhoneHeader = ReturnType<typeof StepperPhoneHeader>;
+export default StepperPhoneHeader;

package/dist/components/blocks/stepper.svelte

@@ -0,0 +1,175 @@
+<script lang="ts" module>
+	import type { Component } from "svelte";
+
+	export interface StepperStep {
+		label: string;
+		/** One line under the step's name on phones, saying what the step asks for. */
+		description?: string;
+		icon?: Component<{ class?: string }>;
+	}
+</script>
+
+<script lang="ts">
+	import ArrowLeftIcon from "@lucide/svelte/icons/arrow-left";
+	import ArrowRightIcon from "@lucide/svelte/icons/arrow-right";
+	import CheckIcon from "@lucide/svelte/icons/check";
+	import type { Snippet } from "svelte";
+
+	import StepperPhoneHeader from "./stepper/stepper-phone-header.svelte";
+	import { Button } from "../ui/button/index.js";
+	import { haptic } from "../../haptics.js";
+
+	const defaultMessages = {
+		back: "Back",
+		next: "Next",
+		upNext: "Next:",
+		progress: (step: number, total: number) => `Step ${step} of ${total}`,
+		stepLabel: (step: number, label: string) => `Step ${step}: ${label}`,
+	};
+
+	interface Props {
+		steps: StepperStep[];
+		/** The shown step; the page hides every other panel with it so field state survives. */
+		active?: number;
+		/** Validates the step being left; false keeps the user on it. */
+		onnext?: (step: number) => boolean;
+		/** Every step's panel, the inactive ones hidden by the page. */
+		children: Snippet;
+		/** Shown instead of Next on the last step: the page's own submit button. */
+		finish: Snippet;
+		messages?: Partial<typeof defaultMessages>;
+	}
+
+	let {
+		steps,
+		active = $bindable(0),
+		onnext = () => true,
+		children,
+		finish,
+		messages = {},
+	}: Props = $props();
+
+	const text = $derived({ ...defaultMessages, ...messages });
+
+	let furthest = $state(0);
+	const reached = $derived(Math.max(furthest, active));
+	const last = $derived(active >= steps.length - 1);
+
+	function goTo(step: number) {
+		if (step <= reached) {
+			active = step;
+		}
+	}
+
+	function next() {
+		haptic("tap");
+		if (!onnext(active)) {
+			return;
+		}
+		furthest = Math.max(reached, active + 1);
+		active += 1;
+	}
+
+	function back() {
+		haptic("tap");
+		active = Math.max(0, active - 1);
+	}
+
+	function markerClass(step: number): string {
+		if (step === active) {
+			return "border-primary bg-primary text-primary-foreground glow";
+		}
+		if (step < active) {
+			return "border-primary/40 bg-accent text-accent-foreground";
+		}
+		return "border-border bg-muted text-muted-foreground";
+	}
+</script>
+
+<div class="grid w-full gap-7">
+	<ol class="hidden items-start sm:flex">
+		{#each steps as step, index (step.label)}
+			<li class="flex flex-1 items-start last:flex-none">
+				<button
+					type="button"
+					class="group focus-visible:ring-ring/50 flex min-w-11 shrink-0 flex-col items-center gap-2 rounded-xl px-2 outline-none focus-visible:ring-3 disabled:cursor-not-allowed"
+					aria-current={index === active ? "step" : undefined}
+					aria-label={text.stepLabel(index + 1, step.label)}
+					disabled={index > reached}
+					onclick={() => goTo(index)}
+				>
+					<span
+						class="flex size-9 items-center justify-center rounded-full border transition-all duration-300 {markerClass(
+							index,
+						)}"
+					>
+						{#if index < active}
+							<CheckIcon class="size-4" />
+						{:else if step.icon}
+							<step.icon class="size-4" />
+						{:else}
+							<span class="text-xs font-medium tabular">{index + 1}</span>
+						{/if}
+					</span>
+					<span
+						class="text-xs font-medium tracking-wide transition-colors {index ===
+						active
+							? 'text-foreground'
+							: 'text-muted-foreground'} {index <= reached
+							? 'group-hover:text-foreground'
+							: 'opacity-60'}"
+					>
+						{step.label}
+					</span>
+				</button>
+				{#if index < steps.length - 1}
+					<span
+						class="mt-4.25 h-0.5 flex-1 rounded-full transition-colors duration-300 {index <
+						active
+							? 'bg-primary/50'
+							: 'bg-border'}"
+						aria-hidden="true"
+					></span>
+				{/if}
+			</li>
+		{/each}
+	</ol>
+
+	<StepperPhoneHeader
+		{steps}
+		{active}
+		{reached}
+		progress={text.progress(active + 1, steps.length)}
+		upNext={text.upNext}
+		stepLabel={text.stepLabel}
+		onselect={goTo}
+	/>
+
+	{@render children()}
+
+	<div class="flex gap-3">
+		{#if active > 0}
+			<Button
+				variant="outline"
+				class="h-11 flex-1 rounded-full px-5 sm:flex-none"
+				onclick={back}
+			>
+				<ArrowLeftIcon class="size-4" />
+				{text.back}
+			</Button>
+		{/if}
+		{#if last}
+			<div class="flex flex-1 *:flex-1 sm:ml-auto sm:flex-none sm:*:flex-none">
+				{@render finish()}
+			</div>
+		{:else}
+			<Button
+				class="glow h-11 flex-1 rounded-full px-5 sm:ml-auto sm:flex-none"
+				onclick={next}
+			>
+				{text.next}
+				<ArrowRightIcon class="size-4" />
+			</Button>
+		{/if}
+	</div>
+</div>

package/dist/components/blocks/stepper.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { Component } from "svelte";
+export interface StepperStep {
+    label: string;
+    /** One line under the step's name on phones, saying what the step asks for. */
+    description?: string;
+    icon?: Component<{
+        class?: string;
+    }>;
+}
+import type { Snippet } from "svelte";
+declare const Stepper: Component<{
+    steps: StepperStep[];
+    /** The shown step; the page hides every other panel with it so field state survives. */
+    active?: number;
+    /** Validates the step being left; false keeps the user on it. */
+    onnext?: (step: number) => boolean;
+    /** Every step's panel, the inactive ones hidden by the page. */
+    children: Snippet;
+    /** Shown instead of Next on the last step: the page's own submit button. */
+    finish: Snippet;
+    messages?: Partial<{
+        back: string;
+        next: string;
+        upNext: string;
+        progress: (step: number, total: number) => string;
+        stepLabel: (step: number, label: string) => string;
+    }>;
+}, {}, "active">;
+type Stepper = ReturnType<typeof Stepper>;
+export default Stepper;