@estuary-solutions/rn-core-ui 0.0.4 → 0.1.0

package/src/Badges/Badge.tsx

@@ -0,0 +1,164 @@
+import {
+  DimensionValue,
+  StyleProp,
+  TextStyle,
+  View,
+  ViewStyle,
+} from 'react-native';
+import React from 'react';
+
+import type { ThemeValue } from '../theme/types';
+import { useStyles } from '../theme/useStyles';
+import { useTheme } from '../theme/useTheme';
+import Text from '../Texts/Text';
+
+export type BadgeAnchorOrigin = {
+  vertical?: 'top' | 'bottom';
+  horizontal?: 'left' | 'right';
+};
+
+/** Variant catalogues shared with the Figma kit contract (figma/kit.json). */
+export const BADGE_VARIANTS = ['standard', 'dot'] as const;
+export const BADGE_OVERLAPS = ['rectangular', 'circular'] as const;
+export type BadgeVariant = (typeof BADGE_VARIANTS)[number];
+export type BadgeOverlap = (typeof BADGE_OVERLAPS)[number];
+
+export interface BadgeProps {
+  children: React.ReactNode;
+  badgeContent?: number | string;
+  max?: number;
+  showZero?: boolean;
+  invisible?: boolean;
+  /** Badge fill; defaults to `color.brand.default`. */
+  color?: string;
+  variant?: BadgeVariant;
+  overlap?: BadgeOverlap;
+  anchorOrigin?: BadgeAnchorOrigin;
+  contentStyle?: StyleProp<TextStyle>;
+  style?: StyleProp<ViewStyle>;
+  badgeStyle?: StyleProp<ViewStyle>;
+}
+
+const RADIUS_STANDARD = 10;
+const RADIUS_DOT = 8;
+const OFFSET = 8;
+
+function getDisplayValue(content: BadgeProps['badgeContent'], max: number) {
+  if (typeof content === 'number') {
+    return content > max ? `${max}+` : content;
+  }
+  return content;
+}
+
+function getBadgePosition(
+  anchorOrigin: Required<BadgeAnchorOrigin>,
+  overlap: BadgeOverlap,
+): ViewStyle {
+  const offset: DimensionValue = overlap === 'circular' ? '14%' : 0;
+
+  return {
+    position: 'absolute',
+    top: anchorOrigin.vertical === 'top' ? offset : undefined,
+    bottom: anchorOrigin.vertical === 'bottom' ? offset : undefined,
+    left: anchorOrigin.horizontal === 'left' ? offset : undefined,
+    right: anchorOrigin.horizontal === 'right' ? offset : undefined,
+    transform: [
+      { translateX: anchorOrigin.horizontal === 'right' ? OFFSET : -OFFSET },
+      { translateY: anchorOrigin.vertical === 'bottom' ? OFFSET : -OFFSET },
+    ],
+  };
+}
+
+const createStyles = (t: ThemeValue) => ({
+  root: {
+    position: 'relative' as const,
+    alignSelf: 'flex-start' as const,
+  },
+  badge: {
+    minWidth: RADIUS_STANDARD * 2,
+    height: RADIUS_STANDARD * 2,
+    borderRadius: RADIUS_STANDARD,
+    alignItems: 'center' as const,
+    justifyContent: 'center' as const,
+    paddingHorizontal: t.space[1] + 2,
+    zIndex: 1,
+  },
+  dot: {
+    width: RADIUS_DOT * 2,
+    height: RADIUS_DOT * 2,
+    minWidth: RADIUS_DOT * 2,
+    borderRadius: RADIUS_DOT,
+    paddingHorizontal: 0,
+  },
+});
+
+const Badge = React.forwardRef<View, BadgeProps>(function Badge(
+  {
+    children,
+    badgeContent,
+    max = 99,
+    showZero = false,
+    invisible = false,
+    color,
+    variant = 'standard',
+    overlap = 'rectangular',
+    anchorOrigin = { vertical: 'top', horizontal: 'right' },
+    contentStyle,
+    style,
+    badgeStyle,
+  },
+  ref,
+) {
+  const theme = useTheme();
+  const styles = useStyles(createStyles);
+
+  const isZero = badgeContent === 0;
+  const isHidden =
+    invisible ||
+    badgeContent == null ||
+    (!showZero && isZero && variant !== 'dot');
+
+  const displayValue =
+    variant === 'dot' ? undefined : getDisplayValue(badgeContent, max);
+  const backgroundColor = color ?? theme.color.brand.default;
+  const contentColor = color
+    ? theme.color.text.inverse
+    : theme.color.brand.onDefault;
+
+  return (
+    <View ref={ref} style={[styles.root, style]}>
+      {children}
+
+      {!isHidden && (
+        <View
+          style={[
+            styles.badge,
+            variant === 'dot' && styles.dot,
+            getBadgePosition(
+              {
+                vertical: anchorOrigin.vertical ?? 'top',
+                horizontal: anchorOrigin.horizontal ?? 'right',
+              },
+              overlap,
+            ),
+            { backgroundColor },
+            badgeStyle,
+          ]}>
+          {variant !== 'dot' && (
+            <Text
+              variant="caption"
+              color={contentColor}
+              numberOfLines={1}
+              style={contentStyle}>
+              {displayValue}
+            </Text>
+          )}
+        </View>
+      )}
+    </View>
+  );
+});
+
+Badge.displayName = 'Badge';
+
+export default Badge;

package/src/Breadcrumbs/Breadcrumb.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import { View, Pressable } from 'react-native';
+
+import type { ThemeValue } from '../theme/types';
+import { useStyles } from '../theme/useStyles';
+import Text from '../Texts/Text';
+
+export interface BreadcrumbItem {
+  item?: string | React.ReactNode;
+  onPress?: () => void;
+  disabled?: boolean;
+}
+
+export interface BreadcrumbProps {
+  items: BreadcrumbItem[];
+  separator?: string | React.ReactNode;
+}
+
+const DEFAULT_SEPARATOR = '›';
+
+const createStyles = (t: ThemeValue) => ({
+  container: {
+    flexDirection: 'row' as const,
+    flexWrap: 'wrap' as const,
+    alignItems: 'center' as const,
+  },
+  itemWrapper: {
+    flexDirection: 'row' as const,
+    alignItems: 'center' as const,
+  },
+  pressed: {
+    opacity: 0.6,
+  },
+  link: {
+    fontWeight: '500' as const,
+  },
+  lastItem: {
+    color: t.color.brand.default,
+    fontWeight: '500' as const,
+  },
+  separator: {
+    marginHorizontal: t.space[2],
+    color: t.color.text.tertiary,
+  },
+});
+
+const Breadcrumb: React.FC<BreadcrumbProps> = ({
+  items,
+  separator = DEFAULT_SEPARATOR,
+}) => {
+  const styles = useStyles(createStyles);
+
+  const renderItem = (i: BreadcrumbItem, isLast: boolean) => {
+    if (typeof i.item === 'string') {
+      return (
+        <Text
+          variant="bodySm"
+          style={[isLast && styles.lastItem, i.onPress && styles.link]}>
+          {i.item}
+        </Text>
+      );
+    }
+
+    return i.item;
+  };
+
+  const renderSeparator = () => {
+    if (typeof separator === 'string') {
+      return (
+        <Text variant="bodySm" style={styles.separator}>
+          {separator}
+        </Text>
+      );
+    }
+
+    return separator;
+  };
+
+  return (
+    <View style={styles.container}>
+      {items.map((item, index) => {
+        const isLast = index === items.length - 1;
+
+        return (
+          <View key={index} style={styles.itemWrapper}>
+            <Pressable
+              disabled={item?.disabled !== undefined ? item?.disabled : isLast}
+              onPress={item?.onPress}
+              style={({ pressed }) => [pressed && styles.pressed]}>
+              {renderItem(item, isLast)}
+            </Pressable>
+
+            {!isLast && renderSeparator()}
+          </View>
+        );
+      })}
+    </View>
+  );
+};
+
+Breadcrumb.displayName = 'Breadcrumb';
+
+export default Breadcrumb;

package/src/Buttons/Button.tsx

@@ -0,0 +1,140 @@
+import React from 'react';
+import {
+  ActivityIndicator,
+  TouchableOpacity,
+  View,
+  TouchableOpacityProps,
+  StyleProp,
+  ViewStyle,
+  TextStyle,
+  TextProps,
+  GestureResponderEvent,
+} from 'react-native';
+
+import type { ThemeValue } from '../theme/types';
+import { useStyles } from '../theme/useStyles';
+import { useTheme } from '../theme/useTheme';
+import Text from '../Texts/Text';
+
+/** Variant catalogue shared with the Figma kit contract (figma/kit.json). */
+export const BUTTON_VARIANTS = ['filled', 'outline'] as const;
+export type ButtonVariant = (typeof BUTTON_VARIANTS)[number];
+
+export interface ButtonProps extends TouchableOpacityProps {
+  title?: string;
+  startIcon?: React.ReactNode;
+  startIconStyle?: StyleProp<ViewStyle>;
+  endIcon?: React.ReactNode;
+  endIconStyle?: StyleProp<ViewStyle>;
+  style?: StyleProp<ViewStyle>;
+  titleStyle?: StyleProp<TextStyle>;
+  /** Fill colour; defaults to `color.brand.default`. */
+  activeBgColor?: string;
+  /** Fill colour while disabled; defaults to `color.text.disabled`. */
+  inactiveBgColor?: string;
+  disabled?: boolean;
+  isSubmit?: boolean;
+  indicatorSize?: number | 'small' | 'large' | undefined;
+  onPress?: ((event: GestureResponderEvent) => void) | undefined;
+  variant?: ButtonVariant;
+  /** Outline border colour; defaults to `color.brand.default`. */
+  borderColor?: string;
+  titleProps?: TextProps;
+}
+
+const createStyles = (t: ThemeValue) => ({
+  container: {
+    flexDirection: 'row' as const,
+    alignItems: 'center' as const,
+    justifyContent: 'center' as const,
+    minHeight: t.size.control.md,
+    paddingHorizontal: t.space[6],
+    paddingVertical: t.space[2],
+    borderRadius: t.radius.md,
+  },
+  outline: {
+    borderWidth: 1,
+  },
+  iconStart: {
+    marginRight: t.space[3],
+  },
+  iconEnd: {
+    marginLeft: t.space[3],
+  },
+  title: {
+    fontWeight: '600' as const,
+  },
+});
+
+const Button: React.FC<ButtonProps> = ({
+  title,
+  startIcon,
+  startIconStyle,
+  endIcon,
+  endIconStyle,
+  style,
+  titleStyle,
+  activeBgColor,
+  inactiveBgColor,
+  disabled,
+  isSubmit,
+  indicatorSize,
+  onPress,
+  variant = 'filled',
+  borderColor,
+  titleProps,
+  ...rest
+}) => {
+  const theme = useTheme();
+  const styles = useStyles(createStyles);
+  const isOutline = variant === 'outline';
+
+  const fill = activeBgColor ?? theme.color.brand.default;
+  const disabledFill = inactiveBgColor ?? theme.color.text.disabled;
+  const outlineColor = borderColor ?? theme.color.brand.default;
+  const backgroundColor = disabled
+    ? disabledFill
+    : isOutline
+    ? theme.color.surface.default
+    : fill;
+  const contentColor = isOutline ? outlineColor : theme.color.brand.onDefault;
+
+  return (
+    <TouchableOpacity
+      {...rest}
+      disabled={disabled || isSubmit}
+      onPress={onPress}
+      style={[
+        styles.container,
+        isOutline && styles.outline,
+        { backgroundColor },
+        isOutline && { borderColor: outlineColor },
+        style,
+      ]}>
+      {startIcon ? (
+        <View style={[styles.iconStart, startIconStyle]}>{startIcon}</View>
+      ) : null}
+
+      {isSubmit ? (
+        <ActivityIndicator
+          size={indicatorSize || 'small'}
+          color={contentColor}
+        />
+      ) : (
+        <Text
+          color={contentColor}
+          style={[styles.title, titleStyle]}
+          numberOfLines={1}
+          {...titleProps}>
+          {title}
+        </Text>
+      )}
+
+      {endIcon ? (
+        <View style={[styles.iconEnd, endIconStyle]}>{endIcon}</View>
+      ) : null}
+    </TouchableOpacity>
+  );
+};
+
+export default Button;

package/src/Buttons/ButtonGradient.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { ActivityIndicator, TouchableOpacity, View } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+
+import type { ThemeValue } from '../theme/types';
+import { useStyles } from '../theme/useStyles';
+import { useTheme } from '../theme/useTheme';
+import Text from '../Texts/Text';
+import { ButtonGradientTypes } from './types/ButtonGradientTypes';
+
+const createStyles = (t: ThemeValue) => ({
+  gradient: {
+    flexDirection: 'row' as const,
+    alignItems: 'center' as const,
+    justifyContent: 'center' as const,
+    minHeight: t.size.control.md,
+    paddingHorizontal: t.space[6],
+    paddingVertical: t.space[2],
+    borderRadius: t.radius.md,
+  },
+  outline: {
+    borderWidth: 1,
+  },
+  iconStart: {
+    marginRight: t.space[3],
+  },
+  iconEnd: {
+    marginLeft: t.space[3],
+  },
+  title: {
+    fontWeight: '600' as const,
+  },
+});
+
+/** Button with a gradient fill; `colors` defaults to the brand default -> pressed ramp. */
+const ButtonGradient: React.FC<ButtonGradientTypes> = ({
+  title,
+  startIcon,
+  endIcon,
+  styleButton,
+  styleGradient,
+  titleStyle,
+  disabled,
+  isSubmit,
+  colorsLoading,
+  variant = 'filled',
+  borderColor,
+  colors,
+  ...rest
+}: ButtonGradientTypes) => {
+  const theme = useTheme();
+  const styles = useStyles(createStyles);
+  const isOutline = variant === 'outline';
+  const gradient = colors ?? [
+    theme.color.brand.default,
+    theme.color.brand.pressed,
+  ];
+  const outlineColor = borderColor ?? theme.color.brand.default;
+  const contentColor = isOutline ? outlineColor : theme.color.brand.onDefault;
+
+  return (
+    <TouchableOpacity
+      {...rest}
+      disabled={disabled || isSubmit}
+      style={[styleButton]}>
+      <LinearGradient
+        colors={isOutline ? ['transparent', 'transparent'] : gradient}
+        start={{ x: 0, y: 1 }}
+        end={{ x: 1, y: 0 }}
+        style={[
+          styles.gradient,
+          isOutline && styles.outline,
+          isOutline && { borderColor: outlineColor },
+          styleGradient,
+        ]}>
+        {startIcon ? <View style={styles.iconStart}>{startIcon}</View> : null}
+        {isSubmit ? (
+          <ActivityIndicator
+            size="small"
+            color={colorsLoading || contentColor}
+          />
+        ) : (
+          <Text
+            color={contentColor}
+            style={[styles.title, titleStyle]}
+            numberOfLines={1}>
+            {title}
+          </Text>
+        )}
+        {endIcon ? <View style={styles.iconEnd}>{endIcon}</View> : null}
+      </LinearGradient>
+    </TouchableOpacity>
+  );
+};
+
+export default ButtonGradient;

package/src/Buttons/types/ButtonGradientTypes.ts

@@ -0,0 +1,92 @@
+import { ColorValue, TextStyle, ViewStyle } from 'react-native';
+
+/**
+ * ButtonGradientTypes
+ *
+ * Props used to configure the GradientButton component.
+ * Supports gradient backgrounds, icons, loading states, variants,
+ * and style customization.
+ */
+export interface ButtonGradientTypes {
+  /**
+   * The text displayed inside the button.
+   * Example: "Submit", "Save", "Cancel".
+   */
+  title: string;
+
+  /**
+   * Icon displayed at the start (left side) of the button.
+   * Accepts any React element or SVG component.
+   */
+  startIcon?: React.ReactNode | React.JSX.Element | React.ReactSVGElement;
+
+  /**
+   * Icon displayed at the end (right side) of the button.
+   * Typically used for arrows or action icons.
+   */
+  endIcon?: React.ReactNode | React.JSX.Element | React.ReactSVGElement;
+
+  /**
+   * Custom style for the button container.
+   * Accepts a single ViewStyle or an array of styles.
+   */
+  styleButton?: ViewStyle | Array<ViewStyle | undefined>;
+  /**
+   * Custom style for the button container.
+   * Accepts a single ViewStyle or an array of styles.
+   */
+  styleGradient?: ViewStyle | Array<ViewStyle | undefined>;
+
+  /**
+   * Custom style for the button title text.
+   * Useful for adjusting color, fontSize, or fontWeight.
+   */
+  titleStyle?: TextStyle;
+
+  /**
+   * Background color when the button is active.
+   * Used when gradient is disabled or overridden.
+   */
+  activeBgColor?: ColorValue;
+
+  /**
+   * Background color when the button is inactive or disabled.
+   */
+  inactiveBgColor?: ColorValue;
+
+  /**
+   * Enables the loading/submitting state when set to true.
+   * Commonly used in forms during API calls.
+   */
+  isSubmit?: boolean;
+
+  /**
+   * Color for the loading indicator or loading gradient.
+   * Example: "#FF7F50"
+   */
+  colorsLoading?: string;
+
+  /**
+   * Border color when using the "outline" variant.
+   */
+  borderColor?: string;
+
+  /**
+   * Visual style of the button.
+   * - "filled": Uses full background or gradient (default)
+   * - "outline": Transparent background with a border
+   */
+  variant?: 'outline' | 'filled';
+
+  /**
+   * Gradient colors. Accepts an array such as:
+   * ["#FF7F50", "#FF1493"]
+   * or an object if using advanced gradient configs.
+   */
+  colors?: any;
+
+  /**
+   * Disables button interaction and lowers opacity when true.
+   */
+  disabled?: boolean;
+}

package/src/Cards/Card.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { View, ViewProps, ViewStyle } from 'react-native';
+import Paper, { PaperProps } from './Paper';
+
+export interface CardProps extends ViewProps, PaperProps {
+  /**
+   * If true, the card will use raised styling.
+   * @default false
+   */
+  raised?: boolean;
+
+  /**
+   * The variant to use.
+   * @default 'elevation'
+   */
+  variant?: PaperProps['variant'];
+
+  /**
+   * Custom style
+   */
+  style?: ViewStyle | ViewStyle[];
+}
+
+const Card = React.forwardRef<View, CardProps>(function Card(
+  { raised = false, variant = 'elevation', style, ...rest },
+  ref,
+) {
+  // Raised cards use the strongest theme elevation level (ADR-0001 elevation 0..3).
+  const resolvedElevation = raised && variant !== 'outlined' ? 3 : undefined;
+
+  return (
+    <Paper
+      ref={ref}
+      elevation={resolvedElevation}
+      variant={variant}
+      style={[
+        {
+          overflow: 'hidden',
+        },
+        style,
+      ]}
+      {...rest}
+    />
+  );
+});
+
+Card.displayName = 'Card';
+
+export default Card;