@ankhorage/zora 16.0.0 → 17.0.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/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;
-}