@ankhorage/zora 15.0.0 → 17.0.0

package/src/components/tabs/Tabs.tsx

@@ -1,129 +0,0 @@
-import React from 'react';
-
-import { Button } from '../../features/button/public';
-import { Box, Stack } from '../../features/layout/public';
-import { Text } from '../../features/typography/public';
-import { useZoraTheme } from '../../theme/useZoraTheme';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { TabItem, TabsProps } from './types';
-
-function TabsInner<TValue extends string = string>({
-  themeId: _themeId,
-  mode: _mode,
-  value,
-  items,
-  onValueChange,
-  variant = 'underline',
-  size = 'm',
-  disabled: tabsDisabled,
-  testID,
-  interactionPolicy,
-}: TabsProps<TValue>) {
-  const { theme } = useZoraTheme();
-  const passive = interactionPolicy === 'passive';
-
-  const renderTab = (item: TabItem<TValue>) => {
-    const isActive = item.value === value;
-    const isDisabled = tabsDisabled ?? item.disabled;
-
-    if (variant === 'segmented') {
-      return (
-        <Button
-          key={item.value}
-          variant={isActive ? 'solid' : 'ghost'}
-          color="neutral"
-          size={size}
-          disabled={isDisabled}
-          onPress={() => {
-            if (!passive) {
-              onValueChange(item.value);
-            }
-          }}
-          leadingIcon={item.icon}
-          testID={item.testID}
-        >
-          {item.label}
-          {item.badge}
-        </Button>
-      );
-    }
-
-    if (variant === 'pill') {
-      return (
-        <Button
-          key={item.value}
-          variant={isActive ? 'soft' : 'ghost'}
-          color={isActive ? 'primary' : 'neutral'}
-          size={size}
-          disabled={isDisabled}
-          onPress={() => {
-            if (!passive) {
-              onValueChange(item.value);
-            }
-          }}
-          leadingIcon={item.icon}
-          testID={item.testID}
-        >
-          {item.label}
-          {item.badge}
-        </Button>
-      );
-    }
-
-    // Default: 'underline'
-    return (
-      <Box
-        key={item.value}
-        borderColor={isActive ? theme.colors.primary : 'transparent'}
-        pb="xs"
-        style={{
-          borderBottomWidth: 2,
-        }}
-      >
-        <Button
-          variant="ghost"
-          color="neutral"
-          size={size}
-          disabled={isDisabled}
-          onPress={() => {
-            if (!passive) {
-              onValueChange(item.value);
-            }
-          }}
-          leadingIcon={item.icon}
-          testID={item.testID}
-        >
-          <Text
-            color={isActive ? 'primary' : undefined}
-            emphasis={isActive ? 'default' : 'muted'}
-            weight={isActive ? 'semiBold' : 'regular'}
-          >
-            {item.label}
-          </Text>
-          {item.badge}
-        </Button>
-      </Box>
-    );
-  };
-
-  return (
-    <Stack
-      direction="row"
-      gap={variant === 'segmented' ? 'none' : 'm'}
-      align="center"
-      testID={testID}
-      p={variant === 'segmented' ? 'xxs' : 'none'}
-      bg={variant === 'segmented' ? 'subtle' : 'transparent'}
-      radius={variant === 'segmented' ? 'm' : 'none'}
-    >
-      {items.map(renderTab)}
-    </Stack>
-  );
-}
-
-/***
- * Tab navigation for switching between views or content sections.
- *
- 
- */
-export const Tabs = withZoraThemeScope(TabsInner);

package/src/components/tabs/index.ts

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

package/src/components/tabs/meta.ts

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

package/src/components/tabs/types.ts

@@ -1,25 +0,0 @@
-import type { ButtonIconSpec } from '@ankhorage/surface';
-import type { ReactNode } from 'react';
-
-import type { ZoraControlSize } from '../../internal/recipes';
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export interface TabItem<TValue extends string = string> {
-  value: TValue;
-  label: ReactNode;
-  icon?: ButtonIconSpec;
-  badge?: ReactNode;
-  disabled?: boolean;
-  testID?: string;
-}
-
-export type TabsVariant = 'underline' | 'pill' | 'segmented';
-
-export interface TabsProps<TValue extends string = string> extends ZoraBaseProps {
-  value: TValue;
-  items: readonly TabItem<TValue>[];
-  onValueChange: (value: TValue) => void;
-  variant?: TabsVariant;
-  size?: ZoraControlSize;
-  disabled?: boolean;
-}

package/src/components/toolbar/Toolbar.tsx

@@ -1,48 +0,0 @@
-import React from 'react';
-
-import { Card } from '../../features/card/public';
-import { Stack } from '../../features/layout/public';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { ToolbarProps } from './types';
-
-function ToolbarInner({
-  themeId: _themeId,
-  mode: _mode,
-  interactionPolicy: _interactionPolicy,
-  children,
-  position = 'inline',
-  floating = false,
-  compact = true,
-  testID,
-}: ToolbarProps) {
-  const isFixed = position === 'top' || position === 'bottom';
-
-  return (
-    <Card
-      compact={compact}
-      tone={floating ? 'default' : 'subtle'}
-      testID={testID}
-      style={
-        isFixed
-          ? {
-              position: 'absolute',
-              [position]: 0,
-              zIndex: 10,
-              alignSelf: 'center',
-            }
-          : undefined
-      }
-    >
-      <Stack direction="row" gap="s" align="center">
-        {children}
-      </Stack>
-    </Card>
-  );
-}
-
-/***
- * Horizontal toolbar surface for grouping actions and controls.
- *
- 
- */
-export const Toolbar = withZoraThemeScope(ToolbarInner);

package/src/components/toolbar/ToolbarAction.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-
-import { IconButton } from '../../features/button/public';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { ToolbarActionProps } from './types';
-
-function ToolbarActionInner({
-  themeId: _themeId,
-  mode: _mode,
-  active,
-  ...props
-}: ToolbarActionProps) {
-  return (
-    <IconButton
-      {...props}
-      variant={active ? 'soft' : 'ghost'}
-      color={active ? 'primary' : 'neutral'}
-      size="m"
-    />
-  );
-}
-
-/***
- * Convenience icon action for toolbars with active state styling.
- *
- 
- */
-export const ToolbarAction = withZoraThemeScope(ToolbarActionInner);

package/src/components/toolbar/index.ts

@@ -1,3 +0,0 @@
-export * from './Toolbar';
-export * from './ToolbarAction';
-export * from './types';

package/src/components/toolbar/meta.ts

@@ -1,19 +0,0 @@
-import type { ZoraComponentMeta } from '../../metadata';
-
-export const toolbarMeta = {
-  name: 'Toolbar',
-  category: 'component',
-  directManifestNode: false,
-  allowedChildren: [],
-  note: 'Action bar component; not represented as a manifest node in v1.',
-  props: {},
-} as const satisfies ZoraComponentMeta;
-
-export const toolbarActionMeta = {
-  name: 'ToolbarAction',
-  category: 'component',
-  directManifestNode: false,
-  allowedChildren: [],
-  note: 'Action bar item; not represented as a manifest node in v1.',
-  props: {},
-} as const satisfies ZoraComponentMeta;

package/src/components/toolbar/types.ts

@@ -1,21 +0,0 @@
-import type { ButtonIconSpec } from '@ankhorage/surface';
-import type React from 'react';
-
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export type ToolbarPosition = 'top' | 'bottom' | 'inline';
-
-export interface ToolbarProps extends ZoraBaseProps {
-  children?: React.ReactNode;
-  position?: ToolbarPosition;
-  floating?: boolean;
-  compact?: boolean;
-}
-
-export interface ToolbarActionProps extends ZoraBaseProps {
-  label: string;
-  icon: ButtonIconSpec;
-  active?: boolean;
-  disabled?: boolean;
-  onPress?: () => void;
-}

package/src/features/layout/adapters/inbound/Box.tsx

@@ -1,18 +0,0 @@
-import { Box as SurfaceBox } from '@ankhorage/surface';
-import React from 'react';
-
-import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
-import type { BoxProps } from '../../../../types/layout';
-
-/*** Adapts the themed Surface Box primitive to ZORA scope and interaction props. */
-export const Box = withZoraThemeScope(BoxInner);
-
-/*** Forwards presentation props to the published Surface boundary. */
-function BoxInner({
-  themeId: _themeId,
-  mode: _mode,
-  interactionPolicy: _interactionPolicy,
-  ...props
-}: BoxProps) {
-  return <SurfaceBox {...props} />;
-}

package/src/features/layout/adapters/inbound/Container.tsx

@@ -1,18 +0,0 @@
-import { Container as SurfaceContainer } from '@ankhorage/surface';
-import React from 'react';
-
-import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
-import type { ContainerProps } from '../../../../types/layout';
-
-/*** Adapts the themed Surface Container primitive to ZORA scope and interaction props. */
-export const Container = withZoraThemeScope(ContainerInner);
-
-/*** Forwards presentation props to the published Surface boundary. */
-function ContainerInner({
-  themeId: _themeId,
-  mode: _mode,
-  interactionPolicy: _interactionPolicy,
-  ...props
-}: ContainerProps) {
-  return <SurfaceContainer {...props} />;
-}

package/src/features/layout/adapters/inbound/Stack.tsx

@@ -1,18 +0,0 @@
-import { Stack as SurfaceStack } from '@ankhorage/surface';
-import React from 'react';
-
-import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
-import type { StackProps } from '../../../../types/layout';
-
-/*** Adapts the themed Surface Stack primitive to ZORA scope and interaction props. */
-export const Stack = withZoraThemeScope(StackInner);
-
-/*** Forwards presentation props to the published Surface boundary. */
-function StackInner({
-  themeId: _themeId,
-  mode: _mode,
-  interactionPolicy: _interactionPolicy,
-  ...props
-}: StackProps) {
-  return <SurfaceStack {...props} />;
-}

package/src/features/layout/boxMeta.ts

@@ -1,16 +0,0 @@
-import { CONTAINER_ALLOWED_CHILDREN } from '../../metadata/allowedChildren';
-import type { ZoraComponentMeta } from '../../metadata/types';
-import { LAYOUT_PROPS } from './constants';
-
-export const boxMeta = {
-  name: 'Box',
-  category: 'foundation',
-  directManifestNode: true,
-  allowedChildren: [...CONTAINER_ALLOWED_CHILDREN],
-  props: {
-    ...LAYOUT_PROPS,
-    bg: { type: 'color', category: 'Style' },
-    borderColor: { type: 'color', category: 'Style' },
-    borderWidth: { type: 'number', category: 'Style' },
-  },
-} as const satisfies ZoraComponentMeta;

package/src/foundation/Center.tsx

@@ -1,26 +0,0 @@
-import {
-  Center as SurfaceCenter,
-  type CenterProps as SurfaceCenterProps,
-} from '@ankhorage/surface';
-import React from 'react';
-
-import { withZoraThemeScope } from '../theme/withZoraThemeScope';
-import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
-
-export interface CenterProps extends ZoraBaseProps, Omit<SurfaceCenterProps, 'mode' | 'themeId'> {}
-
-function CenterInner({
-  themeId: _themeId,
-  mode: _mode,
-  interactionPolicy: _interactionPolicy,
-  ...props
-}: CenterProps) {
-  return <SurfaceCenter {...props} />;
-}
-
-/***
- * Centers children horizontally and vertically within the available space.
- *
- 
- */
-export const Center = withZoraThemeScope(CenterInner);

package/src/foundation/Inline.tsx

@@ -1,26 +0,0 @@
-import {
-  Inline as SurfaceInline,
-  type InlineProps as SurfaceInlineProps,
-} from '@ankhorage/surface';
-import React from 'react';
-
-import { withZoraThemeScope } from '../theme/withZoraThemeScope';
-import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
-
-export interface InlineProps extends ZoraBaseProps, Omit<SurfaceInlineProps, 'mode' | 'themeId'> {}
-
-function InlineInner({
-  themeId: _themeId,
-  mode: _mode,
-  interactionPolicy: _interactionPolicy,
-  ...props
-}: InlineProps) {
-  return <SurfaceInline {...props} />;
-}
-
-/***
- * Arranges children inline with spacing and wrapping behavior.
- *
- 
- */
-export const Inline = withZoraThemeScope(InlineInner);

package/src/foundation/Show.tsx

@@ -1,23 +0,0 @@
-import { Show as SurfaceShow, type ShowProps as SurfaceShowProps } from '@ankhorage/surface';
-import React from 'react';
-
-import { withZoraThemeScope } from '../theme/withZoraThemeScope';
-import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
-
-export interface ShowProps extends ZoraBaseProps, Omit<SurfaceShowProps, 'mode' | 'themeId'> {}
-
-function ShowInner({
-  themeId: _themeId,
-  mode: _mode,
-  interactionPolicy: _interactionPolicy,
-  ...props
-}: ShowProps) {
-  return <SurfaceShow {...props} />;
-}
-
-/***
- * Conditionally renders children for responsive display and breakpoint-based visibility.
- *
- 
- */
-export const Show = withZoraThemeScope(ShowInner);

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