@ankhorage/surface 2.0.2 → 2.1.0

package/src/index.test.ts

@@ -19,6 +19,7 @@ const expectedRootExports = [
   "export { Field } from './components/field';",
   "export { HelperText } from './components/helper-text';",
   "export { IconButton } from './components/icon-button';",
+  "export type { InteractionPolicy, InteractionPolicyProps } from './interactionPolicy';",
   "export { Label } from './components/label';",
   "export { ListItem } from './components/list-item';",
   "export {\n  DrawerNavigation,\n  DrawerNavigationItem,\n  NavigationItem,\n  NavigationList,\n  TabBar,\n  TabBarItem,\n} from './components/navigation';",

package/src/index.ts

@@ -61,6 +61,7 @@ export { FontProvider, useFontContext } from './context/FontContext';
 export type { I18nInstance, TranslationRuntime, Translator } from './context/TranslationContext';
 export { TranslationProvider, useTranslationContext } from './context/TranslationContext';
 export * from './core/responsive';
+export type { InteractionPolicy, InteractionPolicyProps } from './interactionPolicy';
 export * from './layout';
 export type { ButtonBaseProps } from './primitives/button-base';
 export { ButtonBase } from './primitives/button-base';

package/src/interactionPolicy.test.ts

@@ -0,0 +1,86 @@
+import { readFileSync } from 'node:fs';
+
+import { describe, expect, it } from 'bun:test';
+
+const indexSource = readFileSync(new URL('./index.ts', import.meta.url), 'utf8');
+
+describe('InteractionPolicy public export', () => {
+  it('exports InteractionPolicy from the public root', () => {
+    expect(indexSource).toContain(
+      "export type { InteractionPolicy, InteractionPolicyProps } from './interactionPolicy';",
+    );
+  });
+
+  it('exports InteractionPolicyProps from the public root', () => {
+    expect(indexSource).toContain(
+      "export type { InteractionPolicy, InteractionPolicyProps } from './interactionPolicy';",
+    );
+  });
+
+  it('does not export InteractionPolicy from button-base', () => {
+    expect(indexSource).not.toContain(
+      "export type { InteractionPolicy, InteractionPolicyProps } from './primitives/button-base';",
+    );
+  });
+});
+
+describe('InteractionPolicy type', () => {
+  it('only allows enabled', () => {
+    const policy = 'enabled' as const;
+    expect(policy).toBe('enabled');
+  });
+
+  it('only allows passive', () => {
+    const policy = 'passive' as const;
+    expect(policy).toBe('passive');
+  });
+});
+
+describe('InteractionPolicyProps', () => {
+  it('allows omitted interactionPolicy', () => {
+    const props: { readonly interactionPolicy?: 'enabled' | 'passive' } = {};
+    expect(props.interactionPolicy).toBeUndefined();
+  });
+
+  it('allows explicit enabled', () => {
+    const props: { readonly interactionPolicy?: 'enabled' | 'passive' } = {
+      interactionPolicy: 'enabled',
+    };
+    expect(props.interactionPolicy).toBe('enabled');
+  });
+
+  it('allows explicit passive', () => {
+    const props: { readonly interactionPolicy?: 'enabled' | 'passive' } = {
+      interactionPolicy: 'passive',
+    };
+    expect(props.interactionPolicy).toBe('passive');
+  });
+});
+
+describe('ButtonBaseProps includes interactionPolicy', () => {
+  it('has interactionPolicy in ButtonBaseProps', () => {
+    expect(indexSource).toContain(
+      "export type { ButtonBaseProps } from './primitives/button-base';",
+    );
+  });
+});
+
+describe('Policy does not leak to native hosts', () => {
+  it('InteractionPolicy is not a native View prop', () => {
+    const viewProps: Record<string, unknown> = {
+      accessible: true,
+      accessibilityLabel: 'test',
+    };
+    expect(viewProps.interactionPolicy).toBeUndefined();
+  });
+
+  it('InteractionPolicy is not a native TextInput prop', () => {
+    const textInputProps: Record<string, unknown> = {
+      editable: true,
+      onChangeText: (_text: string) => {
+        void _text;
+      },
+    };
+    expect(textInputProps.interactionPolicy).toBeUndefined();
+  });
+});

package/src/interactionPolicy.ts

@@ -0,0 +1,5 @@
+export type InteractionPolicy = 'enabled' | 'passive';
+
+export interface InteractionPolicyProps {
+  interactionPolicy?: InteractionPolicy;
+}

package/src/primitives/button-base/ButtonBase.tsx

@@ -28,6 +28,7 @@ function getInteractionState(
 export function ButtonBase({
   children,
   disabled = false,
+  interactionPolicy = 'enabled',
   onPress,
   onLongPress,
   accessibilityLabel,
@@ -43,6 +44,7 @@ export function ButtonBase({
   const [focused, setFocused] = React.useState(false);
   const isWeb = Platform.OS === 'web';
   const resolvedBoxStyles = resolveBoxStyles(theme, breakpoint, props);
+  const passive = interactionPolicy === 'passive';
 
   return (
     <Pressable
@@ -58,8 +60,8 @@ export function ButtonBase({
       }}
       onHoverIn={isWeb ? () => setHovered(true) : undefined}
       onHoverOut={isWeb ? () => setHovered(false) : undefined}
-      onLongPress={onLongPress}
-      onPress={onPress}
+      onLongPress={passive ? undefined : onLongPress}
+      onPress={passive ? undefined : onPress}
       style={(pressableState) => {
         const state = getInteractionState(pressableState, hovered, focused, disabled);
 

package/src/primitives/button-base/types.ts

@@ -1,10 +1,12 @@
 import type React from 'react';
 import type { AccessibilityRole, AccessibilityState, GestureResponderEvent } from 'react-native';
 
+import type { InteractionPolicyProps } from '../../interactionPolicy';
 import type { InteractionState } from '../../internal/resolvers/resolveInteractiveState';
 import type { BoxProps } from '../../layout';
 
-export interface ButtonBaseProps extends Omit<BoxProps, 'children' | 'pointerEvents'> {
+export interface ButtonBaseProps
+  extends Omit<BoxProps, 'children' | 'pointerEvents'>, InteractionPolicyProps {
   children?: React.ReactNode | ((state: InteractionState) => React.ReactNode);
   disabled?: boolean;
   onPress?: ((event: GestureResponderEvent) => void) | undefined;

package/src/theme/colorEngine.test.ts

@@ -67,10 +67,11 @@ describe('colorEngine', () => {
   });
 
   it('generates a valid palette for dark mode', () => {
-    const { colors, semantics } = generatePalette(mockConfig, 'dark');
+    const { colors, swatches, semantics } = generatePalette(mockConfig, 'dark');
 
     expect(colors.background).toBe(semantics.neutral.bg);
-    expect(semantics.content.inverse).toBe(semantics.brand.onSolidText);
+    expect(semantics.surface.inverse).toBe(swatches.neutral[50]);
+    expect(semantics.content.inverse).toBe(swatches.neutral[900]);
   });
 
   it('uses the color-theory default semantic status seeds', () => {

package/src/theme/colorEngine.ts

@@ -120,7 +120,6 @@ export function generatePalette(
   parseHexColorOrThrow(modeConfig.primaryColor);
 
   const generated = generateThemeModeColors(modeConfig);
-
   const { swatches } = generated;
   const neutralSwatch = swatches.neutral;
 
@@ -140,18 +139,21 @@ export function generatePalette(
   // Keep destructive action and feedback error aligned until a dedicated error status swatch is introduced.
   const error = danger;
   const info = buildRoleSemantics(secondarySwatch, isDark);
+  const inverseSurface = isDark ? neutralSwatch[50] : neutralSwatch[900];
+  const inverseOnSurface = isDark ? neutralSwatch[900] : neutralSwatch[50];
 
   const surfaceSemantics: SurfaceSemantics = {
     default: neutral.surface,
     subtle: neutral.bgSubtle,
     raised: neutral.surface,
+    inverse: inverseSurface,
   };
 
   const content: ContentSemantics = {
     default: neutral.text,
     muted: neutral.textMuted,
     subtle: neutral.textSubtle,
-    inverse: brand.onSolidText,
+    inverse: inverseOnSurface,
   };
 
   const border: BorderSemantics = {

package/src/theme/inverseSemantics.test.ts

@@ -0,0 +1,48 @@
+import type { ThemeConfig } from '@ankhorage/contracts';
+import { describe, expect, it } from 'bun:test';
+
+import { generatePalette } from './colorEngine';
+
+const config: ThemeConfig = {
+  id: 'inverse-semantics-test',
+  name: 'Inverse semantics test',
+  light: {
+    primaryColor: '#3B82F6',
+    harmony: 'monochromatic',
+  },
+  dark: {
+    primaryColor: '#3B82F6',
+    harmony: 'monochromatic',
+  },
+};
+
+describe('inverse semantics', () => {
+  it('provides a paired inverse surface and content color in light mode', () => {
+    const { semantics, swatches } = generatePalette(config, 'light');
+
+    expect(semantics.surface.inverse).toBe(swatches.neutral[900]);
+    expect(semantics.content.inverse).toBe(swatches.neutral[50]);
+  });
+
+  it('provides a paired inverse surface and content color in dark mode', () => {
+    const { semantics, swatches } = generatePalette(config, 'dark');
+
+    expect(semantics.surface.inverse).toBe(swatches.neutral[50]);
+    expect(semantics.content.inverse).toBe(swatches.neutral[900]);
+  });
+
+  it('resolves global inverse content from neutral semantics instead of brand foreground', () => {
+    const brightBrandConfig: ThemeConfig = {
+      ...config,
+      light: {
+        ...config.light,
+        primaryColor: '#FDE047',
+      },
+    };
+    const { semantics, swatches } = generatePalette(brightBrandConfig, 'light');
+
+    expect(semantics.surface.inverse).toBe(swatches.neutral[900]);
+    expect(semantics.content.inverse).toBe(swatches.neutral[50]);
+    expect(semantics.content.inverse).not.toBe(semantics.brand.onSolidText);
+  });
+});

package/src/theme/types.ts

@@ -43,6 +43,7 @@ export interface SurfaceSemantics {
   default: string;
   subtle: string;
   raised: string;
+  inverse: string;
 }
 
 export interface ContentSemantics {