@ankhorage/zora 0.3.6 → 0.3.7

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

package/src/patterns/collection-editor/index.ts

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

package/src/patterns/collection-editor/types.ts

@@ -0,0 +1,25 @@
+import type React from 'react';
+
+export interface CollectionEditorRenderItemProps<TItem> {
+  item: TItem;
+  index: number;
+  remove: () => void;
+  moveUp: () => void;
+  moveDown: () => void;
+  canMoveUp: boolean;
+  canMoveDown: boolean;
+}
+
+export interface CollectionEditorProps<TItem> {
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  items: readonly TItem[];
+  renderItem: (props: CollectionEditorRenderItemProps<TItem>) => React.ReactNode;
+  onAdd?: () => void;
+  onRemove?: (index: number) => void;
+  onMove?: (from: number, to: number) => void;
+  addLabel?: React.ReactNode;
+  emptyLabel?: React.ReactNode;
+  disabled?: boolean;
+  testID?: string;
+}

package/src/patterns/confirm-dialog/ConfirmDialog.tsx

@@ -0,0 +1,46 @@
+import { Stack } from '@ankhorage/surface';
+import React from 'react';
+
+import { Button } from '../../components/button';
+import { Modal } from '../../components/modal';
+import type { ConfirmDialogProps } from './types';
+
+export function ConfirmDialog({
+  visible,
+  title,
+  description,
+  children,
+  confirmLabel = 'Confirm',
+  cancelLabel = 'Cancel',
+  confirmTone = 'danger',
+  confirmEmphasis = 'solid',
+  busy = false,
+  closeOnBackdrop = true,
+  onConfirm,
+  onCancel,
+  testID,
+}: ConfirmDialogProps) {
+  return (
+    <Modal
+      closeOnBackdrop={closeOnBackdrop}
+      description={description}
+      footer={
+        <Stack direction={{ base: 'column', md: 'row' }} gap="s" justify="flex-end">
+          <Button emphasis="soft" onPress={onCancel} tone="neutral">
+            {cancelLabel}
+          </Button>
+          <Button emphasis={confirmEmphasis} loading={busy} onPress={onConfirm} tone={confirmTone}>
+            {confirmLabel}
+          </Button>
+        </Stack>
+      }
+      onDismiss={onCancel}
+      testID={testID}
+      title={title}
+      visible={visible}
+      width="narrow"
+    >
+      {children}
+    </Modal>
+  );
+}

package/src/patterns/confirm-dialog/index.ts

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

package/src/patterns/confirm-dialog/types.ts

@@ -0,0 +1,19 @@
+import type React from 'react';
+
+import type { ZoraEmphasis, ZoraTone } from '../../internal/recipes';
+
+export interface ConfirmDialogProps {
+  visible: boolean;
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  children?: React.ReactNode;
+  confirmLabel?: React.ReactNode;
+  cancelLabel?: React.ReactNode;
+  confirmTone?: ZoraTone;
+  confirmEmphasis?: ZoraEmphasis;
+  busy?: boolean;
+  closeOnBackdrop?: boolean;
+  onConfirm?: () => void;
+  onCancel?: () => void;
+  testID?: string;
+}

package/src/patterns/disclosure-section/DisclosureSection.tsx

@@ -0,0 +1,61 @@
+import { Box, Stack } from '@ankhorage/surface';
+import React from 'react';
+
+import { IconButton } from '../../components/icon-button';
+import { Panel } from '../panel';
+import type { DisclosureSectionProps } from './types';
+
+export function DisclosureSection({
+  title,
+  description,
+  icon,
+  defaultOpen = true,
+  open: controlledOpen,
+  onOpenChange,
+  actions,
+  children,
+  disabled,
+  testID,
+}: DisclosureSectionProps) {
+  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+
+  const isControlled = controlledOpen !== undefined;
+  const isOpen = isControlled ? controlledOpen : internalOpen;
+
+  const toggleOpen = () => {
+    if (disabled) return;
+
+    if (isControlled) {
+      onOpenChange?.(!controlledOpen);
+    } else {
+      setInternalOpen(!internalOpen);
+      onOpenChange?.(!internalOpen);
+    }
+  };
+
+  return (
+    <Panel
+      compact
+      description={description}
+      testID={testID}
+      title={title}
+      eyebrow={icon ? <Box pb="xs">{/* Surface icon spec would go here */}</Box> : null}
+      actions={
+        <Stack direction="row" gap="xs" align="center">
+          {actions}
+          <IconButton
+            icon={{ name: isOpen ? 'chevron-up-outline' : 'chevron-down-outline' }}
+            label={isOpen ? 'Collapse' : 'Expand'}
+            emphasis="ghost"
+            tone="neutral"
+            size="s"
+            disabled={disabled}
+            onPress={toggleOpen}
+          />
+        </Stack>
+      }
+    >
+      {isOpen ? <Box pt="m">{children}</Box> : null}
+    </Panel>
+  );
+}

package/src/patterns/disclosure-section/index.ts

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

package/src/patterns/disclosure-section/types.ts

@@ -0,0 +1,15 @@
+import type { ButtonIconSpec } from '@ankhorage/surface';
+import type { ReactNode } from 'react';
+
+export interface DisclosureSectionProps {
+  title: ReactNode;
+  description?: ReactNode;
+  icon?: ButtonIconSpec;
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  actions?: ReactNode;
+  children?: ReactNode;
+  disabled?: boolean;
+  testID?: string;
+}

package/src/patterns/empty-state/EmptyState.tsx

@@ -0,0 +1,53 @@
+import { Stack } from '@ankhorage/surface';
+import React from 'react';
+
+import { Button } from '../../components/button';
+import { Card } from '../../components/card';
+import type { EmptyStateProps } from './types';
+
+export function EmptyState({
+  title,
+  description,
+  eyebrow,
+  primaryAction,
+  secondaryAction,
+  footer,
+  testID,
+}: EmptyStateProps) {
+  return (
+    <Card
+      compact
+      description={description}
+      eyebrow={eyebrow}
+      testID={testID}
+      title={title}
+      tone="subtle"
+    >
+      <Stack gap="m">
+        {primaryAction || secondaryAction ? (
+          <Stack direction={{ base: 'column', md: 'row' }} gap="s">
+            {primaryAction ? (
+              <Button
+                emphasis={primaryAction.emphasis}
+                onPress={primaryAction.onPress}
+                tone={primaryAction.tone}
+              >
+                {primaryAction.label}
+              </Button>
+            ) : null}
+            {secondaryAction ? (
+              <Button
+                emphasis={secondaryAction.emphasis ?? 'soft'}
+                onPress={secondaryAction.onPress}
+                tone={secondaryAction.tone ?? 'neutral'}
+              >
+                {secondaryAction.label}
+              </Button>
+            ) : null}
+          </Stack>
+        ) : null}
+        {footer}
+      </Stack>
+    </Card>
+  );
+}

package/src/patterns/empty-state/index.ts

@@ -0,0 +1,2 @@
+export { EmptyState } from './EmptyState';
+export type { EmptyStateAction, EmptyStateProps } from './types';

package/src/patterns/empty-state/types.ts

@@ -0,0 +1,20 @@
+import type React from 'react';
+
+import type { ZoraEmphasis, ZoraTone } from '../../internal/recipes';
+
+export interface EmptyStateAction {
+  label: React.ReactNode;
+  onPress: () => void;
+  tone?: ZoraTone;
+  emphasis?: ZoraEmphasis;
+}
+
+export interface EmptyStateProps {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  eyebrow?: React.ReactNode;
+  primaryAction?: EmptyStateAction;
+  secondaryAction?: EmptyStateAction;
+  footer?: React.ReactNode;
+  testID?: string;
+}

package/src/patterns/form-field/FormField.tsx

@@ -0,0 +1,27 @@
+import { Field, Stack, Text } from '@ankhorage/surface';
+import React from 'react';
+
+import type { FormFieldProps } from './types';
+
+export function FormField({ label, description, helperText, children, ...props }: FormFieldProps) {
+  return (
+    <Field
+      {...props}
+      helperText={helperText}
+      label={
+        <Stack gap="xs">
+          <Text variant="label" weight="semiBold">
+            {label}
+          </Text>
+          {description ? (
+            <Text tone="muted" variant="bodySmall">
+              {description}
+            </Text>
+          ) : null}
+        </Stack>
+      }
+    >
+      {children}
+    </Field>
+  );
+}

package/src/patterns/form-field/index.ts

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

package/src/patterns/form-field/types.ts

@@ -0,0 +1,11 @@
+import type { FieldProps as SurfaceFieldProps } from '@ankhorage/surface';
+import type React from 'react';
+
+export interface FormFieldProps extends Pick<
+  SurfaceFieldProps,
+  'children' | 'disabled' | 'errorText' | 'invalid' | 'readOnly' | 'required' | 'testID'
+> {
+  label: React.ReactNode;
+  description?: React.ReactNode;
+  helperText?: React.ReactNode;
+}

package/src/patterns/inspector-field/InspectorField.tsx

@@ -0,0 +1,16 @@
+import { Box, Stack } from '@ankhorage/surface';
+import React from 'react';
+
+import { FormField } from '../form-field';
+import type { InspectorFieldProps } from './types';
+
+export function InspectorField({ label, control, children, ...props }: InspectorFieldProps) {
+  return (
+    <FormField {...props} label={label}>
+      <Stack direction="row" gap="s" align="center">
+        <Box flex={1}>{children}</Box>
+        {control ? <Box>{control}</Box> : null}
+      </Stack>
+    </FormField>
+  );
+}

package/src/patterns/inspector-field/index.ts

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

package/src/patterns/inspector-field/types.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+
+export interface InspectorFieldProps {
+  label: ReactNode;
+  description?: ReactNode;
+  helperText?: ReactNode;
+  errorText?: ReactNode;
+  required?: boolean;
+  invalid?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  control?: ReactNode;
+  children?: ReactNode;
+  testID?: string;
+}

package/src/patterns/notice/Notice.tsx

@@ -0,0 +1,30 @@
+import { Box, Stack } from '@ankhorage/surface';
+import React from 'react';
+
+import { Badge } from '../../components/badge';
+import { Card } from '../../components/card';
+import type { NoticeProps } from './types';
+
+export function Notice({
+  title,
+  description,
+  children,
+  actions,
+  tone = 'primary',
+  testID,
+}: NoticeProps) {
+  return (
+    <Card
+      description={description}
+      eyebrow={<Badge tone={tone}>{String(tone).toUpperCase()}</Badge>}
+      testID={testID}
+      title={title}
+      tone="subtle"
+    >
+      <Stack gap="m">
+        {children ? <Box>{children}</Box> : null}
+        {actions ? <Box>{actions}</Box> : null}
+      </Stack>
+    </Card>
+  );
+}

package/src/patterns/notice/index.ts

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

package/src/patterns/notice/types.ts

@@ -0,0 +1,12 @@
+import type React from 'react';
+
+import type { ZoraTone } from '../../internal/recipes';
+
+export interface NoticeProps {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  children?: React.ReactNode;
+  actions?: React.ReactNode;
+  tone?: ZoraTone;
+  testID?: string;
+}

package/src/patterns/panel/Panel.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+
+import { Card } from '../../components/card';
+import type { PanelProps } from './types';
+
+export function Panel(props: PanelProps) {
+  return <Card {...props} />;
+}

package/src/patterns/panel/index.ts

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

package/src/patterns/panel/types.ts

@@ -0,0 +1,15 @@
+import type React from 'react';
+
+import type { ZoraCardTone } from '../../internal/recipes';
+
+export interface PanelProps {
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  eyebrow?: React.ReactNode;
+  actions?: React.ReactNode;
+  footer?: React.ReactNode;
+  children?: React.ReactNode;
+  tone?: ZoraCardTone;
+  compact?: boolean;
+  testID?: string;
+}