@ankhorage/zora 18.0.1 → 19.0.1

package/src/patterns/confirm-dialog/ConfirmDialog.tsx

@@ -1,69 +0,0 @@
-import React from 'react';
-
-import { Button } from '../../features/button/public';
-import { Dialog } from '../../features/dialog/public';
-import { View } from '../../features/layout/public';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { ConfirmDialogProps } from './types';
-
-function ConfirmDialogInner({
-  themeId: _themeId,
-  mode: _mode,
-  visible,
-  title,
-  description,
-  children,
-  confirmLabel = 'Confirm',
-  cancelLabel = 'Cancel',
-  confirmColor = 'danger',
-  confirmVariant = 'solid',
-  busy = false,
-  closeOnBackdrop = true,
-  onConfirm,
-  onCancel,
-  testID,
-  interactionPolicy,
-}: ConfirmDialogProps) {
-  return (
-    <Dialog
-      closeOnBackdrop={closeOnBackdrop}
-      description={description}
-      interactionPolicy={interactionPolicy}
-      footer={
-        <View direction={{ base: 'column', md: 'row' }} gap="s" justify="flex-end">
-          <Button
-            variant="soft"
-            interactionPolicy={interactionPolicy}
-            onPress={onCancel}
-            color="neutral"
-          >
-            {cancelLabel}
-          </Button>
-          <Button
-            variant={confirmVariant}
-            loading={busy}
-            interactionPolicy={interactionPolicy}
-            onPress={onConfirm}
-            color={confirmColor}
-          >
-            {confirmLabel}
-          </Button>
-        </View>
-      }
-      onDismiss={onCancel}
-      testID={testID}
-      title={title}
-      visible={visible}
-      width="narrow"
-    >
-      {children}
-    </Dialog>
-  );
-}
-
-/***
- * Confirmation dialog pattern with cancel/confirm actions.
- *
- 
- */
-export const ConfirmDialog = withZoraThemeScope(ConfirmDialogInner);

package/src/patterns/confirm-dialog/index.ts

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

package/src/patterns/confirm-dialog/meta.ts

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

package/src/patterns/confirm-dialog/types.ts

@@ -1,19 +0,0 @@
-import type React from 'react';
-
-import type { ZoraButtonVariant, ZoraColor } from '../../internal/recipes';
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export interface ConfirmDialogProps extends ZoraBaseProps {
-  visible: boolean;
-  title: React.ReactNode;
-  description?: React.ReactNode;
-  children?: React.ReactNode;
-  confirmLabel?: React.ReactNode;
-  cancelLabel?: React.ReactNode;
-  confirmColor?: ZoraColor;
-  confirmVariant?: ZoraButtonVariant;
-  busy?: boolean;
-  closeOnBackdrop?: boolean;
-  onConfirm?: () => void;
-  onCancel?: () => void;
-}

package/src/patterns/filter-bar/FilterBar.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-
-import { View } from '../../features/layout/public';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { FilterBarProps } from './types';
-
-function FilterBarInner({
-  themeId: _themeId,
-  mode: _mode,
-  interactionPolicy: _interactionPolicy,
-  testID,
-  leading,
-  trailing,
-  children,
-  wrap = true,
-}: FilterBarProps) {
-  return (
-    <View direction="row" align="center" gap="s" testID={testID} wrap={wrap ? 'wrap' : 'nowrap'}>
-      {leading ? <View>{leading}</View> : null}
-      <View flex={1}>{children}</View>
-      {trailing ? <View>{trailing}</View> : null}
-    </View>
-  );
-}
-
-/***
- * Horizontal filter/action bar layout with leading/trailing slots.
- *
- 
- */
-export const FilterBar = withZoraThemeScope(FilterBarInner);

package/src/patterns/filter-bar/index.ts

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

package/src/patterns/filter-bar/meta.ts

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

package/src/patterns/filter-bar/types.ts

@@ -1,10 +0,0 @@
-import type React from 'react';
-
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export interface FilterBarProps extends ZoraBaseProps {
-  leading?: React.ReactNode;
-  trailing?: React.ReactNode;
-  children: React.ReactNode;
-  wrap?: boolean;
-}

package/src/patterns/inspector-field/InspectorField.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-
-import { Field } from '../../features/form/public';
-import { View } from '../../features/layout/public';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { InspectorFieldProps } from './types';
-
-function InspectorFieldInner({
-  themeId: _themeId,
-  mode: _mode,
-  label,
-  control,
-  children,
-  interactionPolicy: _interactionPolicy,
-  ...props
-}: InspectorFieldProps) {
-  return (
-    <Field {...props} label={label}>
-      <View direction="row" gap="s" align="center">
-        <View flex={1}>{children}</View>
-        {control ? <View>{control}</View> : null}
-      </View>
-    </Field>
-  );
-}
-
-/***
- * Inspector row pattern with label, description, and control slot.
- *
- 
- */
-export const InspectorField = withZoraThemeScope(InspectorFieldInner);

package/src/patterns/inspector-field/index.ts

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

package/src/patterns/inspector-field/meta.ts

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

package/src/patterns/inspector-field/types.ts

@@ -1,16 +0,0 @@
-import type { ReactNode } from 'react';
-
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export interface InspectorFieldProps extends ZoraBaseProps {
-  label: ReactNode;
-  description?: ReactNode;
-  helperText?: ReactNode;
-  errorText?: ReactNode;
-  required?: boolean;
-  invalid?: boolean;
-  disabled?: boolean;
-  readOnly?: boolean;
-  control?: ReactNode;
-  children?: ReactNode;
-}

package/src/patterns/message-bubble/MessageBubble.tsx

@@ -1,276 +0,0 @@
-import { Pressable } from '@ankhorage/surface';
-import React from 'react';
-
-import { Avatar } from '../../features/avatar/public';
-import { View } from '../../features/layout/public';
-import { Text } from '../../features/typography/public';
-import { useZoraTheme } from '../../theme/useZoraTheme';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type {
-  MessageBubbleAvatar,
-  MessageBubbleDirection,
-  MessageBubbleProps,
-  MessageBubbleStatus,
-} from './types';
-
-function resolveAvatarName({
-  avatar,
-  authorName,
-}: {
-  avatar: MessageBubbleAvatar | undefined;
-  authorName: React.ReactNode | undefined;
-}): string | undefined {
-  if (avatar?.name) return avatar.name;
-  return typeof authorName === 'string' ? authorName : undefined;
-}
-
-function resolvePadding(compact: boolean) {
-  return compact ? { px: 'm' as const, py: 's' as const } : { px: 'm' as const, py: 'm' as const };
-}
-
-function resolveStatusLabel(status: MessageBubbleStatus): string {
-  switch (status) {
-    case 'sending':
-      return 'Sending';
-    case 'sent':
-      return 'Sent';
-    case 'delivered':
-      return 'Delivered';
-    case 'read':
-      return 'Read';
-    case 'failed':
-      return 'Failed';
-    default:
-      return status;
-  }
-}
-
-function isMessageBubbleStatus(
-  status: MessageBubbleProps['status'],
-): status is MessageBubbleStatus {
-  return (
-    status === 'sending' ||
-    status === 'sent' ||
-    status === 'delivered' ||
-    status === 'read' ||
-    status === 'failed'
-  );
-}
-
-function resolveStatus(status: MessageBubbleProps['status']) {
-  if (status == null) return null;
-  return isMessageBubbleStatus(status) ? resolveStatusLabel(status) : status;
-}
-
-function resolveBubbleStyles({
-  direction,
-  disabled,
-  hovered,
-  pressed,
-  selected,
-  theme,
-}: {
-  direction: MessageBubbleDirection;
-  disabled: boolean;
-  hovered: boolean;
-  pressed: boolean;
-  selected: boolean;
-  theme: ReturnType<typeof useZoraTheme>['theme'];
-}) {
-  const borderColor = selected ? theme.semantics.border.focus : theme.semantics.border.default;
-
-  if (direction === 'system') {
-    return {
-      bg: selected ? theme.semantics.neutral.surface : 'transparent',
-      borderColor,
-      borderWidth: selected ? 1 : 0,
-      opacity: disabled ? 0.72 : 1,
-    };
-  }
-
-  const interactiveBg = pressed
-    ? theme.semantics.neutral.surfaceActive
-    : hovered
-      ? theme.semantics.neutral.surfaceHover
-      : undefined;
-
-  return {
-    bg:
-      interactiveBg ??
-      (direction === 'outgoing' ? theme.semantics.neutral.surface : theme.semantics.surface.raised),
-    borderColor,
-    borderWidth: selected ? 1 : 0,
-    opacity: disabled ? 0.72 : 1,
-  };
-}
-
-function MessageAvatar({
-  avatar,
-  authorName,
-  compact,
-}: {
-  avatar: MessageBubbleAvatar;
-  authorName: React.ReactNode | undefined;
-  compact: boolean;
-}) {
-  const avatarName = resolveAvatarName({ avatar, authorName });
-
-  return (
-    <Avatar
-      initials={avatar.initials}
-      label={avatar.label ?? avatarName}
-      name={avatarName}
-      shape={avatar.shape}
-      size={avatar.size ?? (compact ? 'xs' : 's')}
-      source={avatar.source}
-      color={avatar.color}
-    />
-  );
-}
-
-function MessageBubbleInner({
-  themeId: _themeId,
-  mode: _mode,
-  interactionPolicy,
-  testID,
-  direction = 'incoming',
-  text,
-  children,
-  author,
-  timestamp,
-  meta,
-  status,
-  leading,
-  trailing,
-  footer,
-  selected = false,
-  disabled = false,
-  compact = false,
-  accessibilityLabel,
-  onPress,
-}: MessageBubbleProps) {
-  const { theme } = useZoraTheme();
-  const padding = resolvePadding(compact);
-  const isInteractive = Boolean(onPress);
-  const isOutgoing = direction === 'outgoing';
-  const isSystem = direction === 'system';
-  const renderedStatus = resolveStatus(status);
-  const authorName = author?.name;
-  const authorAvatar = author?.avatar;
-  const hasAuthorName = authorName != null && !isOutgoing && !isSystem;
-  const hasAvatar = authorAvatar != null && !isOutgoing && !isSystem;
-  const hasMetaRow = timestamp != null || meta != null || renderedStatus != null;
-
-  const renderBubble = ({ pressed, hovered }: { pressed: boolean; hovered: boolean }) => {
-    const styles = resolveBubbleStyles({ direction, disabled, hovered, pressed, selected, theme });
-
-    return (
-      <View
-        bg={styles.bg}
-        borderColor={styles.borderColor}
-        borderWidth={styles.borderWidth}
-        px={padding.px}
-        py={padding.py}
-        radius={isSystem ? 'm' : 'l'}
-        style={{ maxWidth: compact ? 420 : 560, opacity: styles.opacity }}
-      >
-        <View align={isSystem ? 'center' : 'flex-start'} gap={compact ? 'xxs' : 'xs'}>
-          {hasAuthorName ? (
-            <Text emphasis="muted" variant="caption" weight="semiBold">
-              {authorName}
-            </Text>
-          ) : null}
-          {text != null ? (
-            <Text align={isSystem ? 'center' : undefined} emphasis={disabled ? 'muted' : 'default'}>
-              {text}
-            </Text>
-          ) : null}
-          {children != null ? <View width="100%">{children}</View> : null}
-          {hasMetaRow ? (
-            <View
-              direction="row"
-              align="center"
-              gap="xs"
-              justify={isOutgoing ? 'flex-end' : isSystem ? 'center' : 'flex-start'}
-              wrap="wrap"
-            >
-              {timestamp != null ? (
-                <Text emphasis="subtle" variant="caption">
-                  {timestamp}
-                </Text>
-              ) : null}
-              {meta != null ? (
-                <Text emphasis="subtle" variant="caption">
-                  {meta}
-                </Text>
-              ) : null}
-              {renderedStatus != null ? (
-                <Text
-                  color={status === 'failed' ? 'danger' : undefined}
-                  emphasis={status === 'failed' ? 'default' : 'subtle'}
-                  variant="caption"
-                >
-                  {renderedStatus}
-                </Text>
-              ) : null}
-            </View>
-          ) : null}
-        </View>
-      </View>
-    );
-  };
-
-  const bubbleContent = isInteractive ? (
-    <Pressable
-      accessibilityLabel={accessibilityLabel}
-      accessibilityRole="button"
-      accessibilityState={{ disabled, selected }}
-      disabled={disabled}
-      interactionPolicy={interactionPolicy}
-      onPress={onPress}
-      radius={isSystem ? 'm' : 'l'}
-      testID={testID}
-    >
-      {(state) => renderBubble({ pressed: state.pressed, hovered: state.hovered })}
-    </Pressable>
-  ) : (
-    <View testID={testID}>{renderBubble({ pressed: false, hovered: false })}</View>
-  );
-
-  return (
-    <View gap="xs" style={{ width: '100%' }}>
-      <View
-        direction="row"
-        align="flex-end"
-        gap="s"
-        justify={isSystem ? 'center' : isOutgoing ? 'flex-end' : 'flex-start'}
-        wrap="nowrap"
-      >
-        {!isOutgoing && !isSystem ? (
-          <View>
-            {leading ??
-              (hasAvatar ? (
-                <MessageAvatar avatar={authorAvatar} authorName={authorName} compact={compact} />
-              ) : null)}
-          </View>
-        ) : null}
-        {isOutgoing && trailing ? <View>{trailing}</View> : null}
-        {bubbleContent}
-        {isOutgoing && leading ? <View>{leading}</View> : null}
-        {!isOutgoing && !isSystem && trailing ? <View>{trailing}</View> : null}
-      </View>
-      {footer != null ? (
-        <View alignSelf={isOutgoing ? 'flex-end' : isSystem ? 'center' : 'flex-start'}>
-          {footer}
-        </View>
-      ) : null}
-    </View>
-  );
-}
-
-/***
- * Message bubble pattern for chat UIs with direction and status styling.
- *
- 
- */
-export const MessageBubble = withZoraThemeScope(MessageBubbleInner);

package/src/patterns/message-bubble/index.ts

@@ -1,8 +0,0 @@
-export { MessageBubble } from './MessageBubble';
-export type {
-  MessageBubbleAuthor,
-  MessageBubbleAvatar,
-  MessageBubbleDirection,
-  MessageBubbleProps,
-  MessageBubbleStatus,
-} from './types';

package/src/patterns/message-bubble/meta.ts

@@ -1,68 +0,0 @@
-import type { ZoraComponentMeta } from '../../metadata';
-import { CONTAINER_ALLOWED_CHILDREN } from '../../metadata/allowedChildren';
-
-export const messageBubbleMeta = {
-  name: 'MessageBubble',
-  category: 'pattern',
-  description:
-    'Chat/message bubble with direction, author, text, meta, and delivery status presentation.',
-  directManifestNode: true,
-  allowedChildren: [...CONTAINER_ALLOWED_CHILDREN],
-  blueprint: {
-    label: 'Message bubble',
-    icon: { name: 'chatbubble-outline' },
-    defaultProps: {
-      direction: 'incoming',
-      text: 'Can you review the latest message pattern?',
-      timestamp: '10:41',
-    },
-  },
-  props: {
-    direction: {
-      type: 'enum',
-      category: 'Content',
-      label: 'Direction',
-      enum: ['incoming', 'outgoing', 'system'],
-      default: 'incoming',
-    },
-    text: {
-      type: 'string',
-      category: 'Content',
-      label: 'Text',
-    },
-    timestamp: {
-      type: 'string',
-      category: 'Content',
-      label: 'Timestamp',
-    },
-    meta: {
-      type: 'string',
-      category: 'Content',
-      label: 'Meta',
-    },
-    status: {
-      type: 'enum',
-      category: 'Content',
-      label: 'Status',
-      enum: ['sending', 'sent', 'delivered', 'read', 'failed'],
-    },
-    selected: {
-      type: 'boolean',
-      category: 'State',
-      label: 'Selected',
-      default: false,
-    },
-    disabled: {
-      type: 'boolean',
-      category: 'State',
-      label: 'Disabled',
-      default: false,
-    },
-    compact: {
-      type: 'boolean',
-      category: 'Layout',
-      label: 'Compact',
-      default: false,
-    },
-  },
-} as const satisfies ZoraComponentMeta;

package/src/patterns/message-bubble/types.ts

@@ -1,43 +0,0 @@
-import type React from 'react';
-import type { ImageSourcePropType } from 'react-native';
-
-import type { AvatarShape, AvatarSize } from '../../features/avatar/public';
-import type { ZoraColor } from '../../internal/recipes';
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export type MessageBubbleDirection = 'incoming' | 'outgoing' | 'system';
-export type MessageBubbleStatus = 'sending' | 'sent' | 'delivered' | 'read' | 'failed';
-type MessageBubbleStatusContent = MessageBubbleStatus | Exclude<React.ReactNode, string>;
-
-export interface MessageBubbleAvatar {
-  source?: ImageSourcePropType;
-  name?: string;
-  initials?: string;
-  label?: string;
-  size?: AvatarSize;
-  shape?: AvatarShape;
-  color?: ZoraColor;
-}
-
-export interface MessageBubbleAuthor {
-  name?: React.ReactNode;
-  avatar?: MessageBubbleAvatar;
-}
-
-export interface MessageBubbleProps extends ZoraBaseProps {
-  direction?: MessageBubbleDirection;
-  text?: React.ReactNode;
-  children?: React.ReactNode;
-  author?: MessageBubbleAuthor;
-  timestamp?: React.ReactNode;
-  meta?: React.ReactNode;
-  status?: MessageBubbleStatusContent;
-  leading?: React.ReactNode;
-  trailing?: React.ReactNode;
-  footer?: React.ReactNode;
-  selected?: boolean;
-  disabled?: boolean;
-  compact?: boolean;
-  accessibilityLabel?: string;
-  onPress?: () => void;
-}

package/src/patterns/notice/Notice.tsx

@@ -1,41 +0,0 @@
-import React from 'react';
-
-import { Badge } from '../../features/badge/public';
-import { Card } from '../../features/card/public';
-import { View } from '../../features/layout/public';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { NoticeProps } from './types';
-
-function NoticeInner({
-  themeId: _themeId,
-  mode: _mode,
-  interactionPolicy: _interactionPolicy,
-  title,
-  description,
-  children,
-  actions,
-  color = 'primary',
-  testID,
-}: NoticeProps) {
-  return (
-    <Card
-      description={description}
-      eyebrow={<Badge color={color}>{String(color).toUpperCase()}</Badge>}
-      testID={testID}
-      title={title}
-      tone="subtle"
-    >
-      <View gap="m">
-        {children ? <View>{children}</View> : null}
-        {actions ? <View>{actions}</View> : null}
-      </View>
-    </Card>
-  );
-}
-
-/***
- * Notice pattern for inline feedback with tone, title, and actions.
- *
- 
- */
-export const Notice = withZoraThemeScope(NoticeInner);

package/src/patterns/notice/index.ts

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