@ankhorage/zora 7.0.0 → 9.0.0

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

package/src/components/checkbox/Checkbox.tsx

@@ -1,21 +0,0 @@
-import { Checkbox as SurfaceCheckbox } from '@ankhorage/surface';
-import React from 'react';
-
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { CheckboxProps } from './types';
-
-function CheckboxInner({
-  themeId: _themeId,
-  mode: _mode,
-  interactionPolicy,
-  ...props
-}: CheckboxProps) {
-  return <SurfaceCheckbox {...props} interactionPolicy={interactionPolicy} />;
-}
-
-/***
- * Binary selection control for toggling a value on or off.
- *
- 
- */
-export const Checkbox = withZoraThemeScope(CheckboxInner);

package/src/components/checkbox/CheckboxGroup.tsx

@@ -1,121 +0,0 @@
-import { Checkbox } from '@ankhorage/surface';
-import React from 'react';
-import { View } from 'react-native';
-
-import { Stack } from '../../foundation';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import { Text } from '../text';
-import type { CheckboxGroupOption, CheckboxGroupProps } from './types';
-
-function CheckboxGroupInner<TValue extends string>({
-  themeId: _themeId,
-  mode: _mode,
-  value,
-  onValueChange,
-  options,
-  orientation = 'vertical',
-  gap = 's',
-  color = 'primary',
-  size = 'm',
-  invalid = false,
-  readOnly = false,
-  disabled = false,
-  testID,
-  interactionPolicy,
-}: CheckboxGroupProps<TValue>) {
-  const selectedValues = new Set(value);
-  const isHorizontal = orientation === 'horizontal';
-
-  return (
-    <View
-      testID={testID}
-      style={{
-        flexDirection: isHorizontal ? 'row' : 'column',
-        flexWrap: isHorizontal ? 'wrap' : 'nowrap',
-      }}
-    >
-      <Stack
-        direction={isHorizontal ? 'row' : 'column'}
-        gap={gap}
-        wrap={isHorizontal ? 'wrap' : 'nowrap'}
-      >
-        {options.map((option) => (
-          <CheckboxGroupItem
-            key={option.value}
-            option={option}
-            checked={selectedValues.has(option.value)}
-            disabled={disabled || option.disabled === true}
-            invalid={invalid}
-            readOnly={readOnly}
-            size={size}
-            color={color}
-            value={value}
-            onValueChange={onValueChange}
-            interactionPolicy={interactionPolicy}
-          />
-        ))}
-      </Stack>
-    </View>
-  );
-}
-
-/***
- * Renders a group of checkboxes for multi-select values.
- */
-export const CheckboxGroup = withZoraThemeScope(CheckboxGroupInner);
-
-function CheckboxGroupItem<TValue extends string>({
-  option,
-  checked,
-  disabled,
-  invalid,
-  readOnly,
-  size,
-  color,
-  value,
-  onValueChange,
-  interactionPolicy,
-}: {
-  option: CheckboxGroupOption<TValue>;
-  checked: boolean;
-  disabled: boolean;
-  invalid: boolean;
-  readOnly: boolean;
-  size: NonNullable<CheckboxGroupProps<TValue>['size']>;
-  color: NonNullable<CheckboxGroupProps<TValue>['color']>;
-  value: readonly TValue[];
-  onValueChange: (value: TValue[]) => void;
-  interactionPolicy: CheckboxGroupProps<TValue>['interactionPolicy'];
-}) {
-  const passive = interactionPolicy === 'passive';
-
-  return (
-    <Checkbox
-      interactionPolicy={interactionPolicy}
-      checked={checked}
-      disabled={disabled}
-      invalid={invalid}
-      readOnly={readOnly}
-      size={size}
-      color={color}
-      testID={option.testID}
-      onCheckedChange={(nextChecked) => {
-        if (passive) return;
-        const nextValue = nextChecked
-          ? [...value, option.value]
-          : value.filter((currentValue) => currentValue !== option.value);
-
-        onValueChange(nextValue);
-      }}
-    >
-      <Stack gap="xs">
-        <Text>{option.label}</Text>
-        {option.description ? (
-          <Text emphasis="muted" variant="caption">
-            {option.description}
-          </Text>
-        ) : null}
-      </Stack>
-    </Checkbox>
-  );
-}

package/src/components/checkbox/index.ts

@@ -1,3 +0,0 @@
-export { Checkbox } from './Checkbox';
-export { CheckboxGroup } from './CheckboxGroup';
-export type { CheckboxGroupOption, CheckboxGroupProps, CheckboxProps } from './types';

package/src/components/checkbox/meta.ts

@@ -1,19 +0,0 @@
-import type { ZoraComponentMeta } from '../../metadata';
-
-export const checkboxMeta = {
-  name: 'Checkbox',
-  category: 'component',
-  directManifestNode: false,
-  allowedChildren: [],
-  note: 'Form control component; not represented as a manifest node in v1.',
-  props: {},
-} as const satisfies ZoraComponentMeta;
-
-export const checkboxGroupMeta = {
-  name: 'CheckboxGroup',
-  category: 'component',
-  directManifestNode: false,
-  allowedChildren: [],
-  note: 'Form control component; not represented as a manifest node in v1.',
-  props: {},
-} as const satisfies ZoraComponentMeta;

package/src/components/checkbox/types.ts

@@ -1,29 +0,0 @@
-import type { CheckboxProps as SurfaceCheckboxProps } from '@ankhorage/surface';
-import type React from 'react';
-
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export interface CheckboxProps
-  extends ZoraBaseProps, Omit<SurfaceCheckboxProps, 'mode' | 'themeId'> {}
-
-export interface CheckboxGroupOption<TValue extends string> {
-  value: TValue;
-  label: React.ReactNode;
-  description?: React.ReactNode;
-  disabled?: boolean;
-  testID?: string;
-}
-
-export interface CheckboxGroupProps<TValue extends string>
-  extends
-    ZoraBaseProps,
-    Pick<
-      Omit<SurfaceCheckboxProps, 'mode' | 'themeId'>,
-      'color' | 'size' | 'invalid' | 'readOnly' | 'disabled'
-    > {
-  value: readonly TValue[];
-  onValueChange: (value: TValue[]) => void;
-  options: readonly CheckboxGroupOption<TValue>[];
-  orientation?: 'horizontal' | 'vertical';
-  gap?: 'xs' | 's' | 'm' | 'l';
-}

package/src/components/chip/Chip.tsx

@@ -1,97 +0,0 @@
-import { ButtonBase } from '@ankhorage/surface';
-import React from 'react';
-
-import { Box, Inline } from '../../foundation';
-import { resolveIconSize } from '../../internal/recipes';
-import { useZoraTheme } from '../../theme/useZoraTheme';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import { Icon } from '../icon';
-import { Text } from '../text';
-import { resolveChipColors } from './resolveChipColors';
-import type { ChipInteractionState, ChipProps } from './types';
-
-function resolveChipPadding(size: NonNullable<ChipProps['size']>): {
-  px: 's' | 'm';
-  py: 'xxs' | 'xs';
-} {
-  switch (size) {
-    case 's':
-      return { px: 's', py: 'xxs' };
-    case 'm':
-      return { px: 'm', py: 'xs' };
-    case 'l':
-    default:
-      return { px: 'm', py: 'xs' };
-  }
-}
-
-function ChipInner({
-  themeId: _themeId,
-  mode: _mode,
-  testID,
-  children,
-  icon,
-  selected = false,
-  disabled = false,
-  color = 'neutral',
-  size = 's',
-  interactionPolicy,
-  onPress,
-}: ChipProps) {
-  const { theme } = useZoraTheme();
-  const padding = resolveChipPadding(size);
-  const iconSize = resolveIconSize(size);
-
-  const renderContent = (state: ChipInteractionState) => {
-    const colors = resolveChipColors({ theme, color, selected, state });
-    const textColor = state.disabled
-      ? undefined
-      : selected && color !== 'neutral'
-        ? color
-        : undefined;
-    const textEmphasis = state.disabled ? 'muted' : 'default';
-
-    return (
-      <Box
-        bg={colors.backgroundColor}
-        borderColor={colors.borderColor}
-        borderWidth={1}
-        px={padding.px}
-        py={padding.py}
-        radius="full"
-        style={{
-          alignSelf: 'flex-start',
-          opacity: colors.opacity,
-        }}
-      >
-        <Inline align="center" gap="xs" wrap="nowrap">
-          {icon ? <Icon {...icon} color={colors.contentColor} size={iconSize} /> : null}
-          <Text color={textColor} emphasis={textEmphasis} variant="label">
-            {children}
-          </Text>
-        </Inline>
-      </Box>
-    );
-  };
-
-  if (!onPress) {
-    return renderContent({ disabled, focused: false, hovered: false, pressed: false });
-  }
-
-  return (
-    <ButtonBase
-      disabled={disabled}
-      interactionPolicy={interactionPolicy}
-      onPress={onPress}
-      radius="full"
-      testID={testID}
-    >
-      {(state) => renderContent(state)}
-    </ButtonBase>
-  );
-}
-
-/***
- * Compact pill-like control for filters, tags, and quick selections.
- */
-export const Chip = withZoraThemeScope(ChipInner);

package/src/components/chip/index.ts

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

package/src/components/chip/meta.ts

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

package/src/components/chip/resolveChipColors.ts

@@ -1,75 +0,0 @@
-import type { RoleSemantics, SurfaceTheme } from '@ankhorage/surface';
-
-import type { ZoraColor } from '../../internal/recipes';
-import type { ChipColors, ChipInteractionState } from './types';
-
-function resolveChipRole(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;
-  }
-}
-
-export function resolveChipColors({
-  theme,
-  color,
-  selected,
-  state,
-}: {
-  theme: SurfaceTheme;
-  color: ZoraColor;
-  selected: boolean;
-  state: ChipInteractionState;
-}): ChipColors {
-  if (state.disabled) {
-    return {
-      backgroundColor: theme.semantics.neutral.surface,
-      borderColor: theme.semantics.neutral.divider,
-      contentColor: theme.semantics.content.muted,
-      opacity: 0.72,
-    };
-  }
-
-  const role = resolveChipRole(theme, color);
-
-  if (selected) {
-    return {
-      backgroundColor: state.pressed
-        ? role.softActive
-        : state.hovered
-          ? role.softHover
-          : role.softBg,
-      borderColor: 'transparent',
-      contentColor: role.base,
-    };
-  }
-
-  return {
-    backgroundColor: state.pressed
-      ? theme.semantics.neutral.surfaceActive
-      : state.hovered
-        ? theme.semantics.neutral.surfaceHover
-        : theme.semantics.neutral.surface,
-    borderColor: theme.semantics.neutral.divider,
-    contentColor: theme.semantics.content.default,
-  };
-}

package/src/components/chip/types.ts

@@ -1,29 +0,0 @@
-import type { ButtonIconSpec } from '@ankhorage/surface';
-import type React from 'react';
-
-import type { ZoraColor, ZoraControlSize } from '../../internal/recipes';
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export interface ChipProps extends ZoraBaseProps {
-  children: React.ReactNode;
-  icon?: ButtonIconSpec;
-  selected?: boolean;
-  disabled?: boolean;
-  color?: ZoraColor;
-  size?: ZoraControlSize;
-  onPress?: () => void;
-}
-
-export interface ChipColors {
-  backgroundColor: string;
-  borderColor: string;
-  contentColor: string;
-  opacity?: number;
-}
-
-export interface ChipInteractionState {
-  pressed: boolean;
-  hovered: boolean;
-  focused: boolean;
-  disabled: boolean;
-}

package/src/components/chip-group/ChipGroup.tsx

@@ -1,74 +0,0 @@
-import React from 'react';
-
-import { Inline } from '../../foundation';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import { Chip } from '../chip';
-import type { ChipGroupItem, ChipGroupProps } from './types';
-
-function hasValue<TValue extends string>(values: readonly TValue[], value: TValue): boolean {
-  return values.includes(value);
-}
-
-function toggleValue<TValue extends string>(values: readonly TValue[], value: TValue): TValue[] {
-  return hasValue(values, value) ? values.filter((item) => item !== value) : [...values, value];
-}
-
-function ChipGroupInner<TValue extends string = string>({
-  themeId: _themeId,
-  mode: _mode,
-  testID,
-  items,
-  value,
-  onValueChange,
-  multiple,
-  color = 'neutral',
-  size = 's',
-  wrap = true,
-  disabled,
-  interactionPolicy,
-}: ChipGroupProps<TValue>) {
-  const passive = interactionPolicy === 'passive';
-
-  const renderChip = (item: ChipGroupItem<TValue>) => {
-    const itemDisabled = disabled ?? item.disabled ?? false;
-    const isSelected = Array.isArray(value) ? hasValue(value, item.value) : value === item.value;
-
-    const handlePress = () => {
-      if (passive) return;
-      if (multiple) {
-        const next = toggleValue(value, item.value);
-        onValueChange(next);
-        return;
-      }
-
-      onValueChange(item.value);
-    };
-
-    return (
-      <Chip
-        interactionPolicy={interactionPolicy}
-        key={item.value}
-        disabled={itemDisabled}
-        icon={item.icon}
-        onPress={handlePress}
-        selected={isSelected}
-        size={size}
-        testID={item.testID}
-        color={color}
-      >
-        {item.label}
-      </Chip>
-    );
-  };
-
-  return (
-    <Inline align="center" gap="s" testID={testID} wrap={wrap ? 'wrap' : 'nowrap'}>
-      {items.map(renderChip)}
-    </Inline>
-  );
-}
-
-/***
- * Renders a row or wrap layout of `Chip` items.
- */
-export const ChipGroup = withZoraThemeScope(ChipGroupInner);

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

@@ -1,2 +0,0 @@
-export { ChipGroup } from './ChipGroup';
-export type { ChipGroupItem, ChipGroupProps } from './types';

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

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

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

@@ -1,36 +0,0 @@
-import type { ButtonIconSpec } from '@ankhorage/surface';
-import type React from 'react';
-
-import type { ZoraColor, ZoraControlSize } from '../../internal/recipes';
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export interface ChipGroupItem<TValue extends string = string> {
-  value: TValue;
-  label: React.ReactNode;
-  icon?: ButtonIconSpec;
-  disabled?: boolean;
-  testID?: string;
-}
-
-interface ChipGroupBaseProps<TValue extends string> extends ZoraBaseProps {
-  items: readonly ChipGroupItem<TValue>[];
-  color?: ZoraColor;
-  size?: ZoraControlSize;
-  wrap?: boolean;
-  disabled?: boolean;
-}
-
-interface ChipGroupSingleProps<TValue extends string> {
-  multiple?: false;
-  value: TValue;
-  onValueChange: (value: TValue) => void;
-}
-
-interface ChipGroupMultipleProps<TValue extends string> {
-  multiple: true;
-  value: readonly TValue[];
-  onValueChange: (value: TValue[]) => void;
-}
-
-export type ChipGroupProps<TValue extends string = string> = ChipGroupBaseProps<TValue> &
-  (ChipGroupSingleProps<TValue> | ChipGroupMultipleProps<TValue>);