@ankhorage/zora 1.0.4 → 1.0.6

package/src/components/avatar/Avatar.tsx

@@ -0,0 +1,133 @@
+import type { RoleSemantics, SurfaceTheme } from '@ankhorage/surface';
+import React from 'react';
+import { Image } from 'react-native';
+
+import { Box } from '../../foundation';
+import type { ZoraTone } from '../../internal/recipes';
+import { useZoraTheme } from '../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import { Icon } from '../icon';
+import { Text, type TextTone, type TextVariant } from '../text';
+import { resolveAvatarInitials } from './resolveAvatarInitials';
+import type { AvatarProps, AvatarShape, AvatarSize } from './types';
+
+const AVATAR_SIZES: Record<AvatarSize, number> = {
+  xs: 24,
+  s: 32,
+  m: 40,
+  l: 48,
+  xl: 64,
+};
+
+function resolveRoleSemantics(theme: SurfaceTheme, tone: ZoraTone): RoleSemantics {
+  switch (tone) {
+    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;
+  }
+}
+
+function resolveTextTone(tone: ZoraTone): TextTone {
+  return tone === 'neutral' ? 'default' : tone;
+}
+
+function resolveTextVariant(size: AvatarSize): TextVariant {
+  switch (size) {
+    case 'xs':
+    case 's':
+      return 'caption';
+    case 'l':
+      return 'bodySmall';
+    case 'xl':
+      return 'lead';
+    case 'm':
+    default:
+      return 'label';
+  }
+}
+
+function resolveRadius(shape: AvatarShape): 'full' | 'l' {
+  return shape === 'circle' ? 'full' : 'l';
+}
+
+function AvatarInner({
+  themeId: _themeId,
+  mode: _mode,
+  testID,
+  source,
+  name,
+  initials,
+  iconFallback,
+  label,
+  size = 'm',
+  shape = 'circle',
+  tone = 'neutral',
+}: AvatarProps) {
+  const { theme } = useZoraTheme();
+  const resolvedSize = AVATAR_SIZES[size];
+  const resolvedInitials = initials ?? resolveAvatarInitials(name);
+  const role = resolveRoleSemantics(theme, tone);
+  const backgroundColor = tone === 'neutral' ? theme.semantics.neutral.surface : role.softBg;
+  const contentColor = tone === 'neutral' ? theme.semantics.content.default : role.base;
+  const radius = resolveRadius(shape);
+
+  const renderFallback = () => {
+    if (resolvedInitials) {
+      return (
+        <Text tone={resolveTextTone(tone)} variant={resolveTextVariant(size)} weight="semiBold">
+          {resolvedInitials}
+        </Text>
+      );
+    }
+
+    if (iconFallback) {
+      const iconSize = Math.max(16, Math.round(resolvedSize * 0.48));
+      return (
+        <Icon
+          color={contentColor}
+          name={iconFallback.name}
+          provider={iconFallback.provider}
+          size={iconSize}
+        />
+      );
+    }
+
+    return null;
+  };
+
+  return (
+    <Box
+      accessibilityLabel={label}
+      bg={backgroundColor}
+      height={resolvedSize}
+      radius={radius}
+      testID={testID}
+      width={resolvedSize}
+      style={{
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'hidden',
+      }}
+    >
+      {source ? (
+        <Image
+          accessibilityLabel={label}
+          source={source}
+          style={{ height: '100%', width: '100%' }}
+        />
+      ) : (
+        renderFallback()
+      )}
+    </Box>
+  );
+}
+
+export const Avatar = withZoraThemeScope(AvatarInner);

package/src/components/avatar/index.ts

@@ -0,0 +1,3 @@
+export { Avatar } from './Avatar';
+export { resolveAvatarInitials } from './resolveAvatarInitials';
+export type { AvatarProps, AvatarShape, AvatarSize } from './types';

package/src/components/avatar/resolveAvatarInitials.test.ts

@@ -0,0 +1,27 @@
+import { describe, expect, it } from 'bun:test';
+
+import { resolveAvatarInitials } from './resolveAvatarInitials';
+
+describe('resolveAvatarInitials', () => {
+  it('returns null for empty input', () => {
+    expect(resolveAvatarInitials(undefined)).toBeNull();
+    expect(resolveAvatarInitials('')).toBeNull();
+    expect(resolveAvatarInitials('   ')).toBeNull();
+  });
+
+  it('returns the first two characters for a single word', () => {
+    expect(resolveAvatarInitials('Zora')).toBe('ZO');
+    expect(resolveAvatarInitials('a')).toBe('A');
+  });
+
+  it('returns first+last initials for multiple words', () => {
+    expect(resolveAvatarInitials('Fabio Gartenmann')).toBe('FG');
+    expect(resolveAvatarInitials('Fabio   Gartenmann')).toBe('FG');
+    expect(resolveAvatarInitials('Fabio Gartenmann Example')).toBe('FE');
+  });
+
+  it('handles non-letter characters', () => {
+    expect(resolveAvatarInitials('🧠 Brain')).toBe('🧠B');
+    expect(resolveAvatarInitials('Brain 🧠')).toBe('B🧠');
+  });
+});

package/src/components/avatar/resolveAvatarInitials.ts

@@ -0,0 +1,46 @@
+function takeFirstCharacter(value: string): string | null {
+  const trimmed = value.trim();
+  if (!trimmed) return null;
+
+  const chars = Array.from(trimmed);
+  return chars[0] ? chars[0].toUpperCase() : null;
+}
+
+function takeFirstTwoCharacters(value: string): string | null {
+  const trimmed = value.trim();
+  if (!trimmed) return null;
+
+  const chars = Array.from(trimmed);
+  const [first, second] = chars;
+  if (!first) return null;
+
+  return `${first}${second ?? ''}`.toUpperCase();
+}
+
+export function resolveAvatarInitials(name: string | undefined): string | null {
+  if (!name) return null;
+
+  const parts = name
+    .trim()
+    .split(/\s+/)
+    .map((part) => part.trim())
+    .filter(Boolean);
+
+  if (parts.length === 0) return null;
+
+  if (parts.length === 1) {
+    const [part] = parts;
+    return part ? takeFirstTwoCharacters(part) : null;
+  }
+
+  const [firstPart] = parts;
+  const [lastPart] = parts.slice(-1);
+  const first = firstPart ? takeFirstCharacter(firstPart) : null;
+  const last = lastPart ? takeFirstCharacter(lastPart) : null;
+
+  if (!first && !last) return null;
+  if (!last) return first;
+  if (!first) return last;
+
+  return `${first}${last}`;
+}

package/src/components/avatar/types.ts

@@ -0,0 +1,20 @@
+import type { ButtonIconSpec } from '@ankhorage/surface';
+import type { ImageSourcePropType } from 'react-native';
+
+import type { ZoraTone } from '../../internal/recipes';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export type AvatarSize = 'xs' | 's' | 'm' | 'l' | 'xl';
+
+export type AvatarShape = 'circle' | 'rounded';
+
+export interface AvatarProps extends ZoraBaseProps {
+  source?: ImageSourcePropType;
+  name?: string;
+  initials?: string;
+  iconFallback?: ButtonIconSpec;
+  label?: string;
+  size?: AvatarSize;
+  shape?: AvatarShape;
+  tone?: ZoraTone;
+}

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

@@ -0,0 +1,74 @@
+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,
+  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}
+        tone={item.tone}
+      />
+    </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}
+            tone="neutral"
+          />
+        </Box>
+      ) : null}
+    </Stack>
+  );
+}
+
+export const AvatarGroup = withZoraThemeScope(AvatarGroupInner);

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

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

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

@@ -0,0 +1,24 @@
+import type { ButtonIconSpec } from '@ankhorage/surface';
+import type { ImageSourcePropType } from 'react-native';
+
+import type { ZoraTone } 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;
+  tone?: ZoraTone;
+}
+
+export interface AvatarGroupProps extends ZoraBaseProps {
+  items: readonly AvatarGroupItem[];
+  max?: number;
+  size?: AvatarSize;
+  shape?: AvatarShape;
+  overflowLabel?: (overflowCount: number) => string;
+}

package/src/components/chip/Chip.tsx

@@ -0,0 +1,95 @@
+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,
+  tone = 'neutral',
+  size = 's',
+  onPress,
+}: ChipProps) {
+  const { theme } = useZoraTheme();
+  const padding = resolveChipPadding(size);
+  const iconSize = resolveIconSize(size);
+
+  const renderContent = (state: ChipInteractionState) => {
+    const colors = resolveChipColors({ theme, tone, selected, state });
+    const textTone = state.disabled
+      ? 'muted'
+      : selected
+        ? tone === 'neutral'
+          ? 'default'
+          : tone
+        : '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
+              color={colors.contentColor}
+              name={icon.name}
+              provider={icon.provider}
+              size={iconSize}
+            />
+          ) : null}
+          <Text tone={textTone} variant="label">
+            {children}
+          </Text>
+        </Inline>
+      </Box>
+    );
+  };
+
+  if (!onPress) {
+    return renderContent({ disabled, focused: false, hovered: false, pressed: false });
+  }
+
+  return (
+    <ButtonBase disabled={disabled} onPress={onPress} radius="full" testID={testID}>
+      {(state) => renderContent(state)}
+    </ButtonBase>
+  );
+}
+
+export const Chip = withZoraThemeScope(ChipInner);

package/src/components/chip/index.ts

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

package/src/components/chip/resolveChipColors.ts

@@ -0,0 +1,65 @@
+import type { RoleSemantics, SurfaceTheme } from '@ankhorage/surface';
+
+import type { ZoraTone } from '../../internal/recipes';
+import type { ChipColors, ChipInteractionState } from './types';
+
+function resolveChipRole(theme: SurfaceTheme, tone: ZoraTone): RoleSemantics {
+  switch (tone) {
+    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,
+  tone,
+  selected,
+  state,
+}: {
+  theme: SurfaceTheme;
+  tone: ZoraTone;
+  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, tone);
+
+  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

@@ -0,0 +1,29 @@
+import type { ButtonIconSpec } from '@ankhorage/surface';
+import type React from 'react';
+
+import type { ZoraControlSize, ZoraTone } from '../../internal/recipes';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export interface ChipProps extends ZoraBaseProps {
+  children: React.ReactNode;
+  icon?: ButtonIconSpec;
+  selected?: boolean;
+  disabled?: boolean;
+  tone?: ZoraTone;
+  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

@@ -0,0 +1,66 @@
+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,
+  tone = 'neutral',
+  size = 's',
+  wrap = true,
+  disabled,
+}: ChipGroupProps<TValue>) {
+  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 (multiple) {
+        const next = toggleValue(value, item.value);
+        onValueChange(next);
+        return;
+      }
+
+      onValueChange(item.value);
+    };
+
+    return (
+      <Chip
+        key={item.value}
+        disabled={itemDisabled}
+        icon={item.icon}
+        onPress={handlePress}
+        selected={isSelected}
+        size={size}
+        testID={item.testID}
+        tone={tone}
+      >
+        {item.label}
+      </Chip>
+    );
+  };
+
+  return (
+    <Inline align="center" gap="s" testID={testID} wrap={wrap ? 'wrap' : 'nowrap'}>
+      {items.map(renderChip)}
+    </Inline>
+  );
+}
+
+export const ChipGroup = withZoraThemeScope(ChipGroupInner);

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

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

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

@@ -0,0 +1,36 @@
+import type { ButtonIconSpec } from '@ankhorage/surface';
+import type React from 'react';
+
+import type { ZoraControlSize, ZoraTone } 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>[];
+  tone?: ZoraTone;
+  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>);

package/src/components/input/Input.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import { resolveIconSize } from '../../internal/recipes';
 import { useZoraTheme } from '../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import { IconButton } from '../icon-button';
 import type { InputProps } from './types';
 
 function InputInner({
@@ -12,6 +13,9 @@ function InputInner({
   size = 'l',
   leadingIcon,
   trailingIcon,
+  trailingAction,
+  disabled,
+  readOnly,
   ...props
 }: InputProps) {
   const { theme } = useZoraTheme();
@@ -21,6 +25,7 @@ function InputInner({
   return (
     <Surface.TextInput
       {...props}
+      disabled={disabled}
       leadingAccessory={
         leadingIcon ? (
           <Surface.Icon
@@ -31,9 +36,20 @@ function InputInner({
           />
         ) : undefined
       }
+      readOnly={readOnly}
       size={size}
       trailingAccessory={
-        trailingIcon ? (
+        trailingAction ? (
+          <IconButton
+            icon={trailingAction.icon}
+            label={trailingAction.label}
+            disabled={disabled ?? readOnly}
+            emphasis="ghost"
+            size={size === 'l' ? 'm' : size}
+            tone="neutral"
+            onPress={trailingAction.onPress}
+          />
+        ) : trailingIcon ? (
           <Surface.Icon
             color={iconColor}
             name={trailingIcon.name}

package/src/components/input/index.ts

@@ -1,2 +1,2 @@
 export { Input } from './Input';
-export type { InputProps } from './types';
+export type { InputProps, InputTrailingAction } from './types';