@orochibraru/ui 1.0.0 → 1.0.1

package/dist/components/kit/input.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from "svelte/elements";
+
+	import PasswordInput from "../blocks/password-input.svelte";
+	import { Input } from "../ui/input/index.js";
+
+	import FieldFrame, { errorList, type FieldProps } from "./field-frame.svelte";
+
+	type Props = FieldProps &
+		Omit<HTMLInputAttributes, "value" | "files" | "class" | "id" | "name"> & {
+			value?: string | number;
+		};
+
+	let {
+		value = $bindable(""),
+		name,
+		label,
+		description,
+		error,
+		required = false,
+		disabled = false,
+		id,
+		class: className,
+		type = "text",
+		...rest
+	}: Props = $props();
+
+	const generatedId = $props.id();
+	const inputId = $derived(id ?? generatedId);
+	const invalid = $derived(errorList(error).length > 0);
+	const describedBy = $derived(
+		invalid
+			? `${inputId}-error`
+			: description
+				? `${inputId}-description`
+				: undefined,
+	);
+</script>
+
+<FieldFrame
+	id={inputId}
+	{label}
+	{description}
+	{error}
+	{required}
+	class={className}
+>
+	{#if type === "password"}
+		<PasswordInput
+			{...rest}
+			id={inputId}
+			{name}
+			{required}
+			{disabled}
+			aria-invalid={invalid || undefined}
+			aria-describedby={describedBy}
+			bind:value={() => String(value ?? ""), (next) => (value = next)}
+		/>
+	{:else}
+		<Input
+			{...rest}
+			id={inputId}
+			{name}
+			type={type ?? "text"}
+			{required}
+			{disabled}
+			aria-invalid={invalid || undefined}
+			aria-describedby={describedBy}
+			bind:value
+			class="h-11"
+		/>
+	{/if}
+</FieldFrame>

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

@@ -0,0 +1,9 @@
+import type { HTMLInputAttributes } from "svelte/elements";
+import { Input } from "../ui/input/index.js";
+import { type FieldProps } from "./field-frame.svelte";
+type Props = FieldProps & Omit<HTMLInputAttributes, "value" | "files" | "class" | "id" | "name"> & {
+    value?: string | number;
+};
+declare const Input: import("svelte").Component<Props, {}, "value">;
+type Input = ReturnType<typeof Input>;
+export default Input;

package/dist/components/kit/menu.svelte

@@ -0,0 +1,163 @@
+<script lang="ts" module>
+	import type { Component, Snippet } from "svelte";
+
+	export interface MenuItem {
+		label: string;
+		icon?: Component<{ class?: string }>;
+		href?: string;
+		onSelect?: () => void;
+		shortcut?: string;
+		destructive?: boolean;
+		disabled?: boolean;
+	}
+
+	export type MenuEntry = MenuItem | "separator";
+
+	export type MenuTrigger = Snippet<[{ props: Record<string, unknown> }]>;
+</script>
+
+<script lang="ts">
+	import EllipsisIcon from "@lucide/svelte/icons/ellipsis";
+	import { MediaQuery } from "svelte/reactivity";
+
+	import IconButton from "../blocks/icon-button.svelte";
+	import { Button } from "../ui/button/index.js";
+	import * as Drawer from "../ui/drawer/index.js";
+	import * as DropdownMenu from "../ui/dropdown-menu/index.js";
+	import { Separator } from "../ui/separator/index.js";
+	import { cn } from "../../utils.js";
+
+	const defaultMessages = {
+		label: "More actions",
+	};
+
+	interface Props {
+		items: MenuEntry[];
+		trigger?: MenuTrigger;
+		label?: string;
+		title?: string;
+		align?: "start" | "center" | "end";
+		messages?: Partial<typeof defaultMessages>;
+	}
+
+	const {
+		items,
+		trigger,
+		label,
+		title,
+		align = "end",
+		messages = {},
+	}: Props = $props();
+
+	const desktop = new MediaQuery("(min-width: 768px)");
+	const text = $derived({ ...defaultMessages, ...messages });
+	const accessibleName = $derived(label ?? text.label);
+
+	let open = $state(false);
+
+	function select(item: MenuItem) {
+		open = false;
+		item.onSelect?.();
+	}
+</script>
+
+{#snippet defaultTrigger(props: Record<string, unknown>)}
+	<IconButton
+		{...props}
+		label={accessibleName}
+		icon={EllipsisIcon}
+		class="text-muted-foreground"
+	/>
+{/snippet}
+
+{#snippet itemContent(item: MenuItem)}
+	{#if item.icon}
+		<item.icon class={desktop.current ? "size-4" : "size-5"} />
+	{/if}
+	<span class="truncate">{item.label}</span>
+{/snippet}
+
+{#if desktop.current}
+	<DropdownMenu.Root>
+		<DropdownMenu.Trigger>
+			{#snippet child({ props })}
+				{#if trigger}
+					{@render trigger({ props })}
+				{:else}
+					{@render defaultTrigger(props)}
+				{/if}
+			{/snippet}
+		</DropdownMenu.Trigger>
+		<DropdownMenu.Content {align} class="min-w-48">
+			{#each items as item, index (index)}
+				{#if item === "separator"}
+					<DropdownMenu.Separator />
+				{:else if item.href && !item.disabled}
+					<DropdownMenu.Item
+						variant={item.destructive ? "destructive" : "default"}
+						onSelect={() => select(item)}
+					>
+						{#snippet child({ props })}
+							<a href={item.href} {...props}>
+								{@render itemContent(item)}
+								{#if item.shortcut}
+									<DropdownMenu.Shortcut>{item.shortcut}</DropdownMenu.Shortcut>
+								{/if}
+							</a>
+						{/snippet}
+					</DropdownMenu.Item>
+				{:else}
+					<DropdownMenu.Item
+						variant={item.destructive ? "destructive" : "default"}
+						disabled={item.disabled}
+						onSelect={() => select(item)}
+					>
+						{@render itemContent(item)}
+						{#if item.shortcut}
+							<DropdownMenu.Shortcut>{item.shortcut}</DropdownMenu.Shortcut>
+						{/if}
+					</DropdownMenu.Item>
+				{/if}
+			{/each}
+		</DropdownMenu.Content>
+	</DropdownMenu.Root>
+{:else}
+	{@const props = {
+		type: "button",
+		"aria-haspopup": "dialog",
+		"aria-expanded": open,
+		onclick: () => (open = true),
+	}}
+	{#if trigger}
+		{@render trigger({ props })}
+	{:else}
+		{@render defaultTrigger(props)}
+	{/if}
+	<Drawer.Root bind:open>
+		<Drawer.Content>
+			<Drawer.Header class={cn("px-5 text-left", !title && "sr-only")}>
+				<Drawer.Title class="truncate">{title ?? accessibleName}</Drawer.Title>
+			</Drawer.Header>
+			<div class="flex flex-col gap-1 px-3 pb-4">
+				{#each items as item, index (index)}
+					{#if item === "separator"}
+						<Separator class="my-1" />
+					{:else}
+						<Button
+							variant="ghost"
+							href={item.href}
+							disabled={item.disabled}
+							class={cn(
+								"h-12 justify-start gap-3 rounded-xl px-3 text-base",
+								item.destructive && "text-destructive hover:text-destructive",
+							)}
+							onclick={() => select(item)}
+						>
+							{@render itemContent(item)}
+						</Button>
+					{/if}
+				{/each}
+			</div>
+		</Drawer.Content>
+	</Drawer.Root>
+{/if}

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

@@ -0,0 +1,28 @@
+import type { Component, Snippet } from "svelte";
+export interface MenuItem {
+    label: string;
+    icon?: Component<{
+        class?: string;
+    }>;
+    href?: string;
+    onSelect?: () => void;
+    shortcut?: string;
+    destructive?: boolean;
+    disabled?: boolean;
+}
+export type MenuEntry = MenuItem | "separator";
+export type MenuTrigger = Snippet<[{
+    props: Record<string, unknown>;
+}]>;
+declare const Menu: Component<{
+    items: MenuEntry[];
+    trigger?: MenuTrigger;
+    label?: string;
+    title?: string;
+    align?: "start" | "center" | "end";
+    messages?: Partial<{
+        label: string;
+    }>;
+}, {}, "">;
+type Menu = ReturnType<typeof Menu>;
+export default Menu;

package/dist/components/kit/pagination.svelte

@@ -0,0 +1,134 @@
+<script lang="ts">
+	import ChevronLeftIcon from "@lucide/svelte/icons/chevron-left";
+	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+	import EllipsisIcon from "@lucide/svelte/icons/ellipsis";
+	import { MediaQuery } from "svelte/reactivity";
+
+	import { Button } from "../ui/button/index.js";
+	import { cn } from "../../utils.js";
+
+	const defaultMessages = {
+		label: "Pagination",
+		previous: "Previous",
+		next: "Next",
+		pageOf: (page: number, pageCount: number) => `Page ${page} of ${pageCount}`,
+		range: (first: number, last: number, total: number) =>
+			`${first}–${last} of ${total}`,
+	};
+
+	interface Props {
+		page?: number;
+		total: number;
+		perPage?: number;
+		onchange?: (page: number) => void;
+		href?: (page: number) => string;
+		class?: string;
+		messages?: Partial<typeof defaultMessages>;
+	}
+
+	let {
+		page = $bindable(1),
+		total,
+		perPage = 20,
+		onchange,
+		href,
+		class: className,
+		messages = {},
+	}: Props = $props();
+
+	const desktop = new MediaQuery("(min-width: 768px)");
+	const text = $derived({ ...defaultMessages, ...messages });
+
+	const pageCount = $derived(Math.max(1, Math.ceil(total / perPage)));
+	const first = $derived(total === 0 ? 0 : (page - 1) * perPage + 1);
+	const last = $derived(Math.min(page * perPage, total));
+
+	const pages = $derived.by<(number | "gap")[]>(() => {
+		if (pageCount <= 7) {
+			return Array.from({ length: pageCount }, (_, index) => index + 1);
+		}
+		if (page <= 4) {
+			return [1, 2, 3, 4, 5, "gap", pageCount];
+		}
+		if (page >= pageCount - 3) {
+			return [
+				1,
+				"gap",
+				...Array.from({ length: 5 }, (_, index) => pageCount - 4 + index),
+			];
+		}
+		return [1, "gap", page - 1, page, page + 1, "gap", pageCount];
+	});
+
+	function go(next: number) {
+		if (next < 1 || next > pageCount || next === page) {
+			return;
+		}
+		page = next;
+		onchange?.(next);
+	}
+</script>
+
+{#if total > perPage}
+	<nav
+		aria-label={text.label}
+		class={cn("flex w-full items-center justify-between gap-3", className)}
+	>
+		{#if desktop.current}
+			<p class="text-muted-foreground text-sm tabular-nums">
+				{text.range(first, last, total)}
+			</p>
+		{/if}
+		<div
+			class="flex w-full items-center justify-between gap-1 md:w-auto md:justify-end"
+		>
+			<Button
+				variant="outline"
+				class="h-11 rounded-xl md:h-9"
+				href={href?.(page - 1)}
+				disabled={page <= 1}
+				onclick={() => go(page - 1)}
+			>
+				<ChevronLeftIcon />
+				{text.previous}
+			</Button>
+			{#if desktop.current}
+				{#each pages as entry, index (index)}
+					{#if entry === "gap"}
+						<span
+							aria-hidden="true"
+							class="text-muted-foreground flex size-9 items-center justify-center"
+						>
+							<EllipsisIcon class="size-4" />
+						</span>
+					{:else}
+						<Button
+							variant={entry === page ? "outline" : "ghost"}
+							size="icon"
+							class="tabular-nums"
+							href={href?.(entry)}
+							aria-current={entry === page ? "page" : undefined}
+							onclick={() => go(entry)}
+						>
+							{entry}
+						</Button>
+					{/if}
+				{/each}
+			{:else}
+				<span class="text-muted-foreground text-sm tabular-nums">
+					{text.pageOf(page, pageCount)}
+				</span>
+			{/if}
+			<Button
+				variant="outline"
+				class="h-11 rounded-xl md:h-9"
+				href={href?.(page + 1)}
+				disabled={page >= pageCount}
+				onclick={() => go(page + 1)}
+			>
+				{text.next}
+				<ChevronRightIcon />
+			</Button>
+		</div>
+	</nav>
+{/if}

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

@@ -0,0 +1,17 @@
+declare const Pagination: import("svelte").Component<{
+    page?: number;
+    total: number;
+    perPage?: number;
+    onchange?: (page: number) => void;
+    href?: (page: number) => string;
+    class?: string;
+    messages?: Partial<{
+        label: string;
+        previous: string;
+        next: string;
+        pageOf: (page: number, pageCount: number) => string;
+        range: (first: number, last: number, total: number) => string;
+    }>;
+}, {}, "page">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;

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

@@ -0,0 +1,131 @@
+<script lang="ts">
+	import CheckIcon from "@lucide/svelte/icons/check";
+	import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
+
+	import * as RadioGroup from "../ui/radio-group/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;
+		variant?: "list" | "cards";
+	};
+
+	let {
+		options,
+		value = $bindable(""),
+		variant = "list",
+		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);
+</script>
+
+<FieldsetFrame
+	id={listId}
+	{label}
+	{description}
+	{error}
+	{required}
+	{disabled}
+	class={className}
+>
+	<RadioGroup.Root
+		{name}
+		{required}
+		{disabled}
+		bind:value
+		aria-labelledby={label ? `${listId}-label` : undefined}
+		aria-invalid={invalid || undefined}
+		class={variant === "cards"
+			? "gap-2 md:grid-cols-2 xl:grid-cols-3"
+			: "flex flex-col gap-0"}
+	>
+		{#each options as option, index (option.value)}
+			{@const optionId = `${listId}-${index}`}
+			{@const describedBy = option.description
+				? `${optionId}-description`
+				: undefined}
+			{#if variant === "cards"}
+				<RadioGroupPrimitive.Item
+					id={optionId}
+					value={option.value}
+					disabled={option.disabled}
+					aria-labelledby="{optionId}-label"
+					aria-describedby={describedBy}
+					class={cn(
+						"border-border bg-card data-checked:border-primary data-checked:ring-primary/30 focus-visible:ring-ring/50 flex min-h-14 w-full cursor-pointer items-center gap-3 rounded-2xl border p-3 text-left transition-all outline-none data-checked:ring-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50",
+						invalid && "border-destructive",
+					)}
+				>
+					{#snippet children({ checked })}
+						<span class="min-w-0 flex-1">
+							<span id="{optionId}-label" class="block text-sm font-medium"
+								>{option.label}</span
+							>
+							{#if option.description}
+								<span
+									id="{optionId}-description"
+									class="text-muted-foreground block text-sm"
+									>{option.description}</span
+								>
+							{/if}
+						</span>
+						<CheckIcon
+							class={cn(
+								"text-primary size-5 shrink-0",
+								!checked && "invisible",
+							)}
+							aria-hidden="true"
+						/>
+					{/snippet}
+				</RadioGroupPrimitive.Item>
+			{:else}
+				<div
+					class="group/row relative flex min-h-11 items-start gap-3 py-2.5 has-disabled:opacity-50"
+				>
+					<RadioGroup.Item
+						id={optionId}
+						value={option.value}
+						disabled={option.disabled}
+						aria-describedby={describedBy}
+						class={cn("z-10 size-5", invalid && "border-destructive")}
+					/>
+					<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>
+			{/if}
+		{/each}
+	</RadioGroup.Root>
+</FieldsetFrame>

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

@@ -0,0 +1,15 @@
+import { type FieldProps } from "./field-frame.svelte";
+interface Option {
+    value: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+}
+type Props = FieldProps & {
+    options: readonly Option[];
+    value?: string;
+    variant?: "list" | "cards";
+};
+declare const RadioList: import("svelte").Component<Props, {}, "value">;
+type RadioList = ReturnType<typeof RadioList>;
+export default RadioList;

package/dist/components/kit/segmented-control/segment.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import type { Component } from "svelte";
+
+	import * as ToggleGroup from "../../ui/toggle-group/index.js";
+	import * as Tooltip from "../../ui/tooltip/index.js";
+
+	interface Props {
+		value: string;
+		label: string;
+		icon?: Component<{ class?: string }>;
+	}
+
+	const { value, label, icon: Icon }: Props = $props();
+
+	let available = $state(0);
+	let needed = $state(0);
+	const fits = $derived(!Icon || needed <= available);
+</script>
+
+<Tooltip.Root disabled={fits}>
+	<Tooltip.Trigger>
+		{#snippet child({ props })}
+			<ToggleGroup.Item
+				{...props}
+				{value}
+				aria-label={label}
+				class="bg-secondary data-[state=on]:bg-primary data-[state=on]:text-primary-foreground relative h-11 min-w-0 flex-1 overflow-hidden rounded-xl px-3"
+			>
+				<span
+					class="flex min-w-0 flex-1 items-center justify-center gap-2"
+					bind:clientWidth={available}
+				>
+					{#if Icon}<Icon class="shrink-0" />{/if}
+					{#if fits}<span class="truncate">{label}</span>{/if}
+				</span>
+				<span
+					class="invisible absolute flex items-center gap-2 whitespace-nowrap"
+					aria-hidden="true"
+					bind:clientWidth={needed}
+				>
+					{#if Icon}<Icon class="shrink-0" />{/if}{label}
+				</span>
+			</ToggleGroup.Item>
+		{/snippet}
+	</Tooltip.Trigger>
+	<Tooltip.Content>{label}</Tooltip.Content>
+</Tooltip.Root>

package/dist/components/kit/segmented-control/segment.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Component } from "svelte";
+interface Props {
+    value: string;
+    label: string;
+    icon?: Component<{
+        class?: string;
+    }>;
+}
+declare const Segment: Component<Props, {}, "">;
+type Segment = ReturnType<typeof Segment>;
+export default Segment;

package/dist/components/kit/segmented-control.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import type { Component } from "svelte";
+
+	import * as ToggleGroup from "../ui/toggle-group/index.js";
+	import * as Tooltip from "../ui/tooltip/index.js";
+
+	import { errorList, type FieldProps } from "./field-frame.svelte";
+	import FieldsetFrame from "./fieldset-frame.svelte";
+	import Segment from "./segmented-control/segment.svelte";
+
+	interface Option {
+		value: string;
+		label: string;
+		icon?: Component<{ class?: string }>;
+	}
+
+	type Props = FieldProps & {
+		options: readonly Option[];
+		value?: string;
+	};
+
+	let {
+		options,
+		value = $bindable(""),
+		name,
+		label,
+		description,
+		error,
+		required = false,
+		disabled = false,
+		id,
+		class: className,
+	}: Props = $props();
+
+	const generatedId = $props.id();
+	const controlId = $derived(id ?? generatedId);
+	const invalid = $derived(errorList(error).length > 0);
+</script>
+
+<FieldsetFrame
+	id={controlId}
+	{label}
+	{description}
+	{error}
+	{required}
+	{disabled}
+	class={className}
+>
+	<Tooltip.Provider>
+		<ToggleGroup.Root
+			type="single"
+			bind:value={
+				() => value,
+				(next) => {
+					if (typeof next === "string" && next) value = next;
+				}
+			}
+			spacing={2}
+			{disabled}
+			aria-labelledby={label ? `${controlId}-label` : undefined}
+			aria-invalid={invalid || undefined}
+			class="w-full"
+		>
+			{#each options as option (option.value)}
+				<Segment value={option.value} label={option.label} icon={option.icon} />
+			{/each}
+		</ToggleGroup.Root>
+	</Tooltip.Provider>
+	<input type="hidden" {name} {value} {disabled} />
+</FieldsetFrame>