@riducms/admin 0.1.0

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

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import ChevronLeftIcon from "~icons/lucide/chevron-left";
+
+	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.PrevButtonProps & { variant?: ButtonVariant } = $props();
+</script>
+
+{#snippet fallback()}
+	<ChevronLeftIcon class="size-3.5" aria-hidden="true" />
+{/snippet}
+
+<CalendarPrimitive.PrevButton
+	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}
+/>

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

@@ -0,0 +1,44 @@
+<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,
+		...restProps
+	}: WithoutChildrenOrChild<CalendarPrimitive.YearSelectProps> = $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.YearSelect bind:ref class="absolute inset-0 opacity-0" {...restProps}>
+		{#snippet child({ props, yearItems, selectedYearItem })}
+			<select {...props} {value} data-ridu-native-exception>
+				{#each yearItems as yearItem (yearItem.value)}
+					<option
+						value={yearItem.value}
+						selected={value === undefined
+							? yearItem.value === selectedYearItem.value
+							: yearItem.value === value}
+					>
+						{yearItem.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"
+			>
+				{yearItems.find((item) => item.value === value)?.label ?? selectedYearItem.label}
+				<ChevronDownIcon class="size-3 text-foreground-faint" />
+			</span>
+		{/snippet}
+	</CalendarPrimitive.YearSelect>
+</span>

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

@@ -0,0 +1,118 @@
+<script lang="ts">
+	import { isEqualMonth, type DateValue } from "@internationalized/date";
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import type { Snippet } from "svelte";
+
+	import CalendarCaption from "@admin/components/ui/calendar/calendar-caption.svelte";
+	import CalendarCell from "@admin/components/ui/calendar/calendar-cell.svelte";
+	import CalendarDay from "@admin/components/ui/calendar/calendar-day.svelte";
+	import CalendarGridRow from "@admin/components/ui/calendar/calendar-grid-row.svelte";
+	import CalendarGrid from "@admin/components/ui/calendar/calendar-grid.svelte";
+	import CalendarHeadCell from "@admin/components/ui/calendar/calendar-head-cell.svelte";
+	import CalendarHeader from "@admin/components/ui/calendar/calendar-header.svelte";
+	import CalendarMonth from "@admin/components/ui/calendar/calendar-month.svelte";
+	import CalendarMonths from "@admin/components/ui/calendar/calendar-months.svelte";
+	import CalendarNav from "@admin/components/ui/calendar/calendar-nav.svelte";
+	import CalendarNextButton from "@admin/components/ui/calendar/calendar-next-button.svelte";
+	import CalendarPrevButton from "@admin/components/ui/calendar/calendar-prev-button.svelte";
+	import { cn, type ButtonVariant, type WithoutChildrenOrChild } from "@riducms/ui";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		placeholder = $bindable(),
+		class: className,
+		weekdayFormat = "short",
+		buttonVariant = "ghost",
+		captionLayout = "label",
+		locale = "en-US",
+		months: availableMonths,
+		years,
+		monthFormat: requestedMonthFormat,
+		yearFormat = "numeric",
+		day,
+		disableDaysOutsideMonth = false,
+		...restProps
+	}: WithoutChildrenOrChild<CalendarPrimitive.RootProps> & {
+		buttonVariant?: ButtonVariant;
+		captionLayout?: "dropdown" | "dropdown-months" | "dropdown-years" | "label";
+		months?: CalendarPrimitive.MonthSelectProps["months"];
+		years?: CalendarPrimitive.YearSelectProps["years"];
+		monthFormat?: CalendarPrimitive.MonthSelectProps["monthFormat"];
+		yearFormat?: CalendarPrimitive.YearSelectProps["yearFormat"];
+		day?: Snippet<[{ day: DateValue; outsideMonth: boolean }]>;
+	} = $props();
+
+	const monthFormat = $derived(
+		requestedMonthFormat ?? (captionLayout.startsWith("dropdown") ? "short" : "long")
+	);
+</script>
+
+<CalendarPrimitive.Root
+	bind:value={value as never}
+	bind:ref
+	bind:placeholder
+	{weekdayFormat}
+	{disableDaysOutsideMonth}
+	class={cn(
+		"group/calendar bg-popover p-3 text-popover-foreground [--calendar-cell-size:2rem]",
+		className
+	)}
+	{locale}
+	{monthFormat}
+	{yearFormat}
+	{...restProps}
+>
+	{#snippet children({ months, weekdays })}
+		<CalendarMonths>
+			<CalendarNav>
+				<CalendarPrevButton variant={buttonVariant} />
+				<CalendarNextButton variant={buttonVariant} />
+			</CalendarNav>
+			{#each months as month, monthIndex (month.value)}
+				<CalendarMonth>
+					<CalendarHeader>
+						<CalendarCaption
+							{captionLayout}
+							months={availableMonths}
+							{monthFormat}
+							{years}
+							{yearFormat}
+							month={month.value}
+							bind:placeholder
+							{locale}
+							{monthIndex}
+						/>
+					</CalendarHeader>
+					<CalendarGrid>
+						<CalendarPrimitive.GridHead>
+							<CalendarGridRow>
+								{#each weekdays as weekday (weekday)}
+									<CalendarHeadCell>{weekday.slice(0, 2)}</CalendarHeadCell>
+								{/each}
+							</CalendarGridRow>
+						</CalendarPrimitive.GridHead>
+						<CalendarPrimitive.GridBody>
+							{#each month.weeks as weekDates (weekDates)}
+								<CalendarGridRow>
+									{#each weekDates as date (date)}
+										<CalendarCell {date} month={month.value}>
+											{#if day}
+												{@render day({
+													day: date,
+													outsideMonth: !isEqualMonth(date, month.value),
+												})}
+											{:else}
+												<CalendarDay />
+											{/if}
+										</CalendarCell>
+									{/each}
+								</CalendarGridRow>
+							{/each}
+						</CalendarPrimitive.GridBody>
+					</CalendarGrid>
+				</CalendarMonth>
+			{/each}
+		</CalendarMonths>
+	{/snippet}
+</CalendarPrimitive.Root>

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

@@ -0,0 +1 @@
+export { default as Calendar } from "@admin/components/ui/calendar/calendar.svelte";

package/src/components/ui/checkbox/checkbox.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { Checkbox as CheckboxPrimitive } from "bits-ui";
+	import CheckIcon from "~icons/lucide/check";
+	import MinusIcon from "~icons/lucide/minus";
+
+	import { cn, type WithoutChildrenOrChild } from "@riducms/ui";
+
+	let {
+		ref = $bindable(null),
+		checked = $bindable(false),
+		indeterminate = $bindable(false),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<CheckboxPrimitive.RootProps> = $props();
+</script>
+
+<CheckboxPrimitive.Root
+	bind:ref
+	bind:checked
+	bind:indeterminate
+	data-slot="checkbox"
+	class={cn(
+		"grid size-4 shrink-0 place-items-center rounded-[4px] border border-control-border bg-control text-primary-foreground transition-[background-color,border-color,opacity] duration-150 outline-none focus-visible:outline-2 focus-visible:outline-primary/60 focus-visible:outline-offset-2 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[disabled]:cursor-not-allowed data-[disabled]:border-control-border-disabled data-[disabled]:bg-control-disabled data-[disabled]:opacity-50",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ checked, indeterminate })}
+		{#if indeterminate}
+			<MinusIcon class="size-3 stroke-[2.5]" aria-hidden="true" />
+		{:else if checked}
+			<CheckIcon class="size-3 stroke-[2.5]" aria-hidden="true" />
+		{/if}
+	{/snippet}
+</CheckboxPrimitive.Root>

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

@@ -0,0 +1 @@
+export { default as Checkbox } from "@admin/components/ui/checkbox/checkbox.svelte";

package/src/components/ui/confirmation-dialog/confirmation-dialog.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { getAdminI18n } from "@riducms/plugin";
+	import { ConfirmationDialog } from "@riducms/ui";
+
+	let {
+		open = $bindable(false),
+		title,
+		description,
+		confirmLabel,
+		cancelLabel,
+		destructive = false,
+		disabled = false,
+		onconfirm,
+	}: {
+		open?: boolean;
+		title: string;
+		description: string;
+		confirmLabel: string;
+		cancelLabel?: string;
+		destructive?: boolean;
+		disabled?: boolean;
+		onconfirm: () => void | Promise<void>;
+	} = $props();
+	const i18n = getAdminI18n();
+	const resolvedCancelLabel = $derived(cancelLabel ?? i18n.t("general:cancel"));
+</script>
+
+<ConfirmationDialog
+	bind:open
+	{title}
+	{description}
+	{confirmLabel}
+	cancelLabel={resolvedCancelLabel}
+	{destructive}
+	{disabled}
+	{onconfirm}
+/>

package/src/components/ui/confirmation-dialog/index.ts

@@ -0,0 +1 @@
+export { default as ConfirmationDialog } from "@admin/components/ui/confirmation-dialog/confirmation-dialog.svelte";

package/src/components/ui/date-value-control/date-value-calendar.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import type { DateValue } from "@internationalized/date";
+
+	import { Calendar } from "@admin/components/ui/calendar";
+
+	let {
+		value,
+		disabled = false,
+		readonly = false,
+		required = false,
+		locale,
+		calendarLabel,
+		onValueChange,
+	}: {
+		value?: DateValue;
+		disabled?: boolean;
+		readonly?: boolean;
+		required?: boolean;
+		locale: string;
+		calendarLabel: string;
+		onValueChange: (value: DateValue | undefined) => void;
+	} = $props();
+</script>
+
+<Calendar
+	type="single"
+	{value}
+	{disabled}
+	{readonly}
+	preventDeselect={required}
+	initialFocus
+	fixedWeeks
+	captionLayout="dropdown"
+	{locale}
+	{calendarLabel}
+	onValueChange={(next) => onValueChange(next as DateValue | undefined)}
+/>

package/src/components/ui/date-value-control/date-value-control-loader.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import type { SchemaDatePickerAppearance } from "@riducms/protocol";
+	import type { Component } from "svelte";
+
+	type ControlSize = "field" | "compact" | "toolbar";
+	type DateValueControlProps = {
+		id: string;
+		name?: string;
+		appearance?: SchemaDatePickerAppearance;
+		value?: string;
+		disabled?: boolean;
+		readonly?: boolean;
+		required?: boolean;
+		invalid?: boolean;
+		label?: string;
+		describedBy?: string;
+		class?: string;
+		size?: ControlSize;
+		onValueChange: (value: string) => void;
+	};
+
+	let props: DateValueControlProps = $props();
+	let Control = $state<Component<DateValueControlProps> | undefined>(undefined);
+
+	void import("@admin/components/ui/date-value-control/date-value-control.svelte").then(
+		({ default: component }) => (Control = component)
+	);
+</script>
+
+{#if Control !== undefined}
+	<Control {...props} />
+{:else}
+	<div id={props.id} class={props.class} role="status" aria-label={props.label} aria-busy="true">
+		Loading date control…
+	</div>
+{/if}

package/src/components/ui/date-value-control/date-value-control.svelte

@@ -0,0 +1,177 @@
+<script lang="ts">
+	import type { DateValue, Time } from "@internationalized/date";
+	import type { SchemaDatePickerAppearance } from "@riducms/protocol";
+	import { DateField, TimeField } from "bits-ui";
+	import CalendarIcon from "~icons/lucide/calendar";
+
+	import { buttonVariants } from "@admin/components/ui/button";
+	import DateValueCalendar from "@admin/components/ui/date-value-control/date-value-calendar.svelte";
+	import { Popover, PopoverContent, PopoverTrigger } from "@admin/components/ui/popover";
+	import { cn } from "@riducms/ui";
+	import { getAdminI18n } from "@riducms/plugin";
+	import {
+		datePickerFormValue,
+		datePickerValue,
+		timeFieldFormValue,
+		timeFieldValue,
+	} from "@admin/fields/scalar/date-control-value";
+
+	type ControlSize = "field" | "compact" | "toolbar";
+	let {
+		id,
+		name,
+		appearance = "dayOnly",
+		value = "",
+		disabled = false,
+		readonly = false,
+		required = false,
+		invalid = false,
+		label,
+		describedBy,
+		class: className,
+		size = "field",
+		onValueChange,
+	}: {
+		id: string;
+		name?: string;
+		appearance?: SchemaDatePickerAppearance;
+		value?: string;
+		disabled?: boolean;
+		readonly?: boolean;
+		required?: boolean;
+		invalid?: boolean;
+		label?: string;
+		describedBy?: string;
+		class?: string;
+		size?: ControlSize;
+		onValueChange: (value: string) => void;
+	} = $props();
+	const i18n = getAdminI18n();
+
+	const controlClass = $derived(
+		cn(
+			"flex w-full items-center rounded-lg border border-control-border bg-control text-foreground-strong transition-[background-color,border-color,color] duration-150 hover:border-control-border-hover focus-within:border-primary/65 aria-invalid:border-destructive/65 data-[disabled]:cursor-not-allowed data-[disabled]:border-control-border-disabled data-[disabled]:bg-control-disabled data-[disabled]:opacity-45 data-[readonly]:border-control-border-disabled data-[readonly]:bg-control-disabled",
+			size === "field" && "h-10.5 px-3.25 text-[14.5px]",
+			size === "compact" && "h-9 px-3 text-[13px]",
+			size === "toolbar" && "h-[34px] px-2.5 text-[12.5px]",
+			className
+		)
+	);
+	const selectedDate = $derived(datePickerValue(value, appearance, i18n.timeZone));
+	let open = $state(false);
+
+	function updateDate(next: DateValue | undefined) {
+		onValueChange(datePickerFormValue(next, appearance, i18n.timeZone));
+	}
+
+	function selectCalendarDate(next: DateValue | undefined) {
+		updateDate(next);
+		open = false;
+	}
+
+	function updateTime(next: Time | undefined) {
+		onValueChange(timeFieldFormValue(next));
+	}
+</script>
+
+{#if appearance === "timeOnly"}
+	<TimeField.Root
+		value={timeFieldValue(value)}
+		locale={i18n.language}
+		{disabled}
+		{readonly}
+		{required}
+		errorMessageId={invalid ? describedBy : undefined}
+		onValueChange={updateTime}
+	>
+		<TimeField.Input
+			{id}
+			{name}
+			class={cn(controlClass, "gap-0.5 select-none")}
+			data-disabled={disabled ? "" : undefined}
+			data-readonly={readonly ? "" : undefined}
+			aria-invalid={invalid}
+			aria-label={label}
+			aria-describedby={describedBy}
+			aria-errormessage={invalid ? describedBy : undefined}
+		>
+			{#snippet children({ segments })}
+				{#each segments as { part, value: segmentValue }, index (`${part}:${index}`)}
+					<TimeField.Segment
+						{part}
+						class={part === "literal"
+							? "px-0.5 text-foreground-soft"
+							: "rounded px-0.5 outline-none hover:bg-control-hover focus:bg-primary/15 aria-[valuetext=Empty]:text-foreground-placeholder"}
+					>
+						{segmentValue}
+					</TimeField.Segment>
+				{/each}
+			{/snippet}
+		</TimeField.Input>
+	</TimeField.Root>
+{:else}
+	<DateField.Root
+		value={selectedDate}
+		locale={i18n.language}
+		granularity={appearance === "dayAndTime" ? "minute" : "day"}
+		{disabled}
+		{readonly}
+		{required}
+		errorMessageId={invalid ? describedBy : undefined}
+		onValueChange={updateDate}
+	>
+		<div
+			class={controlClass}
+			data-disabled={disabled ? "" : undefined}
+			data-readonly={readonly ? "" : undefined}
+			aria-invalid={invalid}
+		>
+			<DateField.Input
+				{id}
+				{name}
+				class="flex min-w-0 flex-1 items-center gap-0.5 select-none"
+				aria-label={label}
+				aria-describedby={describedBy}
+				aria-errormessage={invalid ? describedBy : undefined}
+			>
+				{#snippet children({ segments })}
+					{#each segments as { part, value: segmentValue }, index (`${part}:${index}`)}
+						<DateField.Segment
+							{part}
+							class={part === "literal"
+								? "px-0.5 text-foreground-soft"
+								: "rounded px-0.5 outline-none hover:bg-control-hover focus:bg-primary/15 aria-[valuetext=Empty]:text-foreground-placeholder"}
+						>
+							{segmentValue}
+						</DateField.Segment>
+					{/each}
+					<Popover bind:open>
+						<PopoverTrigger
+							type="button"
+							class={buttonVariants({
+								variant: "ghost",
+								size: "icon-sm",
+								class: "ms-auto size-7 text-foreground-soft",
+							})}
+							disabled={disabled || readonly}
+							aria-label={i18n.t("fields:openCalendar")}
+						>
+							<CalendarIcon class="size-3.5" aria-hidden="true" />
+						</PopoverTrigger>
+						<PopoverContent align="end" sideOffset={6} class="w-auto gap-0 overflow-hidden p-0">
+							<DateValueCalendar
+								value={selectedDate}
+								{disabled}
+								{readonly}
+								{required}
+								locale={i18n.language}
+								calendarLabel={i18n.t("fields:selectDate")}
+								onValueChange={selectCalendarDate}
+							/>
+						</PopoverContent>
+					</Popover>
+				{/snippet}
+			</DateField.Input>
+		</div>
+	</DateField.Root>
+{/if}

package/src/components/ui/date-value-control/index.ts

@@ -0,0 +1,3 @@
+import DateValueControl from "@admin/components/ui/date-value-control/date-value-control-loader.svelte";
+
+export { DateValueControl };

package/src/components/ui/dialog/dialog-close.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		type = "button",
+		...restProps
+	}: DialogPrimitive.CloseProps = $props();
+</script>
+
+<DialogPrimitive.Close bind:ref data-slot="dialog-close" {type} {...restProps} />

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

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import XIcon from "~icons/lucide/x";
+	import { getAdminI18n } from "@riducms/plugin";
+	import { buttonVariants } from "@admin/components/ui/button/index.js";
+	import { cn, type WithoutChildrenOrChild } from "@riducms/ui";
+	import DialogOverlay from "@admin/components/ui/dialog/dialog-overlay.svelte";
+	import type { Snippet } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		portalProps,
+		children,
+		showCloseButton = true,
+		...restProps
+	}: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
+		portalProps?: WithoutChildrenOrChild<DialogPrimitive.PortalProps>;
+		children: Snippet;
+		showCloseButton?: boolean;
+	} = $props();
+	const i18n = getAdminI18n();
+</script>
+
+<DialogPrimitive.Portal {...portalProps}>
+	<DialogOverlay />
+	<DialogPrimitive.Content
+		bind:ref
+		data-slot="dialog-content"
+		class={cn(
+			"ridu-dialog-enter grid max-w-[calc(100%-2rem)] gap-6 rounded-[4px] border border-control-border bg-popover p-6.5 text-[14.5px] text-popover-foreground shadow-[var(--shadow-dialog)] sm:max-w-[460px] fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none",
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		{#if showCloseButton}
+			<DialogPrimitive.Close
+				type="button"
+				data-slot="dialog-close"
+				class={buttonVariants({
+					variant: "ghost",
+					size: "icon-sm",
+					class: "absolute top-4 end-4",
+				})}
+			>
+				<XIcon />
+				<span class="sr-only">{i18n.t("general:close")}</span>
+			</DialogPrimitive.Close>
+		{/if}
+	</DialogPrimitive.Content>
+</DialogPrimitive.Portal>

package/src/components/ui/dialog/dialog-description.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "@riducms/ui";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.DescriptionProps = $props();
+</script>
+
+<DialogPrimitive.Description
+	bind:ref
+	data-slot="dialog-description"
+	class={cn(
+		"text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+		className
+	)}
+	{...restProps}
+/>

package/src/components/ui/dialog/dialog-footer.svelte

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

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

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

package/src/components/ui/dialog/dialog-overlay.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "@riducms/ui";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.OverlayProps = $props();
+</script>
+
+<DialogPrimitive.Overlay
+	bind:ref
+	data-slot="dialog-overlay"
+	class={cn(
+		"bg-[rgba(8,7,6,0.55)] supports-backdrop-filter:backdrop-blur-[4px] data-[state=open]:animate-fade-in data-[state=open]:duration-150 fixed inset-0 isolate z-50",
+		className
+	)}
+	{...restProps}
+/>