@ankhorage/zora 2.8.6 → 2.9.0

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

@@ -52,16 +52,18 @@ function DisclosureSectionInner({
   children,
   disabled,
   testID,
+  interactionPolicy,
 }: DisclosureSectionProps) {
   const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
 
   const isControlled = controlledOpen !== undefined;
   const isOpen = isControlled ? controlledOpen : internalOpen;
+  const passive = interactionPolicy === 'passive';
   const titleLabel = typeof title === 'string' || typeof title === 'number' ? `: ${title}` : '';
   const toggleLabel = `${isOpen ? 'Collapse' : 'Expand'} section${titleLabel}`;
 
   const toggleOpen = () => {
-    if (disabled) return;
+    if (disabled || passive) return;
 
     if (isControlled) {
       onOpenChange?.(!controlledOpen);
@@ -108,6 +110,7 @@ function DisclosureSectionInner({
               color="neutral"
               size="s"
               disabled={disabled}
+              interactionPolicy={interactionPolicy}
               onPress={toggleOpen}
             />
           </Box>

package/src/patterns/empty-state/EmptyState.tsx

@@ -9,6 +9,7 @@ import type { EmptyStateProps } from './types';
 function EmptyStateInner({
   themeId: _themeId,
   mode: _mode,
+  interactionPolicy,
   title,
   description,
   eyebrow,
@@ -22,6 +23,7 @@ function EmptyStateInner({
       compact
       description={description}
       eyebrow={eyebrow}
+      interactionPolicy={interactionPolicy}
       testID={testID}
       title={title}
       tone="subtle"
@@ -31,6 +33,7 @@ function EmptyStateInner({
           <Stack direction={{ base: 'column', md: 'row' }} gap="s">
             {primaryAction ? (
               <Button
+                interactionPolicy={interactionPolicy}
                 variant={primaryAction.variant}
                 onPress={primaryAction.onPress}
                 color={primaryAction.color}
@@ -40,6 +43,7 @@ function EmptyStateInner({
             ) : null}
             {secondaryAction ? (
               <Button
+                interactionPolicy={interactionPolicy}
                 variant={secondaryAction.variant ?? 'soft'}
                 onPress={secondaryAction.onPress}
                 color={secondaryAction.color ?? 'neutral'}

package/src/patterns/filter-bar/FilterBar.tsx

@@ -7,6 +7,7 @@ import type { FilterBarProps } from './types';
 function FilterBarInner({
   themeId: _themeId,
   mode: _mode,
+  interactionPolicy: _interactionPolicy,
   testID,
   leading,
   trailing,

package/src/patterns/hero/Hero.tsx

@@ -11,6 +11,7 @@ import type { HeroAction, HeroAlign, HeroProps } from './types';
 function HeroInner({
   themeId: _themeId,
   mode: _mode,
+  interactionPolicy,
   title,
   description,
   eyebrow,
@@ -64,8 +65,12 @@ function HeroInner({
             gap="s"
             justify={align === 'center' ? 'center' : 'flex-start'}
           >
-            {primaryAction !== undefined ? renderAction(primaryAction, 'primary') : null}
-            {secondaryAction !== undefined ? renderAction(secondaryAction, 'secondary') : null}
+            {primaryAction !== undefined
+              ? renderAction(primaryAction, 'primary', interactionPolicy)
+              : null}
+            {secondaryAction !== undefined
+              ? renderAction(secondaryAction, 'secondary', interactionPolicy)
+              : null}
           </Stack>
         ) : null}
 
@@ -90,16 +95,21 @@ function HeroInner({
     );
 
   return (
-    <Card compact={compact} testID={testID} tone={tone}>
+    <Card compact={compact} interactionPolicy={interactionPolicy} testID={testID} tone={tone}>
       {body}
     </Card>
   );
 }
 
-function renderAction(action: HeroAction, role: 'primary' | 'secondary') {
+function renderAction(
+  action: HeroAction,
+  role: 'primary' | 'secondary',
+  interactionPolicy: HeroProps['interactionPolicy'],
+) {
   return (
     <Button
       disabled={action.disabled}
+      interactionPolicy={interactionPolicy}
       variant={action.variant ?? (role === 'primary' ? 'solid' : 'soft')}
       onPress={action.onPress}
       color={action.color ?? (role === 'primary' ? 'primary' : 'neutral')}

package/src/patterns/image-preview/ImagePreview.tsx

@@ -34,6 +34,7 @@ function ImagePreviewInner({
   fit = 'cover',
   emptyTitle = 'No image',
   emptyDescription = 'Select an image to preview it here.',
+  interactionPolicy: _interactionPolicy,
 }: ImagePreviewProps) {
   const { theme } = useZoraTheme();
   const renderableUrl = resolveRenderableUrl(asset);

package/src/patterns/image-upload-field/ImageUploadField.tsx

@@ -51,7 +51,9 @@ function ImageUploadFieldInner({
   aspectRatio = 1,
   previewTitle = 'Image preview',
   previewDescription,
+  interactionPolicy,
 }: ImageUploadFieldProps) {
+  const passive = interactionPolicy === 'passive';
   const [internalError, setInternalError] = React.useState<string | undefined>(undefined);
   const [uploading, setUploading] = React.useState(false);
   const [removing, setRemoving] = React.useState(false);
@@ -88,7 +90,7 @@ function ImageUploadFieldInner({
   }, []);
 
   const handleReplace = React.useCallback(async () => {
-    if (actionsDisabled || uploading || removing) return;
+    if (passive || actionsDisabled || uploading || removing) return;
 
     setInternalError(undefined);
     let picked;
@@ -143,6 +145,7 @@ function ImageUploadFieldInner({
     onChange,
     onPick,
     onUpload,
+    passive,
     removing,
     setProgressSafe,
     uploading,
@@ -150,7 +153,7 @@ function ImageUploadFieldInner({
   ]);
 
   const handleRemove = React.useCallback(async () => {
-    if (actionsDisabled || uploading || removing) return;
+    if (passive || actionsDisabled || uploading || removing) return;
     if (!value) {
       onChange(null);
       return;
@@ -174,14 +177,17 @@ function ImageUploadFieldInner({
       setInternalError(formatUnknownError(error));
       setRemoving(false);
     }
-  }, [actionsDisabled, onChange, onRemove, removing, uploading, value]);
+  }, [actionsDisabled, onChange, onRemove, passive, removing, uploading, value]);
 
   const handlePreview = React.useCallback(() => {
-    if (!isRenderable) return;
+    if (passive || !isRenderable) return;
     setPreviewOpen(true);
-  }, [isRenderable]);
+  }, [isRenderable, passive]);
 
-  const closePreview = React.useCallback(() => setPreviewOpen(false), []);
+  const closePreview = React.useCallback(() => {
+    if (passive) return;
+    setPreviewOpen(false);
+  }, [passive]);
 
   return (
     <>
@@ -190,6 +196,7 @@ function ImageUploadFieldInner({
         disabled={disabled}
         errorText={effectiveError}
         helperText={helperText}
+        interactionPolicy={interactionPolicy}
         invalid={invalid}
         label={label}
         readOnly={readOnly}
@@ -230,6 +237,7 @@ function ImageUploadFieldInner({
           <Stack direction={{ base: 'column', md: 'row' }} gap="s">
             <Button
               disabled={actionsDisabled || uploading || removing}
+              interactionPolicy={interactionPolicy}
               onPress={() => {
                 void handleReplace();
               }}
@@ -243,6 +251,7 @@ function ImageUploadFieldInner({
                 variant="outline"
                 loading={removing}
                 color="danger"
+                interactionPolicy={interactionPolicy}
                 onPress={() => {
                   void handleRemove();
                 }}
@@ -252,7 +261,13 @@ function ImageUploadFieldInner({
             ) : null}
 
             {isRenderable ? (
-              <Button disabled={false} variant="soft" color="neutral" onPress={handlePreview}>
+              <Button
+                disabled={false}
+                interactionPolicy={interactionPolicy}
+                variant="soft"
+                color="neutral"
+                onPress={handlePreview}
+              >
                 Preview
               </Button>
             ) : null}
@@ -272,14 +287,20 @@ function ImageUploadFieldInner({
         <Modal
           closeOnBackdrop
           description={previewDescription}
+          interactionPolicy={interactionPolicy}
+          onDismiss={closePreview}
           title={previewTitle}
           visible={previewOpen}
-          onDismiss={closePreview}
         >
           <Stack gap="m">
             <ImagePreview asset={value} aspectRatio={aspectRatio} />
             <Stack direction="row" justify="flex-end">
-              <Button variant="soft" color="neutral" onPress={closePreview}>
+              <Button
+                interactionPolicy={interactionPolicy}
+                variant="soft"
+                color="neutral"
+                onPress={closePreview}
+              >
                 Close
               </Button>
             </Stack>

package/src/patterns/inspector-field/InspectorField.tsx

@@ -11,6 +11,7 @@ function InspectorFieldInner({
   label,
   control,
   children,
+  interactionPolicy: _interactionPolicy,
   ...props
 }: InspectorFieldProps) {
   return (

package/src/patterns/message-bubble/MessageBubble.tsx

@@ -131,6 +131,7 @@ function MessageAvatar({
 function MessageBubbleInner({
   themeId: _themeId,
   mode: _mode,
+  interactionPolicy,
   testID,
   direction = 'incoming',
   text,
@@ -224,6 +225,7 @@ function MessageBubbleInner({
       accessibilityRole="button"
       accessibilityState={{ disabled, selected }}
       disabled={disabled}
+      interactionPolicy={interactionPolicy}
       onPress={onPress}
       radius={isSystem ? 'm' : 'l'}
       testID={testID}

package/src/patterns/notice/Notice.tsx

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

package/src/patterns/post-card/PostCard.tsx

@@ -174,6 +174,7 @@ function PostCardComments({ comments }: { comments: readonly PostCommentPreview[
 function PostCardInner({
   themeId: _themeId,
   mode: _mode,
+  interactionPolicy,
   testID,
   author,
   text,
@@ -196,6 +197,7 @@ function PostCardInner({
   return (
     <Card
       compact={compact}
+      interactionPolicy={interactionPolicy}
       onPress={isInteractive ? onPress : undefined}
       testID={testID}
       tone={tone}

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

@@ -28,6 +28,7 @@ function ProductCardInner({
   onPress,
   onPrimaryAction,
   onSecondaryAction,
+  interactionPolicy,
   ...rest
 }: ProductCardProps & ZoraBaseProps) {
   const hasHeaderInfo = !!title || !!brand || !!subtitle;
@@ -38,7 +39,11 @@ function ProductCardInner({
   const eyebrow = brand ?? _vendor;
 
   return (
-    <Card onPress={isInteractive ? onPress : undefined} {...rest}>
+    <Card
+      onPress={isInteractive ? onPress : undefined}
+      interactionPolicy={interactionPolicy}
+      {...rest}
+    >
       <Stack gap="m">
         {imageUrl ? (
           <Image
@@ -105,12 +110,23 @@ function ProductCardInner({
             <Divider />
             <Inline gap="s">
               {secondaryActionLabel ? (
-                <Button variant="ghost" onPress={onSecondaryAction} size="s">
+                <Button
+                  interactionPolicy={interactionPolicy}
+                  variant="ghost"
+                  onPress={onSecondaryAction}
+                  size="s"
+                >
                   {secondaryActionLabel}
                 </Button>
               ) : null}
               {primaryActionLabel ? (
-                <Button variant="solid" onPress={onPrimaryAction} size="s" flex={1}>
+                <Button
+                  interactionPolicy={interactionPolicy}
+                  variant="solid"
+                  onPress={onPrimaryAction}
+                  size="s"
+                  flex={1}
+                >
                   {primaryActionLabel}
                 </Button>
               ) : null}

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

@@ -1,4 +1,6 @@
-export interface ProductCardProps {
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export interface ProductCardProps extends ZoraBaseProps {
   title: string;
   subtitle?: string;
   description?: string;

package/src/patterns/responsive-panel/ResponsivePanel.tsx

@@ -72,9 +72,11 @@ function ResponsivePanelInner({
   size,
   scroll = 'none',
   testID,
+  interactionPolicy,
 }: ResponsivePanelProps) {
   if (!open) return null;
 
+  const passive = interactionPolicy === 'passive';
   const body = renderPanelBody(children, scroll);
 
   // For now, we assume desktopMode determines the rendering.
@@ -87,7 +89,12 @@ function ResponsivePanelInner({
         <Modal
           description={description}
           footer={footer}
-          onDismiss={() => onOpenChange(false)}
+          interactionPolicy={interactionPolicy}
+          onDismiss={() => {
+            if (passive) return;
+
+            onOpenChange(false);
+          }}
           testID={testID}
           title={title}
           visible={open}
@@ -102,7 +109,12 @@ function ResponsivePanelInner({
       <Drawer
         description={description}
         footer={footer}
-        onDismiss={() => onOpenChange(false)}
+        interactionPolicy={interactionPolicy}
+        onDismiss={() => {
+          if (passive) return;
+
+          onOpenChange(false);
+        }}
         position={side}
         testID={testID}
         title={title}
@@ -119,6 +131,7 @@ function ResponsivePanelInner({
       compact={compact}
       description={description}
       footer={footer}
+      interactionPolicy={interactionPolicy}
       testID={testID}
       title={title}
     >

package/src/patterns/scanner/BarcodeScannerView.tsx

@@ -12,6 +12,7 @@ import type { BarcodeScannerViewProps } from './types';
 
 function BarcodeScannerViewInner({
   themeId: _themeId,
+  interactionPolicy,
   mode: _mode,
   permissionStatus,
   camera,
@@ -46,6 +47,7 @@ function BarcodeScannerViewInner({
         requestLabel={requestPermissionLabel}
         status={permissionStatus}
         testID={testID}
+        interactionPolicy={interactionPolicy}
       />
     );
   }
@@ -55,6 +57,7 @@ function BarcodeScannerViewInner({
       compact
       description={description}
       eyebrow="Scanner"
+      interactionPolicy={interactionPolicy}
       testID={testID}
       title={title}
       tone="subtle"

package/src/patterns/scanner/CameraPermissionView.tsx

@@ -32,6 +32,7 @@ function resolvePermissionCopy(status: CameraPermissionViewProps['status']) {
 
 function CameraPermissionViewInner({
   themeId: _themeId,
+  interactionPolicy,
   mode: _mode,
   status,
   title,
@@ -63,6 +64,7 @@ function CameraPermissionViewInner({
       compact
       description={description ?? copy.description}
       eyebrow="Scanner permission"
+      interactionPolicy={interactionPolicy}
       testID={testID}
       title={title ?? copy.title}
       tone="subtle"
@@ -78,6 +80,7 @@ function CameraPermissionViewInner({
               disabled={status === 'requesting'}
               onPress={handleRequestPermission}
               {...requestButtonProps}
+              interactionPolicy={interactionPolicy}
             >
               {primaryLabel}
             </Button>
@@ -88,6 +91,7 @@ function CameraPermissionViewInner({
               onPress={handleManualEntry}
               variant="soft"
               {...manualEntryButtonProps}
+              interactionPolicy={interactionPolicy}
             >
               {manualEntryLabel}
             </Button>

package/src/patterns/scanner/ScanOverlay.tsx

@@ -10,6 +10,7 @@ import type { ScanOverlayProps } from './types';
 
 function ScanOverlayInner({
   themeId: _themeId,
+  interactionPolicy: _interactionPolicy,
   mode: _mode,
   title = 'Align the barcode',
   description = 'Hold the barcode inside the frame. Scanning starts automatically.',

package/src/patterns/section-header/SectionHeader.tsx

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

package/src/patterns/selection/SelectableItem.tsx

@@ -20,7 +20,13 @@ function isRenderProp(
  *
  
  */
-export function SelectableItem({ id, trigger, disabled = false, children }: SelectableItemProps) {
+export function SelectableItem({
+  id,
+  trigger,
+  disabled = false,
+  interactionPolicy,
+  children,
+}: SelectableItemProps) {
   const selection = useSelection();
   const resolvedTrigger = resolveTrigger(trigger);
   const resolvedDisabled = selection.disabled || disabled;
@@ -28,18 +34,21 @@ export function SelectableItem({ id, trigger, disabled = false, children }: Sele
 
   const select = React.useCallback(() => {
     if (resolvedDisabled) return;
+    if (interactionPolicy === 'passive') return;
     selection.select(id);
-  }, [id, resolvedDisabled, selection]);
+  }, [id, resolvedDisabled, interactionPolicy, selection]);
 
   const toggle = React.useCallback(() => {
     if (resolvedDisabled) return;
+    if (interactionPolicy === 'passive') return;
     selection.toggle(id);
-  }, [id, resolvedDisabled, selection]);
+  }, [id, resolvedDisabled, interactionPolicy, selection]);
 
   const clear = React.useCallback(() => {
     if (selection.disabled) return;
+    if (interactionPolicy === 'passive') return;
     selection.clear();
-  }, [selection]);
+  }, [interactionPolicy, selection]);
 
   const itemState = React.useMemo<SelectableItemState>(() => {
     return {
@@ -65,6 +74,7 @@ export function SelectableItem({ id, trigger, disabled = false, children }: Sele
   const handlePress = (event: GestureResponderEvent) => {
     event.stopPropagation();
     if (resolvedDisabled) return;
+    if (interactionPolicy === 'passive') return;
     if (selection.mode === 'single') {
       selection.select(id);
       return;
@@ -76,6 +86,7 @@ export function SelectableItem({ id, trigger, disabled = false, children }: Sele
   const handleLongPress = (event: GestureResponderEvent) => {
     event.stopPropagation();
     if (resolvedDisabled) return;
+    if (interactionPolicy === 'passive') return;
     if (selection.mode === 'single') {
       selection.select(id);
       return;
@@ -86,6 +97,7 @@ export function SelectableItem({ id, trigger, disabled = false, children }: Sele
 
   return (
     <ButtonBase
+      interactionPolicy={interactionPolicy}
       accessibilityRole="button"
       accessibilityState={{ disabled: resolvedDisabled, selected }}
       disabled={resolvedDisabled}

package/src/patterns/selection/SelectionProvider.tsx

@@ -44,6 +44,7 @@ export function SelectionProvider({
   mode,
   disabled,
   onSelectionChange,
+  interactionPolicy,
 }: SelectionProviderProps) {
   const resolvedMode = resolveMode(mode);
   const resolvedDisabled = resolveDisabled(disabled);
@@ -61,6 +62,7 @@ export function SelectionProvider({
   const commitSelectionChange = React.useCallback(
     (nextNormalizedIds: readonly string[]) => {
       if (resolvedDisabled) return;
+      if (interactionPolicy === 'passive') return;
       if (areIdsEqual(nextNormalizedIds, currentNormalizedIds)) return;
 
       onSelectionChange?.(nextNormalizedIds);
@@ -69,7 +71,7 @@ export function SelectionProvider({
         setUncontrolledIds(nextNormalizedIds);
       }
     },
-    [currentNormalizedIds, isControlled, onSelectionChange, resolvedDisabled],
+    [currentNormalizedIds, interactionPolicy, isControlled, onSelectionChange, resolvedDisabled],
   );
 
   const clear = React.useCallback(() => {

package/src/patterns/selection/types.ts

@@ -1,3 +1,4 @@
+import type { InteractionPolicy } from '@ankhorage/surface';
 import type React from 'react';
 
 export type SelectionMode = 'single' | 'multi';
@@ -11,6 +12,7 @@ export interface SelectionProviderProps {
   mode?: SelectionMode;
   disabled?: boolean;
   onSelectionChange?: (ids: readonly string[]) => void;
+  interactionPolicy?: InteractionPolicy;
 }
 
 export interface UseSelectionResult {
@@ -39,5 +41,6 @@ export interface SelectableItemProps {
   id: string;
   trigger?: SelectionTrigger;
   disabled?: boolean;
+  interactionPolicy?: InteractionPolicy;
   children: React.ReactNode | ((state: SelectableItemState) => React.ReactNode);
 }

package/src/patterns/settings-row/SettingsRow.tsx

@@ -16,17 +16,19 @@ function SettingsRowInner({
   onPress,
   disabled = false,
   testID,
+  interactionPolicy,
 }: SettingsRowProps) {
-  // Prevent nested interactive elements:
-  // If a control is present (likely contains buttons), the row itself must not be clickable
   const isInteractive = Boolean(onPress) && !control;
 
+  // Prevent nested interactive elements:
+  // If a control is present (likely contains buttons), the row itself must not be clickable
   return (
     <Card
       compact
       actions={control}
       description={description}
       disabled={disabled}
+      interactionPolicy={interactionPolicy}
       onPress={isInteractive ? onPress : undefined}
       testID={testID}
       title={title}

package/src/patterns/switch-field/SwitchField.tsx

@@ -14,6 +14,7 @@ function SwitchFieldInner({
   onValueChange,
   disabled,
   testID,
+  interactionPolicy,
 }: SwitchFieldProps) {
   return (
     <SettingsRow
@@ -21,7 +22,14 @@ function SwitchFieldInner({
       description={description}
       disabled={disabled}
       testID={testID}
-      control={<Switch checked={value} onCheckedChange={onValueChange} disabled={disabled} />}
+      control={
+        <Switch
+          checked={value}
+          disabled={disabled}
+          interactionPolicy={interactionPolicy}
+          onCheckedChange={onValueChange}
+        />
+      }
     />
   );
 }

package/src/patterns/tile-grid/TileGrid.tsx

@@ -7,6 +7,7 @@ import type { TileGridProps } from './types';
 function TileGridInner({
   themeId: _themeId,
   mode: _mode,
+  interactionPolicy: _interactionPolicy,
   children,
   columns = 'responsive',
   compact = false,

package/src/patterns/timeline/Timeline.tsx

@@ -40,6 +40,7 @@ function resolveRoleSemantics(theme: SurfaceTheme, color: ZoraColor): RoleSemant
 function TimelineInner({
   themeId: _themeId,
   mode: _mode,
+  interactionPolicy: _interactionPolicy,
   testID,
   items,
   compact = false,

package/src/patterns/tree-view/TreeItem.tsx

@@ -28,6 +28,7 @@ function TreeItemInner<TId extends string = string>({
   onToggleExpand,
   renderItem,
   testID,
+  interactionPolicy,
 }: TreeItemProps<TId>) {
   const hasChildren = node.children !== undefined && node.children.length > 0;
   const isExpanded = expandedIds.includes(node.id);
@@ -53,6 +54,7 @@ function TreeItemInner<TId extends string = string>({
             {hasChildren ? (
               <IconButton
                 icon={{ name: isExpanded ? 'chevron-down-outline' : 'chevron-forward-outline' }}
+                interactionPolicy={interactionPolicy}
                 label={isExpanded ? 'Collapse' : 'Expand'}
                 onPress={() => onToggleExpand(node.id)}
                 size="s"
@@ -77,6 +79,7 @@ function TreeItemInner<TId extends string = string>({
               key={child.id}
               depth={depth + 1}
               expandedIds={expandedIds}
+              interactionPolicy={interactionPolicy}
               node={child}
               onSelect={onSelect}
               onToggleExpand={onToggleExpand}