@xelqun/forms 0.3.1 → 0.5.0

package/resources/js/core/store.ts

@@ -23,6 +23,7 @@ import { HttpError, postJson, uploadFile } from './http';
 import { eachNode, mergeNode } from './patch';
 import { clone, deletePath, getPath, overlaps, replaceRow, setPath, startsWithPath } from './paths';
 import { RequestLog } from './log';
+import { notify as showNotification } from './notifications';
 import { RequestQueue } from './queue';
 import { newRowKey } from './rows';
 import { translate } from './translate';
@@ -470,6 +471,8 @@ export function createFormStore(schema: FormSchema, options: FormStoreOptions =
     }
 
     function applyPatch(patch: UpdatePatch, versions: Map<string, number>): void {
+        patch.notifications?.forEach(showNotification);
+
         for (const [key, partial] of Object.entries(patch.schema ?? {})) {
             const node = nodes.get(key);
 
@@ -892,7 +895,7 @@ export function createFormStore(schema: FormSchema, options: FormStoreOptions =
     }
 
     async function submit(url: string, submitOptions: SubmitOptions = {}): Promise<void> {
-        if (processing.value) {
+        if (processing.value || schema.disabled) {
             return;
         }
 
@@ -1033,6 +1036,7 @@ export function createFormStore(schema: FormSchema, options: FormStoreOptions =
         isVisible,
         isRequired,
         isDisabled,
+        isFormDisabled: !!schema.disabled,
         text,
         isLoading,
         showsLoadingIndicator,

package/resources/js/index.ts

@@ -4,6 +4,8 @@ export type { XelqunFormsOptions, XelqunPlugin, XelqunPluginContext } from './pl
 export { default as XqForm } from './components/XqForm.vue';
 export { default as XqNode } from './components/XqNode.vue';
 export { default as XqAction } from './components/XqAction.vue';
+export { default as XqActionGroup } from './components/XqActionGroup.vue';
+export { default as XqActions } from './components/XqActions.vue';
 export type { ActionRunner } from './components/XqAction.vue';
 export { default as XqFieldWrapper } from './components/XqFieldWrapper.vue';
 export { createRegistry, defaultComponents } from './components/defaults';
@@ -19,6 +21,7 @@ export { createFormStore, defaultLiveConfig, reportRequestFailure } from './core
 export type { ActionModal, FormStore, FormStoreOptions, SubmitOptions } from './core/store';
 export type { RequestKind, RequestLogEntry } from './core/log';
 export { HttpError, postJson } from './core/http';
+export { notify } from './core/notifications';
 export { translate } from './core/translate';
 export { evaluateCondition } from './core/conditions';
 export { evaluateExpression } from './core/expressions';

package/resources/js/lib/utils.ts

@@ -6,6 +6,15 @@ export function cn(...inputs: ClassValue[]): string {
     return twMerge(clsx(inputs));
 }
 
+/**
+ * Inertia can only visit its own app.
+ */
+export function isOwnUrl(url: string): boolean {
+    return typeof window === 'undefined'
+        ? url.startsWith('/')
+        : new URL(url, window.location.href).origin === window.location.origin;
+}
+
 /**
  * Keep keyboard users in place: focus the first of these that can take it.
  */

package/resources/js/plugin.ts

@@ -1,8 +1,13 @@
+import { router } from '@inertiajs/vue3';
+import { createApp } from 'vue';
 import type { App, Component, Plugin } from 'vue';
 import { createRegistry, defaultComponents } from './components/defaults';
 import { REGISTRY, toComponent } from './composables/registry';
 import type { ComponentRegistry, ComponentResolver } from './composables/registry';
+import { FLASH_KEY, notify } from './core/notifications';
+import type { XqNotification } from './schema/types';
 import { registerIcons } from './ui/icons';
+import XqNotifications from './ui/XqNotifications.vue';
 
 export interface XelqunPluginContext {
     app: App;
@@ -30,6 +35,8 @@ export interface XelqunFormsOptions {
     components?: Record<string, ComponentResolver>;
     /** Icons PHP can name, as { name: component }, on top of the built-in set. */
     icons?: Record<string, Component>;
+    /** What screen readers call the notifications region. {hotkey} is the key that jumps to it. */
+    notificationsLabel?: string;
 }
 
 const VENDOR_PREFIXED_TYPE = /^[a-z0-9-]+\/[a-z0-9-]+$/;
@@ -93,6 +100,27 @@ export function registerPlugins(
     }
 }
 
+/**
+ * Put the toaster on the page and listen for flash data. Returns how to undo both.
+ */
+function mountNotifications(label?: string): () => void {
+    const host = document.body.appendChild(document.createElement('div'));
+    const toaster = createApp(XqNotifications, { label });
+    const stopListening = router.on('flash', (event) => {
+        const { [FLASH_KEY]: notifications } = event.detail.flash;
+
+        (notifications as XqNotification[] | undefined)?.forEach(notify);
+    });
+
+    toaster.mount(host);
+
+    return () => {
+        stopListening();
+        toaster.unmount();
+        host.remove();
+    };
+}
+
 export function createXelqunForms(options: XelqunFormsOptions = {}): Plugin {
     return {
         install(app) {
@@ -109,6 +137,10 @@ export function createXelqunForms(options: XelqunFormsOptions = {}): Plugin {
 
             plugins.forEach((plugin) => plugin.setup?.({ app }));
             app.provide(REGISTRY, registry);
+
+            if (typeof document !== 'undefined') {
+                app.onUnmount(mountNotifications(options.notificationsLabel));
+            }
         },
     };
 }

package/resources/js/schema/types.ts

@@ -135,6 +135,7 @@ export interface FormSchema {
     /** Text in this locale, by its English original. Anything missing stays English. */
     messages?: Record<string, string>;
     unsavedChangesAlert?: boolean;
+    disabled?: boolean;
     state: { data: Record<string, any> };
     components: SchemaNode[];
 }
@@ -169,10 +170,38 @@ export interface UpdatePatch {
     set: Record<string, unknown>;
     schema: Record<string, Partial<SchemaNode>>;
     errors: Record<string, string | string[]>;
+    /** Left out when there are none. */
+    notifications?: XqNotification[];
+}
+
+export interface XqNotification {
+    title?: string | null;
+    body?: string | null;
+    status?: 'success' | 'danger' | 'warning' | 'info' | null;
+    icon?: string | null;
+    /** In milliseconds. */
+    duration?: number | null;
+    persistent?: boolean;
+    actions?: XqNotificationAction[];
+    closeLabel?: string;
+}
+
+export interface XqNotificationAction {
+    label: string;
+    icon?: string | null;
+    color?: string | null;
+    /** Close the notification once the button has done its work. */
+    close: boolean;
+    url?: string;
+    openInNewTab?: boolean;
+    run?: { endpoint: string; token: string; action: string };
+    failureMessage?: string;
 }
 
 export interface ActionResult extends UpdatePatch {
     result?: unknown;
+    /** Where the action sends the user, in place of staying on the page. */
+    redirect?: string | null;
 }
 
 export interface SelectOption {

package/resources/js/ui/XqConfirmDialog.vue

@@ -9,17 +9,38 @@ import {
     AlertDialogRoot,
     AlertDialogTitle,
 } from 'reka-ui';
-import XqButton from './XqButton.vue';
 import { useTranslator } from '../composables/context';
+import { cn } from '../lib/utils';
+import { dialogContentClass, dialogOverlayClass } from './classes';
+import XqButton from './XqButton.vue';
+import XqDialogFooter from './XqDialogFooter.vue';
+import XqDialogHeader from './XqDialogHeader.vue';
 
 const t = useTranslator();
-defineProps<{
-    title: string;
-    message?: string | null;
-    confirmLabel?: string | null;
-    cancelLabel?: string | null;
-    confirmVariant?: 'default' | 'destructive';
-}>();
+
+withDefaults(
+    defineProps<{
+        title: string;
+        message?: string | null;
+        confirmLabel?: string | null;
+        cancelLabel?: string | null;
+        confirmVariant?: 'default' | 'destructive';
+        icon?: string | null;
+        iconColor?: string | null;
+        alignment?: 'start' | 'center' | null;
+        footerAlignment?: 'start' | 'center' | 'end' | 'full' | null;
+    }>(),
+    {
+        message: undefined,
+        confirmLabel: undefined,
+        cancelLabel: undefined,
+        confirmVariant: 'destructive',
+        icon: 'triangle-alert',
+        iconColor: undefined,
+        alignment: 'center',
+        footerAlignment: 'full',
+    },
+);
 defineEmits<{ confirm: [] }>();
 const open = defineModel<boolean>('open', { default: false });
 </script>
@@ -27,15 +48,29 @@ const open = defineModel<boolean>('open', { default: false });
 <template>
     <AlertDialogRoot v-model:open="open">
         <AlertDialogPortal>
-            <AlertDialogOverlay class="inset-0 bg-black/50 fixed z-50" />
+            <AlertDialogOverlay :class="dialogOverlayClass" />
             <AlertDialogContent
-                class="max-w-sm p-5 shadow-lg gap-3 fixed top-1/2 left-1/2 z-50 grid w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 rounded-xq-lg border border-xq-border bg-xq-popover text-xq-popover-foreground"
+                v-bind="message ? {} : { 'aria-describedby': undefined }"
+                :class="cn(dialogContentClass, 'max-w-sm p-6 gap-5 overflow-y-auto')"
             >
-                <AlertDialogTitle class="text-sm font-semibold">{{ title }}</AlertDialogTitle>
-                <AlertDialogDescription class="text-sm text-xq-muted-foreground">
-                    {{ message ?? '' }}
-                </AlertDialogDescription>
-                <div class="gap-2 flex justify-end">
+                <XqDialogHeader
+                    :icon="icon"
+                    :icon-color="
+                        iconColor ?? (confirmVariant === 'destructive' ? 'danger' : 'primary')
+                    "
+                    :alignment="alignment"
+                >
+                    <AlertDialogTitle class="text-base font-semibold text-balance">
+                        {{ title }}
+                    </AlertDialogTitle>
+                    <AlertDialogDescription
+                        v-if="message"
+                        class="text-sm text-pretty text-xq-muted-foreground"
+                    >
+                        {{ message }}
+                    </AlertDialogDescription>
+                </XqDialogHeader>
+                <XqDialogFooter :alignment="footerAlignment">
                     <AlertDialogCancel as-child>
                         <XqButton type="button" variant="outline" size="sm">
                             {{ cancelLabel ?? t('Cancel') }}
@@ -44,14 +79,14 @@ const open = defineModel<boolean>('open', { default: false });
                     <AlertDialogAction as-child>
                         <XqButton
                             type="button"
-                            :variant="confirmVariant ?? 'destructive'"
+                            :variant="confirmVariant"
                             size="sm"
                             @click="$emit('confirm')"
                         >
                             {{ confirmLabel ?? t('Delete') }}
                         </XqButton>
                     </AlertDialogAction>
-                </div>
+                </XqDialogFooter>
             </AlertDialogContent>
         </AlertDialogPortal>
     </AlertDialogRoot>

package/resources/js/ui/XqDialog.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
+import { X } from 'lucide-vue-next';
 import {
+    DialogClose,
     DialogContent,
     DialogDescription,
     DialogOverlay,
@@ -7,9 +9,26 @@ import {
     DialogRoot,
     DialogTitle,
 } from 'reka-ui';
+import { useTranslator } from '../composables/context';
 import { cn } from '../lib/utils';
+import { dialogContentClass, dialogOverlayClass } from './classes';
+import XqButton from './XqButton.vue';
+import XqDialogHeader from './XqDialogHeader.vue';
 
-const props = defineProps<{ title: string; description?: string | null; width?: string | null }>();
+const t = useTranslator();
+const props = withDefaults(
+    defineProps<{
+        title: string;
+        description?: string | null;
+        width?: string | null;
+        icon?: string | null;
+        iconColor?: string | null;
+        alignment?: 'start' | 'center' | null;
+        closeButton?: boolean;
+        closeOnClickAway?: boolean;
+    }>(),
+    { closeButton: true, closeOnClickAway: true },
+);
 const open = defineModel<boolean>('open', { default: false });
 
 const widths: Record<string, string> = {
@@ -18,28 +37,60 @@ const widths: Record<string, string> = {
     lg: 'max-w-lg',
     xl: 'max-w-xl',
     '2xl': 'max-w-2xl',
+    '3xl': 'max-w-3xl',
+    '4xl': 'max-w-4xl',
+    '5xl': 'max-w-5xl',
 };
+
+function keepOpenUnlessAllowed(event: Event): void {
+    if (!props.closeOnClickAway) {
+        event.preventDefault();
+    }
+}
 </script>
 
 <template>
     <DialogRoot v-model:open="open">
         <DialogPortal>
-            <DialogOverlay class="inset-0 bg-black/50 fixed z-50" />
+            <DialogOverlay :class="dialogOverlayClass" />
             <DialogContent
-                :class="
-                    cn(
-                        'p-5 shadow-lg gap-4 fixed top-1/2 left-1/2 z-50 grid max-h-[85vh] w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-xq-lg border border-xq-border bg-xq-popover text-xq-popover-foreground',
-                        widths[props.width ?? 'md'],
-                    )
-                "
+                v-bind="description ? {} : { 'aria-describedby': undefined }"
+                :class="cn(dialogContentClass, widths[props.width ?? 'md'])"
+                @interact-outside="keepOpenUnlessAllowed"
             >
-                <div class="gap-1 grid">
-                    <DialogTitle class="text-sm font-semibold">{{ title }}</DialogTitle>
-                    <DialogDescription class="text-sm text-xq-muted-foreground">
-                        {{ description ?? '' }}
+                <XqDialogHeader
+                    :icon="icon"
+                    :icon-color="iconColor"
+                    :alignment="alignment"
+                    class="px-6 py-4 min-h-0 overflow-y-auto border-b border-xq-border"
+                    :class="closeButton && 'pr-12'"
+                >
+                    <DialogTitle class="text-base font-semibold text-balance">
+                        {{ title }}
+                    </DialogTitle>
+                    <DialogDescription
+                        v-if="description"
+                        class="text-sm text-pretty text-xq-muted-foreground"
+                    >
+                        {{ description }}
                     </DialogDescription>
+                </XqDialogHeader>
+                <!-- A sticky footer can't leave its parent, so it brings its own space. -->
+                <div class="px-6 pt-5 pb-6 has-data-xq-dialog-footer:pb-0 min-h-0 overflow-y-auto">
+                    <slot />
                 </div>
-                <slot />
+                <!-- Last, so a modal's first field gets the focus and not this. -->
+                <DialogClose v-if="closeButton" as-child>
+                    <XqButton
+                        type="button"
+                        variant="ghost"
+                        size="icon-sm"
+                        class="top-3.5 right-3.5 absolute text-xq-muted-foreground"
+                        :aria-label="t('Close')"
+                    >
+                        <X />
+                    </XqButton>
+                </DialogClose>
             </DialogContent>
         </DialogPortal>
     </DialogRoot>

package/resources/js/ui/XqDialogFooter.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { cn } from '../lib/utils';
+
+defineProps<{
+    alignment?: 'start' | 'center' | 'end' | 'full' | null;
+    /** Keeps the buttons in reach while a long form scrolls behind them. */
+    sticky?: boolean;
+}>();
+
+const alignments: Record<string, string> = {
+    start: 'justify-start',
+    center: 'justify-center',
+    end: 'justify-end',
+    full: '*:flex-1',
+};
+</script>
+
+<template>
+    <div
+        data-xq-dialog-footer
+        :class="
+            cn(
+                'gap-2 flex',
+                alignments[alignment ?? 'end'] ?? alignments.end,
+                sticky && 'bottom-0 -mx-6 px-6 py-4 sticky border-t border-xq-border bg-xq-popover',
+            )
+        "
+    >
+        <slot />
+    </div>
+</template>

package/resources/js/ui/XqDialogHeader.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { cn } from '../lib/utils';
+import { dialogIconClasses } from './classes';
+import XqIcon from './XqIcon.vue';
+
+defineProps<{
+    icon?: string | null;
+    iconColor?: string | null;
+    alignment?: 'start' | 'center' | null;
+}>();
+</script>
+
+<template>
+    <div
+        :class="
+            cn(
+                'gap-4 flex',
+                alignment === 'center' ? 'flex-col items-center text-center' : 'items-start',
+            )
+        "
+    >
+        <span
+            v-if="icon"
+            data-xq-dialog-icon
+            :class="
+                cn(
+                    'size-10 flex shrink-0 items-center justify-center rounded-full',
+                    dialogIconClasses[iconColor ?? 'primary'] ?? dialogIconClasses.primary,
+                )
+            "
+        >
+            <XqIcon :name="icon" class="size-5" />
+        </span>
+        <div class="gap-1 min-w-0 grid">
+            <slot />
+        </div>
+    </div>
+</template>

package/resources/js/ui/XqNotificationList.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import { router } from '@inertiajs/vue3';
+import { X } from 'lucide-vue-next';
+import { ToastClose, ToastDescription, ToastRoot, ToastTitle, useToastManager } from 'reka-ui';
+import type { ToastObject } from 'reka-ui';
+import { reactive } from 'vue';
+import { runNotificationAction } from '../core/notifications';
+import { cn, isOwnUrl } from '../lib/utils';
+import type { XqNotificationAction } from '../schema/types';
+import { actionVariants } from './classes';
+import XqButton from './XqButton.vue';
+import XqIcon from './XqIcon.vue';
+
+const { toasts, close } = useToastManager();
+const running = reactive(new Set<string>());
+
+const statusIcons: Record<string, string> = {
+    success: 'circle-check',
+    danger: 'circle-alert',
+    warning: 'triangle-alert',
+    info: 'info',
+};
+
+function iconFor(toast: ToastObject): string | undefined {
+    return toast.data?.icon ?? statusIcons[toast.status ?? ''];
+}
+
+const iconClasses: Record<string, string> = {
+    success: 'text-xq-success',
+    danger: 'text-xq-destructive',
+    warning: 'text-xq-warning',
+    info: 'text-xq-info',
+};
+
+async function press(toast: ToastObject, action: XqNotificationAction): Promise<void> {
+    // A second click on "Undo" would run it twice.
+    if (running.has(toast.id)) {
+        return;
+    }
+
+    running.add(toast.id);
+
+    const hasWorked = !action.run || (await runNotificationAction(action));
+
+    running.delete(toast.id);
+
+    if (hasWorked && action.close) {
+        close(toast.id);
+    }
+}
+
+function follow(event: MouseEvent, toast: ToastObject, action: XqNotificationAction): void {
+    const opensElsewhere = event.ctrlKey || event.metaKey || event.shiftKey || action.openInNewTab;
+
+    if (action.close) {
+        close(toast.id);
+    }
+
+    if (!opensElsewhere && isOwnUrl(action.url!)) {
+        event.preventDefault();
+        router.visit(action.url!);
+    }
+}
+</script>
+
+<template>
+    <ToastRoot
+        v-for="toast in toasts"
+        :key="toast.id"
+        :toast="toast"
+        class="gap-3 p-3 shadow-lg inset-x-0 top-0 ease-out data-[swipe=cancel]:translate-x-0 absolute flex [transform:translateY(calc(var(--reka-toast-offset-y)+var(--reka-toast-index)*0.5rem))] items-start rounded-xq-md border border-xq-border bg-xq-popover text-xq-popover-foreground transition-[transform,opacity] duration-200 outline-none focus-visible:ring-[3px] focus-visible:ring-xq-ring/25 data-[limited]:invisible data-[swipe=end]:translate-x-(--reka-toast-swipe-end-x) data-[swipe=move]:translate-x-(--reka-toast-swipe-move-x) data-[swipe=move]:transition-none motion-safe:data-[state=closed]:animate-xq-toast-out motion-safe:data-[state=open]:animate-xq-toast-in motion-reduce:transition-none"
+    >
+        <XqIcon
+            v-if="iconFor(toast)"
+            :name="iconFor(toast)!"
+            :class="cn('mt-0.5', iconClasses[toast.status ?? ''])"
+        />
+        <div class="min-w-0 flex-1 wrap-break-word">
+            <ToastTitle v-if="toast.title" class="text-sm font-medium">
+                {{ toast.title }}
+            </ToastTitle>
+            <ToastDescription v-if="toast.description" class="text-sm text-xq-muted-foreground">
+                {{ toast.description }}
+            </ToastDescription>
+            <div v-if="toast.data?.actions?.length" class="mt-2 gap-2 flex flex-wrap">
+                <template v-for="action in toast.data.actions" :key="action.label">
+                    <XqButton
+                        v-if="action.url"
+                        as-child
+                        size="sm"
+                        :variant="actionVariants[action.color ?? ''] ?? 'outline'"
+                    >
+                        <a
+                            :href="action.url"
+                            :target="action.openInNewTab ? '_blank' : undefined"
+                            :rel="action.openInNewTab ? 'noopener noreferrer' : undefined"
+                            @click="follow($event, toast, action)"
+                        >
+                            <XqIcon v-if="action.icon" :name="action.icon" />
+                            {{ action.label }}
+                        </a>
+                    </XqButton>
+                    <XqButton
+                        v-else
+                        type="button"
+                        size="sm"
+                        :variant="actionVariants[action.color ?? ''] ?? 'outline'"
+                        :aria-busy="running.has(toast.id) || undefined"
+                        @click="press(toast, action)"
+                    >
+                        <XqIcon v-if="action.icon" :name="action.icon" />
+                        {{ action.label }}
+                    </XqButton>
+                </template>
+            </div>
+        </div>
+        <ToastClose
+            :aria-label="toast.data?.closeLabel ?? 'Close'"
+            class="rounded-xq-sm text-xq-muted-foreground outline-none hover:text-xq-foreground focus-visible:ring-[3px] focus-visible:ring-xq-ring/25"
+        >
+            <X class="size-4" aria-hidden="true" />
+        </ToastClose>
+    </ToastRoot>
+</template>

package/resources/js/ui/XqNotifications.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { ToastProvider, ToastViewport } from 'reka-ui';
+import { notificationManager } from '../core/notifications';
+import XqNotificationList from './XqNotificationList.vue';
+
+/**
+ * Shows every notification. createXelqunForms mounts it as an app of its own,
+ * because Reka keeps toasts in the provider, and a layout that changes between
+ * pages would take them with it.
+ *
+ * It sits above dialogs, and takes pointer events back from an open one, which
+ * turns them off for the whole page.
+ */
+withDefaults(defineProps<{ label?: string }>(), { label: 'Notifications ({hotkey})' });
+</script>
+
+<template>
+    <ToastProvider :toast-manager="notificationManager" :limit="5">
+        <XqNotificationList />
+        <ToastViewport
+            :label="label"
+            data-slot="xq-notifications"
+            class="top-4 right-4 max-w-sm pointer-events-auto fixed z-[60] w-[calc(100%-2rem)] outline-none"
+        />
+    </ToastProvider>
+</template>

package/resources/js/ui/classes.ts

@@ -5,6 +5,13 @@
 export const controlClass =
     'w-full min-w-0 rounded-xq-md border border-xq-input bg-xq-background text-sm text-xq-foreground shadow-xs transition-[color,box-shadow,border-color] outline-none placeholder:text-xq-muted-foreground focus-visible:border-xq-ring focus-visible:ring-[3px] focus-visible:ring-xq-ring/25 disabled:cursor-not-allowed disabled:opacity-60 aria-invalid:border-xq-destructive aria-invalid:ring-xq-destructive/20';
 
+/** How an action's color looks on a button. */
+export const actionVariants: Record<string, 'default' | 'destructive' | 'outline'> = {
+    primary: 'default',
+    danger: 'destructive',
+    gray: 'outline',
+};
+
 export const spinnerClass = 'size-4 shrink-0 motion-safe:animate-spin text-xq-muted-foreground';
 
 export const popoverClass =
@@ -15,6 +22,22 @@ export const groupLabelClass = 'px-2 py-1.5 text-xs font-medium text-xq-muted-fo
 export const optionClass =
     'relative flex w-full cursor-default items-center gap-2 rounded-xq-sm py-1.5 pr-8 pl-2 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-xq-accent data-[highlighted]:text-xq-accent-foreground';
 
+export const dialogOverlayClass =
+    'inset-0 bg-black/50 fixed z-50 backdrop-blur-[2px] motion-safe:data-[state=open]:animate-xq-fade-in motion-safe:data-[state=closed]:animate-xq-fade-out';
+
+export const dialogContentClass =
+    'shadow-xl fixed top-1/2 left-1/2 z-50 flex max-h-[85vh] w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-xq-xl border border-xq-border bg-xq-popover text-xq-popover-foreground outline-none motion-safe:data-[state=open]:animate-xq-dialog-in motion-safe:data-[state=closed]:animate-xq-dialog-out';
+
+/** The tinted circle behind a dialog's icon. */
+export const dialogIconClasses: Record<string, string> = {
+    primary: 'bg-xq-primary/10 text-xq-primary',
+    danger: 'bg-xq-destructive/10 text-xq-destructive',
+    info: 'bg-xq-info/10 text-xq-info',
+    success: 'bg-xq-success/10 text-xq-success',
+    warning: 'bg-xq-warning/10 text-xq-warning',
+    gray: 'bg-xq-muted text-xq-muted-foreground',
+};
+
 /** Text colors the PHP side can name. */
 export const toneClasses: Record<string, string> = {
     neutral: 'text-xq-foreground',

package/resources/js/ui/icons.ts

@@ -8,6 +8,7 @@ import {
     Clock,
     CreditCard,
     DollarSign,
+    EllipsisVertical,
     Eye,
     File,
     Folder,
@@ -53,6 +54,7 @@ const icons: Record<string, Component> = {
     clock: Clock,
     'credit-card': CreditCard,
     'dollar-sign': DollarSign,
+    'ellipsis-vertical': EllipsisVertical,
     eye: Eye,
     file: File,
     folder: Folder,