sv5ui 1.6.0 → 1.8.0

package/dist/Editor/editor.variants.js

@@ -0,0 +1,150 @@
+import { tv } from 'tailwind-variants';
+export const editorVariants = tv({
+    slots: {
+        root: [
+            'relative w-full rounded-lg border border-outline-variant bg-surface',
+            'transition-shadow',
+            'focus-within:ring-2 focus-within:ring-offset-0',
+            'data-[disabled=true]:opacity-60 data-[disabled=true]:pointer-events-none'
+        ],
+        toolbar: [
+            'flex flex-wrap items-center gap-0.5',
+            'border-b border-outline-variant',
+            'bg-surface-container-low',
+            'rounded-t-lg p-1.5'
+        ],
+        toolbarGroup: 'flex items-center gap-0.5',
+        toolbarButton: [
+            'inline-flex items-center justify-center rounded text-on-surface-variant',
+            'hover:bg-surface-container-high hover:text-on-surface',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary',
+            'data-[active=true]:bg-primary-container data-[active=true]:text-on-primary-container',
+            'disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent',
+            'transition-colors'
+        ],
+        toolbarSeparator: 'mx-1 h-5 w-px shrink-0 bg-outline-variant',
+        content: [
+            'text-on-surface',
+            // ----- Inner ProseMirror element (the actual contenteditable) -----
+            '[&_.ProseMirror]:outline-none',
+            '[&_.ProseMirror]:focus:outline-none',
+            '[&_.ProseMirror]:focus-visible:outline-none',
+            '[&_.ProseMirror]:p-4',
+            '[&_.ProseMirror]:min-h-32',
+            '[&_.ProseMirror]:whitespace-pre-wrap',
+            '[&_.ProseMirror]:break-words',
+            // ----- Placeholder (when editor is empty) -----
+            '[&_.is-editor-empty]:before:content-[attr(data-placeholder)]',
+            '[&_.is-editor-empty]:before:text-on-surface-variant/60',
+            '[&_.is-editor-empty]:before:pointer-events-none',
+            '[&_.is-editor-empty]:before:float-left',
+            '[&_.is-editor-empty]:before:h-0',
+            // ----- Content typography (lightweight in-house prose) -----
+            '[&_p]:my-2 [&_p:first-child]:mt-0 [&_p:last-child]:mb-0',
+            '[&_h1]:text-2xl [&_h1]:font-bold [&_h1]:my-3',
+            '[&_h2]:text-xl [&_h2]:font-bold [&_h2]:my-3',
+            '[&_h3]:text-lg [&_h3]:font-semibold [&_h3]:my-2',
+            '[&_ul]:list-disc [&_ul]:ps-6 [&_ul]:my-2',
+            '[&_ol]:list-decimal [&_ol]:ps-6 [&_ol]:my-2',
+            '[&_li>p]:my-0',
+            '[&_blockquote]:border-l-4 [&_blockquote]:border-outline-variant [&_blockquote]:ps-3 [&_blockquote]:italic [&_blockquote]:text-on-surface-variant [&_blockquote]:my-3',
+            '[&_code]:rounded [&_code]:bg-surface-container-highest [&_code]:px-1 [&_code]:py-0.5 [&_code]:text-sm [&_code]:font-mono',
+            '[&_pre]:rounded-md [&_pre]:bg-surface-container-highest [&_pre]:p-3 [&_pre]:my-3 [&_pre]:overflow-x-auto',
+            '[&_pre_code]:bg-transparent [&_pre_code]:p-0',
+            '[&_a]:text-primary [&_a]:underline [&_a]:underline-offset-2',
+            '[&_a:hover]:text-primary/80',
+            '[&_hr]:border-outline-variant [&_hr]:my-4',
+            '[&_strong]:font-semibold',
+            '[&_em]:italic',
+            // ----- Image -----
+            '[&_img]:max-w-full [&_img]:h-auto [&_img]:rounded-md [&_img]:my-2',
+            // ----- YouTube embed (responsive 16:9) -----
+            '[&_iframe[src*="youtube"]]:aspect-video [&_iframe[src*="youtube"]]:w-full [&_iframe[src*="youtube"]]:rounded-md [&_iframe[src*="youtube"]]:my-3 [&_iframe[src*="youtube"]]:border-0',
+            // ----- Mention chip -----
+            '[&_.sv5ui-editor-mention]:inline-flex [&_.sv5ui-editor-mention]:items-center',
+            '[&_.sv5ui-editor-mention]:rounded [&_.sv5ui-editor-mention]:bg-primary-container/60',
+            '[&_.sv5ui-editor-mention]:text-on-primary-container',
+            '[&_.sv5ui-editor-mention]:px-1.5 [&_.sv5ui-editor-mention]:py-0.5',
+            '[&_.sv5ui-editor-mention]:text-sm [&_.sv5ui-editor-mention]:font-medium',
+            // ----- Table -----
+            '[&_.tableWrapper]:my-3 [&_.tableWrapper]:overflow-x-auto',
+            '[&_table]:w-full [&_table]:border-collapse [&_table]:table-fixed',
+            '[&_table]:border [&_table]:border-outline-variant [&_table]:rounded-md',
+            '[&_th]:border [&_th]:border-outline-variant',
+            '[&_th]:bg-surface-container-low [&_th]:px-2 [&_th]:py-1.5',
+            '[&_th]:font-semibold [&_th]:text-start [&_th]:align-top',
+            '[&_th]:relative [&_th]:min-w-16',
+            '[&_td]:border [&_td]:border-outline-variant',
+            '[&_td]:px-2 [&_td]:py-1.5 [&_td]:align-top',
+            '[&_td]:relative [&_td]:min-w-16',
+            // Tiptap selectedCell highlight + column resize handle
+            '[&_.selectedCell]:bg-primary/10',
+            '[&_.column-resize-handle]:absolute [&_.column-resize-handle]:top-0 [&_.column-resize-handle]:bottom-[-2px]',
+            '[&_.column-resize-handle]:-right-0.5 [&_.column-resize-handle]:w-1',
+            '[&_.column-resize-handle]:bg-primary/40 [&_.column-resize-handle]:pointer-events-none',
+            // ----- Selection styling -----
+            '[&_::selection]:bg-primary/20'
+        ],
+        footer: [
+            'flex items-center justify-between gap-2',
+            'border-t border-outline-variant',
+            'bg-surface-container-low',
+            'px-3 py-1.5 rounded-b-lg',
+            'text-xs text-on-surface-variant'
+        ],
+        countLabel: 'tabular-nums',
+        bubbleMenu: [
+            // ⚠️ Tiptap's BubbleMenu only sets `visibility:hidden` initially,
+            // leaving the element in normal flow (taking up space below the editor)
+            // until the user first selects text. Setting `position:absolute` upfront
+            // keeps it out of flow from mount — extension's Floating UI positioning
+            // then overrides left/top inline on selection.
+            'absolute top-0 left-0 z-50 invisible',
+            'flex items-center gap-0.5 p-1',
+            'rounded-lg border border-outline-variant bg-surface',
+            'shadow-md'
+        ]
+    },
+    variants: {
+        size: {
+            sm: {
+                toolbarButton: 'size-7 *:size-3.5',
+                content: 'text-sm [&_.ProseMirror]:p-3 [&_.ProseMirror]:min-h-24',
+                footer: 'text-[11px]'
+            },
+            md: {
+                toolbarButton: 'size-8 *:size-4',
+                content: 'text-sm',
+                footer: ''
+            },
+            lg: {
+                toolbarButton: 'size-9 *:size-5',
+                content: 'text-base [&_.ProseMirror]:p-5 [&_.ProseMirror]:min-h-40',
+                footer: ''
+            }
+        },
+        color: {
+            primary: { root: 'focus-within:ring-primary' },
+            secondary: { root: 'focus-within:ring-secondary' },
+            tertiary: { root: 'focus-within:ring-tertiary' },
+            success: { root: 'focus-within:ring-success' },
+            warning: { root: 'focus-within:ring-warning' },
+            error: { root: 'focus-within:ring-error' },
+            info: { root: 'focus-within:ring-info' },
+            surface: { root: 'focus-within:ring-outline' }
+        },
+        sticky: {
+            true: { toolbar: 'sticky top-0 z-10 backdrop-blur-sm' },
+            false: ''
+        }
+    },
+    defaultVariants: {
+        size: 'md',
+        color: 'primary',
+        sticky: false
+    }
+});
+export const editorDefaults = {
+    defaultVariants: editorVariants.defaultVariants,
+    slots: {}
+};

package/dist/Editor/index.d.ts

@@ -0,0 +1,53 @@
+/**
+ * SV5UI Editor — rich-text WYSIWYG built on Tiptap v3 + ProseMirror.
+ *
+ * ## Installation
+ *
+ * Tiptap is declared as an optional peer dependency of sv5ui, so consumers
+ * who don't use `<Editor>` pay zero install/bundle cost. When you do use it,
+ * install Tiptap alongside sv5ui:
+ *
+ * ```bash
+ * pnpm add sv5ui \
+ *   @tiptap/core @tiptap/pm @tiptap/starter-kit \
+ *   @tiptap/extension-bubble-menu \
+ *   @tiptap/extension-character-count \
+ *   @tiptap/extension-drag-handle \
+ *   @tiptap/extension-image \
+ *   @tiptap/extension-mention \
+ *   @tiptap/extension-placeholder \
+ *   @tiptap/extension-table \
+ *   @tiptap/extension-table-cell \
+ *   @tiptap/extension-table-header \
+ *   @tiptap/extension-table-row \
+ *   @tiptap/extension-text-align \
+ *   @tiptap/extension-typography \
+ *   @tiptap/extension-youtube \
+ *   @tiptap/suggestion \
+ *   tiptap-markdown
+ * ```
+ *
+ * (`npm add` / `yarn add` work equally well.)
+ *
+ * All 18 packages are required, even if you only enable a subset of
+ * features. Editor imports every extension at module load so toggling
+ * `image`, `tables`, `youtube`, etc. via props doesn't trigger a dynamic
+ * import. Missing peers fail at runtime with module-resolution errors.
+ *
+ * ## Usage
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import { Editor, type EditorApi } from 'sv5ui/editor'
+ *   let value = $state('<p>Hello</p>')
+ *   let api = $state<EditorApi>()
+ * </script>
+ *
+ * <Editor bind:value bind:api placeholder="Write something…" />
+ * ```
+ *
+ * See {@link EditorProps} for every option.
+ */
+export { default as Editor } from './Editor.svelte';
+export { buildDefaultSlashCommands } from './editor.slash.svelte.js';
+export type { EditorProps, EditorApi, EditorJSON, EditorReactiveState, MentionItem, SlashCommand, ToolbarAction } from './editor.types.js';

package/dist/Editor/index.js

@@ -0,0 +1,52 @@
+/**
+ * SV5UI Editor — rich-text WYSIWYG built on Tiptap v3 + ProseMirror.
+ *
+ * ## Installation
+ *
+ * Tiptap is declared as an optional peer dependency of sv5ui, so consumers
+ * who don't use `<Editor>` pay zero install/bundle cost. When you do use it,
+ * install Tiptap alongside sv5ui:
+ *
+ * ```bash
+ * pnpm add sv5ui \
+ *   @tiptap/core @tiptap/pm @tiptap/starter-kit \
+ *   @tiptap/extension-bubble-menu \
+ *   @tiptap/extension-character-count \
+ *   @tiptap/extension-drag-handle \
+ *   @tiptap/extension-image \
+ *   @tiptap/extension-mention \
+ *   @tiptap/extension-placeholder \
+ *   @tiptap/extension-table \
+ *   @tiptap/extension-table-cell \
+ *   @tiptap/extension-table-header \
+ *   @tiptap/extension-table-row \
+ *   @tiptap/extension-text-align \
+ *   @tiptap/extension-typography \
+ *   @tiptap/extension-youtube \
+ *   @tiptap/suggestion \
+ *   tiptap-markdown
+ * ```
+ *
+ * (`npm add` / `yarn add` work equally well.)
+ *
+ * All 18 packages are required, even if you only enable a subset of
+ * features. Editor imports every extension at module load so toggling
+ * `image`, `tables`, `youtube`, etc. via props doesn't trigger a dynamic
+ * import. Missing peers fail at runtime with module-resolution errors.
+ *
+ * ## Usage
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import { Editor, type EditorApi } from 'sv5ui/editor'
+ *   let value = $state('<p>Hello</p>')
+ *   let api = $state<EditorApi>()
+ * </script>
+ *
+ * <Editor bind:value bind:api placeholder="Write something…" />
+ * ```
+ *
+ * See {@link EditorProps} for every option.
+ */
+export { default as Editor } from './Editor.svelte';
+export { buildDefaultSlashCommands } from './editor.slash.svelte.js';

package/dist/FileUpload/FileUpload.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-    import type { FileUploadProps } from './file-upload.types.js'
+    import type { FileUploadProps, FileUploadRejection } from './file-upload.types.js'
 
     export type Props = FileUploadProps
 </script>
@@ -12,6 +12,7 @@
     import Icon from '../Icon/Icon.svelte'
     import Button from '../Button/Button.svelte'
     import Modal from '../Modal/Modal.svelte'
+    import { useFormField, useFormFieldEmit } from '../hooks/useFormField.svelte.js'
 
     const config = getComponentConfig('fileUpload', fileUploadDefaults)
     const icons = getComponentConfig('icons', iconsDefaults)
@@ -22,6 +23,9 @@
         onValueChange,
         multiple = false,
         accept,
+        maxSize,
+        maxFiles,
+        onReject,
         dropzone = true,
         interactive = true,
         label = 'Drop files here or click to upload',
@@ -39,6 +43,7 @@
         required = false,
         fileIcon = icons.file,
         imagePreview = true,
+        id,
         name,
         leadingSlot,
         labelSlot,
@@ -59,6 +64,9 @@
     let previewOpen = $state(false)
     let previewFile = $state<File | null>(null)
 
+    const formFieldContext = useFormField()
+    const emit = useFormFieldEmit()
+
     // Stable file identity key with separator to avoid collisions
     const fileKey = (f: File) => `${f.name}:${f.size}:${f.lastModified}`
 
@@ -67,8 +75,23 @@
     // eslint-disable-next-line svelte/prefer-svelte-reactivity
     const urlCache = new Map<string, string>()
 
+    const hasError = $derived(
+        formFieldContext?.error !== undefined && formFieldContext?.error !== false
+    )
+    const resolvedHighlight = $derived(highlight || hasError)
+    const resolvedId = $derived(id ?? formFieldContext?.ariaId)
+    const resolvedName = $derived(name ?? formFieldContext?.name)
+    const ariaDescribedBy = $derived(
+        !formFieldContext
+            ? undefined
+            : hasError
+              ? `${formFieldContext.ariaId}-error`
+              : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`
+    )
+
     const isDisabled = $derived(disabled || loading)
     const isDragging = $derived(dragCounter > 0)
+    const isFull = $derived(maxFiles !== undefined && value.length >= maxFiles)
     const showFilesInside = $derived(
         layout === 'grid' && !multiple && value.length > 0 && preview && variant === 'area'
     )
@@ -76,13 +99,13 @@
     // Pass booleans directly so compound variants with `false` values match correctly
     const slots = $derived(
         fileUploadVariants({
-            color,
+            color: hasError ? 'error' : color,
             size,
             variant,
             layout,
             dropzone,
             interactive: interactive && !isDisabled,
-            highlight,
+            highlight: resolvedHighlight,
             multiple,
             disabled: isDisabled
         })
@@ -150,17 +173,53 @@
             })
     }
 
+    function validateIngress(file: File): FileUploadRejection['reason'] | null {
+        if (accept && !isFileAccepted(file)) return 'accept'
+        if (maxSize !== undefined && file.size > maxSize) return 'maxSize'
+        return null
+    }
+
+    function applyMaxFiles(candidates: File[]): {
+        accepted: File[]
+        rejected: FileUploadRejection[]
+    } {
+        if (maxFiles === undefined) return { accepted: candidates, rejected: [] }
+        const remaining = Math.max(0, maxFiles - value.length)
+        if (candidates.length <= remaining) return { accepted: candidates, rejected: [] }
+        return {
+            accepted: candidates.slice(0, remaining),
+            rejected: candidates.slice(remaining).map((file) => ({ file, reason: 'maxFiles' }))
+        }
+    }
+
     function addFiles(newFiles: File[]) {
         if (isDisabled) return
-        const filtered = accept ? newFiles.filter(isFileAccepted) : newFiles
-        if (!filtered.length) return
+
+        const rejected: FileUploadRejection[] = []
+        const passed: File[] = []
+        for (const file of newFiles) {
+            const reason = validateIngress(file)
+            if (reason) rejected.push({ file, reason })
+            else passed.push(file)
+        }
+
+        let accepted: File[]
         if (!multiple) {
-            value = [filtered[0]]
+            accepted = passed.slice(0, 1)
         } else {
             const existing = new Set(value.map(fileKey))
-            value = [...value, ...filtered.filter((f) => !existing.has(fileKey(f)))]
+            const deduped = passed.filter((f) => !existing.has(fileKey(f)))
+            const result = applyMaxFiles(deduped)
+            accepted = result.accepted
+            rejected.push(...result.rejected)
         }
-        onValueChange?.(value)
+
+        if (accepted.length) {
+            value = multiple ? [...value, ...accepted] : accepted
+            onValueChange?.(value)
+            emit.onChange()
+        }
+        if (rejected.length) onReject?.(rejected)
     }
 
     function removeFile(index: number) {
@@ -176,6 +235,7 @@
         }
         value = value.filter((_, i) => i !== index)
         onValueChange?.(value)
+        emit.onChange()
     }
 
     export function clearAll() {
@@ -185,6 +245,7 @@
         urlCache.clear()
         value = []
         onValueChange?.(value)
+        emit.onChange()
     }
 
     function handleInputChange(e: Event) {
@@ -254,13 +315,13 @@
     }
 </script>
 
-<div {...restProps} bind:this={ref} class={classes.root}>
+<div {...restProps} bind:this={ref} class={classes.root} data-full={isFull ? '' : undefined}>
     <!-- Hidden file input — uses auto-generated id internally -->
     <input
         bind:this={inputRef}
         type="file"
         id={autoId}
-        {name}
+        name={resolvedName}
         {accept}
         {multiple}
         {required}
@@ -275,18 +336,23 @@
         <!-- Area / Dropzone -->
         <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
         <div
+            id={resolvedId}
             class={classes.base}
             data-dragging={isDragging ? '' : undefined}
             role={interactive ? 'button' : undefined}
             tabindex={interactive && !isDisabled ? 0 : undefined}
             aria-disabled={isDisabled || undefined}
             aria-label={interactive ? label : undefined}
+            aria-invalid={resolvedHighlight ? true : undefined}
+            aria-describedby={ariaDescribedBy}
             onclick={handleAreaClick}
             ondragenter={handleDragEnter}
             ondragover={handleDragOver}
             ondragleave={handleDragLeave}
             ondrop={handleDrop}
             onkeydown={handleKeydown}
+            onfocus={() => emit.onFocus()}
+            onblur={() => emit.onBlur()}
         >
             {#if showFilesInside}
                 <!-- Grid single: file fills the area as overlay -->
@@ -390,6 +456,7 @@
     {:else}
         <!-- Button variant -->
         <Button
+            id={resolvedId}
             {color}
             {size}
             disabled={isDisabled}
@@ -397,7 +464,11 @@
             {loadingIcon}
             leadingIcon={loading ? undefined : icon}
             {label}
+            aria-invalid={resolvedHighlight ? true : undefined}
+            aria-describedby={ariaDescribedBy}
             onclick={handleAreaClick}
+            onfocus={() => emit.onFocus()}
+            onblur={() => emit.onBlur()}
         />
     {/if}
 

package/dist/FileUpload/file-upload.types.d.ts

@@ -2,6 +2,21 @@ import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import type { ClassNameValue } from 'tailwind-merge';
 import type { FileUploadVariantProps, FileUploadSlots } from './file-upload.variants.js';
+/**
+ * Reason a file was rejected by FileUpload.
+ *
+ * - `accept`: file did not match the `accept` MIME/extension filter
+ * - `maxSize`: file exceeded the `maxSize` byte limit
+ * - `maxFiles`: file would have pushed the selection past `maxFiles`
+ */
+export type FileUploadRejectionReason = 'accept' | 'maxSize' | 'maxFiles';
+/**
+ * A single rejected file along with the reason it was rejected.
+ */
+export interface FileUploadRejection {
+    file: File;
+    reason: FileUploadRejectionReason;
+}
 export type FileUploadProps = Omit<HTMLAttributes<HTMLElement>, 'class' | 'children'> & {
     /**
      * Bindable reference to the root DOM element.
@@ -25,6 +40,30 @@ export type FileUploadProps = Omit<HTMLAttributes<HTMLElement>, 'class' | 'child
      * Accepted file types as MIME types or extensions (e.g. "image/*,.pdf").
      */
     accept?: string;
+    /**
+     * Maximum allowed size per file, in bytes. Files exceeding this are
+     * rejected and reported through `onReject`.
+     *
+     * @example
+     * ```svelte
+     * <FileUpload maxSize={5 * 1024 * 1024} /> <!-- 5 MB -->
+     * ```
+     */
+    maxSize?: number;
+    /**
+     * Maximum number of files that can be selected. When the current
+     * selection plus the incoming files would exceed this, the excess
+     * files are rejected and reported through `onReject`. The root element
+     * exposes a `data-full` attribute when the limit is reached, so the
+     * upload area can be styled accordingly.
+     */
+    maxFiles?: number;
+    /**
+     * Called when one or more incoming files are rejected by `accept`,
+     * `maxSize`, or `maxFiles`. Receives the full rejection list for a
+     * single user action (one drop or one input change).
+     */
+    onReject?: (rejected: FileUploadRejection[]) => void;
     /**
      * Enable drag-and-drop file upload.
      * @default true

package/dist/FileUpload/index.d.ts

@@ -1,2 +1,2 @@
 export { default as FileUpload } from './FileUpload.svelte';
-export type { FileUploadProps } from './file-upload.types.js';
+export type { FileUploadProps, FileUploadRejection, FileUploadRejectionReason } from './file-upload.types.js';

package/dist/Modal/Modal.svelte

@@ -28,8 +28,9 @@
         description,
         overlay: showOverlay = config.defaultVariants.overlay ?? true,
         scrollable = config.defaultVariants.scrollable ?? false,
-        transition = config.defaultVariants.transition ?? true,
-        fullscreen = config.defaultVariants.fullscreen ?? false,
+        transition = config.defaultVariants.transition ?? 'scale',
+        size = config.defaultVariants.size ?? 'md',
+        fullscreen = false,
         portal = true,
         close: closeProp = true,
         dismissible = true,
@@ -46,6 +47,11 @@
         closeSlot
     }: Props = $props()
 
+    const resolvedSize = $derived(fullscreen ? 'full' : size)
+    const resolvedTransition = $derived(
+        transition === false ? 'none' : transition === true ? 'scale' : transition
+    )
+
     const showClose = $derived(!!closeProp)
     const closeProps = $derived(typeof closeProp === 'object' ? closeProp : {})
 
@@ -57,7 +63,12 @@
     )
 
     const variantSlots = $derived(
-        modalVariants({ transition, fullscreen, overlay: showOverlay, scrollable })
+        modalVariants({
+            transition: resolvedTransition,
+            size: resolvedSize,
+            overlay: showOverlay,
+            scrollable
+        })
     )
 
     const classes = $derived({

package/dist/Modal/modal.types.d.ts

@@ -43,15 +43,26 @@ export interface ModalProps extends RootProps, ContentProps {
      */
     scrollable?: ModalVariantProps['scrollable'];
     /**
-     * Animate the modal on open and close.
-     * @default true
+     * Controls the entrance/exit animation.
+     * - `'none'` / `false`: no animation
+     * - `'fade'`: overlay + content fade
+     * - `'slide'`: overlay fade + content slide-in from top
+     * - `'scale'` / `true`: overlay fade + content scale-in (default)
+     * @default 'scale'
+     */
+    transition?: ModalVariantProps['transition'] | boolean;
+    /**
+     * Controls the modal width. The `'full'` value expands to fill the
+     * entire viewport (replaces the deprecated `fullscreen` prop).
+     * @default 'md'
      */
-    transition?: ModalVariantProps['transition'];
+    size?: ModalVariantProps['size'];
     /**
      * Expand the modal to fill the entire viewport.
+     * @deprecated Use `size="full"` instead. Retained as an alias for backward compatibility.
      * @default false
      */
-    fullscreen?: ModalVariantProps['fullscreen'];
+    fullscreen?: boolean;
     /**
      * Render the modal content in a portal appended to `<body>`.
      * @default true