@ankhorage/zora 18.0.1 → 19.0.1

package/src/patterns/theme-composer/ThemeComposer.tsx

@@ -1,321 +0,0 @@
-import { COLOR_HARMONIES, parseHexColorOrThrow } from '@ankhorage/color-theory';
-import type { AppCategory } from '@ankhorage/contracts';
-import { APP_CATEGORIES } from '@ankhorage/contracts';
-import React from 'react';
-
-import { Badge } from '../../features/badge/public';
-import { Button } from '../../features/button/public';
-import { Card } from '../../features/card/public';
-import { ChipGroup } from '../../features/chip/public';
-import { Select } from '../../features/form/select/public';
-import { TextInput } from '../../features/form/text-input/public';
-import { View } from '../../features/layout/public';
-import { Heading } from '../../features/typography/public';
-import { Text } from '../../features/typography/public';
-import type { ZoraThemeMode } from '../../theme/types';
-import { useZoraTheme } from '../../theme/useZoraTheme';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { ThemeComposerProps } from './types';
-
-const HEX_ERROR_MESSAGE = 'Enter a valid 6-digit hex color.';
-const HEX_INPUT_PLACEHOLDER = 'Enter hex color';
-const NAME_ERROR_MESSAGE = 'Theme name cannot be empty.';
-
-interface InputDraft {
-  inputValue: string;
-  error: string | undefined;
-}
-
-function createInputDraft(sourceValue: string): InputDraft {
-  return { inputValue: sourceValue, error: undefined };
-}
-
-function isValidHex(value: string): boolean {
-  try {
-    parseHexColorOrThrow(value);
-    return true;
-  } catch {
-    return false;
-  }
-}
-
-function formatAppCategoryLabel(category: AppCategory): string {
-  return category
-    .split('_')
-    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
-    .join(' ');
-}
-
-const HARMONY_OPTIONS = COLOR_HARMONIES.map((h) => ({ value: h, label: h }));
-
-const MODE_OPTIONS = [
-  { value: 'light' as ZoraThemeMode, label: 'Light' },
-  { value: 'dark' as ZoraThemeMode, label: 'Dark' },
-];
-
-function ThemeComposerInner({
-  themeId: _themeId,
-  value,
-  onChange,
-  mode,
-  onModeChange,
-  onSubmit,
-  appCategories,
-  testID,
-}: ThemeComposerProps) {
-  const { theme } = useZoraTheme();
-
-  const [hexDraft, setHexDraft] = React.useState<InputDraft>(() =>
-    createInputDraft(value.primaryColor),
-  );
-  const [nameDraft, setNameDraft] = React.useState<InputDraft>(() => createInputDraft(value.name));
-  const [previousPrimaryColor, setPreviousPrimaryColor] = React.useState(value.primaryColor);
-  const [previousName, setPreviousName] = React.useState(value.name);
-
-  if (previousPrimaryColor !== value.primaryColor) {
-    setPreviousPrimaryColor(value.primaryColor);
-    setHexDraft(createInputDraft(value.primaryColor));
-  }
-
-  if (previousName !== value.name) {
-    setPreviousName(value.name);
-    setNameDraft(createInputDraft(value.name));
-  }
-
-  function handleNameChange(text: string) {
-    const error = text.trim().length === 0 ? NAME_ERROR_MESSAGE : undefined;
-    setNameDraft({ inputValue: text, error });
-
-    if (!error) {
-      onChange({ ...value, name: text });
-    }
-  }
-
-  function handleHexChange(text: string) {
-    const normalized = text.startsWith('#') ? text : `#${text}`;
-    const error = isValidHex(normalized) ? undefined : HEX_ERROR_MESSAGE;
-    setHexDraft({ inputValue: normalized, error });
-
-    if (!error) {
-      onChange({ ...value, primaryColor: normalized });
-    }
-  }
-
-  function handleSubmit() {
-    const hasValidName = nameDraft.inputValue.trim().length > 0;
-    const hasValidHex = isValidHex(hexDraft.inputValue);
-
-    if (!hasValidName) {
-      setNameDraft((current) => ({ ...current, error: NAME_ERROR_MESSAGE }));
-    }
-
-    if (!hasValidHex) {
-      setHexDraft((current) => ({ ...current, error: HEX_ERROR_MESSAGE }));
-    }
-
-    if (!hasValidName || !hasValidHex) {
-      return;
-    }
-
-    onSubmit?.({
-      ...value,
-      name: nameDraft.inputValue,
-      primaryColor: hexDraft.inputValue,
-    });
-  }
-
-  const activeMode = mode ?? 'light';
-  const categoryOptions = (appCategories ?? APP_CATEGORIES).map((c) => ({
-    value: c,
-    label: formatAppCategoryLabel(c),
-  }));
-
-  return (
-    <View gap="l" testID={testID}>
-      {/* Section: Theme identity */}
-      <Card
-        title="Theme identity"
-        description="Name your theme. The ID is assigned automatically and shown for reference."
-      >
-        <View gap="m">
-          <View gap="xs">
-            <Text variant="label">Name</Text>
-            <TextInput
-              value={nameDraft.inputValue}
-              onChangeText={handleNameChange}
-              placeholder="My theme"
-              autoCorrect={false}
-              invalid={nameDraft.error !== undefined}
-              testID={testID ? `${testID}-name-input` : undefined}
-            />
-            {nameDraft.error ? (
-              <Text color="danger" variant="bodySmall">
-                {nameDraft.error}
-              </Text>
-            ) : null}
-          </View>
-          <View gap="xs">
-            <Text variant="label">ID</Text>
-            <Text
-              emphasis="muted"
-              variant="bodySmall"
-              testID={testID ? `${testID}-id-display` : undefined}
-            >
-              {value.id}
-            </Text>
-          </View>
-        </View>
-      </Card>
-
-      {/* Section: App category */}
-      <Card title="App category" description="Choose the category that best describes this app.">
-        <Select
-          value={value.appCategory}
-          options={categoryOptions}
-          onValueChange={(c) => onChange({ ...value, appCategory: c })}
-          testID={testID ? `${testID}-category-select` : undefined}
-        />
-      </Card>
-
-      {/* Section: Primary Color */}
-      <Card title="Primary color" description="Set the seed color for your theme palette.">
-        <View gap="m">
-          <View direction="row" gap="m" align="center">
-            <View flex={1}>
-              <TextInput
-                value={hexDraft.inputValue}
-                onChangeText={handleHexChange}
-                placeholder={HEX_INPUT_PLACEHOLDER}
-                autoCapitalize="none"
-                autoCorrect={false}
-                maxLength={7}
-                invalid={hexDraft.error !== undefined}
-                testID={testID ? `${testID}-hex-input` : undefined}
-              />
-            </View>
-            {/* Color preview chip */}
-            <View
-              width={36}
-              height={36}
-              radius="m"
-              style={{
-                backgroundColor: isValidHex(hexDraft.inputValue)
-                  ? hexDraft.inputValue
-                  : theme.colors.border,
-                borderWidth: 1,
-                borderColor: theme.colors.border,
-              }}
-            />
-          </View>
-          {hexDraft.error ? (
-            <Text color="danger" variant="bodySmall">
-              {hexDraft.error}
-            </Text>
-          ) : null}
-        </View>
-      </Card>
-
-      {/* Section: Harmony */}
-      <Card
-        title="Harmony"
-        description="Choose how accent hues are generated from your primary color."
-      >
-        <Select
-          value={value.harmony}
-          options={HARMONY_OPTIONS}
-          onValueChange={(h) => onChange({ ...value, harmony: h })}
-          testID={testID ? `${testID}-harmony-select` : undefined}
-        />
-      </Card>
-
-      {/* Section: Mode */}
-      <Card title="Mode" description="Switch between light and dark presentation.">
-        <ChipGroup
-          value={activeMode}
-          items={MODE_OPTIONS}
-          onValueChange={(nextMode) => onModeChange?.(nextMode)}
-          testID={testID ? `${testID}-mode` : undefined}
-        />
-      </Card>
-
-      {/* Section: Preview */}
-      <Card title="Preview" description="A quick look at how your theme renders common controls.">
-        <View gap="m">
-          <View gap="xs">
-            <Text variant="label">Name</Text>
-            <Text>{value.name}</Text>
-          </View>
-          <View gap="xs">
-            <Text variant="label">Category</Text>
-            <Text>{formatAppCategoryLabel(value.appCategory)}</Text>
-          </View>
-          <View gap="xs">
-            <Text variant="label">Primary color</Text>
-            <Text emphasis="muted" variant="bodySmall">
-              {value.primaryColor}
-            </Text>
-          </View>
-          <View gap="xs">
-            <Text variant="label">Harmony</Text>
-            <Text emphasis="muted" variant="bodySmall">
-              {value.harmony}
-            </Text>
-          </View>
-          <Heading level={4}>Heading</Heading>
-          <Text>Body text — this shows default text color and weight.</Text>
-          <Text emphasis="muted" variant="bodySmall">
-            Muted caption text.
-          </Text>
-          <View direction="row" gap="s" align="center">
-            <Button color="primary" variant="solid" size="m">
-              Primary
-            </Button>
-            <Button color="neutral" variant="soft" size="m">
-              Neutral
-            </Button>
-            <Button color="danger" variant="ghost" size="m">
-              Danger
-            </Button>
-          </View>
-          <View direction="row" gap="s" align="center">
-            <Badge color="primary">Primary</Badge>
-            <Badge color="success" variant="soft">
-              Success
-            </Badge>
-            <Badge color="warning" variant="soft">
-              Warning
-            </Badge>
-            <Badge color="danger" variant="soft">
-              Danger
-            </Badge>
-          </View>
-          <Card
-            tone="subtle"
-            title="Nested card"
-            description="Subtle tone inside the preview."
-            compact
-          />
-        </View>
-      </Card>
-
-      {/* Submit */}
-      {onSubmit ? (
-        <Button
-          color="primary"
-          variant="solid"
-          onPress={handleSubmit}
-          testID={testID ? `${testID}-submit` : undefined}
-        >
-          Apply theme
-        </Button>
-      ) : null}
-    </View>
-  );
-}
-
-/***
- * UI for composing and applying a theme via structured controls.
- *
- *
- */
-export const ThemeComposer = withZoraThemeScope(ThemeComposerInner);

package/src/patterns/theme-composer/index.ts

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

package/src/patterns/theme-composer/meta.ts

@@ -1,10 +0,0 @@
-import type { ZoraComponentMeta } from '../../metadata';
-
-export const themeComposerMeta = {
-  name: 'ThemeComposer',
-  category: 'pattern',
-  directManifestNode: false,
-  allowedChildren: [],
-  note: 'Theme tooling pattern; not represented as a manifest node in v1.',
-  props: {},
-} as const satisfies ZoraComponentMeta;

package/src/patterns/theme-composer/types.ts

@@ -1,13 +0,0 @@
-import type { AppCategory } from '@ankhorage/contracts';
-
-import type { ZoraTheme, ZoraThemeMode } from '../../theme/types';
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export interface ThemeComposerProps extends ZoraBaseProps {
-  value: ZoraTheme;
-  onChange: (theme: ZoraTheme) => void;
-  mode?: ZoraThemeMode;
-  onModeChange?: (mode: ZoraThemeMode) => void;
-  onSubmit?: (theme: ZoraTheme) => void;
-  appCategories?: readonly AppCategory[];
-}

package/src/patterns/timeline/Timeline.tsx

@@ -1,127 +0,0 @@
-import type { RoleSemantics, SurfaceTheme } from '@ankhorage/surface';
-import React from 'react';
-
-import { Icon } from '../../features/icon/public';
-import { View } from '../../features/layout/public';
-import { Heading } from '../../features/typography/public';
-import { Text } from '../../features/typography/public';
-import type { ZoraColor } from '../../internal/recipes';
-import { resolveIconSize } from '../../internal/recipes';
-import { useZoraTheme } from '../../theme/useZoraTheme';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { TimelineItem, TimelineProps } from './types';
-
-function resolveRoleSemantics(theme: SurfaceTheme, color: ZoraColor): RoleSemantics {
-  switch (color) {
-    case 'secondary':
-      return theme.semantics.secondary;
-    case 'tertiary':
-      return theme.semantics.accent;
-    case 'quaternary':
-      return theme.semantics.highlight;
-    case 'error':
-      return theme.semantics.error;
-    case 'info':
-      return theme.semantics.info;
-    case 'primary':
-      return theme.semantics.action.primary;
-    case 'danger':
-      return theme.semantics.action.danger;
-    case 'success':
-      return theme.semantics.success;
-    case 'warning':
-      return theme.semantics.warning;
-    case 'neutral':
-    default:
-      return theme.semantics.action.neutral;
-  }
-}
-
-function TimelineInner({
-  themeId: _themeId,
-  mode: _mode,
-  interactionPolicy: _interactionPolicy,
-  testID,
-  items,
-  compact = false,
-}: TimelineProps) {
-  const { theme } = useZoraTheme();
-  const gap = compact ? 'm' : 'l';
-  const connectorHeight = compact ? 20 : 36;
-
-  const renderItem = (item: TimelineItem, index: number) => {
-    const status = item.status ?? 'neutral';
-    const role = resolveRoleSemantics(theme, status);
-    const showConnector = index < items.length - 1;
-    const iconSize = Math.max(12, resolveIconSize('s'));
-
-    return (
-      <View
-        direction="row"
-        key={item.id}
-        align="flex-start"
-        gap="m"
-        testID={item.testID}
-        wrap="nowrap"
-      >
-        <View align="center" flexShrink={0} gap="xs" style={{ width: 24 }}>
-          <View
-            bg={status === 'neutral' ? theme.semantics.neutral.surface : role.softBg}
-            borderColor={status === 'neutral' ? theme.semantics.neutral.divider : role.base}
-            borderWidth={1}
-            height={20}
-            radius="full"
-            width={20}
-            style={{ alignItems: 'center', justifyContent: 'center' }}
-          >
-            {item.icon ? (
-              <Icon
-                {...item.icon}
-                color={status === 'neutral' ? theme.semantics.content.muted : role.base}
-                size={iconSize}
-              />
-            ) : null}
-          </View>
-
-          {showConnector ? (
-            <View
-              bg={theme.semantics.neutral.divider}
-              height={connectorHeight}
-              radius="full"
-              style={{ width: 2 }}
-            />
-          ) : null}
-        </View>
-
-        <View flex={1} gap="xs" testID={testID}>
-          <View direction="row" align="flex-start" gap="s" justify="space-between" wrap="wrap">
-            <Heading level={compact ? 4 : 3}>{item.title}</Heading>
-            {item.meta ? (
-              <Text emphasis="muted" variant="caption">
-                {item.meta}
-              </Text>
-            ) : null}
-          </View>
-          {item.description ? (
-            <Text emphasis="muted" variant="bodySmall">
-              {item.description}
-            </Text>
-          ) : null}
-        </View>
-      </View>
-    );
-  };
-
-  return (
-    <View gap={gap} testID={testID}>
-      {items.map(renderItem)}
-    </View>
-  );
-}
-
-/***
- * Timeline pattern for displaying a sequence of events.
- *
- 
- */
-export const Timeline = withZoraThemeScope(TimelineInner);

package/src/patterns/timeline/index.ts

@@ -1,2 +0,0 @@
-export { Timeline } from './Timeline';
-export type { TimelineItem, TimelineProps } from './types';

package/src/patterns/timeline/meta.ts

@@ -1,10 +0,0 @@
-import type { ZoraComponentMeta } from '../../metadata';
-
-export const timelineMeta = {
-  name: 'Timeline',
-  category: 'pattern',
-  directManifestNode: false,
-  allowedChildren: [],
-  note: 'Timeline pattern component; not represented as a manifest node in v1.',
-  props: {},
-} as const satisfies ZoraComponentMeta;

package/src/patterns/timeline/types.ts

@@ -1,20 +0,0 @@
-import type { ButtonIconSpec } from '@ankhorage/surface';
-import type React from 'react';
-
-import type { ZoraColor } from '../../internal/recipes';
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export interface TimelineItem {
-  id: string;
-  title: React.ReactNode;
-  description?: React.ReactNode;
-  meta?: React.ReactNode;
-  status?: ZoraColor;
-  icon?: ButtonIconSpec;
-  testID?: string;
-}
-
-export interface TimelineProps extends ZoraBaseProps {
-  items: readonly TimelineItem[];
-  compact?: boolean;
-}

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

@@ -1,102 +0,0 @@
-import React from 'react';
-
-import { IconButton } from '../../features/button/public';
-import { View } from '../../features/layout/public';
-import { ListItem } from '../../features/list/public';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-import type { TreeItemNode, TreeItemRenderProps } from './types';
-
-interface TreeItemProps<TId extends string = string> extends ZoraBaseProps {
-  node: TreeItemNode<TId>;
-  depth: number;
-  selectedId?: TId;
-  expandedIds: readonly TId[];
-  onSelect?: (id: TId) => void;
-  onToggleExpand: (id: TId) => void;
-  renderItem?: (props: TreeItemRenderProps<TId>) => React.ReactNode;
-}
-
-function TreeItemInner<TId extends string = string>({
-  themeId: _themeId,
-  mode: _mode,
-  node,
-  depth,
-  selectedId,
-  expandedIds,
-  onSelect,
-  onToggleExpand,
-  renderItem,
-  testID,
-  interactionPolicy,
-}: 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 (
-      <ListItem
-        title={node.label}
-        action={
-          <View direction="row" gap="xs" align="center">
-            {node.actions}
-            {hasChildren ? (
-              <IconButton
-                icon={{ name: isExpanded ? 'chevron-down-outline' : 'chevron-forward-outline' }}
-                interactionPolicy={interactionPolicy}
-                label={isExpanded ? 'Collapse' : 'Expand'}
-                onPress={() => onToggleExpand(node.id)}
-                size="s"
-                variant="ghost"
-              />
-            ) : null}
-          </View>
-        }
-        meta={node.meta}
-        disabled={node.disabled}
-        selected={isSelected}
-      />
-    );
-  };
-
-  return (
-    <View testID={testID}>
-      <View style={{ paddingLeft: depth * 16 }}>{renderContent()}</View>
-      {hasChildren && isExpanded ? (
-        <View>
-          {node.children?.map((child) => (
-            <TreeItem
-              key={child.id}
-              depth={depth + 1}
-              expandedIds={expandedIds}
-              interactionPolicy={interactionPolicy}
-              node={child}
-              onSelect={onSelect}
-              onToggleExpand={onToggleExpand}
-              renderItem={renderItem}
-              selectedId={selectedId}
-            />
-          ))}
-        </View>
-      ) : null}
-    </View>
-  );
-}
-
-/***
- * Single tree node row used within `TreeView`.
- *
- 
- */
-export const TreeItem = withZoraThemeScope(TreeItemInner);

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

@@ -1,63 +0,0 @@
-import React from 'react';
-
-import { View } from '../../features/layout/public';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import { TreeItem } from './TreeItem';
-import type { TreeViewProps } from './types';
-
-function TreeViewInner<TId extends string = string>({
-  themeId: _themeId,
-  mode: _mode,
-  nodes,
-  selectedId,
-  expandedIds: controlledExpandedIds,
-  defaultExpandedIds,
-  onSelect,
-  onExpandedChange,
-  renderItem,
-  testID,
-  interactionPolicy,
-}: TreeViewProps<TId>) {
-  const [internalExpandedIds, setInternalExpandedIds] = React.useState<readonly TId[]>(
-    defaultExpandedIds ?? [],
-  );
-
-  const isControlled = controlledExpandedIds !== undefined;
-  const expandedIds = isControlled ? controlledExpandedIds : internalExpandedIds;
-
-  const handleToggleExpand = (id: TId) => {
-    if (interactionPolicy === 'passive') return;
-    const isExpanded = expandedIds.includes(id);
-    const newIds = isExpanded ? expandedIds.filter((eid) => eid !== id) : [...expandedIds, id];
-
-    if (!isControlled) {
-      setInternalExpandedIds(newIds);
-    }
-    onExpandedChange?.(newIds);
-  };
-
-  return (
-    <View 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}
-          interactionPolicy={interactionPolicy}
-        />
-      ))}
-    </View>
-  );
-}
-
-/***
- * Tree view pattern for hierarchical navigation and expandable lists.
- *
- 
- */
-export const TreeView = withZoraThemeScope(TreeViewInner);

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

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