@riducms/admin 0.2.2 → 0.3.0

package/src/components/ui/sonner/sonner.scss

@@ -0,0 +1,121 @@
+@use "@riducms/ui/styles.scss" as ui;
+
+@layer ridu.components {
+	.ridu-toast {
+		--toast-surface: var(--control-surface);
+		--toast-color: var(--ink-strong);
+		--toast-border: var(--control-border);
+		position: relative;
+		display: flex;
+		align-items: center;
+		gap: 13px;
+		width: 100%;
+		padding: 16px;
+		border: 1px solid var(--toast-border);
+		border-radius: 4px;
+		background: var(--toast-surface);
+		color: var(--toast-color);
+		font-family: var(--font-sans);
+		font-size: var(--font-size-body);
+		line-height: 20px;
+		box-shadow:
+			0 10px 4px -8px rgb(0 2 4 / 2%),
+			0 2px 3px rgb(0 2 4 / 5%);
+
+		&[data-type="error"] {
+			--toast-surface: var(--status-error-surface);
+			--toast-color: var(--status-error-foreground);
+			--toast-border: var(--status-error-border);
+		}
+		&[data-type="success"] {
+			--toast-surface: var(--status-success-surface);
+			--toast-color: var(--status-success-foreground);
+			--toast-border: var(--status-success-border);
+		}
+		&[data-type="warning"] {
+			--toast-surface: var(--status-warning-surface);
+			--toast-color: var(--status-warning-foreground);
+			--toast-border: var(--status-warning-border);
+		}
+		&[data-type="info"] {
+			--toast-surface: var(--background-layer);
+			--toast-border: var(--control-border-hover);
+		}
+	}
+	.ridu-toast__content {
+		min-width: 0;
+		width: 100%;
+		overflow-wrap: anywhere;
+	}
+	.ridu-toast__title {
+		font-weight: 600;
+		line-height: 20px;
+	}
+	.ridu-validation-toast__fields {
+		list-style: circle outside;
+		margin: 0;
+		padding-inline-start: 20px;
+		li {
+			display: list-item;
+			padding-inline-start: 0;
+		}
+	}
+
+	.ridu-toast__description {
+		margin-top: 2px;
+		font-weight: 400;
+	}
+	.ridu-toast__icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		width: 16px;
+		height: 16px;
+		margin: 0;
+	}
+	.ridu-toast__loader {
+		width: 14px;
+		height: 14px;
+		animation: ridu-toast-spin 1s linear infinite;
+	}
+	.ridu-toast__close {
+		--normal-bg: var(--toast-close-surface);
+		--normal-bg-hover: var(--toast-close-surface);
+		--normal-border-hover: var(--toast-close-border);
+		--normal-text: var(--toast-close-color);
+		--normal-border: var(--toast-close-border);
+		position: absolute;
+		top: -7px;
+		inset-inline-start: -7px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 20px;
+		height: 20px;
+		padding: 0;
+		border: 1px solid var(--toast-close-border);
+		border-radius: 50%;
+		background: var(--toast-close-surface);
+		color: var(--toast-close-color);
+		cursor: pointer;
+
+		&:focus-visible {
+			@include ui.focus-outline;
+		}
+	}
+	.ridu-toast[data-front="false"]:not([data-expanded="true"]) .ridu-toast__close {
+		display: none;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.ridu-toast__loader {
+			animation: none;
+		}
+	}
+}
+
+@keyframes ridu-toast-spin {
+	to {
+		transform: rotate(360deg);
+	}
+}

package/src/components/ui/sonner/sonner.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import "@admin/components/ui/sonner/sonner.scss";
 	import LoaderCircleIcon from "~icons/lucide/loader-circle";
 	import { Toaster as Sonner, type ToasterProps } from "svelte-sonner";
 	import { getAdminI18n } from "@riducms/plugin";
@@ -11,11 +12,12 @@
 		closeButton = true,
 		pauseWhenPageIsHidden = true,
 		visibleToasts = 4,
-		offset = 16,
-		mobileOffset = 12,
+		offset = 32,
+		mobileOffset = 16,
 		toastOptions,
 		...restProps
 	}: ToasterProps = $props();
+
 	const resolvedPosition = $derived(
 		position ?? (i18n.direction === "rtl" ? "bottom-left" : "bottom-right")
 	);
@@ -24,13 +26,12 @@
 		unstyled: true,
 		...toastOptions,
 		classes: {
-			toast:
-				"ridu-toast flex w-[min(calc(100vw-2rem),390px)] items-start gap-2.5 rounded-[10px] py-3 pe-3.5 ps-5 shadow-[var(--shadow-popover)]",
-			content: "min-w-0 flex-1",
-			title: "text-[13.5px] leading-5 font-semibold",
-			description: "mt-0.5 text-[12.5px] leading-5",
-			icon: "mt-0.75 shrink-0",
-			closeButton: "outline-none focus-visible:outline-2 focus-visible:outline-primary/60",
+			toast: "ridu-toast",
+			content: "ridu-toast__content",
+			title: "ridu-toast__title",
+			description: "ridu-toast__description",
+			icon: "ridu-toast__icon",
+			closeButton: "ridu-toast__close",
 			...toastOptions?.classes,
 		},
 	});
@@ -50,6 +51,6 @@
 	{...restProps}
 >
 	{#snippet loadingIcon()}
-		<LoaderCircleIcon class="size-3.5 animate-spin" aria-hidden="true" />
+		<LoaderCircleIcon class="ridu-toast__loader" aria-hidden="true" />
 	{/snippet}
 </Sonner>

package/src/components/ui/status-indicator/status-indicator.scss

@@ -0,0 +1,48 @@
+@use "@riducms/ui/styles.scss" as ui;
+
+@layer ridu.components {
+	.ridu-status-indicator {
+		display: inline-flex;
+		align-items: center;
+		gap: 7px;
+		color: var(--foreground-muted);
+		font-size: 12.5px;
+	}
+
+	.ridu-status-indicator--live {
+		color: var(--primary);
+	}
+
+	.ridu-status-indicator--warning {
+		color: var(--warning);
+	}
+
+	.ridu-status-indicator--muted {
+		color: var(--foreground-muted);
+	}
+
+	.ridu-status-indicator--destructive {
+		color: var(--destructive);
+	}
+
+	.ridu-status-indicator--success {
+		color: var(--success);
+	}
+
+	.ridu-status-indicator__dot {
+		flex-shrink: 0;
+		width: 7px;
+		height: 7px;
+		border-radius: 50%;
+		background: currentColor;
+	}
+
+	.ridu-status-indicator__dot--muted {
+		border: 1px solid currentColor;
+		background: transparent;
+	}
+
+	.ridu-status-indicator__dot--pulse {
+		box-shadow: 0 0 9px currentColor;
+	}
+}

package/src/components/ui/status-indicator/status-indicator.svelte

@@ -1,15 +1,15 @@
 <script lang="ts" module>
-	import { tv, type VariantProps } from "@riducms/ui";
+	import { cv, type VariantProps } from "@riducms/ui";
 
-	export const statusIndicatorVariants = tv({
-		base: "inline-flex items-center gap-1.75 text-[12.5px] text-foreground-muted",
+	export const statusIndicatorVariants = cv({
+		base: "ridu-status-indicator",
 		variants: {
 			tone: {
-				live: "text-primary",
-				warning: "text-warning",
-				muted: "text-foreground-muted",
-				destructive: "text-destructive",
-				success: "text-success",
+				live: "ridu-status-indicator--live",
+				warning: "ridu-status-indicator--warning",
+				muted: "ridu-status-indicator--muted",
+				destructive: "ridu-status-indicator--destructive",
+				success: "ridu-status-indicator--success",
 			},
 		},
 		defaultVariants: { tone: "muted" },
@@ -20,8 +20,8 @@
 
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-
-	import { cn, type WithElementRef } from "@riducms/ui";
+	import type { WithElementRef } from "@riducms/ui";
+	import "@admin/components/ui/status-indicator/status-indicator.scss";
 
 	let {
 		ref = $bindable(null),
@@ -39,14 +39,14 @@
 <span
 	bind:this={ref}
 	data-slot="status-indicator"
-	class={cn(statusIndicatorVariants({ tone }), className)}
+	class={[statusIndicatorVariants({ tone }), className]}
 	{...restProps}
 >
 	<span
 		class={[
-			"size-1.75 shrink-0 rounded-full",
-			tone === "muted" ? "border border-current bg-transparent" : "bg-current",
-			pulse && "shadow-[0_0_9px_currentColor]",
+			"ridu-status-indicator__dot",
+			{ "ridu-status-indicator__dot--muted": tone === "muted" },
+			{ "ridu-status-indicator__dot--pulse": pulse },
 		]}
 		aria-hidden="true"
 	></span>

package/src/components/ui/tabs/tabs-content.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Tabs as TabsPrimitive } from "bits-ui";
-	import { cn } from "@riducms/ui";
+	import "@admin/components/ui/tabs/tabs.scss";
 
 	let {
 		ref = $bindable(null),
@@ -12,6 +12,6 @@
 <TabsPrimitive.Content
 	bind:ref
 	data-slot="tabs-content"
-	class={cn("text-sm flex-1 outline-none", className)}
+	class={["ridu-tabs__content", className]}
 	{...restProps}
 />

package/src/components/ui/tabs/tabs-list.svelte

@@ -1,12 +1,12 @@
 <script lang="ts" module>
-	import { tv, type VariantProps } from "@riducms/ui";
+	import { cv, type VariantProps } from "@riducms/ui";
 
-	export const tabsListVariants = tv({
-		base: "rounded-lg p-0.5 group-data-horizontal/tabs:h-8 group-data-vertical/tabs:p-1 data-[variant=line]:rounded-none group/tabs-list inline-flex w-fit items-center justify-center text-muted-foreground group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
+	export const tabsListVariants = cv({
+		base: "ridu-tabs__list",
 		variants: {
 			variant: {
-				default: "cn-tabs-list-variant-default border border-control-border bg-tabs-surface",
-				line: "cn-tabs-list-variant-line gap-1 bg-transparent",
+				default: "ridu-tabs__list--default",
+				line: "ridu-tabs__list--line",
 			},
 		},
 		defaultVariants: {
@@ -19,7 +19,7 @@
 
 <script lang="ts">
 	import { Tabs as TabsPrimitive } from "bits-ui";
-	import { cn } from "@riducms/ui";
+	import "@admin/components/ui/tabs/tabs.scss";
 
 	let {
 		ref = $bindable(null),
@@ -35,6 +35,6 @@
 	bind:ref
 	data-slot="tabs-list"
 	data-variant={variant}
-	class={cn(tabsListVariants({ variant }), className)}
+	class={[tabsListVariants({ variant }), className]}
 	{...restProps}
 />

package/src/components/ui/tabs/tabs-trigger.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Tabs as TabsPrimitive } from "bits-ui";
-	import { cn } from "@riducms/ui";
+	import "@admin/components/ui/tabs/tabs.scss";
 
 	let {
 		ref = $bindable(null),
@@ -12,12 +12,6 @@
 <TabsPrimitive.Trigger
 	bind:ref
 	data-slot="tabs-trigger"
-	class={cn(
-		"gap-1.5 rounded-md border border-transparent! px-3.5 py-1 text-[13px] font-medium group-data-vertical/tabs:px-3 group-data-vertical/tabs:py-1 [&_svg:not([class*='size-'])]:size-3.5 relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap text-foreground-sub transition-[background-color,color] duration-150 group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start data-[state=inactive]:hover:text-foreground-muted focus-visible:outline-2 focus-visible:outline-primary/60 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-45 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-		"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
-		"data-[state=active]:bg-tabs-active data-[state=active]:text-tabs-text-active",
-		"after:absolute after:bg-foreground-strong after:opacity-0 after:transition-opacity data-[orientation=horizontal]:after:inset-x-0 data-[orientation=horizontal]:after:bottom-0 data-[orientation=horizontal]:after:h-0.5 data-[orientation=vertical]:after:inset-y-0 data-[orientation=vertical]:after:-end-1 data-[orientation=vertical]:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
-		className
-	)}
+	class={["ridu-tabs__trigger", className]}
 	{...restProps}
 />

package/src/components/ui/tabs/tabs.scss

@@ -0,0 +1,86 @@
+@use "@riducms/ui/styles.scss" as ui;
+
+@layer ridu.components {
+	.ridu-tabs {
+		display: flex;
+		gap: 20px;
+		min-width: 0;
+	}
+	.ridu-tabs[data-orientation="horizontal"] {
+		flex-direction: column;
+	}
+	.ridu-tabs__list {
+		display: inline-flex;
+		align-items: center;
+		width: fit-content;
+		gap: 20px;
+		color: var(--foreground-muted);
+	}
+	.ridu-tabs__list[data-orientation="vertical"] {
+		flex-direction: column;
+		align-items: stretch;
+	}
+	.ridu-tabs__list--default {
+		padding: 4px;
+		gap: 4px;
+		background: var(--control-surface);
+		border-radius: var(--control-radius);
+	}
+	.ridu-tabs__trigger {
+		position: relative;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: 8px;
+		padding: 10px 15px;
+		border: 0;
+		border-radius: var(--control-radius);
+		background: transparent;
+		color: inherit;
+		font: inherit;
+		white-space: nowrap;
+		cursor: pointer;
+		&:hover,
+		&[data-state="active"] {
+			color: var(--foreground);
+		}
+		&:focus-visible {
+			@include ui.focus-outline;
+		}
+		&:disabled {
+			opacity: 0.5;
+			cursor: not-allowed;
+		}
+		svg {
+			width: 16px;
+			height: 16px;
+		}
+	}
+	.ridu-tabs__list--default .ridu-tabs__trigger[data-state="active"] {
+		background: var(--control-surface-hover);
+	}
+	.ridu-tabs__list--line .ridu-tabs__trigger {
+		border-radius: 0;
+		&::after {
+			content: "";
+			position: absolute;
+			inset-inline: 0;
+			bottom: 0;
+			height: 2px;
+			background: transparent;
+		}
+		&[data-state="active"]::after {
+			background: var(--foreground);
+		}
+		&[data-orientation="vertical"]::after {
+			inset: 0 0 0 auto;
+			width: 2px;
+			height: auto;
+		}
+	}
+	.ridu-tabs__content {
+		flex: 1;
+		min-width: 0;
+		outline: none;
+	}
+}

package/src/components/ui/tabs/tabs.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Tabs as TabsPrimitive } from "bits-ui";
-	import { cn } from "@riducms/ui";
+	import "@admin/components/ui/tabs/tabs.scss";
 
 	let {
 		ref = $bindable(null),
@@ -14,6 +14,6 @@
 	bind:ref
 	bind:value
 	data-slot="tabs"
-	class={cn("gap-2 group/tabs flex data-[orientation=horizontal]:flex-col", className)}
+	class={["ridu-tabs", className]}
 	{...restProps}
 />

package/src/components/ui/timezone-picker/timezone-picker.svelte

@@ -0,0 +1,152 @@
+<script lang="ts">
+	import type { SchemaAdminTimeZone } from "@riducms/protocol";
+	import { timeZoneLabel } from "@admin/core/i18n/time-zone-label";
+	import { getAdminI18n } from "@riducms/plugin";
+	import {
+		Combobox,
+		ComboboxInput,
+		ComboboxTrigger,
+		ComboboxPortal,
+		ComboboxContent,
+		ComboboxViewport,
+		ComboboxItem,
+	} from "@admin/components/ui/combobox";
+	import XIcon from "~icons/lucide/x";
+	import ChevronDownIcon from "~icons/lucide/chevron-down";
+	import "@admin/components/ui/combobox/combobox.scss";
+
+	let {
+		id,
+		value,
+		options,
+		at,
+		disabled = false,
+		onValueChange,
+	}: {
+		id: string;
+		value: string;
+		options: readonly SchemaAdminTimeZone[];
+		at: Date;
+		disabled?: boolean;
+		onValueChange: (value: string) => void;
+	} = $props();
+	const i18n = getAdminI18n();
+	let anchor = $state<HTMLDivElement | null>(null);
+	let open = $state(false);
+	let query = $state("");
+	// Only the clear handler reads this binding; it does not drive rendering.
+	// svelte-ignore non_reactive_update
+	let input: HTMLInputElement;
+	const label = $derived(i18n.t("fields:timeZone"));
+	const placeholder = $derived(i18n.t("fields:select", { label }));
+	const items = $derived(
+		options.map((option) => ({
+			value: option.id,
+			label: timeZoneLabel(
+				option.id,
+				i18n.text(option.label, option.labelTranslations),
+				i18n.language,
+				at
+			),
+		}))
+	);
+	const selectedLabel = $derived(items.find((option) => option.value === value)?.label ?? value);
+	const filtered = $derived(
+		items.filter((option) =>
+			`${option.label} ${option.value}`
+				.toLocaleLowerCase(i18n.language)
+				.includes(query.toLocaleLowerCase(i18n.language))
+		)
+	);
+
+	function select(next: string) {
+		if (!disabled) onValueChange(next);
+	}
+
+	function clear() {
+		if (disabled) return;
+		input.focus();
+		onValueChange("");
+	}
+</script>
+
+<Combobox
+	type="single"
+	{value}
+	{items}
+	onValueChange={select}
+	allowDeselect={false}
+	{disabled}
+	bind:open={
+		() => open,
+		(next) => {
+			open = next;
+			if (!next) query = "";
+		}
+	}
+	inputValue={open ? query : selectedLabel}
+>
+	<div bind:this={anchor} class="ridu-combobox" data-disabled={disabled}>
+		<div class="ridu-combobox-value">
+			<ComboboxInput
+				{id}
+				class="ridu-combobox-input"
+				{placeholder}
+				aria-label={label}
+				autocomplete="off"
+				autocorrect="off"
+				autocapitalize="none"
+				spellcheck={false}
+				clearOnDeselect
+				onpointerdown={() => {
+					if (!disabled) open = true;
+				}}
+				oninput={(event) => {
+					query = event.currentTarget.value;
+					open = true;
+				}}
+			>
+				{#snippet child({ props })}
+					<input bind:this={input} {...props} value={open ? query : selectedLabel} />
+				{/snippet}
+			</ComboboxInput>
+		</div>
+		{#if value}
+			<button
+				type="button"
+				class="ridu-combobox-icon"
+				{disabled}
+				aria-label={i18n.t("general:clearSelection")}
+				onclick={clear}
+			>
+				<XIcon />
+			</button>
+		{/if}
+		<ComboboxTrigger
+			type="button"
+			class="ridu-combobox-icon ridu-combobox-trigger"
+			aria-label={placeholder}
+		>
+			<ChevronDownIcon />
+		</ComboboxTrigger>
+	</div>
+	<ComboboxPortal>
+		<ComboboxContent
+			customAnchor={anchor}
+			sideOffset={0}
+			align="start"
+			class="ridu-combobox-popup"
+			dir={i18n.direction}
+		>
+			<ComboboxViewport>
+				{#each filtered as option (option.value)}
+					<ComboboxItem value={option.value} label={option.label} class="ridu-combobox-option">
+						{option.label}
+					</ComboboxItem>
+				{:else}
+					<p class="ridu-combobox-message">{i18n.t("fields:noMatch", { label })}</p>
+				{/each}
+			</ComboboxViewport>
+		</ComboboxContent>
+	</ComboboxPortal>
+</Combobox>

package/src/core/api/admin-client.ts

@@ -2,7 +2,7 @@ import {
 	createClient,
 	type CollectionContract,
 	type Version,
-	type ScheduledPublish,
+	type ScheduledPublication,
 	type RiduClient,
 } from "@riducms/sdk";
 import type { FieldDocument } from "@riducms/plugin";
@@ -38,7 +38,7 @@ export interface AdminConfig {
 }
 
 export type AdminVersion = Version<AdminDocument>;
-export type AdminScheduledPublish = ScheduledPublish;
+export type AdminScheduledPublication = ScheduledPublication;
 
 export type AdminClient = RiduClient<AdminConfig>;