@riducms/admin 0.1.0

package/src/components/json-tree/json-tree-node.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+	import ChevronRightIcon from "~icons/lucide/chevron-right";
+
+	import JsonTreeNode from "@admin/components/json-tree/json-tree-node.svelte";
+
+	let { name, value, last = true }: { name?: string; value: unknown; last?: boolean } = $props();
+	const entries = $derived(
+		Array.isArray(value)
+			? value.map((item, index) => [String(index), item] as const)
+			: isRecord(value)
+				? Object.entries(value)
+				: []
+	);
+	const container = $derived(Array.isArray(value) || isRecord(value));
+	const opening = $derived(Array.isArray(value) ? "[" : "{");
+	const closing = $derived(Array.isArray(value) ? "]" : "}");
+	const countLabel = $derived(
+		Array.isArray(value)
+			? entries.length === 1
+				? "item"
+				: "items"
+			: entries.length === 1
+				? "key"
+				: "keys"
+	);
+
+	function isRecord(candidate: unknown): candidate is Record<string, unknown> {
+		return typeof candidate === "object" && candidate !== null && !Array.isArray(candidate);
+	}
+
+	function primitive(candidate: unknown) {
+		if (typeof candidate === "string") return JSON.stringify(candidate);
+		if (candidate === undefined) return "undefined";
+		return String(candidate);
+	}
+
+	function tone(candidate: unknown) {
+		if (typeof candidate === "string") return "text-[#b7c89a]";
+		if (typeof candidate === "number") return "text-[#c9b38b]";
+		if (typeof candidate === "boolean") return "text-[#9fb9d8]";
+		return "text-foreground-faint";
+	}
+</script>
+
+{#if container}
+	<details class="group/json" open>
+		<summary
+			class="flex cursor-pointer list-none items-center gap-1 rounded px-0.5 hover:bg-control-hover focus-visible:outline-1 focus-visible:outline-primary/60"
+			aria-label={name === undefined
+				? `${entries.length} ${countLabel}`
+				: `${name}, ${entries.length} ${countLabel}`}
+		>
+			<ChevronRightIcon
+				class="size-3 shrink-0 text-foreground-faint transition-transform group-open/json:rotate-90"
+			/>
+			{#if name !== undefined}<span class="text-[#9db5cd]">{JSON.stringify(name)}</span>
+				<span class="text-foreground-faint">:</span>{/if}
+			<span class="text-foreground-muted">{opening}</span>
+			<span class="text-[10px] text-foreground-faint">
+				{entries.length}
+				{countLabel}
+			</span>
+			<span class="text-foreground-muted">{closing}{last ? "" : ","}</span>
+		</summary>
+		<div class="ms-3.5 border-s border-control-border ps-3">
+			{#each entries as [key, child], index (key)}
+				<JsonTreeNode name={key} value={child} last={index === entries.length - 1} />
+			{/each}
+		</div>
+	</details>
+{:else}
+	<div class="flex gap-1 rounded px-0.5 hover:bg-control-hover">
+		{#if name !== undefined}<span class="text-[#9db5cd]">{JSON.stringify(name)}</span>
+			<span class="text-foreground-faint">:</span>{/if}
+		<span class={tone(value)}>{primitive(value)}{last ? "" : ","}</span>
+	</div>
+{/if}

package/src/components/json-tree/json-viewer.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+	import { onDestroy } from "svelte";
+	import CheckIcon from "~icons/lucide/check";
+	import CopyIcon from "~icons/lucide/copy";
+	import Maximize2Icon from "~icons/lucide/maximize-2";
+	import Minimize2Icon from "~icons/lucide/minimize-2";
+	import { getAdminI18n } from "@riducms/plugin";
+
+	import JsonTreeNode from "@admin/components/json-tree/json-tree-node.svelte";
+	import { Button, buttonVariants } from "@admin/components/ui/button";
+	import {
+		Dialog,
+		DialogClose,
+		DialogContent,
+		DialogDescription,
+		DialogTitle,
+		DialogTrigger,
+	} from "@admin/components/ui/dialog";
+
+	let { value, class: className = "" }: { value: unknown; class?: string } = $props();
+	const i18n = getAdminI18n();
+	let copied = $state(false);
+	let copyFailed = $state(false);
+	let copyResetTimer: ReturnType<typeof setTimeout> | undefined;
+
+	onDestroy(() => clearTimeout(copyResetTimer));
+
+	async function copy() {
+		try {
+			await navigator.clipboard.writeText(JSON.stringify(value, null, 2));
+			copied = true;
+			copyFailed = false;
+		} catch {
+			copyFailed = true;
+		}
+		clearTimeout(copyResetTimer);
+		copyResetTimer = window.setTimeout(() => {
+			copied = false;
+			copyFailed = false;
+		}, 1_500);
+	}
+</script>
+
+{#snippet viewer(expanded: boolean)}
+	<div
+		class={[
+			"flex min-h-0 flex-col overflow-hidden rounded-[4px] border border-control-border bg-control",
+			!expanded && className,
+			expanded && "h-full rounded-none border-0 bg-background",
+		]}
+	>
+		<div class="flex items-center justify-between border-b border-control-border px-3 py-2">
+			<span class="font-mono text-[9.5px] tracking-[0.12em] text-foreground-faint uppercase">
+				JSON
+			</span>
+			<div class="flex items-center gap-1">
+				{#if expanded}
+					<DialogClose
+						class={buttonVariants({ variant: "ghost", size: "icon-xs" })}
+						aria-label={i18n.t("general:exitExpandedJSONView")}
+						title={i18n.t("general:exitExpandedJSONView")}
+					>
+						<Minimize2Icon class="size-3.5" />
+					</DialogClose>
+				{:else}
+					<DialogTrigger
+						class={buttonVariants({ variant: "ghost", size: "icon-xs" })}
+						aria-label={i18n.t("general:expandJSONView")}
+						title={i18n.t("general:expandJSONView")}
+					>
+						<Maximize2Icon class="size-3.5" />
+					</DialogTrigger>
+				{/if}
+				<Button
+					variant="ghost"
+					size="xs"
+					onclick={copy}
+					aria-label={i18n.t("general:copyJSON")}
+					tooltip={copied
+						? i18n.t("general:copied")
+						: copyFailed
+							? i18n.t("general:copyUnavailable")
+							: i18n.t("general:copyJSON")}
+				>
+					{#if copied}<CheckIcon class="size-3" /> {i18n.t("general:copied")}{:else}<CopyIcon
+							class="size-3"
+						/>
+						{copyFailed ? i18n.t("general:copyUnavailable") : i18n.t("general:copy")}{/if}
+				</Button>
+			</div>
+		</div>
+		<section
+			class="min-h-72 flex-1 overflow-auto p-4 font-mono text-[11.5px] leading-6"
+			aria-label={i18n.t("general:jsonData")}
+		>
+			<JsonTreeNode {value} />
+		</section>
+	</div>
+{/snippet}
+
+<Dialog>
+	{@render viewer(false)}
+	<DialogContent
+		showCloseButton={false}
+		class="inset-3 top-3 left-3 h-auto w-auto max-w-none translate-x-0 translate-y-0 gap-0 overflow-hidden p-0 sm:max-w-none"
+	>
+		<DialogTitle class="sr-only">{i18n.t("general:expandedJSONResponse")}</DialogTitle>
+		<DialogDescription class="sr-only">
+			{i18n.t("general:expandedJSONDescription")}
+		</DialogDescription>
+		{@render viewer(true)}
+	</DialogContent>
+</Dialog>

package/src/components/ui/banner/banner.svelte

@@ -0,0 +1,41 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "@riducms/ui";
+
+	export const bannerVariants = tv({
+		base: "flex min-w-0 items-start gap-3 rounded-[3px] border px-3.5 py-3 text-[13.5px] leading-5",
+		variants: {
+			tone: {
+				warning: "border-warning/30 bg-warning/8 text-warning",
+				destructive: "border-destructive/30 bg-destructive/8 text-destructive",
+				neutral: "border-border bg-muted/35 text-foreground-muted",
+			},
+		},
+		defaultVariants: { tone: "neutral" },
+	});
+
+	export type BannerTone = VariantProps<typeof bannerVariants>["tone"];
+</script>
+
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+
+	import { cn, type WithElementRef } from "@riducms/ui";
+
+	let {
+		ref = $bindable(null),
+		tone = "neutral",
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & { tone?: BannerTone } = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="banner"
+	class={cn(bannerVariants({ tone }), className)}
+	role={tone === "destructive" ? "alert" : "status"}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/components/ui/banner/index.ts

@@ -0,0 +1,5 @@
+export {
+	default as Banner,
+	bannerVariants,
+	type BannerTone,
+} from "@admin/components/ui/banner/banner.svelte";

package/src/components/ui/bulk-action-bar/bulk-action-bar.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import XIcon from "~icons/lucide/x";
+	import type { Snippet } from "svelte";
+	import { getAdminI18n } from "@riducms/plugin";
+
+	import { Button } from "@admin/components/ui/button";
+
+	let {
+		count,
+		onClear,
+		label,
+		selectionLabel,
+		clearLabel,
+		children,
+	}: {
+		count: number;
+		onClear: () => void;
+		label?: string;
+		selectionLabel?: string;
+		clearLabel?: string;
+		children?: Snippet;
+	} = $props();
+	const i18n = getAdminI18n();
+	const resolvedLabel = $derived(label ?? i18n.t("general:bulkActions"));
+	const resolvedSelectionLabel = $derived(selectionLabel ?? i18n.t("general:selected", { count }));
+	const resolvedClearLabel = $derived(clearLabel ?? i18n.t("general:clearSelection"));
+</script>
+
+{#if count > 0}
+	<div
+		data-slot="bulk-action-bar"
+		class="ridu-popover-enter fixed bottom-6 left-1/2 z-40 flex max-w-[calc(100vw-2rem)] -translate-x-1/2 items-center gap-2 rounded-[4px] border border-control-border bg-popover px-3 py-2 text-popover-foreground shadow-[var(--shadow-popover)]"
+		role="region"
+		aria-label={resolvedLabel}
+	>
+		<span
+			class="whitespace-nowrap px-2 text-[13.5px] font-medium text-foreground"
+			role="status"
+			aria-live="polite"
+			aria-atomic="true"
+		>
+			{resolvedSelectionLabel}
+		</span>
+		<span class="h-5 w-px bg-control-border" aria-hidden="true"></span>
+		{@render children?.()}
+		<Button variant="ghost" size="icon-sm" onclick={onClear} aria-label={resolvedClearLabel}>
+			<XIcon class="size-3.5" />
+		</Button>
+	</div>
+{/if}

package/src/components/ui/bulk-action-bar/index.ts

@@ -0,0 +1 @@
+export { default as BulkActionBar } from "@admin/components/ui/bulk-action-bar/bulk-action-bar.svelte";

package/src/components/ui/button/index.ts

@@ -0,0 +1,8 @@
+export {
+	Button,
+	buttonVariants,
+	type ButtonProps,
+	type ButtonSize,
+	type ButtonVariant,
+	type ButtonProps as Props,
+} from "@riducms/ui";

package/src/components/ui/calendar/calendar-caption.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	import { DateFormatter, getLocalTimeZone, type DateValue } from "@internationalized/date";
+	import type { ComponentProps } from "svelte";
+
+	import CalendarMonthSelect from "@admin/components/ui/calendar/calendar-month-select.svelte";
+	import CalendarYearSelect from "@admin/components/ui/calendar/calendar-year-select.svelte";
+	import type Calendar from "@admin/components/ui/calendar/calendar.svelte";
+
+	let {
+		captionLayout,
+		months,
+		monthFormat,
+		years,
+		yearFormat,
+		month,
+		locale,
+		placeholder = $bindable(),
+		monthIndex = 0,
+	}: {
+		captionLayout: ComponentProps<typeof Calendar>["captionLayout"];
+		months: ComponentProps<typeof CalendarMonthSelect>["months"];
+		monthFormat: ComponentProps<typeof CalendarMonthSelect>["monthFormat"];
+		years: ComponentProps<typeof CalendarYearSelect>["years"];
+		yearFormat: ComponentProps<typeof CalendarYearSelect>["yearFormat"];
+		month: DateValue;
+		placeholder: DateValue | undefined;
+		locale: string;
+		monthIndex?: number;
+	} = $props();
+
+	function formatYear(date: DateValue) {
+		const dateObject = date.toDate(getLocalTimeZone());
+		if (typeof yearFormat === "function") return yearFormat(dateObject.getFullYear());
+		return new DateFormatter(locale, { year: yearFormat }).format(dateObject);
+	}
+
+	function formatMonth(date: DateValue) {
+		const dateObject = date.toDate(getLocalTimeZone());
+		if (typeof monthFormat === "function") return monthFormat(dateObject.getMonth() + 1);
+		return new DateFormatter(locale, { month: monthFormat }).format(dateObject);
+	}
+</script>
+
+{#snippet monthSelect()}
+	<CalendarMonthSelect
+		{months}
+		{monthFormat}
+		value={month.month}
+		onchange={(event) => {
+			if (placeholder === undefined) return;
+			const selectedMonth = Number.parseInt(event.currentTarget.value);
+			placeholder = placeholder.set({ month: selectedMonth }).subtract({ months: monthIndex });
+		}}
+	/>
+{/snippet}
+
+{#snippet yearSelect()}
+	<CalendarYearSelect {years} {yearFormat} value={month.year} />
+{/snippet}
+
+{#if captionLayout === "dropdown"}
+	{@render monthSelect()}
+	{@render yearSelect()}
+{:else if captionLayout === "dropdown-months"}
+	{@render monthSelect()}
+	{#if placeholder !== undefined}{formatYear(placeholder)}{/if}
+{:else if captionLayout === "dropdown-years"}
+	{#if placeholder !== undefined}{formatMonth(placeholder)}{/if}
+	{@render yearSelect()}
+{:else}
+	{formatMonth(month)} {formatYear(month)}
+{/if}

package/src/components/ui/calendar/calendar-cell.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+
+	import { cn } from "@riducms/ui";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.CellProps = $props();
+</script>
+
+<CalendarPrimitive.Cell
+	bind:ref
+	class={cn(
+		"relative size-(--calendar-cell-size) p-0 text-center text-[12px] focus-within:z-20",
+		className
+	)}
+	{...restProps}
+/>

package/src/components/ui/calendar/calendar-day.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+
+	import { buttonVariants } from "@admin/components/ui/button";
+	import { cn } from "@riducms/ui";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.DayProps = $props();
+</script>
+
+<CalendarPrimitive.Day
+	bind:ref
+	class={cn(
+		buttonVariants({ variant: "ghost", size: "icon-sm" }),
+		"size-(--calendar-cell-size) rounded-md p-0 text-[12px] font-normal text-foreground-muted",
+		"hover:bg-control-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-primary/60 focus-visible:outline-offset-0",
+		"data-[selected]:bg-primary data-[selected]:font-medium data-[selected]:text-primary-foreground data-[selected]:hover:bg-primary-hover data-[selected]:hover:text-primary-foreground",
+		"data-[today]:not-data-[selected]:bg-primary/12 data-[today]:not-data-[selected]:font-semibold data-[today]:not-data-[selected]:text-foreground",
+		"data-[outside-month]:not-data-[selected]:text-foreground-faint",
+		"data-[disabled]:pointer-events-none data-[disabled]:opacity-35 data-[unavailable]:line-through",
+		className
+	)}
+	{...restProps}
+/>

package/src/components/ui/calendar/calendar-grid-row.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+
+	import { cn } from "@riducms/ui";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.GridRowProps = $props();
+</script>
+
+<CalendarPrimitive.GridRow bind:ref class={cn("flex w-full", className)} {...restProps} />

package/src/components/ui/calendar/calendar-grid.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+
+	import { cn } from "@riducms/ui";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.GridProps = $props();
+</script>
+
+<CalendarPrimitive.Grid
+	bind:ref
+	class={cn("mt-3 flex w-full flex-col gap-1 border-collapse", className)}
+	{...restProps}
+/>

package/src/components/ui/calendar/calendar-head-cell.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+
+	import { cn } from "@riducms/ui";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.HeadCellProps = $props();
+</script>
+
+<CalendarPrimitive.HeadCell
+	bind:ref
+	class={cn(
+		"font-mono w-(--calendar-cell-size) text-center text-[9px] font-medium tracking-[0.08em] text-foreground-faint uppercase",
+		className
+	)}
+	{...restProps}
+/>

package/src/components/ui/calendar/calendar-header.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+
+	import { cn } from "@riducms/ui";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.HeaderProps = $props();
+</script>
+
+<CalendarPrimitive.Header
+	bind:ref
+	class={cn(
+		"flex h-(--calendar-cell-size) w-full items-center justify-center gap-1.5 text-[12px] font-medium",
+		className
+	)}
+	{...restProps}
+/>

package/src/components/ui/calendar/calendar-heading.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+
+	import { cn } from "@riducms/ui";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.HeadingProps = $props();
+</script>
+
+<CalendarPrimitive.Heading
+	bind:ref
+	class={cn("px-(--calendar-cell-size) text-[12px] font-medium", className)}
+	{...restProps}
+/>

package/src/components/ui/calendar/calendar-month-select.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import ChevronDownIcon from "~icons/lucide/chevron-down";
+
+	import { cn, type WithoutChildrenOrChild } from "@riducms/ui";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value,
+		onchange,
+		...restProps
+	}: WithoutChildrenOrChild<CalendarPrimitive.MonthSelectProps> = $props();
+</script>
+
+<span
+	class={cn(
+		"relative flex rounded-md border border-control-border bg-control transition-colors focus-within:border-primary/60 focus-within:ring-2 focus-within:ring-primary/15",
+		className
+	)}
+>
+	<CalendarPrimitive.MonthSelect bind:ref class="absolute inset-0 opacity-0" {...restProps}>
+		{#snippet child({ props, monthItems, selectedMonthItem })}
+			<select {...props} {value} {onchange} data-ridu-native-exception>
+				{#each monthItems as monthItem (monthItem.value)}
+					<option
+						value={monthItem.value}
+						selected={value === undefined
+							? monthItem.value === selectedMonthItem.value
+							: monthItem.value === value}
+					>
+						{monthItem.label}
+					</option>
+				{/each}
+			</select>
+			<span
+				class="flex h-8 items-center gap-1 ps-2 pe-1 text-[12px] font-medium text-foreground select-none"
+				aria-hidden="true"
+			>
+				{monthItems.find((item) => item.value === value)?.label ?? selectedMonthItem.label}
+				<ChevronDownIcon class="size-3 text-foreground-faint" />
+			</span>
+		{/snippet}
+	</CalendarPrimitive.MonthSelect>
+</span>

package/src/components/ui/calendar/calendar-month.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+
+	import { cn, type WithElementRef } from "@riducms/ui";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div bind:this={ref} class={cn("flex flex-col", className)} {...restProps}>
+	{@render children?.()}
+</div>

package/src/components/ui/calendar/calendar-months.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+
+	import { cn, type WithElementRef } from "@riducms/ui";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	class={cn("relative flex flex-col gap-4 md:flex-row", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/components/ui/calendar/calendar-nav.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+
+	import { cn, type WithElementRef } from "@riducms/ui";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<nav
+	bind:this={ref}
+	class={cn("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</nav>

package/src/components/ui/calendar/calendar-next-button.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import ChevronRightIcon from "~icons/lucide/chevron-right";
+
+	import { buttonVariants, type ButtonVariant } from "@admin/components/ui/button";
+	import { cn } from "@riducms/ui";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		variant = "ghost",
+		...restProps
+	}: CalendarPrimitive.NextButtonProps & { variant?: ButtonVariant } = $props();
+</script>
+
+{#snippet fallback()}
+	<ChevronRightIcon class="size-3.5" aria-hidden="true" />
+{/snippet}
+
+<CalendarPrimitive.NextButton
+	bind:ref
+	class={cn(
+		buttonVariants({ variant, size: "icon-sm" }),
+		"size-(--calendar-cell-size) bg-transparent p-0 disabled:opacity-35 rtl:rotate-180",
+		className
+	)}
+	children={children ?? fallback}
+	{...restProps}
+/>