@ankhorage/zora 16.0.0 → 18.0.0

package/src/patterns/list/ListRow.tsx

@@ -1,199 +0,0 @@
-import { ButtonBase } from '@ankhorage/surface';
-import React from 'react';
-
-import { Box, Stack } from '../../features/layout/public';
-import { Text } from '../../features/typography/public';
-import { Inline, Spacer } from '../../foundation';
-import { useZoraTheme } from '../../theme/useZoraTheme';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { ListRowProps, ListRowVariant } from './types';
-
-function resolvePadding(compact: boolean) {
-  return compact ? { px: 'm' as const, py: 's' as const } : { px: 'm' as const, py: 'm' as const };
-}
-
-function resolveContainerStyles({
-  variant,
-  theme,
-  selected,
-  pressed,
-  hovered,
-  disabled,
-}: {
-  variant: ListRowVariant;
-  theme: ReturnType<typeof useZoraTheme>['theme'];
-  selected: boolean;
-  pressed: boolean;
-  hovered: boolean;
-  disabled: boolean;
-}) {
-  const borderColor = selected ? theme.semantics.border.focus : theme.semantics.border.default;
-  const dividerBorderColor = selected ? theme.semantics.border.focus : 'transparent';
-
-  if (variant === 'card') {
-    return {
-      bg: pressed
-        ? theme.semantics.neutral.surfaceActive
-        : hovered
-          ? theme.semantics.neutral.surfaceHover
-          : theme.semantics.surface.raised,
-      borderColor,
-      borderWidth: 1,
-      radius: 'l' as const,
-      opacity: disabled ? 0.72 : 1,
-    };
-  }
-
-  return {
-    bg: pressed
-      ? theme.semantics.neutral.surfaceActive
-      : hovered
-        ? theme.semantics.neutral.surfaceHover
-        : selected
-          ? theme.semantics.neutral.surface
-          : 'transparent',
-    borderColor: dividerBorderColor,
-    borderWidth: selected ? 1 : 0,
-    radius: 'm' as const,
-    opacity: disabled ? 0.72 : 1,
-  };
-}
-
-function ListRowInner({
-  themeId: _themeId,
-  mode: _mode,
-  testID,
-  title,
-  description,
-  meta,
-  leading,
-  trailing,
-  action,
-  onPress,
-  selected = false,
-  disabled = false,
-  compact = false,
-  variant = 'divider',
-}: ListRowProps) {
-  const { theme } = useZoraTheme();
-  const padding = resolvePadding(compact);
-  const isInteractive = Boolean(onPress) && !action;
-
-  const content = (
-    <Stack
-      align="center"
-      direction="row"
-      style={{
-        flex: 1,
-      }}
-    >
-      {leading ? (
-        <>
-          <Box>{leading}</Box>
-          <Spacer axis="horizontal" size="m" />
-        </>
-      ) : null}
-
-      <Box flex={1}>
-        <Stack gap="xxs">
-          <Text variant="body" weight={selected ? 'semiBold' : 'medium'}>
-            {title}
-          </Text>
-          {description ? (
-            <Text emphasis="muted" variant="bodySmall">
-              {description}
-            </Text>
-          ) : null}
-          {meta ? (
-            <Text emphasis="subtle" variant="caption">
-              {meta}
-            </Text>
-          ) : null}
-        </Stack>
-      </Box>
-
-      {trailing || action ? (
-        <>
-          <Spacer axis="horizontal" size="m" />
-          <Inline align="center" gap="s" wrap="nowrap">
-            {trailing}
-            {action}
-          </Inline>
-        </>
-      ) : null}
-    </Stack>
-  );
-
-  if (!isInteractive) {
-    const styles = resolveContainerStyles({
-      variant,
-      theme,
-      selected,
-      pressed: false,
-      hovered: false,
-      disabled,
-    });
-
-    return (
-      <Box
-        bg={styles.bg}
-        borderColor={styles.borderColor}
-        borderWidth={styles.borderWidth}
-        px={padding.px}
-        py={padding.py}
-        radius={styles.radius}
-        testID={testID}
-        style={{
-          opacity: styles.opacity,
-        }}
-      >
-        {content}
-      </Box>
-    );
-  }
-
-  return (
-    <ButtonBase
-      accessibilityRole="button"
-      accessibilityState={{ disabled, selected }}
-      disabled={disabled}
-      onPress={onPress}
-      radius={variant === 'card' ? 'l' : 'm'}
-      testID={testID}
-    >
-      {(state) => {
-        const styles = resolveContainerStyles({
-          variant,
-          theme,
-          selected,
-          pressed: state.pressed,
-          hovered: state.hovered,
-          disabled: state.disabled,
-        });
-
-        return (
-          <Box
-            bg={styles.bg}
-            borderColor={styles.borderColor}
-            borderWidth={styles.borderWidth}
-            px={padding.px}
-            py={padding.py}
-            radius={styles.radius}
-            style={{
-              opacity: styles.opacity,
-            }}
-          >
-            {content}
-          </Box>
-        );
-      }}
-    </ButtonBase>
-  );
-}
-
-/***
- * Row pattern for lists with leading/trailing slots and optional press behavior.
- *
- 
- */
-export const ListRow = withZoraThemeScope(ListRowInner);

package/src/patterns/list/index.ts

@@ -1,10 +0,0 @@
-export { List } from './List';
-export { ListRow } from './ListRow';
-export { ListSection } from './ListSection';
-export type {
-  ListChildrenProps,
-  ListItemsProps,
-  ListProps,
-  ListRowProps,
-  ListRowVariant,
-} from './types';

package/src/patterns/list/resolveListSeparator.test.ts

@@ -1,18 +0,0 @@
-import { describe, expect, it } from 'bun:test';
-
-import { resolveListSeparator } from './resolveListSeparator';
-
-describe('resolveListSeparator', () => {
-  it('returns none for the first item', () => {
-    expect(resolveListSeparator('divider', 0)).toBe('none');
-    expect(resolveListSeparator('card', 0)).toBe('none');
-  });
-
-  it('returns divider for divider rows', () => {
-    expect(resolveListSeparator('divider', 1)).toBe('divider');
-  });
-
-  it('returns spacer for card rows', () => {
-    expect(resolveListSeparator('card', 1)).toBe('spacer');
-  });
-});

package/src/patterns/list/resolveListSeparator.ts

@@ -1,8 +0,0 @@
-import type { ListRowVariant } from './types';
-
-type ListSeparatorKind = 'none' | 'divider' | 'spacer';
-
-export function resolveListSeparator(variant: ListRowVariant, index: number): ListSeparatorKind {
-  if (index === 0) return 'none';
-  return variant === 'divider' ? 'divider' : 'spacer';
-}

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

@@ -1,53 +0,0 @@
-import React from 'react';
-
-import { Card } from '../../features/card/public';
-import { Box } from '../../features/layout/public';
-import { Text } from '../../features/typography/public';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { SettingsRowProps } from './types';
-
-function SettingsRowInner({
-  themeId: _themeId,
-  mode: _mode,
-  title,
-  description,
-  meta,
-  control,
-  onPress,
-  disabled = false,
-  testID,
-  interactionPolicy,
-}: SettingsRowProps) {
-  const isInteractive = Boolean(onPress) && !control;
-
-  // Prevent nested interactive elements:
-  // If a control is present (likely contains buttons), the row itself must not be clickable
-  return (
-    <Card
-      compact
-      actions={control}
-      description={description}
-      disabled={disabled}
-      interactionPolicy={interactionPolicy}
-      onPress={isInteractive ? onPress : undefined}
-      testID={testID}
-      title={title}
-      tone="subtle"
-    >
-      {meta ? (
-        <Box pt="xs">
-          <Text emphasis="muted" variant="caption">
-            {meta}
-          </Text>
-        </Box>
-      ) : null}
-    </Card>
-  );
-}
-
-/***
- * Settings row pattern with title, description/meta, and optional trailing content.
- *
- 
- */
-export const SettingsRow = withZoraThemeScope(SettingsRowInner);

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

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

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

@@ -1,40 +0,0 @@
-import type { ZoraComponentMeta } from '../../metadata';
-
-export const settingsRowMeta = {
-  name: 'SettingsRow',
-  category: 'pattern',
-  directManifestNode: true,
-  allowedChildren: [],
-  blueprint: {
-    label: 'Settings row',
-    defaultProps: {
-      title: 'Setting',
-      description: 'Setting description.',
-    },
-  },
-  props: {
-    title: {
-      type: 'string',
-      category: 'Content',
-      label: 'Title',
-      default: 'Setting',
-    },
-    description: {
-      type: 'string',
-      category: 'Content',
-      label: 'Description',
-      default: 'Setting description.',
-    },
-    meta: {
-      type: 'string',
-      category: 'Content',
-      label: 'Meta',
-    },
-    disabled: {
-      type: 'boolean',
-      category: 'State',
-      label: 'Disabled',
-      default: false,
-    },
-  },
-} as const satisfies ZoraComponentMeta;

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

@@ -1,28 +0,0 @@
-import type React from 'react';
-
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-interface SettingsRowBaseProps extends ZoraBaseProps {
-  title: React.ReactNode;
-  description?: React.ReactNode;
-  meta?: React.ReactNode;
-  disabled?: boolean;
-}
-
-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/tile-grid/TileGrid.tsx

@@ -1,55 +0,0 @@
-import React from 'react';
-
-import { Box } from '../../features/layout/public';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { TileGridProps } from './types';
-
-function TileGridInner({
-  themeId: _themeId,
-  mode: _mode,
-  interactionPolicy: _interactionPolicy,
-  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>
-  );
-}
-
-/***
- * Responsive grid layout for arranging tile content.
- *
- 
- */
-export const TileGrid = withZoraThemeScope(TileGridInner);

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

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

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

@@ -1,21 +0,0 @@
-import type { ZoraComponentMeta } from '../../metadata';
-
-const TILE_GRID_NOTE = 'Tile grid pattern component; not represented as a manifest node in v1.';
-
-export const paletteItemMeta = {
-  name: 'PaletteItem',
-  category: 'pattern',
-  directManifestNode: false,
-  allowedChildren: [],
-  note: TILE_GRID_NOTE,
-  props: {},
-} as const satisfies ZoraComponentMeta;
-
-export const tileGridMeta = {
-  name: 'TileGrid',
-  category: 'pattern',
-  directManifestNode: false,
-  allowedChildren: [],
-  note: TILE_GRID_NOTE,
-  props: {},
-} as const satisfies ZoraComponentMeta;

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

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