react-native-terra-ui 0.1.0

package/src/components/button/Button.tsx

@@ -0,0 +1,313 @@
+import {
+  Children,
+  type ComponentRef,
+  createContext,
+  forwardRef,
+  type ReactNode,
+  useContext,
+} from 'react';
+import type { PressableProps } from 'react-native';
+import { Pressable } from 'react-native';
+
+import { StyleSheet, useUnistyles } from 'react-native-unistyles';
+
+import { getDefaultRadius } from '#theme/configure';
+import type {
+  ColorToken,
+  FontWeightToken,
+  TerraIconName,
+  TerraTheme,
+  TextVariant,
+} from '#theme/types';
+
+import { Icon } from '../icon';
+import { Spinner } from '../spinner';
+import { Text } from '../text';
+
+export type ButtonVariant =
+  | 'primary'
+  | 'secondary'
+  | 'neutral'
+  | 'outline'
+  | 'ghost'
+  | 'danger';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+export type ButtonRadius = 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+
+export interface ButtonProps
+  extends Omit<PressableProps, 'style' | 'children' | 'disabled'> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  radius?: ButtonRadius;
+  isDisabled?: boolean;
+  isLoading?: boolean;
+  /** Square (1:1) button — pass a single icon as children. */
+  isIconOnly?: boolean;
+  /**
+   * Stretch to the parent width in column layouts. Defaults to `true`.
+   * Icon-only buttons always stay square regardless of this prop.
+   */
+  fullWidth?: boolean;
+  /** Remove the button's built-in horizontal padding. */
+  compact?: boolean;
+  children?: ReactNode;
+}
+
+// ─── Context (lets icons/labels read the resolved foreground + size) ───────────
+
+interface ButtonContextValue {
+  color: string;
+  size: ButtonSize;
+}
+
+const ButtonContext = createContext<ButtonContextValue>({
+  color: '',
+  size: 'md',
+});
+
+export const useButtonContext = (): ButtonContextValue =>
+  useContext(ButtonContext);
+
+// ─── Colors per variant ───────────────────────────────────────────────────────
+
+interface ButtonColors {
+  bg: string;
+  border: string;
+  borderWidth: number;
+  fg: string;
+}
+
+function getColors(variant: ButtonVariant, theme: TerraTheme): ButtonColors {
+  const c = theme.color as unknown as Record<string, string | undefined>;
+  const get = (key: string): string => c[key] ?? '';
+  switch (variant) {
+    case 'primary':
+      return {
+        bg: get('action.bg.primary'),
+        border: get('action.bg.primary'),
+        borderWidth: 0,
+        fg: get('action.fg.primary'),
+      };
+    case 'secondary':
+      return {
+        bg: get('action.bg.subtle'),
+        border: get('action.bg.subtle'),
+        borderWidth: 0,
+        fg: get('action.fg.subtle'),
+      };
+    case 'neutral':
+      return {
+        bg: get('action.bg.neutral.hover'),
+        border: get('action.bg.neutral.hover'),
+        borderWidth: 0,
+        fg: get('action.fg.neutral'),
+      };
+    case 'outline':
+      return {
+        bg: 'transparent',
+        border: get('border.default'),
+        borderWidth: 1,
+        fg: get('text.default'),
+      };
+    case 'ghost':
+      return {
+        bg: 'transparent',
+        border: 'transparent',
+        borderWidth: 0,
+        fg: get('text.default'),
+      };
+    case 'danger':
+      return {
+        bg: get('status.bg.danger'),
+        border: get('status.bg.danger'),
+        borderWidth: 0,
+        fg: get('status.fg.danger'),
+      };
+  }
+}
+
+// ─── Label sub-component ───────────────────────────────────────────────────────
+
+const LABEL_TYPOGRAPHY: Record<
+  ButtonSize,
+  {
+    variant: TextVariant;
+    weight?: FontWeightToken;
+  }
+> = {
+  sm: { variant: 'label-md', weight: 'semibold' },
+  md: { variant: 'label-lg', weight: 'semibold' },
+  lg: { variant: 'label-lg', weight: 'bold' },
+};
+
+const ButtonLabel = ({ children }: { children: ReactNode }) => {
+  const { color, size } = useButtonContext();
+  const typography = LABEL_TYPOGRAPHY[size];
+  return (
+    <Text
+      variant={typography.variant}
+      weight={typography.weight}
+      style={{ color }}
+    >
+      {children}
+    </Text>
+  );
+};
+
+// ─── Icon sub-component ────────────────────────────────────────────────────────
+
+const ICON_SIZE: Record<ButtonSize, number> = {
+  sm: 16,
+  md: 18,
+  lg: 20,
+};
+
+export interface ButtonIconProps {
+  name: TerraIconName;
+  size?: number;
+  color?: ColorToken;
+  strokeWidth?: number;
+}
+
+const ButtonIcon = ({
+  name,
+  size: sizeProp,
+  color: colorProp,
+  strokeWidth,
+}: ButtonIconProps) => {
+  const { color, size } = useButtonContext();
+
+  return (
+    <Icon
+      color={colorProp ?? color}
+      name={name}
+      size={sizeProp ?? ICON_SIZE[size]}
+      strokeWidth={strokeWidth}
+    />
+  );
+};
+
+function renderChildren(children: ReactNode): ReactNode {
+  return Children.map(children, (child) => {
+    if (typeof child === 'string') {
+      return child.trim().length > 0 ? (
+        <ButtonLabel>{child}</ButtonLabel>
+      ) : null;
+    }
+    if (typeof child === 'number') {
+      return <ButtonLabel>{child}</ButtonLabel>;
+    }
+    return child;
+  });
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+const ButtonRoot = forwardRef<ComponentRef<typeof Pressable>, ButtonProps>(
+  function Button(
+    {
+      variant = 'primary',
+      size = 'md',
+      radius = getDefaultRadius('button'),
+      isDisabled = false,
+      isLoading = false,
+      isIconOnly = false,
+      fullWidth = true,
+      compact = false,
+      children,
+      onPress,
+      ...rest
+    },
+    ref
+  ) {
+    const { theme } = useUnistyles();
+    styles.useVariants({
+      size,
+      radius,
+      fullWidth: fullWidth && !isIconOnly,
+      iconOnly: isIconOnly,
+    });
+
+    const { bg, border, borderWidth, fg } = getColors(variant, theme);
+    const blocked = isDisabled || isLoading;
+    const { style: externalStyle, ...pressableRest } = rest as typeof rest & {
+      style?: PressableProps['style'];
+    };
+
+    return (
+      <ButtonContext.Provider value={{ color: fg, size }}>
+        <Pressable
+          ref={ref}
+          onPress={blocked ? undefined : onPress}
+          disabled={blocked}
+          accessibilityRole="button"
+          accessibilityState={{ disabled: blocked, busy: isLoading }}
+          {...pressableRest}
+          style={(state) => [
+            styles.base,
+            { backgroundColor: bg, borderColor: border, borderWidth },
+            compact ? styles.compact : null,
+            state.pressed && !blocked
+              ? { opacity: theme.opacity.pressed }
+              : null,
+            isDisabled ? { opacity: theme.opacity.disabled } : null,
+            typeof externalStyle === 'function'
+              ? externalStyle(state)
+              : externalStyle,
+          ]}
+        >
+          {isLoading && <Spinner size="sm" color={fg} />}
+          {renderChildren(children)}
+        </Pressable>
+      </ButtonContext.Provider>
+    );
+  }
+);
+
+type ButtonComponent = typeof ButtonRoot & {
+  Icon: typeof ButtonIcon;
+  Label: typeof ButtonLabel;
+};
+
+export const Button = ButtonRoot as ButtonComponent;
+Button.Icon = ButtonIcon;
+Button.Label = ButtonLabel;
+
+// ─── Styles ───────────────────────────────────────────────────────────────────
+
+const styles = StyleSheet.create((theme) => ({
+  base: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    alignSelf: 'flex-start',
+    variants: {
+      size: {
+        sm: { minHeight: 36, paddingHorizontal: 14, gap: 6 },
+        md: { minHeight: 44, paddingHorizontal: 16, gap: 8 },
+        lg: { minHeight: 52, paddingHorizontal: 20, gap: 8 },
+      },
+      radius: {
+        none: { borderRadius: theme.radius.none },
+        sm: { borderRadius: theme.radius.sm },
+        md: { borderRadius: theme.radius.md },
+        lg: { borderRadius: theme.radius.lg },
+        xl: { borderRadius: theme.radius.xl },
+        full: { borderRadius: theme.radius.full },
+      },
+      fullWidth: {
+        true: { alignSelf: 'stretch' },
+        false: {},
+      },
+      iconOnly: {
+        true: { paddingHorizontal: 0, aspectRatio: 1 },
+        false: {},
+      },
+    },
+  },
+  compact: {
+    paddingHorizontal: 2,
+    paddingVertical: 2,
+    minHeight: 0,
+  },
+}));

package/src/components/button/index.ts

@@ -0,0 +1,8 @@
+export type {
+  ButtonIconProps,
+  ButtonProps,
+  ButtonRadius,
+  ButtonSize,
+  ButtonVariant,
+} from './Button';
+export { Button, useButtonContext } from './Button';

package/src/components/header/Header.ts

@@ -0,0 +1,22 @@
+import { LargeTitleHeader } from './variants/LargeTitleHeader';
+import { TitleHeader } from './variants/TitleHeader';
+
+/**
+ * Composite header namespace.
+ *
+ * - `Header.Title` — compact title bar ({@link TitleHeader}).
+ * - `Header.LargeTitle` — collapsing large-title header ({@link LargeTitleHeader}).
+ *
+ * Both are also exported standalone (`TitleHeader`, `LargeTitleHeader`).
+ *
+ * @example
+ * ```tsx
+ * <Screen.Header>
+ *   <Header.LargeTitle title="Meditate" />
+ * </Screen.Header>
+ * ```
+ */
+export const Header = {
+  Title: TitleHeader,
+  LargeTitle: LargeTitleHeader,
+};

package/src/components/header/header-buttons.tsx

@@ -0,0 +1,103 @@
+import { Pressable } from 'react-native';
+
+import { StyleSheet, useUnistyles } from 'react-native-unistyles';
+
+import type { TerraSemanticIconName } from '#theme/types';
+
+import { Icon } from '../icon';
+
+export type HeaderDismissAction = 'back' | 'close' | 'none';
+
+export interface HeaderDismissNavigation {
+  canGoBack?: () => boolean;
+  goBack?: () => void;
+  dismiss?: () => void;
+}
+
+export interface HeaderDismissProps {
+  /** Adds a built-in dismiss button to the leading/trailing header slot. */
+  dismissAction?: HeaderDismissAction;
+  /** Called before any navigation fallback. */
+  onDismiss?: () => void;
+  /** Optional navigation object, usually from `useNavigation()`. */
+  navigation?: HeaderDismissNavigation;
+}
+
+const getDismissAccessibilityLabel = (
+  dismissAction: HeaderDismissAction
+): string => (dismissAction === 'close' ? 'Close' : 'Back');
+
+const getDismissIconName = (
+  dismissAction: HeaderDismissAction
+): TerraSemanticIconName =>
+  dismissAction === 'close' ? 'navigation.close' : 'navigation.back';
+
+const warnUnavailableDismiss = (dismissAction: HeaderDismissAction): void => {
+  if (__DEV__) {
+    console.warn(
+      `[react-native-terra-ui] Header.Title dismissAction="${dismissAction}" was pressed, but no dismiss handler or available navigation action was provided.`
+    );
+  }
+};
+
+export function HeaderDismissButton({
+  dismissAction = 'none',
+  navigation,
+  onDismiss,
+}: HeaderDismissProps) {
+  const { theme } = useUnistyles();
+
+  if (dismissAction === 'none') return null;
+
+  const handlePress = () => {
+    if (onDismiss) {
+      onDismiss();
+      return;
+    }
+
+    if (dismissAction === 'close' && navigation?.dismiss) {
+      navigation.dismiss();
+      return;
+    }
+
+    if (navigation?.goBack && navigation.canGoBack?.() !== false) {
+      navigation.goBack();
+      return;
+    }
+
+    warnUnavailableDismiss(dismissAction);
+  };
+
+  return (
+    <Pressable
+      accessibilityLabel={getDismissAccessibilityLabel(dismissAction)}
+      accessibilityRole="button"
+      hitSlop={8}
+      onPress={handlePress}
+      style={({ pressed }) => [
+        styles.button,
+        pressed ? { opacity: theme.opacity.pressed } : null,
+      ]}
+    >
+      <Icon
+        size={26}
+        color="text.default"
+        name={getDismissIconName(dismissAction)}
+      />
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  button: {
+    width: 36,
+    height: 36,
+    borderRadius: theme.radius.full,
+    backgroundColor:
+      (theme.color as unknown as Record<string, string | undefined>)[
+        'surface.default'
+      ] ?? '',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+}));

package/src/components/header/index.ts

@@ -0,0 +1,11 @@
+export { Header } from './Header';
+export {
+  type HeaderDismissAction,
+  HeaderDismissButton,
+  type HeaderDismissNavigation,
+  type HeaderDismissProps,
+} from './header-buttons';
+export type { LargeTitleHeaderProps } from './variants/LargeTitleHeader';
+export { LargeTitleHeader } from './variants/LargeTitleHeader';
+export type { TitleHeaderProps } from './variants/TitleHeader';
+export { TitleHeader } from './variants/TitleHeader';