react-native-terra-ui 0.1.0

package/src/components/icon/utils.tsx

@@ -0,0 +1,147 @@
+import Svg, { Circle, Path } from 'react-native-svg';
+
+import type {
+  TerraIconComponent,
+  TerraIconProps,
+  TerraSemanticIconName,
+} from '#theme/types';
+
+const DEFAULT_SIZE = 20;
+const DEFAULT_COLOR = '#000000';
+const DEFAULT_STROKE_WIDTH = 2;
+
+const resolveIconProps = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE_WIDTH,
+}: TerraIconProps) => ({ color, size, strokeWidth });
+
+const strokeProps = (color: string, strokeWidth: number) => ({
+  stroke: color,
+  strokeWidth,
+  strokeLinecap: 'round' as const,
+  strokeLinejoin: 'round' as const,
+});
+
+const SvgIcon = ({
+  size,
+  children,
+}: {
+  size: number;
+  children: React.ReactNode;
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    {children}
+  </Svg>
+);
+
+const PathIcon = ({ d, ...props }: TerraIconProps & { d: string }) => {
+  const { color, size, strokeWidth } = resolveIconProps(props);
+
+  return (
+    <SvgIcon size={size}>
+      <Path d={d} {...strokeProps(color, strokeWidth)} />
+    </SvgIcon>
+  );
+};
+
+// Lucide chevron geometry scaled 20% from the 24×24 viewBox center (45° arms unchanged).
+const NAV_CENTER = 12;
+const NAV_CHEVRON_OPEN = 3 * 1.2;
+const NAV_CHEVRON_ARM = 6 * 1.2;
+
+const BackIcon: TerraIconComponent = (props) => (
+  <PathIcon
+    d={`M${NAV_CENTER + NAV_CHEVRON_OPEN} ${NAV_CENTER + NAV_CHEVRON_ARM}L${NAV_CENTER - NAV_CHEVRON_OPEN} ${NAV_CENTER} ${NAV_CENTER + NAV_CHEVRON_OPEN} ${NAV_CENTER - NAV_CHEVRON_ARM}`}
+    {...props}
+  />
+);
+
+const ForwardIcon: TerraIconComponent = (props) => (
+  <PathIcon
+    d={`M${NAV_CENTER - NAV_CHEVRON_OPEN} ${NAV_CENTER + NAV_CHEVRON_ARM}L${NAV_CENTER + NAV_CHEVRON_OPEN} ${NAV_CENTER} ${NAV_CENTER - NAV_CHEVRON_OPEN} ${NAV_CENTER - NAV_CHEVRON_ARM}`}
+    {...props}
+  />
+);
+
+const CloseIcon: TerraIconComponent = (props) => (
+  <PathIcon d="M18 6L6 18M6 6l12 12" {...props} />
+);
+
+const InfoIcon: TerraIconComponent = (props) => {
+  const { color, size, strokeWidth } = resolveIconProps(props);
+  const stroke = strokeProps(color, strokeWidth);
+
+  return (
+    <SvgIcon size={size}>
+      <Circle cx={12} cy={12} r={10} {...stroke} />
+      <Path d="M12 16v-4" {...stroke} />
+      <Path d="M12 8h.01" {...stroke} />
+    </SvgIcon>
+  );
+};
+
+const SuccessIcon: TerraIconComponent = (props) => {
+  const { color, size, strokeWidth } = resolveIconProps(props);
+  const stroke = strokeProps(color, strokeWidth);
+
+  return (
+    <SvgIcon size={size}>
+      <Circle cx={12} cy={12} r={10} {...stroke} />
+      <Path d="m9 12 2 2 4-4" {...stroke} />
+    </SvgIcon>
+  );
+};
+
+const WarningIcon: TerraIconComponent = (props) => {
+  const { color, size, strokeWidth } = resolveIconProps(props);
+  const stroke = strokeProps(color, strokeWidth);
+
+  return (
+    <SvgIcon size={size}>
+      <Path
+        d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"
+        {...stroke}
+      />
+      <Path d="M12 9v4" {...stroke} />
+      <Path d="M12 17h.01" {...stroke} />
+    </SvgIcon>
+  );
+};
+
+const DangerIcon: TerraIconComponent = (props) => {
+  const { color, size, strokeWidth } = resolveIconProps(props);
+  const stroke = strokeProps(color, strokeWidth);
+
+  return (
+    <SvgIcon size={size}>
+      <Circle cx={12} cy={12} r={10} {...stroke} />
+      <Path d="M12 8v4" {...stroke} />
+      <Path d="M12 16h.01" {...stroke} />
+    </SvgIcon>
+  );
+};
+
+export const PersonIcon: TerraIconComponent = (props) => {
+  const { color, size, strokeWidth } = resolveIconProps(props);
+  const stroke = strokeProps(color, strokeWidth);
+  const iconSize = size * 0.55;
+
+  return (
+    <Svg width={iconSize} height={iconSize} viewBox="0 0 24 24" fill="none">
+      <Circle cx={12} cy={8} r={4} {...stroke} />
+      <Path d="M4 20c0-4 3.582-7 8-7s8 3 8 7" {...stroke} />
+    </Svg>
+  );
+};
+
+export const defaultIcons: Record<TerraSemanticIconName, TerraIconComponent> = {
+  'navigation.back': BackIcon,
+  'navigation.forward': ForwardIcon,
+  'navigation.close': CloseIcon,
+  'status.info': InfoIcon,
+  'status.success': SuccessIcon,
+  'status.warning': WarningIcon,
+  'status.danger': DangerIcon,
+  person: PersonIcon,
+};

package/src/components/index.ts

@@ -0,0 +1,13 @@
+export * from './avatar';
+export * from './box';
+export * from './button';
+export * from './header';
+export * from './icon';
+export * from './page-indicator';
+export * from './portal';
+export * from './screen';
+export * from './slot';
+export * from './spinner';
+export * from './surface';
+export * from './text';
+export * from './toast';

package/src/components/page-indicator/PageIndicator.tsx

@@ -0,0 +1,100 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import type { SharedValue } from 'react-native-reanimated';
+
+import type { ColorToken } from '#theme/types';
+import { DEFAULT_PAGE_INDICATOR_MAX_VISIBLE } from './utils';
+import { DotIndicator } from './variants/DotIndicator';
+import { PillIndicator } from './variants/PillIndicator';
+
+export type PageIndicatorVariant = 'pill' | 'dot';
+
+type PageIndicatorCoreProps = {
+  /** Number of pages represented by the indicator. */
+  count: number;
+  /**
+   * Active page index, or a shared value for scroll-linked motion.
+   * Index `0` is the first page; fractional values animate between pages.
+   */
+  current?: number | SharedValue<number>;
+  /** Duration for discrete `current` changes. */
+  duration?: number;
+  /** Active page color token. */
+  activeColor?: ColorToken;
+  /** Inactive page color token. */
+  inactiveColor?: ColorToken;
+  /** Stack dots vertically instead of horizontally. */
+  vertical?: boolean;
+  /**
+   * Maximum dots visible before the track scrolls and edge-scales.
+   * Defaults to `5`. Overflow scrolling is off when `count <= maxVisible`.
+   */
+  maxVisible?: number;
+  style?: StyleProp<ViewStyle>;
+};
+
+/** Pill indicator — active page widens into a pill. Default when `variant` is omitted. */
+export type PageIndicatorPillProps = PageIndicatorCoreProps & {
+  variant?: 'pill';
+  loading?: never;
+  loadingColor?: never;
+};
+
+/** Dot indicator — traveling dot with optional loading ring on the active page. */
+export type PageIndicatorDotProps = PageIndicatorCoreProps & {
+  variant: 'dot';
+  /** Loading ring color token. */
+  loadingColor?: ColorToken;
+  /** Renders a ring around the active dot while loading. */
+  loading?: boolean;
+};
+
+export type PageIndicatorProps = PageIndicatorPillProps | PageIndicatorDotProps;
+
+export function PageIndicator(props: PageIndicatorProps) {
+  const {
+    count,
+    current,
+    duration,
+    activeColor,
+    inactiveColor,
+    vertical,
+    maxVisible = DEFAULT_PAGE_INDICATOR_MAX_VISIBLE,
+    style,
+  } = props;
+
+  if (props.variant === 'dot') {
+    return (
+      <DotIndicator
+        count={count}
+        current={current}
+        duration={duration}
+        activeColor={activeColor}
+        inactiveColor={inactiveColor}
+        loading={props.loading}
+        loadingColor={props.loadingColor}
+        vertical={vertical}
+        maxVisible={maxVisible}
+        style={style}
+      />
+    );
+  }
+
+  return (
+    <PillIndicator
+      count={count}
+      current={current}
+      duration={duration}
+      activeColor={activeColor}
+      inactiveColor={inactiveColor}
+      vertical={vertical}
+      maxVisible={maxVisible}
+      style={style}
+    />
+  );
+}
+
+export type { DotIndicatorProps } from './variants/DotIndicator';
+export { DotIndicator } from './variants/DotIndicator';
+export type { PillIndicatorProps } from './variants/PillIndicator';
+export { PillIndicator } from './variants/PillIndicator';

package/src/components/page-indicator/PageIndicatorRoot.tsx

@@ -0,0 +1,41 @@
+import type { ReactNode } from 'react';
+import { type StyleProp, View, type ViewStyle } from 'react-native';
+
+import { pageIndicatorViewportClipStyle } from './utils';
+
+export type PageIndicatorRootProps = {
+  children: ReactNode;
+  crossSize?: number;
+  overflows: boolean;
+  style?: StyleProp<ViewStyle>;
+  vertical: boolean;
+  viewportMainSize: number;
+};
+
+/** Non-interactive root with optional overflow clipping. */
+export function PageIndicatorRoot({
+  children,
+  crossSize,
+  overflows,
+  style,
+  vertical,
+  viewportMainSize,
+}: PageIndicatorRootProps) {
+  return (
+    <View pointerEvents="none" style={style}>
+      {overflows ? (
+        <View
+          style={pageIndicatorViewportClipStyle(
+            vertical,
+            viewportMainSize,
+            crossSize
+          )}
+        >
+          {children}
+        </View>
+      ) : (
+        children
+      )}
+    </View>
+  );
+}

package/src/components/page-indicator/hooks/use-page-indicator-colors.ts

@@ -0,0 +1,65 @@
+import { useMemo } from 'react';
+
+import { useUnistyles } from 'react-native-unistyles';
+
+import type { ColorToken } from '#theme/types';
+
+import { resolveThemeColor } from '#utils/resolve-theme-color';
+
+/** Resolved color strings for Reanimated and SVG (worklets cannot use theme tokens). */
+export interface ResolvedColors {
+  activeColor: string;
+  inactiveColor: string;
+  loadingColor: string;
+}
+
+export type PageIndicatorColorInput = {
+  activeColor?: ColorToken;
+  inactiveColor?: ColorToken;
+  loadingColor?: ColorToken;
+};
+
+const DEFAULT_COLOR_TOKENS: Required<PageIndicatorColorInput> = {
+  activeColor: 'text.default',
+  inactiveColor: 'text.disabled',
+  loadingColor: 'text.disabled',
+};
+
+export function usePageIndicatorColors(
+  colors: PageIndicatorColorInput = {}
+): ResolvedColors {
+  const { theme } = useUnistyles();
+
+  return useMemo(
+    () => ({
+      activeColor:
+        resolveThemeColor(
+          colors.activeColor ?? DEFAULT_COLOR_TOKENS.activeColor,
+          theme
+        ) ??
+        (theme.color as unknown as Record<string, string | undefined>)[
+          'text.default'
+        ] ??
+        '',
+      inactiveColor:
+        resolveThemeColor(
+          colors.inactiveColor ?? DEFAULT_COLOR_TOKENS.inactiveColor,
+          theme
+        ) ??
+        (theme.color as unknown as Record<string, string | undefined>)[
+          'text.disabled'
+        ] ??
+        '',
+      loadingColor:
+        resolveThemeColor(
+          colors.loadingColor ?? DEFAULT_COLOR_TOKENS.loadingColor,
+          theme
+        ) ??
+        (theme.color as unknown as Record<string, string | undefined>)[
+          'text.disabled'
+        ] ??
+        '',
+    }),
+    [colors.activeColor, colors.inactiveColor, colors.loadingColor, theme]
+  );
+}

package/src/components/page-indicator/hooks/use-page-indicator-core.ts

@@ -0,0 +1,34 @@
+import type { SharedValue } from 'react-native-reanimated';
+import { isPageIndicatorSharedValue } from '../utils';
+import {
+  type PageIndicatorColorInput,
+  usePageIndicatorColors,
+} from './use-page-indicator-colors';
+import { usePageIndicatorProgress } from './use-page-indicator-progress';
+
+type PageIndicatorVariant = 'pill' | 'dot';
+
+export function usePageIndicatorCore(
+  count: number,
+  current: number | SharedValue<number>,
+  variant: PageIndicatorVariant,
+  duration: number,
+  colors: PageIndicatorColorInput
+) {
+  const scrollLinked = isPageIndicatorSharedValue(current);
+  const resolvedColors = usePageIndicatorColors(colors);
+  const { progress, pillJump } = usePageIndicatorProgress(
+    count,
+    scrollLinked ? current : undefined,
+    scrollLinked ? undefined : current,
+    variant,
+    duration
+  );
+
+  return {
+    colors: resolvedColors,
+    pillJump,
+    progress,
+    scrollLinked,
+  };
+}

package/src/components/page-indicator/hooks/use-page-indicator-progress.ts

@@ -0,0 +1,122 @@
+import { useEffect, useMemo } from 'react';
+
+import type { SharedValue } from 'react-native-reanimated';
+import {
+  cancelAnimation,
+  Easing,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+
+import {
+  PAGE_INDICATOR_SINGLE_PAGE_DURATION,
+  pageIndicatorPageJumpDistance,
+  pageIndicatorPageJumpDuration,
+} from '../utils';
+
+function clampPageIndex(page: number, count: number): number {
+  if (count <= 0) return 0;
+  return Math.min(Math.max(page, 0), count - 1);
+}
+
+export interface PillJumpState {
+  active: SharedValue<boolean>;
+  from: SharedValue<number>;
+  to: SharedValue<number>;
+  t: SharedValue<number>;
+}
+
+/**
+ * Returns scroll-linked `progress` when provided; otherwise owns a shared value
+ * that animates toward the discrete page index.
+ *
+ * Single-step pill changes animate `progress` continuously. Multi-step pill
+ * jumps cross-fade only the source and target dots — intermediates stay idle.
+ */
+export function usePageIndicatorProgress(
+  count: number,
+  progress: SharedValue<number> | undefined,
+  page: number | undefined,
+  variant: 'pill' | 'dot' = 'pill',
+  duration = PAGE_INDICATOR_SINGLE_PAGE_DURATION
+): { progress: SharedValue<number>; pillJump: PillJumpState } {
+  const internalProgress = useSharedValue(
+    page !== undefined ? clampPageIndex(page, count) : 0
+  );
+  const pillJumpActive = useSharedValue(false);
+  const pillJumpFrom = useSharedValue(0);
+  const pillJumpTo = useSharedValue(0);
+  const pillJumpT = useSharedValue(0);
+
+  const pillJump = useMemo(
+    () => ({
+      active: pillJumpActive,
+      from: pillJumpFrom,
+      to: pillJumpTo,
+      t: pillJumpT,
+    }),
+    [pillJumpActive, pillJumpFrom, pillJumpTo, pillJumpT]
+  );
+
+  useEffect(() => {
+    if (page === undefined) return;
+
+    const target = clampPageIndex(page, count);
+    const from = internalProgress.value;
+    const distance = pageIndicatorPageJumpDistance(from, target);
+
+    if (distance === 0) return;
+
+    cancelAnimation(internalProgress);
+    cancelAnimation(pillJumpT);
+    pillJumpActive.value = false;
+
+    if (variant === 'pill' && distance > 1) {
+      const jumpDuration = pageIndicatorPageJumpDuration(from, target);
+
+      internalProgress.value = from;
+      pillJumpFrom.value = from;
+      pillJumpTo.value = target;
+      pillJumpActive.value = true;
+      pillJumpT.value = 0;
+      pillJumpT.value = withTiming(
+        1,
+        {
+          duration: jumpDuration,
+          easing: Easing.bezier(0.33, 0, 0.15, 1),
+        },
+        (finished) => {
+          'worklet';
+          if (finished) {
+            internalProgress.value = target;
+            pillJumpActive.value = false;
+          }
+        }
+      );
+      return;
+    }
+
+    internalProgress.value = withTiming(target, {
+      duration:
+        variant === 'dot'
+          ? duration
+          : pageIndicatorPageJumpDuration(from, target),
+      easing: Easing.bezier(0.33, 0, 0.15, 1),
+    });
+  }, [
+    count,
+    duration,
+    internalProgress,
+    page,
+    pillJumpActive,
+    pillJumpFrom,
+    pillJumpT,
+    pillJumpTo,
+    variant,
+  ]);
+
+  return {
+    progress: progress ?? internalProgress,
+    pillJump,
+  };
+}

package/src/components/page-indicator/index.ts

@@ -0,0 +1,13 @@
+export type {
+  DotIndicatorProps,
+  PageIndicatorDotProps,
+  PageIndicatorPillProps,
+  PageIndicatorProps,
+  PageIndicatorVariant,
+  PillIndicatorProps,
+} from './PageIndicator';
+export { DotIndicator, PageIndicator, PillIndicator } from './PageIndicator';
+export {
+  DEFAULT_PAGE_INDICATOR_MAX_VISIBLE,
+  PAGE_INDICATOR_SINGLE_PAGE_DURATION,
+} from './utils';