@ankhorage/zora 0.6.0 → 0.6.2

package/src/components/text/resolveTextRecipe.ts

@@ -0,0 +1,169 @@
+import {
+  type AnkhTheme,
+  type Breakpoint,
+  type FontWeight,
+  resolveResponsive,
+  type Responsive,
+} from '@ankhorage/surface';
+import type { TextStyle } from 'react-native';
+
+import type { TextAlign, TextTone, TextVariant, TextWeight } from './types';
+
+interface VariantRecipe {
+  fontSize: number;
+  lineHeight: number;
+  weight: TextWeight;
+  textTransform?: TextStyle['textTransform'];
+  letterSpacing?: number;
+}
+
+interface ResolveTextStyleOptions {
+  theme: AnkhTheme;
+  breakpoint: Breakpoint;
+  variant?: Responsive<TextVariant>;
+  tone?: Responsive<TextTone>;
+  weight?: Responsive<TextWeight>;
+  align?: Responsive<TextAlign>;
+  italic?: boolean;
+}
+
+function isMediumBreakpointOrLarger(breakpoint: Breakpoint): boolean {
+  return breakpoint === 'md' || breakpoint === 'lg' || breakpoint === 'xl';
+}
+
+function resolveWeight(theme: AnkhTheme, weight: TextWeight): FontWeight {
+  return theme.typography.weights[weight];
+}
+
+function resolveFontFamily({
+  theme,
+  variant,
+  weight,
+  italic,
+}: {
+  theme: AnkhTheme;
+  variant: TextVariant;
+  weight: FontWeight;
+  italic: boolean;
+}): string | undefined {
+  if (variant === 'code') {
+    return 'monospace';
+  }
+
+  return theme.typography.fonts[italic ? 'italic' : 'normal'][weight];
+}
+
+function resolveVariantRecipe(
+  theme: AnkhTheme,
+  variant: TextVariant,
+  breakpoint: Breakpoint,
+): VariantRecipe {
+  switch (variant) {
+    case 'lead':
+      return {
+        fontSize: isMediumBreakpointOrLarger(breakpoint)
+          ? theme.typography.sizes.l
+          : theme.typography.sizes.m,
+        lineHeight: isMediumBreakpointOrLarger(breakpoint) ? 28 : 24,
+        weight: 'regular',
+      };
+    case 'bodySmall':
+      return {
+        fontSize: theme.typography.sizes.s,
+        lineHeight: 20,
+        weight: 'regular',
+      };
+    case 'caption':
+      return {
+        fontSize: theme.typography.sizes.xs,
+        lineHeight: 16,
+        weight: 'regular',
+      };
+    case 'label':
+      return {
+        fontSize: theme.typography.sizes.s,
+        lineHeight: 18,
+        weight: 'medium',
+      };
+    case 'eyebrow':
+      return {
+        fontSize: theme.typography.sizes.xs,
+        lineHeight: 16,
+        weight: 'semiBold',
+        textTransform: 'uppercase',
+        letterSpacing: 0.8,
+      };
+    case 'code':
+      return {
+        fontSize: theme.typography.sizes.s,
+        lineHeight: 20,
+        weight: 'regular',
+      };
+    case 'body':
+    default:
+      return {
+        fontSize: theme.typography.sizes.m,
+        lineHeight: 24,
+        weight: 'regular',
+      };
+  }
+}
+
+function resolveToneColor(theme: AnkhTheme, tone: TextTone): string {
+  switch (tone) {
+    case 'muted':
+      return theme.semantics.content.muted;
+    case 'subtle':
+      return theme.semantics.content.subtle;
+    case 'inverse':
+      return theme.semantics.content.inverse;
+    case 'primary':
+      return theme.semantics.brand.base;
+    case 'danger':
+      return theme.semantics.danger.base;
+    case 'success':
+      return theme.semantics.success.base;
+    case 'warning':
+      return theme.semantics.warning.base;
+    case 'default':
+    default:
+      return theme.semantics.content.default;
+  }
+}
+
+export function resolveTextStyle({
+  theme,
+  breakpoint,
+  variant,
+  tone,
+  weight,
+  align,
+  italic = false,
+}: ResolveTextStyleOptions): TextStyle {
+  const resolvedVariant = resolveResponsive(variant, breakpoint) ?? 'body';
+  const resolvedTone = resolveResponsive(tone, breakpoint) ?? 'default';
+  const resolvedAlign = resolveResponsive(align, breakpoint);
+  const recipe = resolveVariantRecipe(theme, resolvedVariant, breakpoint);
+  const resolvedWeight = resolveWeight(
+    theme,
+    resolveResponsive(weight, breakpoint) ?? recipe.weight,
+  );
+
+  return {
+    color: resolveToneColor(theme, resolvedTone),
+    elevation: 0,
+    fontFamily: resolveFontFamily({
+      theme,
+      variant: resolvedVariant,
+      weight: resolvedWeight,
+      italic,
+    }),
+    fontSize: recipe.fontSize,
+    fontStyle: italic ? 'italic' : 'normal',
+    fontWeight: resolvedWeight,
+    letterSpacing: recipe.letterSpacing,
+    lineHeight: recipe.lineHeight,
+    textAlign: resolvedAlign,
+    textTransform: recipe.textTransform,
+  };
+}

package/src/components/text/types.ts

@@ -0,0 +1,38 @@
+import type { Responsive } from '@ankhorage/surface';
+import type React from 'react';
+import type { AccessibilityRole, TextStyle } from 'react-native';
+
+export type TextVariant = 'body' | 'lead' | 'bodySmall' | 'caption' | 'label' | 'eyebrow' | 'code';
+
+export type TextTone =
+  | 'default'
+  | 'muted'
+  | 'subtle'
+  | 'inverse'
+  | 'primary'
+  | 'danger'
+  | 'success'
+  | 'warning';
+
+export type TextWeight = 'regular' | 'medium' | 'semiBold' | 'bold';
+
+export type TextAlign = NonNullable<TextStyle['textAlign']>;
+
+export interface TextProps {
+  children?: React.ReactNode;
+  text?: string;
+  i18nKey?: string;
+  variant?: Responsive<TextVariant>;
+  tone?: Responsive<TextTone>;
+  align?: Responsive<TextAlign>;
+  weight?: Responsive<TextWeight>;
+  italic?: boolean;
+  numberOfLines?: number;
+  ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
+  selectable?: boolean;
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+  accessibilityRole?: AccessibilityRole;
+  nativeID?: string;
+  testID?: string;
+}

package/src/components/textarea/Textarea.tsx

@@ -1,20 +1,20 @@
-import { Icon, Textarea as SurfaceTextarea, useTheme } from '@ankhorage/surface';
+import * as Surface from '@ankhorage/surface';
 import React from 'react';
 
 import { resolveIconSize } from '../../internal/recipes';
 import type { TextareaProps } from './types';
 
 export function Textarea({ size = 'l', leadingIcon, trailingIcon, ...props }: TextareaProps) {
-  const { theme } = useTheme();
+  const { theme } = Surface.useTheme();
   const iconSize = resolveIconSize(size);
   const iconColor = theme.semantics.content.muted;
 
   return (
-    <SurfaceTextarea
+    <Surface.Textarea
       {...props}
       leadingAccessory={
         leadingIcon ? (
-          <Icon
+          <Surface.Icon
             color={iconColor}
             name={leadingIcon.name}
             provider={leadingIcon.provider}
@@ -25,7 +25,7 @@ export function Textarea({ size = 'l', leadingIcon, trailingIcon, ...props }: Te
       size={size}
       trailingAccessory={
         trailingIcon ? (
-          <Icon
+          <Surface.Icon
             color={iconColor}
             name={trailingIcon.name}
             provider={trailingIcon.provider}

package/src/components/textarea/types.ts

@@ -1,12 +1,12 @@
-import type { ButtonIconSpec, TextareaProps as SurfaceTextareaProps } from '@ankhorage/surface';
+import type * as Surface from '@ankhorage/surface';
 
 import type { ZoraControlSize } from '../../internal/recipes';
 
 export interface TextareaProps extends Omit<
-  SurfaceTextareaProps,
+  Surface.TextareaProps,
   'leadingAccessory' | 'size' | 'trailingAccessory'
 > {
   size?: ZoraControlSize;
-  leadingIcon?: ButtonIconSpec;
-  trailingIcon?: ButtonIconSpec;
+  leadingIcon?: Surface.ButtonIconSpec;
+  trailingIcon?: Surface.ButtonIconSpec;
 }

package/src/index.ts

@@ -51,6 +51,8 @@ export type { SelectOption, SelectProps } from './components/select';
 export { Select } from './components/select';
 export type { TabItem, TabsProps } from './components/tabs';
 export { Tabs } from './components/tabs';
+export type { TextAlign, TextProps, TextTone, TextVariant, TextWeight } from './components/text';
+export { Text } from './components/text';
 export type { TextareaProps } from './components/textarea';
 export { Textarea } from './components/textarea';
 export type { ToolbarActionProps, ToolbarProps } from './components/toolbar';

package/src/layout/page-header/PageHeader.tsx

@@ -1,6 +1,7 @@
-import { Box, Heading, Stack, Text } from '@ankhorage/surface';
+import { Box, Heading, Stack } from '@ankhorage/surface';
 import React from 'react';
 
+import { Text } from '../../components/text';
 import type { PageHeaderProps } from './types';
 
 export function PageHeader({

package/src/patterns/collection-editor/CollectionEditor.tsx

@@ -1,8 +1,9 @@
-import { Box, Stack, Text } from '@ankhorage/surface';
+import { Box, Stack } from '@ankhorage/surface';
 import React from 'react';
 
 import { Button } from '../../components/button';
 import { IconButton } from '../../components/icon-button';
+import { Text } from '../../components/text';
 import { Panel } from '../panel';
 import type { CollectionEditorProps } from './types';
 

package/src/patterns/form-field/FormField.tsx

@@ -1,6 +1,7 @@
-import { Field, Stack, Text } from '@ankhorage/surface';
+import { Field, Stack } from '@ankhorage/surface';
 import React from 'react';
 
+import { Text } from '../../components/text';
 import type { FormFieldProps } from './types';
 
 export function FormField({ label, description, helperText, children, ...props }: FormFieldProps) {

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

@@ -1,2 +1 @@
 export { FormField } from './FormField';
-export type { FormFieldProps } from './types';

package/src/patterns/section-header/SectionHeader.tsx

@@ -1,6 +1,7 @@
-import { Box, Heading, Stack, Text } from '@ankhorage/surface';
+import { Box, Heading, Stack } from '@ankhorage/surface';
 import React from 'react';
 
+import { Text } from '../../components/text';
 import type { SectionHeaderProps } from './types';
 
 export function SectionHeader({

package/src/patterns/settings-row/SettingsRow.tsx

@@ -1,7 +1,8 @@
-import { Box, Text } from '@ankhorage/surface';
+import { Box } from '@ankhorage/surface';
 import React from 'react';
 
 import { Card } from '../../components/card';
+import { Text } from '../../components/text';
 import type { SettingsRowProps } from './types';
 
 export function SettingsRow({

package/src/patterns/tile-grid/PaletteItem.tsx

@@ -1,7 +1,8 @@
-import { Box, Heading, Text, useTheme } from '@ankhorage/surface';
+import { Box, Heading, useTheme } from '@ankhorage/surface';
 import React from 'react';
 
 import { Card } from '../../components/card';
+import { Text } from '../../components/text';
 import type { PaletteItemProps } from './types';
 
 export function PaletteItem({