@ankhorage/zora 7.0.0 → 9.0.0

package/src/components/avatar-group/AvatarGroup.tsx

@@ -1,78 +0,0 @@
-import React from 'react';
-
-import { Box, Stack } from '../../foundation';
-import { useZoraTheme } from '../../theme/useZoraTheme';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import { Avatar } from '../avatar';
-import type { AvatarGroupItem, AvatarGroupProps } from './types';
-
-function defaultOverflowLabel(overflowCount: number): string {
-  return `+${overflowCount}`;
-}
-
-function AvatarGroupInner({
-  themeId: _themeId,
-  mode: _mode,
-  interactionPolicy: _interactionPolicy,
-  testID,
-  items,
-  max = 4,
-  size = 's',
-  shape = 'circle',
-  overflowLabel = defaultOverflowLabel,
-}: AvatarGroupProps) {
-  const { theme } = useZoraTheme();
-
-  const visibleItems = items.slice(0, max);
-  const overflowCount = Math.max(0, items.length - visibleItems.length);
-  const overlap =
-    size === 'xs' ? 8 : size === 's' ? 10 : size === 'm' ? 12 : size === 'l' ? 14 : 16;
-  const borderColor = theme.semantics.surface.default;
-
-  const renderItem = (item: AvatarGroupItem, index: number) => (
-    <Box
-      key={item.id ?? `${index}`}
-      ml={index === 0 ? 0 : -overlap}
-      radius="full"
-      borderWidth={2}
-      borderColor={borderColor}
-    >
-      <Avatar
-        iconFallback={item.iconFallback}
-        initials={item.initials}
-        label={item.label}
-        name={item.name}
-        shape={shape}
-        size={size}
-        source={item.source}
-        color={item.color}
-      />
-    </Box>
-  );
-
-  return (
-    <Stack align="center" direction="row" testID={testID} wrap="nowrap">
-      {visibleItems.map(renderItem)}
-      {overflowCount > 0 ? (
-        <Box
-          ml={visibleItems.length === 0 ? 0 : -overlap}
-          radius="full"
-          borderWidth={2}
-          borderColor={borderColor}
-        >
-          <Avatar
-            initials={overflowLabel(overflowCount)}
-            size={size}
-            shape={shape}
-            color="neutral"
-          />
-        </Box>
-      ) : null}
-    </Stack>
-  );
-}
-
-/***
- * Renders a compact group of avatars with optional overflow handling.
- */
-export const AvatarGroup = withZoraThemeScope(AvatarGroupInner);

package/src/components/avatar-group/index.ts

@@ -1,2 +0,0 @@
-export { AvatarGroup } from './AvatarGroup';
-export type { AvatarGroupItem, AvatarGroupProps } from './types';

package/src/components/avatar-group/meta.ts

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

package/src/components/avatar-group/types.ts

@@ -1,24 +0,0 @@
-import type { ButtonIconSpec } from '@ankhorage/surface';
-import type { ImageSourcePropType } from 'react-native';
-
-import type { ZoraColor } from '../../internal/recipes';
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-import type { AvatarShape, AvatarSize } from '../avatar';
-
-export interface AvatarGroupItem {
-  id?: string;
-  source?: ImageSourcePropType;
-  name?: string;
-  initials?: string;
-  iconFallback?: ButtonIconSpec;
-  label?: string;
-  color?: ZoraColor;
-}
-
-export interface AvatarGroupProps extends ZoraBaseProps {
-  items: readonly AvatarGroupItem[];
-  max?: number;
-  size?: AvatarSize;
-  shape?: AvatarShape;
-  overflowLabel?: (overflowCount: number) => string;
-}

package/src/components/badge/Badge.tsx

@@ -1,34 +0,0 @@
-import { Badge as SurfaceBadge } from '@ankhorage/surface';
-import React from 'react';
-
-import { resolveBadgeRecipe } from '../../internal/recipes';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { BadgeProps } from './types';
-
-function BadgeInner({
-  themeId: _themeId,
-  mode: _mode,
-  interactionPolicy: _interactionPolicy,
-  children,
-  color,
-  variant,
-  size,
-  ...props
-}: BadgeProps) {
-  const recipe = resolveBadgeRecipe({ color, variant, size });
-
-  return (
-    <SurfaceBadge
-      {...props}
-      content={children}
-      color={recipe.color}
-      size={recipe.size}
-      variant={recipe.variant}
-    />
-  );
-}
-
-/***
- * Shows a small status, label, or count indicator.
- */
-export const Badge = withZoraThemeScope(BadgeInner);

package/src/components/badge/index.ts

@@ -1,2 +0,0 @@
-export { Badge } from './Badge';
-export type { BadgeProps } from './types';

package/src/components/badge/meta.ts

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

package/src/components/badge/types.ts

@@ -1,15 +0,0 @@
-import type { BadgeProps as SurfaceBadgeProps } from '@ankhorage/surface';
-import type React from 'react';
-
-import type { ZoraBadgeVariant, ZoraColor, ZoraControlSize } from '../../internal/recipes';
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export interface BadgeProps
-  extends
-    ZoraBaseProps,
-    Omit<SurfaceBadgeProps, 'content' | 'size' | 'color' | 'variant' | 'mode' | 'themeId'> {
-  children?: React.ReactNode;
-  color?: ZoraColor;
-  variant?: ZoraBadgeVariant;
-  size?: ZoraControlSize;
-}

package/src/components/button/Button.tsx

@@ -1,43 +0,0 @@
-import { Button as SurfaceButton } from '@ankhorage/surface';
-import React from 'react';
-
-import { useZoraThemeRecipe } from '../../theme/useZoraThemeRecipe';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import { resolveButtonThemeRecipe } from './resolveButtonThemeRecipe';
-import type { ButtonProps } from './types';
-
-function ButtonInner({
-  themeId: _themeId,
-  mode: _mode,
-  color,
-  variant,
-  size,
-  interactionPolicy,
-  ...props
-}: ButtonProps) {
-  const themeFields = useZoraThemeRecipe('Button');
-  const recipe = resolveButtonThemeRecipe({ color, variant, size, themeFields });
-
-  return (
-    <SurfaceButton
-      {...props}
-      color={recipe.color}
-      size={recipe.size}
-      variant={recipe.variant}
-      interactionPolicy={interactionPolicy}
-    />
-  );
-}
-
-/***
- * Theme-aware action control for primary, secondary, destructive, and neutral actions.
- *
- * Use `Button` for explicit user actions that should follow ZORA's semantic color,
- * variant, and size recipes across React Native and React Native Web.
- *
- * @example Basic action
- * ```tsx
- * <Button color="primary" variant="solid" onPress={save}>Save</Button>
- * ```
- */
-export const Button = withZoraThemeScope(ButtonInner);

package/src/components/button/index.ts

@@ -1,2 +0,0 @@
-export { Button } from './Button';
-export type { ButtonProps } from './types';

package/src/components/button/meta.ts

@@ -1,54 +0,0 @@
-import { ZORA_COLORS } from '../../internal/colorModel';
-import type { ZoraComponentMeta } from '../../metadata';
-
-const themeAuthoring = {
-  authority: 'theme',
-  scope: 'component',
-  allowInstanceOverride: true,
-} as const;
-
-export const buttonMeta = {
-  name: 'Button',
-  category: 'component',
-  directManifestNode: true,
-  allowedChildren: [],
-  blueprint: { label: 'Button', defaultProps: { children: 'Continue' } },
-  events: {
-    press: {
-      label: 'Press',
-      eventType: 'button.press',
-      description: 'Emitted when the button action runs.',
-      payloadFields: [],
-    },
-  },
-  props: {
-    children: {
-      type: 'string',
-      category: 'Content',
-      label: 'Label',
-      default: 'Continue',
-      authoring: { authority: 'instance' },
-    },
-    color: {
-      type: 'enum',
-      category: 'Style',
-      label: 'Color',
-      enum: [...ZORA_COLORS],
-      authoring: themeAuthoring,
-    },
-    variant: {
-      type: 'enum',
-      category: 'Style',
-      label: 'Variant',
-      enum: ['solid', 'outline', 'ghost', 'soft'],
-      authoring: themeAuthoring,
-    },
-    size: {
-      type: 'enum',
-      category: 'Style',
-      label: 'Size',
-      enum: ['s', 'm', 'l'],
-      authoring: themeAuthoring,
-    },
-  },
-} as const satisfies ZoraComponentMeta;

package/src/components/button/resolveButtonThemeRecipe.ts

@@ -1,41 +0,0 @@
-import type { ThemeRecipeOverrideValue } from '@ankhorage/contracts';
-
-import {
-  resolveButtonRecipe,
-  type ZoraButtonVariant,
-  type ZoraColor,
-  type ZoraControlSize,
-} from '../../internal/recipes';
-
-export function resolveButtonThemeRecipe(input: {
-  readonly color?: ZoraColor;
-  readonly variant?: ZoraButtonVariant;
-  readonly size?: ZoraControlSize;
-  readonly themeFields: Readonly<Record<string, ThemeRecipeOverrideValue>>;
-}) {
-  return resolveButtonRecipe({
-    color: input.color ?? readColor(input.themeFields.color),
-    variant: input.variant ?? readVariant(input.themeFields.variant),
-    size: input.size ?? readSize(input.themeFields.size),
-  });
-}
-
-function readColor(value: ThemeRecipeOverrideValue | undefined): ZoraColor | undefined {
-  if (typeof value !== 'string') return undefined;
-  if (value === 'primary' || value === 'secondary' || value === 'tertiary') return value;
-  if (value === 'quaternary' || value === 'neutral' || value === 'danger') return value;
-  if (value === 'success' || value === 'warning' || value === 'error' || value === 'info')
-    return value;
-  return undefined;
-}
-
-function readVariant(value: ThemeRecipeOverrideValue | undefined): ZoraButtonVariant | undefined {
-  if (value === 'solid' || value === 'outline' || value === 'ghost' || value === 'soft')
-    return value;
-  return undefined;
-}
-
-function readSize(value: ThemeRecipeOverrideValue | undefined): ZoraControlSize | undefined {
-  if (value === 's' || value === 'm' || value === 'l') return value;
-  return undefined;
-}

package/src/components/button/themeRecipeMeta.ts

@@ -1,29 +0,0 @@
-import { ZORA_COLORS } from '../../internal/colorModel';
-import type { ZoraThemeRecipeMeta } from '../../metadata/themeRecipeTypes';
-
-export const buttonThemeRecipeMeta = {
-  name: 'Button',
-  kind: 'component',
-  description: 'Maps shared semantic choices into Button presentation defaults.',
-  fields: {
-    color: {
-      type: 'choice',
-      label: 'Color',
-      options: ZORA_COLORS,
-      default: 'primary',
-    },
-    variant: {
-      type: 'choice',
-      label: 'Variant',
-      options: ['solid', 'outline', 'ghost', 'soft'],
-      default: 'solid',
-    },
-    size: {
-      type: 'choice',
-      label: 'Size',
-      description: 'A Button-specific semantic scale, not a universal pixel size.',
-      options: ['s', 'm', 'l'],
-      default: 'l',
-    },
-  },
-} as const satisfies ZoraThemeRecipeMeta;

package/src/components/button/types.ts

@@ -1,15 +0,0 @@
-import type { ButtonIconSpec, ButtonProps as SurfaceButtonProps } from '@ankhorage/surface';
-import type React from 'react';
-
-import type { ZoraButtonVariant, ZoraColor, ZoraControlSize } from '../../internal/recipes';
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export interface ButtonProps
-  extends ZoraBaseProps, Omit<SurfaceButtonProps, 'children' | 'size' | 'color' | 'variant'> {
-  children?: React.ReactNode;
-  color?: ZoraColor;
-  variant?: ZoraButtonVariant;
-  size?: ZoraControlSize;
-  leadingIcon?: ButtonIconSpec;
-  trailingIcon?: ButtonIconSpec;
-}

package/src/components/button-group/ButtonGroup.tsx

@@ -1,109 +0,0 @@
-import React from 'react';
-
-import { Stack } from '../../foundation';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { ButtonGroupAlign, ButtonGroupOrientation, ButtonGroupProps } from './types';
-
-function resolveDirection(orientation: ButtonGroupOrientation) {
-  if (orientation === 'vertical') {
-    return 'column';
-  }
-
-  if (orientation === 'responsive') {
-    return { base: 'column', md: 'row' } as const;
-  }
-
-  return 'row';
-}
-
-function resolveHorizontalJustify(align: ButtonGroupAlign) {
-  switch (align) {
-    case 'start':
-      return 'flex-start';
-    case 'center':
-      return 'center';
-    case 'between':
-      return 'space-between';
-    case 'stretch':
-    case 'end':
-    default:
-      return 'flex-end';
-  }
-}
-
-function resolveVerticalAlign(align: ButtonGroupAlign) {
-  switch (align) {
-    case 'start':
-      return 'flex-start';
-    case 'center':
-    case 'between':
-      return 'center';
-    case 'stretch':
-      return 'stretch';
-    case 'end':
-    default:
-      return 'flex-end';
-  }
-}
-
-function resolveStackAlign(align: ButtonGroupAlign, orientation: ButtonGroupOrientation) {
-  if (orientation === 'horizontal') {
-    return align === 'stretch' ? 'stretch' : 'center';
-  }
-
-  if (orientation === 'responsive') {
-    return {
-      base: resolveVerticalAlign(align),
-      md: align === 'stretch' ? 'stretch' : 'center',
-    } as const;
-  }
-
-  return resolveVerticalAlign(align);
-}
-
-function resolveStackJustify(align: ButtonGroupAlign, orientation: ButtonGroupOrientation) {
-  if (orientation === 'horizontal') {
-    return resolveHorizontalJustify(align);
-  }
-
-  if (orientation === 'responsive') {
-    return {
-      base: align === 'between' ? 'space-between' : 'flex-start',
-      md: resolveHorizontalJustify(align),
-    } as const;
-  }
-
-  return align === 'between' ? 'space-between' : 'flex-start';
-}
-
-function ButtonGroupInner({
-  themeId: _themeId,
-  mode: _mode,
-  children,
-  align = 'end',
-  orientation = 'horizontal',
-  gap = 's',
-  reverse = false,
-  testID,
-  interactionPolicy: _interactionPolicy,
-}: ButtonGroupProps) {
-  const items = React.Children.toArray(children);
-  const orderedItems = reverse ? items.reverse() : items;
-
-  return (
-    <Stack
-      align={resolveStackAlign(align, orientation)}
-      direction={resolveDirection(orientation)}
-      gap={gap}
-      justify={resolveStackJustify(align, orientation)}
-      testID={testID}
-    >
-      {orderedItems}
-    </Stack>
-  );
-}
-
-/***
- * Groups multiple `Button` elements with consistent spacing and alignment.
- */
-export const ButtonGroup = withZoraThemeScope(ButtonGroupInner);

package/src/components/button-group/index.ts

@@ -1,2 +0,0 @@
-export { ButtonGroup } from './ButtonGroup';
-export type { ButtonGroupAlign, ButtonGroupOrientation, ButtonGroupProps } from './types';

package/src/components/button-group/meta.ts

@@ -1,45 +0,0 @@
-import type { ZoraComponentMeta } from '../../metadata';
-
-export const buttonGroupMeta = {
-  name: 'ButtonGroup',
-  category: 'component',
-  directManifestNode: true,
-  allowedChildren: ['Button'],
-  blueprint: {
-    label: 'Button group',
-    defaultProps: {
-      align: 'end',
-      orientation: 'horizontal',
-      gap: 's',
-    },
-  },
-  props: {
-    align: {
-      type: 'enum',
-      category: 'Layout',
-      label: 'Align',
-      enum: ['start', 'center', 'end', 'stretch', 'between'],
-      default: 'end',
-    },
-    orientation: {
-      type: 'enum',
-      category: 'Layout',
-      label: 'Orientation',
-      enum: ['horizontal', 'vertical', 'responsive'],
-      default: 'horizontal',
-    },
-    gap: {
-      type: 'enum',
-      category: 'Layout',
-      label: 'Gap',
-      enum: ['xs', 's', 'm', 'l'],
-      default: 's',
-    },
-    reverse: {
-      type: 'boolean',
-      category: 'Layout',
-      label: 'Reverse order',
-      default: false,
-    },
-  },
-} as const satisfies ZoraComponentMeta;

package/src/components/button-group/types.ts

@@ -1,15 +0,0 @@
-import type React from 'react';
-
-import type { StackProps } from '../../foundation';
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export type ButtonGroupAlign = 'start' | 'center' | 'end' | 'stretch' | 'between';
-export type ButtonGroupOrientation = 'horizontal' | 'vertical' | 'responsive';
-
-export interface ButtonGroupProps extends ZoraBaseProps {
-  children?: React.ReactNode;
-  align?: ButtonGroupAlign;
-  orientation?: ButtonGroupOrientation;
-  gap?: StackProps['gap'];
-  reverse?: boolean;
-}

package/src/components/card/Card.tsx

@@ -1,92 +0,0 @@
-import { Card as SurfaceCard } from '@ankhorage/surface';
-import React from 'react';
-
-import { Box, Stack } from '../../foundation';
-import { resolveCardVariant } from '../../internal/recipes';
-import { useZoraThemeRecipe } from '../../theme/useZoraThemeRecipe';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import { Heading } from '../heading';
-import { Text } from '../text';
-import { resolveCardThemeRecipe } from './resolveCardThemeRecipe';
-import type { CardProps } from './types';
-
-function CardInner({
-  themeId: _themeId,
-  mode: _mode,
-  children,
-  title,
-  description,
-  eyebrow,
-  actions,
-  footer,
-  tone,
-  compact,
-  padding,
-  radius,
-  onPress,
-  interactionPolicy,
-  ...props
-}: CardProps) {
-  const themeFields = useZoraThemeRecipe('Card');
-  const recipe = resolveCardThemeRecipe({ tone, compact, padding, radius, themeFields });
-  const hasHeader = [eyebrow, title, description, actions].some((item) => item != null);
-  const hasFooter = footer !== undefined;
-  const gap = recipe.compact ? 's' : 'm';
-  const isInteractive = Boolean(onPress) && !actions;
-  const passive = interactionPolicy === 'passive';
-
-  return (
-    <SurfaceCard
-      {...props}
-      onPress={isInteractive && !passive ? onPress : undefined}
-      p={recipe.padding}
-      radius={recipe.radius}
-      variant={resolveCardVariant(recipe.tone)}
-    >
-      <Stack gap={gap}>
-        {hasHeader ? (
-          <Stack
-            align={{ base: 'flex-start', md: 'center' }}
-            direction={{ base: 'column', md: 'row' }}
-            gap="m"
-            justify="space-between"
-          >
-            <Box flex={{ md: 1 }} width={{ base: '100%', md: 'auto' }}>
-              <Stack gap="xs">
-                {eyebrow ? (
-                  <Text emphasis="muted" variant="caption" weight="semiBold">
-                    {eyebrow}
-                  </Text>
-                ) : null}
-                {title ? <Heading level={recipe.compact ? 4 : 3}>{title}</Heading> : null}
-                {description ? (
-                  <Text emphasis="muted" variant="bodySmall">
-                    {description}
-                  </Text>
-                ) : null}
-              </Stack>
-            </Box>
-            {actions ? <Box>{actions}</Box> : null}
-          </Stack>
-        ) : null}
-
-        {children ? <Box>{children}</Box> : null}
-
-        {hasFooter ? <Box pt="xs">{footer}</Box> : null}
-      </Stack>
-    </SurfaceCard>
-  );
-}
-
-/***
- * Structured content container with built-in heading, description, actions, and footer slots.
- *
- * Use `Card` for reusable content blocks that should inherit ZORA spacing,
- * radius, tone, and responsive header layout without hand-assembling primitives.
- *
- * @example Content card
- * ```tsx
- * <Card title="Project" description="Latest activity">...</Card>
- * ```
- */
-export const Card = withZoraThemeScope(CardInner);

package/src/components/card/index.ts

@@ -1,2 +0,0 @@
-export { Card } from './Card';
-export type { CardProps } from './types';