@ankhorage/zora 16.0.0 → 18.0.0

package/src/foundation/Spacer.tsx

@@ -1,26 +0,0 @@
-import {
-  Spacer as SurfaceSpacer,
-  type SpacerProps as SurfaceSpacerProps,
-} from '@ankhorage/surface';
-import React from 'react';
-
-import { withZoraThemeScope } from '../theme/withZoraThemeScope';
-import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
-
-export interface SpacerProps extends ZoraBaseProps, Omit<SurfaceSpacerProps, 'mode' | 'themeId'> {}
-
-function SpacerInner({
-  themeId: _themeId,
-  mode: _mode,
-  interactionPolicy: _interactionPolicy,
-  ...props
-}: SpacerProps) {
-  return <SurfaceSpacer {...props} />;
-}
-
-/***
- * Adds flexible or fixed empty space in layout compositions.
- *
- 
- */
-export const Spacer = withZoraThemeScope(SpacerInner);

package/src/foundation/index.test.ts

@@ -1,30 +0,0 @@
-import { readFileSync } from 'node:fs';
-import { join } from 'node:path';
-
-import { describe, expect, it } from 'bun:test';
-
-const foundationIndex = readFileSync(join(import.meta.dir, 'index.ts'), 'utf8');
-const rootIndex = readFileSync(join(import.meta.dir, '..', 'index.ts'), 'utf8');
-
-describe('foundation exports', () => {
-  it('defines a narrow ZORA foundation export layer', () => {
-    expect(foundationIndex).toMatch(/export type \{/);
-    expect(foundationIndex).toMatch(/CenterProps/);
-    expect(foundationIndex).toMatch(/InlineProps/);
-    expect(foundationIndex).toMatch(/ShowProps/);
-    expect(foundationIndex).toMatch(/SpacerProps/);
-    expect(foundationIndex).not.toMatch(/Box|Container|Grid|Stack|Surface/);
-    expect(foundationIndex).not.toMatch(/@ankhorage\/surface/);
-    expect(foundationIndex).not.toMatch(/Heading/);
-    expect(foundationIndex).not.toMatch(/Text/);
-    expect(foundationIndex).not.toMatch(/ThemeProvider/);
-    expect(foundationIndex).not.toMatch(/ResponsiveProvider/);
-    expect(foundationIndex).not.toMatch(/useTheme/);
-    expect(foundationIndex).not.toMatch(/useResponsiveRuntime/);
-    expect(foundationIndex).not.toMatch(/resolveResponsive/);
-  });
-
-  it('re-exports the foundation layer from the ZORA root entrypoint', () => {
-    expect(rootIndex).toMatch(/from '\.\/foundation';/);
-  });
-});

package/src/foundation/index.ts

@@ -1,8 +0,0 @@
-export type { CenterProps } from './Center';
-export { Center } from './Center';
-export type { InlineProps } from './Inline';
-export { Inline } from './Inline';
-export type { ShowProps } from './Show';
-export { Show } from './Show';
-export type { SpacerProps } from './Spacer';
-export { Spacer } from './Spacer';

package/src/foundation/meta.ts

@@ -1,36 +0,0 @@
-import type { ZoraComponentMetaRegistry } from '../metadata';
-
-export const foundationMetas = {
-  Center: {
-    name: 'Center',
-    category: 'foundation',
-    directManifestNode: false,
-    allowedChildren: [],
-    note: 'Layout helper component; not represented as a manifest node in v1.',
-    props: {},
-  },
-  Inline: {
-    name: 'Inline',
-    category: 'foundation',
-    directManifestNode: false,
-    allowedChildren: [],
-    note: 'Layout helper component; not represented as a manifest node in v1.',
-    props: {},
-  },
-  Show: {
-    name: 'Show',
-    category: 'foundation',
-    directManifestNode: false,
-    allowedChildren: [],
-    note: 'Responsive utility component; not represented as a manifest node in v1.',
-    props: {},
-  },
-  Spacer: {
-    name: 'Spacer',
-    category: 'foundation',
-    directManifestNode: false,
-    allowedChildren: [],
-    note: 'Spacing utility component; not represented as a manifest node in v1.',
-    props: {},
-  },
-} as const satisfies ZoraComponentMetaRegistry;

package/src/layout/app-shell/AppShell.test.ts

@@ -1,24 +0,0 @@
-import { readFileSync } from 'node:fs';
-import { join } from 'node:path';
-
-import { describe, expect, test } from 'bun:test';
-
-const APP_SHELL_DIR = import.meta.dir;
-
-function readAppShellFile(fileName: string): string {
-  return readFileSync(join(APP_SHELL_DIR, fileName), 'utf8');
-}
-
-describe('AppShell public API', () => {
-  test('does not expose raw style escape hatches', () => {
-    const typesSource = readAppShellFile('types.ts');
-    const implementationSource = readAppShellFile('AppShell.tsx');
-
-    expect(typesSource).not.toContain('StyleProp');
-    expect(typesSource).not.toContain('ViewStyle');
-    expect(typesSource).not.toMatch(/\bstyle\??:/);
-    expect(typesSource).not.toMatch(/\bbodyStyle\??:/);
-    expect(implementationSource).not.toMatch(/\bbodyStyle\b/);
-    expect(implementationSource).not.toMatch(/\bstyle,\s*$/m);
-  });
-});

package/src/layout/app-shell/AppShell.tsx

@@ -1,65 +0,0 @@
-import React from 'react';
-import { StyleSheet, View } from 'react-native';
-
-import { Box } from '../../features/layout/public';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { AppShellProps } from './types';
-
-function AppShellInner({
-  themeId: _themeId,
-  mode: _mode,
-  interactionPolicy: _interactionPolicy,
-  children,
-  header,
-  footer,
-  overlay,
-  testID,
-}: AppShellProps) {
-  return (
-    <Box bg="background" flex={1} testID={testID}>
-      <View style={styles.root}>
-        {header ? <View style={styles.slot}>{header}</View> : null}
-
-        <View style={styles.body}>{children}</View>
-
-        {footer ? <View style={styles.slot}>{footer}</View> : null}
-
-        {overlay ? <View style={[StyleSheet.absoluteFill, styles.overlay]}>{overlay}</View> : null}
-      </View>
-    </Box>
-  );
-}
-
-/***
- * Root application shell with stable header, content, footer, and overlay slots.
- *
- * `AppShell` provides the top-level layout frame for cross-platform apps while
- * leaving navigation, toolbars, and overlays composable through explicit slots.
- *
- 
- * @example App frame
- * ```tsx
- * <AppShell header={<AppBar title="Dashboard" />}>...</AppShell>
- * ```
- */
-export const AppShell = withZoraThemeScope(AppShellInner);
-
-const styles = StyleSheet.create({
-  root: {
-    flex: 1,
-    minHeight: 0,
-    position: 'relative',
-  },
-  body: {
-    flex: 1,
-    minHeight: 0,
-    minWidth: 0,
-  },
-  slot: {
-    flexShrink: 0,
-  },
-  overlay: {
-    pointerEvents: 'box-none',
-    zIndex: 10,
-  },
-});

package/src/layout/app-shell/index.ts

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

package/src/layout/app-shell/types.ts

@@ -1,10 +0,0 @@
-import type React from 'react';
-
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export interface AppShellProps extends ZoraBaseProps {
-  children?: React.ReactNode;
-  header?: React.ReactNode;
-  footer?: React.ReactNode;
-  overlay?: React.ReactNode;
-}

package/src/layout/screen/Screen.test.ts

@@ -1,22 +0,0 @@
-import { readFile } from 'node:fs/promises';
-
-import { describe, expect, it } from 'bun:test';
-
-describe('Screen scroll ownership contract', () => {
-  it('keeps scroll=false as a bounded delegated viewport', async () => {
-    const source = await readFile(new URL('./Screen.tsx', import.meta.url), 'utf8');
-
-    expect(source).toContain('if (!scroll)');
-    expect(source).toContain('flex={1} minHeight={0} minWidth={0}');
-    expect(source).toContain('{children}');
-    expect(source).not.toContain('{content}');
-  });
-
-  it('keeps normal scrolling owned by Screen', async () => {
-    const source = await readFile(new URL('./Screen.tsx', import.meta.url), 'utf8');
-
-    expect(source).toContain('<ScrollArea');
-    expect(source).toContain('style={{ flex: 1, minHeight: 0, minWidth: 0 }}');
-    expect(source).toContain('<Container maxWidth={resolvePageMaxWidth(width)}');
-  });
-});

package/src/layout/screen/Screen.tsx

@@ -1,47 +0,0 @@
-import { ScrollArea } from '@ankhorage/surface';
-import React from 'react';
-
-import { Box, Container, Stack } from '../../features/layout/public';
-import { resolvePageMaxWidth } from '../../internal/recipes';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { ScreenProps } from './types';
-
-function ScreenInner({
-  themeId: _themeId,
-  mode: _mode,
-  interactionPolicy: _interactionPolicy,
-  children,
-  footer,
-  scroll = true,
-  width = 'default',
-  testID,
-}: ScreenProps) {
-  if (!scroll) {
-    return (
-      <Box bg="background" flex={1} minHeight={0} minWidth={0} testID={testID}>
-        {children}
-        {footer}
-      </Box>
-    );
-  }
-
-  return (
-    <ScrollArea bg="background" style={{ flex: 1, minHeight: 0, minWidth: 0 }}>
-      <Container maxWidth={resolvePageMaxWidth(width)} py="xl" testID={testID}>
-        <Stack gap="l">
-          {children}
-          {footer}
-        </Stack>
-      </Container>
-    </ScrollArea>
-  );
-}
-
-/**
- * Outer content boundary for one app screen.
- *
- * By default Screen owns normal vertical scrolling. Set `scroll={false}` to preserve a bounded
- * viewport and delegate scroll or gesture ownership to specialized children such as lists, maps,
- * chats, canvases, or editors.
- */
-export const Screen = withZoraThemeScope(ScreenInner);

package/src/layout/screen/index.ts

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

package/src/layout/screen/types.ts

@@ -1,11 +0,0 @@
-import type React from 'react';
-
-import type { ZoraContentWidth } from '../../internal/recipes';
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export interface ScreenProps extends ZoraBaseProps {
-  children?: React.ReactNode;
-  footer?: React.ReactNode;
-  scroll?: boolean;
-  width?: ZoraContentWidth;
-}

package/src/layout/screen-section/index.ts

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

package/src/layout/screen-section/types.ts

@@ -1,10 +0,0 @@
-import type React from 'react';
-
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export interface ScreenSectionProps extends ZoraBaseProps {
-  title?: React.ReactNode;
-  description?: React.ReactNode;
-  actions?: React.ReactNode;
-  children?: React.ReactNode;
-}

package/src/layout/settings-layout/SettingsLayout.tsx

@@ -1,33 +0,0 @@
-import React from 'react';
-
-import { AppBar } from '../../features/app-bar/public';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import { Screen } from '../screen';
-import { SidebarLayout } from '../sidebar-layout';
-import type { SettingsLayoutProps } from './types';
-
-function SettingsLayoutInner({
-  themeId: _themeId,
-  mode: _mode,
-  interactionPolicy: _interactionPolicy,
-  title,
-  description,
-  sidebar,
-  children,
-  actions,
-  testID,
-}: SettingsLayoutProps) {
-  return (
-    <>
-      {title ? <AppBar actions={actions} subtitle={description} title={title} /> : null}
-      <Screen testID={testID}>
-        <SidebarLayout sidebar={sidebar}>{children}</SidebarLayout>
-      </Screen>
-    </>
-  );
-}
-
-/***
- * Settings page layout with app bar, sidebar, and scrollable content area.
- */
-export const SettingsLayout = withZoraThemeScope(SettingsLayoutInner);

package/src/layout/settings-layout/index.ts

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

package/src/layout/settings-layout/meta.ts

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

package/src/layout/settings-layout/types.ts

@@ -1,11 +0,0 @@
-import type React from 'react';
-
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export interface SettingsLayoutProps extends ZoraBaseProps {
-  title?: React.ReactNode;
-  description?: React.ReactNode;
-  sidebar: React.ReactNode;
-  children?: React.ReactNode;
-  actions?: React.ReactNode;
-}

package/src/layout/sidebar-layout/SidebarLayout.test.ts

@@ -1,35 +0,0 @@
-import { describe, expect, it } from 'bun:test';
-
-import { resolveSidebarLayoutSizing } from './resolveSidebarLayoutSizing';
-
-describe('SidebarLayout sizing contract', () => {
-  it('keeps content-flow sizing as the default', () => {
-    expect(resolveSidebarLayoutSizing()).toEqual({
-      root: {
-        align: 'flex-start',
-        flex: undefined,
-        minHeight: undefined,
-        minWidth: undefined,
-      },
-      child: {
-        minHeight: undefined,
-        minWidth: undefined,
-      },
-    });
-  });
-
-  it('fills a bounded parent for child-owned scroll areas', () => {
-    expect(resolveSidebarLayoutSizing('fill')).toEqual({
-      root: {
-        align: 'stretch',
-        flex: 1,
-        minHeight: 0,
-        minWidth: 0,
-      },
-      child: {
-        minHeight: 0,
-        minWidth: 0,
-      },
-    });
-  });
-});

package/src/layout/sidebar-layout/SidebarLayout.tsx

@@ -1,46 +0,0 @@
-import React from 'react';
-
-import { Box, Stack } from '../../features/layout/public';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import { resolveSidebarLayoutSizing } from './resolveSidebarLayoutSizing';
-import type { SidebarLayoutProps } from './types';
-
-function SidebarLayoutInner({
-  themeId: _themeId,
-  mode: _mode,
-  interactionPolicy: _interactionPolicy,
-  sidebar,
-  children,
-  aside,
-  sidebarWidth = 280,
-  asideWidth = 280,
-  sizing,
-  testID,
-}: SidebarLayoutProps) {
-  const layoutSizing = resolveSidebarLayoutSizing(sizing);
-
-  return (
-    <Stack {...layoutSizing.root} direction={{ base: 'column', lg: 'row' }} gap="l" testID={testID}>
-      <Box {...layoutSizing.child} width={{ base: '100%', lg: sidebarWidth }}>
-        {sidebar}
-      </Box>
-      <Box {...layoutSizing.child} flex={1} width="100%">
-        {children}
-      </Box>
-      {aside ? (
-        <Box {...layoutSizing.child} width={{ base: '100%', lg: asideWidth }}>
-          {aside}
-        </Box>
-      ) : null}
-    </Stack>
-  );
-}
-
-/***
- * Responsive layout with a sidebar and main content area (and optional aside).
- *
- * `sizing="content"` keeps normal content-flow behavior. Use `sizing="fill"` when the layout
- * should fill an already bounded parent so sidebar/content children receive the available space
- * for their own scrolling or gesture ownership.
- */
-export const SidebarLayout = withZoraThemeScope(SidebarLayoutInner);

package/src/layout/sidebar-layout/index.ts

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

package/src/layout/sidebar-layout/resolveSidebarLayoutSizing.ts

@@ -1,18 +0,0 @@
-import type { SidebarLayoutSizing } from './types';
-
-export function resolveSidebarLayoutSizing(sizing: SidebarLayoutSizing = 'content') {
-  const fillsAvailableSpace = sizing === 'fill';
-
-  return {
-    root: {
-      align: fillsAvailableSpace ? 'stretch' : 'flex-start',
-      flex: fillsAvailableSpace ? 1 : undefined,
-      minHeight: fillsAvailableSpace ? 0 : undefined,
-      minWidth: fillsAvailableSpace ? 0 : undefined,
-    },
-    child: {
-      minHeight: fillsAvailableSpace ? 0 : undefined,
-      minWidth: fillsAvailableSpace ? 0 : undefined,
-    },
-  } as const;
-}

package/src/layout/sidebar-layout/types.ts

@@ -1,14 +0,0 @@
-import type React from 'react';
-
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export type SidebarLayoutSizing = 'content' | 'fill';
-
-export interface SidebarLayoutProps extends ZoraBaseProps {
-  sidebar: React.ReactNode;
-  children?: React.ReactNode;
-  aside?: React.ReactNode;
-  sidebarWidth?: number;
-  asideWidth?: number;
-  sizing?: SidebarLayoutSizing;
-}

package/src/layout/topbar-layout/TopbarLayout.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-
-import { Box, Stack } from '../../features/layout/public';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import { SidebarLayout } from '../sidebar-layout';
-import type { TopbarLayoutProps } from './types';
-
-function TopbarLayoutInner({
-  themeId: _themeId,
-  mode: _mode,
-  interactionPolicy: _interactionPolicy,
-  topbar,
-  children,
-  sidebar,
-  testID,
-}: TopbarLayoutProps) {
-  return (
-    <Stack gap="l" testID={testID}>
-      <Box>{topbar}</Box>
-      {sidebar ? <SidebarLayout sidebar={sidebar}>{children}</SidebarLayout> : children}
-    </Stack>
-  );
-}
-
-/***
- * Layout that composes a top bar with optional sidebar and content.
- *
- 
- */
-export const TopbarLayout = withZoraThemeScope(TopbarLayoutInner);

package/src/layout/topbar-layout/index.ts

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

package/src/layout/topbar-layout/meta.ts

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

package/src/layout/topbar-layout/types.ts

@@ -1,9 +0,0 @@
-import type React from 'react';
-
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export interface TopbarLayoutProps extends ZoraBaseProps {
-  topbar: React.ReactNode;
-  children?: React.ReactNode;
-  sidebar?: React.ReactNode;
-}

package/src/patterns/list/List.tsx

@@ -1,78 +0,0 @@
-import React from 'react';
-
-import { Divider, Stack } from '../../features/layout/public';
-import { Spacer } from '../../foundation';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import { ListRow } from './ListRow';
-import { resolveListSeparator } from './resolveListSeparator';
-import type { ListItemsProps, ListProps, ListRowProps, ListRowVariant } from './types';
-
-function resolveRowVariant({
-  item,
-  defaultVariant,
-}: {
-  item: ListRowProps;
-  defaultVariant: ListRowVariant;
-}): ListRowVariant {
-  return item.variant ?? defaultVariant;
-}
-
-function resolveRowCompact({
-  item,
-  compact,
-}: {
-  item: ListRowProps;
-  compact: boolean | undefined;
-}): boolean {
-  return item.compact ?? compact ?? false;
-}
-
-function ListItemsInner({
-  themeId: _themeId,
-  mode: _mode,
-  testID,
-  items,
-  rowVariant = 'divider',
-  compact,
-}: ListItemsProps) {
-  return (
-    <Stack gap="none" testID={testID}>
-      {items.map((item, index) => {
-        const effectiveVariant = resolveRowVariant({ item, defaultVariant: rowVariant });
-        const separator = resolveListSeparator(effectiveVariant, index);
-
-        return (
-          <React.Fragment key={`${index}`}>
-            {separator === 'divider' ? <Divider /> : null}
-            {separator === 'spacer' ? <Spacer size="s" /> : null}
-            <ListRow
-              {...item}
-              compact={resolveRowCompact({ item, compact })}
-              variant={effectiveVariant}
-            />
-          </React.Fragment>
-        );
-      })}
-    </Stack>
-  );
-}
-
-function ListInner(props: ListProps) {
-  if ('items' in props) {
-    return <ListItemsInner {...props} />;
-  }
-
-  const { themeId: _themeId, mode: _mode, children, testID } = props;
-  return (
-    <Stack gap="none" testID={testID}>
-      {children}
-    </Stack>
-  );
-}
-
-/***
- * List container pattern for composing `ListRow` and `ListSection`.
- *
- 
- */
-export const List = withZoraThemeScope(ListInner);