@ankhorage/zora 14.0.0 → 15.0.0

package/dist/components/select/meta.js

@@ -1,9 +0,0 @@
-export const selectMeta = {
-    name: 'Select',
-    category: 'component',
-    directManifestNode: false,
-    allowedChildren: [],
-    note: 'Form control component; not represented as a manifest node in v1.',
-    props: {},
-};
-//# sourceMappingURL=meta.js.map

package/dist/components/select/meta.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"meta.js","sourceRoot":"","sources":["../../../src/components/select/meta.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,IAAI,EAAE,QAAQ;IACd,QAAQ,EAAE,WAAW;IACrB,kBAAkB,EAAE,KAAK;IACzB,eAAe,EAAE,EAAE;IACnB,IAAI,EAAE,mEAAmE;IACzE,KAAK,EAAE,EAAE;CAC2B,CAAC","sourcesContent":["import type { ZoraComponentMeta } from '../../metadata';\n\nexport const selectMeta = {\n  name: 'Select',\n  category: 'component',\n  directManifestNode: false,\n  allowedChildren: [],\n  note: 'Form control component; not represented as a manifest node in v1.',\n  props: {},\n} as const satisfies ZoraComponentMeta;\n"]}

package/dist/components/select/types.d.ts

@@ -1,14 +0,0 @@
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-export interface SelectOption<TValue extends string = string> {
-    value: TValue;
-    label: string;
-    disabled?: boolean;
-}
-export interface SelectProps<TValue extends string = string> extends ZoraBaseProps {
-    value: TValue;
-    options: readonly SelectOption<TValue>[];
-    onValueChange: (value: TValue) => void;
-    disabled?: boolean;
-    invalid?: boolean;
-}
-//# sourceMappingURL=types.d.ts.map

package/dist/components/select/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/select/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,WAAW,YAAY,CAAC,MAAM,SAAS,MAAM,GAAG,MAAM;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,WAAW,CAAC,MAAM,SAAS,MAAM,GAAG,MAAM,CAAE,SAAQ,aAAa;IAChF,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,SAAS,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC;IACzC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}

package/dist/components/select/types.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=types.js.map

package/dist/components/select/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/select/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport interface SelectOption<TValue extends string = string> {\n  value: TValue;\n  label: string;\n  disabled?: boolean;\n}\n\nexport interface SelectProps<TValue extends string = string> extends ZoraBaseProps {\n  value: TValue;\n  options: readonly SelectOption<TValue>[];\n  onValueChange: (value: TValue) => void;\n  disabled?: boolean;\n  invalid?: boolean;\n}\n"]}

package/src/components/app-bar/AppBar.tsx

@@ -1,140 +0,0 @@
-import { AppBar as SurfaceAppBar, type ButtonIconSpec } from '@ankhorage/surface';
-import React from 'react';
-
-import { IconButton } from '../../features/button/public';
-import { Box, Stack } from '../../features/layout/public';
-import { Heading } from '../../features/typography/public';
-import { Text } from '../../features/typography/public';
-import { Inline } from '../../foundation';
-import { useZoraTheme } from '../../theme/useZoraTheme';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { AppBarMode, AppBarOverflowAction, AppBarProps } from './types';
-
-const DEFAULT_CANCEL_ICON = { name: 'close-outline' } satisfies ButtonIconSpec;
-const DEFAULT_OVERFLOW_ICON = { name: 'ellipsis-vertical' } satisfies ButtonIconSpec;
-
-function resolveMode(mode: AppBarMode | undefined): AppBarMode {
-  return mode ?? { type: 'default' };
-}
-
-function resolveSelectionLabel({ count, label }: { count?: number; label: string }): string {
-  if (count === undefined) {
-    return label;
-  }
-
-  return `${label} (${count})`;
-}
-
-function resolveOverflowLabel(overflow: AppBarOverflowAction): string {
-  return overflow.label ?? 'More options';
-}
-
-function resolveCancelLabel(mode: Extract<AppBarMode, { type: 'selection' }>): string {
-  return mode.cancelLabel ?? 'Cancel selection';
-}
-
-function AppBarInner({
-  themeId: _themeId,
-  mode: _mode,
-  title,
-  subtitle,
-  leading,
-  actions,
-  overflow,
-  appMode,
-  children,
-  safeAreaTop = true,
-  divider = true,
-  testID,
-  interactionPolicy,
-}: AppBarProps) {
-  const { theme } = useZoraTheme();
-  const resolvedMode = resolveMode(appMode);
-  const isSelectionMode = resolvedMode.type === 'selection';
-
-  const resolvedLeading =
-    leading ??
-    (isSelectionMode ? (
-      <IconButton
-        icon={resolvedMode.cancelIcon ?? DEFAULT_CANCEL_ICON}
-        interactionPolicy={interactionPolicy}
-        label={resolveCancelLabel(resolvedMode)}
-        variant="ghost"
-        size="m"
-        color="neutral"
-        onPress={resolvedMode.onCancel}
-      />
-    ) : undefined);
-
-  const overflowButton = overflow?.onPress ? (
-    <IconButton
-      disabled={overflow.disabled}
-      icon={overflow.icon ?? DEFAULT_OVERFLOW_ICON}
-      interactionPolicy={interactionPolicy}
-      label={resolveOverflowLabel(overflow)}
-      variant="ghost"
-      size="m"
-      color="neutral"
-      onPress={overflow.onPress}
-    />
-  ) : null;
-
-  const resolvedTrailing =
-    actions || overflowButton ? (
-      <Inline align="center" gap="s" wrap="nowrap">
-        {actions}
-        {overflowButton}
-      </Inline>
-    ) : undefined;
-
-  const resolvedCenter = (() => {
-    if (children !== undefined) {
-      return children;
-    }
-
-    if (isSelectionMode) {
-      return (
-        <Text numberOfLines={1} emphasis="default" variant="label" weight="semiBold">
-          {resolveSelectionLabel(resolvedMode)}
-        </Text>
-      );
-    }
-
-    if (title == null && subtitle == null) {
-      return null;
-    }
-
-    return (
-      <Stack gap="xs">
-        {title != null ? (
-          <Heading ellipsizeMode="tail" level={3} numberOfLines={1} size="h5">
-            {title}
-          </Heading>
-        ) : null}
-        {subtitle != null ? (
-          <Text ellipsizeMode="tail" numberOfLines={1} emphasis="muted" variant="bodySmall">
-            {subtitle}
-          </Text>
-        ) : null}
-      </Stack>
-    );
-  })();
-
-  return (
-    <SurfaceAppBar
-      bg={isSelectionMode ? theme.semantics.action.primary.softBg : undefined}
-      divider={divider}
-      leading={resolvedLeading}
-      safeAreaTop={safeAreaTop}
-      testID={testID}
-      trailing={resolvedTrailing}
-    >
-      {resolvedCenter ? <Box style={{ minWidth: 0 }}>{resolvedCenter}</Box> : null}
-    </SurfaceAppBar>
-  );
-}
-
-/***
- * Renders a top app bar with title/subtitle and optional leading/trailing actions.
- */
-export const AppBar = withZoraThemeScope(AppBarInner);

package/src/components/app-bar/index.ts

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

package/src/components/breadcrumbs/Breadcrumbs.tsx

@@ -1,147 +0,0 @@
-import React from 'react';
-
-import { Button } from '../../features/button/public';
-import { Icon } from '../../features/icon/public';
-import { Text } from '../../features/typography/public';
-import { Inline } from '../../foundation';
-import { resolveIconSize } from '../../internal/recipes';
-import { useZoraTheme } from '../../theme/useZoraTheme';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { BreadcrumbItem, BreadcrumbsProps } from './types';
-
-type BreadcrumbRenderItem =
-  | {
-      item: BreadcrumbItem;
-      type: 'item';
-    }
-  | {
-      type: 'ellipsis';
-    };
-
-function normalizeMaxItems(value: number | undefined): number | undefined {
-  if (value === undefined || !Number.isFinite(value)) {
-    return undefined;
-  }
-
-  return Math.max(0, Math.trunc(value));
-}
-
-function createRenderItems(
-  items: readonly BreadcrumbItem[],
-  maxItems: number | undefined,
-): readonly BreadcrumbRenderItem[] {
-  if (maxItems === undefined || maxItems === 0 || items.length <= maxItems || maxItems < 3) {
-    return items.map((item) => ({ item, type: 'item' }));
-  }
-
-  const [firstItem] = items;
-  if (firstItem === undefined) {
-    return [];
-  }
-
-  const trailingCount = maxItems - 2;
-  const trailingItems = items.slice(items.length - trailingCount);
-
-  return [
-    { item: firstItem, type: 'item' },
-    { type: 'ellipsis' },
-    ...trailingItems.map((item) => ({ item, type: 'item' }) satisfies BreadcrumbRenderItem),
-  ];
-}
-
-function renderSeparator(separator: React.ReactNode) {
-  return (
-    <Text emphasis="muted" variant="bodySmall">
-      {separator}
-    </Text>
-  );
-}
-
-function BreadcrumbLabel({ item, compact }: { item: BreadcrumbItem; compact: boolean }) {
-  const { theme } = useZoraTheme();
-
-  return (
-    <Inline align="center" gap="xs" wrap="nowrap">
-      {item.icon ? (
-        <Icon
-          {...item.icon}
-          color={theme.semantics.content.muted}
-          size={resolveIconSize(compact ? 's' : 'm')}
-        />
-      ) : null}
-      <Text emphasis="muted" variant={compact ? 'caption' : 'bodySmall'}>
-        {item.label}
-      </Text>
-    </Inline>
-  );
-}
-
-function BreadcrumbsInner({
-  themeId: _themeId,
-  mode: _mode,
-  interactionPolicy,
-  items,
-  separator = '/',
-  maxItems,
-  compact = false,
-  disabled = false,
-  testID,
-}: BreadcrumbsProps) {
-  const normalizedMaxItems = normalizeMaxItems(maxItems);
-  const renderItems = createRenderItems(items, normalizedMaxItems);
-  const currentItemId = items.at(-1)?.id;
-
-  if (items.length === 0) {
-    return null;
-  }
-
-  return (
-    <Inline align="center" gap={compact ? 'xs' : 's'} testID={testID} wrap="wrap">
-      {renderItems.map((renderItem, index) => {
-        const isLastRenderedItem = index === renderItems.length - 1;
-        const showSeparator = !isLastRenderedItem;
-
-        if (renderItem.type === 'ellipsis') {
-          return (
-            <React.Fragment key="ellipsis">
-              <Text emphasis="muted" variant={compact ? 'caption' : 'bodySmall'}>
-                …
-              </Text>
-              {showSeparator ? renderSeparator(separator) : null}
-            </React.Fragment>
-          );
-        }
-
-        const { item } = renderItem;
-        const current = item.id === currentItemId;
-        const interactive = !current && !disabled && !item.disabled && Boolean(item.onPress);
-
-        return (
-          <React.Fragment key={item.id}>
-            {interactive ? (
-              <Button
-                color="neutral"
-                interactionPolicy={interactionPolicy}
-                leadingIcon={item.icon}
-                onPress={item.onPress}
-                size={compact ? 's' : 'm'}
-                testID={testID ? `${testID}-item-${item.id}` : undefined}
-                variant="ghost"
-              >
-                {item.label}
-              </Button>
-            ) : (
-              <BreadcrumbLabel item={item} compact={compact} />
-            )}
-            {showSeparator ? renderSeparator(separator) : null}
-          </React.Fragment>
-        );
-      })}
-    </Inline>
-  );
-}
-
-/***
- * Renders a breadcrumb trail for hierarchical navigation.
- */
-export const Breadcrumbs = withZoraThemeScope(BreadcrumbsInner);

package/src/components/breadcrumbs/index.ts

@@ -1,2 +0,0 @@
-export { Breadcrumbs } from './Breadcrumbs';
-export type { BreadcrumbItem, BreadcrumbsProps } from './types';

package/src/components/menu/DropdownMenu.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-
-import { Menu } from './Menu';
-import type { DropdownMenuProps } from './types';
-
-/***
- * Convenience wrapper for rendering a `Menu` as a dropdown.
- */
-export function DropdownMenu(props: DropdownMenuProps) {
-  return <Menu {...props} />;
-}

package/src/components/menu/Menu.tsx

@@ -1,59 +0,0 @@
-import { Menu as SurfaceMenu, type MenuAction as SurfaceMenuAction } from '@ankhorage/surface';
-import React, { useMemo } from 'react';
-
-import { Icon } from '../../features/icon/public';
-import { Box } from '../../features/layout/public';
-import { resolveIconSize } from '../../internal/recipes';
-import { useZoraTheme } from '../../theme/useZoraTheme';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { MenuAction, MenuProps } from './types';
-
-function renderActionLeading(action: MenuAction, iconColor: string) {
-  if (action.leading) {
-    return action.leading;
-  }
-
-  if (!action.icon) {
-    return undefined;
-  }
-
-  return <Icon {...action.icon} color={iconColor} size={resolveIconSize('s')} />;
-}
-
-function renderActionTrailing(action: MenuAction) {
-  if (!action.trailing) {
-    return undefined;
-  }
-
-  return <Box>{action.trailing}</Box>;
-}
-
-function toSurfaceAction(action: MenuAction, iconColor: string): SurfaceMenuAction {
-  return {
-    activate: action.onPress,
-    description: action.description,
-    disabled: action.disabled,
-    id: action.id,
-    intent: action.intent,
-    leading: renderActionLeading(action, iconColor),
-    selected: action.selected,
-    title: action.title,
-    trailing: renderActionTrailing(action),
-  };
-}
-
-function MenuInner({ themeId: _themeId, mode: _mode, actions, onDismiss, ...props }: MenuProps) {
-  const { theme } = useZoraTheme();
-  const iconColor = theme.semantics.content.muted;
-  const surfaceActions = useMemo(
-    () => actions.map((action) => toSurfaceAction(action, iconColor)),
-    [actions, iconColor],
-  );
-
-  return <SurfaceMenu {...props} actions={surfaceActions} dismiss={onDismiss} />;
-}
-
-/***
- * Presents a list of actions as a menu with optional icons and intent styling.
- */
-export const Menu = withZoraThemeScope(MenuInner);

package/src/components/menu/index.ts

@@ -1,3 +0,0 @@
-export { DropdownMenu } from './DropdownMenu';
-export { Menu } from './Menu';
-export type { DropdownMenuProps, MenuAction, MenuActionIntent, MenuProps } from './types';

package/src/components/menu/meta.ts

@@ -1,19 +0,0 @@
-import type { ZoraComponentMeta } from '../../metadata';
-
-export const menuMeta = {
-  name: 'Menu',
-  category: 'component',
-  directManifestNode: false,
-  allowedChildren: [],
-  note: 'Surface-backed action menu; not represented as a manifest node in v1.',
-  props: {},
-} as const satisfies ZoraComponentMeta;
-
-export const dropdownMenuMeta = {
-  name: 'DropdownMenu',
-  category: 'component',
-  directManifestNode: false,
-  allowedChildren: [],
-  note: 'Product-facing alias for Menu trigger/action composition; not represented as a manifest node in v1.',
-  props: {},
-} as const satisfies ZoraComponentMeta;

package/src/components/menu/types.ts

@@ -1,31 +0,0 @@
-import type {
-  ButtonIconSpec,
-  MenuActionIntent as SurfaceMenuActionIntent,
-  MenuProps as SurfaceMenuProps,
-} from '@ankhorage/surface';
-import type React from 'react';
-
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export type MenuActionIntent = SurfaceMenuActionIntent;
-
-export interface MenuAction {
-  id: string;
-  title: React.ReactNode;
-  description?: React.ReactNode;
-  icon?: ButtonIconSpec;
-  leading?: React.ReactNode;
-  trailing?: React.ReactNode;
-  intent?: MenuActionIntent;
-  disabled?: boolean;
-  selected?: boolean;
-  onPress?: () => void;
-}
-
-export interface MenuProps
-  extends ZoraBaseProps, Omit<SurfaceMenuProps, 'actions' | 'dismiss' | 'mode' | 'themeId'> {
-  actions: readonly MenuAction[];
-  onDismiss?: () => void;
-}
-
-export type DropdownMenuProps = MenuProps;

package/src/components/select/Select.tsx

@@ -1,67 +0,0 @@
-import { Picker } from '@react-native-picker/picker';
-import React from 'react';
-import { View } from 'react-native';
-
-import { Box } from '../../features/layout/public';
-import { useZoraTheme } from '../../theme/useZoraTheme';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { SelectProps } from './types';
-
-function SelectInner<TValue extends string = string>({
-  themeId: _themeId,
-  mode: _mode,
-  value,
-  options,
-  onValueChange,
-  disabled,
-  invalid,
-  testID,
-  interactionPolicy,
-}: SelectProps<TValue>) {
-  const { theme } = useZoraTheme();
-  const passive = interactionPolicy === 'passive';
-
-  return (
-    <Box
-      bg="surface"
-      borderColor={invalid ? theme.colors.error : theme.colors.border}
-      borderWidth={1}
-      opacity={disabled ? 0.5 : 1}
-      radius="m"
-      testID={testID}
-    >
-      <View style={{ pointerEvents: passive ? 'none' : 'auto' }}>
-        <Picker
-          enabled={!disabled}
-          onValueChange={(itemValue) => {
-            if (!passive) {
-              onValueChange(itemValue);
-            }
-          }}
-          selectedValue={value}
-          style={{
-            height: 44,
-            width: '100%',
-            backgroundColor: 'transparent',
-            color: theme.colors.text,
-            borderWidth: 0,
-          }}
-        >
-          {options.map((option) => (
-            <Picker.Item
-              key={option.value}
-              enabled={!option.disabled}
-              label={option.label}
-              value={option.value}
-            />
-          ))}
-        </Picker>
-      </View>
-    </Box>
-  );
-}
-
-/***
- * Select control for choosing a value from a list of options.
- */
-export const Select = withZoraThemeScope(SelectInner);

package/src/components/select/index.ts

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

package/src/components/select/meta.ts

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