@ankhorage/zora 0.3.6 → 0.3.8

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

package/src/patterns/responsive-panel/ResponsivePanel.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+
+import { Drawer } from '../../components/drawer';
+import { Modal } from '../../components/modal';
+import { Panel } from '../panel';
+import type { ResponsivePanelProps } from './types';
+
+export function ResponsivePanel({
+  title,
+  description,
+  actions,
+  footer,
+  children,
+  open,
+  onOpenChange,
+  side = 'right',
+  desktopMode = 'inline',
+  mobileMode = 'drawer',
+  compact = true,
+  testID,
+}: ResponsivePanelProps) {
+  if (!open) return null;
+
+  // For now, we assume desktopMode determines the rendering.
+  // In a real app, this would react to window size.
+  if (desktopMode === 'floating') {
+    if (mobileMode === 'modal') {
+      return (
+        <Modal
+          description={description}
+          footer={footer}
+          onDismiss={() => onOpenChange(false)}
+          testID={testID}
+          title={title}
+          visible={open}
+        >
+          {children}
+        </Modal>
+      );
+    }
+
+    return (
+      <Drawer
+        description={description}
+        footer={footer}
+        onDismiss={() => onOpenChange(false)}
+        position={side}
+        testID={testID}
+        title={title}
+        visible={open}
+      >
+        {children}
+      </Drawer>
+    );
+  }
+
+  // default: inline -> Panel
+  return (
+    <Panel
+      actions={actions}
+      compact={compact}
+      description={description}
+      footer={footer}
+      testID={testID}
+      title={title}
+    >
+      {children}
+    </Panel>
+  );
+}

package/src/patterns/responsive-panel/index.ts

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

package/src/patterns/responsive-panel/types.ts

@@ -0,0 +1,20 @@
+import type React from 'react';
+
+export type ResponsivePanelSide = 'left' | 'right';
+export type ResponsivePanelDesktopMode = 'inline' | 'floating';
+export type ResponsivePanelMobileMode = 'drawer' | 'modal';
+
+export interface ResponsivePanelProps {
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  actions?: React.ReactNode;
+  footer?: React.ReactNode;
+  children?: React.ReactNode;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  side?: ResponsivePanelSide;
+  desktopMode?: ResponsivePanelDesktopMode;
+  mobileMode?: ResponsivePanelMobileMode;
+  compact?: boolean;
+  testID?: string;
+}

package/src/patterns/section-header/SectionHeader.tsx

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

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

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

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

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

package/src/patterns/settings-row/SettingsRow.tsx

@@ -0,0 +1,40 @@
+import { Box, Text } from '@ankhorage/surface';
+import React from 'react';
+
+import { Card } from '../../components/card';
+import type { SettingsRowProps } from './types';
+
+export function SettingsRow({
+  title,
+  description,
+  meta,
+  control,
+  onPress,
+  disabled = false,
+  testID,
+}: SettingsRowProps) {
+  // Prevent nested interactive elements:
+  // If a control is present (likely contains buttons), the row itself must not be clickable
+  const isInteractive = Boolean(onPress) && !control;
+
+  return (
+    <Card
+      compact
+      actions={control}
+      description={description}
+      disabled={disabled}
+      onPress={isInteractive ? onPress : undefined}
+      testID={testID}
+      title={title}
+      tone="subtle"
+    >
+      {meta ? (
+        <Box pt="xs">
+          <Text tone="muted" variant="caption">
+            {meta}
+          </Text>
+        </Box>
+      ) : null}
+    </Card>
+  );
+}

package/src/patterns/settings-row/index.ts

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

package/src/patterns/settings-row/types.ts

@@ -0,0 +1,27 @@
+import type React from 'react';
+
+interface SettingsRowBaseProps {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  meta?: React.ReactNode;
+  disabled?: boolean;
+  testID?: string;
+}
+
+interface SettingsRowPressableProps {
+  onPress: () => void;
+  control?: never;
+}
+
+interface SettingsRowControlledProps {
+  control: React.ReactNode;
+  onPress?: never;
+}
+
+interface SettingsRowStaticProps {
+  control?: never;
+  onPress?: never;
+}
+
+export type SettingsRowProps = SettingsRowBaseProps &
+  (SettingsRowPressableProps | SettingsRowControlledProps | SettingsRowStaticProps);

package/src/patterns/switch-field/SwitchField.tsx

@@ -0,0 +1,24 @@
+import { Switch } from '@ankhorage/surface';
+import React from 'react';
+
+import { SettingsRow } from '../settings-row';
+import type { SwitchFieldProps } from './types';
+
+export function SwitchField({
+  label,
+  description,
+  value,
+  onValueChange,
+  disabled,
+  testID,
+}: SwitchFieldProps) {
+  return (
+    <SettingsRow
+      title={label}
+      description={description}
+      disabled={disabled}
+      testID={testID}
+      control={<Switch checked={value} onCheckedChange={onValueChange} disabled={disabled} />}
+    />
+  );
+}