@orochibraru/ui 1.0.0 → 1.0.1

package/dist/components/kit/date-field.svelte

@@ -0,0 +1,210 @@
+<script lang="ts">
+	import {
+		type CalendarDate,
+		type DateValue,
+		getLocalTimeZone,
+		parseDate,
+		today,
+	} from "@internationalized/date";
+	import CalendarIcon from "@lucide/svelte/icons/calendar";
+	import { MediaQuery } from "svelte/reactivity";
+
+	import { Button } from "../ui/button/index.js";
+	import { Calendar } from "../ui/calendar/index.js";
+	import * as Drawer from "../ui/drawer/index.js";
+	import * as Popover from "../ui/popover/index.js";
+	import { cn } from "../../utils.js";
+
+	import FieldFrame, { errorList, type FieldProps } from "./field-frame.svelte";
+
+	const defaultMessages = {
+		placeholder: "Pick a date",
+		today: "Today",
+		yesterday: "Yesterday",
+	};
+
+	type Props = FieldProps & {
+		value?: string;
+		min?: string;
+		max?: string;
+		placeholder?: string;
+		messages?: Partial<typeof defaultMessages>;
+	};
+
+	let {
+		value = $bindable(""),
+		min,
+		max,
+		placeholder,
+		messages = {},
+		name,
+		label,
+		description,
+		error,
+		required = false,
+		disabled = false,
+		id,
+		class: className,
+	}: Props = $props();
+
+	const desktop = new MediaQuery("(min-width: 768px)");
+	const nested = Drawer.isInsideDrawer();
+	const generatedId = $props.id();
+	const locale =
+		typeof navigator === "undefined" ? "en-US" : navigator.language;
+
+	let open = $state(false);
+
+	function toDate(iso: string | undefined): CalendarDate | undefined {
+		if (!iso) {
+			return undefined;
+		}
+		try {
+			return parseDate(iso);
+		} catch {
+			return undefined;
+		}
+	}
+
+	const text = $derived({ ...defaultMessages, ...messages });
+	const triggerId = $derived(id ?? generatedId);
+	const invalid = $derived(errorList(error).length > 0);
+	const describedBy = $derived(
+		invalid
+			? `${triggerId}-error`
+			: description
+				? `${triggerId}-description`
+				: undefined,
+	);
+	const selected = $derived(toDate(value));
+	const minValue = $derived(toDate(min));
+	const maxValue = $derived(toDate(max));
+	const todayValue = $derived(today(getLocalTimeZone()));
+	const shortcuts = $derived(
+		[
+			{ label: text.today, date: todayValue },
+			{ label: text.yesterday, date: todayValue.subtract({ days: 1 }) },
+		].filter(
+			(shortcut) =>
+				(!minValue || shortcut.date.compare(minValue) >= 0) &&
+				(!maxValue || shortcut.date.compare(maxValue) <= 0),
+		),
+	);
+	const display = $derived(
+		selected
+			? selected.toDate(getLocalTimeZone()).toLocaleDateString(locale, {
+					weekday: "short",
+					day: "numeric",
+					month: "long",
+					year: "numeric",
+				})
+			: undefined,
+	);
+	const triggerClass =
+		"border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex h-11 w-full items-center gap-2 rounded-md border bg-white px-3 text-left text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-3 aria-invalid:ring-3 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm";
+
+	function choose(next: DateValue | undefined) {
+		if (next) {
+			value = next.toString();
+			open = false;
+		}
+	}
+</script>
+
+{#snippet picker(touch: boolean)}
+	{#if shortcuts.length > 0}
+		<div class={cn("flex gap-2", touch ? "px-4 pb-1" : "px-3 pt-3")}>
+			{#each shortcuts as shortcut (shortcut.label)}
+				<Button
+					variant={selected?.compare(shortcut.date) === 0
+						? "default"
+						: "outline"}
+					size="sm"
+					class={cn("rounded-full", touch && "h-11 flex-1 text-base")}
+					onclick={() => choose(shortcut.date)}
+				>
+					{shortcut.label}
+				</Button>
+			{/each}
+		</div>
+	{/if}
+	<Calendar
+		type="single"
+		value={selected}
+		onValueChange={choose}
+		{minValue}
+		{maxValue}
+		{locale}
+		weekdayFormat="short"
+		class={cn(
+			"mx-auto bg-transparent",
+			touch && "[--cell-size:--spacing(11)] text-base",
+		)}
+	/>
+{/snippet}
+
+{#snippet trigger(props: Record<string, unknown>)}
+	<button
+		{...props}
+		type="button"
+		id={triggerId}
+		{disabled}
+		role="combobox"
+		aria-expanded={open}
+		aria-invalid={invalid || undefined}
+		aria-describedby={describedBy}
+		aria-required={required || undefined}
+		class={triggerClass}
+	>
+		<CalendarIcon class="text-muted-foreground size-4 shrink-0" />
+		<span
+			class={cn("min-w-0 flex-1 truncate", !display && "text-muted-foreground")}
+			>{display ?? placeholder ?? text.placeholder}</span
+		>
+	</button>
+{/snippet}
+
+{#snippet drawerContent()}
+	<Drawer.Content id="{triggerId}-drawer">
+		<Drawer.Header class="px-5 text-left">
+			<Drawer.Title>{label ?? placeholder ?? text.placeholder}</Drawer.Title>
+		</Drawer.Header>
+		{@render picker(true)}
+	</Drawer.Content>
+{/snippet}
+
+<FieldFrame
+	id={triggerId}
+	{label}
+	{description}
+	{error}
+	{required}
+	class={className}
+>
+	{#if name}
+		<input type="hidden" {name} {value} {disabled} />
+	{/if}
+	{#if desktop.current}
+		<Popover.Root bind:open>
+			<Popover.Trigger {disabled}>
+				{#snippet child({ props })}
+					{@render trigger(props)}
+				{/snippet}
+			</Popover.Trigger>
+			<Popover.Content align="start" class="w-auto rounded-xl p-0">
+				{@render picker(false)}
+			</Popover.Content>
+		</Popover.Root>
+	{:else}
+		{@render trigger({
+			onclick: () => (open = true),
+			"aria-haspopup": "dialog",
+			"aria-controls": `${triggerId}-drawer`,
+		})}
+		{#if nested}
+			<Drawer.NestedRoot bind:open>{@render drawerContent()}</Drawer.NestedRoot>
+		{:else}
+			<Drawer.Root bind:open>{@render drawerContent()}</Drawer.Root>
+		{/if}
+	{/if}
+</FieldFrame>

package/dist/components/kit/date-field.svelte.d.ts

@@ -0,0 +1,14 @@
+import { type FieldProps } from "./field-frame.svelte";
+declare const DateField: import("svelte").Component<FieldProps & {
+    value?: string;
+    min?: string;
+    max?: string;
+    placeholder?: string;
+    messages?: Partial<{
+        placeholder: string;
+        today: string;
+        yesterday: string;
+    }>;
+}, {}, "value">;
+type DateField = ReturnType<typeof DateField>;
+export default DateField;

package/dist/components/kit/field-frame.svelte

@@ -0,0 +1,71 @@
+<script lang="ts" module>
+	/** What every form component in the kit takes on top of its own props, so `Form` can render any of them. */
+	export interface FieldProps {
+		name?: string;
+		label?: string;
+		description?: string;
+		error?: string | string[];
+		required?: boolean;
+		disabled?: boolean;
+		id?: string;
+		class?: string;
+	}
+
+	export function errorList(error: string | string[] | undefined): string[] {
+		return error === undefined ? [] : [error].flat().filter(Boolean);
+	}
+</script>
+
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	import * as Field from "../ui/field/index.js";
+
+	interface Props {
+		id: string;
+		label?: string;
+		description?: string;
+		error?: string | string[];
+		required?: boolean;
+		orientation?: "vertical" | "horizontal";
+		class?: string;
+		children: Snippet;
+	}
+
+	const {
+		id,
+		label,
+		description,
+		error,
+		required = false,
+		orientation = "vertical",
+		class: className,
+		children,
+	}: Props = $props();
+
+	const errors = $derived(errorList(error));
+</script>
+
+<Field.Field
+	{orientation}
+	class={className}
+	data-invalid={errors.length > 0 || undefined}
+>
+	{#if label}
+		<Field.Label for={id}>
+			{label}
+			{#if required}
+				<span class="text-destructive" aria-hidden="true">*</span>
+			{/if}
+		</Field.Label>
+	{/if}
+	{@render children()}
+	{#if errors.length > 0}
+		<Field.Error
+			id="{id}-error"
+			errors={errors.map((message) => ({ message }))}
+		/>
+	{:else if description}
+		<Field.Description id="{id}-description">{description}</Field.Description>
+	{/if}
+</Field.Field>

package/dist/components/kit/field-frame.svelte.d.ts

@@ -0,0 +1,26 @@
+/** What every form component in the kit takes on top of its own props, so `Form` can render any of them. */
+export interface FieldProps {
+    name?: string;
+    label?: string;
+    description?: string;
+    error?: string | string[];
+    required?: boolean;
+    disabled?: boolean;
+    id?: string;
+    class?: string;
+}
+export declare function errorList(error: string | string[] | undefined): string[];
+import type { Snippet } from "svelte";
+interface Props {
+    id: string;
+    label?: string;
+    description?: string;
+    error?: string | string[];
+    required?: boolean;
+    orientation?: "vertical" | "horizontal";
+    class?: string;
+    children: Snippet;
+}
+declare const FieldFrame: import("svelte").Component<Props, {}, "">;
+type FieldFrame = ReturnType<typeof FieldFrame>;
+export default FieldFrame;

package/dist/components/kit/fieldset-frame.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	import * as Field from "../ui/field/index.js";
+	import { cn } from "../../utils.js";
+
+	import { errorList } from "./field-frame.svelte";
+
+	interface Props {
+		id: string;
+		label?: string;
+		description?: string;
+		error?: string | string[];
+		required?: boolean;
+		disabled?: boolean;
+		class?: string;
+		children: Snippet;
+	}
+
+	const {
+		id,
+		label,
+		description,
+		error,
+		required = false,
+		disabled = false,
+		class: className,
+		children,
+	}: Props = $props();
+
+	const errors = $derived(errorList(error));
+	const describedBy = $derived(
+		errors.length > 0
+			? `${id}-error`
+			: description
+				? `${id}-description`
+				: undefined,
+	);
+</script>
+
+<Field.Set
+	{id}
+	{disabled}
+	aria-describedby={describedBy}
+	data-invalid={errors.length > 0 || undefined}
+	class={cn("w-full min-w-0 gap-3", className)}
+>
+	{#if label}
+		<Field.Legend
+			id="{id}-label"
+			variant="label"
+			class={cn(errors.length > 0 && "text-destructive")}
+		>
+			{label}
+			{#if required}
+				<span class="text-destructive" aria-hidden="true">*</span>
+			{/if}
+		</Field.Legend>
+	{/if}
+	{@render children()}
+	{#if errors.length > 0}
+		<Field.Error
+			id="{id}-error"
+			errors={errors.map((message) => ({ message }))}
+		/>
+	{:else if description}
+		<Field.Description id="{id}-description">{description}</Field.Description>
+	{/if}
+</Field.Set>

package/dist/components/kit/fieldset-frame.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from "svelte";
+interface Props {
+    id: string;
+    label?: string;
+    description?: string;
+    error?: string | string[];
+    required?: boolean;
+    disabled?: boolean;
+    class?: string;
+    children: Snippet;
+}
+declare const FieldsetFrame: import("svelte").Component<Props, {}, "">;
+type FieldsetFrame = ReturnType<typeof FieldsetFrame>;
+export default FieldsetFrame;

package/dist/components/kit/file-dropzone/files.d.ts

@@ -0,0 +1,14 @@
+export type FileRejection = "too-large" | "too-many" | "type";
+export interface FileLimits {
+    accept?: string;
+    maxFiles?: number;
+    maxFileSize?: number;
+}
+/** A byte count as a short size, like 12 KB or 3.4 MB. */
+export declare function displaySize(bytes: number): string;
+/** Whether `file` matches an `accept` list of extensions (`.pdf`), wildcards (`image/*`) and types (`text/csv`). */
+export declare function accepts(file: File, accept: string | undefined): boolean;
+/** Why `file`, the `position`-th file counting the ones already kept, can't be added, or nothing when it can. */
+export declare function rejectionOf(file: File, position: number, limits: FileLimits): FileRejection | undefined;
+/** Every file under a dropped folder entry, with its path inside the folder kept as `webkitRelativePath`. */
+export declare function filesIn(entry: FileSystemEntry): Promise<File[]>;

package/dist/components/kit/file-dropzone/files.js

@@ -0,0 +1,69 @@
+const KILOBYTE = 1024;
+const MEGABYTE = 1024 * KILOBYTE;
+const GIGABYTE = 1024 * MEGABYTE;
+/** A byte count as a short size, like 12 KB or 3.4 MB. */
+export function displaySize(bytes) {
+    if (bytes < KILOBYTE) {
+        return `${bytes} B`;
+    }
+    if (bytes < MEGABYTE) {
+        return `${Math.round(bytes / KILOBYTE)} KB`;
+    }
+    if (bytes < GIGABYTE) {
+        return `${(bytes / MEGABYTE).toFixed(1).replace(/\.0$/, "")} MB`;
+    }
+    return `${(bytes / GIGABYTE).toFixed(1).replace(/\.0$/, "")} GB`;
+}
+/** Whether `file` matches an `accept` list of extensions (`.pdf`), wildcards (`image/*`) and types (`text/csv`). */
+export function accepts(file, accept) {
+    if (!accept) {
+        return true;
+    }
+    const type = file.type.toLowerCase();
+    const name = file.name.toLowerCase();
+    return accept
+        .split(",")
+        .map((pattern) => pattern.trim().toLowerCase())
+        .some((pattern) => {
+        if (pattern.startsWith(".")) {
+            return name.endsWith(pattern);
+        }
+        if (pattern.endsWith("/*")) {
+            return type.startsWith(pattern.slice(0, -1));
+        }
+        return type === pattern;
+    });
+}
+/** Why `file`, the `position`-th file counting the ones already kept, can't be added, or nothing when it can. */
+export function rejectionOf(file, position, limits) {
+    if (limits.maxFiles !== undefined && position > limits.maxFiles) {
+        return "too-many";
+    }
+    if (limits.maxFileSize !== undefined && file.size > limits.maxFileSize) {
+        return "too-large";
+    }
+    return accepts(file, limits.accept) ? undefined : "type";
+}
+/** Every file under a dropped folder entry, with its path inside the folder kept as `webkitRelativePath`. */
+export async function filesIn(entry) {
+    if (entry.isFile) {
+        const file = await new Promise((resolve, reject) => entry.file(resolve, reject));
+        Object.defineProperty(file, "webkitRelativePath", {
+            value: entry.fullPath.slice(1),
+        });
+        return [file];
+    }
+    if (!entry.isDirectory) {
+        return [];
+    }
+    const reader = entry.createReader();
+    const children = [];
+    for (;;) {
+        const batch = await new Promise((resolve, reject) => reader.readEntries(resolve, reject));
+        if (batch.length === 0) {
+            break;
+        }
+        children.push(...batch);
+    }
+    return (await Promise.all(children.map(filesIn))).flat();
+}