@orochibraru/ui 1.0.0 → 1.0.1

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

@@ -12,10 +12,21 @@
 		chapters: Chapter[];
 		label: string;
 		onseek: (time: number) => void;
+		/** `overlay` over a video, white on dark; `surface` on the theme's own surfaces. */
+		variant?: "overlay" | "surface";
 	}
 
-	const { currentTime, duration, bufferedEnd, chapters, label, onseek }: Props =
-		$props();
+	const {
+		currentTime,
+		duration,
+		bufferedEnd,
+		chapters,
+		label,
+		onseek,
+		variant = "overlay",
+	}: Props = $props();
+
+	const overlay = $derived(variant === "overlay");
 
 	let track = $state<HTMLDivElement | null>(null);
 	let hoverRatio = $state<number | null>(null);
@@ -41,43 +52,59 @@
 <div
 	bind:this={track}
 	role="presentation"
-	class="group/scrub relative flex h-6 items-center"
+	class="group/scrub relative flex h-8 items-center"
 	{onpointermove}
 	onpointerleave={() => (hoverRatio = null)}
 >
 	<div
-		class="bg-foreground/15 pointer-events-none absolute inset-x-0 h-1.5 rounded-full transition-[height] group-hover/scrub:h-2"
+		class="pointer-events-none absolute inset-x-0 h-1.5 rounded-full transition-[height] group-hover/scrub:h-2 {overlay
+			? 'bg-white/15'
+			: 'bg-foreground/15'}"
 	></div>
 	<div
-		class="bg-foreground/20 pointer-events-none absolute h-1.5 rounded-full transition-[height] group-hover/scrub:h-2"
+		class="pointer-events-none absolute h-1.5 rounded-full transition-[height] group-hover/scrub:h-2 {overlay
+			? 'bg-white/25'
+			: 'bg-foreground/20'}"
 		style:width="{ratio(bufferedEnd) * 100}%"
 	></div>
 	<div
-		class="bg-primary glow pointer-events-none absolute h-1.5 rounded-full transition-[height] group-hover/scrub:h-2"
+		class="pointer-events-none absolute h-1.5 rounded-full transition-[height] group-hover/scrub:h-2 {overlay
+			? 'from-primary/60 to-primary bg-linear-to-r shadow-[0_0_12px_var(--color-primary)]'
+			: 'bg-primary glow'}"
 		style:width="{ratio(currentTime) * 100}%"
 	></div>
 	{#each chapters as chapter (chapter.start)}
 		{#if chapter.start > 0 && chapter.start < duration}
 			<div
-				class="bg-background pointer-events-none absolute h-2.5 w-0.5 -translate-x-1/2 rounded-full"
+				class="pointer-events-none absolute h-3 w-0.5 -translate-x-1/2 rounded-full {overlay
+					? 'bg-black/70'
+					: 'bg-background'}"
 				style:left="{ratio(chapter.start) * 100}%"
 			></div>
 		{/if}
 	{/each}
 	<div
-		class="bg-primary ring-background pointer-events-none absolute size-3.5 -translate-x-1/2 rounded-full shadow-md ring-2 transition-transform group-focus-within/scrub:scale-125 group-hover/scrub:scale-125"
+		class="pointer-events-none absolute size-3.5 -translate-x-1/2 rounded-full shadow-md transition-transform group-focus-within/scrub:scale-125 group-hover/scrub:scale-125 {overlay
+			? 'ring-primary/40 bg-white ring-4'
+			: 'bg-primary ring-background ring-2'}"
 		style:left="{ratio(currentTime) * 100}%"
 	></div>
 	{#if hoverRatio !== null && duration > 0}
 		<div
-			class="bg-popover text-popover-foreground pointer-events-none absolute bottom-full mb-2 flex -translate-x-1/2 flex-col items-center rounded-lg px-2 py-1 text-xs font-medium tabular shadow-md"
+			class="pointer-events-none absolute bottom-full mb-2 flex -translate-x-1/2 flex-col items-center px-2 py-1 text-xs font-medium tabular {overlay
+				? 'rounded-md bg-black/80 text-white ring-1 ring-white/10 backdrop-blur-md'
+				: 'bg-popover text-popover-foreground rounded-lg shadow-md'}"
 			style:left="{hoverRatio * 100}%"
 		>
 			{#if hovered?.title}
 				<span class="max-w-48 truncate font-semibold">{hovered.title}</span>
 			{/if}
-			<span class={hovered?.title ? "text-muted-foreground" : undefined}
-				>{formatTime(hoverRatio * duration)}</span
+			<span
+				class={hovered?.title
+					? overlay
+						? "text-white/60"
+						: "text-muted-foreground"
+					: undefined}>{formatTime(hoverRatio * duration)}</span
 			>
 		</div>
 	{/if}
@@ -90,6 +117,6 @@
 		aria-label={label}
 		aria-valuetext="{formatTime(currentTime)} / {formatTime(duration)}"
 		oninput={(event) => onseek(Number(event.currentTarget.value))}
-		class="relative h-6 w-full cursor-pointer appearance-none bg-transparent focus-visible:outline-none [&::-moz-range-thumb]:size-5 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:bg-transparent [&::-webkit-slider-thumb]:size-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:bg-transparent"
+		class="relative h-8 w-full cursor-pointer appearance-none bg-transparent focus-visible:outline-none [&::-moz-range-thumb]:size-5 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:bg-transparent [&::-webkit-slider-thumb]:size-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:bg-transparent"
 	/>
 </div>

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

@@ -6,6 +6,8 @@ interface Props {
     chapters: Chapter[];
     label: string;
     onseek: (time: number) => void;
+    /** `overlay` over a video, white on dark; `surface` on the theme's own surfaces. */
+    variant?: "overlay" | "surface";
 }
 declare const ScrubBar: import("svelte").Component<Props, {}, "">;
 type ScrubBar = ReturnType<typeof ScrubBar>;

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

@@ -255,12 +255,12 @@
 
 		<div
 			class={cn(
-				"pointer-events-none absolute inset-0 flex flex-col pt-safe-top pr-safe-right pb-safe-bottom pl-safe-left transition-[opacity,visibility] duration-200",
+				"pointer-events-none absolute inset-0 flex flex-col bg-linear-to-t from-black/60 via-transparent to-black/60 pt-safe-top pr-safe-right pb-safe-bottom pl-safe-left transition-[opacity,visibility] duration-200",
 				controlsShown && !player.failed ? "opacity-100" : "invisible opacity-0",
 			)}
 		>
 			{#if title}
-				<div class="bg-linear-to-b from-black/60 to-transparent px-4 pt-3 pb-8">
+				<div class="px-5 pt-4">
 					<p class="truncate font-semibold text-white drop-shadow">
 						{title}
 					</p>

package/dist/components/kit/accordion.svelte

@@ -0,0 +1,70 @@
+<script lang="ts" module>
+	export interface AccordionEntry {
+		title: string;
+		content?: string;
+		value?: string;
+	}
+</script>
+
+<script lang="ts" generics="Item extends AccordionEntry">
+	import type { Snippet } from "svelte";
+
+	import * as Accordion from "../ui/accordion/index.js";
+	import { cn } from "../../utils.js";
+
+	interface Props {
+		items: Item[];
+		type?: "single" | "multiple";
+		value?: string | string[];
+		children?: Snippet<[Item]>;
+		class?: string;
+	}
+
+	let {
+		items,
+		type = "single",
+		value = $bindable(),
+		children,
+		class: className,
+	}: Props = $props();
+</script>
+
+{#snippet entries()}
+	{#each items as item, index (index)}
+		<Accordion.Item value={item.value ?? item.title}>
+			<Accordion.Trigger>{item.title}</Accordion.Trigger>
+			<Accordion.Content>
+				{#if children}
+					{@render children(item)}
+				{:else}
+					<p class="text-muted-foreground whitespace-pre-line">
+						{item.content}
+					</p>
+				{/if}
+			</Accordion.Content>
+		</Accordion.Item>
+	{/each}
+{/snippet}
+
+{#if type === "multiple"}
+	<Accordion.Root
+		type="multiple"
+		class={cn("w-full", className)}
+		bind:value={
+			() => (Array.isArray(value) ? value : value ? [value] : []),
+			(next) => (value = next)
+		}
+	>
+		{@render entries()}
+	</Accordion.Root>
+{:else}
+	<Accordion.Root
+		type="single"
+		class={cn("w-full", className)}
+		bind:value={
+			() => (typeof value === "string" ? value : ""), (next) => (value = next)
+		}
+	>
+		{@render entries()}
+	</Accordion.Root>
+{/if}

package/dist/components/kit/accordion.svelte.d.ts

@@ -0,0 +1,37 @@
+export interface AccordionEntry {
+    title: string;
+    content?: string;
+    value?: string;
+}
+import type { Snippet } from "svelte";
+import * as Accordion from "../ui/accordion/index.js";
+declare function $$render<Item extends AccordionEntry>(): {
+    props: {
+        items: Item[];
+        type?: "single" | "multiple";
+        value?: string | string[];
+        children?: Snippet<[Item]>;
+        class?: string;
+    };
+    exports: {};
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Item extends AccordionEntry> {
+    props(): ReturnType<typeof $$render<Item>>['props'];
+    events(): ReturnType<typeof $$render<Item>>['events'];
+    slots(): ReturnType<typeof $$render<Item>>['slots'];
+    bindings(): "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Item extends AccordionEntry>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Item>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Item>['props']>, ReturnType<__sveltets_Render<Item>['events']>, ReturnType<__sveltets_Render<Item>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Item>['bindings']>;
+    } & ReturnType<__sveltets_Render<Item>['exports']>;
+    <Item extends AccordionEntry>(internal: unknown, props: ReturnType<__sveltets_Render<Item>['props']> & {}): ReturnType<__sveltets_Render<Item>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Accordion: $$IsomorphicComponent;
+type Accordion<Item extends AccordionEntry> = InstanceType<typeof Accordion<Item>>;
+export default Accordion;

package/dist/components/kit/avatar-group.svelte

@@ -0,0 +1,84 @@
+<script lang="ts" module>
+	export interface AvatarPerson {
+		name: string;
+		src?: string;
+	}
+
+	export function initials(name: string): string {
+		return name
+			.trim()
+			.split(/\s+/)
+			.slice(0, 2)
+			.map((word) => word.charAt(0))
+			.join("")
+			.toUpperCase();
+	}
+</script>
+
+<script lang="ts">
+	import * as Avatar from "../ui/avatar/index.js";
+	import * as Tooltip from "../ui/tooltip/index.js";
+	import { cn } from "../../utils.js";
+
+	interface Props {
+		people: AvatarPerson[];
+		max?: number;
+		size?: "sm" | "default" | "lg";
+		class?: string;
+	}
+
+	const {
+		people,
+		max = 4,
+		size = "default",
+		class: className,
+	}: Props = $props();
+
+	const shown = $derived(people.slice(0, Math.max(0, max)));
+	const hidden = $derived(people.slice(shown.length));
+	const hiddenNames = $derived(hidden.map((person) => person.name).join(", "));
+
+	const boxSizes = { sm: "size-6", default: "size-8", lg: "size-10" };
+	const textSizes = {
+		sm: "text-[0.625rem]",
+		default: "text-xs",
+		lg: "text-sm",
+	};
+
+	const triggerClass =
+		"bg-background ring-background focus-visible:ring-ring/50 relative shrink-0 rounded-full ring-2 outline-none focus-visible:ring-3";
+</script>
+
+<div class={cn("flex w-fit items-center -space-x-2", className)}>
+	{#each shown as person, index (index)}
+		<Tooltip.Root>
+			<Tooltip.Trigger class={triggerClass} aria-label={person.name}>
+				<Avatar.Root {size}>
+					{#if person.src}
+						<Avatar.Image src={person.src} alt="" />
+					{/if}
+					<Avatar.Fallback class={cn("font-medium", textSizes[size])}>
+						{initials(person.name)}
+					</Avatar.Fallback>
+				</Avatar.Root>
+			</Tooltip.Trigger>
+			<Tooltip.Content>{person.name}</Tooltip.Content>
+		</Tooltip.Root>
+	{/each}
+	{#if hidden.length > 0}
+		<Tooltip.Root>
+			<Tooltip.Trigger class={triggerClass} aria-label={hiddenNames}>
+				<span
+					class={cn(
+						"bg-muted text-muted-foreground tabular flex items-center justify-center rounded-full font-medium",
+						boxSizes[size],
+						textSizes[size],
+					)}
+				>
+					+{hidden.length}
+				</span>
+			</Tooltip.Trigger>
+			<Tooltip.Content>{hiddenNames}</Tooltip.Content>
+		</Tooltip.Root>
+	{/if}
+</div>

package/dist/components/kit/avatar-group.svelte.d.ts

@@ -0,0 +1,14 @@
+export interface AvatarPerson {
+    name: string;
+    src?: string;
+}
+export declare function initials(name: string): string;
+interface Props {
+    people: AvatarPerson[];
+    max?: number;
+    size?: "sm" | "default" | "lg";
+    class?: string;
+}
+declare const AvatarGroup: import("svelte").Component<Props, {}, "">;
+type AvatarGroup = ReturnType<typeof AvatarGroup>;
+export default AvatarGroup;

package/dist/components/kit/bar-list.svelte

@@ -0,0 +1,104 @@
+<script lang="ts" module>
+	import type { Component } from "svelte";
+
+	export interface BarListItem {
+		label: string;
+		value: number;
+		href?: string;
+		icon?: Component<{ class?: string }>;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "../../utils.js";
+
+	const defaultMessages = {
+		empty: "Nothing to show yet.",
+		showAll: "Show all",
+		showLess: "Show less",
+	};
+
+	interface Props {
+		items: BarListItem[];
+		format?: (value: number) => string;
+		max?: number;
+		messages?: Partial<typeof defaultMessages>;
+		class?: string;
+	}
+
+	const {
+		items,
+		format = (value: number) => value.toLocaleString(),
+		max,
+		messages = {},
+		class: className,
+	}: Props = $props();
+
+	const text = $derived({ ...defaultMessages, ...messages });
+	const ranked = $derived(
+		items.toSorted((left, right) => right.value - left.value),
+	);
+	const largest = $derived(Math.max(0, ...ranked.map((item) => item.value)));
+	const collapsible = $derived(max !== undefined && ranked.length > max);
+
+	let expanded = $state(false);
+
+	const shown = $derived(
+		collapsible && !expanded ? ranked.slice(0, max) : ranked,
+	);
+
+	function width(value: number): string {
+		return largest > 0 ? `${(Math.max(0, value) / largest) * 100}%` : "0%";
+	}
+</script>
+
+{#snippet row(item: BarListItem)}
+	<span class="flex items-center gap-2 text-sm">
+		{#if item.icon}
+			<item.icon class="text-muted-foreground size-4 shrink-0" />
+		{/if}
+		<span class="min-w-0 flex-1 truncate">{item.label}</span>
+		<span class="tabular shrink-0 font-medium">{format(item.value)}</span>
+	</span>
+	<span class="bg-muted block h-2 rounded-r-full" aria-hidden="true">
+		<span
+			class="bg-primary block h-full rounded-r-full"
+			style:width={width(item.value)}
+		></span>
+	</span>
+{/snippet}
+
+<div class={cn("flex w-full flex-col gap-2", className)}>
+	{#if ranked.length === 0}
+		<p class="text-muted-foreground text-sm">{text.empty}</p>
+	{:else}
+		<ol class="flex flex-col gap-1">
+			{#each shown as item, index (index)}
+				<li>
+					{#if item.href}
+						<a
+							href={item.href}
+							class="hover:bg-muted focus-visible:ring-ring/50 flex flex-col gap-1.5 rounded-lg px-2 py-1.5 outline-none focus-visible:ring-3"
+						>
+							{@render row(item)}
+						</a>
+					{:else}
+						<div class="flex flex-col gap-1.5 px-2 py-1.5">
+							{@render row(item)}
+						</div>
+					{/if}
+				</li>
+			{/each}
+		</ol>
+		{#if collapsible}
+			<button
+				type="button"
+				aria-expanded={expanded}
+				onclick={() => (expanded = !expanded)}
+				class="text-primary focus-visible:ring-ring/50 h-11 self-start rounded-md px-2 text-sm font-medium outline-none hover:underline focus-visible:ring-3 md:h-9"
+			>
+				{expanded ? text.showLess : text.showAll}
+			</button>
+		{/if}
+	{/if}
+</div>

package/dist/components/kit/bar-list.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Component } from "svelte";
+export interface BarListItem {
+    label: string;
+    value: number;
+    href?: string;
+    icon?: Component<{
+        class?: string;
+    }>;
+}
+declare const BarList: Component<{
+    items: BarListItem[];
+    format?: (value: number) => string;
+    max?: number;
+    messages?: Partial<{
+        empty: string;
+        showAll: string;
+        showLess: string;
+    }>;
+    class?: string;
+}, {}, "">;
+type BarList = ReturnType<typeof BarList>;
+export default BarList;

package/dist/components/kit/breadcrumbs.svelte

@@ -0,0 +1,102 @@
+<script lang="ts" module>
+	export interface Crumb {
+		label: string;
+		href?: string;
+	}
+</script>
+
+<script lang="ts">
+	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+	import EllipsisIcon from "@lucide/svelte/icons/ellipsis";
+	import { MediaQuery } from "svelte/reactivity";
+
+	import { cn } from "../../utils.js";
+
+	import Menu from "./menu.svelte";
+
+	const defaultMessages = {
+		label: "Breadcrumb",
+		more: "Show hidden pages",
+	};
+
+	interface Props {
+		items: Crumb[];
+		class?: string;
+		messages?: Partial<typeof defaultMessages>;
+	}
+
+	const { items, class: className, messages = {} }: Props = $props();
+
+	const desktop = new MediaQuery("(min-width: 768px)");
+	const text = $derived({ ...defaultMessages, ...messages });
+
+	const visibleTail = $derived(desktop.current ? 2 : 1);
+	const collapsed = $derived(
+		items.length > (desktop.current ? 4 : 2)
+			? items.slice(1, items.length - visibleTail)
+			: [],
+	);
+	const shown = $derived(
+		collapsed.length > 0
+			? [...items.slice(0, 1), ...items.slice(items.length - visibleTail)]
+			: items,
+	);
+</script>
+
+{#snippet separator()}
+	<li role="presentation" aria-hidden="true" class="text-muted-foreground/70">
+		<ChevronRightIcon class="size-3.5" />
+	</li>
+{/snippet}
+
+<nav aria-label={text.label} class={cn("w-full min-w-0", className)}>
+	<ol class="text-muted-foreground flex min-w-0 items-center gap-1 text-sm">
+		{#each shown as crumb, index (index)}
+			{@const current = index === shown.length - 1}
+			{#if index > 0}
+				{@render separator()}
+			{/if}
+			<li class={cn("flex min-w-0 items-center", !current && "shrink-2")}>
+				{#if current}
+					<span aria-current="page" class="text-foreground truncate font-medium"
+						>{crumb.label}</span
+					>
+				{:else if crumb.href}
+					<a
+						href={crumb.href}
+						class="hover:text-foreground focus-visible:ring-ring/50 flex h-11 min-w-0 items-center rounded-md px-1 transition-colors outline-none focus-visible:ring-3 md:h-8"
+					>
+						<span class="truncate">{crumb.label}</span>
+					</a>
+				{:else}
+					<span class="truncate px-1">{crumb.label}</span>
+				{/if}
+			</li>
+			{#if index === 0 && collapsed.length > 0}
+				{@render separator()}
+				<li class="flex shrink-0 items-center">
+					<Menu
+						align="start"
+						label={text.more}
+						items={collapsed.map((hidden) => ({
+							label: hidden.label,
+							href: hidden.href,
+							disabled: !hidden.href,
+						}))}
+					>
+						{#snippet trigger({ props })}
+							<button
+								type="button"
+								{...props}
+								aria-label={text.more}
+								class="hover:text-foreground hover:bg-muted focus-visible:ring-ring/50 flex size-11 items-center justify-center rounded-md transition-colors outline-none focus-visible:ring-3 md:size-8"
+							>
+								<EllipsisIcon class="size-4" />
+							</button>
+						{/snippet}
+					</Menu>
+				</li>
+			{/if}
+		{/each}
+	</ol>
+</nav>

package/dist/components/kit/breadcrumbs.svelte.d.ts

@@ -0,0 +1,14 @@
+export interface Crumb {
+    label: string;
+    href?: string;
+}
+declare const Breadcrumbs: import("svelte").Component<{
+    items: Crumb[];
+    class?: string;
+    messages?: Partial<{
+        label: string;
+        more: string;
+    }>;
+}, {}, "">;
+type Breadcrumbs = ReturnType<typeof Breadcrumbs>;
+export default Breadcrumbs;

package/dist/components/kit/checkbox-list.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+	import { Checkbox } from "../ui/checkbox/index.js";
+	import { cn } from "../../utils.js";
+
+	import { errorList, type FieldProps } from "./field-frame.svelte";
+	import FieldsetFrame from "./fieldset-frame.svelte";
+
+	interface Option {
+		value: string;
+		label: string;
+		description?: string;
+		disabled?: boolean;
+	}
+
+	type Props = FieldProps & {
+		options: readonly Option[];
+		value?: string[];
+		orientation?: "vertical" | "horizontal";
+	};
+
+	let {
+		options,
+		value = $bindable([]),
+		orientation = "vertical",
+		name,
+		label,
+		description,
+		error,
+		required = false,
+		disabled = false,
+		id,
+		class: className,
+	}: Props = $props();
+
+	const generatedId = $props.id();
+	const listId = $derived(id ?? generatedId);
+	const invalid = $derived(errorList(error).length > 0);
+
+	function setChecked(optionValue: string, checked: boolean) {
+		value = checked
+			? [...value, optionValue]
+			: value.filter((entry) => entry !== optionValue);
+	}
+</script>
+
+<FieldsetFrame
+	id={listId}
+	{label}
+	{description}
+	{error}
+	{required}
+	{disabled}
+	class={className}
+>
+	<div
+		class={cn(
+			"flex",
+			orientation === "horizontal" ? "flex-row flex-wrap gap-x-6" : "flex-col",
+		)}
+	>
+		{#each options as option, index (option.value)}
+			{@const optionId = `${listId}-${index}`}
+			<div
+				class="group/row relative flex min-h-11 items-start gap-3 py-2.5 has-disabled:opacity-50"
+			>
+				<Checkbox
+					id={optionId}
+					{name}
+					value={option.value}
+					disabled={disabled || option.disabled}
+					bind:checked={
+						() => value.includes(option.value),
+						(checked) => setChecked(option.value, checked)
+					}
+					aria-invalid={invalid || undefined}
+					aria-describedby={option.description
+						? `${optionId}-description`
+						: undefined}
+					class="z-10 size-5"
+				/>
+				<span class="min-w-0 flex-1">
+					<label
+						for={optionId}
+						class="block cursor-pointer text-sm leading-snug font-medium after:absolute after:inset-0 group-has-disabled/row:cursor-not-allowed"
+						>{option.label}</label
+					>
+					{#if option.description}
+						<span
+							id="{optionId}-description"
+							class="text-muted-foreground mt-0.5 block text-sm"
+							>{option.description}</span
+						>
+					{/if}
+				</span>
+			</div>
+		{/each}
+	</div>
+</FieldsetFrame>