@orochibraru/ui 0.0.0 → 1.0.0-canary.2

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

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import EyeIcon from "@lucide/svelte/icons/eye";
+	import EyeOffIcon from "@lucide/svelte/icons/eye-off";
+	import type { HTMLInputAttributes } from "svelte/elements";
+
+	import IconButton from "./icon-button.svelte";
+	import { Input } from "../ui/input/index.js";
+	import { cn } from "../../utils.js";
+
+	const defaultMessages = {
+		show: "Show password",
+		hide: "Hide password",
+	};
+
+	type Props = Omit<HTMLInputAttributes, "type" | "value" | "files"> & {
+		value?: string;
+		visible?: boolean;
+		messages?: Partial<typeof defaultMessages>;
+	};
+
+	let {
+		value = $bindable(""),
+		visible = $bindable(false),
+		name = "password",
+		autocomplete = "current-password",
+		messages = {},
+		class: className,
+		...rest
+	}: Props = $props();
+
+	const text = $derived({ ...defaultMessages, ...messages });
+</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"
+		/>
+	</div>
+</div>

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

@@ -0,0 +1,11 @@
+import type { HTMLInputAttributes } from "svelte/elements";
+declare const PasswordInput: import("svelte").Component<Omit<HTMLInputAttributes, "type" | "value" | "files"> & {
+    value?: string;
+    visible?: boolean;
+    messages?: Partial<{
+        show: string;
+        hide: string;
+    }>;
+}, {}, "value" | "visible">;
+type PasswordInput = ReturnType<typeof PasswordInput>;
+export default PasswordInput;

package/dist/components/blocks/stat-card.svelte

@@ -31,7 +31,7 @@
 <svelte:element
 	this={href ? "a" : "div"}
 	{href}
-	class="glass flex items-start gap-3 rounded-2xl p-4 transition-colors {href
+	class="glass flex min-w-0 items-start gap-3 rounded-2xl p-4 transition-colors {href
 		? 'hover:border-primary/40 active:bg-muted'
 		: ''}"
 >

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

@@ -0,0 +1,38 @@
+<script lang="ts" module>
+	import type { Component } from "svelte";
+
+	export interface Tab {
+		href: string;
+		label: string;
+		icon?: Component<{ class?: string }>;
+	}
+</script>
+
+<script lang="ts">
+	import { page } from "$app/state";
+
+	const { tabs }: { tabs: Tab[] } = $props();
+
+	function scrollIntoViewWhenActive(node: HTMLElement, active: boolean) {
+		if (active) {
+			node.scrollIntoView({ block: "nearest", inline: "center" });
+		}
+	}
+</script>
+
+<nav class="no-scrollbar flex overflow-x-auto py-1" aria-label="Sections">
+	<div class="glass flex w-full gap-1 rounded-full p-1 md:w-auto md:shrink-0">
+		{#each tabs as tab (tab.href)}
+			{@const active = page.url.pathname === tab.href}
+			<a
+				href={tab.href}
+				aria-current={active ? "page" : undefined}
+				use:scrollIntoViewWhenActive={active}
+				class="text-muted-foreground hover:bg-accent/70 hover:text-foreground aria-[current=page]:bg-primary aria-[current=page]:text-primary-foreground aria-[current=page]:glow focus-visible:ring-ring/50 flex h-9 min-w-0 flex-1 items-center justify-center gap-2 rounded-full px-2 md:flex-none md:shrink-0 md:px-4 text-sm font-medium transition-[color,background-color,box-shadow] outline-none focus-visible:ring-3"
+			>
+				{#if tab.icon}<tab.icon class="hidden size-4 sm:block" />{/if}
+				{tab.label}
+			</a>
+		{/each}
+	</div>
+</nav>

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

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

package/dist/components/blocks/tab-section.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { goto } from "$app/navigation";
+	import { page } from "$app/state";
+	import type { Snippet } from "svelte";
+	import { MediaQuery } from "svelte/reactivity";
+
+	import type { SectionTab } from "./nav-cards.svelte";
+	import TabNav from "./tab-nav.svelte";
+	import { setPageTitle } from "../../page-title.svelte.js";
+
+	interface Props {
+		title: string;
+		indexHref: string;
+		backHref?: string;
+		tabs: SectionTab[];
+		children: Snippet;
+	}
+
+	const { title, indexHref, backHref, tabs, children }: Props = $props();
+
+	const onIndex = $derived(page.url.pathname === indexHref);
+	const active = $derived(
+		tabs.find(
+			(tab) =>
+				page.url.pathname === tab.href ||
+				page.url.pathname.startsWith(`${tab.href}/`),
+		),
+	);
+
+	const desktop = new MediaQuery("(min-width: 768px)");
+
+	$effect(() => {
+		const first = tabs[0];
+		if (desktop.current && onIndex && first) {
+			goto(first.href, { replace: true });
+		}
+	});
+
+	setPageTitle(
+		() => (desktop.current || onIndex || !active ? title : active.label),
+		() => (desktop.current || onIndex ? backHref : indexHref),
+	);
+</script>
+
+<div class="mb-6 hidden md:block">
+	<TabNav {tabs} />
+</div>
+{@render children()}

package/dist/components/blocks/tab-section.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from "svelte";
+import type { SectionTab } from "./nav-cards.svelte";
+interface Props {
+    title: string;
+    indexHref: string;
+    backHref?: string;
+    tabs: SectionTab[];
+    children: Snippet;
+}
+declare const TabSection: import("svelte").Component<Props, {}, "">;
+type TabSection = ReturnType<typeof TabSection>;
+export default TabSection;

package/dist/components/blocks/theme-picker.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import MonitorSmartphoneIcon from "@lucide/svelte/icons/monitor-smartphone";
+	import MoonIcon from "@lucide/svelte/icons/moon";
+	import SunIcon from "@lucide/svelte/icons/sun";
+	import { setMode, userPrefersMode } from "mode-watcher";
+
+	import OptionGroup from "./option-group.svelte";
+
+	type Theme = "system" | "light" | "dark";
+
+	const defaultMessages = {
+		legend: "Theme",
+		system: "System",
+		systemDescription: "Follows your device: light or dark as it switches.",
+		light: "Light",
+		lightDescription: "Always light, whatever the device says.",
+		dark: "Dark",
+		darkDescription: "Always dark, easier on the eyes at night.",
+	};
+
+	interface Props {
+		value?: Theme;
+		name?: string;
+		onchange?: (theme: Theme) => void;
+		messages?: Partial<typeof defaultMessages>;
+	}
+
+	let {
+		value = $bindable(userPrefersMode.current),
+		name = "theme",
+		onchange,
+		messages = {},
+	}: Props = $props();
+
+	const text = $derived({ ...defaultMessages, ...messages });
+	const themes = $derived([
+		{
+			value: "system",
+			label: text.system,
+			description: text.systemDescription,
+			icon: MonitorSmartphoneIcon,
+		},
+		{
+			value: "light",
+			label: text.light,
+			description: text.lightDescription,
+			icon: SunIcon,
+		},
+		{
+			value: "dark",
+			label: text.dark,
+			description: text.darkDescription,
+			icon: MoonIcon,
+		},
+	]);
+
+	function change() {
+		setMode(value);
+		onchange?.(value);
+	}
+</script>
+
+<OptionGroup
+	{name}
+	legend={text.legend}
+	options={themes}
+	bind:value
+	onchange={change}
+/>

package/dist/components/blocks/theme-picker.svelte.d.ts

@@ -0,0 +1,16 @@
+declare const ThemePicker: import("svelte").Component<{
+    value?: "system" | "light" | "dark";
+    name?: string;
+    onchange?: (theme: "system" | "light" | "dark") => void;
+    messages?: Partial<{
+        legend: string;
+        system: string;
+        systemDescription: string;
+        light: string;
+        lightDescription: string;
+        dark: string;
+        darkDescription: string;
+    }>;
+}, {}, "value">;
+type ThemePicker = ReturnType<typeof ThemePicker>;
+export default ThemePicker;

package/dist/components/blocks/theme-toggle.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import MonitorSmartphoneIcon from "@lucide/svelte/icons/monitor-smartphone";
+	import MoonIcon from "@lucide/svelte/icons/moon";
+	import SunIcon from "@lucide/svelte/icons/sun";
+	import { setMode, userPrefersMode } from "mode-watcher";
+	import { MediaQuery } from "svelte/reactivity";
+
+	import * as ToggleGroup from "../ui/toggle-group/index.js";
+
+	type Theme = "system" | "light" | "dark";
+
+	const defaultMessages = {
+		label: "Theme",
+		system: "System",
+		light: "Light",
+		dark: "Dark",
+	};
+
+	interface Props {
+		value?: Theme;
+		onchange?: (theme: Theme) => void;
+		messages?: Partial<typeof defaultMessages>;
+	}
+
+	let {
+		value = $bindable(userPrefersMode.current),
+		onchange,
+		messages = {},
+	}: Props = $props();
+
+	const desktop = new MediaQuery("(min-width: 768px)");
+	const text = $derived({ ...defaultMessages, ...messages });
+	const themes = $derived([
+		{ value: "system", label: text.system, icon: MonitorSmartphoneIcon },
+		{ value: "light", label: text.light, icon: SunIcon },
+		{ value: "dark", label: text.dark, icon: MoonIcon },
+	] as const);
+
+	function pick(next: string) {
+		if (!next) {
+			return;
+		}
+		value = next as Theme;
+		setMode(value);
+		onchange?.(value);
+	}
+</script>
+
+<ToggleGroup.Root
+	type="single"
+	variant="outline"
+	orientation={desktop.current ? "horizontal" : "vertical"}
+	aria-label={text.label}
+	class="max-md:w-full"
+	bind:value={() => value, pick}
+>
+	{#each themes as theme (theme.value)}
+		<ToggleGroup.Item
+			value={theme.value}
+			aria-label={theme.label}
+			title={theme.label}
+			class="max-md:h-12 max-md:w-full max-md:justify-start max-md:gap-3 max-md:px-4 md:size-9"
+		>
+			<theme.icon class="size-4" />
+			<span class="md:hidden">{theme.label}</span>
+		</ToggleGroup.Item>
+	{/each}
+</ToggleGroup.Root>

package/dist/components/blocks/theme-toggle.svelte.d.ts

@@ -0,0 +1,12 @@
+declare const ThemeToggle: import("svelte").Component<{
+    value?: "system" | "light" | "dark";
+    onchange?: (theme: "system" | "light" | "dark") => void;
+    messages?: Partial<{
+        label: string;
+        system: string;
+        light: string;
+        dark: string;
+    }>;
+}, {}, "value">;
+type ThemeToggle = ReturnType<typeof ThemeToggle>;
+export default ThemeToggle;

package/dist/components/blocks/video-player/center-controls.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import PauseIcon from "@lucide/svelte/icons/pause";
+	import PlayIcon from "@lucide/svelte/icons/play";
+	import RotateCcwIcon from "@lucide/svelte/icons/rotate-ccw";
+	import RotateCwIcon from "@lucide/svelte/icons/rotate-cw";
+
+	import { SEEK_SECONDS } from "./keymap.js";
+	import type { VideoPlayerMessages } from "./messages.js";
+	import type { VideoPlayerState } from "./player.svelte.js";
+
+	interface Props {
+		player: VideoPlayerState;
+		paused: boolean;
+		text: VideoPlayerMessages;
+	}
+
+	const { player, paused, text }: Props = $props();
+
+	const side =
+		"bg-chrome text-foreground ring-border pointer-events-auto flex size-11 items-center justify-center rounded-full ring-1 backdrop-blur-xl transition-transform active:scale-90 sm:size-14";
+</script>
+
+<div class="flex items-center justify-center gap-8 sm:gap-12">
+	<button
+		type="button"
+		aria-label={text.seekBackward}
+		class={side}
+		onclick={() => player.seek(-SEEK_SECONDS)}
+	>
+		<RotateCcwIcon class="size-5 sm:size-6" />
+	</button>
+	<button
+		type="button"
+		aria-label={player.ended ? text.replay : paused ? text.play : text.pause}
+		class="bg-primary text-primary-foreground glow pointer-events-auto flex size-14 items-center justify-center rounded-full transition-transform active:scale-90 sm:size-18"
+		onclick={player.togglePlay}
+	>
+		{#if player.ended}
+			<RotateCcwIcon class="size-7 sm:size-8" />
+		{:else if paused}
+			<PlayIcon class="size-7 fill-current sm:size-8" />
+		{:else}
+			<PauseIcon class="size-7 fill-current sm:size-8" />
+		{/if}
+	</button>
+	<button
+		type="button"
+		aria-label={text.seekForward}
+		class={side}
+		onclick={() => player.seek(SEEK_SECONDS)}
+	>
+		<RotateCwIcon class="size-5 sm:size-6" />
+	</button>
+</div>

package/dist/components/blocks/video-player/center-controls.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { VideoPlayerMessages } from "./messages.js";
+import type { VideoPlayerState } from "./player.svelte.js";
+interface Props {
+    player: VideoPlayerState;
+    paused: boolean;
+    text: VideoPlayerMessages;
+}
+declare const CenterControls: import("svelte").Component<Props, {}, "">;
+type CenterControls = ReturnType<typeof CenterControls>;
+export default CenterControls;

package/dist/components/blocks/video-player/control-bar.svelte

@@ -0,0 +1,184 @@
+<script lang="ts">
+	import CaptionsIcon from "@lucide/svelte/icons/captions";
+	import CaptionsOffIcon from "@lucide/svelte/icons/captions-off";
+	import GaugeIcon from "@lucide/svelte/icons/gauge";
+	import MaximizeIcon from "@lucide/svelte/icons/maximize";
+	import MinimizeIcon from "@lucide/svelte/icons/minimize";
+	import PauseIcon from "@lucide/svelte/icons/pause";
+	import PictureInPictureIcon from "@lucide/svelte/icons/picture-in-picture-2";
+	import PlayIcon from "@lucide/svelte/icons/play";
+	import RotateCcwIcon from "@lucide/svelte/icons/rotate-ccw";
+	import Volume1Icon from "@lucide/svelte/icons/volume-1";
+	import Volume2Icon from "@lucide/svelte/icons/volume-2";
+	import VolumeXIcon from "@lucide/svelte/icons/volume-x";
+
+	import ControlButton from "./control-button.svelte";
+	import {
+		type Chapter,
+		formatTime,
+	} from "./format.js";
+	import type { VideoPlayerMessages } from "./messages.js";
+	import OptionMenu from "./option-menu.svelte";
+	import type { VideoPlayerState } from "./player.svelte.js";
+	import ScrubBar from "./scrub-bar.svelte";
+
+	const RATES = [0.5, 0.75, 1, 1.25, 1.5, 2];
+
+	interface Props {
+		player: VideoPlayerState;
+		paused: boolean;
+		currentTime: number;
+		chapters: Chapter[];
+		subtitles: string[];
+		activeSubtitle: number;
+		onsubtitlechange: (index: number) => void;
+		pictureInPicture: boolean;
+		portalTarget: HTMLElement | string;
+		text: VideoPlayerMessages;
+	}
+
+	const {
+		player,
+		paused,
+		currentTime,
+		chapters,
+		subtitles,
+		activeSubtitle,
+		onsubtitlechange,
+		pictureInPicture,
+		portalTarget,
+		text,
+	}: Props = $props();
+
+	const bufferedEnd = $derived(player.buffered.at(-1)?.end ?? 0);
+	const silent = $derived(player.muted || player.volume === 0);
+	const playLabel = $derived(
+		player.ended ? text.replay : paused ? text.play : text.pause,
+	);
+</script>
+
+<div
+	class="glass pointer-events-auto mx-2 mb-2 rounded-2xl px-3 pt-1.5 pb-1 sm:mx-3 sm:mb-3"
+>
+	<div class="flex items-center gap-3 text-xs font-medium tabular">
+		<span class="w-11 shrink-0">{formatTime(currentTime)}</span>
+		<div class="min-w-0 flex-1">
+			<ScrubBar
+				{currentTime}
+				duration={player.duration}
+				{bufferedEnd}
+				{chapters}
+				label={text.seek}
+				onseek={player.seekTo}
+			/>
+		</div>
+		<span class="text-muted-foreground w-11 shrink-0 text-right"
+			>-{formatTime(Math.max(0, player.duration - currentTime))}</span
+		>
+	</div>
+	<div class="flex items-center gap-0.5">
+		<ControlButton
+			label={playLabel}
+			shortcut="K"
+			{portalTarget}
+			onclick={player.togglePlay}
+			class="bg-primary text-primary-foreground hover:bg-primary/85 hover:text-primary-foreground dark:hover:bg-primary/85 glow"
+		>
+			{#if player.ended}
+				<RotateCcwIcon />
+			{:else if paused}
+				<PlayIcon class="size-5 fill-current" />
+			{:else}
+				<PauseIcon class="size-5 fill-current" />
+			{/if}
+		</ControlButton>
+		<ControlButton
+			label={silent ? text.unmute : text.mute}
+			shortcut="M"
+			{portalTarget}
+			onclick={player.toggleMute}
+		>
+			{#if silent}
+				<VolumeXIcon />
+			{:else if player.volume < 0.5}
+				<Volume1Icon />
+			{:else}
+				<Volume2Icon />
+			{/if}
+		</ControlButton>
+		<input
+			type="range"
+			min="0"
+			max="1"
+			step="0.05"
+			value={player.muted ? 0 : player.volume}
+			aria-label={text.volume}
+			oninput={(event) => {
+				player.volume = Number(event.currentTarget.value);
+				player.muted = player.volume === 0;
+			}}
+			class="accent-primary pointer-fine:block hidden h-1 w-20 cursor-pointer"
+		/>
+		<div class="ml-auto flex items-center gap-0.5">
+			{#if subtitles.length > 0}
+				<OptionMenu
+					label={text.subtitles}
+					shortcut="C"
+					options={[
+						{ value: "-1", label: text.subtitlesOff },
+						...subtitles.map((label, index) => ({
+							value: String(index),
+							label,
+						})),
+					]}
+					value={String(activeSubtitle)}
+					active={activeSubtitle >= 0}
+					{portalTarget}
+					onselect={(value) => onsubtitlechange(Number(value))}
+					onopenchange={(open) => (player.menuOpen = open)}
+				>
+					{#if activeSubtitle >= 0}
+						<CaptionsIcon />
+					{:else}
+						<CaptionsOffIcon />
+					{/if}
+				</OptionMenu>
+			{/if}
+			<OptionMenu
+				label={text.speed}
+				options={RATES.map((rate) => ({
+					value: String(rate),
+					label: rate === 1 ? text.speedNormal : `${rate}×`,
+				}))}
+				value={String(player.rate)}
+				active={player.rate !== 1}
+				{portalTarget}
+				onselect={(value) => (player.rate = Number(value))}
+				onopenchange={(open) => (player.menuOpen = open)}
+			>
+				<GaugeIcon />
+			</OptionMenu>
+			{#if pictureInPicture}
+				<ControlButton
+					label={text.pictureInPicture}
+					{portalTarget}
+					onclick={() => void player.togglePictureInPicture()}
+				>
+					<PictureInPictureIcon />
+				</ControlButton>
+			{/if}
+			<ControlButton
+				label={player.fullscreen ? text.exitFullscreen : text.fullscreen}
+				shortcut="F"
+				{portalTarget}
+				onclick={() => void player.toggleFullscreen()}
+			>
+				{#if player.fullscreen}
+					<MinimizeIcon />
+				{:else}
+					<MaximizeIcon />
+				{/if}
+			</ControlButton>
+		</div>
+	</div>
+</div>

package/dist/components/blocks/video-player/control-bar.svelte.d.ts

@@ -0,0 +1,18 @@
+import { type Chapter } from "./format.js";
+import type { VideoPlayerMessages } from "./messages.js";
+import type { VideoPlayerState } from "./player.svelte.js";
+interface Props {
+    player: VideoPlayerState;
+    paused: boolean;
+    currentTime: number;
+    chapters: Chapter[];
+    subtitles: string[];
+    activeSubtitle: number;
+    onsubtitlechange: (index: number) => void;
+    pictureInPicture: boolean;
+    portalTarget: HTMLElement | string;
+    text: VideoPlayerMessages;
+}
+declare const ControlBar: import("svelte").Component<Props, {}, "">;
+type ControlBar = ReturnType<typeof ControlBar>;
+export default ControlBar;

package/dist/components/blocks/video-player/control-button.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	import { Button } from "../../ui/button/index.js";
+	import * as Tooltip from "../../ui/tooltip/index.js";
+	import { cn } from "../../../utils.js";
+
+	interface Props {
+		label: string;
+		shortcut?: string;
+		pressed?: boolean;
+		portalTarget: HTMLElement | string;
+		onclick: () => void;
+		class?: string;
+		children: Snippet;
+	}
+
+	const {
+		label,
+		shortcut,
+		pressed,
+		portalTarget,
+		onclick,
+		class: className,
+		children,
+	}: Props = $props();
+</script>
+
+<Tooltip.Root>
+	<Tooltip.Trigger>
+		{#snippet child({ props })}
+			<Button
+				{...props}
+				variant="ghost"
+				size="icon"
+				aria-label={label}
+				aria-pressed={pressed}
+				{onclick}
+				class={cn(
+					"size-11 rounded-full md:size-9 [&_svg:not([class*='size-'])]:size-5",
+					className,
+				)}
+			>
+				{@render children()}
+			</Button>
+		{/snippet}
+	</Tooltip.Trigger>
+	<Tooltip.Content portalProps={{ to: portalTarget }} sideOffset={6}>
+		{label}
+		{#if shortcut}
+			<kbd class="font-sans opacity-60">{shortcut}</kbd>
+		{/if}
+	</Tooltip.Content>
+</Tooltip.Root>