@ankhorage/zora 7.0.0 → 8.0.0

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