@ankhorage/zora 1.0.4 → 1.0.6

package/src/components/input/types.ts

@@ -3,7 +3,23 @@ import type * as Surface from '@ankhorage/surface';
 import type { ZoraControlSize } from '../../internal/recipes';
 import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
-export interface InputProps
+export interface InputTrailingAction {
+  icon: Surface.ButtonIconSpec;
+  label: string;
+  onPress: () => void;
+}
+
+type InputTrailingProps =
+  | {
+      trailingIcon?: Surface.ButtonIconSpec;
+      trailingAction?: never;
+    }
+  | {
+      trailingIcon?: never;
+      trailingAction?: InputTrailingAction;
+    };
+
+export interface InputBaseProps
   extends
     ZoraBaseProps,
     Omit<
@@ -12,5 +28,6 @@ export interface InputProps
     > {
   size?: ZoraControlSize;
   leadingIcon?: Surface.ButtonIconSpec;
-  trailingIcon?: Surface.ButtonIconSpec;
 }
+
+export type InputProps = InputBaseProps & InputTrailingProps;

package/src/components/search-bar/SearchBar.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import { Input, type InputTrailingAction } from '../input';
+import type { SearchBarProps } from './types';
+
+function SearchBarInner({
+  themeId: _themeId,
+  mode: _mode,
+  testID,
+  value,
+  onValueChange,
+  placeholder = 'Search',
+  onSubmit,
+  onClear,
+  clearable = true,
+  size = 'l',
+  disabled,
+  readOnly,
+}: SearchBarProps) {
+  const trailingAction: InputTrailingAction | undefined =
+    clearable && value.length > 0
+      ? {
+          icon: { name: 'close-circle' },
+          label: 'Clear search',
+          onPress: () => {
+            onValueChange('');
+            onClear?.();
+          },
+        }
+      : undefined;
+
+  return (
+    <Input
+      disabled={disabled}
+      leadingIcon={{ name: 'search-outline' }}
+      onChangeText={onValueChange}
+      onSubmitEditing={onSubmit ? () => onSubmit(value) : undefined}
+      placeholder={placeholder}
+      readOnly={readOnly}
+      returnKeyType="search"
+      size={size}
+      testID={testID}
+      trailingAction={trailingAction}
+      value={value}
+    />
+  );
+}
+
+export const SearchBar = withZoraThemeScope(SearchBarInner);

package/src/components/search-bar/index.ts

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

package/src/components/search-bar/types.ts

@@ -0,0 +1,14 @@
+import type { ZoraControlSize } from '../../internal/recipes';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export interface SearchBarProps extends ZoraBaseProps {
+  value: string;
+  onValueChange: (value: string) => void;
+  placeholder?: string;
+  onSubmit?: (value: string) => void;
+  onClear?: () => void;
+  clearable?: boolean;
+  size?: ZoraControlSize;
+  disabled?: boolean;
+  readOnly?: boolean;
+}

package/src/index.ts

@@ -1,3 +1,7 @@
+export type { AvatarProps, AvatarShape, AvatarSize } from './components/avatar';
+export { Avatar, resolveAvatarInitials } from './components/avatar';
+export type { AvatarGroupItem, AvatarGroupProps } from './components/avatar-group';
+export { AvatarGroup } from './components/avatar-group';
 export type { BadgeProps } from './components/badge';
 export { Badge } from './components/badge';
 export type { ButtonProps } from './components/button';
@@ -6,6 +10,10 @@ export type { CardProps } from './components/card';
 export { Card } from './components/card';
 export type { CheckboxGroupOption, CheckboxGroupProps, CheckboxProps } from './components/checkbox';
 export { Checkbox, CheckboxGroup } from './components/checkbox';
+export type { ChipProps } from './components/chip';
+export { Chip } from './components/chip';
+export type { ChipGroupItem, ChipGroupProps } from './components/chip-group';
+export { ChipGroup } from './components/chip-group';
 export type { DrawerProps } from './components/drawer';
 export { Drawer } from './components/drawer';
 export type {
@@ -50,12 +58,14 @@ export type { IconProps } from './components/icon';
 export { Icon } from './components/icon';
 export type { IconButtonProps } from './components/icon-button';
 export { IconButton } from './components/icon-button';
-export type { InputProps } from './components/input';
+export type { InputProps, InputTrailingAction } from './components/input';
 export { Input } from './components/input';
 export type { ModalProps } from './components/modal';
 export { Modal } from './components/modal';
 export type { RadioGroupOption, RadioGroupProps, RadioProps } from './components/radio';
 export { Radio, RadioGroup } from './components/radio';
+export type { SearchBarProps } from './components/search-bar';
+export { SearchBar } from './components/search-bar';
 export type { SelectOption, SelectProps } from './components/select';
 export { Select } from './components/select';
 export type { TabItem, TabsProps } from './components/tabs';
@@ -132,8 +142,19 @@ export type { DisclosureSectionProps } from './patterns/disclosure-section';
 export { DisclosureSection } from './patterns/disclosure-section';
 export type { EmptyStateAction, EmptyStateProps } from './patterns/empty-state';
 export { EmptyState } from './patterns/empty-state';
+export type { FilterBarProps } from './patterns/filter-bar';
+export { FilterBar } from './patterns/filter-bar';
 export type { InspectorFieldProps } from './patterns/inspector-field';
 export { InspectorField } from './patterns/inspector-field';
+export type {
+  ListChildrenProps,
+  ListItemsProps,
+  ListProps,
+  ListRowProps,
+  ListRowVariant,
+  ListSectionProps,
+} from './patterns/list';
+export { List, ListRow, ListSection } from './patterns/list';
 export type { NoticeProps } from './patterns/notice';
 export { Notice } from './patterns/notice';
 export type { PanelProps } from './patterns/panel';

package/src/patterns/filter-bar/FilterBar.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { Box, Inline } from '../../foundation';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import type { FilterBarProps } from './types';
+
+function FilterBarInner({
+  themeId: _themeId,
+  mode: _mode,
+  testID,
+  leading,
+  trailing,
+  children,
+  wrap = true,
+}: FilterBarProps) {
+  return (
+    <Inline align="center" gap="s" testID={testID} wrap={wrap ? 'wrap' : 'nowrap'}>
+      {leading ? <Box>{leading}</Box> : null}
+      <Box flex={1}>{children}</Box>
+      {trailing ? <Box>{trailing}</Box> : null}
+    </Inline>
+  );
+}
+
+export const FilterBar = withZoraThemeScope(FilterBarInner);

package/src/patterns/filter-bar/index.ts

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

package/src/patterns/filter-bar/types.ts

@@ -0,0 +1,10 @@
+import type React from 'react';
+
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export interface FilterBarProps extends ZoraBaseProps {
+  leading?: React.ReactNode;
+  trailing?: React.ReactNode;
+  children: React.ReactNode;
+  wrap?: boolean;
+}

package/src/patterns/list/List.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+
+import { Divider, Spacer, Stack } from '../../foundation';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import { ListRow } from './ListRow';
+import { resolveListSeparator } from './resolveListSeparator';
+import type { ListItemsProps, ListProps, ListRowProps, ListRowVariant } from './types';
+
+function resolveRowVariant({
+  item,
+  defaultVariant,
+}: {
+  item: ListRowProps;
+  defaultVariant: ListRowVariant;
+}): ListRowVariant {
+  return item.variant ?? defaultVariant;
+}
+
+function resolveRowCompact({
+  item,
+  compact,
+}: {
+  item: ListRowProps;
+  compact: boolean | undefined;
+}): boolean {
+  return item.compact ?? compact ?? false;
+}
+
+function ListItemsInner({
+  themeId: _themeId,
+  mode: _mode,
+  testID,
+  items,
+  rowVariant = 'divider',
+  compact,
+}: ListItemsProps) {
+  return (
+    <Stack gap="none" testID={testID}>
+      {items.map((item, index) => {
+        const effectiveVariant = resolveRowVariant({ item, defaultVariant: rowVariant });
+        const separator = resolveListSeparator(effectiveVariant, index);
+
+        return (
+          <React.Fragment key={`${index}`}>
+            {separator === 'divider' ? <Divider /> : null}
+            {separator === 'spacer' ? <Spacer size="s" /> : null}
+            <ListRow
+              {...item}
+              compact={resolveRowCompact({ item, compact })}
+              variant={effectiveVariant}
+            />
+          </React.Fragment>
+        );
+      })}
+    </Stack>
+  );
+}
+
+function ListInner(props: ListProps) {
+  if ('items' in props) {
+    return <ListItemsInner {...props} />;
+  }
+
+  const { themeId: _themeId, mode: _mode, children, testID } = props;
+  return (
+    <Stack gap="none" testID={testID}>
+      {children}
+    </Stack>
+  );
+}
+
+export const List = withZoraThemeScope(ListInner);

package/src/patterns/list/ListRow.tsx

@@ -0,0 +1,193 @@
+import { ButtonBase } from '@ankhorage/surface';
+import React from 'react';
+
+import { Text } from '../../components/text';
+import { Box, Inline, Spacer, Stack } from '../../foundation';
+import { useZoraTheme } from '../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import type { ListRowProps, ListRowVariant } from './types';
+
+function resolvePadding(compact: boolean) {
+  return compact ? { px: 'm' as const, py: 's' as const } : { px: 'm' as const, py: 'm' as const };
+}
+
+function resolveContainerStyles({
+  variant,
+  theme,
+  selected,
+  pressed,
+  hovered,
+  disabled,
+}: {
+  variant: ListRowVariant;
+  theme: ReturnType<typeof useZoraTheme>['theme'];
+  selected: boolean;
+  pressed: boolean;
+  hovered: boolean;
+  disabled: boolean;
+}) {
+  const borderColor = selected ? theme.semantics.border.focus : theme.semantics.border.default;
+  const dividerBorderColor = selected ? theme.semantics.border.focus : 'transparent';
+
+  if (variant === 'card') {
+    return {
+      bg: pressed
+        ? theme.semantics.neutral.surfaceActive
+        : hovered
+          ? theme.semantics.neutral.surfaceHover
+          : theme.semantics.surface.raised,
+      borderColor,
+      borderWidth: 1,
+      radius: 'l' as const,
+      opacity: disabled ? 0.72 : 1,
+    };
+  }
+
+  return {
+    bg: pressed
+      ? theme.semantics.neutral.surfaceActive
+      : hovered
+        ? theme.semantics.neutral.surfaceHover
+        : selected
+          ? theme.semantics.neutral.surface
+          : 'transparent',
+    borderColor: dividerBorderColor,
+    borderWidth: selected ? 1 : 0,
+    radius: 'm' as const,
+    opacity: disabled ? 0.72 : 1,
+  };
+}
+
+function ListRowInner({
+  themeId: _themeId,
+  mode: _mode,
+  testID,
+  title,
+  description,
+  meta,
+  leading,
+  trailing,
+  action,
+  onPress,
+  selected = false,
+  disabled = false,
+  compact = false,
+  variant = 'divider',
+}: ListRowProps) {
+  const { theme } = useZoraTheme();
+  const padding = resolvePadding(compact);
+  const isInteractive = Boolean(onPress) && !action;
+
+  const content = (
+    <Stack
+      align="center"
+      direction="row"
+      style={{
+        flex: 1,
+      }}
+    >
+      {leading ? (
+        <>
+          <Box>{leading}</Box>
+          <Spacer axis="horizontal" size="m" />
+        </>
+      ) : null}
+
+      <Box flex={1}>
+        <Stack gap="xxs">
+          <Text variant="body" weight={selected ? 'semiBold' : 'medium'}>
+            {title}
+          </Text>
+          {description ? (
+            <Text tone="muted" variant="bodySmall">
+              {description}
+            </Text>
+          ) : null}
+          {meta ? (
+            <Text tone="subtle" variant="caption">
+              {meta}
+            </Text>
+          ) : null}
+        </Stack>
+      </Box>
+
+      {trailing || action ? (
+        <>
+          <Spacer axis="horizontal" size="m" />
+          <Inline align="center" gap="s" wrap="nowrap">
+            {trailing}
+            {action}
+          </Inline>
+        </>
+      ) : null}
+    </Stack>
+  );
+
+  if (!isInteractive) {
+    const styles = resolveContainerStyles({
+      variant,
+      theme,
+      selected,
+      pressed: false,
+      hovered: false,
+      disabled,
+    });
+
+    return (
+      <Box
+        bg={styles.bg}
+        borderColor={styles.borderColor}
+        borderWidth={styles.borderWidth}
+        px={padding.px}
+        py={padding.py}
+        radius={styles.radius}
+        testID={testID}
+        style={{
+          opacity: styles.opacity,
+        }}
+      >
+        {content}
+      </Box>
+    );
+  }
+
+  return (
+    <ButtonBase
+      accessibilityRole="button"
+      accessibilityState={{ disabled, selected }}
+      disabled={disabled}
+      onPress={onPress}
+      radius={variant === 'card' ? 'l' : 'm'}
+      testID={testID}
+    >
+      {(state) => {
+        const styles = resolveContainerStyles({
+          variant,
+          theme,
+          selected,
+          pressed: state.pressed,
+          hovered: state.hovered,
+          disabled: state.disabled,
+        });
+
+        return (
+          <Box
+            bg={styles.bg}
+            borderColor={styles.borderColor}
+            borderWidth={styles.borderWidth}
+            px={padding.px}
+            py={padding.py}
+            radius={styles.radius}
+            style={{
+              opacity: styles.opacity,
+            }}
+          >
+            {content}
+          </Box>
+        );
+      }}
+    </ButtonBase>
+  );
+}
+
+export const ListRow = withZoraThemeScope(ListRowInner);

package/src/patterns/list/ListSection.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import { Stack } from '../../foundation';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import { SectionHeader } from '../section-header';
+import { List } from './List';
+import type { ListSectionProps } from './types';
+
+function ListSectionInner({
+  themeId: _themeId,
+  mode: _mode,
+  testID,
+  title,
+  description,
+  eyebrow,
+  actions,
+  ...props
+}: ListSectionProps) {
+  const hasHeader = title !== undefined;
+
+  return (
+    <Stack gap="s" testID={testID}>
+      {hasHeader ? (
+        <SectionHeader
+          actions={actions}
+          description={description}
+          eyebrow={eyebrow}
+          title={title}
+        />
+      ) : null}
+      <List {...props} />
+    </Stack>
+  );
+}
+
+export const ListSection = withZoraThemeScope(ListSectionInner);

package/src/patterns/list/index.ts

@@ -0,0 +1,11 @@
+export { List } from './List';
+export { ListRow } from './ListRow';
+export { ListSection } from './ListSection';
+export type {
+  ListChildrenProps,
+  ListItemsProps,
+  ListProps,
+  ListRowProps,
+  ListRowVariant,
+  ListSectionProps,
+} from './types';

package/src/patterns/list/resolveListSeparator.test.ts

@@ -0,0 +1,18 @@
+import { describe, expect, it } from 'bun:test';
+
+import { resolveListSeparator } from './resolveListSeparator';
+
+describe('resolveListSeparator', () => {
+  it('returns none for the first item', () => {
+    expect(resolveListSeparator('divider', 0)).toBe('none');
+    expect(resolveListSeparator('card', 0)).toBe('none');
+  });
+
+  it('returns divider for divider rows', () => {
+    expect(resolveListSeparator('divider', 1)).toBe('divider');
+  });
+
+  it('returns spacer for card rows', () => {
+    expect(resolveListSeparator('card', 1)).toBe('spacer');
+  });
+});

package/src/patterns/list/resolveListSeparator.ts

@@ -0,0 +1,8 @@
+import type { ListRowVariant } from './types';
+
+type ListSeparatorKind = 'none' | 'divider' | 'spacer';
+
+export function resolveListSeparator(variant: ListRowVariant, index: number): ListSeparatorKind {
+  if (index === 0) return 'none';
+  return variant === 'divider' ? 'divider' : 'spacer';
+}

package/src/patterns/list/types.ts

@@ -0,0 +1,67 @@
+import type React from 'react';
+
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export type ListRowVariant = 'divider' | 'card';
+
+interface ListRowBaseProps extends ZoraBaseProps {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  meta?: React.ReactNode;
+  leading?: React.ReactNode;
+  trailing?: React.ReactNode;
+  selected?: boolean;
+  disabled?: boolean;
+  compact?: boolean;
+  variant?: ListRowVariant;
+}
+
+interface ListRowPressableProps {
+  onPress: () => void;
+  action?: never;
+}
+
+interface ListRowActionProps {
+  action: React.ReactNode;
+  onPress?: never;
+}
+
+interface ListRowStaticProps {
+  action?: never;
+  onPress?: never;
+}
+
+export type ListRowProps = ListRowBaseProps &
+  (ListRowPressableProps | ListRowActionProps | ListRowStaticProps);
+
+export interface ListItemsProps extends ZoraBaseProps {
+  items: readonly ListRowProps[];
+  rowVariant?: ListRowVariant;
+  compact?: boolean;
+}
+
+export interface ListChildrenProps extends ZoraBaseProps {
+  children: React.ReactNode;
+}
+
+export type ListProps = ListItemsProps | ListChildrenProps;
+
+export interface ListSectionItemsProps extends ZoraBaseProps {
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  eyebrow?: React.ReactNode;
+  actions?: React.ReactNode;
+  items: readonly ListRowProps[];
+  rowVariant?: ListRowVariant;
+  compact?: boolean;
+}
+
+export interface ListSectionChildrenProps extends ZoraBaseProps {
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  eyebrow?: React.ReactNode;
+  actions?: React.ReactNode;
+  children: React.ReactNode;
+}
+
+export type ListSectionProps = ListSectionItemsProps | ListSectionChildrenProps;

package/src/showcaseCoverage.test.ts

@@ -17,11 +17,15 @@ const IGNORED_DIRECTORY_NAMES = new Set([
 
 const REQUIRED_SHOWCASE_COVERAGE = {
   components: [
+    'Avatar',
+    'AvatarGroup',
     'Badge',
     'Button',
     'Card',
     'Checkbox',
     'CheckboxGroup',
+    'Chip',
+    'ChipGroup',
     'Drawer',
     'Form',
     'FormActions',
@@ -34,6 +38,7 @@ const REQUIRED_SHOWCASE_COVERAGE = {
     'Modal',
     'Radio',
     'RadioGroup',
+    'SearchBar',
     'Select',
     'Tabs',
     'Text',
@@ -72,6 +77,10 @@ const REQUIRED_SHOWCASE_COVERAGE = {
     'ConfirmDialog',
     'DisclosureSection',
     'EmptyState',
+    'FilterBar',
+    'List',
+    'ListRow',
+    'ListSection',
     'InspectorField',
     'Notice',
     'Panel',

package/src/theme/themeScopeStructure.test.ts

@@ -96,6 +96,9 @@ const scopedComponentFiles = [
   join(srcDir, 'patterns', 'empty-state', 'EmptyState.tsx'),
   join(srcDir, 'patterns', 'form-field', 'FormField.tsx'),
   join(srcDir, 'patterns', 'inspector-field', 'InspectorField.tsx'),
+  join(srcDir, 'patterns', 'list', 'List.tsx'),
+  join(srcDir, 'patterns', 'list', 'ListRow.tsx'),
+  join(srcDir, 'patterns', 'list', 'ListSection.tsx'),
   join(srcDir, 'patterns', 'notice', 'Notice.tsx'),
   join(srcDir, 'patterns', 'panel', 'Panel.tsx'),
   join(srcDir, 'patterns', 'responsive-panel', 'ResponsivePanel.tsx'),
@@ -154,6 +157,7 @@ const scopedPropTypeFiles = [
   join(srcDir, 'patterns', 'empty-state', 'types.ts'),
   join(srcDir, 'patterns', 'form-field', 'types.ts'),
   join(srcDir, 'patterns', 'inspector-field', 'types.ts'),
+  join(srcDir, 'patterns', 'list', 'types.ts'),
   join(srcDir, 'patterns', 'notice', 'types.ts'),
   join(srcDir, 'patterns', 'panel', 'types.ts'),
   join(srcDir, 'patterns', 'responsive-panel', 'types.ts'),