@ankhorage/zora 0.3.6 → 0.3.8

package/src/components/button/Button.tsx

@@ -0,0 +1,13 @@
+import { Button as SurfaceButton } from '@ankhorage/surface';
+import React from 'react';
+
+import { resolveButtonRecipe } from '../../internal/recipes';
+import type { ButtonProps } from './types';
+
+export function Button({ tone, emphasis, size, ...props }: ButtonProps) {
+  const recipe = resolveButtonRecipe({ tone, emphasis, size });
+
+  return (
+    <SurfaceButton {...props} size={recipe.size} tone={recipe.tone} variant={recipe.variant} />
+  );
+}

package/src/components/button/index.ts

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

package/src/components/button/types.ts

@@ -0,0 +1,16 @@
+import type { ButtonIconSpec, ButtonProps as SurfaceButtonProps } from '@ankhorage/surface';
+import type React from 'react';
+
+import type { ZoraControlSize, ZoraEmphasis, ZoraTone } from '../../internal/recipes';
+
+export interface ButtonProps extends Omit<
+  SurfaceButtonProps,
+  'children' | 'size' | 'tone' | 'variant'
+> {
+  children?: React.ReactNode;
+  tone?: ZoraTone;
+  emphasis?: ZoraEmphasis;
+  size?: ZoraControlSize;
+  leadingIcon?: ButtonIconSpec;
+  trailingIcon?: ButtonIconSpec;
+}

package/src/components/card/Card.tsx

@@ -0,0 +1,65 @@
+import { Box, Card as SurfaceCard, Heading, Stack, Text } from '@ankhorage/surface';
+import React from 'react';
+
+import { resolveCardVariant } from '../../internal/recipes';
+import type { CardProps } from './types';
+
+export function Card({
+  children,
+  title,
+  description,
+  eyebrow,
+  actions,
+  footer,
+  tone = 'default',
+  compact = false,
+  onPress,
+  ...props
+}: CardProps) {
+  const hasHeader = [eyebrow, title, description, actions].some((item) => item != null);
+  const hasFooter = footer !== undefined;
+  const gap = compact ? 's' : 'm';
+  const isInteractive = Boolean(onPress) && !actions;
+
+  return (
+    <SurfaceCard
+      {...props}
+      onPress={isInteractive ? onPress : undefined}
+      p={compact ? 'm' : 'l'}
+      radius="l"
+      variant={resolveCardVariant(tone)}
+    >
+      <Stack gap={gap}>
+        {hasHeader ? (
+          <Stack
+            align={{ base: 'flex-start', md: 'center' }}
+            direction={{ base: 'column', md: 'row' }}
+            gap="m"
+            justify="space-between"
+          >
+            <Box flex={1}>
+              <Stack gap="xs">
+                {eyebrow ? (
+                  <Text tone="muted" variant="caption" weight="semiBold">
+                    {eyebrow}
+                  </Text>
+                ) : null}
+                {title ? <Heading level={compact ? 4 : 3}>{title}</Heading> : null}
+                {description ? (
+                  <Text tone="muted" variant="bodySmall">
+                    {description}
+                  </Text>
+                ) : null}
+              </Stack>
+            </Box>
+            {actions ? <Box>{actions}</Box> : null}
+          </Stack>
+        ) : null}
+
+        {children ? <Box>{children}</Box> : null}
+
+        {hasFooter ? <Box pt="xs">{footer}</Box> : null}
+      </Stack>
+    </SurfaceCard>
+  );
+}

package/src/components/card/index.ts

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

package/src/components/card/types.ts

@@ -0,0 +1,15 @@
+import type { CardProps as SurfaceCardProps } from '@ankhorage/surface';
+import type React from 'react';
+
+import type { ZoraCardTone } from '../../internal/recipes';
+
+export interface CardProps extends 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;
+}

package/src/components/drawer/Drawer.tsx

@@ -0,0 +1,27 @@
+import { Box, Drawer as SurfaceDrawer, Heading, Stack, Text } from '@ankhorage/surface';
+import React from 'react';
+
+import type { DrawerProps } from './types';
+
+export function Drawer({ children, title, description, footer, ...props }: DrawerProps) {
+  const hasHeader = title != null || description != null;
+
+  return (
+    <SurfaceDrawer {...props}>
+      <Stack gap="m">
+        {hasHeader ? (
+          <Stack gap="xs">
+            {title ? <Heading level={3}>{title}</Heading> : null}
+            {description ? (
+              <Text tone="muted" variant="bodySmall">
+                {description}
+              </Text>
+            ) : null}
+          </Stack>
+        ) : null}
+        {children ? <Box flex={1}>{children}</Box> : null}
+        {footer ? <Box pt="xs">{footer}</Box> : null}
+      </Stack>
+    </SurfaceDrawer>
+  );
+}

package/src/components/drawer/index.ts

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

package/src/components/drawer/types.ts

@@ -0,0 +1,12 @@
+import type { DrawerProps as SurfaceDrawerProps } from '@ankhorage/surface';
+import type React from 'react';
+
+export interface DrawerProps extends Pick<
+  SurfaceDrawerProps,
+  'closeOnBackdrop' | 'onDismiss' | 'position' | 'testID' | 'visible'
+> {
+  children?: React.ReactNode;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  footer?: React.ReactNode;
+}

package/src/components/icon/Icon.tsx

@@ -0,0 +1,8 @@
+import { Icon as SurfaceIcon, type IconProps as SurfaceIconProps } from '@ankhorage/surface';
+import React from 'react';
+
+export type IconProps = SurfaceIconProps;
+
+export function Icon(props: IconProps) {
+  return <SurfaceIcon {...props} />;
+}

package/src/components/icon/index.ts

@@ -0,0 +1,2 @@
+export type { IconProps } from './Icon';
+export { Icon } from './Icon';

package/src/components/icon-button/IconButton.tsx

@@ -0,0 +1,27 @@
+import { IconButton as SurfaceIconButton } from '@ankhorage/surface';
+import React from 'react';
+
+import { resolveButtonRecipe } from '../../internal/recipes';
+import type { IconButtonProps } from './types';
+
+export function IconButton({
+  icon,
+  label,
+  emphasis = 'ghost',
+  tone = 'neutral',
+  size = 'm',
+  ...props
+}: IconButtonProps) {
+  const recipe = resolveButtonRecipe({ emphasis, tone, size });
+
+  return (
+    <SurfaceIconButton
+      {...props}
+      icon={icon}
+      accessibilityLabel={label}
+      size={recipe.size}
+      tone={recipe.tone}
+      variant={recipe.variant}
+    />
+  );
+}

package/src/components/icon-button/index.ts

@@ -0,0 +1,2 @@
+export * from './IconButton';
+export * from './types';

package/src/components/icon-button/types.ts

@@ -0,0 +1,15 @@
+import type { ButtonIconSpec } from '@ankhorage/surface';
+
+import type { ZoraControlSize, ZoraEmphasis, ZoraTone } from '../../internal/recipes';
+
+export interface IconButtonProps {
+  icon: ButtonIconSpec;
+  label: string;
+  emphasis?: ZoraEmphasis;
+  tone?: ZoraTone;
+  size?: ZoraControlSize;
+  disabled?: boolean;
+  loading?: boolean;
+  onPress?: () => void;
+  testID?: string;
+}

package/src/components/input/Input.tsx

@@ -0,0 +1,38 @@
+import { Icon, TextInput as SurfaceTextInput, useTheme } from '@ankhorage/surface';
+import React from 'react';
+
+import { resolveIconSize } from '../../internal/recipes';
+import type { InputProps } from './types';
+
+export function Input({ size = 'l', leadingIcon, trailingIcon, ...props }: InputProps) {
+  const { theme } = useTheme();
+  const iconSize = resolveIconSize(size);
+  const iconColor = theme.semantics.content.muted;
+
+  return (
+    <SurfaceTextInput
+      {...props}
+      leadingAccessory={
+        leadingIcon ? (
+          <Icon
+            color={iconColor}
+            name={leadingIcon.name}
+            provider={leadingIcon.provider}
+            size={iconSize}
+          />
+        ) : undefined
+      }
+      size={size}
+      trailingAccessory={
+        trailingIcon ? (
+          <Icon
+            color={iconColor}
+            name={trailingIcon.name}
+            provider={trailingIcon.provider}
+            size={iconSize}
+          />
+        ) : undefined
+      }
+    />
+  );
+}

package/src/components/input/index.ts

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

package/src/components/input/types.ts

@@ -0,0 +1,12 @@
+import type { ButtonIconSpec, TextInputProps as SurfaceTextInputProps } from '@ankhorage/surface';
+
+import type { ZoraControlSize } from '../../internal/recipes';
+
+export interface InputProps extends Omit<
+  SurfaceTextInputProps,
+  'leadingAccessory' | 'size' | 'trailingAccessory'
+> {
+  size?: ZoraControlSize;
+  leadingIcon?: ButtonIconSpec;
+  trailingIcon?: ButtonIconSpec;
+}

package/src/components/modal/Modal.tsx

@@ -0,0 +1,37 @@
+import { Box, Heading, Modal as SurfaceModal, Stack, Text } from '@ankhorage/surface';
+import React from 'react';
+
+import { resolveDialogWidth } from '../../internal/recipes';
+import type { ModalProps } from './types';
+
+export function Modal({
+  children,
+  title,
+  description,
+  footer,
+  width = 'default',
+  ...props
+}: ModalProps) {
+  const hasHeader = title != null || description != null;
+
+  return (
+    <SurfaceModal {...props}>
+      <Box maxWidth={resolveDialogWidth(width)} style={{ alignSelf: 'center', width: '100%' }}>
+        <Stack gap="m">
+          {hasHeader ? (
+            <Stack gap="xs">
+              {title ? <Heading level={3}>{title}</Heading> : null}
+              {description ? (
+                <Text tone="muted" variant="bodySmall">
+                  {description}
+                </Text>
+              ) : null}
+            </Stack>
+          ) : null}
+          {children ? <Box>{children}</Box> : null}
+          {footer ? <Box pt="xs">{footer}</Box> : null}
+        </Stack>
+      </Box>
+    </SurfaceModal>
+  );
+}

package/src/components/modal/index.ts

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

package/src/components/modal/types.ts

@@ -0,0 +1,15 @@
+import type { ModalProps as SurfaceModalProps } from '@ankhorage/surface';
+import type React from 'react';
+
+import type { ZoraContentWidth } from '../../internal/recipes';
+
+export interface ModalProps extends Pick<
+  SurfaceModalProps,
+  'closeOnBackdrop' | 'onDismiss' | 'testID' | 'visible'
+> {
+  children?: React.ReactNode;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  footer?: React.ReactNode;
+  width?: ZoraContentWidth;
+}

package/src/components/select/Select.tsx

@@ -0,0 +1,49 @@
+import { Box, useTheme } from '@ankhorage/surface';
+import { Picker } from '@react-native-picker/picker';
+import React from 'react';
+
+import type { SelectProps } from './types';
+
+export function Select<TValue extends string = string>({
+  value,
+  options,
+  onValueChange,
+  disabled,
+  invalid,
+  testID,
+}: SelectProps<TValue>) {
+  const { theme } = useTheme();
+
+  return (
+    <Box
+      bg="surface"
+      borderColor={invalid ? theme.colors.error : theme.colors.border}
+      borderWidth={1}
+      opacity={disabled ? 0.5 : 1}
+      radius="m"
+      testID={testID}
+    >
+      <Picker
+        enabled={!disabled}
+        onValueChange={(itemValue) => onValueChange(itemValue)}
+        selectedValue={value}
+        style={{
+          height: 44,
+          width: '100%',
+          backgroundColor: 'transparent',
+          color: theme.colors.text,
+          borderWidth: 0,
+        }}
+      >
+        {options.map((option) => (
+          <Picker.Item
+            key={option.value}
+            enabled={!option.disabled}
+            label={option.label}
+            value={option.value}
+          />
+        ))}
+      </Picker>
+    </Box>
+  );
+}

package/src/components/select/index.ts

@@ -0,0 +1,2 @@
+export * from './Select';
+export * from './types';

package/src/components/select/types.ts

@@ -0,0 +1,14 @@
+export interface SelectOption<TValue extends string = string> {
+  value: TValue;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface SelectProps<TValue extends string = string> {
+  value: TValue;
+  options: readonly SelectOption<TValue>[];
+  onValueChange: (value: TValue) => void;
+  disabled?: boolean;
+  invalid?: boolean;
+  testID?: string;
+}

package/src/components/tabs/Tabs.tsx

@@ -0,0 +1,103 @@
+import { Box, Stack, Text, useTheme } from '@ankhorage/surface';
+import React from 'react';
+
+import { Button } from '../button';
+import type { TabItem, TabsProps } from './types';
+
+export function Tabs<TValue extends string = string>({
+  value,
+  items,
+  onValueChange,
+  variant = 'underline',
+  size = 'm',
+  disabled: tabsDisabled,
+  testID,
+}: TabsProps<TValue>) {
+  const { theme } = useTheme();
+
+  const renderTab = (item: TabItem<TValue>) => {
+    const isActive = item.value === value;
+    const isDisabled = tabsDisabled ?? item.disabled;
+
+    if (variant === 'segmented') {
+      return (
+        <Button
+          key={item.value}
+          emphasis={isActive ? 'solid' : 'ghost'}
+          tone="neutral"
+          size={size}
+          disabled={isDisabled}
+          onPress={() => onValueChange(item.value)}
+          leadingIcon={item.icon}
+          testID={item.testID}
+        >
+          {item.label}
+          {item.badge}
+        </Button>
+      );
+    }
+
+    if (variant === 'pill') {
+      return (
+        <Button
+          key={item.value}
+          emphasis={isActive ? 'soft' : 'ghost'}
+          tone={isActive ? 'primary' : 'neutral'}
+          size={size}
+          disabled={isDisabled}
+          onPress={() => onValueChange(item.value)}
+          leadingIcon={item.icon}
+          testID={item.testID}
+        >
+          {item.label}
+          {item.badge}
+        </Button>
+      );
+    }
+
+    // Default: 'underline'
+    return (
+      <Box
+        key={item.value}
+        borderColor={isActive ? theme.colors.primary : 'transparent'}
+        pb="xs"
+        style={{
+          borderBottomWidth: 2,
+        }}
+      >
+        <Button
+          emphasis="ghost"
+          tone="neutral"
+          size={size}
+          disabled={isDisabled}
+          onPress={() => onValueChange(item.value)}
+          leadingIcon={item.icon}
+          testID={item.testID}
+        >
+          <Text
+            color={isActive ? theme.colors.primary : undefined}
+            tone={isActive ? undefined : 'muted'}
+            weight={isActive ? 'semiBold' : 'regular'}
+          >
+            {item.label}
+          </Text>
+          {item.badge}
+        </Button>
+      </Box>
+    );
+  };
+
+  return (
+    <Stack
+      direction="row"
+      gap={variant === 'segmented' ? 'none' : 'm'}
+      align="center"
+      testID={testID}
+      p={variant === 'segmented' ? 'xxs' : 'none'}
+      bg={variant === 'segmented' ? 'subtle' : 'transparent'}
+      radius={variant === 'segmented' ? 'm' : 'none'}
+    >
+      {items.map(renderTab)}
+    </Stack>
+  );
+}

package/src/components/tabs/index.ts

@@ -0,0 +1,2 @@
+export * from './Tabs';
+export * from './types';

package/src/components/tabs/types.ts

@@ -0,0 +1,25 @@
+import type { ButtonIconSpec } from '@ankhorage/surface';
+import type { ReactNode } from 'react';
+
+import type { ZoraControlSize } from '../../internal/recipes';
+
+export interface TabItem<TValue extends string = string> {
+  value: TValue;
+  label: ReactNode;
+  icon?: ButtonIconSpec;
+  badge?: ReactNode;
+  disabled?: boolean;
+  testID?: string;
+}
+
+export type TabsVariant = 'underline' | 'pill' | 'segmented';
+
+export interface TabsProps<TValue extends string = string> {
+  value: TValue;
+  items: readonly TabItem<TValue>[];
+  onValueChange: (value: TValue) => void;
+  variant?: TabsVariant;
+  size?: ZoraControlSize;
+  disabled?: boolean;
+  testID?: string;
+}

package/src/components/textarea/Textarea.tsx

@@ -0,0 +1,38 @@
+import { Icon, Textarea as SurfaceTextarea, useTheme } from '@ankhorage/surface';
+import React from 'react';
+
+import { resolveIconSize } from '../../internal/recipes';
+import type { TextareaProps } from './types';
+
+export function Textarea({ size = 'l', leadingIcon, trailingIcon, ...props }: TextareaProps) {
+  const { theme } = useTheme();
+  const iconSize = resolveIconSize(size);
+  const iconColor = theme.semantics.content.muted;
+
+  return (
+    <SurfaceTextarea
+      {...props}
+      leadingAccessory={
+        leadingIcon ? (
+          <Icon
+            color={iconColor}
+            name={leadingIcon.name}
+            provider={leadingIcon.provider}
+            size={iconSize}
+          />
+        ) : undefined
+      }
+      size={size}
+      trailingAccessory={
+        trailingIcon ? (
+          <Icon
+            color={iconColor}
+            name={trailingIcon.name}
+            provider={trailingIcon.provider}
+            size={iconSize}
+          />
+        ) : undefined
+      }
+    />
+  );
+}

package/src/components/textarea/index.ts

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

package/src/components/textarea/types.ts

@@ -0,0 +1,12 @@
+import type { ButtonIconSpec, TextareaProps as SurfaceTextareaProps } from '@ankhorage/surface';
+
+import type { ZoraControlSize } from '../../internal/recipes';
+
+export interface TextareaProps extends Omit<
+  SurfaceTextareaProps,
+  'leadingAccessory' | 'size' | 'trailingAccessory'
+> {
+  size?: ZoraControlSize;
+  leadingIcon?: ButtonIconSpec;
+  trailingIcon?: ButtonIconSpec;
+}

package/src/components/toolbar/Toolbar.tsx

@@ -0,0 +1,38 @@
+import { Stack } from '@ankhorage/surface';
+import React from 'react';
+
+import { Card } from '../card';
+import type { ToolbarProps } from './types';
+
+export function Toolbar({
+  children,
+  position = 'inline',
+  floating = false,
+  compact = true,
+  testID,
+}: ToolbarProps) {
+  const isFixed = position === 'top' || position === 'bottom';
+
+  return (
+    <Card
+      compact={compact}
+      tone={floating ? 'default' : 'subtle'}
+      testID={testID}
+      style={
+        isFixed
+          ? {
+              position: 'absolute',
+              left: 0,
+              right: 0,
+              [position]: 0,
+              zIndex: 10,
+            }
+          : undefined
+      }
+    >
+      <Stack direction="row" gap="s" align="center">
+        {children}
+      </Stack>
+    </Card>
+  );
+}

package/src/components/toolbar/ToolbarAction.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { IconButton } from '../icon-button';
+import type { ToolbarActionProps } from './types';
+
+export function ToolbarAction({ active, ...props }: ToolbarActionProps) {
+  return (
+    <IconButton
+      {...props}
+      emphasis={active ? 'soft' : 'ghost'}
+      tone={active ? 'primary' : 'neutral'}
+      size="m"
+    />
+  );
+}

package/src/components/toolbar/index.ts

@@ -0,0 +1,3 @@
+export * from './Toolbar';
+export * from './ToolbarAction';
+export * from './types';