@orochibraru/ui 0.0.0 → 1.0.0-canary.1

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

@@ -0,0 +1,263 @@
+<script lang="ts" module>
+	export interface MusicTrack {
+		src: string;
+		title: string;
+		artist?: string;
+		artwork?: string;
+	}
+</script>
+
+<script lang="ts">
+	import Disc3Icon from "@lucide/svelte/icons/disc-3";
+	import FastForwardIcon from "@lucide/svelte/icons/fast-forward";
+	import PauseIcon from "@lucide/svelte/icons/pause";
+	import PlayIcon from "@lucide/svelte/icons/play";
+	import RewindIcon from "@lucide/svelte/icons/rewind";
+	import SkipBackIcon from "@lucide/svelte/icons/skip-back";
+	import SkipForwardIcon from "@lucide/svelte/icons/skip-forward";
+
+	import IconButton from "./icon-button.svelte";
+	import { Spinner } from "../ui/spinner/index.js";
+	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";
+
+	const defaultMessages = {
+		player: "Music player",
+		play: "Play",
+		pause: "Pause",
+		previous: "Previous",
+		next: "Next",
+		back: "Back 5 seconds",
+		forward: "Forward 5 seconds",
+		seek: "Seek",
+		volume: "Volume",
+	};
+
+	interface Props {
+		tracks: MusicTrack[];
+		index?: number;
+		paused?: boolean;
+		onchange?: (track: MusicTrack, index: number) => void;
+		onended?: (track: MusicTrack, index: number) => void;
+		messages?: Partial<typeof defaultMessages>;
+	}
+
+	let {
+		tracks,
+		index = $bindable(0),
+		paused = $bindable(true),
+		onchange,
+		onended,
+		messages = {},
+	}: Props = $props();
+
+	const SKIP_SECONDS = 5;
+	const RESTART_AFTER_SECONDS = 3;
+
+	const text = $derived({ ...defaultMessages, ...messages });
+	const track = $derived(tracks[index]);
+	const hasNext = $derived(index < tracks.length - 1);
+
+	let audio: HTMLAudioElement | undefined = $state();
+	let currentTime = $state(0);
+	let duration = $state(0);
+	let volume = $state(1);
+	let waiting = $state(false);
+	let loadedSource: string | undefined;
+
+	const seekable = $derived(Number.isFinite(duration) && duration > 0);
+	const ToggleIcon = $derived(
+		paused ? PlayIcon : waiting ? Spinner : PauseIcon,
+	);
+
+	$effect(() => {
+		const source = track?.src;
+		const shouldPlay = !paused;
+		if (!audio) {
+			return;
+		}
+		const reload = source !== loadedSource;
+		if (reload) {
+			loadedSource = source;
+			currentTime = 0;
+			waiting = false;
+			if (source) {
+				audio.src = source;
+			} else {
+				audio.removeAttribute("src");
+			}
+			audio.load();
+		}
+		if (shouldPlay && source && (reload || audio.paused)) {
+			void start(audio);
+		} else if (!shouldPlay && !audio.paused) {
+			audio.pause();
+		}
+	});
+
+	async function start(element: HTMLAudioElement) {
+		try {
+			await element.play();
+		} catch (error) {
+			if (!(error instanceof DOMException && error.name === "AbortError")) {
+				paused = true;
+			}
+		}
+	}
+
+	function go(to: number) {
+		const target = tracks[to];
+		if (!target) {
+			return;
+		}
+		index = to;
+		onchange?.(target, to);
+	}
+
+	function toggle() {
+		haptic("tap");
+		paused = !paused;
+	}
+
+	function previous() {
+		haptic("tap");
+		if (currentTime > RESTART_AFTER_SECONDS || index === 0) {
+			currentTime = 0;
+			return;
+		}
+		go(index - 1);
+	}
+
+	function next() {
+		haptic("tap");
+		go(index + 1);
+	}
+
+	function skip(by: number) {
+		if (seekable) {
+			currentTime = Math.min(Math.max(currentTime + by, 0), duration);
+		}
+	}
+
+	function ended() {
+		if (track) {
+			onended?.(track, index);
+		}
+		if (hasNext) {
+			go(index + 1);
+			paused = false;
+		}
+	}
+
+	function syncPaused() {
+		if (audio) {
+			paused = audio.paused;
+		}
+	}
+</script>
+
+<audio
+	bind:this={audio}
+	bind:currentTime
+	bind:duration
+	bind:volume
+	preload="metadata"
+	onplay={syncPaused}
+	onpause={syncPaused}
+	onwaiting={() => (waiting = true)}
+	onplaying={() => (waiting = false)}
+	oncanplay={() => (waiting = false)}
+	onended={ended}
+></audio>
+
+{#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']"
+	>
+		<div class="flex min-w-0 items-center gap-3 [grid-area:meta]">
+			{#if track.artwork}
+				<img
+					src={track.artwork}
+					alt=""
+					class="size-12 shrink-0 rounded-xl object-cover"
+				/>
+			{:else}
+				<div
+					class="bg-primary/12 text-primary flex size-12 shrink-0 items-center justify-center rounded-xl"
+				>
+					<Disc3Icon class="size-6" />
+				</div>
+			{/if}
+			<div class="min-w-0">
+				<p class="truncate font-medium">{track.title}</p>
+				{#if track.artist}
+					<p class="text-muted-foreground truncate text-sm">
+						{track.artist}
+					</p>
+				{/if}
+			</div>
+		</div>
+
+		<div class="flex items-center gap-3 [grid-area:seek]">
+			<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)}
+			/>
+			<span class="text-muted-foreground tabular min-w-10 text-right text-xs">
+				{formatTime(duration)}
+			</span>
+		</div>
+
+		<div
+			class="flex items-center justify-center gap-1 [grid-area:controls] md:gap-2"
+		>
+			<IconButton
+				label={text.back}
+				icon={RewindIcon}
+				disabled={!seekable}
+				onclick={() => skip(-SKIP_SECONDS)}
+			/>
+			<IconButton
+				label={text.previous}
+				icon={SkipBackIcon}
+				onclick={previous}
+			/>
+			<IconButton
+				label={paused ? text.play : text.pause}
+				icon={ToggleIcon}
+				variant="default"
+				class="glow size-14 md:size-11"
+				onclick={toggle}
+			/>
+			<IconButton
+				label={text.next}
+				icon={SkipForwardIcon}
+				disabled={!hasNext}
+				onclick={next}
+			/>
+			<IconButton
+				label={text.forward}
+				icon={FastForwardIcon}
+				disabled={!seekable}
+				onclick={() => skip(SKIP_SECONDS)}
+			/>
+		</div>
+
+		<div class="[grid-area:volume]">
+			<VolumeControl bind:volume label={text.volume} />
+		</div>
+	</section>
+{/if}

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

@@ -0,0 +1,26 @@
+export interface MusicTrack {
+    src: string;
+    title: string;
+    artist?: string;
+    artwork?: string;
+}
+declare const MusicPlayer: import("svelte").Component<{
+    tracks: MusicTrack[];
+    index?: number;
+    paused?: boolean;
+    onchange?: (track: MusicTrack, index: number) => void;
+    onended?: (track: MusicTrack, index: number) => void;
+    messages?: Partial<{
+        player: string;
+        play: string;
+        pause: string;
+        previous: string;
+        next: string;
+        back: string;
+        forward: string;
+        seek: string;
+        volume: string;
+    }>;
+}, {}, "index" | "paused">;
+type MusicPlayer = ReturnType<typeof MusicPlayer>;
+export default MusicPlayer;

package/dist/components/blocks/nav-cards.svelte

@@ -0,0 +1,42 @@
+<script lang="ts" module>
+	import type { Component } from "svelte";
+
+	export interface SectionTab {
+		href: string;
+		label: string;
+		description: string;
+		icon: Component<{ class?: string }>;
+	}
+</script>
+
+<script lang="ts">
+	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+
+	const { tabs }: { tabs: SectionTab[] } = $props();
+</script>
+
+<nav aria-label="Sections" class="md:hidden">
+	<ul class="glass divide-border divide-y overflow-hidden rounded-2xl">
+		{#each tabs as tab (tab.href)}
+			<li>
+				<a
+					href={tab.href}
+					class="active:bg-muted flex min-h-18 items-center gap-4 px-4 py-3 transition-colors"
+				>
+					<span
+						class="bg-accent text-accent-foreground flex size-11 shrink-0 items-center justify-center rounded-xl"
+					>
+						<tab.icon class="size-5" />
+					</span>
+					<span class="min-w-0 flex-1">
+						<span class="block font-semibold">{tab.label}</span>
+						<span class="text-muted-foreground block text-sm"
+							>{tab.description}</span
+						>
+					</span>
+					<ChevronRightIcon class="text-muted-foreground/60 size-5 shrink-0" />
+				</a>
+			</li>
+		{/each}
+	</ul>
+</nav>

package/dist/components/blocks/nav-cards.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Component } from "svelte";
+export interface SectionTab {
+    href: string;
+    label: string;
+    description: string;
+    icon: Component<{
+        class?: string;
+    }>;
+}
+type $$ComponentProps = {
+    tabs: SectionTab[];
+};
+declare const NavCards: Component<$$ComponentProps, {}, "">;
+type NavCards = ReturnType<typeof NavCards>;
+export default NavCards;

package/dist/components/blocks/new-password-fields.svelte

@@ -0,0 +1,127 @@
+<script lang="ts">
+	import CheckIcon from "@lucide/svelte/icons/check";
+	import XIcon from "@lucide/svelte/icons/x";
+
+	import PasswordInput from "./password-input.svelte";
+	import * as Field from "../ui/field/index.js";
+	import { Input } from "../ui/input/index.js";
+	import {
+		passwordMaxLength,
+		passwordRules,
+		passwordScore,
+	} from "../../password.js";
+
+	const defaultMessages = {
+		password: "Password",
+		confirm: "Type it again",
+		mismatch: "The passwords don't match.",
+		weak: "Weak",
+		fair: "Fair",
+		good: "Good",
+		strong: "Strong",
+		show: "Show password",
+		hide: "Hide password",
+	};
+
+	interface Props {
+		value?: string;
+		email?: string;
+		errors?: Record<string, string[] | undefined>;
+		ruleLabels?: Record<string, string>;
+		messages?: Partial<typeof defaultMessages>;
+	}
+
+	let {
+		value = $bindable(""),
+		email = "",
+		errors = {},
+		ruleLabels = {},
+		messages = {},
+	}: Props = $props();
+
+	let confirmation = $state("");
+	let visible = $state(false);
+
+	const text = $derived({ ...defaultMessages, ...messages });
+	const rules = $derived(
+		passwordRules(value, email).filter((rule) => rule.id !== "max"),
+	);
+	const score = $derived(passwordScore(value, email));
+	const strengthLabels = $derived([
+		"",
+		text.weak,
+		text.fair,
+		text.good,
+		text.strong,
+	]);
+	const strengthColors = [
+		"bg-muted",
+		"bg-destructive",
+		"bg-orange-500",
+		"bg-primary/70",
+		"bg-primary",
+	];
+	const mismatch = $derived(confirmation.length > 0 && confirmation !== value);
+</script>
+
+<Field.Field>
+	<Field.Label for="new-password">{text.password}</Field.Label>
+	<PasswordInput
+		id="new-password"
+		autocomplete="new-password"
+		maxlength={passwordMaxLength}
+		required
+		bind:value
+		bind:visible
+		messages={{ show: text.show, hide: text.hide }}
+	/>
+	<div class="mt-1 flex items-center gap-2" aria-live="polite">
+		<div class="flex flex-1 gap-1">
+			{#each [1, 2, 3, 4] as step (step)}
+				<span
+					class="h-1.5 flex-1 rounded-full transition-colors {score >= step
+						? strengthColors[score]
+						: 'bg-muted'}"
+				></span>
+			{/each}
+		</div>
+		<span class="text-muted-foreground w-12 text-right text-xs"
+			>{strengthLabels[score]}</span
+		>
+	</div>
+	<ul class="mt-1 flex flex-col gap-1 text-sm">
+		{#each rules as rule (rule.id)}
+			<li
+				class="flex items-center gap-2 {rule.passed
+					? 'text-positive'
+					: 'text-muted-foreground'}"
+			>
+				{#if rule.passed}<CheckIcon class="size-4" />{:else}<XIcon
+						class="size-4"
+					/>{/if}
+				{ruleLabels[rule.id] ?? rule.label}
+			</li>
+		{/each}
+	</ul>
+	<Field.Error errors={errors.password?.map((message) => ({ message }))} />
+</Field.Field>
+<Field.Field>
+	<Field.Label for="confirm-password">{text.confirm}</Field.Label>
+	<Input
+		id="confirm-password"
+		name="confirmPassword"
+		type={visible ? "text" : "password"}
+		autocomplete="new-password"
+		maxlength={passwordMaxLength}
+		required
+		bind:value={confirmation}
+		aria-invalid={mismatch}
+		class="h-11"
+	/>
+	{#if mismatch}
+		<p class="text-destructive text-sm">{text.mismatch}</p>
+	{/if}
+	<Field.Error
+		errors={errors.confirmPassword?.map((message) => ({ message }))}
+	/>
+</Field.Field>

package/dist/components/blocks/new-password-fields.svelte.d.ts

@@ -0,0 +1,19 @@
+declare const NewPasswordFields: import("svelte").Component<{
+    value?: string;
+    email?: string;
+    errors?: Record<string, string[] | undefined>;
+    ruleLabels?: Record<string, string>;
+    messages?: Partial<{
+        password: string;
+        confirm: string;
+        mismatch: string;
+        weak: string;
+        fair: string;
+        good: string;
+        strong: string;
+        show: string;
+        hide: string;
+    }>;
+}, {}, "value">;
+type NewPasswordFields = ReturnType<typeof NewPasswordFields>;
+export default NewPasswordFields;

package/dist/components/blocks/option-group.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import CheckIcon from "@lucide/svelte/icons/check";
+	import type { Component, Snippet } from "svelte";
+
+	interface Option {
+		value: string;
+		label: string;
+		description?: string;
+		icon?: Component<{ class?: string }>;
+	}
+
+	interface Props {
+		name: string;
+		legend: string;
+		options: readonly Option[];
+		value: string;
+		onchange: () => void;
+		swatch?: Snippet<[Option]>;
+	}
+
+	let {
+		name,
+		legend,
+		options,
+		value = $bindable(),
+		onchange,
+		swatch,
+	}: Props = $props();
+</script>
+
+<fieldset>
+	<legend class="mb-2 px-1 text-sm font-medium">{legend}</legend>
+	<div class="grid gap-2 md:grid-cols-2 xl:grid-cols-3">
+		{#each options as option (option.value)}
+			<label
+				class="group border-border bg-card has-checked:border-primary has-checked:ring-primary/30 has-focus-visible:ring-ring/50 flex min-h-14 cursor-pointer items-center gap-3 rounded-2xl border p-3 transition-all has-checked:ring-2 has-focus-visible:ring-3"
+			>
+				<input
+					type="radio"
+					{name}
+					value={option.value}
+					bind:group={value}
+					{onchange}
+					class="sr-only"
+				/>
+				<span
+					class="bg-accent text-accent-foreground flex size-10 shrink-0 items-center justify-center rounded-xl"
+					aria-hidden="true"
+				>
+					{#if swatch}
+						{@render swatch(option)}
+					{:else if option.icon}
+						<option.icon class="size-5" />
+					{/if}
+				</span>
+				<span class="min-w-0 flex-1">
+					<span class="block text-sm font-medium">{option.label}</span>
+					{#if option.description}
+						<span class="text-muted-foreground block text-sm"
+							>{option.description}</span
+						>
+					{/if}
+				</span>
+				<CheckIcon
+					class="text-primary hidden size-5 shrink-0 group-has-checked:block"
+					aria-hidden="true"
+				/>
+			</label>
+		{/each}
+	</div>
+</fieldset>

package/dist/components/blocks/option-group.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Component, Snippet } from "svelte";
+interface Option {
+    value: string;
+    label: string;
+    description?: string;
+    icon?: Component<{
+        class?: string;
+    }>;
+}
+interface Props {
+    name: string;
+    legend: string;
+    options: readonly Option[];
+    value: string;
+    onchange: () => void;
+    swatch?: Snippet<[Option]>;
+}
+declare const OptionGroup: Component<Props, {}, "value">;
+type OptionGroup = ReturnType<typeof OptionGroup>;
+export default OptionGroup;

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

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import * as InputOTP from "../ui/input-otp/index.js";
+
+	interface Props {
+		value?: string;
+		length?: number;
+		name?: string;
+		id?: string;
+		disabled?: boolean;
+		invalid?: boolean;
+		oncomplete?: (code: string) => void;
+	}
+
+	let {
+		value = $bindable(""),
+		length = 6,
+		name = "code",
+		id,
+		disabled = false,
+		invalid = false,
+		oncomplete,
+	}: Props = $props();
+
+	const half = $derived(Math.ceil(length / 2));
+</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>

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

@@ -0,0 +1,12 @@
+interface Props {
+    value?: string;
+    length?: number;
+    name?: string;
+    id?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    oncomplete?: (code: string) => void;
+}
+declare const OtpField: import("svelte").Component<Props, {}, "value">;
+type OtpField = ReturnType<typeof OtpField>;
+export default OtpField;