@ankhorage/zora 0.3.6 → 0.3.7

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

package/src/components/toolbar/types.ts

@@ -0,0 +1,21 @@
+import type { ButtonIconSpec } from '@ankhorage/surface';
+import type React from 'react';
+
+export type ToolbarPosition = 'top' | 'bottom' | 'inline';
+
+export interface ToolbarProps {
+  children?: React.ReactNode;
+  position?: ToolbarPosition;
+  floating?: boolean;
+  compact?: boolean;
+  testID?: string;
+}
+
+export interface ToolbarActionProps {
+  label: string;
+  icon: ButtonIconSpec;
+  active?: boolean;
+  disabled?: boolean;
+  onPress?: () => void;
+  testID?: string;
+}

package/src/index.ts

@@ -0,0 +1,72 @@
+export type { BadgeProps } from './components/badge';
+export { Badge } from './components/badge';
+export type { ButtonProps } from './components/button';
+export { Button } from './components/button';
+export type { CardProps } from './components/card';
+export { Card } from './components/card';
+export type { DrawerProps } from './components/drawer';
+export { Drawer } from './components/drawer';
+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 { Input } from './components/input';
+export type { ModalProps } from './components/modal';
+export { Modal } from './components/modal';
+export type { SelectOption, SelectProps } from './components/select';
+export { Select } from './components/select';
+export type { TabItem, TabsProps } from './components/tabs';
+export { Tabs } from './components/tabs';
+export type { TextareaProps } from './components/textarea';
+export { Textarea } from './components/textarea';
+export type { ToolbarActionProps, ToolbarProps } from './components/toolbar';
+export { Toolbar, ToolbarAction } from './components/toolbar';
+export type { AppShellProps } from './layout/app-shell';
+export { AppShell } from './layout/app-shell';
+export type { AuthLayoutProps } from './layout/auth-layout';
+export { AuthLayout } from './layout/auth-layout';
+export type { PageProps } from './layout/page';
+export { Page } from './layout/page';
+export type { PageHeaderProps } from './layout/page-header';
+export { PageHeader } from './layout/page-header';
+export type { PageSectionProps } from './layout/page-section';
+export { PageSection } from './layout/page-section';
+export type { SettingsLayoutProps } from './layout/settings-layout';
+export { SettingsLayout } from './layout/settings-layout';
+export type { SidebarLayoutProps } from './layout/sidebar-layout';
+export { SidebarLayout } from './layout/sidebar-layout';
+export type { TopbarLayoutProps } from './layout/topbar-layout';
+export { TopbarLayout } from './layout/topbar-layout';
+export type {
+  CollectionEditorProps,
+  CollectionEditorRenderItemProps,
+} from './patterns/collection-editor';
+export { CollectionEditor } from './patterns/collection-editor';
+export type { ConfirmDialogProps } from './patterns/confirm-dialog';
+export { ConfirmDialog } from './patterns/confirm-dialog';
+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 { FormFieldProps } from './patterns/form-field';
+export { FormField } from './patterns/form-field';
+export type { InspectorFieldProps } from './patterns/inspector-field';
+export { InspectorField } from './patterns/inspector-field';
+export type { NoticeProps } from './patterns/notice';
+export { Notice } from './patterns/notice';
+export type { PanelProps } from './patterns/panel';
+export { Panel } from './patterns/panel';
+export type { ResponsivePanelProps } from './patterns/responsive-panel';
+export { ResponsivePanel } from './patterns/responsive-panel';
+export type { SectionHeaderProps } from './patterns/section-header';
+export { SectionHeader } from './patterns/section-header';
+export type { SettingsRowProps } from './patterns/settings-row';
+export { SettingsRow } from './patterns/settings-row';
+export type { SwitchFieldProps } from './patterns/switch-field';
+export { SwitchField } from './patterns/switch-field';
+export type { PaletteItemProps, TileGridProps } from './patterns/tile-grid';
+export { PaletteItem, TileGrid } from './patterns/tile-grid';
+export type { TreeItemNode, TreeItemRenderProps, TreeViewProps } from './patterns/tree-view';
+export { TreeItem, TreeView } from './patterns/tree-view';
+export * from './theme';

package/src/internal/deepMerge.ts

@@ -0,0 +1,23 @@
+export function deepMerge<T extends object>(target: T, source: Partial<T>): T {
+  const result = { ...target };
+
+  (Object.keys(source) as (keyof T)[]).forEach((key) => {
+    const sourceValue = source[key];
+    const targetValue = target[key];
+
+    if (
+      sourceValue &&
+      typeof sourceValue === 'object' &&
+      !Array.isArray(sourceValue) &&
+      targetValue &&
+      typeof targetValue === 'object' &&
+      !Array.isArray(targetValue)
+    ) {
+      result[key] = deepMerge(targetValue as object, sourceValue as object) as T[keyof T];
+    } else if (sourceValue !== undefined) {
+      result[key] = sourceValue as T[keyof T];
+    }
+  });
+
+  return result;
+}

package/src/internal/recipes.test.ts

@@ -0,0 +1,46 @@
+import { describe, expect, test } from 'bun:test';
+
+import {
+  resolveBadgeRecipe,
+  resolveButtonRecipe,
+  resolveCardVariant,
+  resolveDialogWidth,
+  resolveIconSize,
+  resolvePageMaxWidth,
+} from './recipes';
+
+describe('recipes', () => {
+  test('maps button defaults to a more opinionated large solid primary button', () => {
+    expect(resolveButtonRecipe({})).toEqual({
+      size: 'l',
+      tone: 'primary',
+      variant: 'solid',
+    });
+  });
+
+  test('maps badge defaults to a soft medium primary badge', () => {
+    expect(resolveBadgeRecipe({})).toEqual({
+      size: 'm',
+      tone: 'primary',
+      variant: 'soft',
+    });
+  });
+
+  test('resolves elevated cards by default', () => {
+    expect(resolveCardVariant()).toBe('raised');
+    expect(resolveCardVariant('outline')).toBe('outline');
+    expect(resolveCardVariant('subtle')).toBe('subtle');
+  });
+
+  test('keeps width presets stable for layouts and dialogs', () => {
+    expect(resolveDialogWidth('narrow')).toBeLessThan(resolveDialogWidth('default'));
+    expect(resolveDialogWidth('wide')).toBeGreaterThanOrEqual(resolveDialogWidth('default'));
+    expect(resolvePageMaxWidth('wide')).toBeGreaterThan(resolvePageMaxWidth('default'));
+  });
+
+  test('keeps icon sizes aligned with control sizes', () => {
+    expect(resolveIconSize('s')).toBe(16);
+    expect(resolveIconSize('m')).toBe(18);
+    expect(resolveIconSize('l')).toBe(20);
+  });
+});

package/src/internal/recipes.ts

@@ -0,0 +1,92 @@
+import type {
+  BadgeProps as SurfaceBadgeProps,
+  ButtonProps as SurfaceButtonProps,
+  CardProps as SurfaceCardProps,
+} from '@ankhorage/surface';
+
+export type ZoraTone = NonNullable<SurfaceButtonProps['tone']>;
+export type ZoraEmphasis = NonNullable<SurfaceButtonProps['variant']>;
+export type ZoraControlSize = NonNullable<SurfaceButtonProps['size']>;
+export type ZoraBadgeEmphasis = NonNullable<SurfaceBadgeProps['variant']>;
+export type ZoraCardTone = 'default' | 'subtle' | 'outline';
+export type ZoraContentWidth = 'narrow' | 'default' | 'wide';
+
+export function resolveButtonRecipe({
+  tone = 'primary',
+  emphasis = 'solid',
+  size = 'l',
+}: {
+  tone?: ZoraTone;
+  emphasis?: ZoraEmphasis;
+  size?: ZoraControlSize;
+}): Pick<SurfaceButtonProps, 'size' | 'tone' | 'variant'> {
+  return {
+    size,
+    tone,
+    variant: emphasis,
+  };
+}
+
+export function resolveBadgeRecipe({
+  tone = 'primary',
+  emphasis = 'soft',
+  size = 'm',
+}: {
+  tone?: ZoraTone;
+  emphasis?: ZoraBadgeEmphasis;
+  size?: ZoraControlSize;
+}): Pick<SurfaceBadgeProps, 'size' | 'tone' | 'variant'> {
+  return {
+    size,
+    tone,
+    variant: emphasis,
+  };
+}
+
+export function resolveCardVariant(tone: ZoraCardTone = 'default'): SurfaceCardProps['variant'] {
+  switch (tone) {
+    case 'outline':
+      return 'outline';
+    case 'subtle':
+      return 'subtle';
+    case 'default':
+    default:
+      return 'raised';
+  }
+}
+
+export function resolveDialogWidth(width: ZoraContentWidth = 'default'): number {
+  switch (width) {
+    case 'narrow':
+      return 420;
+    case 'wide':
+      return 560;
+    case 'default':
+    default:
+      return 520;
+  }
+}
+
+export function resolvePageMaxWidth(width: ZoraContentWidth = 'default'): number {
+  switch (width) {
+    case 'narrow':
+      return 760;
+    case 'wide':
+      return 1280;
+    case 'default':
+    default:
+      return 1040;
+  }
+}
+
+export function resolveIconSize(size: ZoraControlSize = 'l'): number {
+  switch (size) {
+    case 's':
+      return 16;
+    case 'm':
+      return 18;
+    case 'l':
+    default:
+      return 20;
+  }
+}

package/src/layout/app-shell/AppShell.tsx

@@ -0,0 +1,15 @@
+import { Box, Stack } from '@ankhorage/surface';
+import React from 'react';
+
+import type { AppShellProps } from './types';
+
+export function AppShell({ children, topbar, testID }: AppShellProps) {
+  return (
+    <Box bg="background" flex={1} testID={testID}>
+      <Stack gap="none">
+        {topbar ? <Box>{topbar}</Box> : null}
+        <Box flex={1}>{children}</Box>
+      </Stack>
+    </Box>
+  );
+}

package/src/layout/app-shell/index.ts

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

package/src/layout/app-shell/types.ts

@@ -0,0 +1,7 @@
+import type React from 'react';
+
+export interface AppShellProps {
+  children?: React.ReactNode;
+  topbar?: React.ReactNode;
+  testID?: string;
+}

package/src/layout/auth-layout/AuthLayout.tsx

@@ -0,0 +1,29 @@
+import { Center, Stack } from '@ankhorage/surface';
+import React from 'react';
+
+import { Card } from '../../components/card';
+import type { AuthLayoutProps } from './types';
+
+export function AuthLayout({
+  title,
+  description,
+  eyebrow,
+  children,
+  footer,
+  testID,
+}: AuthLayoutProps) {
+  return (
+    <Center py="xl" testID={testID}>
+      <Card
+        compact
+        description={description}
+        eyebrow={eyebrow}
+        footer={footer}
+        title={title}
+        tone="default"
+      >
+        <Stack gap="m">{children}</Stack>
+      </Card>
+    </Center>
+  );
+}

package/src/layout/auth-layout/index.ts

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

package/src/layout/auth-layout/types.ts

@@ -0,0 +1,10 @@
+import type React from 'react';
+
+export interface AuthLayoutProps {
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  eyebrow?: React.ReactNode;
+  children?: React.ReactNode;
+  footer?: React.ReactNode;
+  testID?: string;
+}

package/src/layout/page/Page.tsx

@@ -0,0 +1,17 @@
+import { Container, Stack } from '@ankhorage/surface';
+import React from 'react';
+
+import { resolvePageMaxWidth } from '../../internal/recipes';
+import type { PageProps } from './types';
+
+export function Page({ children, header, footer, width = 'default', testID }: PageProps) {
+  return (
+    <Container maxWidth={resolvePageMaxWidth(width)} py="xl" testID={testID}>
+      <Stack gap="l">
+        {header}
+        {children}
+        {footer}
+      </Stack>
+    </Container>
+  );
+}

package/src/layout/page/index.ts

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

package/src/layout/page/types.ts

@@ -0,0 +1,11 @@
+import type React from 'react';
+
+import type { ZoraContentWidth } from '../../internal/recipes';
+
+export interface PageProps {
+  children?: React.ReactNode;
+  header?: React.ReactNode;
+  footer?: React.ReactNode;
+  width?: ZoraContentWidth;
+  testID?: string;
+}

package/src/layout/page-header/PageHeader.tsx

@@ -0,0 +1,41 @@
+import { Box, Heading, Stack, Text } from '@ankhorage/surface';
+import React from 'react';
+
+import type { PageHeaderProps } from './types';
+
+export function PageHeader({
+  title,
+  description,
+  eyebrow,
+  actions,
+  meta,
+  testID,
+}: PageHeaderProps) {
+  return (
+    <Stack
+      align={{ base: 'flex-start', md: 'center' }}
+      direction={{ base: 'column', md: 'row' }}
+      gap="l"
+      justify="space-between"
+      testID={testID}
+    >
+      <Box flex={1}>
+        <Stack gap="s">
+          {eyebrow ? (
+            <Text tone="muted" variant="caption" weight="semiBold">
+              {eyebrow}
+            </Text>
+          ) : null}
+          <Heading level={1}>{title}</Heading>
+          {description ? (
+            <Text tone="muted" variant="body">
+              {description}
+            </Text>
+          ) : null}
+          {meta ? <Box pt="xs">{meta}</Box> : null}
+        </Stack>
+      </Box>
+      {actions ? <Box>{actions}</Box> : null}
+    </Stack>
+  );
+}

package/src/layout/page-header/index.ts

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

package/src/layout/page-header/types.ts

@@ -0,0 +1,10 @@
+import type React from 'react';
+
+export interface PageHeaderProps {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  eyebrow?: React.ReactNode;
+  actions?: React.ReactNode;
+  meta?: React.ReactNode;
+  testID?: string;
+}