@makolabs/ripple 3.0.9 → 3.0.11

package/dist/drawer/Drawer.svelte

@@ -12,8 +12,10 @@
 		open = $bindable(false),
 		onclose: onClose = () => {},
 		title,
+		description,
 		position = 'right',
 		size = 'sm',
+		footerAlign,
 		children,
 		header,
 		footer,
@@ -23,6 +25,7 @@
 		headerClass = '',
 		bodyClass = '',
 		titleClass = '',
+		descriptionClass = '',
 		footerClass = '',
 		testId
 	}: DrawerProps = $props();
@@ -37,12 +40,14 @@
 		header: headerVClass,
 		body,
 		footer: footerVClass,
-		title: titleVClass
+		title: titleVClass,
+		description: descriptionVClass
 	} = $derived(
 		drawer({
 			open,
 			position,
-			size
+			size,
+			footerAlign
 		})
 	);
 
@@ -53,6 +58,7 @@
 	const headerClasses = $derived(cn(headerVClass(), headerClass));
 	const bodyClasses = $derived(cn(body(), bodyClass));
 	const titleClasses = $derived(cn(titleVClass(), titleClass));
+	const descriptionClasses = $derived(cn(descriptionVClass(), descriptionClass));
 	const footerClasses = $derived(cn(footerVClass(), 'mt-auto', footerClass));
 
 	function handleBackdropClick(e: MouseEvent) {
@@ -161,6 +167,8 @@
 		role="dialog"
 		aria-modal="true"
 		aria-labelledby={title ? 'drawer-title' : undefined}
+		aria-describedby={description ? 'drawer-description' : undefined}
+		aria-label={!title ? 'Drawer' : undefined}
 	>
 		{#key open}
 			<!-- Backdrop -->
@@ -196,19 +204,32 @@
 					</button>
 
 					<!-- Header -->
-					{#if title}
+					{#if header}
 						<div class={headerClasses}>
-							<h3
-								id="drawer-title"
-								class={titleClasses}
-								data-testid={buildTestId('drawer', 'title', testId)}
-							>
-								{title}
-							</h3>
+							{@render header()}
 						</div>
-					{:else if header}
+					{:else if title || description}
 						<div class={headerClasses}>
-							{@render header()}
+							<div class="flex min-w-0 flex-1 flex-col">
+								{#if title}
+									<h3
+										id="drawer-title"
+										class={titleClasses}
+										data-testid={buildTestId('drawer', 'title', testId)}
+									>
+										{title}
+									</h3>
+								{/if}
+								{#if description}
+									<p
+										id="drawer-description"
+										class={descriptionClasses}
+										data-testid={buildTestId('drawer', 'description', testId)}
+									>
+										{description}
+									</p>
+								{/if}
+							</div>
 						</div>
 					{/if}
 

package/dist/drawer/drawer-types.d.ts

@@ -12,10 +12,8 @@ import type { VariantSizes } from '../index.js';
  * <Drawer bind:open title="Filters" position="right">
  *   <FilterPanel bind:filters />
  *   {#snippet footer()}
- *     <div class="flex justify-end gap-2 p-4">
- *       <Button variant="outline" onclick={() => (open = false)}>Cancel</Button>
- *       <Button onclick={apply}>Apply</Button>
- *     </div>
+ *     <Button variant="outline" onclick={() => (open = false)}>Cancel</Button>
+ *     <Button onclick={apply}>Apply</Button>
  *   {/snippet}
  * </Drawer>
  * ```
@@ -27,6 +25,8 @@ export type DrawerProps = {
     onclose?: () => void;
     /** Header title text. Ignored if a `header` snippet is provided. */
     title?: string;
+    /** Smaller muted line directly below the title. */
+    description?: string;
     /** Side the drawer slides in from. @default 'right' */
     position?: 'left' | 'right';
     /** @default 'sm' */
@@ -48,7 +48,15 @@ export type DrawerProps = {
     children?: Snippet;
     /** Replace the default title bar. */
     header?: Snippet;
-    /** Footer content (usually action buttons). */
+    /**
+     * Footer content — typically action buttons. The footer wrapper renders
+     * with a tinted background, hairline separator, padding, and flex layout
+     * built-in, so the snippet can just contain `<Button>`s directly.
+     */
     footer?: Snippet;
+    /** How to align footer items horizontally. @default 'end' */
+    footerAlign?: 'start' | 'center' | 'end' | 'between';
+    /** Classes on the description element. */
+    descriptionClass?: ClassValue;
     testId?: string;
 };

package/dist/drawer/drawer.d.ts

@@ -1,4 +1,18 @@
 export declare const drawer: import("tailwind-variants").TVReturnType<{
+    footerAlign: {
+        start: {
+            footer: string;
+        };
+        center: {
+            footer: string;
+        };
+        end: {
+            footer: string;
+        };
+        between: {
+            footer: string;
+        };
+    };
     open: {
         true: {
             base: string;
@@ -50,8 +64,23 @@ export declare const drawer: import("tailwind-variants").TVReturnType<{
     body: string;
     footer: string;
     title: string;
+    description: string;
     closeButton: string;
 }, undefined, {
+    footerAlign: {
+        start: {
+            footer: string;
+        };
+        center: {
+            footer: string;
+        };
+        end: {
+            footer: string;
+        };
+        between: {
+            footer: string;
+        };
+    };
     open: {
         true: {
             base: string;
@@ -103,8 +132,23 @@ export declare const drawer: import("tailwind-variants").TVReturnType<{
     body: string;
     footer: string;
     title: string;
+    description: string;
     closeButton: string;
 }, import("tailwind-variants").TVReturnType<{
+    footerAlign: {
+        start: {
+            footer: string;
+        };
+        center: {
+            footer: string;
+        };
+        end: {
+            footer: string;
+        };
+        between: {
+            footer: string;
+        };
+    };
     open: {
         true: {
             base: string;
@@ -156,5 +200,6 @@ export declare const drawer: import("tailwind-variants").TVReturnType<{
     body: string;
     footer: string;
     title: string;
+    description: string;
     closeButton: string;
 }, undefined, unknown, unknown, undefined>>;

package/dist/drawer/drawer.js

@@ -6,13 +6,21 @@ export const drawer = tv({
         backdrop: 'fixed inset-0 transition-opacity bg-black/50',
         contentWrapper: 'absolute flex flex-col transform transition-transform max-w-[100vw]',
         content: 'relative flex flex-col h-full w-full overflow-y-auto bg-white',
-        header: 'flex items-center justify-between px-4 py-3 border-b border-default-200',
-        body: 'flex-1 overflow-y-auto p-4',
-        footer: 'flex justify-end border-t border-default-200 p-4',
-        title: 'text-default-900 leading-6 text-base font-semibold',
+        // Header/footer tinted to match Modal/Card visual language.
+        header: 'flex items-center justify-between gap-3 px-5 py-3 bg-default-100/50 border-b border-default-200',
+        body: 'flex-1 overflow-y-auto p-5 text-sm text-default-700',
+        footer: 'flex flex-wrap items-center gap-3 px-5 py-3 bg-default-100/50 border-t border-default-200',
+        title: 'text-default-900 text-sm font-semibold leading-tight',
+        description: 'text-default-500 text-xs font-normal',
         closeButton: 'text-default-400 hover:text-default-500 rounded-md cursor-pointer'
     },
     variants: {
+        footerAlign: {
+            start: { footer: 'justify-start' },
+            center: { footer: 'justify-center' },
+            end: { footer: 'justify-end' },
+            between: { footer: 'justify-between' }
+        },
         open: {
             true: {
                 base: 'visible',
@@ -76,6 +84,7 @@ export const drawer = tv({
     defaultVariants: {
         open: false,
         position: 'right',
-        size: 'sm'
+        size: 'sm',
+        footerAlign: 'end'
     }
 });

package/dist/funcs/mock-user-management.d.ts

@@ -20,6 +20,7 @@ import type { User, GetUsersOptions, GetUsersResult } from '../index.js';
  */
 export declare function resetState(options?: {
     initialUsers?: User[];
+    initialPendingUsers?: User[];
     simulateDelay?: boolean;
     delayMs?: number;
 }): Promise<void>;
@@ -77,3 +78,42 @@ export declare function generateApiKey(options: {
     apiKey: string;
     message: string;
 }>;
+/**
+ * Verify an API key (mock implementation).
+ * Matches UserManagementAdapter.verifyToken signature.
+ *
+ * The mock only accepts keys that exactly match an existing active user's
+ * `private_metadata.mako_api_key`; unknown/revoked keys are rejected so the
+ * failure UI is reachable.
+ */
+export declare function verifyToken(options: {
+    apiKey: string;
+}): Promise<{
+    valid: boolean;
+    scopes?: string[];
+    error?: string;
+    sub?: string;
+    client_id?: string;
+}>;
+/**
+ * List users awaiting approval (registered in identity provider but not
+ * yet onboarded — no org / no API key).
+ * Matches UserManagementAdapter.getPendingUsers signature.
+ */
+export declare function getPendingUsers(options: GetUsersOptions): Promise<GetUsersResult>;
+/**
+ * Approve a pending user — assigns the chosen role and generates an API key.
+ * Moves the user from the pending list to the active list.
+ * Matches UserManagementAdapter.approveUser signature.
+ */
+export declare function approveUser(input: {
+    userId: string;
+    role: string;
+}): Promise<{
+    apiKey: string;
+}>;
+/**
+ * Reject a pending user — permanently removes them from the identity provider.
+ * Matches UserManagementAdapter.rejectUser signature.
+ */
+export declare function rejectUser(userId: string): Promise<void>;

package/dist/funcs/mock-user-management.js

@@ -16,13 +16,17 @@
  */
 // Internal module-level state
 let mockUsers = [];
+let mockPendingUsers = [];
 let simulateDelay = false;
 let delayMs = 300;
 /**
  * Reset mock adapter state
  */
 export async function resetState(options = {}) {
-    mockUsers = options.initialUsers || [];
+    // Deep-clone fixtures so internal mutations (splice in approveUser/rejectUser)
+    // don't poison caller-owned arrays — keeps tests order-independent.
+    mockUsers = structuredClone(options.initialUsers ?? []);
+    mockPendingUsers = structuredClone(options.initialPendingUsers ?? []);
     simulateDelay = options.simulateDelay ?? false;
     delayMs = options.delayMs ?? 300;
 }
@@ -214,3 +218,83 @@ export async function generateApiKey(options) {
             : 'API key generated successfully'
     };
 }
+/**
+ * Verify an API key (mock implementation).
+ * Matches UserManagementAdapter.verifyToken signature.
+ *
+ * The mock only accepts keys that exactly match an existing active user's
+ * `private_metadata.mako_api_key`; unknown/revoked keys are rejected so the
+ * failure UI is reachable.
+ */
+export async function verifyToken(options) {
+    await delay();
+    const owner = mockUsers.find((u) => u.private_metadata &&
+        typeof u.private_metadata === 'object' &&
+        'mako_api_key' in u.private_metadata &&
+        u.private_metadata.mako_api_key === options.apiKey);
+    if (!owner) {
+        return {
+            valid: false,
+            error: 'API key has been revoked or is malformed'
+        };
+    }
+    // Real Mako Auth returns `sub` as the user's email — mirror that here so
+    // downstream code that key-lookups by email behaves identically.
+    return {
+        valid: true,
+        sub: owner.email_addresses?.[0]?.email_address ?? owner.id,
+        client_id: 'mock-client',
+        scopes: owner.permissions ?? []
+    };
+}
+/**
+ * List users awaiting approval (registered in identity provider but not
+ * yet onboarded — no org / no API key).
+ * Matches UserManagementAdapter.getPendingUsers signature.
+ */
+export async function getPendingUsers(options) {
+    await delay();
+    const start = (options.page - 1) * options.pageSize;
+    const end = start + options.pageSize;
+    return {
+        users: mockPendingUsers.slice(start, end),
+        totalUsers: mockPendingUsers.length
+    };
+}
+/**
+ * Approve a pending user — assigns the chosen role and generates an API key.
+ * Moves the user from the pending list to the active list.
+ * Matches UserManagementAdapter.approveUser signature.
+ */
+export async function approveUser(input) {
+    await delay();
+    // Fail fast on empty role — no key minted, no state mutation.
+    if (!input.role?.trim()) {
+        throw new Error('Role is required to approve a user');
+    }
+    const idx = mockPendingUsers.findIndex((u) => u.id === input.userId);
+    if (idx === -1) {
+        throw new Error(`Pending user ${input.userId} not found`);
+    }
+    const user = mockPendingUsers[idx];
+    const apiKey = `mock_api_key_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+    mockPendingUsers.splice(idx, 1);
+    mockUsers.push({
+        ...user,
+        role: input.role,
+        private_metadata: { ...(user.private_metadata || {}), mako_api_key: apiKey }
+    });
+    return { apiKey };
+}
+/**
+ * Reject a pending user — permanently removes them from the identity provider.
+ * Matches UserManagementAdapter.rejectUser signature.
+ */
+export async function rejectUser(userId) {
+    await delay();
+    const idx = mockPendingUsers.findIndex((u) => u.id === userId);
+    if (idx === -1) {
+        throw new Error(`Pending user ${userId} not found`);
+    }
+    mockPendingUsers.splice(idx, 1);
+}

package/dist/index.d.ts

@@ -60,12 +60,11 @@ export type { StepperProps, StepperStep, StepState, StepperOrientation } from '.
 export type { ActivityItemBadge, ActivityItemAction, ActivityItem, ActivityListProps, ActivityListSize } from './layout/activity-list/activity-list-types.js';
 export type { FileUploadProps, FileUploadSize, FilePreviewProps, UploadedFile, StagedFile } from './elements/file-upload/file-upload-types.js';
 export type { ChatMessageType, StreamingCallback, ChatAction, ChatMessage, ChatResponse, QuickAction, FileBrowserProps } from './ai/ai-types.js';
-export type { GetUsersOptions, GetUsersResult, UserEmail, UserPhone, User, Permission, Role, UserTableProps, UserModalProps, UserModalSavePayload, UserViewModalProps, UserManagementAdapter, UserManagementProps, FormErrors } from './user-management/user-management-types.js';
+export type { GetUsersOptions, GetUsersResult, UserEmail, UserPhone, User, Permission, Role, UserTableProps, UserModalProps, UserModalSavePayload, UserViewModalProps, UserApproveModalProps, UserManagementAdapter, UserManagementProps, FormErrors } from './user-management/user-management-types.js';
 export { tv, cn } from './helper/cls.js';
 export { isRouteActive } from './helper/nav.svelte.js';
 export { default as Button } from './button/Button.svelte';
 export { default as Modal } from './modal/Modal.svelte';
-export { default as ModalFooter } from './modal/ModalFooter.svelte';
 export { default as ConfirmDialog } from './modal/ConfirmDialog.svelte';
 export { default as Pipeline } from './pipeline/Pipeline.svelte';
 export { pipelineVariants } from './pipeline/pipeline.js';
@@ -149,3 +148,7 @@ export { default as UserManagement } from './user-management/UserManagement.svel
 export { default as UserTable } from './user-management/UserTable.svelte';
 export { default as UserModal } from './user-management/UserModal.svelte';
 export { default as UserViewModal } from './user-management/UserViewModal.svelte';
+export { default as UserApproveModal } from './user-management/UserApproveModal.svelte';
+export { default as RoleCard } from './user-management/RoleCard.svelte';
+export { default as ApiKeyField } from './user-management/ApiKeyField.svelte';
+export { default as UserIdentityCard } from './user-management/UserIdentityCard.svelte';

package/dist/index.js

@@ -25,7 +25,6 @@ export { isRouteActive } from './helper/nav.svelte.js';
 export { default as Button } from './button/Button.svelte';
 // Modal
 export { default as Modal } from './modal/Modal.svelte';
-export { default as ModalFooter } from './modal/ModalFooter.svelte';
 export { default as ConfirmDialog } from './modal/ConfirmDialog.svelte';
 // Pipeline
 export { default as Pipeline } from './pipeline/Pipeline.svelte';
@@ -154,3 +153,7 @@ export { default as UserManagement } from './user-management/UserManagement.svel
 export { default as UserTable } from './user-management/UserTable.svelte';
 export { default as UserModal } from './user-management/UserModal.svelte';
 export { default as UserViewModal } from './user-management/UserViewModal.svelte';
+export { default as UserApproveModal } from './user-management/UserApproveModal.svelte';
+export { default as RoleCard } from './user-management/RoleCard.svelte';
+export { default as ApiKeyField } from './user-management/ApiKeyField.svelte';
+export { default as UserIdentityCard } from './user-management/UserIdentityCard.svelte';

package/dist/modal/ConfirmDialog.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import Modal from './Modal.svelte';
-	import ModalFooter from './ModalFooter.svelte';
 	import Button from '../button/Button.svelte';
 	import type { ConfirmDialogProps } from './confirm-dialog-types.js';
 	import { Color } from '../variants.js';
@@ -53,13 +52,11 @@
 	</div>
 
 	{#snippet footer()}
-		<ModalFooter align="end">
-			<Button variant="outline" onclick={handleCancel} disabled={busy}>
-				{cancelLabel}
-			</Button>
-			<Button color={confirmColor} onclick={handleConfirm} loading={busy}>
-				{confirmLabel}
-			</Button>
-		</ModalFooter>
+		<Button variant="outline" onclick={handleCancel} disabled={busy}>
+			{cancelLabel}
+		</Button>
+		<Button color={confirmColor} onclick={handleConfirm} loading={busy}>
+			{confirmLabel}
+		</Button>
 	{/snippet}
 </Modal>

package/dist/modal/Modal.svelte

@@ -14,6 +14,7 @@
 		title,
 		description,
 		size,
+		footerAlign,
 		hideCloseButton = false,
 		class: className = '',
 		contentClass = '',
@@ -30,25 +31,17 @@
 
 	let modalElement: HTMLDivElement | undefined = $state();
 
-	const styles = $derived(modal({ size }));
+	const styles = $derived(modal({ size, footerAlign }));
 
 	const baseClass = $derived(cn(styles.base(), className));
 	const backdropClasses = $derived(cn(styles.backdrop(), backdropClass));
 	const containerClass = $derived(cn(styles.container(), contentClass));
 	const headerClasses = $derived(cn(styles.header(), headerClass));
 	const titleClasses = $derived(cn(styles.title(), titleClass));
-	const bodyClasses = $derived(
-		cn(
-			'flex-1 px-6 overflow-y-auto',
-			// Adjust top padding based on header presence
-			title || description ? 'py-4' : 'pt-6 pb-4',
-			bodyClass
-		)
-	);
+	const bodyClasses = $derived(cn(styles.body(), bodyClass));
 	const footerClasses = $derived(cn(styles.footer(), footerClass));
 	const closeClass = $derived(cn(styles.close(), ''));
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	const descriptionClass = $derived(cn(styles.description(), ''));
+	const descriptionClasses = $derived(cn(styles.description(), ''));
 
 	function handleBackdropClick() {
 		onclose();
@@ -131,15 +124,24 @@
 {#snippet predefinedHeader()}
 	{#if title || description}
 		<header class={headerClasses}>
-			<div class="flex-1">
+			<div class="flex min-w-0 flex-1 flex-col">
 				{#if title}
-					<h2
+					<h3
 						id="modal-title"
 						class={titleClasses}
 						data-testid={buildTestId('modal', 'title', testId)}
 					>
 						{title}
-					</h2>
+					</h3>
+				{/if}
+				{#if description}
+					<p
+						id="modal-description"
+						class={descriptionClasses}
+						data-testid={buildTestId('modal', 'description', testId)}
+					>
+						{description}
+					</p>
 				{/if}
 			</div>
 			{#if !hideCloseButton}
@@ -190,6 +192,8 @@
 		role="dialog"
 		aria-modal="true"
 		aria-labelledby={title ? 'modal-title' : undefined}
+		aria-describedby={description ? 'modal-description' : undefined}
+		aria-label={!title ? 'Modal dialog' : undefined}
 		bind:this={modalElement}
 	>
 		<!-- Backdrop -->

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

@@ -12,10 +12,8 @@ import type { VariantSizes } from '../index.js';
  * <Modal bind:open title="Edit profile">
  *   <ProfileForm />
  *   {#snippet footer()}
- *     <ModalFooter align="end">
- *       <Button variant="outline" onclick={() => (open = false)}>Cancel</Button>
- *       <Button onclick={save}>Save</Button>
- *     </ModalFooter>
+ *     <Button variant="outline" onclick={() => (open = false)}>Cancel</Button>
+ *     <Button onclick={save}>Save</Button>
  *   {/snippet}
  * </Modal>
  * ```
@@ -65,8 +63,14 @@ export type ModalProps = {
     footerClass?: ClassValue;
     /** Body content. */
     children?: Snippet;
-    /** Footer content — usually `<ModalFooter>` with action buttons. */
+    /**
+     * Footer content — typically action buttons. The footer wrapper renders
+     * with a tinted background, hairline separator, padding, and flex layout
+     * built-in, so the snippet can just contain `<Button>`s directly.
+     */
     footer?: Snippet;
+    /** How to align footer items horizontally. @default 'end' */
+    footerAlign?: 'start' | 'center' | 'end' | 'between';
     /** Replace the default title bar entirely. */
     header?: Snippet;
     testId?: string;

package/dist/modal/modal.d.ts

@@ -1,4 +1,18 @@
 export declare const modal: import("tailwind-variants").TVReturnType<{
+    footerAlign: {
+        start: {
+            footer: string;
+        };
+        center: {
+            footer: string;
+        };
+        end: {
+            footer: string;
+        };
+        between: {
+            footer: string;
+        };
+    };
     size: {
         xs: {
             container: string;
@@ -30,6 +44,20 @@ export declare const modal: import("tailwind-variants").TVReturnType<{
     description: string;
     close: string;
 }, undefined, {
+    footerAlign: {
+        start: {
+            footer: string;
+        };
+        center: {
+            footer: string;
+        };
+        end: {
+            footer: string;
+        };
+        between: {
+            footer: string;
+        };
+    };
     size: {
         xs: {
             container: string;
@@ -61,6 +89,20 @@ export declare const modal: import("tailwind-variants").TVReturnType<{
     description: string;
     close: string;
 }, import("tailwind-variants").TVReturnType<{
+    footerAlign: {
+        start: {
+            footer: string;
+        };
+        center: {
+            footer: string;
+        };
+        end: {
+            footer: string;
+        };
+        between: {
+            footer: string;
+        };
+    };
     size: {
         xs: {
             container: string;

package/dist/modal/modal.js

@@ -4,15 +4,24 @@ export const modal = tv({
     slots: {
         base: 'fixed inset-0 z-50 flex items-center justify-center p-2 sm:p-4',
         backdrop: 'fixed inset-0 bg-black/50 backdrop-blur-sm',
-        container: 'relative w-full flex flex-col bg-white rounded-xl shadow-2xl max-sm:max-w-none max-sm:max-h-[95vh]',
-        header: 'px-4 py-3 sm:px-6 sm:py-4 border-b border-default-200 flex items-center justify-between shrink-0',
-        body: 'flex-1 px-4 py-3 sm:px-6 sm:py-4 overflow-y-auto',
-        footer: 'bg-default-50/80 rounded-b-xl shrink-0',
-        title: 'text-lg font-semibold text-default-900',
-        description: 'text-sm text-default-600 mt-1',
-        close: 'p-2 -mr-2 ml-4 rounded-lg text-default-400 cursor-pointer hover:text-default-600 hover:bg-default-100 transition-colors'
+        container: 'relative w-full flex flex-col bg-white rounded-lg shadow-2xl max-sm:max-w-none max-sm:max-h-[95vh]',
+        // Header: matches Card chrome — translucent bg-default-100/50 tint + hairline
+        // separator. Padding sits between Card md and lg: dialogs deserve a touch
+        // more presence than inline panels but stay compact relative to legacy modal.
+        header: 'px-5 py-3 bg-default-100/50 border-b border-default-200 flex items-center justify-between shrink-0',
+        body: 'flex-1 p-5 overflow-y-auto text-sm text-default-700',
+        footer: 'bg-default-100/50 border-t border-default-200 rounded-b-lg shrink-0 flex flex-wrap items-center gap-3 px-5 py-3',
+        title: 'text-sm font-semibold text-default-900 leading-tight',
+        description: 'text-xs text-default-500 font-normal',
+        close: 'p-1.5 -mr-1.5 ml-4 rounded-md text-default-400 cursor-pointer hover:text-default-600 hover:bg-default-200/70 transition-colors'
     },
     variants: {
+        footerAlign: {
+            start: { footer: 'justify-start' },
+            center: { footer: 'justify-center' },
+            end: { footer: 'justify-end' },
+            between: { footer: 'justify-between' }
+        },
         size: {
             [Size.XS]: {
                 container: 'max-w-xs max-h-[80vh]'
@@ -35,6 +44,7 @@ export const modal = tv({
         }
     },
     defaultVariants: {
-        size: Size.MD
+        size: Size.MD,
+        footerAlign: 'end'
     }
 });