@ankhorage/zora 1.0.3 → 1.0.5

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

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,6 +142,8 @@ 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 { NoticeProps } from './patterns/notice';

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/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,7 @@ const REQUIRED_SHOWCASE_COVERAGE = {
     'ConfirmDialog',
     'DisclosureSection',
     'EmptyState',
+    'FilterBar',
     'InspectorField',
     'Notice',
     'Panel',