@ankhorage/zora 2.8.6 → 2.9.0

package/src/foundation/Center.tsx

@@ -9,7 +9,12 @@ import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
 
 export interface CenterProps extends ZoraBaseProps, Omit<SurfaceCenterProps, 'mode' | 'themeId'> {}
 
-function CenterInner({ themeId: _themeId, mode: _mode, ...props }: CenterProps) {
+function CenterInner({
+  themeId: _themeId,
+  mode: _mode,
+  interactionPolicy: _interactionPolicy,
+  ...props
+}: CenterProps) {
   return <SurfaceCenter {...props} />;
 }
 

package/src/foundation/Container.tsx

@@ -10,7 +10,12 @@ import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
 export interface ContainerProps
   extends ZoraBaseProps, Omit<SurfaceContainerProps, 'mode' | 'themeId'> {}
 
-function ContainerInner({ themeId: _themeId, mode: _mode, ...props }: ContainerProps) {
+function ContainerInner({
+  themeId: _themeId,
+  mode: _mode,
+  interactionPolicy: _interactionPolicy,
+  ...props
+}: ContainerProps) {
   return <SurfaceContainer {...props} />;
 }
 

package/src/foundation/Divider.tsx

@@ -10,7 +10,12 @@ import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
 export interface DividerProps
   extends ZoraBaseProps, Omit<SurfaceDividerProps, 'mode' | 'themeId'> {}
 
-function DividerInner({ themeId: _themeId, mode: _mode, ...props }: DividerProps) {
+function DividerInner({
+  themeId: _themeId,
+  mode: _mode,
+  interactionPolicy: _interactionPolicy,
+  ...props
+}: DividerProps) {
   return <SurfaceDivider {...props} />;
 }
 

package/src/foundation/Grid.tsx

@@ -6,7 +6,12 @@ import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
 
 export interface GridProps extends ZoraBaseProps, Omit<SurfaceGridProps, 'mode' | 'themeId'> {}
 
-function GridInner({ themeId: _themeId, mode: _mode, ...props }: GridProps) {
+function GridInner({
+  themeId: _themeId,
+  mode: _mode,
+  interactionPolicy: _interactionPolicy,
+  ...props
+}: GridProps) {
   return <SurfaceGrid {...props} />;
 }
 

package/src/foundation/Inline.tsx

@@ -9,7 +9,12 @@ import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
 
 export interface InlineProps extends ZoraBaseProps, Omit<SurfaceInlineProps, 'mode' | 'themeId'> {}
 
-function InlineInner({ themeId: _themeId, mode: _mode, ...props }: InlineProps) {
+function InlineInner({
+  themeId: _themeId,
+  mode: _mode,
+  interactionPolicy: _interactionPolicy,
+  ...props
+}: InlineProps) {
   return <SurfaceInline {...props} />;
 }
 

package/src/foundation/Show.tsx

@@ -6,7 +6,12 @@ import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
 
 export interface ShowProps extends ZoraBaseProps, Omit<SurfaceShowProps, 'mode' | 'themeId'> {}
 
-function ShowInner({ themeId: _themeId, mode: _mode, ...props }: ShowProps) {
+function ShowInner({
+  themeId: _themeId,
+  mode: _mode,
+  interactionPolicy: _interactionPolicy,
+  ...props
+}: ShowProps) {
   return <SurfaceShow {...props} />;
 }
 

package/src/foundation/Spacer.tsx

@@ -9,7 +9,12 @@ import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
 
 export interface SpacerProps extends ZoraBaseProps, Omit<SurfaceSpacerProps, 'mode' | 'themeId'> {}
 
-function SpacerInner({ themeId: _themeId, mode: _mode, ...props }: SpacerProps) {
+function SpacerInner({
+  themeId: _themeId,
+  mode: _mode,
+  interactionPolicy: _interactionPolicy,
+  ...props
+}: SpacerProps) {
   return <SurfaceSpacer {...props} />;
 }
 

package/src/foundation/Stack.tsx

@@ -6,7 +6,12 @@ import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
 
 export interface StackProps extends ZoraBaseProps, Omit<SurfaceStackProps, 'mode' | 'themeId'> {}
 
-function StackInner({ themeId: _themeId, mode: _mode, ...props }: StackProps) {
+function StackInner({
+  themeId: _themeId,
+  mode: _mode,
+  interactionPolicy: _interactionPolicy,
+  ...props
+}: StackProps) {
   return <SurfaceStack {...props} />;
 }
 

package/src/foundation/Surface.tsx

@@ -13,7 +13,12 @@ export type { SurfaceVariant };
 export interface SurfaceProps
   extends ZoraBaseProps, Omit<SurfaceSurfaceProps, 'mode' | 'themeId'> {}
 
-function SurfaceInner({ themeId: _themeId, mode: _mode, ...props }: SurfaceProps) {
+function SurfaceInner({
+  themeId: _themeId,
+  mode: _mode,
+  interactionPolicy: _interactionPolicy,
+  ...props
+}: SurfaceProps) {
   return <SurfaceSurface {...props} />;
 }
 

package/src/interactionPolicy.test.ts

@@ -0,0 +1,226 @@
+/**
+ * Interaction policy regression guards.
+ *
+ * These tests verify that internally owned interactions respect the passive
+ * policy returned by the canonical Surface type.  They use static source
+ * inspection so they run fast and do not require a renderer.
+ */
+
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+import { describe, expect, test } from 'bun:test';
+
+const ROOT = join(import.meta.dir, '..');
+const SRC_ROOT = join(ROOT, 'src');
+
+function readSource(relativePath: string): string {
+  return readFileSync(join(SRC_ROOT, relativePath), 'utf8');
+}
+
+function readComponent(...segments: string[]): string {
+  return readSource(join('components', ...segments));
+}
+
+function readPattern(...segments: string[]): string {
+  return readSource(join('patterns', ...segments));
+}
+
+describe('InteractionPolicy declaration', () => {
+  test('ZoraBaseProps uses the canonical Surface type', () => {
+    const source = readSource('theme/ZoraBaseProps.ts');
+
+    expect(source).toContain("import type { InteractionPolicy } from '@ankhorage/surface';");
+    expect(source).toContain('interactionPolicy?: InteractionPolicy;');
+  });
+
+  test('no duplicate local InteractionPolicy type declarations in ZORA source', () => {
+    const files = [
+      readSource('theme/ZoraBaseProps.ts'),
+      readComponent('app-bar', 'types.ts'),
+      readComponent('breadcrumbs', 'types.ts'),
+      readPattern('empty-state', 'types.ts'),
+      readPattern('hero', 'types.ts'),
+      readPattern('product-card', 'types.ts'),
+      readPattern('scanner', 'types.ts'),
+      readPattern('zora-tab-bar', 'types.ts'),
+      readComponent('select', 'types.ts'),
+      readPattern('tree-view', 'types.ts'),
+    ];
+
+    for (const source of files) {
+      expect(source).not.toMatch(/interface.*InteractionPolicy|type\s+InteractionPolicy/);
+    }
+  });
+
+  test('registry contract is compile-time only', () => {
+    const registrySource = readSource('registry.ts');
+
+    expect(registrySource).not.toMatch(/type\s+InteractionPolicy/);
+    expect(registrySource).toContain(
+      "import type { InteractionPolicyProps } from '@ankhorage/surface';",
+    );
+    expect(registrySource).toMatch(/type\s+AcceptsSurfaceInteractionPolicyProps/);
+  });
+});
+
+describe('Surface wrapper propagation', () => {
+  test('foundation Surface forwards interactionPolicy to Surface', () => {
+    const source = readSource('foundation/Surface.tsx');
+
+    expect(source).toContain('interactionPolicy: _interactionPolicy,');
+    expect(source).toContain('<SurfaceSurface');
+  });
+});
+
+describe('AppBar', () => {
+  test('forwards interactionPolicy to internal IconButtons', () => {
+    const source = readComponent('app-bar', 'AppBar.tsx');
+
+    expect(source).not.toMatch(/interactionPolicy:\s*_interactionPolicy/);
+    expect(source).toMatch(
+      /<IconButton[\s\S]*?interactionPolicy=\{interactionPolicy\}[\s\S]*?onPress=\{resolvedMode\.onCancel\}/,
+    );
+    expect(source).toMatch(
+      /<IconButton[\s\S]*?interactionPolicy=\{interactionPolicy\}[\s\S]*?onPress=\{overflow\.onPress\}/,
+    );
+  });
+});
+
+describe('Breadcrumbs', () => {
+  test('forwards interactionPolicy to internal Buttons', () => {
+    const source = readComponent('breadcrumbs', 'Breadcrumbs.tsx');
+
+    expect(source).not.toMatch(/interactionPolicy:\s*_interactionPolicy/);
+    expect(source).toMatch(
+      /<Button[\s\S]*?interactionPolicy=\{interactionPolicy\}[\s\S]*?onPress=\{item\.onPress\}/,
+    );
+  });
+});
+
+describe('EmptyState', () => {
+  test('forwards interactionPolicy to Card and internal Buttons', () => {
+    const source = readPattern('empty-state', 'EmptyState.tsx');
+
+    expect(source).not.toMatch(/interactionPolicy:\s*_interactionPolicy/);
+    expect(source).toMatch(/<Card[\s\S]*?interactionPolicy=\{interactionPolicy\}/);
+    expect(source).toMatch(
+      /<Button[\s\S]*?interactionPolicy=\{interactionPolicy\}[\s\S]*?variant=\{primaryAction\.variant\}/,
+    );
+    expect(source).toMatch(
+      /<Button[\s\S]*?interactionPolicy=\{interactionPolicy\}[\s\S]*?variant=\{secondaryAction\.variant/,
+    );
+  });
+});
+
+describe('Hero', () => {
+  test('forwards interactionPolicy to Card', () => {
+    const source = readPattern('hero', 'Hero.tsx');
+
+    expect(source).not.toMatch(/interactionPolicy:\s*_interactionPolicy/);
+    expect(source).toMatch(/<Card[\s\S]*?interactionPolicy=\{interactionPolicy\}/);
+  });
+
+  test('passes interactionPolicy through renderAction to internal Buttons', () => {
+    const source = readPattern('hero', 'Hero.tsx');
+
+    expect(source).toMatch(
+      /function renderAction\([\s\S]*?interactionPolicy: HeroProps\['interactionPolicy'\]/,
+    );
+    expect(source).toMatch(
+      /<Button[\s\S]*?interactionPolicy=\{interactionPolicy\}[\s\S]*?variant=\{action\.variant/,
+    );
+  });
+});
+
+describe('ProductCard', () => {
+  test('types extend ZoraBaseProps instead of duplicating InteractionPolicy', () => {
+    const source = readPattern('product-card', 'types.ts');
+
+    expect(source).not.toMatch(
+      /import type \{\s*InteractionPolicy\s*\} from '@ankhorage\/surface';/,
+    );
+    expect(source).toMatch(/export interface ProductCardProps extends ZoraBaseProps/);
+    expect(source).not.toMatch(/interactionPolicy\?: InteractionPolicy;/);
+  });
+
+  test('forwards interactionPolicy to internal Buttons', () => {
+    const source = readPattern('product-card', 'ProductCard.tsx');
+
+    expect(source).toMatch(
+      /<Button[\s\S]*?interactionPolicy=\{interactionPolicy\}[\s\S]*?onPress=\{onPrimaryAction/,
+    );
+    expect(source).toMatch(
+      /<Button[\s\S]*?interactionPolicy=\{interactionPolicy\}[\s\S]*?onPress=\{onSecondaryAction/,
+    );
+  });
+});
+
+describe('CameraPermissionView', () => {
+  test('forwards interactionPolicy to internal Buttons after prop spreads', () => {
+    const source = readPattern('scanner', 'CameraPermissionView.tsx');
+
+    expect(source).toMatch(
+      /<Button[\s\S]*?\{\s*\.\.\.requestButtonProps\s*\}[\s\S]*?interactionPolicy=\{interactionPolicy\}/,
+    );
+    expect(source).toMatch(
+      /<Button[\s\S]*?\{\s*\.\.\.manualEntryButtonProps\s*\}[\s\S]*?interactionPolicy=\{interactionPolicy\}/,
+    );
+  });
+});
+
+describe('BarcodeScannerView', () => {
+  test('passes interactionPolicy to CameraPermissionView in non-granted states', () => {
+    const source = readPattern('scanner', 'BarcodeScannerView.tsx');
+
+    expect(source).toMatch(/<CameraPermissionView[\s\S]*?interactionPolicy=\{interactionPolicy\}/);
+  });
+});
+
+describe('ZoraTabBar', () => {
+  test('does not discard interactionPolicy', () => {
+    const source = readPattern('zora-tab-bar', 'ZoraTabBar.tsx');
+
+    expect(source).not.toMatch(/interactionPolicy:\s*_interactionPolicy/);
+  });
+
+  test('prevents navigation under passive without disabled semantics', () => {
+    const source = readPattern('zora-tab-bar', 'ZoraTabBar.tsx');
+
+    expect(source).toMatch(/onPress=\{[\s\S]*?interactionPolicy === 'passive'\s*\?\s*undefined/);
+    expect(source).not.toMatch(/disabled:\s*interactionPolicy === 'passive'/);
+    expect(source).not.toMatch(/accessibilityState.*disabled.*interactionPolicy === 'passive'/);
+  });
+});
+
+describe('Select', () => {
+  test('keeps Picker enabled controlled only by real disabled prop', () => {
+    const source = readComponent('select', 'Select.tsx');
+
+    expect(source).toMatch(/enabled=\{!disabled\}/);
+  });
+
+  test('prevents pointer/touch interaction with Picker subtree while passive', () => {
+    const source = readComponent('select', 'Select.tsx');
+
+    expect(source).toMatch(/pointerEvents=\{passive \? 'none' : 'auto'\}/);
+    expect(source).toMatch(
+      /onValueChange=\{\s*\(\s*itemValue\s*\)\s*=>\s*\{\s*if\s*\(\s*!passive\s*\)/,
+    );
+  });
+});
+
+describe('TreeItem', () => {
+  test('accepts and forwards interactionPolicy to owned and recursive controls', () => {
+    const source = readPattern('tree-view', 'TreeItem.tsx');
+
+    expect(source).toMatch(/interface TreeItemProps[\s\S]*?extends ZoraBaseProps/);
+    expect(source).toMatch(/function TreeItemInner[\s\S]*?interactionPolicy,/);
+    expect(source).toMatch(
+      /<IconButton[\s\S]*?interactionPolicy=\{interactionPolicy\}[\s\S]*?onPress=\{\(\) => onToggleExpand\(node\.id\)\}/,
+    );
+    expect(source).toMatch(
+      /node\.children\?\.map[\s\S]*?<TreeItem[\s\S]*?interactionPolicy=\{interactionPolicy\}[\s\S]*?node=\{child\}/,
+    );
+  });
+});

package/src/layout/app-shell/AppShell.tsx

@@ -8,6 +8,7 @@ import type { AppShellProps } from './types';
 function AppShellInner({
   themeId: _themeId,
   mode: _mode,
+  interactionPolicy: _interactionPolicy,
   children,
   header,
   footer,

package/src/layout/screen/Screen.tsx

@@ -9,6 +9,7 @@ import type { ScreenProps } from './types';
 function ScreenInner({
   themeId: _themeId,
   mode: _mode,
+  interactionPolicy: _interactionPolicy,
   children,
   footer,
   scroll = true,

package/src/layout/screen-section/ScreenSection.tsx

@@ -8,6 +8,7 @@ import type { ScreenSectionProps } from './types';
 function ScreenSectionInner({
   themeId: _themeId,
   mode: _mode,
+  interactionPolicy: _interactionPolicy,
   title,
   description,
   actions,

package/src/layout/settings-layout/SettingsLayout.tsx

@@ -9,6 +9,7 @@ import type { SettingsLayoutProps } from './types';
 function SettingsLayoutInner({
   themeId: _themeId,
   mode: _mode,
+  interactionPolicy: _interactionPolicy,
   title,
   description,
   sidebar,

package/src/layout/sidebar-layout/SidebarLayout.tsx

@@ -7,6 +7,7 @@ import type { SidebarLayoutProps } from './types';
 function SidebarLayoutInner({
   themeId: _themeId,
   mode: _mode,
+  interactionPolicy: _interactionPolicy,
   sidebar,
   children,
   aside,

package/src/layout/topbar-layout/TopbarLayout.tsx

@@ -8,6 +8,7 @@ import type { TopbarLayoutProps } from './types';
 function TopbarLayoutInner({
   themeId: _themeId,
   mode: _mode,
+  interactionPolicy: _interactionPolicy,
   topbar,
   children,
   sidebar,

package/src/patterns/auth/ForgotPasswordForm.tsx

@@ -18,6 +18,7 @@ type ForgotPasswordFieldName = 'identifier';
 function ForgotPasswordFormInner({
   themeId: _themeId,
   mode: _mode,
+  interactionPolicy,
   identifiers = defaultIdentifiers,
   identifierLabel,
   signInLabel = 'Sign in',
@@ -67,6 +68,7 @@ function ForgotPasswordFormInner({
               }}
               size="s"
               color="neutral"
+              interactionPolicy={interactionPolicy}
             >
               {signInLabel}
             </Button>
@@ -76,6 +78,7 @@ function ForgotPasswordFormInner({
       disabled={disabled}
       error={error}
       fields={fields}
+      interactionPolicy={interactionPolicy}
       loading={loading}
       onChange={setValues}
       onSubmit={handleSubmit}

package/src/patterns/auth/OAuthProviderButton.tsx

@@ -8,6 +8,7 @@ import type { OAuthProviderButtonProps } from './types';
 function OAuthProviderButtonInner({
   themeId: _themeId,
   mode: _mode,
+  interactionPolicy,
   providerId,
   label,
   icon,
@@ -28,6 +29,7 @@ function OAuthProviderButtonInner({
       color={color}
       disabled={disabled || loading || onPress === undefined}
       fullWidth={fullWidth}
+      interactionPolicy={interactionPolicy}
       leadingIcon={resolvedIcon}
       loading={loading}
       onPress={() => {

package/src/patterns/auth/OAuthProviderList.tsx

@@ -8,6 +8,7 @@ import type { OAuthProviderListProps } from './types';
 function OAuthProviderListInner({
   themeId: _themeId,
   mode: _mode,
+  interactionPolicy,
   providers,
   disabled = false,
   loading = false,
@@ -42,6 +43,7 @@ function OAuthProviderListInner({
           providerId={provider.id}
           size={size}
           variant={variant}
+          interactionPolicy={interactionPolicy}
         />
       ))}
     </Stack>

package/src/patterns/auth/OtpForm.tsx

@@ -11,6 +11,7 @@ type OtpFieldName = 'otp';
 function OtpFormInner({
   themeId: _themeId,
   mode: _mode,
+  interactionPolicy,
   length = 6,
   otpLabel = 'Code',
   resendLabel = 'Resend code',
@@ -63,6 +64,7 @@ function OtpFormInner({
               }}
               size="s"
               color="neutral"
+              interactionPolicy={interactionPolicy}
             >
               {resendLabel}
             </Button>
@@ -72,6 +74,7 @@ function OtpFormInner({
       disabled={disabled}
       error={error}
       fields={fields}
+      interactionPolicy={interactionPolicy}
       loading={loading}
       onChange={setValues}
       onSubmit={handleSubmit}

package/src/patterns/auth/SignInForm.tsx

@@ -17,6 +17,7 @@ type SignInFieldName = 'identifier' | 'secret';
 
 function SignInFormInner({
   themeId: _themeId,
+  interactionPolicy,
   mode: _mode,
   identifiers = defaultIdentifiers,
   identifierLabel,
@@ -80,6 +81,7 @@ function SignInFormInner({
                 }}
                 size="s"
                 color="neutral"
+                interactionPolicy={interactionPolicy}
               >
                 {forgotPasswordLabel}
               </Button>
@@ -93,6 +95,7 @@ function SignInFormInner({
                 }}
                 size="s"
                 color="neutral"
+                interactionPolicy={interactionPolicy}
               >
                 {signUpLabel}
               </Button>
@@ -103,6 +106,7 @@ function SignInFormInner({
       disabled={disabled}
       error={error}
       fields={fields}
+      interactionPolicy={interactionPolicy}
       loading={loading}
       onChange={setValues}
       onSubmit={handleSubmit}

package/src/patterns/auth/SignUpForm.tsx

@@ -33,6 +33,7 @@ function createValues(fields: readonly FormFieldConfig[]): FormValues {
 
 function SignUpFormInner({
   themeId: _themeId,
+  interactionPolicy,
   mode: _mode,
   fields = defaultSignUpFields,
   signInLabel = 'Sign in',
@@ -59,6 +60,7 @@ function SignUpFormInner({
               }}
               size="s"
               color="neutral"
+              interactionPolicy={interactionPolicy}
             >
               {signInLabel}
             </Button>
@@ -68,6 +70,7 @@ function SignUpFormInner({
       disabled={disabled}
       error={error}
       fields={fields}
+      interactionPolicy={interactionPolicy}
       loading={loading}
       onChange={setValues}
       onSubmit={onSubmit}

package/src/patterns/chat-list-item/ChatListItem.tsx

@@ -71,6 +71,7 @@ function renderUnreadCount(unreadCount: React.ReactNode) {
 function ChatListItemInner({
   themeId: _themeId,
   mode: _mode,
+  interactionPolicy,
   testID,
   title,
   preview,
@@ -203,6 +204,7 @@ function ChatListItemInner({
       accessibilityRole="button"
       accessibilityState={{ disabled, selected }}
       disabled={disabled}
+      interactionPolicy={interactionPolicy}
       onPress={onPress}
       radius="m"
       testID={testID}

package/src/patterns/collection-editor/CollectionEditor.tsx

@@ -22,6 +22,7 @@ function CollectionEditorInner<TItem>({
   emptyLabel = 'No items yet.',
   disabled,
   testID,
+  interactionPolicy,
 }: CollectionEditorProps<TItem>) {
   const isEmpty = items.length === 0;
 
@@ -29,11 +30,18 @@ function CollectionEditorInner<TItem>({
     <Panel
       compact
       description={description}
+      interactionPolicy={interactionPolicy}
       testID={testID}
       title={title}
       actions={
         onAdd ? (
-          <Button variant="soft" size="s" disabled={disabled} onPress={onAdd}>
+          <Button
+            variant="soft"
+            size="s"
+            disabled={disabled}
+            interactionPolicy={interactionPolicy}
+            onPress={onAdd}
+          >
             {addLabel}
           </Button>
         ) : null
@@ -68,6 +76,7 @@ function CollectionEditorInner<TItem>({
                         icon={{ name: 'arrow-up-outline' }}
                         label="Move Up"
                         disabled={disabled ?? index === 0}
+                        interactionPolicy={interactionPolicy}
                         onPress={() => onMove(index, index - 1)}
                         size="s"
                         variant="ghost"
@@ -76,6 +85,7 @@ function CollectionEditorInner<TItem>({
                         icon={{ name: 'arrow-down-outline' }}
                         label="Move Down"
                         disabled={disabled ?? index === items.length - 1}
+                        interactionPolicy={interactionPolicy}
                         onPress={() => onMove(index, index + 1)}
                         size="s"
                         variant="ghost"
@@ -88,6 +98,7 @@ function CollectionEditorInner<TItem>({
                       label="Remove"
                       color="danger"
                       disabled={disabled}
+                      interactionPolicy={interactionPolicy}
                       onPress={() => onRemove(index)}
                       size="s"
                       variant="ghost"

package/src/patterns/confirm-dialog/ConfirmDialog.tsx

@@ -22,17 +22,30 @@ function ConfirmDialogInner({
   onConfirm,
   onCancel,
   testID,
+  interactionPolicy,
 }: ConfirmDialogProps) {
   return (
     <Modal
       closeOnBackdrop={closeOnBackdrop}
       description={description}
+      interactionPolicy={interactionPolicy}
       footer={
         <Stack direction={{ base: 'column', md: 'row' }} gap="s" justify="flex-end">
-          <Button variant="soft" onPress={onCancel} color="neutral">
+          <Button
+            variant="soft"
+            interactionPolicy={interactionPolicy}
+            onPress={onCancel}
+            color="neutral"
+          >
             {cancelLabel}
           </Button>
-          <Button variant={confirmVariant} loading={busy} onPress={onConfirm} color={confirmColor}>
+          <Button
+            variant={confirmVariant}
+            loading={busy}
+            interactionPolicy={interactionPolicy}
+            onPress={onConfirm}
+            color={confirmColor}
+          >
             {confirmLabel}
           </Button>
         </Stack>