@ankhorage/zora 0.3.6 → 0.3.7

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

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

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

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

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+
+export interface SwitchFieldProps {
+  label: ReactNode;
+  description?: ReactNode;
+  value: boolean;
+  onValueChange: (value: boolean) => void;
+  disabled?: boolean;
+  testID?: string;
+}

package/src/patterns/tile-grid/PaletteItem.tsx

@@ -0,0 +1,49 @@
+import { Box, Heading, Text, useTheme } from '@ankhorage/surface';
+import React from 'react';
+
+import { Card } from '../../components/card';
+import type { PaletteItemProps } from './types';
+
+export function PaletteItem({
+  title,
+  description,
+  icon,
+  badge,
+  selected,
+  disabled,
+  onPress,
+  testID,
+}: PaletteItemProps) {
+  const { theme } = useTheme();
+
+  return (
+    <Card
+      compact
+      disabled={disabled}
+      onPress={onPress}
+      testID={testID}
+      tone={selected ? 'default' : 'subtle'}
+      style={
+        selected
+          ? {
+              borderColor: theme.colors.primary,
+              borderWidth: 2,
+            }
+          : undefined
+      }
+    >
+      <Box p="xs" style={{ alignItems: 'center' }}>
+        {icon ? <Box pb="s">{/* Icon spec here */}</Box> : null}
+        <Heading level={5} align="center">
+          {title}
+        </Heading>
+        {description ? (
+          <Text align="center" tone="muted" variant="caption">
+            {description}
+          </Text>
+        ) : null}
+        {badge ? <Box pt="xs">{badge}</Box> : null}
+      </Box>
+    </Card>
+  );
+}

package/src/patterns/tile-grid/TileGrid.tsx

@@ -0,0 +1,44 @@
+import { Box } from '@ankhorage/surface';
+import React from 'react';
+
+import type { TileGridProps } from './types';
+
+export function TileGrid({
+  children,
+  columns = 'responsive',
+  compact = false,
+  testID,
+}: TileGridProps) {
+  return (
+    <Box
+      testID={testID}
+      style={{
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: compact ? 8 : 16,
+      }}
+    >
+      {React.Children.map(children, (child) => {
+        if (!child) return null;
+
+        return (
+          <Box
+            style={
+              columns === 'responsive'
+                ? {
+                    flexBasis: '30%',
+                    flexGrow: 1,
+                    minWidth: 120,
+                  }
+                : {
+                    width: `${100 / columns}%`,
+                  }
+            }
+          >
+            {child}
+          </Box>
+        );
+      })}
+    </Box>
+  );
+}

package/src/patterns/tile-grid/index.ts

@@ -0,0 +1,3 @@
+export * from './PaletteItem';
+export * from './TileGrid';
+export * from './types';

package/src/patterns/tile-grid/types.ts

@@ -0,0 +1,20 @@
+import type { ButtonIconSpec } from '@ankhorage/surface';
+import type { ReactNode } from 'react';
+
+export interface TileGridProps {
+  children?: ReactNode;
+  columns?: number | 'responsive';
+  compact?: boolean;
+  testID?: string;
+}
+
+export interface PaletteItemProps {
+  title: ReactNode;
+  description?: ReactNode;
+  icon?: ButtonIconSpec;
+  badge?: ReactNode;
+  selected?: boolean;
+  disabled?: boolean;
+  onPress?: () => void;
+  testID?: string;
+}

package/src/patterns/tree-view/TreeItem.tsx

@@ -0,0 +1,86 @@
+import { Box, Stack } from '@ankhorage/surface';
+import React from 'react';
+
+import { IconButton } from '../../components/icon-button';
+import { SettingsRow } from '../settings-row';
+import type { TreeItemNode, TreeItemRenderProps } from './types';
+
+interface TreeItemProps<TId extends string = string> {
+  node: TreeItemNode<TId>;
+  depth: number;
+  selectedId?: TId;
+  expandedIds: readonly TId[];
+  onSelect?: (id: TId) => void;
+  onToggleExpand: (id: TId) => void;
+  renderItem?: (props: TreeItemRenderProps<TId>) => React.ReactNode;
+}
+
+export function TreeItem<TId extends string = string>({
+  node,
+  depth,
+  selectedId,
+  expandedIds,
+  onSelect,
+  onToggleExpand,
+  renderItem,
+}: TreeItemProps<TId>) {
+  const hasChildren = node.children !== undefined && node.children.length > 0;
+  const isExpanded = expandedIds.includes(node.id);
+  const isSelected = selectedId === node.id;
+
+  const renderContent = () => {
+    if (renderItem) {
+      return renderItem({
+        node,
+        depth,
+        selected: isSelected,
+        expanded: isExpanded,
+        hasChildren,
+      });
+    }
+
+    return (
+      <SettingsRow
+        title={node.label}
+        control={
+          <Stack direction="row" gap="xs" align="center">
+            {node.actions}
+            {hasChildren ? (
+              <IconButton
+                icon={{ name: isExpanded ? 'chevron-down-outline' : 'chevron-forward-outline' }}
+                label={isExpanded ? 'Collapse' : 'Expand'}
+                onPress={() => onToggleExpand(node.id)}
+                size="s"
+                emphasis="ghost"
+              />
+            ) : null}
+          </Stack>
+        }
+        meta={node.meta}
+        disabled={node.disabled}
+      />
+    );
+  };
+
+  return (
+    <Box>
+      <Box style={{ paddingLeft: depth * 16 }}>{renderContent()}</Box>
+      {hasChildren && isExpanded ? (
+        <Box>
+          {node.children?.map((child) => (
+            <TreeItem
+              key={child.id}
+              depth={depth + 1}
+              expandedIds={expandedIds}
+              node={child}
+              onSelect={onSelect}
+              onToggleExpand={onToggleExpand}
+              renderItem={renderItem}
+              selectedId={selectedId}
+            />
+          ))}
+        </Box>
+      ) : null}
+    </Box>
+  );
+}

package/src/patterns/tree-view/TreeView.tsx

@@ -0,0 +1,50 @@
+import { Stack } from '@ankhorage/surface';
+import React from 'react';
+
+import { TreeItem } from './TreeItem';
+import type { TreeViewProps } from './types';
+
+export function TreeView<TId extends string = string>({
+  nodes,
+  selectedId,
+  expandedIds: controlledExpandedIds,
+  defaultExpandedIds,
+  onSelect,
+  onExpandedChange,
+  renderItem,
+  testID,
+}: TreeViewProps<TId>) {
+  const [internalExpandedIds, setInternalExpandedIds] = React.useState<readonly TId[]>(
+    defaultExpandedIds ?? [],
+  );
+
+  const isControlled = controlledExpandedIds !== undefined;
+  const expandedIds = isControlled ? controlledExpandedIds : internalExpandedIds;
+
+  const handleToggleExpand = (id: TId) => {
+    const isExpanded = expandedIds.includes(id);
+    const newIds = isExpanded ? expandedIds.filter((eid) => eid !== id) : [...expandedIds, id];
+
+    if (!isControlled) {
+      setInternalExpandedIds(newIds);
+    }
+    onExpandedChange?.(newIds);
+  };
+
+  return (
+    <Stack gap="none" testID={testID}>
+      {nodes.map((node) => (
+        <TreeItem
+          key={node.id}
+          depth={0}
+          expandedIds={expandedIds}
+          node={node}
+          onSelect={onSelect}
+          onToggleExpand={handleToggleExpand}
+          renderItem={renderItem}
+          selectedId={selectedId}
+        />
+      ))}
+    </Stack>
+  );
+}

package/src/patterns/tree-view/index.ts

@@ -0,0 +1,3 @@
+export * from './TreeItem';
+export * from './TreeView';
+export * from './types';

package/src/patterns/tree-view/types.ts

@@ -0,0 +1,31 @@
+import type { ButtonIconSpec } from '@ankhorage/surface';
+import type { ReactNode } from 'react';
+
+export interface TreeItemNode<TId extends string = string> {
+  id: TId;
+  label: ReactNode;
+  icon?: ButtonIconSpec;
+  children?: readonly TreeItemNode<TId>[];
+  disabled?: boolean;
+  meta?: ReactNode;
+  actions?: ReactNode;
+}
+
+export interface TreeItemRenderProps<TId extends string = string> {
+  node: TreeItemNode<TId>;
+  depth: number;
+  selected: boolean;
+  expanded: boolean;
+  hasChildren: boolean;
+}
+
+export interface TreeViewProps<TId extends string = string> {
+  nodes: readonly TreeItemNode<TId>[];
+  selectedId?: TId;
+  expandedIds?: readonly TId[];
+  defaultExpandedIds?: readonly TId[];
+  onSelect?: (id: TId) => void;
+  onExpandedChange?: (ids: readonly TId[]) => void;
+  renderItem?: (props: TreeItemRenderProps<TId>) => ReactNode;
+  testID?: string;
+}

package/src/theme/ZoraProvider.tsx

@@ -0,0 +1,22 @@
+import { ResponsiveProvider, ThemeProvider } from '@ankhorage/surface';
+import React from 'react';
+
+import { createZoraTheme, type ZoraThemeOverride } from './createZoraTheme';
+
+export interface ZoraProviderProps {
+  children: React.ReactNode;
+  initialConfig?: ZoraThemeOverride;
+  initialMode?: 'light' | 'dark';
+}
+
+export function ZoraProvider({
+  children,
+  initialConfig,
+  initialMode = 'light',
+}: ZoraProviderProps) {
+  return (
+    <ThemeProvider initialConfig={createZoraTheme(initialConfig)} initialMode={initialMode}>
+      <ResponsiveProvider>{children}</ResponsiveProvider>
+    </ThemeProvider>
+  );
+}

package/src/theme/createZoraTheme.test.ts

@@ -0,0 +1,25 @@
+import { describe, expect, test } from 'bun:test';
+
+import { createZoraTheme } from './createZoraTheme';
+
+describe('createZoraTheme', () => {
+  test('keeps the default preset stable', () => {
+    const theme = createZoraTheme();
+
+    expect(theme.id).toBe('zora');
+    expect(theme.light.primaryColor).toBe('#0f766e');
+    expect(theme.dark.primaryColor).toBe('#2dd4bf');
+  });
+
+  test('merges overrides without dropping the preset identity', () => {
+    const theme = createZoraTheme({
+      light: {
+        primaryColor: '#1d4ed8',
+      },
+    });
+
+    expect(theme.id).toBe('zora');
+    expect(theme.light.primaryColor).toBe('#1d4ed8');
+    expect(theme.dark.primaryColor).toBe('#2dd4bf');
+  });
+});

package/src/theme/createZoraTheme.ts

@@ -0,0 +1,10 @@
+import type { ThemeConfig } from '@ankhorage/surface';
+
+import { deepMerge } from '../internal/deepMerge';
+import { zoraTheme } from './zoraTheme';
+
+export type ZoraThemeOverride = Partial<ThemeConfig>;
+
+export function createZoraTheme(overrides: ZoraThemeOverride = {}): ThemeConfig {
+  return deepMerge(zoraTheme, overrides);
+}

package/src/theme/index.ts

@@ -0,0 +1,6 @@
+export type { ZoraThemeOverride } from './createZoraTheme';
+export { createZoraTheme } from './createZoraTheme';
+export { useZoraTheme } from './useZoraTheme';
+export type { ZoraProviderProps } from './ZoraProvider';
+export { ZoraProvider } from './ZoraProvider';
+export { zoraTheme } from './zoraTheme';

package/src/theme/useZoraTheme.ts

@@ -0,0 +1,5 @@
+import { useTheme } from '@ankhorage/surface';
+
+export function useZoraTheme() {
+  return useTheme();
+}

package/src/theme/zoraTheme.ts

@@ -0,0 +1,16 @@
+import type { ThemeConfig } from '@ankhorage/surface';
+
+export const zoraTheme: ThemeConfig = {
+  id: 'zora',
+  name: 'ZORA',
+  light: {
+    primaryColor: '#0f766e',
+    harmony: 'analogous',
+    systemTone: 'jewel',
+  },
+  dark: {
+    primaryColor: '#2dd4bf',
+    harmony: 'analogous',
+    systemTone: 'jewel',
+  },
+};