@ankhorage/zora 15.0.0 → 16.0.0

package/src/features/rating/adapters/inbound/Rating.tsx

@@ -0,0 +1,70 @@
+import type { RoleSemantics, SurfaceTheme } from '@ankhorage/surface';
+
+import { Inline } from '../../../../foundation';
+import type { ZoraColor } from '../../../../internal/recipes';
+import { resolveIconSize } from '../../../../internal/recipes';
+import { useZoraTheme } from '../../../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { RatingProps } from '../../../../types/rating';
+import { Icon } from '../../../icon/public';
+import { resolveRatingSegments } from '../../utils/resolveRatingSegments';
+
+/*** Displays a read-only star rating with optional half steps. */
+export const Rating = withZoraThemeScope(RatingInner);
+
+/*** Resolves rating visuals from the active ZORA theme. */
+function RatingInner({
+  themeId: _themeId,
+  mode: _mode,
+  interactionPolicy: _interactionPolicy,
+  testID,
+  value,
+  max = 5,
+  color = 'warning',
+  size = 'm',
+}: RatingProps) {
+  const { theme } = useZoraTheme();
+  const role = resolveRatingRole(theme, color);
+  const segments = resolveRatingSegments({ value, max });
+  const iconSize = resolveIconSize(size);
+
+  return (
+    <Inline align="center" gap="xxs" testID={testID} wrap="nowrap">
+      {segments.map((segment, index) => {
+        const name =
+          segment === 'full' ? 'star' : segment === 'half' ? 'star-half' : 'star-outline';
+        const segmentColor = segment === 'empty' ? theme.semantics.content.muted : role.base;
+        return (
+          <Icon key={`${index}-${segment}`} color={segmentColor} name={name} size={iconSize} />
+        );
+      })}
+    </Inline>
+  );
+}
+
+/*** Resolves the semantic theme role for a ZORA rating color. */
+function resolveRatingRole(theme: SurfaceTheme, color: ZoraColor): RoleSemantics {
+  switch (color) {
+    case 'secondary':
+      return theme.semantics.secondary;
+    case 'tertiary':
+      return theme.semantics.accent;
+    case 'quaternary':
+      return theme.semantics.highlight;
+    case 'error':
+      return theme.semantics.error;
+    case 'info':
+      return theme.semantics.info;
+    case 'primary':
+      return theme.semantics.action.primary;
+    case 'danger':
+      return theme.semantics.action.danger;
+    case 'success':
+      return theme.semantics.success;
+    case 'warning':
+      return theme.semantics.warning;
+    case 'neutral':
+    default:
+      return theme.semantics.action.neutral;
+  }
+}

package/src/features/rating/public.ts

@@ -0,0 +1,2 @@
+export type { RatingProps } from '../../types/rating';
+export { Rating } from './adapters/inbound/Rating';

package/src/features/rating/ratingMeta.ts

@@ -0,0 +1,44 @@
+import type { ZoraComponentMeta } from '../../metadata/types';
+
+export const ratingMeta = {
+  name: 'Rating',
+  category: 'component',
+  directManifestNode: true,
+  allowedChildren: [],
+  description: 'Displays a read-only star-based rating value.',
+  blueprint: { label: 'Rating', defaultProps: { color: 'warning', max: 5, size: 'm', value: 4.5 } },
+  bindings: {
+    props: {
+      value: {
+        label: 'Value',
+        description: 'Current rating value.',
+        value: { type: 'number' },
+        acceptsFallback: true,
+        acceptsTransforms: true,
+      },
+    },
+  },
+  props: {
+    value: { type: 'number', category: 'Data', label: 'Value' },
+    max: { type: 'number', category: 'Data', label: 'Maximum', default: 5 },
+    color: {
+      type: 'enum',
+      category: 'Style',
+      label: 'Color',
+      enum: [
+        'neutral',
+        'primary',
+        'secondary',
+        'tertiary',
+        'quaternary',
+        'success',
+        'warning',
+        'danger',
+        'error',
+        'info',
+      ],
+      default: 'warning',
+    },
+    size: { type: 'enum', category: 'Style', label: 'Size', enum: ['s', 'm', 'l'], default: 'm' },
+  },
+} as const satisfies ZoraComponentMeta;

package/src/features/rating/utils/resolveRatingSegments.test.ts

@@ -0,0 +1,20 @@
+import { describe, expect, it } from 'bun:test';
+
+import { resolveRatingSegments } from './resolveRatingSegments';
+
+describe('resolveRatingSegments', () => {
+  it('supports full and half values', () => {
+    expect(resolveRatingSegments({ max: 5, value: 4.5 })).toEqual([
+      'full',
+      'full',
+      'full',
+      'full',
+      'half',
+    ]);
+  });
+
+  it('clamps values to the rating range', () => {
+    expect(resolveRatingSegments({ max: 3, value: -1 })).toEqual(['empty', 'empty', 'empty']);
+    expect(resolveRatingSegments({ max: 2, value: 4 })).toEqual(['full', 'full']);
+  });
+});

package/src/features/rating/utils/resolveRatingSegments.ts

@@ -0,0 +1,19 @@
+export type RatingSegment = 'empty' | 'full' | 'half';
+
+/*** Resolves a numeric rating into full, half, and empty visual segments. */
+export function resolveRatingSegments({ value, max }: ResolveRatingSegmentsInput): RatingSegment[] {
+  const normalizedMax = Math.max(0, Math.trunc(Number.isFinite(max) ? max : 0));
+  const normalizedValue = Math.min(Math.max(Number.isFinite(value) ? value : 0, 0), normalizedMax);
+
+  return Array.from({ length: normalizedMax }, (_, index) => {
+    const remaining = normalizedValue - index;
+    if (remaining >= 1) return 'full';
+    if (remaining >= 0.5) return 'half';
+    return 'empty';
+  });
+}
+
+interface ResolveRatingSegmentsInput {
+  value: number;
+  max: number;
+}

package/src/features/tabs/adapters/inbound/Tab.tsx

@@ -0,0 +1,26 @@
+import { Tab as SurfaceTab } from '@ankhorage/surface';
+import React from 'react';
+
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { TabProps } from '../../../../types/tabs';
+import { TabsInteractionPolicyContext } from '../../composition/TabsInteractionPolicyContext';
+
+/*** Renders one labeled selectable tab backed by Surface accessibility semantics. */
+export const Tab = withZoraThemeScope(TabInner);
+
+/*** Resolves inherited interaction policy before delegating tab behavior to Surface. */
+function TabInner({
+  themeId: _themeId,
+  mode: _mode,
+  interactionPolicy,
+  label,
+  ...props
+}: TabProps) {
+  const inheritedInteractionPolicy = React.use(TabsInteractionPolicyContext);
+
+  return (
+    <SurfaceTab {...props} interactionPolicy={interactionPolicy ?? inheritedInteractionPolicy}>
+      {label}
+    </SurfaceTab>
+  );
+}

package/src/features/tabs/adapters/inbound/TabList.tsx

@@ -0,0 +1,18 @@
+import { TabList as SurfaceTabList } from '@ankhorage/surface';
+
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { TabListProps } from '../../../../types/tabs';
+
+/*** Renders the accessible list of tabs for a Tabs composition. */
+export const TabList = withZoraThemeScope(TabListInner);
+
+/*** Delegates tablist semantics and keyboard navigation to Surface. */
+function TabListInner({
+  themeId: _themeId,
+  mode: _mode,
+  interactionPolicy: _interactionPolicy,
+  children,
+  testID,
+}: TabListProps) {
+  return <SurfaceTabList testID={testID}>{children}</SurfaceTabList>;
+}

package/src/features/tabs/adapters/inbound/TabPanel.tsx

@@ -0,0 +1,23 @@
+import { TabPanel as SurfaceTabPanel } from '@ankhorage/surface';
+
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { TabPanelProps } from '../../../../types/tabs';
+
+/*** Renders content associated with one selected Tab. */
+export const TabPanel = withZoraThemeScope(TabPanelInner);
+
+/*** Delegates tabpanel visibility and accessibility linkage to Surface. */
+function TabPanelInner({
+  themeId: _themeId,
+  mode: _mode,
+  interactionPolicy: _interactionPolicy,
+  children,
+  value,
+  testID,
+}: TabPanelProps) {
+  return (
+    <SurfaceTabPanel testID={testID} value={value}>
+      {children}
+    </SurfaceTabPanel>
+  );
+}

package/src/features/tabs/adapters/inbound/Tabs.tsx

@@ -0,0 +1,23 @@
+import { Tabs as SurfaceTabs } from '@ankhorage/surface';
+
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { TabsProps } from '../../../../types/tabs';
+import { TabsInteractionPolicyContext } from '../../composition/TabsInteractionPolicyContext';
+
+/*** Provides accessible tab state and interaction policy through the Surface Tabs primitive. */
+export const Tabs = withZoraThemeScope(TabsInner);
+
+/*** Connects ZORA tab composition to the Surface tab state owner. */
+function TabsInner({
+  themeId: _themeId,
+  mode: _mode,
+  interactionPolicy = 'enabled',
+  children,
+  ...props
+}: TabsProps) {
+  return (
+    <TabsInteractionPolicyContext value={interactionPolicy}>
+      <SurfaceTabs {...props}>{children}</SurfaceTabs>
+    </TabsInteractionPolicyContext>
+  );
+}

package/src/features/tabs/composition/TabsInteractionPolicyContext.ts

@@ -0,0 +1,4 @@
+import type { InteractionPolicy } from '@ankhorage/surface';
+import { createContext } from 'react';
+
+export const TabsInteractionPolicyContext = createContext<InteractionPolicy>('enabled');

package/src/features/tabs/public.ts

@@ -0,0 +1,5 @@
+export type { TabListProps, TabPanelProps, TabProps, TabsProps } from '../../types/tabs';
+export { Tab } from './adapters/inbound/Tab';
+export { TabList } from './adapters/inbound/TabList';
+export { TabPanel } from './adapters/inbound/TabPanel';
+export { Tabs } from './adapters/inbound/Tabs';

package/src/features/tabs/tabListMeta.ts

@@ -0,0 +1,10 @@
+import type { ZoraComponentMeta } from '../../metadata/types';
+
+export const tabListMeta = {
+  name: 'TabList',
+  category: 'component',
+  directManifestNode: true,
+  allowedChildren: ['Tab'],
+  description: 'Accessible list of selectable tabs.',
+  props: {},
+} as const satisfies ZoraComponentMeta;

package/src/features/tabs/tabMeta.ts

@@ -0,0 +1,15 @@
+import type { ZoraComponentMeta } from '../../metadata/types';
+
+export const tabMeta = {
+  name: 'Tab',
+  category: 'component',
+  directManifestNode: true,
+  allowedChildren: [],
+  description: 'One labeled selectable tab within a TabList.',
+  blueprint: { label: 'Tab', defaultProps: { label: 'Tab', value: 'tab' } },
+  props: {
+    value: { type: 'string', category: 'State', label: 'Value' },
+    label: { type: 'string', category: 'Content', label: 'Label' },
+    disabled: { type: 'boolean', category: 'State', label: 'Disabled' },
+  },
+} as const satisfies ZoraComponentMeta;

package/src/features/tabs/tabPanelMeta.ts

@@ -0,0 +1,13 @@
+import { CONTAINER_ALLOWED_CHILDREN } from '../../metadata/allowedChildren';
+import type { ZoraComponentMeta } from '../../metadata/types';
+
+export const tabPanelMeta = {
+  name: 'TabPanel',
+  category: 'component',
+  directManifestNode: true,
+  allowedChildren: [...CONTAINER_ALLOWED_CHILDREN],
+  description: 'Content panel associated with one Tab value.',
+  props: {
+    value: { type: 'string', category: 'State', label: 'Value' },
+  },
+} as const satisfies ZoraComponentMeta;

package/src/features/tabs/tabsMeta.ts

@@ -0,0 +1,41 @@
+import type { ZoraComponentMeta } from '../../metadata/types';
+
+export const tabsMeta = {
+  name: 'Tabs',
+  category: 'component',
+  directManifestNode: true,
+  allowedChildren: ['TabList', 'TabPanel'],
+  description: 'Owns the active value for an accessible tablist and its panels.',
+  events: {
+    valueChange: {
+      label: 'Value change',
+      eventType: 'tabs.valueChange',
+      payloadFields: [{ path: 'value', type: 'string', label: 'Value' }],
+    },
+  },
+  bindings: {
+    props: {
+      value: {
+        label: 'Value',
+        description: 'Current active tab value.',
+        value: { type: 'string' },
+        acceptsFallback: true,
+        acceptsTransforms: true,
+      },
+    },
+    events: {
+      valueChange: {
+        label: 'Value change',
+        description: 'Runs when the active tab changes.',
+        payload: {
+          eventType: 'tabs.valueChange',
+          fields: [{ path: 'value', type: 'string', label: 'Value' }],
+        },
+      },
+    },
+  },
+  props: {
+    value: { type: 'string', category: 'State', label: 'Value' },
+    defaultValue: { type: 'string', category: 'State', label: 'Default value' },
+  },
+} as const satisfies ZoraComponentMeta;

package/src/features/toolbar/adapters/inbound/Toolbar.tsx

@@ -0,0 +1,31 @@
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { ToolbarProps } from '../../../../types/toolbar';
+import { Card } from '../../../card/public';
+import { Stack } from '../../../layout/public';
+
+/*** Renders a visible horizontal group of contextual actions and controls. */
+export const Toolbar = withZoraThemeScope(ToolbarInner);
+
+/*** Applies toolbar presentation without owning page placement. */
+function ToolbarInner({
+  themeId: _themeId,
+  mode: _mode,
+  interactionPolicy,
+  children,
+  floating = false,
+  compact = true,
+  testID,
+}: ToolbarProps) {
+  return (
+    <Card
+      compact={compact}
+      interactionPolicy={interactionPolicy}
+      tone={floating ? 'default' : 'subtle'}
+      testID={testID}
+    >
+      <Stack align="center" direction="row" gap="s">
+        {children}
+      </Stack>
+    </Card>
+  );
+}

package/src/features/toolbar/public.ts

@@ -0,0 +1,2 @@
+export type { ToolbarProps } from '../../types/toolbar';
+export { Toolbar } from './adapters/inbound/Toolbar';

package/src/features/toolbar/toolbarMeta.ts

@@ -0,0 +1,24 @@
+import type { ZoraComponentMeta } from '../../metadata/types';
+
+export const toolbarMeta = {
+  name: 'Toolbar',
+  category: 'component',
+  directManifestNode: true,
+  allowedChildren: [
+    'Button',
+    'IconButton',
+    'SearchInput',
+    'Select',
+    'Chip',
+    'ChipGroup',
+    'Text',
+    'Divider',
+  ],
+  description:
+    'Visible horizontal group of contextual actions and controls; layout owns placement.',
+  blueprint: { label: 'Toolbar', defaultProps: { compact: true, floating: false } },
+  props: {
+    floating: { type: 'boolean', category: 'Style', label: 'Floating', default: false },
+    compact: { type: 'boolean', category: 'Layout', label: 'Compact', default: true },
+  },
+} as const satisfies ZoraComponentMeta;

package/src/{components → features/typography}/contentFallback.test.ts

@@ -3,14 +3,8 @@ import { join } from 'node:path';
 
 import { describe, expect, it } from 'bun:test';
 
-const textSource = readFileSync(
-  join(import.meta.dir, '../features/typography/adapters/inbound/Text.tsx'),
-  'utf8',
-);
-const headingSource = readFileSync(
-  join(import.meta.dir, '../features/typography/adapters/inbound/Heading.tsx'),
-  'utf8',
-);
+const textSource = readFileSync(join(import.meta.dir, 'adapters/inbound/Text.tsx'), 'utf8');
+const headingSource = readFileSync(join(import.meta.dir, 'adapters/inbound/Heading.tsx'), 'utf8');
 
 describe('content fallback ownership', () => {
   it('keeps Text free of translation context coupling', () => {

package/src/features/uploader/adapters/inbound/Uploader.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
-import { Modal } from '../../../../components/modal';
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { UploadAsset, UploaderProps, UploadType } from '../../../../types/upload';
 import { Button } from '../../../button/public';
+import { Dialog } from '../../../dialog/public';
 import { FormField } from '../../../form/public';
 import { Icon } from '../../../icon/public';
 import { Image } from '../../../image/public';
@@ -288,7 +288,7 @@ function UploaderInner({
       </FormField>
 
       {canPreviewImage ? (
-        <Modal
+        <Dialog
           closeOnBackdrop
           interactionPolicy={interactionPolicy}
           onDismiss={() => setPreviewOpen(false)}
@@ -308,7 +308,7 @@ function UploaderInner({
               </Button>
             </Stack>
           </Stack>
-        </Modal>
+        </Dialog>
       ) : null}
     </>
   );

package/src/index.ts

@@ -1,15 +1,3 @@
-export type { ModalProps } from './components/modal';
-export { Modal } from './components/modal';
-export type { PaginationProps } from './components/pagination';
-export { Pagination } from './components/pagination';
-export type { RatingProps } from './components/rating';
-export { Rating } from './components/rating';
-export type { SearchBarProps } from './components/search-bar';
-export { SearchBar } from './components/search-bar';
-export type { TabItem, TabsProps, TabsVariant } from './components/tabs';
-export { Tabs } from './components/tabs';
-export type { ToolbarActionProps, ToolbarPosition, ToolbarProps } from './components/toolbar';
-export { Toolbar, ToolbarAction } from './components/toolbar';
 export { ZORA_CORE_PLUGIN } from './corePlugin';
 export { ZORA_CORE_PLUGIN_METADATA } from './corePluginMetadata';
 export {
@@ -116,6 +104,7 @@ export {
   type DatePickerProps,
   type DatePickerValue,
 } from './features/date-picker/public';
+export { Dialog, type DialogProps } from './features/dialog/public';
 export {
   EmptyState,
   type EmptyStateAction,
@@ -161,6 +150,7 @@ export {
   type RadioGroupProps,
   type RadioProps,
 } from './features/form/radio/public';
+export { SearchInput, type SearchInputProps } from './features/form/search-input/public';
 export { Select, type SelectOption, type SelectProps } from './features/form/select/public';
 export {
   TextInput,
@@ -220,6 +210,7 @@ export type {
 } from './features/list/public';
 export { FlatList, SectionList } from './features/list/public';
 export { MissingElement, type MissingElementProps } from './features/missing-element/public';
+export { Pagination, type PaginationProps } from './features/pagination/public';
 export {
   PopoverMenu,
   type PopoverMenuAction,
@@ -232,6 +223,7 @@ export {
   ProgressRing,
   type ProgressRingProps,
 } from './features/progress/public';
+export { Rating, type RatingProps } from './features/rating/public';
 export {
   Skeleton,
   SkeletonCard,
@@ -247,6 +239,16 @@ export {
 } from './features/skeleton/public';
 export type { SurfaceProps, SurfaceVariant } from './features/surface/public';
 export { Surface } from './features/surface/public';
+export {
+  Tab,
+  TabList,
+  type TabListProps,
+  TabPanel,
+  type TabPanelProps,
+  type TabProps,
+  Tabs,
+  type TabsProps,
+} from './features/tabs/public';
 export {
   TimePicker,
   type TimePickerProps,
@@ -260,6 +262,7 @@ export type {
   ToastStatus,
 } from './features/toast/public';
 export { Toast, ToastProvider, useToast } from './features/toast/public';
+export { Toolbar, type ToolbarProps } from './features/toolbar/public';
 export type {
   HeadingAlign,
   HeadingColor,

package/src/metadata/allowedChildren.ts

@@ -17,6 +17,12 @@ export const CONTAINER_ALLOWED_CHILDREN = [
   'ChipGroup',
   'DataTable',
   'DatePicker',
+  'Dialog',
+  'Pagination',
+  'Rating',
+  'SearchInput',
+  'Tabs',
+  'Toolbar',
   'Skeleton',
   'SkeletonCard',
   'SkeletonList',

package/src/metadata/componentMeta.test.ts

@@ -106,6 +106,7 @@ describe('ZORA_COMPONENT_META invariants', () => {
       'Checkbox',
       'CheckboxGroup',
       'RadioGroup',
+      'SearchInput',
       'Select',
       'TextInput',
     ]);
@@ -152,6 +153,10 @@ describe('ZORA_COMPONENT_META invariants', () => {
       'ChipGroup',
       'DataTable',
       'DatePicker',
+      'Pagination',
+      'Rating',
+      'SearchInput',
+      'Tab',
       'Skeleton',
       'SkeletonCard',
       'SkeletonList',
@@ -191,6 +196,7 @@ describe('ZORA_COMPONENT_META invariants', () => {
     const expectedContainerNodes = new Set([
       'Accordion',
       'AccordionItem',
+      'Dialog',
       'Form',
       'Gradient',
       'Surface',
@@ -209,12 +215,15 @@ describe('ZORA_COMPONENT_META invariants', () => {
       'PostCard',
       'MessageBubble',
       'Box',
-
       'Stack',
       'Grid',
       'Container',
       'BarcodeScannerView',
       'ContentRail',
+      'Tabs',
+      'TabList',
+      'TabPanel',
+      'Toolbar',
     ]);
 
     for (const [key, meta] of Object.entries(ZORA_COMPONENT_META)) {
@@ -239,6 +248,14 @@ describe('ZORA_COMPONENT_META invariants', () => {
     }
   });
 
+  test('Tabs constrain authored content to the accessible tab hierarchy', () => {
+    expect(ZORA_COMPONENT_META.Tabs.allowedChildren).toEqual(['TabList', 'TabPanel']);
+    expect(ZORA_COMPONENT_META.TabList.allowedChildren).toEqual(['Tab']);
+    expect(ZORA_COMPONENT_META.Tab.allowedChildren).toEqual([]);
+    expect(ZORA_COMPONENT_META.TabPanel.allowedChildren.length).toBeGreaterThan(0);
+    expect(ZORA_COMPONENT_META.Tabs.events?.valueChange?.eventType).toBe('tabs.valueChange');
+  });
+
   test('Accordion constrains authored items to its canonical hierarchy', () => {
     expect(ZORA_COMPONENT_META.Accordion.directManifestNode).toBe(true);
     expect(ZORA_COMPONENT_META.Accordion.allowedChildren).toEqual(['AccordionItem']);