@ankhorage/zora 2.7.2 → 2.8.0

package/src/components/heading/Heading.tsx

@@ -1,12 +1,25 @@
 import { resolveResponsive, useResponsiveRuntime } from '@ankhorage/surface';
 import React from 'react';
-import { Text as ReactNativeText } from 'react-native';
+import { Platform, Text as ReactNativeText, type TextStyle } from 'react-native';
 
 import { useZoraTheme } from '../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { resolveHeadingRecipe, resolveHeadingSizeFromLevel } from './resolveHeadingRecipe';
 import type { HeadingProps } from './types';
 
+const headingLayoutStyle = {
+  flexShrink: 1,
+  maxWidth: '100%',
+  minWidth: 0,
+  ...(Platform.OS === 'web'
+    ? {
+        overflowWrap: 'break-word',
+        whiteSpace: 'normal',
+        wordBreak: 'normal',
+      }
+    : null),
+} as unknown as TextStyle;
+
 function resolveHeadingContent({
   children,
   text,
@@ -47,6 +60,7 @@ function HeadingInner({
   numberOfLines,
   ellipsizeMode,
   selectable,
+  style,
   accessibilityLabel,
   accessibilityHint,
   accessibilityRole = 'header',
@@ -76,15 +90,19 @@ function HeadingInner({
       numberOfLines={numberOfLines}
       selectable={selectable}
       testID={testID}
-      style={resolveHeadingRecipe(theme, {
-        align: resolvedAlign,
-        italic,
-        level,
-        size: resolvedSize,
-        color: resolvedColor,
-        emphasis: resolvedEmphasis,
-        weight: resolvedWeight,
-      })}
+      style={[
+        headingLayoutStyle,
+        resolveHeadingRecipe(theme, {
+          align: resolvedAlign,
+          italic,
+          level,
+          size: resolvedSize,
+          color: resolvedColor,
+          emphasis: resolvedEmphasis,
+          weight: resolvedWeight,
+        }),
+        style,
+      ]}
     >
       {content}
     </ReactNativeText>

package/src/components/heading/types.ts

@@ -1,6 +1,6 @@
 import type { Responsive } from '@ankhorage/surface';
 import type React from 'react';
-import type { AccessibilityRole, TextStyle } from 'react-native';
+import type { AccessibilityRole, StyleProp, TextStyle } from 'react-native';
 
 import type { ZoraColor, ZoraEmphasis } from '../../internal/recipes';
 import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
@@ -30,6 +30,7 @@ export interface HeadingProps extends ZoraBaseProps {
   numberOfLines?: number;
   ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
   selectable?: boolean;
+  style?: StyleProp<TextStyle>;
   accessibilityLabel?: string;
   accessibilityHint?: string;
   accessibilityRole?: AccessibilityRole;

package/src/components/text/Text.tsx

@@ -1,12 +1,25 @@
 import { resolveResponsive, useResponsiveRuntime } from '@ankhorage/surface';
 import React from 'react';
-import { Text as ReactNativeText } from 'react-native';
+import { Platform, Text as ReactNativeText, type TextStyle } from 'react-native';
 
 import { useZoraTheme } from '../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { resolveTextStyle } from './resolveTextRecipe';
 import type { TextProps } from './types';
 
+const textLayoutStyle = {
+  flexShrink: 1,
+  maxWidth: '100%',
+  minWidth: 0,
+  ...(Platform.OS === 'web'
+    ? {
+        overflowWrap: 'break-word',
+        whiteSpace: 'normal',
+        wordBreak: 'normal',
+      }
+    : null),
+} as unknown as TextStyle;
+
 function resolveTextContent({
   children,
   text,
@@ -46,6 +59,7 @@ function TextInner({
   numberOfLines,
   ellipsizeMode,
   selectable,
+  style,
   accessibilityLabel,
   accessibilityHint,
   accessibilityRole,
@@ -81,7 +95,7 @@ function TextInner({
       numberOfLines={numberOfLines}
       selectable={selectable}
       testID={testID}
-      style={resolvedStyle}
+      style={[textLayoutStyle, resolvedStyle, style]}
     >
       {content}
     </ReactNativeText>
@@ -94,7 +108,7 @@ function TextInner({
  * `Text` owns normal body, caption, label, code, and supporting-copy variants so
  * consumers do not need to import lower-level Surface typography directly.
  *
- 
+
  * @example Muted supporting copy
  * ```tsx
  * <Text variant="bodySmall" emphasis="muted">Updated just now</Text>

package/src/components/text/types.ts

@@ -1,6 +1,6 @@
 import type { Responsive } from '@ankhorage/surface';
 import type React from 'react';
-import type { AccessibilityRole, TextStyle } from 'react-native';
+import type { AccessibilityRole, StyleProp, TextStyle } from 'react-native';
 
 import type { ZoraColor, ZoraEmphasis } from '../../internal/recipes';
 import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
@@ -27,6 +27,7 @@ export interface TextProps extends ZoraBaseProps {
   numberOfLines?: number;
   ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
   selectable?: boolean;
+  style?: StyleProp<TextStyle>;
   accessibilityLabel?: string;
   accessibilityHint?: string;
   accessibilityRole?: AccessibilityRole;

package/src/index.ts

@@ -308,6 +308,8 @@ export type {
   PostCardProps,
 } from './patterns/post-card';
 export { PostCard } from './patterns/post-card';
+export type { ProductCardProps } from './patterns/product-card';
+export { ProductCard } from './patterns/product-card';
 export type {
   ResponsivePanelDesktopMode,
   ResponsivePanelMobileMode,

package/src/metadata/componentMeta.test.ts

@@ -70,6 +70,25 @@ describe('ZORA_COMPONENT_META event metadata', () => {
   });
 });
 
+describe('ZORA_COMPONENT_META requirement metadata', () => {
+  test('declares camera permission metadata for camera permission UI', () => {
+    expect(ZORA_COMPONENT_META.CameraPermissionView.requirements).toEqual({
+      permissions: [{ permission: 'camera' }],
+    });
+  });
+
+  test('declares camera and barcode scanner metadata for barcode scanner UI', () => {
+    expect(ZORA_COMPONENT_META.BarcodeScannerView.requirements).toEqual({
+      permissions: [{ permission: 'camera' }],
+      capabilities: [{ capability: 'barcodeScanner' }],
+    });
+  });
+
+  test('does not declare runtime requirements for the camera-agnostic scan overlay', () => {
+    expect(ZORA_COMPONENT_META.ScanOverlay.requirements).toBeUndefined();
+  });
+});
+
 describe('ZORA_COMPONENT_META invariants', () => {
   test('every key matches meta.name', () => {
     for (const [key, meta] of Object.entries(ZORA_COMPONENT_META)) {
@@ -105,6 +124,7 @@ describe('ZORA_COMPONENT_META invariants', () => {
       'ChatListItem',
       'CameraPermissionView',
       'ScanOverlay',
+      'ProductCard',
       'Progress',
     ]);
 
@@ -119,6 +139,7 @@ describe('ZORA_COMPONENT_META invariants', () => {
       'PostCard',
       'MessageBubble',
       'Box',
+
       'Stack',
       'Grid',
       'Container',

package/src/metadata/componentMeta.ts

@@ -75,6 +75,7 @@ import { messageBubbleMeta } from '../patterns/message-bubble/meta';
 import { noticeMeta } from '../patterns/notice/meta';
 import { panelMeta } from '../patterns/panel/meta';
 import { postCardMeta } from '../patterns/post-card/meta';
+import { productCardMeta } from '../patterns/product-card/meta';
 import { responsivePanelMeta } from '../patterns/responsive-panel/meta';
 import {
   barcodeScannerViewMeta,
@@ -178,6 +179,7 @@ export const ZORA_COMPONENT_META: ZoraComponentMetaRegistry = {
   Notice: noticeMeta,
   Panel: panelMeta,
   PostCard: postCardMeta,
+  ProductCard: productCardMeta,
   ResponsivePanel: responsivePanelMeta,
   BarcodeScannerView: barcodeScannerViewMeta,
   CameraPermissionView: cameraPermissionViewMeta,

package/src/metadata/types.ts

@@ -1,4 +1,4 @@
-import type { ComponentEventDtoKind } from '@ankhorage/contracts';
+import type { ComponentEventDtoKind, ComponentRequirements } from '@ankhorage/contracts';
 
 export type ZoraComponentCategory = 'foundation' | 'component' | 'pattern' | 'layout';
 
@@ -90,6 +90,7 @@ export interface ZoraComponentMeta {
   description?: string;
   directManifestNode: boolean;
   allowedChildren: readonly string[];
+  requirements?: ComponentRequirements;
   blueprint?: ZoraComponentBlueprint;
   events?: Readonly<Record<string, ZoraComponentEventMeta>>;
   i18n?: ZoraComponentI18nMeta;

package/src/patterns/disclosure-section/DisclosureSection.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Platform, Pressable, type ViewStyle } from 'react-native';
+import { Platform, Pressable, type TextStyle, type ViewStyle } from 'react-native';
 
 import { Heading } from '../../components/heading';
 import { IconButton } from '../../components/icon-button';
@@ -11,6 +11,13 @@ import type { DisclosureSectionProps } from './types';
 
 const triggerTextStyle: ViewStyle = {
   flex: 1,
+  flexBasis: 0,
+  minWidth: 0,
+};
+
+const triggerCopyStyle: TextStyle = {
+  flexShrink: 1,
+  maxWidth: '100%',
   minWidth: 0,
 };
 
@@ -22,6 +29,7 @@ const getTriggerStyle = (disabled?: boolean): ViewStyle =>
   ({
     alignSelf: 'stretch',
     flex: 1,
+    flexBasis: 0,
     justifyContent: 'center',
     minWidth: 0,
     ...(Platform.OS === 'web'
@@ -78,9 +86,11 @@ function DisclosureSectionInner({
             <Box style={triggerTextStyle}>
               <Stack gap="xs">
                 {icon ? <Box pb="xs">{/* Surface icon spec would go here */}</Box> : null}
-                <Heading level={4}>{title}</Heading>
+                <Heading level={4} style={triggerCopyStyle}>
+                  {title}
+                </Heading>
                 {description ? (
-                  <Text emphasis="muted" variant="bodySmall">
+                  <Text emphasis="muted" variant="bodySmall" style={triggerCopyStyle}>
                     {description}
                   </Text>
                 ) : null}

package/src/patterns/product-card/ProductCard.test.tsx

@@ -0,0 +1,19 @@
+import { describe, expect, test } from 'bun:test';
+
+import { ZORA_COMPONENT_META } from '../../metadata';
+
+describe('ProductCard', () => {
+  test('is registered as a public ZORA pattern', () => {
+    expect(ZORA_COMPONENT_META.ProductCard?.name).toBe('ProductCard');
+    expect(ZORA_COMPONENT_META.ProductCard?.category).toBe('pattern');
+    expect(ZORA_COMPONENT_META.ProductCard?.directManifestNode).toBe(true);
+    expect(ZORA_COMPONENT_META.ProductCard?.allowedChildren).toEqual([]);
+    expect(ZORA_COMPONENT_META.ProductCard?.requirements).toBeUndefined();
+  });
+
+  test('has correct event metadata', () => {
+    expect(ZORA_COMPONENT_META.ProductCard?.events?.press).toBeDefined();
+    expect(ZORA_COMPONENT_META.ProductCard?.events?.primaryAction).toBeDefined();
+    expect(ZORA_COMPONENT_META.ProductCard?.events?.secondaryAction).toBeDefined();
+  });
+});

package/src/patterns/product-card/ProductCard.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+
+import { Badge } from '../../components/badge';
+import { Button } from '../../components/button';
+import { Card } from '../../components/card';
+import { Heading } from '../../components/heading';
+import { Image } from '../../components/image';
+import { Text } from '../../components/text';
+import { Divider, Inline, Stack } from '../../foundation';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+import type { ProductCardProps } from './types';
+
+function ProductCardInner({
+  title,
+  subtitle,
+  description,
+  brand,
+  vendor: _vendor,
+  imageUrl,
+  imageAlt,
+  price,
+  currency,
+  badges,
+  meta,
+  primaryActionLabel,
+  secondaryActionLabel,
+  onPress,
+  onPrimaryAction,
+  onSecondaryAction,
+  ...rest
+}: ProductCardProps & ZoraBaseProps) {
+  const hasHeaderInfo = !!title || !!brand || !!subtitle;
+  const hasMeta = !!meta && meta.length > 0;
+  const hasActions = !!primaryActionLabel || !!secondaryActionLabel;
+  const isInteractive = Boolean(onPress);
+
+  const eyebrow = brand ?? _vendor;
+
+  return (
+    <Card onPress={isInteractive ? onPress : undefined} {...rest}>
+      <Stack gap="m">
+        {imageUrl ? (
+          <Image
+            accessibilityLabel={imageAlt ?? title}
+            source={{ uri: imageUrl }}
+            aspectRatio={1}
+            radius="m"
+          />
+        ) : null}
+
+        <Stack gap="s">
+          {hasHeaderInfo ? (
+            <Stack gap="xxs">
+              {eyebrow ? (
+                <Text variant="caption" weight="semiBold" emphasis="muted">
+                  {eyebrow}
+                </Text>
+              ) : null}
+              <Heading level={4}>{title}</Heading>
+              {subtitle ? (
+                <Text variant="bodySmall" emphasis="muted">
+                  {subtitle}
+                </Text>
+              ) : null}
+            </Stack>
+          ) : null}
+
+          {description ? <Text variant="bodySmall">{description}</Text> : null}
+
+          {badges && badges.length > 0 ? (
+            <Inline gap="xs" wrap="wrap">
+              {badges.map((badge, index) => (
+                <Badge key={`${badge}-${index}`}>{badge}</Badge>
+              ))}
+            </Inline>
+          ) : null}
+        </Stack>
+
+        {price ? (
+          <Text variant="bodySmall" weight="bold">
+            {currency ? `${currency} ` : ''}
+            {price}
+          </Text>
+        ) : null}
+
+        {hasMeta ? (
+          <Stack gap="xs">
+            <Divider />
+            {meta.map((item, index) => (
+              <Inline key={`${item.label}-${index}`} justify="space-between">
+                <Text variant="bodySmall" emphasis="muted">
+                  {item.label}
+                </Text>
+                <Text variant="bodySmall" weight="semiBold">
+                  {item.value}
+                </Text>
+              </Inline>
+            ))}
+          </Stack>
+        ) : null}
+
+        {hasActions ? (
+          <Stack gap="s">
+            <Divider />
+            <Inline gap="s">
+              {secondaryActionLabel ? (
+                <Button variant="ghost" onPress={onSecondaryAction} size="s">
+                  {secondaryActionLabel}
+                </Button>
+              ) : null}
+              {primaryActionLabel ? (
+                <Button variant="solid" onPress={onPrimaryAction} size="s" flex={1}>
+                  {primaryActionLabel}
+                </Button>
+              ) : null}
+            </Inline>
+          </Stack>
+        ) : null}
+      </Stack>
+    </Card>
+  );
+}
+
+export const ProductCard = withZoraThemeScope(ProductCardInner);

package/src/patterns/product-card/index.ts

@@ -0,0 +1,2 @@
+export { ProductCard } from './ProductCard';
+export type { ProductCardProps } from './types';

package/src/patterns/product-card/meta.ts

@@ -0,0 +1,111 @@
+import type { ZoraComponentMeta } from '../../metadata';
+
+export const productCardMeta = {
+  name: 'ProductCard',
+  category: 'pattern',
+  description: 'A generic card for displaying product or article information.',
+  directManifestNode: true,
+  allowedChildren: [],
+  events: {
+    press: {
+      label: 'Press',
+      eventType: 'productCard.press',
+      description: 'Emitted when the product card is pressed.',
+      payloadFields: [],
+    },
+    primaryAction: {
+      label: 'Primary action',
+      eventType: 'productCard.primaryAction',
+      description: 'Emitted when the primary product card action is pressed.',
+      payloadFields: [],
+    },
+    secondaryAction: {
+      label: 'Secondary action',
+      eventType: 'productCard.secondaryAction',
+      description: 'Emitted when the secondary product card action is pressed.',
+      payloadFields: [],
+    },
+  },
+  props: {
+    title: {
+      type: 'string',
+      category: 'Content',
+      label: 'Title',
+    },
+    subtitle: {
+      type: 'string',
+      category: 'Content',
+      label: 'Subtitle',
+    },
+    description: {
+      type: 'string',
+      category: 'Content',
+      label: 'Description',
+    },
+    brand: {
+      type: 'string',
+      category: 'Content',
+      label: 'Brand',
+    },
+    vendor: {
+      type: 'string',
+      category: 'Content',
+      label: 'Vendor',
+    },
+    imageUrl: {
+      type: 'string',
+      category: 'Content',
+      label: 'Image URL',
+    },
+    imageAlt: {
+      type: 'string',
+      category: 'Content',
+      label: 'Image Alt Text',
+    },
+    price: {
+      type: 'string',
+      category: 'Content',
+      label: 'Price',
+    },
+    currency: {
+      type: 'string',
+      category: 'Content',
+      label: 'Currency',
+    },
+    badges: {
+      type: 'array',
+      category: 'Content',
+      label: 'Badges',
+    },
+    meta: {
+      type: 'array',
+      category: 'Content',
+      label: 'Meta',
+    },
+    primaryActionLabel: {
+      type: 'string',
+      category: 'Content',
+      label: 'Primary Action Label',
+    },
+    secondaryActionLabel: {
+      type: 'string',
+      category: 'Content',
+      label: 'Secondary Action Label',
+    },
+    onPress: {
+      type: 'action',
+      category: 'Events',
+      label: 'Press action',
+    },
+    onPrimaryAction: {
+      type: 'action',
+      category: 'Events',
+      label: 'Primary action',
+    },
+    onSecondaryAction: {
+      type: 'action',
+      category: 'Events',
+      label: 'Secondary action',
+    },
+  },
+} as const satisfies ZoraComponentMeta;

package/src/patterns/product-card/types.ts

@@ -0,0 +1,21 @@
+export interface ProductCardProps {
+  title: string;
+  subtitle?: string;
+  description?: string;
+  brand?: string;
+  vendor?: string;
+  imageUrl?: string;
+  imageAlt?: string;
+  price?: string;
+  currency?: string;
+  badges?: readonly string[];
+  meta?: readonly {
+    label: string;
+    value: string;
+  }[];
+  primaryActionLabel?: string;
+  secondaryActionLabel?: string;
+  onPress?: () => void;
+  onPrimaryAction?: () => void;
+  onSecondaryAction?: () => void;
+}

package/src/patterns/scanner/meta.ts

@@ -43,6 +43,9 @@ export const cameraPermissionViewMeta = {
   description: 'ZORA-owned camera permission state for scanner flows.',
   directManifestNode: true,
   allowedChildren: [],
+  requirements: {
+    permissions: [{ permission: 'camera' }],
+  },
   blueprint: {
     label: 'Camera permission',
     defaultProps: {
@@ -107,6 +110,10 @@ export const barcodeScannerViewMeta = {
     'Composed scanner shell with permission, camera slot, scan overlay, and manual entry affordance.',
   directManifestNode: true,
   allowedChildren: [...CONTAINER_ALLOWED_CHILDREN],
+  requirements: {
+    permissions: [{ permission: 'camera' }],
+    capabilities: [{ capability: 'barcodeScanner' }],
+  },
   blueprint: {
     label: 'Barcode scanner',
     defaultProps: {