@ankhorage/zora 0.3.6 → 0.3.8

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;
+}

package/src/layout/page-section/PageSection.tsx

@@ -0,0 +1,14 @@
+import { Stack } from '@ankhorage/surface';
+import React from 'react';
+
+import { SectionHeader } from '../../patterns/section-header';
+import type { PageSectionProps } from './types';
+
+export function PageSection({ title, description, actions, children, testID }: PageSectionProps) {
+  return (
+    <Stack gap="m" testID={testID}>
+      {title ? <SectionHeader actions={actions} description={description} title={title} /> : null}
+      {children}
+    </Stack>
+  );
+}

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

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

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

@@ -0,0 +1,9 @@
+import type React from 'react';
+
+export interface PageSectionProps {
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  actions?: React.ReactNode;
+  children?: React.ReactNode;
+  testID?: string;
+}

package/src/layout/settings-layout/SettingsLayout.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { Page } from '../page';
+import { PageHeader } from '../page-header';
+import { SidebarLayout } from '../sidebar-layout';
+import type { SettingsLayoutProps } from './types';
+
+export function SettingsLayout({
+  title,
+  description,
+  sidebar,
+  children,
+  actions,
+  testID,
+}: SettingsLayoutProps) {
+  return (
+    <Page
+      header={
+        title ? <PageHeader actions={actions} description={description} title={title} /> : null
+      }
+      testID={testID}
+    >
+      <SidebarLayout sidebar={sidebar}>{children}</SidebarLayout>
+    </Page>
+  );
+}

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

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

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

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

package/src/layout/sidebar-layout/SidebarLayout.tsx

@@ -0,0 +1,23 @@
+import { Box, Stack } from '@ankhorage/surface';
+import React from 'react';
+
+import type { SidebarLayoutProps } from './types';
+
+export function SidebarLayout({
+  sidebar,
+  children,
+  aside,
+  sidebarWidth = 280,
+  asideWidth = 280,
+  testID,
+}: SidebarLayoutProps) {
+  return (
+    <Stack direction={{ base: 'column', lg: 'row' }} gap="l" testID={testID} align="flex-start">
+      <Box width={{ base: '100%', lg: sidebarWidth }}>{sidebar}</Box>
+      <Box flex={1} width="100%">
+        {children}
+      </Box>
+      {aside ? <Box width={{ base: '100%', lg: asideWidth }}>{aside}</Box> : null}
+    </Stack>
+  );
+}

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

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

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

@@ -0,0 +1,10 @@
+import type React from 'react';
+
+export interface SidebarLayoutProps {
+  sidebar: React.ReactNode;
+  children?: React.ReactNode;
+  aside?: React.ReactNode;
+  sidebarWidth?: number;
+  asideWidth?: number;
+  testID?: string;
+}

package/src/layout/topbar-layout/TopbarLayout.tsx

@@ -0,0 +1,14 @@
+import { Box, Stack } from '@ankhorage/surface';
+import React from 'react';
+
+import { SidebarLayout } from '../sidebar-layout';
+import type { TopbarLayoutProps } from './types';
+
+export function TopbarLayout({ topbar, children, sidebar, testID }: TopbarLayoutProps) {
+  return (
+    <Stack gap="l" testID={testID}>
+      <Box>{topbar}</Box>
+      {sidebar ? <SidebarLayout sidebar={sidebar}>{children}</SidebarLayout> : children}
+    </Stack>
+  );
+}

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

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

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

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

package/src/patterns/collection-editor/CollectionEditor.tsx

@@ -0,0 +1,100 @@
+import { Box, Stack, Text } from '@ankhorage/surface';
+import React from 'react';
+
+import { Button } from '../../components/button';
+import { IconButton } from '../../components/icon-button';
+import { Panel } from '../panel';
+import type { CollectionEditorProps } from './types';
+
+export function CollectionEditor<TItem>({
+  title,
+  description,
+  items,
+  renderItem,
+  onAdd,
+  onRemove,
+  onMove,
+  addLabel = 'Add Item',
+  emptyLabel = 'No items yet.',
+  disabled,
+  testID,
+}: CollectionEditorProps<TItem>) {
+  const isEmpty = items.length === 0;
+
+  return (
+    <Panel
+      compact
+      description={description}
+      testID={testID}
+      title={title}
+      actions={
+        onAdd ? (
+          <Button emphasis="soft" size="s" disabled={disabled} onPress={onAdd}>
+            {addLabel}
+          </Button>
+        ) : null
+      }
+    >
+      <Stack gap="s">
+        {isEmpty ? (
+          <Box py="m">
+            <Text align="center" tone="muted">
+              {emptyLabel}
+            </Text>
+          </Box>
+        ) : (
+          items.map((item, index) => (
+            <Box key={index} bg="subtle" p="s" radius="m" borderColor="border" borderWidth={1}>
+              <Stack direction="row" gap="m" align="center">
+                <Box flex={1}>
+                  {renderItem({
+                    item,
+                    index,
+                    remove: () => onRemove?.(index),
+                    moveUp: () => onMove?.(index, index - 1),
+                    moveDown: () => onMove?.(index, index + 1),
+                    canMoveUp: index > 0,
+                    canMoveDown: index < items.length - 1,
+                  })}
+                </Box>
+                <Stack direction="row" gap="xs">
+                  {onMove ? (
+                    <>
+                      <IconButton
+                        icon={{ name: 'arrow-up-outline' }}
+                        label="Move Up"
+                        disabled={disabled ?? index === 0}
+                        onPress={() => onMove(index, index - 1)}
+                        size="s"
+                        emphasis="ghost"
+                      />
+                      <IconButton
+                        icon={{ name: 'arrow-down-outline' }}
+                        label="Move Down"
+                        disabled={disabled ?? index === items.length - 1}
+                        onPress={() => onMove(index, index + 1)}
+                        size="s"
+                        emphasis="ghost"
+                      />
+                    </>
+                  ) : null}
+                  {onRemove ? (
+                    <IconButton
+                      icon={{ name: 'trash-outline' }}
+                      label="Remove"
+                      tone="danger"
+                      disabled={disabled}
+                      onPress={() => onRemove(index)}
+                      size="s"
+                      emphasis="ghost"
+                    />
+                  ) : null}
+                </Stack>
+              </Stack>
+            </Box>
+          ))
+        )}
+      </Stack>
+    </Panel>
+  );
+}