@ankhorage/zora 6.0.0 → 8.0.0

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';

package/src/components/card/meta.ts

@@ -1,51 +0,0 @@
-import type { ZoraComponentMeta } from '../../metadata';
-import { CONTAINER_ALLOWED_CHILDREN } from '../../metadata/allowedChildren';
-
-const themeAuthoring = {
-  authority: 'theme',
-  scope: 'component',
-  allowInstanceOverride: true,
-} as const;
-
-export const cardMeta = {
-  name: 'Card',
-  category: 'component',
-  directManifestNode: true,
-  allowedChildren: [...CONTAINER_ALLOWED_CHILDREN],
-  blueprint: { label: 'Card', defaultProps: { title: 'Card' } },
-  props: {
-    title: {
-      type: 'string',
-      category: 'Content',
-      label: 'Title',
-      authoring: { authority: 'instance' },
-    },
-    description: {
-      type: 'string',
-      category: 'Content',
-      label: 'Description',
-      authoring: { authority: 'instance' },
-    },
-    eyebrow: {
-      type: 'string',
-      category: 'Content',
-      label: 'Eyebrow',
-      authoring: { authority: 'instance' },
-    },
-    tone: {
-      type: 'enum',
-      category: 'Style',
-      label: 'Tone',
-      enum: ['default', 'subtle', 'outline'],
-      authoring: themeAuthoring,
-    },
-    compact: { type: 'boolean', category: 'Layout', label: 'Compact', authoring: themeAuthoring },
-    padding: { type: 'spacing', category: 'Layout', label: 'Padding', authoring: themeAuthoring },
-    radius: {
-      type: 'radius',
-      category: 'Style',
-      label: 'Corner radius',
-      authoring: themeAuthoring,
-    },
-  },
-} as const satisfies ZoraComponentMeta;

package/src/components/card/resolveCardThemeRecipe.ts

@@ -1,33 +0,0 @@
-import type { ThemeRecipeOverrideValue } from '@ankhorage/contracts';
-
-import type { ZoraCardTone } from '../../internal/recipes';
-
-export function resolveCardThemeRecipe(input: {
-  readonly tone?: ZoraCardTone;
-  readonly compact?: boolean;
-  readonly padding?: string;
-  readonly radius?: string;
-  readonly themeFields: Readonly<Record<string, ThemeRecipeOverrideValue>>;
-}) {
-  const tone = input.tone ?? readTone(input.themeFields.tone) ?? 'default';
-  const compact = input.compact ?? readBoolean(input.themeFields.compact) ?? false;
-  return {
-    tone,
-    compact,
-    padding: input.padding ?? readString(input.themeFields.padding) ?? (compact ? 'm' : 'l'),
-    radius: input.radius ?? readString(input.themeFields.radius) ?? 'l',
-  };
-}
-
-function readTone(value: ThemeRecipeOverrideValue | undefined): ZoraCardTone | undefined {
-  if (value === 'default' || value === 'subtle' || value === 'outline') return value;
-  return undefined;
-}
-
-function readBoolean(value: ThemeRecipeOverrideValue | undefined): boolean | undefined {
-  return typeof value === 'boolean' ? value : undefined;
-}
-
-function readString(value: ThemeRecipeOverrideValue | undefined): string | undefined {
-  return typeof value === 'string' ? value : undefined;
-}

package/src/components/card/themeRecipeMeta.ts

@@ -1,32 +0,0 @@
-import type { ZoraThemeRecipeMeta } from '../../metadata/themeRecipeTypes';
-
-export const cardThemeRecipeMeta = {
-  name: 'Card',
-  kind: 'component',
-  description: 'Maps global rhythm and surface tokens into Card presentation.',
-  fields: {
-    tone: {
-      type: 'choice',
-      label: 'Tone',
-      options: ['default', 'subtle', 'outline'],
-      default: 'default',
-    },
-    padding: {
-      type: 'token',
-      tokenFamily: 'spacing',
-      label: 'Padding',
-      description: 'When unset, Card keeps its compact-aware spacing default.',
-    },
-    radius: {
-      type: 'token',
-      tokenFamily: 'radii',
-      label: 'Corner radius',
-      default: 'l',
-    },
-    compact: {
-      type: 'boolean',
-      label: 'Compact',
-      default: false,
-    },
-  },
-} as const satisfies ZoraThemeRecipeMeta;

package/src/components/card/types.ts

@@ -1,19 +0,0 @@
-import type { CardProps as SurfaceCardProps } from '@ankhorage/surface';
-import type React from 'react';
-
-import type { ZoraCardTone } from '../../internal/recipes';
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export interface CardProps
-  extends ZoraBaseProps, Omit<SurfaceCardProps, 'children' | 'p' | 'radius' | 'variant'> {
-  children?: React.ReactNode;
-  title?: React.ReactNode;
-  description?: React.ReactNode;
-  eyebrow?: React.ReactNode;
-  actions?: React.ReactNode;
-  footer?: React.ReactNode;
-  tone?: ZoraCardTone;
-  compact?: boolean;
-  padding?: string;
-  radius?: string;
-}