@ankhorage/zora 15.0.0 → 16.0.0

package/src/featureManifest.test.ts

@@ -12,13 +12,19 @@ test('every selected feature element is directly authorable through its canonica
     const source = await Bun.file(`src/features/${family}/public.ts`).text();
     for (const name of names) {
       const meta = catalog.get(name);
+      const hasAuthorableShape =
+        Object.keys(meta?.props ?? {}).length > 0 || (meta?.allowedChildren.length ?? 0) > 0;
       expect(meta?.directManifestNode, name).toBe(true);
-      expect(Object.keys(meta?.props ?? {}).length, name).toBeGreaterThan(0);
+      expect(hasAuthorableShape, name).toBe(true);
       expect(source, name).toContain(name);
     }
   }
 });
 
+test('feature ownership has no remaining legacy components directory', () => {
+  expect(existsSync('src/components')).toBe(false);
+});
+
 test('form composition has one canonical feature owner', () => {
   expect(existsSync('src/components/form')).toBe(false);
   expect(existsSync('src/patterns/form-field')).toBe(false);
@@ -38,7 +44,7 @@ test('migrated picker and presentation elements have one canonical feature owner
   }
 });
 
-test('interactive authoring retains state and event payload bindings after plugin composition', () => {
+test('existing interactive authoring retains bindings after plugin composition', () => {
   const meta = ZORA_CORE_PLUGIN_METADATA.componentMeta;
   expect(meta.DataTable?.bindings?.props?.sort?.value.type).toBe('object');
   expect(meta.DataTable?.bindings?.props?.rows?.value.type).toBe('array');
@@ -48,6 +54,29 @@ test('interactive authoring retains state and event payload bindings after plugi
     type: 'object',
   });
   expect(meta.BottomSheet?.bindings?.props?.open?.value.type).toBe('boolean');
+});
+
+test('final ownership data components retain bindings after plugin composition', () => {
+  const meta = ZORA_CORE_PLUGIN_METADATA.componentMeta;
+  expect(meta.Dialog?.bindings?.props?.visible?.value.type).toBe('boolean');
+  expect(meta.Dialog?.bindings?.events?.dismiss?.payload?.eventType).toBe('dialog.dismiss');
+  expect(meta.Pagination?.bindings?.props?.page?.value.type).toBe('number');
+  expect(meta.Pagination?.bindings?.events?.pageChange?.payload?.eventType).toBe(
+    'pagination.pageChange',
+  );
+  expect(meta.Rating?.bindings?.props?.value?.value.type).toBe('number');
+});
+
+test('final ownership form and tab components retain bindings after plugin composition', () => {
+  const meta = ZORA_CORE_PLUGIN_METADATA.componentMeta;
+  expect(meta.SearchInput?.bindings?.props?.value?.value.type).toBe('string');
+  expect(meta.SearchInput?.bindings?.events?.submit?.payload?.eventType).toBe('searchInput.submit');
+  expect(meta.Tabs?.bindings?.props?.value?.value.type).toBe('string');
+  expect(meta.Tabs?.bindings?.events?.valueChange?.payload?.eventType).toBe('tabs.valueChange');
+});
+
+test('existing scalar authoring bindings remain available after plugin composition', () => {
+  const meta = ZORA_CORE_PLUGIN_METADATA.componentMeta;
   expect(meta.Heading?.bindings?.props?.level?.value.type).toBe('number');
   expect(meta.Image?.bindings?.props?.radius?.value.type).toBe('unknown');
 });

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 { Box, Stack } 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}>
+      <Box maxWidth={resolveDialogWidth(width)} style={styles.content}>
+        <Stack gap="m">
+          {hasHeader ? (
+            <Stack gap="xs">
+              {title !== undefined ? <Heading level={3}>{title}</Heading> : null}
+              {description !== undefined ? (
+                <Text emphasis="muted" variant="bodySmall">
+                  {description}
+                </Text>
+              ) : null}
+            </Stack>
+          ) : null}
+          {children ? <Box>{children}</Box> : null}
+          {footer ? <Box pt="xs">{footer}</Box> : null}
+        </Stack>
+      </Box>
+    </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/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: {

package/src/{components/search-bar/SearchBar.tsx → features/form/search-input/adapters/inbound/SearchInput.tsx}

@@ -1,14 +1,16 @@
-import React from 'react';
+import { withZoraThemeScope } from '../../../../../theme/withZoraThemeScope';
+import type { SearchInputProps } from '../../../../../types/search-input';
+import { TextInput, type TextInputTrailingAction } from '../../../text-input/public';
 
-import { TextInput, type TextInputTrailingAction } from '../../features/form/text-input/public';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { SearchBarProps } from './types';
+/*** Renders a search-focused text input with clear and submit behavior. */
+export const SearchInput = withZoraThemeScope(SearchInputInner);
 
-function SearchBarInner({
+/*** Connects search semantics to the shared ZORA TextInput control. */
+function SearchInputInner({
   themeId: _themeId,
   mode: _mode,
   testID,
-  value,
+  value = '',
   onValueChange,
   placeholder = 'Search',
   onSubmit,
@@ -18,9 +20,8 @@ function SearchBarInner({
   disabled,
   readOnly,
   interactionPolicy,
-}: SearchBarProps) {
+}: SearchInputProps) {
   const passive = interactionPolicy === 'passive';
-
   const trailingAction: TextInputTrailingAction | undefined =
     clearable && value.length > 0
       ? {
@@ -28,8 +29,7 @@ function SearchBarInner({
           label: 'Clear search',
           onPress: () => {
             if (passive) return;
-
-            onValueChange('');
+            onValueChange?.('');
             onClear?.();
           },
         }
@@ -52,8 +52,3 @@ function SearchBarInner({
     />
   );
 }
-
-/***
- * Search input with leading icon and optional trailing action.
- */
-export const SearchBar = withZoraThemeScope(SearchBarInner);

package/src/features/form/search-input/public.ts

@@ -0,0 +1,2 @@
+export type { SearchInputProps } from '../../../types/search-input';
+export { SearchInput } from './adapters/inbound/SearchInput';

package/src/features/form/search-input/searchInputMeta.ts

@@ -0,0 +1,68 @@
+import type { ZoraComponentMeta } from '../../../metadata/types';
+
+export const searchInputMeta = {
+  name: 'SearchInput',
+  category: 'component',
+  directManifestNode: true,
+  allowedChildren: [],
+  description: 'Search-focused text input with clear and submit events.',
+  blueprint: {
+    label: 'Search input',
+    defaultProps: { clearable: true, placeholder: 'Search', size: 'l', value: '' },
+  },
+  bindings: {
+    props: {
+      value: {
+        label: 'Value',
+        description: 'Current search query.',
+        value: { type: 'string' },
+        acceptsFallback: true,
+        acceptsTransforms: true,
+      },
+    },
+    events: {
+      valueChange: {
+        label: 'Value change',
+        description: 'Runs whenever the search query changes.',
+        payload: {
+          eventType: 'searchInput.valueChange',
+          fields: [{ path: 'value', type: 'string', label: 'Value' }],
+        },
+      },
+      submit: {
+        label: 'Submit',
+        description: 'Runs when the user submits the search query.',
+        payload: {
+          eventType: 'searchInput.submit',
+          fields: [{ path: 'value', type: 'string', label: 'Value' }],
+        },
+      },
+      clear: {
+        label: 'Clear',
+        description: 'Runs when the search query is cleared.',
+        payload: { eventType: 'searchInput.clear', fields: [] },
+      },
+    },
+  },
+  events: {
+    valueChange: {
+      label: 'Value change',
+      eventType: 'searchInput.valueChange',
+      payloadFields: [{ path: 'value', type: 'string', label: 'Value' }],
+    },
+    submit: {
+      label: 'Submit',
+      eventType: 'searchInput.submit',
+      payloadFields: [{ path: 'value', type: 'string', label: 'Value' }],
+    },
+    clear: { label: 'Clear', eventType: 'searchInput.clear', payloadFields: [] },
+  },
+  props: {
+    value: { type: 'string', category: 'Content', label: 'Value', default: '' },
+    placeholder: { type: 'string', category: 'Content', label: 'Placeholder', default: 'Search' },
+    clearable: { type: 'boolean', category: 'Behavior', label: 'Clearable', default: true },
+    size: { type: 'enum', category: 'Style', label: 'Size', enum: ['s', 'm', 'l'], default: 'l' },
+    disabled: { type: 'boolean', category: 'State', label: 'Disabled' },
+    readOnly: { type: 'boolean', category: 'State', label: 'Read only' },
+  },
+} as const satisfies ZoraComponentMeta;

package/src/features/pagination/adapters/inbound/Pagination.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { PaginationProps } from '../../../../types/pagination';
+import { Button } from '../../../button/public';
+import { Stack } from '../../../layout/public';
+import { Text } from '../../../typography/public';
+import { resolvePaginationPage } from '../../utils/resolvePaginationPage';
+import { resolvePaginationState } from '../../utils/resolvePaginationState';
+
+/*** Renders controls for navigating between pages of a finite result set. */
+export const Pagination = withZoraThemeScope(PaginationInner);
+
+/*** Connects normalized pagination state to visible page navigation controls. */
+function PaginationInner({
+  themeId: _themeId,
+  mode: _mode,
+  page,
+  pageCount,
+  onPageChange,
+  disabled = false,
+  siblingCount = 1,
+  boundaryCount = 1,
+  showFirstLast = false,
+  previousLabel = 'Previous',
+  nextLabel = 'Next',
+  firstLabel = 'First',
+  lastLabel = 'Last',
+  compact = false,
+  testID,
+  interactionPolicy,
+}: PaginationProps) {
+  const passive = interactionPolicy === 'passive';
+  const state = resolvePaginationState({ boundaryCount, compact, page, pageCount, siblingCount });
+  const canGoPrevious = state.currentPage > 1;
+  const canGoNext = state.currentPage < state.pageCount;
+  const navigationDisabled = disabled || state.pageCount <= 1;
+
+  const changePage = React.useCallback(
+    (nextPage: number) => {
+      const clampedPage = resolvePaginationPage(nextPage, state.pageCount);
+      if (passive || disabled || clampedPage === state.currentPage) return;
+      onPageChange?.(clampedPage);
+    },
+    [disabled, onPageChange, passive, state.currentPage, state.pageCount],
+  );
+
+  return (
+    <Stack align="center" direction="row" gap="xs" testID={testID}>
+      {showFirstLast ? (
+        <Button
+          disabled={navigationDisabled || state.currentPage === 1}
+          interactionPolicy={interactionPolicy}
+          onPress={() => changePage(1)}
+          size="s"
+          testID={testID ? `${testID}-first` : undefined}
+          variant="ghost"
+        >
+          {firstLabel}
+        </Button>
+      ) : null}
+      <Button
+        disabled={navigationDisabled || !canGoPrevious}
+        interactionPolicy={interactionPolicy}
+        onPress={() => changePage(state.currentPage - 1)}
+        size="s"
+        testID={testID ? `${testID}-previous` : undefined}
+        variant="ghost"
+      >
+        {previousLabel}
+      </Button>
+      {state.items.map((item, index) =>
+        item === 'ellipsis' ? (
+          <Text key={`ellipsis-${index}`} emphasis="muted" variant="bodySmall">
+            …
+          </Text>
+        ) : (
+          <Button
+            color={item === state.currentPage ? 'primary' : 'neutral'}
+            disabled={disabled}
+            interactionPolicy={interactionPolicy}
+            key={item}
+            onPress={() => changePage(item)}
+            size="s"
+            testID={testID ? `${testID}-page-${item}` : undefined}
+            variant={item === state.currentPage ? 'solid' : 'ghost'}
+          >
+            {item}
+          </Button>
+        ),
+      )}
+      <Button
+        disabled={navigationDisabled || !canGoNext}
+        interactionPolicy={interactionPolicy}
+        onPress={() => changePage(state.currentPage + 1)}
+        size="s"
+        testID={testID ? `${testID}-next` : undefined}
+        variant="ghost"
+      >
+        {nextLabel}
+      </Button>
+      {showFirstLast ? (
+        <Button
+          disabled={navigationDisabled || state.currentPage === state.pageCount}
+          interactionPolicy={interactionPolicy}
+          onPress={() => changePage(state.pageCount)}
+          size="s"
+          testID={testID ? `${testID}-last` : undefined}
+          variant="ghost"
+        >
+          {lastLabel}
+        </Button>
+      ) : null}
+    </Stack>
+  );
+}

package/src/features/pagination/paginationMeta.ts

@@ -0,0 +1,54 @@
+import type { ZoraComponentMeta } from '../../metadata/types';
+
+export const paginationMeta = {
+  name: 'Pagination',
+  category: 'component',
+  directManifestNode: true,
+  allowedChildren: [],
+  description: 'Navigates between pages of a finite result set without changing app routes.',
+  blueprint: {
+    label: 'Pagination',
+    defaultProps: { boundaryCount: 1, compact: false, page: 1, pageCount: 10, siblingCount: 1 },
+  },
+  bindings: {
+    props: {
+      page: {
+        label: 'Page',
+        description: 'Current one-based page.',
+        value: { type: 'number' },
+        acceptsFallback: true,
+        acceptsTransforms: true,
+      },
+    },
+    events: {
+      pageChange: {
+        label: 'Page change',
+        description: 'Runs when a new page is requested.',
+        payload: {
+          eventType: 'pagination.pageChange',
+          fields: [{ path: 'page', type: 'number', label: 'Page' }],
+        },
+      },
+    },
+  },
+  events: {
+    pageChange: {
+      label: 'Page change',
+      eventType: 'pagination.pageChange',
+      payloadFields: [{ path: 'page', type: 'number', label: 'Page' }],
+    },
+  },
+  props: {
+    page: { type: 'number', category: 'State', label: 'Page', default: 1 },
+    pageCount: { type: 'number', category: 'Data', label: 'Page count', default: 10 },
+    siblingCount: { type: 'number', category: 'Layout', label: 'Sibling count', default: 1 },
+    boundaryCount: { type: 'number', category: 'Layout', label: 'Boundary count', default: 1 },
+    showFirstLast: { type: 'boolean', category: 'Behavior', label: 'Show first/last' },
+    compact: { type: 'boolean', category: 'Layout', label: 'Compact', default: false },
+    disabled: { type: 'boolean', category: 'State', label: 'Disabled' },
+    previousLabel: { type: 'string', category: 'Content', label: 'Previous label' },
+    nextLabel: { type: 'string', category: 'Content', label: 'Next label' },
+    firstLabel: { type: 'string', category: 'Content', label: 'First label' },
+    lastLabel: { type: 'string', category: 'Content', label: 'Last label' },
+  },
+} as const satisfies ZoraComponentMeta;

package/src/features/pagination/public.ts

@@ -0,0 +1,2 @@
+export type { PaginationProps } from '../../types/pagination';
+export { Pagination } from './adapters/inbound/Pagination';

package/src/features/pagination/utils/resolvePaginationPage.ts

@@ -0,0 +1,6 @@
+/*** Clamps a requested pagination page to the valid one-based page range. */
+export function resolvePaginationPage(value: number, pageCount: number): number {
+  if (!Number.isFinite(value)) return 1;
+
+  return Math.min(Math.max(Math.trunc(value), 1), Math.max(pageCount, 1));
+}

package/src/features/pagination/utils/resolvePaginationState.test.ts

@@ -0,0 +1,29 @@
+import { describe, expect, it } from 'bun:test';
+
+import { resolvePaginationState } from './resolvePaginationState';
+
+describe('resolvePaginationState', () => {
+  it('inserts ellipses between boundaries and siblings', () => {
+    expect(
+      resolvePaginationState({
+        boundaryCount: 1,
+        compact: false,
+        page: 5,
+        pageCount: 10,
+        siblingCount: 1,
+      }).items,
+    ).toEqual([1, 'ellipsis', 4, 5, 6, 'ellipsis', 10]);
+  });
+
+  it('returns only the active page in compact mode', () => {
+    expect(
+      resolvePaginationState({
+        boundaryCount: 1,
+        compact: true,
+        page: 3,
+        pageCount: 8,
+        siblingCount: 1,
+      }).items,
+    ).toEqual([3]);
+  });
+});

package/src/features/pagination/utils/resolvePaginationState.ts

@@ -0,0 +1,70 @@
+import { resolvePaginationPage } from './resolvePaginationPage';
+
+/*** Normalizes pagination input and resolves visible page and ellipsis items. */
+export function resolvePaginationState({
+  page,
+  pageCount,
+  siblingCount,
+  boundaryCount,
+  compact,
+}: PaginationStateInput): PaginationState {
+  const normalizedPageCount = Math.max(0, Math.trunc(Number.isFinite(pageCount) ? pageCount : 0));
+  const currentPage = resolvePaginationPage(page, normalizedPageCount);
+  const safeSiblingCount = normalizeCount(siblingCount, 1);
+  const safeBoundaryCount = normalizeCount(boundaryCount, 1);
+
+  if (normalizedPageCount <= 0) {
+    return { currentPage, items: [], pageCount: normalizedPageCount };
+  }
+
+  if (compact) {
+    return { currentPage, items: [currentPage], pageCount: normalizedPageCount };
+  }
+
+  const boundaries = createRange(1, Math.min(safeBoundaryCount, normalizedPageCount));
+  const trailingBoundaries = createRange(
+    Math.max(normalizedPageCount - safeBoundaryCount + 1, 1),
+    normalizedPageCount,
+  );
+  const siblings = createRange(
+    Math.max(currentPage - safeSiblingCount, 1),
+    Math.min(currentPage + safeSiblingCount, normalizedPageCount),
+  );
+  const pages = [...new Set([...boundaries, ...siblings, ...trailingBoundaries])].sort(
+    (left, right) => left - right,
+  );
+  const items = pages.flatMap<PaginationItem>((nextPage, index) => {
+    const previousPage = index > 0 ? pages.at(index - 1) : undefined;
+    return previousPage !== undefined && nextPage - previousPage > 1
+      ? ['ellipsis', nextPage]
+      : [nextPage];
+  });
+
+  return { currentPage, items, pageCount: normalizedPageCount };
+}
+
+type PaginationItem = number | 'ellipsis';
+
+interface PaginationStateInput {
+  page: number;
+  pageCount: number;
+  siblingCount: number | undefined;
+  boundaryCount: number | undefined;
+  compact: boolean;
+}
+
+interface PaginationState {
+  currentPage: number;
+  pageCount: number;
+  items: readonly PaginationItem[];
+}
+
+/*** Creates an inclusive numeric range for pagination boundaries and siblings. */
+function createRange(start: number, end: number): number[] {
+  return end < start ? [] : Array.from({ length: end - start + 1 }, (_, index) => start + index);
+}
+
+/*** Normalizes optional pagination counts to finite non-negative integers. */
+function normalizeCount(value: number | undefined, fallback: number): number {
+  return value === undefined || !Number.isFinite(value) ? fallback : Math.max(0, Math.trunc(value));
+}