@ankhorage/zora 15.0.0 → 17.0.0

package/src/features/content-rail/public.ts

@@ -0,0 +1,10 @@
+export type {
+  ContentRailControlPressEvent,
+  ContentRailDirection,
+  ContentRailItemSize,
+  ContentRailMotion,
+  ContentRailProps,
+  ContentRailSpacing,
+  ContentRailVisibleRangeChangeEvent,
+} from '../../types/content-rail';
+export { ContentRail } from './adapters/inbound/ContentRail';

package/src/features/data-table/adapters/inbound/DataTable.tsx

@@ -1,8 +1,8 @@
 import type { InteractionPolicy } from '@ankhorage/surface';
+import { Show } from '@ankhorage/surface';
 import React from 'react';
 import { ScrollView, type ViewStyle } from 'react-native';
 
-import { Show } from '../../../../foundation';
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type {
   DataTableCellContext,
@@ -17,7 +17,7 @@ import { Button } from '../../../button/public';
 import { IconButton } from '../../../button/public';
 import { Card } from '../../../card/public';
 import { EmptyState } from '../../../empty-state/public';
-import { Box, Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { PopoverMenu, type PopoverMenuAction } from '../../../popover-menu/public';
 import { SkeletonList } from '../../../skeleton/public';
 import { Text, type TextAlign } from '../../../typography/public';
@@ -207,8 +207,8 @@ function DataTableHeader<TRow extends object>({
   const passive = interactionPolicy === 'passive';
 
   return (
-    <Box bg="subtle" borderColor="border" borderWidth={1} radius="m">
-      <Stack direction="row" align="center">
+    <View bg="subtle" borderColor="border" borderWidth={1} radius="m">
+      <View direction="row" align="center">
         {columns.map((column) => {
           const currentDirection = sort?.columnId === column.id ? sort.direction : undefined;
           const sortable = Boolean(column.sortable && onSortChange);
@@ -216,7 +216,7 @@ function DataTableHeader<TRow extends object>({
             currentDirection === undefined ? '' : currentDirection === 'asc' ? ' ↑' : ' ↓';
 
           return (
-            <Box key={column.id} px={padding.px} py={padding.py} style={resolveCellStyle(column)}>
+            <View key={column.id} px={padding.px} py={padding.py} style={resolveCellStyle(column)}>
               {sortable ? (
                 <Button
                   color="primary"
@@ -245,16 +245,16 @@ function DataTableHeader<TRow extends object>({
                   {column.header}
                 </Text>
               )}
-            </Box>
+            </View>
           );
         })}
-        <Box px={padding.px} py={padding.py} style={{ minWidth: 56, width: 56 }}>
+        <View px={padding.px} py={padding.py} style={{ minWidth: 56, width: 56 }}>
           <Text align="right" emphasis="muted" variant="caption" weight="semiBold">
             Actions
           </Text>
-        </Box>
-      </Stack>
-    </Box>
+        </View>
+      </View>
+    </View>
   );
 }
 
@@ -274,8 +274,8 @@ function DataTableDesktop<TRow extends object>({
 
   return (
     <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-      <Box minWidth={720} style={{ width: '100%' }}>
-        <Stack gap="xs">
+      <View minWidth={720} style={{ width: '100%' }}>
+        <View gap="xs">
           <DataTableHeader
             columns={columns}
             density={density}
@@ -283,9 +283,9 @@ function DataTableDesktop<TRow extends object>({
             onSortChange={onSortChange}
             sort={sort}
           />
-          <Stack gap="xs">
+          <View gap="xs">
             {rows.map((row, rowIndex) => (
-              <Box
+              <View
                 bg="surface"
                 borderColor="border"
                 borderWidth={1}
@@ -293,30 +293,30 @@ function DataTableDesktop<TRow extends object>({
                 radius="m"
                 testID={testID ? `${testID}-row-${rowIndex}` : undefined}
               >
-                <Stack direction="row" align="center">
+                <View direction="row" align="center">
                   {columns.map((column) => (
-                    <Box
+                    <View
                       key={column.id}
                       px={padding.px}
                       py={padding.py}
                       style={resolveCellStyle(column)}
                     >
                       {renderTableCell(column, row, rowIndex)}
-                    </Box>
+                    </View>
                   ))}
-                  <Box
+                  <View
                     px={padding.px}
                     py={padding.py}
                     style={{ alignItems: 'flex-end', minWidth: 56, width: 56 }}
                   >
                     {renderRowActions({ row, rowActions, rowIndex, testID, interactionPolicy })}
-                  </Box>
-                </Stack>
-              </Box>
+                  </View>
+                </View>
+              </View>
             ))}
-          </Stack>
-        </Stack>
-      </Box>
+          </View>
+        </View>
+      </View>
     </ScrollView>
   );
 }
@@ -333,7 +333,7 @@ function DataTableMobile<TRow extends object>({
   const [primaryColumn, ...detailColumns] = columns;
 
   return (
-    <Stack gap="s">
+    <View gap="s">
       {rows.map((row, rowIndex) => {
         const title = primaryColumn
           ? renderCell(primaryColumn, row, rowIndex)
@@ -349,9 +349,9 @@ function DataTableMobile<TRow extends object>({
             testID={testID ? `${testID}-card-${rowIndex}` : undefined}
             title={title}
           >
-            <Stack gap="s">
+            <View gap="s">
               {detailColumns.map((column) => (
-                <Stack gap="xxs" key={column.id}>
+                <View gap="xxs" key={column.id}>
                   <Text emphasis="muted" variant="caption" weight="semiBold">
                     {column.header}
                   </Text>
@@ -362,13 +362,13 @@ function DataTableMobile<TRow extends object>({
                       {renderDefaultCell(resolveAccessorValue(row, column))}
                     </Text>
                   )}
-                </Stack>
+                </View>
               ))}
-            </Stack>
+            </View>
           </Card>
         );
       })}
-    </Stack>
+    </View>
   );
 }
 
@@ -406,10 +406,10 @@ function DataTableInner<TRow extends object>({
   };
 
   return (
-    <Box testID={testID}>
+    <View testID={testID}>
       <Show when={{ base: false, md: true }} fallback={<DataTableMobile {...tableProps} />}>
         <DataTableDesktop {...tableProps} />
       </Show>
-    </Box>
+    </View>
   );
 }

package/src/features/date-picker/composition/DatePickerContent.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import type { DatePickerProps } from '../../../types/date-picker';
 import { Button } from '../../button/public';
-import { Box, Stack } from '../../layout/public';
+import { View } from '../../layout/public';
 import { Text } from '../../typography/public';
 import { formatLocalDate, parseLocalDate } from '../utils/localDate';
 
@@ -27,7 +27,7 @@ export function DatePickerContent({
   const resolvedMinDate = React.useMemo(() => parseLocalDate(minDate), [minDate]);
 
   return (
-    <Stack gap="m" p="m" testID={testID ? `${testID}-content` : undefined}>
+    <View gap="m" p="m" testID={testID ? `${testID}-content` : undefined}>
       <PickerHeader description={description} title={label ?? 'Choose date'} />
       <DatePickerMonthNavigation
         displayMonth={displayMonth}
@@ -49,7 +49,7 @@ export function DatePickerContent({
       <Button fullWidth interactionPolicy={interactionPolicy} onPress={onDismiss} variant="ghost">
         Cancel
       </Button>
-    </Stack>
+    </View>
   );
 }
 
@@ -70,7 +70,7 @@ function PickerHeader({
   title: React.ReactNode;
 }) {
   return (
-    <Stack gap="xxs">
+    <View gap="xxs">
       <Text align="center" variant="label" weight="semiBold">
         {title}
       </Text>
@@ -79,7 +79,7 @@ function PickerHeader({
           {description}
         </Text>
       ) : null}
-    </Stack>
+    </View>
   );
 }
 
@@ -101,7 +101,7 @@ function DatePickerMonthNavigation({
   const nextMonth = new Date(displayMonth.getFullYear(), displayMonth.getMonth() + 1, 1);
 
   return (
-    <Stack align="center" direction="row" justify="space-between">
+    <View align="center" direction="row" justify="space-between">
       <Button
         disabled={!canNavigateToMonth(previousMonth, minDate, maxDate)}
         interactionPolicy={interactionPolicy}
@@ -123,22 +123,22 @@ function DatePickerMonthNavigation({
       >
         Next
       </Button>
-    </Stack>
+    </View>
   );
 }
 
 /*** Renders weekday headings for the calendar grid. */
 function DatePickerWeekdays() {
   return (
-    <Stack direction="row" justify="space-between">
+    <View direction="row" justify="space-between">
       {WEEKDAY_LABELS.map((weekday) => (
-        <Box key={weekday} width={DAY_CELL_WIDTH}>
+        <View key={weekday} width={DAY_CELL_WIDTH}>
           <Text align="center" emphasis="muted" variant="caption" weight="semiBold">
             {weekday}
           </Text>
-        </Box>
+        </View>
       ))}
-    </Stack>
+    </View>
   );
 }
 
@@ -161,12 +161,12 @@ function DatePickerCalendar({
   value: DatePickerProps['value'];
 }) {
   return (
-    <Stack direction="row" gap="xs" wrap="wrap">
+    <View direction="row" gap="xs" wrap="wrap">
       {monthDays.map((day, index) => {
-        if (!day) return <Box key={`empty-${index}`} width={DAY_CELL_WIDTH} />;
+        if (!day) return <View key={`empty-${index}`} width={DAY_CELL_WIDTH} />;
         const selected = isSameLocalDay(value, day);
         return (
-          <Box key={day.toISOString()} width={DAY_CELL_WIDTH}>
+          <View key={day.toISOString()} width={DAY_CELL_WIDTH}>
             <Button
               color={selected ? 'primary' : 'neutral'}
               disabled={isDateDisabled(day, minDate, maxDate)}
@@ -178,10 +178,10 @@ function DatePickerCalendar({
             >
               {day.getDate()}
             </Button>
-          </Box>
+          </View>
         );
       })}
-    </Stack>
+    </View>
   );
 }
 

package/src/features/date-picker/composition/DatePickerField.tsx

@@ -2,7 +2,7 @@ import { Field } from '@ankhorage/surface';
 import type React from 'react';
 
 import type { DatePickerProps } from '../../../types/date-picker';
-import { Stack } from '../../layout/public';
+import { View } from '../../layout/public';
 import { Text } from '../../typography/public';
 
 /*** Renders the shared DatePicker field frame around a platform-specific trigger. */
@@ -39,7 +39,7 @@ interface DatePickerFieldProps extends Pick<
 /*** Renders the picker label and optional supporting description. */
 function renderLabel(label: React.ReactNode, description: React.ReactNode | undefined) {
   return (
-    <Stack gap="xs">
+    <View gap="xs">
       <Text variant="label" weight="semiBold">
         {label}
       </Text>
@@ -48,6 +48,6 @@ function renderLabel(label: React.ReactNode, description: React.ReactNode | unde
           {description}
         </Text>
       ) : null}
-    </Stack>
+    </View>
   );
 }

package/src/features/dialog/adapters/inbound/Dialog.tsx

@@ -0,0 +1,70 @@
+import { Modal as SurfaceModal } from '@ankhorage/surface';
+import React from 'react';
+import { StyleSheet } from 'react-native';
+
+import { resolveDialogWidth } from '../../../../internal/recipes';
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { DialogProps } from '../../../../types/dialog';
+import { View } from '../../../layout/public';
+import { Heading, Text } from '../../../typography/public';
+
+/*** Renders the product-level dialog composition on top of the Surface modal primitive. */
+export const Dialog = withZoraThemeScope(DialogInner);
+
+/*** Connects dialog chrome and slots to the generic modal overlay. */
+function DialogInner({
+  themeId: _themeId,
+  mode: _mode,
+  children,
+  title,
+  description,
+  footer,
+  width = 'default',
+  onDismiss,
+  interactionPolicy,
+  ...props
+}: DialogProps) {
+  const hasHeader = title !== undefined || description !== undefined;
+  const stableOnDismiss = useStableCallback(onDismiss);
+
+  return (
+    <SurfaceModal {...props} onDismiss={stableOnDismiss} interactionPolicy={interactionPolicy}>
+      <View maxWidth={resolveDialogWidth(width)} style={styles.content}>
+        <View gap="m">
+          {hasHeader ? (
+            <View gap="xs">
+              {title !== undefined ? <Heading level={3}>{title}</Heading> : null}
+              {description !== undefined ? (
+                <Text emphasis="muted" variant="bodySmall">
+                  {description}
+                </Text>
+              ) : null}
+            </View>
+          ) : null}
+          {children ? <View>{children}</View> : null}
+          {footer ? <View pt="xs">{footer}</View> : null}
+        </View>
+      </View>
+    </SurfaceModal>
+  );
+}
+
+/*** Keeps the dismiss callback identity stable while always invoking the latest handler. */
+function useStableCallback(callback: (() => void) | undefined): (() => void) | undefined {
+  const callbackRef = React.useRef(callback);
+
+  React.useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+
+  return React.useCallback(() => {
+    callbackRef.current?.();
+  }, []);
+}
+
+const styles = StyleSheet.create({
+  content: {
+    alignSelf: 'center',
+    width: '100%',
+  },
+});

package/src/features/dialog/dialogMeta.ts

@@ -0,0 +1,60 @@
+import { CONTAINER_ALLOWED_CHILDREN } from '../../metadata/allowedChildren';
+import type { ZoraComponentMeta } from '../../metadata/types';
+
+export const dialogMeta = {
+  name: 'Dialog',
+  category: 'component',
+  directManifestNode: true,
+  allowedChildren: [...CONTAINER_ALLOWED_CHILDREN],
+  description: 'Modal dialog composition with title, description, content, and optional footer.',
+  blueprint: {
+    label: 'Dialog',
+    defaultProps: { closeOnBackdrop: true, visible: false, width: 'default' },
+  },
+  bindings: {
+    props: {
+      visible: {
+        label: 'Visible',
+        description: 'Whether the dialog is currently visible.',
+        value: { type: 'boolean' },
+        acceptsFallback: true,
+        acceptsTransforms: true,
+      },
+    },
+    events: {
+      dismiss: {
+        label: 'Dismiss',
+        description: 'Runs when the dialog requests dismissal.',
+        payload: { eventType: 'dialog.dismiss', fields: [] },
+      },
+    },
+  },
+  events: {
+    dismiss: { label: 'Dismiss', eventType: 'dialog.dismiss', payloadFields: [] },
+  },
+  slots: {
+    children: { label: 'Content', allowedChildren: [...CONTAINER_ALLOWED_CHILDREN] },
+    footer: {
+      label: 'Footer',
+      allowedChildren: ['Button', 'ButtonGroup', 'Stack', 'Toolbar'],
+    },
+  },
+  props: {
+    visible: { type: 'boolean', category: 'State', label: 'Visible', default: false },
+    title: { type: 'string', category: 'Content', label: 'Title' },
+    description: { type: 'string', category: 'Content', label: 'Description' },
+    closeOnBackdrop: {
+      type: 'boolean',
+      category: 'Behavior',
+      label: 'Close on backdrop',
+      default: true,
+    },
+    width: {
+      type: 'enum',
+      category: 'Layout',
+      label: 'Width',
+      enum: ['narrow', 'default', 'wide'],
+      default: 'default',
+    },
+  },
+} as const satisfies ZoraComponentMeta;

package/src/features/dialog/public.ts

@@ -0,0 +1,2 @@
+export type { DialogProps } from '../../types/dialog';
+export { Dialog } from './adapters/inbound/Dialog';

package/src/features/empty-state/adapters/inbound/EmptyState.tsx

@@ -4,7 +4,7 @@ import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { EmptyStateProps } from '../../../../types/empty-state';
 import { Button } from '../../../button/public';
 import { Card } from '../../../card/public';
-import { Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 
 function EmptyStateInner({
   themeId: _themeId,
@@ -28,9 +28,9 @@ function EmptyStateInner({
       title={title}
       tone="subtle"
     >
-      <Stack gap="m">
+      <View gap="m">
         {primaryAction || secondaryAction ? (
-          <Stack direction={{ base: 'column', md: 'row' }} gap="s">
+          <View direction={{ base: 'column', md: 'row' }} gap="s">
             {primaryAction ? (
               <Button
                 interactionPolicy={interactionPolicy}
@@ -51,10 +51,10 @@ function EmptyStateInner({
                 {secondaryAction.label}
               </Button>
             ) : null}
-          </Stack>
+          </View>
         ) : null}
         {footer}
-      </Stack>
+      </View>
     </Card>
   );
 }

package/src/features/form/adapters/inbound/Form.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { FormProps } from '../../../../types/form';
-import { Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { FormActions } from './FormActions';
 
 function FormInner({
@@ -18,7 +18,7 @@ function FormInner({
   interactionPolicy,
 }: FormProps) {
   return (
-    <Stack gap="m" testID={testID}>
+    <View gap="m" testID={testID}>
       {children}
       <FormActions
         disabled={disabled}
@@ -31,7 +31,7 @@ function FormInner({
       >
         {actions}
       </FormActions>
-    </Stack>
+    </View>
   );
 }
 

package/src/features/form/adapters/inbound/FormActions.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { FormActionsProps } from '../../../../types/form';
 import { Button } from '../../../button/public';
-import { Box, Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 
 function FormActionsInner({
   themeId: _themeId,
@@ -17,7 +17,7 @@ function FormActionsInner({
   interactionPolicy,
 }: FormActionsProps) {
   return (
-    <Stack gap="s" testID={testID}>
+    <View gap="s" testID={testID}>
       <Button
         disabled={disabled}
         fullWidth
@@ -27,8 +27,8 @@ function FormActionsInner({
       >
         {submitLabel}
       </Button>
-      {children ? <Box>{children}</Box> : null}
-    </Stack>
+      {children ? <View>{children}</View> : null}
+    </View>
   );
 }
 

package/src/features/form/adapters/inbound/FormError.tsx

@@ -3,18 +3,18 @@ import React from 'react';
 import { useZoraTheme } from '../../../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { FormErrorProps } from '../../../../types/form';
-import { Box } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { Text } from '../../../typography/public';
 
 function FormErrorInner({ themeId: _themeId, mode: _mode, error, testID }: FormErrorProps) {
   const { theme } = useZoraTheme();
   if (!error) return null;
   return (
-    <Box borderColor={theme.colors.error} borderWidth={1} p="s" radius="m" testID={testID}>
+    <View borderColor={theme.colors.error} borderWidth={1} p="s" radius="m" testID={testID}>
       <Text color="error" variant="bodySmall">
         {error}
       </Text>
-    </Box>
+    </View>
   );
 }
 

package/src/features/form/adapters/inbound/FormField.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { FormFieldProps } from '../../../../types/form';
-import { Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { Text } from '../../../typography/public';
 
 function FormFieldInner({
@@ -21,7 +21,7 @@ function FormFieldInner({
       {...props}
       helperText={helperText}
       label={
-        <Stack gap="xs">
+        <View gap="xs">
           <Text variant="label" weight="semiBold">
             {label}
           </Text>
@@ -30,7 +30,7 @@ function FormFieldInner({
               {description}
             </Text>
           ) : null}
-        </Stack>
+        </View>
       }
     >
       {children}

package/src/features/form/checkbox/adapters/inbound/CheckboxGroup.tsx

@@ -1,10 +1,9 @@
 import { Checkbox } from '@ankhorage/surface';
 import React from 'react';
-import { View } from 'react-native';
 
 import { withZoraThemeScope } from '../../../../../theme/withZoraThemeScope';
 import type { CheckboxGroupOption, CheckboxGroupProps } from '../../../../../types/checkbox';
-import { Stack } from '../../../../layout/public';
+import { View } from '../../../../layout/public';
 import { Text } from '../../../../typography/public';
 
 function CheckboxGroupInner<TValue extends string>({
@@ -34,7 +33,7 @@ function CheckboxGroupInner<TValue extends string>({
         flexWrap: isHorizontal ? 'wrap' : 'nowrap',
       }}
     >
-      <Stack
+      <View
         direction={isHorizontal ? 'row' : 'column'}
         gap={gap}
         wrap={isHorizontal ? 'wrap' : 'nowrap'}
@@ -54,7 +53,7 @@ function CheckboxGroupInner<TValue extends string>({
             interactionPolicy={interactionPolicy}
           />
         ))}
-      </Stack>
+      </View>
     </View>
   );
 }
@@ -108,14 +107,14 @@ function CheckboxGroupItem<TValue extends string>({
         onValueChange(nextValue);
       }}
     >
-      <Stack gap="xs">
+      <View gap="xs">
         <Text>{option.label}</Text>
         {option.description ? (
           <Text emphasis="muted" variant="caption">
             {option.description}
           </Text>
         ) : null}
-      </Stack>
+      </View>
     </Checkbox>
   );
 }

package/src/features/form/formFieldMeta.ts

@@ -3,7 +3,14 @@ export const formFieldMeta = {
   name: 'FormField',
   category: 'component',
   directManifestNode: true,
-  allowedChildren: ['Checkbox', 'CheckboxGroup', 'RadioGroup', 'Select', 'TextInput'],
+  allowedChildren: [
+    'Checkbox',
+    'CheckboxGroup',
+    'RadioGroup',
+    'SearchInput',
+    'Select',
+    'TextInput',
+  ],
   blueprint: { label: 'Form field', defaultProps: { label: 'Label' } },
   bindings: {
     props: {