@ankhorage/zora 1.3.0 → 1.4.1

package/src/metadata/componentMeta.ts

@@ -0,0 +1,149 @@
+import { appBarMeta } from '../components/app-bar/meta';
+import { avatarMeta } from '../components/avatar/meta';
+import { avatarGroupMeta } from '../components/avatar-group/meta';
+import { badgeMeta } from '../components/badge/meta';
+import { buttonMeta } from '../components/button/meta';
+import { cardMeta } from '../components/card/meta';
+import { checkboxGroupMeta, checkboxMeta } from '../components/checkbox/meta';
+import { chipMeta } from '../components/chip/meta';
+import { chipGroupMeta } from '../components/chip-group/meta';
+import { drawerMeta } from '../components/drawer/meta';
+import { formActionsMeta, formErrorMeta, formFieldMeta, formMeta } from '../components/form/meta';
+import { headingMeta } from '../components/heading/meta';
+import { iconMeta } from '../components/icon/meta';
+import { iconButtonMeta } from '../components/icon-button/meta';
+import { imageMeta } from '../components/image/meta';
+import { inputMeta } from '../components/input/meta';
+import { mediaCardMeta } from '../components/media-card/meta';
+import { metricCardMeta } from '../components/metric-card/meta';
+import { modalMeta } from '../components/modal/meta';
+import { navigationItemMeta } from '../components/navigation-item/meta';
+import { navigationListMeta } from '../components/navigation-list/meta';
+import { progressMeta } from '../components/progress/meta';
+import { radioGroupMeta, radioMeta } from '../components/radio/meta';
+import { ratingMeta } from '../components/rating/meta';
+import { searchBarMeta } from '../components/search-bar/meta';
+import { selectMeta } from '../components/select/meta';
+import { tabsMeta } from '../components/tabs/meta';
+import { textMeta } from '../components/text/meta';
+import { textareaMeta } from '../components/textarea/meta';
+import { toolbarActionMeta, toolbarMeta } from '../components/toolbar/meta';
+import { foundationMetas } from '../foundation/meta';
+import { appShellMeta } from '../layout/app-shell/meta';
+import { authLayoutMeta } from '../layout/auth-layout/meta';
+import { pageMeta } from '../layout/page/meta';
+import { pageHeaderMeta } from '../layout/page-header/meta';
+import { pageSectionMeta } from '../layout/page-section/meta';
+import { settingsLayoutMeta } from '../layout/settings-layout/meta';
+import { sidebarLayoutMeta } from '../layout/sidebar-layout/meta';
+import { topbarLayoutMeta } from '../layout/topbar-layout/meta';
+import {
+  forgotPasswordFormMeta,
+  otpFormMeta,
+  signInFormMeta,
+  signUpFormMeta,
+} from '../patterns/auth/meta';
+import { collectionEditorMeta } from '../patterns/collection-editor/meta';
+import { confirmDialogMeta } from '../patterns/confirm-dialog/meta';
+import { disclosureSectionMeta } from '../patterns/disclosure-section/meta';
+import { emptyStateMeta } from '../patterns/empty-state/meta';
+import { filterBarMeta } from '../patterns/filter-bar/meta';
+import { heroMeta } from '../patterns/hero/meta';
+import { imagePreviewMeta } from '../patterns/image-preview/meta';
+import { imageUploadFieldMeta } from '../patterns/image-upload-field/meta';
+import { inspectorFieldMeta } from '../patterns/inspector-field/meta';
+import { listMeta, listRowMeta, listSectionMeta } from '../patterns/list/meta';
+import { noticeMeta } from '../patterns/notice/meta';
+import { panelMeta } from '../patterns/panel/meta';
+import { responsivePanelMeta } from '../patterns/responsive-panel/meta';
+import { sectionHeaderMeta } from '../patterns/section-header/meta';
+import { selectableItemMeta, selectionProviderMeta } from '../patterns/selection/meta';
+import { settingsRowMeta } from '../patterns/settings-row/meta';
+import { switchFieldMeta } from '../patterns/switch-field/meta';
+import { themeComposerMeta } from '../patterns/theme-composer/meta';
+import { paletteItemMeta, tileGridMeta } from '../patterns/tile-grid/meta';
+import { timelineMeta } from '../patterns/timeline/meta';
+import { treeItemMeta, treeViewMeta } from '../patterns/tree-view/meta';
+import { zoraDrawerContentMeta } from '../patterns/zora-drawer-content/meta';
+import { zoraTabBarMeta } from '../patterns/zora-tab-bar/meta';
+import type { ZoraComponentMetaRegistry } from './types';
+
+export const ZORA_COMPONENT_META: ZoraComponentMetaRegistry = {
+  ...foundationMetas,
+  AppBar: appBarMeta,
+  Avatar: avatarMeta,
+  AvatarGroup: avatarGroupMeta,
+  Badge: badgeMeta,
+  Button: buttonMeta,
+  Card: cardMeta,
+  Checkbox: checkboxMeta,
+  CheckboxGroup: checkboxGroupMeta,
+  Chip: chipMeta,
+  ChipGroup: chipGroupMeta,
+  Drawer: drawerMeta,
+  Form: formMeta,
+  FormActions: formActionsMeta,
+  FormError: formErrorMeta,
+  FormField: formFieldMeta,
+  Heading: headingMeta,
+  Icon: iconMeta,
+  IconButton: iconButtonMeta,
+  Image: imageMeta,
+  Input: inputMeta,
+  MediaCard: mediaCardMeta,
+  MetricCard: metricCardMeta,
+  Modal: modalMeta,
+  NavigationItem: navigationItemMeta,
+  NavigationList: navigationListMeta,
+  Progress: progressMeta,
+  Radio: radioMeta,
+  RadioGroup: radioGroupMeta,
+  Rating: ratingMeta,
+  SearchBar: searchBarMeta,
+  Select: selectMeta,
+  Tabs: tabsMeta,
+  Text: textMeta,
+  Textarea: textareaMeta,
+  Toolbar: toolbarMeta,
+  ToolbarAction: toolbarActionMeta,
+  AppShell: appShellMeta,
+  AuthLayout: authLayoutMeta,
+  Page: pageMeta,
+  PageHeader: pageHeaderMeta,
+  PageSection: pageSectionMeta,
+  SettingsLayout: settingsLayoutMeta,
+  SidebarLayout: sidebarLayoutMeta,
+  TopbarLayout: topbarLayoutMeta,
+  ForgotPasswordForm: forgotPasswordFormMeta,
+  OtpForm: otpFormMeta,
+  SignInForm: signInFormMeta,
+  SignUpForm: signUpFormMeta,
+  CollectionEditor: collectionEditorMeta,
+  ConfirmDialog: confirmDialogMeta,
+  DisclosureSection: disclosureSectionMeta,
+  EmptyState: emptyStateMeta,
+  FilterBar: filterBarMeta,
+  Hero: heroMeta,
+  ImagePreview: imagePreviewMeta,
+  ImageUploadField: imageUploadFieldMeta,
+  InspectorField: inspectorFieldMeta,
+  List: listMeta,
+  ListRow: listRowMeta,
+  ListSection: listSectionMeta,
+  Notice: noticeMeta,
+  Panel: panelMeta,
+  ResponsivePanel: responsivePanelMeta,
+  SectionHeader: sectionHeaderMeta,
+  SelectableItem: selectableItemMeta,
+  SelectionProvider: selectionProviderMeta,
+  SettingsRow: settingsRowMeta,
+  SwitchField: switchFieldMeta,
+  ThemeComposer: themeComposerMeta,
+  PaletteItem: paletteItemMeta,
+  TileGrid: tileGridMeta,
+  Timeline: timelineMeta,
+  TreeItem: treeItemMeta,
+  TreeView: treeViewMeta,
+  ZoraDrawerContent: zoraDrawerContentMeta,
+  ZoraTabBar: zoraTabBarMeta,
+};

package/src/metadata/index.ts

@@ -0,0 +1,13 @@
+export { ZORA_COMPONENT_META } from './componentMeta';
+export type {
+  ZoraComponentBlueprint,
+  ZoraComponentCategory,
+  ZoraComponentI18nMeta,
+  ZoraComponentMeta,
+  ZoraComponentMetaRegistry,
+  ZoraComponentPropArrayItemSchema,
+  ZoraComponentPropSchema,
+  ZoraComponentPropType,
+  ZoraComponentPropValue,
+  ZoraComponentSlotMeta,
+} from './types';

package/src/metadata/types.ts

@@ -0,0 +1,74 @@
+export type ZoraComponentCategory = 'foundation' | 'component' | 'pattern' | 'layout';
+
+export type ZoraComponentPropType =
+  | 'string'
+  | 'number'
+  | 'boolean'
+  | 'enum'
+  | 'color'
+  | 'spacing'
+  | 'radius'
+  | 'shadow'
+  | 'typographySize'
+  | 'typographyWeight'
+  | 'action'
+  | 'imageAsset'
+  | 'array';
+
+export type ZoraComponentPropValue =
+  | string
+  | number
+  | boolean
+  | null
+  | readonly ZoraComponentPropValue[]
+  | { readonly [key: string]: ZoraComponentPropValue };
+
+export interface ZoraComponentPropArrayItemSchema {
+  key: string;
+  schema: ZoraComponentPropSchema;
+}
+
+export interface ZoraComponentPropSchema {
+  type: ZoraComponentPropType;
+  category: string;
+  label?: string;
+  enum?: readonly (string | number)[];
+  default?: ZoraComponentPropValue;
+  itemSchema?: readonly ZoraComponentPropArrayItemSchema[];
+}
+
+export interface ZoraComponentBlueprint {
+  label: string;
+  icon?: {
+    name: string;
+    provider?: string;
+  };
+  defaultProps?: Readonly<Record<string, ZoraComponentPropValue>>;
+}
+
+export interface ZoraComponentI18nMeta {
+  fields: readonly {
+    keyProp: string;
+    defaultTextProp: string;
+  }[];
+}
+
+export interface ZoraComponentSlotMeta {
+  label?: string;
+  allowedChildren?: readonly string[];
+}
+
+export interface ZoraComponentMeta {
+  name: string;
+  category: ZoraComponentCategory;
+  description?: string;
+  directManifestNode: boolean;
+  allowedChildren: readonly string[];
+  blueprint?: ZoraComponentBlueprint;
+  i18n?: ZoraComponentI18nMeta;
+  slots?: Readonly<Record<string, ZoraComponentSlotMeta>>;
+  note?: string;
+  props: Readonly<Record<string, ZoraComponentPropSchema>>;
+}
+
+export type ZoraComponentMetaRegistry = Readonly<Record<string, ZoraComponentMeta>>;

package/src/patterns/auth/meta.ts

@@ -0,0 +1,39 @@
+import type { ZoraComponentMeta } from '../../metadata';
+
+const AUTH_NOTE = 'Auth pattern component; not represented as a manifest node in v1.';
+
+export const forgotPasswordFormMeta = {
+  name: 'ForgotPasswordForm',
+  category: 'pattern',
+  directManifestNode: false,
+  allowedChildren: [],
+  note: AUTH_NOTE,
+  props: {},
+} as const satisfies ZoraComponentMeta;
+
+export const otpFormMeta = {
+  name: 'OtpForm',
+  category: 'pattern',
+  directManifestNode: false,
+  allowedChildren: [],
+  note: AUTH_NOTE,
+  props: {},
+} as const satisfies ZoraComponentMeta;
+
+export const signInFormMeta = {
+  name: 'SignInForm',
+  category: 'pattern',
+  directManifestNode: false,
+  allowedChildren: [],
+  note: AUTH_NOTE,
+  props: {},
+} as const satisfies ZoraComponentMeta;
+
+export const signUpFormMeta = {
+  name: 'SignUpForm',
+  category: 'pattern',
+  directManifestNode: false,
+  allowedChildren: [],
+  note: AUTH_NOTE,
+  props: {},
+} as const satisfies ZoraComponentMeta;

package/src/patterns/collection-editor/meta.ts

@@ -0,0 +1,10 @@
+import type { ZoraComponentMeta } from '../../metadata';
+
+export const collectionEditorMeta = {
+  name: 'CollectionEditor',
+  category: 'pattern',
+  directManifestNode: false,
+  allowedChildren: [],
+  note: 'Specialized editing pattern; not represented as a manifest node in v1.',
+  props: {},
+} as const satisfies ZoraComponentMeta;

package/src/patterns/confirm-dialog/meta.ts

@@ -0,0 +1,10 @@
+import type { ZoraComponentMeta } from '../../metadata';
+
+export const confirmDialogMeta = {
+  name: 'ConfirmDialog',
+  category: 'pattern',
+  directManifestNode: false,
+  allowedChildren: [],
+  note: 'Dialog pattern; not represented as a manifest node in v1.',
+  props: {},
+} as const satisfies ZoraComponentMeta;

package/src/patterns/disclosure-section/meta.ts

@@ -0,0 +1,10 @@
+import type { ZoraComponentMeta } from '../../metadata';
+
+export const disclosureSectionMeta = {
+  name: 'DisclosureSection',
+  category: 'pattern',
+  directManifestNode: false,
+  allowedChildren: [],
+  note: 'Disclosure pattern; not represented as a manifest node in v1.',
+  props: {},
+} as const satisfies ZoraComponentMeta;

package/src/patterns/empty-state/meta.ts

@@ -0,0 +1,34 @@
+import type { ZoraComponentMeta } from '../../metadata';
+
+export const emptyStateMeta = {
+  name: 'EmptyState',
+  category: 'pattern',
+  directManifestNode: true,
+  allowedChildren: [],
+  blueprint: {
+    label: 'Empty state',
+    defaultProps: {
+      title: 'Nothing here yet',
+      description: 'Try adding your first item.',
+    },
+  },
+  props: {
+    title: {
+      type: 'string',
+      category: 'Content',
+      label: 'Title',
+      default: 'Nothing here yet',
+    },
+    description: {
+      type: 'string',
+      category: 'Content',
+      label: 'Description',
+      default: 'Try adding your first item.',
+    },
+    eyebrow: {
+      type: 'string',
+      category: 'Content',
+      label: 'Eyebrow',
+    },
+  },
+} as const satisfies ZoraComponentMeta;

package/src/patterns/filter-bar/meta.ts

@@ -0,0 +1,10 @@
+import type { ZoraComponentMeta } from '../../metadata';
+
+export const filterBarMeta = {
+  name: 'FilterBar',
+  category: 'pattern',
+  directManifestNode: false,
+  allowedChildren: [],
+  note: 'Filtering pattern; not represented as a manifest node in v1.',
+  props: {},
+} as const satisfies ZoraComponentMeta;

package/src/patterns/hero/Hero.tsx

@@ -0,0 +1,112 @@
+import React from 'react';
+
+import { Button } from '../../components/button';
+import { Card } from '../../components/card';
+import { Heading } from '../../components/heading';
+import { Text } from '../../components/text';
+import { Box, Stack } from '../../foundation';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import type { HeroAction, HeroAlign, HeroLayout, HeroProps } from './types';
+
+function HeroInner({
+  themeId: _themeId,
+  mode: _mode,
+  title,
+  description,
+  eyebrow,
+  primaryAction,
+  secondaryAction,
+  media,
+  footer,
+  align = 'start',
+  layout = 'split',
+  tone = 'subtle',
+  compact = false,
+  testID,
+}: HeroProps) {
+  const hasActions = primaryAction !== undefined || secondaryAction !== undefined;
+  const hasMedia = media !== undefined;
+  const direction = resolveDirection(layout, hasMedia);
+  const contentAlign = resolveContentAlign(align);
+  const textAlign = align === 'center' ? 'center' : undefined;
+  const mediaFirst = layout === 'mediaFirst';
+
+  const content = (
+    <Box flex={1}>
+      <Stack align={contentAlign} gap={compact ? 's' : 'm'}>
+        <Stack align={contentAlign} gap="xs">
+          {eyebrow !== undefined ? (
+            <Text align={textAlign} tone="primary" variant="eyebrow">
+              {eyebrow}
+            </Text>
+          ) : null}
+          <Heading
+            align={textAlign}
+            level={1}
+            size={{ base: 'h2', md: compact ? 'h2' : 'display' }}
+          >
+            {title}
+          </Heading>
+          {description !== undefined ? (
+            <Text
+              tone="muted"
+              align={textAlign}
+              variant={{ base: 'body', md: compact ? 'body' : 'lead' }}
+            >
+              {description}
+            </Text>
+          ) : null}
+        </Stack>
+
+        {hasActions ? (
+          <Stack
+            align={contentAlign}
+            direction={{ base: 'column', md: 'row' }}
+            gap="s"
+            justify={align === 'center' ? 'center' : 'flex-start'}
+          >
+            {primaryAction !== undefined ? renderAction(primaryAction, 'primary') : null}
+            {secondaryAction !== undefined ? renderAction(secondaryAction, 'secondary') : null}
+          </Stack>
+        ) : null}
+
+        {footer}
+      </Stack>
+    </Box>
+  );
+
+  const mediaSlot = hasMedia ? <Box flex={1}>{media}</Box> : null;
+
+  return (
+    <Card compact={compact} testID={testID} tone={tone}>
+      <Stack align="center" direction={direction} gap={compact ? 'm' : 'l'}>
+        {mediaFirst ? mediaSlot : content}
+        {mediaFirst ? content : mediaSlot}
+      </Stack>
+    </Card>
+  );
+}
+
+function renderAction(action: HeroAction, role: 'primary' | 'secondary') {
+  return (
+    <Button
+      disabled={action.disabled}
+      emphasis={action.emphasis ?? (role === 'primary' ? 'solid' : 'soft')}
+      onPress={action.onPress}
+      tone={action.tone ?? (role === 'primary' ? 'primary' : 'neutral')}
+    >
+      {action.label}
+    </Button>
+  );
+}
+
+function resolveContentAlign(align: HeroAlign) {
+  return align === 'center' ? 'center' : 'flex-start';
+}
+
+function resolveDirection(layout: HeroLayout, hasMedia: boolean) {
+  if (!hasMedia || layout === 'stack') return 'column' as const;
+  return { base: 'column', md: 'row' } as const;
+}
+
+export const Hero = withZoraThemeScope(HeroInner);

package/src/patterns/hero/index.ts

@@ -0,0 +1,2 @@
+export { Hero } from './Hero';
+export type { HeroAction, HeroAlign, HeroLayout, HeroProps, HeroTone } from './types';

package/src/patterns/hero/meta.ts

@@ -0,0 +1,95 @@
+import type { ZoraComponentMeta } from '../../metadata';
+
+export const heroMeta = {
+  name: 'Hero',
+  category: 'pattern',
+  description: 'Landing-page and section hero with title copy, actions, and optional media.',
+  directManifestNode: true,
+  allowedChildren: [],
+  blueprint: {
+    label: 'Hero',
+    icon: { name: 'sparkles-outline' },
+    defaultProps: {
+      eyebrow: 'New release',
+      title: 'Build product screens faster',
+      description: 'Use a responsive hero pattern with strong defaults and structured actions.',
+      align: 'start',
+      layout: 'split',
+      tone: 'subtle',
+    },
+  },
+  i18n: {
+    fields: [
+      { keyProp: 'eyebrowI18nKey', defaultTextProp: 'eyebrow' },
+      { keyProp: 'titleI18nKey', defaultTextProp: 'title' },
+      { keyProp: 'descriptionI18nKey', defaultTextProp: 'description' },
+    ],
+  },
+  slots: {
+    media: {
+      label: 'Media',
+      allowedChildren: ['Image', 'Card', 'MetricCard', 'MediaCard'],
+    },
+    footer: {
+      label: 'Footer',
+      allowedChildren: ['Badge', 'Text', 'AvatarGroup'],
+    },
+  },
+  props: {
+    eyebrow: {
+      type: 'string',
+      category: 'Content',
+      label: 'Eyebrow',
+      default: 'New release',
+    },
+    title: {
+      type: 'string',
+      category: 'Content',
+      label: 'Title',
+      default: 'Build product screens faster',
+    },
+    description: {
+      type: 'string',
+      category: 'Content',
+      label: 'Description',
+      default: 'Use a responsive hero pattern with strong defaults and structured actions.',
+    },
+    align: {
+      type: 'enum',
+      category: 'Layout',
+      label: 'Alignment',
+      enum: ['start', 'center'],
+      default: 'start',
+    },
+    layout: {
+      type: 'enum',
+      category: 'Layout',
+      label: 'Layout',
+      enum: ['stack', 'split', 'mediaFirst'],
+      default: 'split',
+    },
+    tone: {
+      type: 'enum',
+      category: 'Appearance',
+      label: 'Tone',
+      enum: ['default', 'subtle', 'outline'],
+      default: 'subtle',
+    },
+    compact: {
+      type: 'boolean',
+      category: 'Layout',
+      label: 'Compact',
+      default: false,
+    },
+    primaryAction: {
+      type: 'action',
+      category: 'Actions',
+      label: 'Primary action',
+    },
+    secondaryAction: {
+      type: 'action',
+      category: 'Actions',
+      label: 'Secondary action',
+    },
+  },
+} as const satisfies ZoraComponentMeta;

package/src/patterns/hero/types.ts

@@ -0,0 +1,30 @@
+import type React from 'react';
+
+import type { ZoraEmphasis, ZoraTone } from '../../internal/recipes';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export type HeroAlign = 'start' | 'center';
+export type HeroLayout = 'stack' | 'split' | 'mediaFirst';
+export type HeroTone = 'default' | 'subtle' | 'outline';
+
+export interface HeroAction {
+  label: React.ReactNode;
+  onPress: () => void;
+  tone?: ZoraTone;
+  emphasis?: ZoraEmphasis;
+  disabled?: boolean;
+}
+
+export interface HeroProps extends ZoraBaseProps {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  eyebrow?: React.ReactNode;
+  primaryAction?: HeroAction;
+  secondaryAction?: HeroAction;
+  media?: React.ReactNode;
+  footer?: React.ReactNode;
+  align?: HeroAlign;
+  layout?: HeroLayout;
+  tone?: HeroTone;
+  compact?: boolean;
+}

package/src/patterns/image-preview/meta.ts

@@ -0,0 +1,10 @@
+import type { ZoraComponentMeta } from '../../metadata';
+
+export const imagePreviewMeta = {
+  name: 'ImagePreview',
+  category: 'pattern',
+  directManifestNode: false,
+  allowedChildren: [],
+  note: 'Media pattern; not represented as a manifest node in v1.',
+  props: {},
+} as const satisfies ZoraComponentMeta;

package/src/patterns/image-upload-field/meta.ts

@@ -0,0 +1,10 @@
+import type { ZoraComponentMeta } from '../../metadata';
+
+export const imageUploadFieldMeta = {
+  name: 'ImageUploadField',
+  category: 'pattern',
+  directManifestNode: false,
+  allowedChildren: [],
+  note: 'Media upload pattern; not represented as a manifest node in v1.',
+  props: {},
+} as const satisfies ZoraComponentMeta;

package/src/patterns/inspector-field/meta.ts

@@ -0,0 +1,10 @@
+import type { ZoraComponentMeta } from '../../metadata';
+
+export const inspectorFieldMeta = {
+  name: 'InspectorField',
+  category: 'pattern',
+  directManifestNode: false,
+  allowedChildren: [],
+  note: 'Inspector pattern; not represented as a manifest node in v1.',
+  props: {},
+} as const satisfies ZoraComponentMeta;

package/src/patterns/list/meta.ts

@@ -0,0 +1,30 @@
+import type { ZoraComponentMeta } from '../../metadata';
+
+const LIST_NOTE = 'List pattern component; not represented as a manifest node in v1.';
+
+export const listMeta = {
+  name: 'List',
+  category: 'pattern',
+  directManifestNode: false,
+  allowedChildren: [],
+  note: LIST_NOTE,
+  props: {},
+} as const satisfies ZoraComponentMeta;
+
+export const listRowMeta = {
+  name: 'ListRow',
+  category: 'pattern',
+  directManifestNode: false,
+  allowedChildren: [],
+  note: LIST_NOTE,
+  props: {},
+} as const satisfies ZoraComponentMeta;
+
+export const listSectionMeta = {
+  name: 'ListSection',
+  category: 'pattern',
+  directManifestNode: false,
+  allowedChildren: [],
+  note: LIST_NOTE,
+  props: {},
+} as const satisfies ZoraComponentMeta;