tera-system-ui 0.1.76 → 0.2.1

package/dist/components/date-range-picker/DateRangePicker.svelte

@@ -3,12 +3,14 @@ import { CalendarDate } from '@internationalized/date';
 import IconCalendar from "@tabler/icons-svelte/icons/calendar";
 import IconChevronLeft from "@tabler/icons-svelte/icons/chevron-left";
 import IconChevronRight from "@tabler/icons-svelte/icons/chevron-right";
-import { IconX } from '../icons/index.js';
+import { IconX } from '../../internal/icons';
 import { cn } from '../../utils/utils.js';
 import { untrack } from 'svelte';
 import { innerWidth } from 'svelte/reactivity/window';
 import { Dialog } from '../dialog/index.js';
-let { dateRange = $bindable([]), onchange, enableTime = false, placeholder = 'Select date range', disabled = false, class: className, minValue, maxValue, isDateDisabled, numberOfMonths: numberOfMonthsProp, weekStartsOn, } = $props();
+import { dateRangePickerRecipe } from './DateRangePicker.recipe.js';
+let { dateRange = $bindable([]), onchange, enableTime = false, placeholder = 'Select date range', disabled = false, class: className, minValue, maxValue, isDateDisabled, numberOfMonths: numberOfMonthsProp, weekStartsOn, calendarIcon, clearIcon, prevIcon, nextIcon, closeIcon, } = $props();
+const styles = dateRangePickerRecipe();
 const isDesktop = $derived((innerWidth.current ?? 768) >= 768);
 let open = $state(false);
 // ── Date-field value: drives DateRangeField segments ──────────────────
@@ -173,12 +175,12 @@ const quickRanges = [
     { key: 'thisQuarter', label: 'This quarter' },
     { key: 'last3Months', label: 'Last 3 months' },
 ];
-// ── Styles ────────────────────────────────────────────────────────────
-const triggerStyles = $derived(cn('inline-flex items-center gap-2 h-9 px-3 rounded-md text-sm w-full', 'border border-border-default bg-surface-control', 'focus-within:border-interactive-hover focus-within:shadow-focus', 'data-[state=open]:border-interactive-hover data-[state=open]:shadow-focus', 'transition-[border-color,box-shadow] ease-ui duration-150', 'cursor-text', disabled && 'opacity-50 pointer-events-none'));
-const iconBtnStyles = cn('inline-flex items-center justify-center size-6 rounded shrink-0 cursor-pointer', 'text-text-tertiary hover:bg-surface-hover hover:text-text-primary', 'transition-colors ease-ui duration-100');
-const segmentStyles = cn('inline-block rounded-sm px-0.5 text-sm tabular-nums caret-transparent select-none outline-none', 'text-text-primary', 'data-[placeholder]:text-text-tertiary', 'focus:bg-primary-100 focus:text-primary-700 dark:focus:bg-primary-950 dark:focus:text-primary-300');
-const dayStyles = cn('inline-flex items-center justify-center size-full rounded-md text-sm cursor-pointer select-none', 'transition-colors ease-ui duration-100', 'hover:bg-surface-hover text-text-primary', 'data-[outside-month]:opacity-0 data-[outside-month]:pointer-events-none', 'data-[today]:ring-1 data-[today]:ring-inset data-[today]:ring-border-default', 'data-[selected]:bg-primary-600 data-[selected]:text-white data-[selected]:hover:bg-primary-500 data-[selected]:ring-0', 'data-[range-middle]:bg-primary-100 data-[range-middle]:text-primary-700 data-[range-middle]:rounded-none data-[range-middle]:hover:bg-primary-200', 'dark:data-[range-middle]:bg-primary-950 dark:data-[range-middle]:text-primary-300 dark:data-[range-middle]:hover:bg-primary-900', 'data-[range-start]:rounded-r-none', 'data-[range-end]:rounded-l-none', 'data-[disabled]:opacity-30 data-[disabled]:pointer-events-none', 'data-[unavailable]:opacity-30 data-[unavailable]:pointer-events-none');
-const popoverContentStyles = cn('z-50 overflow-hidden bg-surface rounded-container border border-border-default shadow-lg', 'animate-in fade-in zoom-in-95 duration-150', 'data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95');
+// ── Styles (recipe-driven) ────────────────────────────────────────────
+const triggerStyles = $derived(styles.trigger({ disabled }));
+const iconBtnStyles = styles.iconBtn();
+const segmentStyles = styles.segment();
+const dayStyles = styles.day();
+const popoverContentStyles = styles.panel();
 </script>
 
 <!-- ─── Shared snippets ──────────────────────────────────────────────────── -->
@@ -188,7 +190,7 @@ const popoverContentStyles = cn('z-50 overflow-hidden bg-surface rounded-contain
             bind:value={fieldValue}
             onValueChange={handleFieldChange}
             {disabled}
-            class="drp-field flex items-center gap-0.5 min-w-0 flex-1"
+            class={styles.field()}
     >
         <DateRangeField.Input type="start" class="flex items-center gap-0">
             {#snippet children({segments})}
@@ -236,31 +238,25 @@ const popoverContentStyles = cn('z-50 overflow-hidden bg-surface rounded-contain
                         <!-- Month heading -->
                         <div class="flex items-center justify-between gap-2">
                             {#if i === 0}
-                                <CalendarPrimitive.PrevButton
-                                        class="inline-flex items-center justify-center size-7 rounded-md text-text-tertiary
-                                        hover:bg-surface-hover hover:text-text-primary
-                                        transition-colors ease-ui duration-100
-                                        disabled:opacity-30 disabled:pointer-events-none"
-                                >
-                                    <IconChevronLeft class="size-4"/>
+                                <CalendarPrimitive.PrevButton class={styles.navBtn()}>
+                                    {#if prevIcon}{@render prevIcon()}{:else}
+                                        <IconChevronLeft class="size-4"/>
+                                    {/if}
                                 </CalendarPrimitive.PrevButton>
                             {:else}
                                 <div class="size-7 shrink-0"></div>
                             {/if}
 
-                            <span class="text-sm font-medium text-text-primary whitespace-nowrap">
+                            <span class={styles.monthLabel()}>
                                 {new Date(month.value.year, month.value.month - 1)
                                     .toLocaleDateString('en-US', {month: 'long', year: 'numeric'})}
                             </span>
 
                             {#if i === months.length - 1}
-                                <CalendarPrimitive.NextButton
-                                        class="inline-flex items-center justify-center size-7 rounded-md text-text-tertiary
-                                        hover:bg-surface-hover hover:text-text-primary
-                                        transition-colors ease-ui duration-100
-                                        disabled:opacity-30 disabled:pointer-events-none"
-                                >
-                                    <IconChevronRight class="size-4"/>
+                                <CalendarPrimitive.NextButton class={styles.navBtn()}>
+                                    {#if nextIcon}{@render nextIcon()}{:else}
+                                        <IconChevronRight class="size-4"/>
+                                    {/if}
                                 </CalendarPrimitive.NextButton>
                             {:else}
                                 <div class="size-7 shrink-0"></div>
@@ -272,9 +268,7 @@ const popoverContentStyles = cn('z-50 overflow-hidden bg-surface rounded-contain
                             <CalendarPrimitive.GridHead>
                                 <CalendarPrimitive.GridRow class="flex">
                                     {#each weekdays as day (day)}
-                                        <CalendarPrimitive.HeadCell
-                                                class="w-9 h-8 text-xs font-medium text-text-tertiary flex items-center justify-center"
-                                        >
+                                        <CalendarPrimitive.HeadCell class={styles.weekday()}>
                                             {day}
                                         </CalendarPrimitive.HeadCell>
                                     {/each}
@@ -287,7 +281,7 @@ const popoverContentStyles = cn('z-50 overflow-hidden bg-surface rounded-contain
                                             <CalendarPrimitive.Cell
                                                     {date}
                                                     month={month.value}
-                                                    class="relative size-9 p-0 text-center"
+                                                    class={styles.cell()}
                                             >
                                                 <CalendarPrimitive.Day class={dayStyles}/>
                                             </CalendarPrimitive.Cell>
@@ -304,45 +298,34 @@ const popoverContentStyles = cn('z-50 overflow-hidden bg-surface rounded-contain
 {/snippet}
 
 {#snippet timePickers()}
-    <div class="border-t border-border-default px-4 py-3 flex items-center gap-2">
-        <span class="text-xs font-medium text-text-tertiary w-9 shrink-0">Start</span>
+    <div class={styles.timeBar()}>
+        <span class={styles.timeLabelStart()}>Start</span>
         <input
                 type="time"
                 bind:value={startTime}
-                class="h-7 px-2 text-sm text-text-primary border border-border-default rounded-md bg-surface-control
-                focus:border-interactive-hover focus:shadow-focus outline-none
-                transition-[border-color,box-shadow] ease-ui duration-150"
+                class={styles.timeInput()}
         />
-        <span class="text-text-tertiary mx-1 shrink-0">→</span>
-        <span class="text-xs font-medium text-text-tertiary w-6 shrink-0">End</span>
+        <span class={styles.timeArrow()}>→</span>
+        <span class={styles.timeLabelEnd()}>End</span>
         <input
                 type="time"
                 bind:value={endTime}
-                class="h-7 px-2 text-sm text-text-primary border border-border-default rounded-md bg-surface-control
-                focus:border-interactive-hover focus:shadow-focus outline-none
-                transition-[border-color,box-shadow] ease-ui duration-150"
+                class={styles.timeInput()}
         />
     </div>
 {/snippet}
 
 {#snippet pickerFooter()}
-    <div class="border-t border-border-default px-4 py-3 flex items-center justify-between gap-3">
+    <div class={styles.footer()}>
         <button
-                class="inline-flex items-center h-8 px-3 text-sm rounded-md cursor-pointer
-                border border-border-default bg-surface-control text-text-primary
-                hover:text-interactive-hover hover:border-interactive-hover
-                transition-[border-color,color] ease-ui duration-150"
+                class={styles.footerReset()}
                 onclick={resetRange}
         >
             Reset
         </button>
         <button
                 disabled={!canApply}
-                class="inline-flex items-center h-8 px-4 text-sm rounded-md cursor-pointer
-                bg-primary-600 text-white border border-primary-600
-                hover:bg-primary-500 hover:border-primary-500
-                disabled:opacity-40 disabled:cursor-not-allowed disabled:pointer-events-none
-                transition-[background-color,border-color,opacity] ease-ui duration-150"
+                class={styles.footerApply()}
                 onclick={applyRange}
         >
             Apply
@@ -374,7 +357,9 @@ const popoverContentStyles = cn('z-50 overflow-hidden bg-surface rounded-contain
                         {@render dateField()}
 
                         <div class="flex items-center gap-1 shrink-0 ml-1">
-                            <IconCalendar class="size-4 text-text-tertiary pointer-events-none"/>
+                            {#if calendarIcon}{@render calendarIcon()}{:else}
+                                <IconCalendar class="size-4 text-text-tertiary pointer-events-none"/>
+                            {/if}
                             {#if hasRange}
                                 <button
                                         type="button"
@@ -382,7 +367,9 @@ const popoverContentStyles = cn('z-50 overflow-hidden bg-surface rounded-contain
                                         aria-label="Clear date range"
                                         onclick={(e) => { e.stopPropagation(); resetRange(); }}
                                 >
-                                    <IconX class="size-3"/>
+                                    {#if clearIcon}{@render clearIcon()}{:else}
+                                        <IconX class="size-3"/>
+                                    {/if}
                                 </button>
                             {/if}
                         </div>
@@ -394,19 +381,13 @@ const popoverContentStyles = cn('z-50 overflow-hidden bg-surface rounded-contain
                 <PopoverPrimitive.Content sideOffset={4} align="start" class={popoverContentStyles}>
                     <div class="flex">
                         <!-- Quick-select sidebar -->
-                        <div class="border-r border-border-default p-2 flex flex-col gap-0.5 w-36 shrink-0">
-                            <p class="px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-text-tertiary">
+                        <div class={styles.presetSidebar()}>
+                            <p class={styles.presetHeading()}>
                                 Quick Select
                             </p>
                             {#each quickRanges as range (range.key)}
                                 <button
-                                        class={cn(
-                                        'w-full text-left px-2 py-1.5 rounded text-sm cursor-pointer',
-                                        'transition-colors ease-ui duration-100',
-                                        activeQuickSelect === range.key
-                                            ? 'bg-interactive/10 text-interactive font-medium'
-                                            : 'text-text-primary hover:bg-surface-hover',
-                                    )}
+                                        class={styles.presetItem({presetActive: activeQuickSelect === range.key})}
                                         onclick={() => applyQuickSelect(range.key)}
                                 >
                                     {range.label}
@@ -438,11 +419,15 @@ const popoverContentStyles = cn('z-50 overflow-hidden bg-surface rounded-contain
                         aria-label="Open date picker"
                         onclick={() => (open = true)}
                 >
-                    <IconCalendar class="size-4"/>
+                    {#if calendarIcon}{@render calendarIcon()}{:else}
+                        <IconCalendar class="size-4"/>
+                    {/if}
                 </button>
                 {#if hasRange}
                     <button class={iconBtnStyles} aria-label="Clear date range" onclick={resetRange}>
-                        <IconX class="size-3"/>
+                        {#if clearIcon}{@render clearIcon()}{:else}
+                            <IconX class="size-3"/>
+                        {/if}
                     </button>
                 {/if}
             </div>
@@ -451,25 +436,21 @@ const popoverContentStyles = cn('z-50 overflow-hidden bg-surface rounded-contain
         <Dialog bind:open size="sm" closeButton={false} padding="none">
             <div class="flex flex-col">
                 <!-- Dialog header -->
-                <div class="flex items-center justify-between px-4 py-3 border-b border-border-default shrink-0">
-                    <span class="text-sm font-semibold text-text-primary">Select Date Range</span>
+                <div class={styles.dialogHeader()}>
+                    <span class={styles.dialogTitle()}>Select Date Range</span>
                     <button class={iconBtnStyles} aria-label="Close" onclick={() => (open = false)}>
-                        <IconX class="size-4"/>
+                        {#if closeIcon}{@render closeIcon()}{:else}
+                            <IconX class="size-4"/>
+                        {/if}
                     </button>
                 </div>
 
                 <!-- Horizontal quick-select pills -->
-                <div class="flex gap-1.5 px-3 py-2.5 overflow-x-auto border-b border-border-default shrink-0"
+                <div class={styles.pillBar()}
                      style="scrollbar-width:none;-ms-overflow-style:none;">
                     {#each quickRanges as range (range.key)}
                         <button
-                                class={cn(
-                                'shrink-0 px-2.5 py-1 rounded-full text-xs border cursor-pointer whitespace-nowrap',
-                                'transition-colors ease-ui duration-100',
-                                activeQuickSelect === range.key
-                                    ? 'bg-interactive/10 text-interactive border-interactive font-medium'
-                                    : 'border-border-default text-text-secondary hover:border-interactive hover:text-interactive',
-                            )}
+                                class={styles.presetPill({pillActive: activeQuickSelect === range.key})}
                                 onclick={() => applyQuickSelect(range.key)}
                         >
                             {range.label}

package/dist/components/date-range-picker/DateRangePicker.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { DateRangePickerProps } from './DateRangePicker.types.js';
+import { type DateRangePickerProps } from './DateRangePicker.recipe.js';
 declare const DateRangePicker: import("svelte").Component<DateRangePickerProps, {}, "dateRange">;
 type DateRangePicker = ReturnType<typeof DateRangePicker>;
 export default DateRangePicker;

package/dist/components/date-range-picker/index.d.ts

@@ -1,2 +1,3 @@
 export { default as DateRangePicker } from './DateRangePicker.svelte';
-export type { DateRangePickerProps } from './DateRangePicker.types.js';
+export { dateRangePickerRecipe } from './DateRangePicker.recipe.js';
+export type { DateRangePickerProps, DateRangePickerRecipeProps } from './DateRangePicker.recipe.js';

package/dist/components/date-range-picker/index.js

@@ -1 +1,2 @@
 export { default as DateRangePicker } from './DateRangePicker.svelte';
+export { dateRangePickerRecipe } from './DateRangePicker.recipe.js';

package/dist/components/dialog/Dialog.recipe.d.ts

@@ -0,0 +1,229 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Snippet } from "svelte";
+/**
+ * Dialog recipe — the canonical styled layer for the base design language.
+ *
+ * Multi-part component (built on bits-ui Dialog): the recipe is slotted by role
+ * — overlay / content / close / header / body / footer — so an app can restyle
+ * any region independently. The `content` slot carries the visual variants
+ * (size, position, full-screen layout); `padding` tunes the container/body
+ * insets. The hardcoded close glyph is exposed as a `closeIcon` snippet seam.
+ *
+ * Primary customization surface: extend with `tv({ extend: dialogRecipe, ... })`
+ * in typed code. Lighter rung: the per-component CSS var (--tera-dialog-radius)
+ * lets a theme retune corner radius with no code change; it defaults to the
+ * global container-radius token via an inline fallback. See docs/ARCHITECTURE.md
+ * for worked examples (kept out of this JSDoc so the llms doc generator doesn't
+ * grep its tokens).
+ */
+export declare const dialogRecipe: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            content: string;
+        };
+        sm: {
+            content: string;
+        };
+        md: {
+            content: string;
+        };
+        lg: {
+            content: string;
+        };
+        full: {
+            content: string;
+        };
+        auto: {
+            content: string;
+        };
+    };
+    position: {
+        top: {};
+        center: {};
+    };
+    full: {
+        true: {
+            content: string;
+        };
+        false: {
+            content: string;
+        };
+    };
+    padding: {
+        none: {
+            container: string;
+            body: string;
+        };
+        normal: {
+            container: string;
+            body: string;
+        };
+    };
+}, {
+    overlay: string;
+    content: string;
+    close: string;
+    container: string;
+    header: string;
+    body: string;
+    footer: string;
+}, undefined, {
+    size: {
+        xs: {
+            content: string;
+        };
+        sm: {
+            content: string;
+        };
+        md: {
+            content: string;
+        };
+        lg: {
+            content: string;
+        };
+        full: {
+            content: string;
+        };
+        auto: {
+            content: string;
+        };
+    };
+    position: {
+        top: {};
+        center: {};
+    };
+    full: {
+        true: {
+            content: string;
+        };
+        false: {
+            content: string;
+        };
+    };
+    padding: {
+        none: {
+            container: string;
+            body: string;
+        };
+        normal: {
+            container: string;
+            body: string;
+        };
+    };
+}, {
+    overlay: string;
+    content: string;
+    close: string;
+    container: string;
+    header: string;
+    body: string;
+    footer: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            content: string;
+        };
+        sm: {
+            content: string;
+        };
+        md: {
+            content: string;
+        };
+        lg: {
+            content: string;
+        };
+        full: {
+            content: string;
+        };
+        auto: {
+            content: string;
+        };
+    };
+    position: {
+        top: {};
+        center: {};
+    };
+    full: {
+        true: {
+            content: string;
+        };
+        false: {
+            content: string;
+        };
+    };
+    padding: {
+        none: {
+            container: string;
+            body: string;
+        };
+        normal: {
+            container: string;
+            body: string;
+        };
+    };
+}, {
+    overlay: string;
+    content: string;
+    close: string;
+    container: string;
+    header: string;
+    body: string;
+    footer: string;
+}, undefined, unknown, unknown, undefined>>;
+export type DialogRecipeProps = VariantProps<typeof dialogRecipe>;
+/**
+ * @component Dialog - Modal dialog with header/footer snippet slots, size variants, and focus management.
+ * Built on BitsUI Dialog primitive.
+ */
+export type DialogProps = {
+    children?: Snippet;
+    /** Snippet rendered in the dialog header area. */
+    header?: Snippet;
+    /** Snippet rendered in the dialog footer area. */
+    footer?: Snippet;
+    /** Whether the dialog is open. Bindable. */
+    open?: boolean;
+    /** Additional CSS classes for the dialog content panel. */
+    class?: string;
+    /** Controls the maximum width of the dialog panel. */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'full' | 'auto';
+    /** Vertical alignment of the dialog on screen. */
+    position?: 'top' | 'center';
+    /** Set to 'none' to remove internal padding. */
+    padding?: 'none' | undefined;
+    /** Whether clicking the backdrop closes the dialog. */
+    closeOnClickOutside?: boolean;
+    /** Whether pressing the browser Back button closes the dialog. Default true. */
+    closeOnNavigateBack?: boolean;
+    /** Whether to render a close (×) button in the header. */
+    closeButton?: boolean;
+    /** Replace the default close (×) icon with custom markup (structural seam). */
+    closeIcon?: Snippet;
+    /**
+     * When true the dialog DOM is kept alive after close — children preserve
+     * internal state between open/close cycles.
+     */
+    staticRender?: boolean;
+    /** Prevent the page from scrolling while the dialog is open. */
+    preventScroll?: boolean;
+    /** Called after the open or close animation has fully completed.
+     * Note: This callback only fires when the internal component mutates the open state, not when the state is changed by outside)
+     */
+    onOpenChangeComplete?: (open: boolean) => void;
+    /** Element to return focus to when the dialog closes. */
+    triggerRef?: HTMLElement | null;
+    /** Focus triggerRef after close (default true when triggerRef is provided). */
+    focusTriggerAfterClose?: boolean;
+    /** Additional classes applied to the outer container div. */
+    containerClass?: string;
+    /** Additional classes applied to the header region. */
+    headerClass?: string;
+    /** Additional classes applied to the body/content region. */
+    bodyClass?: string;
+    /** Additional classes applied to the footer region. */
+    footerClass?: string;
+    /** Bindable reference to the dialog content element. */
+    ref?: HTMLElement | null;
+    [key: string]: unknown;
+};
+export type DialogPropsAstro = Omit<DialogProps, 'children' | 'open' | 'ref'>;

package/dist/components/dialog/Dialog.recipe.js

@@ -0,0 +1,68 @@
+import { tv } from "tailwind-variants";
+/**
+ * Dialog recipe — the canonical styled layer for the base design language.
+ *
+ * Multi-part component (built on bits-ui Dialog): the recipe is slotted by role
+ * — overlay / content / close / header / body / footer — so an app can restyle
+ * any region independently. The `content` slot carries the visual variants
+ * (size, position, full-screen layout); `padding` tunes the container/body
+ * insets. The hardcoded close glyph is exposed as a `closeIcon` snippet seam.
+ *
+ * Primary customization surface: extend with `tv({ extend: dialogRecipe, ... })`
+ * in typed code. Lighter rung: the per-component CSS var (--tera-dialog-radius)
+ * lets a theme retune corner radius with no code change; it defaults to the
+ * global container-radius token via an inline fallback. See docs/ARCHITECTURE.md
+ * for worked examples (kept out of this JSDoc so the llms doc generator doesn't
+ * grep its tokens).
+ */
+export const dialogRecipe = tv({
+    slots: {
+        overlay: `fixed inset-0 z-50 bg-overlay backdrop-blur-[4px]
+                animate-in fade-in duration-[var(--tera-duration-base)]
+                data-[state=closed]:animate-out data-[state=closed]:fade-out
+                data-[state=closed]:hidden`,
+        content: `fixed z-50 w-full bg-surface shadow-lg border-border-default flex flex-col overflow-hidden
+                animate-in fade-in zoom-in-95 duration-[var(--tera-duration-base)] ease-spring
+                data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95 data-[state=closed]:duration-[var(--tera-duration-base)]`,
+        close: 'absolute right-2 top-2 z-10 size-8 flex items-center justify-center rounded hover:bg-surface-hover text-text-tertiary hover:text-text-primary transition-colors',
+        container: 'grid grid-rows-[auto_1fr_auto] h-full overflow-hidden',
+        header: 'font-display font-bold px-4 mb-2',
+        body: 'overflow-auto',
+        footer: 'mt-3 px-4 flex items-center justify-end gap-2.5',
+    },
+    variants: {
+        size: {
+            xs: { content: 'max-w-[min(24rem,calc(100vw-2rem))]' },
+            sm: { content: 'max-w-[min(30rem,calc(100vw-2rem))]' },
+            md: { content: 'max-w-[min(40rem,calc(100vw-2rem))]' },
+            lg: { content: 'max-w-[min(50rem,calc(100vw-2rem))]' },
+            full: { content: 'max-w-full w-screen rounded-none' },
+            auto: { content: 'w-fit' },
+        },
+        // Position only applies on the non-full layout branch — see compoundVariants.
+        position: {
+            top: {},
+            center: {},
+        },
+        full: {
+            true: { content: 'inset-0 h-screen border-0' },
+            false: { content: 'rounded-[var(--tera-dialog-radius,var(--border-radius-container))] max-h-[min(calc(100svh-2rem),55rem)]' },
+        },
+        padding: {
+            none: { container: 'py-0', body: 'px-0' },
+            normal: { container: 'py-4', body: 'px-4' },
+        },
+    },
+    compoundVariants: [
+        // The original markup only applies positioning on the non-full path; the
+        // full-screen branch relies on `inset-0` instead.
+        { full: false, position: 'top', class: { content: 'top-4 left-1/2 -translate-x-1/2' } },
+        { full: false, position: 'center', class: { content: 'top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2' } },
+    ],
+    defaultVariants: {
+        size: 'sm',
+        position: 'center',
+        full: false,
+        padding: 'normal',
+    },
+});