@oxyhq/bloom 0.1.13 → 0.1.15

package/src/card/Card.tsx

@@ -0,0 +1,197 @@
+import React, { memo, useMemo } from 'react';
+import { View, Text, Pressable, Platform, type ViewStyle } from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import { borderRadius, space } from '../styles/tokens';
+import type {
+  CardProps,
+  CardHeaderProps,
+  CardBodyProps,
+  CardFooterProps,
+  CardTitleProps,
+  CardDescriptionProps,
+} from './types';
+
+const CardRootComponent: React.FC<CardProps> = ({
+  children,
+  variant = 'elevated',
+  style,
+  onPress,
+  disabled = false,
+  accessibilityLabel,
+  testID,
+}) => {
+  const theme = useTheme();
+
+  const containerStyle = useMemo((): ViewStyle => {
+    const base: ViewStyle = {
+      borderRadius: borderRadius.md,
+      overflow: 'hidden',
+    };
+
+    switch (variant) {
+      case 'elevated':
+        base.backgroundColor = theme.colors.card;
+        if (Platform.OS === 'web') {
+          base.boxShadow = `0px 1px 3px ${theme.colors.shadow}`;
+        } else {
+          base.shadowColor = theme.colors.shadow;
+          base.shadowOffset = { width: 0, height: 1 };
+          base.shadowOpacity = 0.2;
+          base.shadowRadius = 3;
+          base.elevation = 2;
+        }
+        break;
+      case 'outlined':
+        base.backgroundColor = theme.colors.card;
+        base.borderWidth = 1;
+        base.borderColor = theme.colors.border;
+        break;
+      case 'filled':
+        base.backgroundColor = theme.colors.backgroundSecondary;
+        break;
+    }
+
+    return base;
+  }, [variant, theme]);
+
+  if (onPress) {
+    return (
+      <Pressable
+        style={({ pressed }) => [
+          containerStyle,
+          pressed && { opacity: 0.85 },
+          disabled && { opacity: 0.5 },
+          style,
+        ]}
+        onPress={onPress}
+        disabled={disabled}
+        accessibilityLabel={accessibilityLabel}
+        accessibilityRole="button"
+        accessibilityState={{ disabled }}
+        testID={testID}
+      >
+        {children}
+      </Pressable>
+    );
+  }
+
+  return (
+    <View
+      style={[containerStyle, disabled && { opacity: 0.5 }, style]}
+      accessibilityLabel={accessibilityLabel}
+      testID={testID}
+    >
+      {children}
+    </View>
+  );
+};
+
+const CardHeaderComponent: React.FC<CardHeaderProps> = ({ children, style }) => (
+  <View
+    style={[
+      {
+        paddingHorizontal: space.lg,
+        paddingTop: space.lg,
+        paddingBottom: space.sm,
+      },
+      style,
+    ]}
+  >
+    {children}
+  </View>
+);
+
+const CardBodyComponent: React.FC<CardBodyProps> = ({ children, style }) => (
+  <View
+    style={[
+      {
+        paddingHorizontal: space.lg,
+        paddingVertical: space.sm,
+      },
+      style,
+    ]}
+  >
+    {children}
+  </View>
+);
+
+const CardFooterComponent: React.FC<CardFooterProps> = ({ children, style }) => (
+  <View
+    style={[
+      {
+        paddingHorizontal: space.lg,
+        paddingTop: space.sm,
+        paddingBottom: space.lg,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+        gap: space.sm,
+      },
+      style,
+    ]}
+  >
+    {children}
+  </View>
+);
+
+const CardTitleComponent: React.FC<CardTitleProps> = ({ children, style, numberOfLines }) => {
+  const theme = useTheme();
+  return (
+    <Text
+      style={[
+        {
+          fontSize: 17,
+          fontWeight: '600',
+          color: theme.colors.text,
+          lineHeight: 22,
+        },
+        style,
+      ]}
+      numberOfLines={numberOfLines}
+    >
+      {children}
+    </Text>
+  );
+};
+
+const CardDescriptionComponent: React.FC<CardDescriptionProps> = ({
+  children,
+  style,
+  numberOfLines,
+}) => {
+  const theme = useTheme();
+  return (
+    <Text
+      style={[
+        {
+          fontSize: 14,
+          color: theme.colors.textSecondary,
+          lineHeight: 20,
+        },
+        style,
+      ]}
+      numberOfLines={numberOfLines}
+    >
+      {children}
+    </Text>
+  );
+};
+
+export const Card = memo(CardRootComponent);
+Card.displayName = 'Card';
+
+export const CardHeader = memo(CardHeaderComponent);
+CardHeader.displayName = 'CardHeader';
+
+export const CardBody = memo(CardBodyComponent);
+CardBody.displayName = 'CardBody';
+
+export const CardFooter = memo(CardFooterComponent);
+CardFooter.displayName = 'CardFooter';
+
+export const CardTitle = memo(CardTitleComponent);
+CardTitle.displayName = 'CardTitle';
+
+export const CardDescription = memo(CardDescriptionComponent);
+CardDescription.displayName = 'CardDescription';

package/src/card/index.ts

@@ -0,0 +1,10 @@
+export { Card, CardHeader, CardBody, CardFooter, CardTitle, CardDescription } from './Card';
+export type {
+  CardProps,
+  CardVariant,
+  CardHeaderProps,
+  CardBodyProps,
+  CardFooterProps,
+  CardTitleProps,
+  CardDescriptionProps,
+} from './types';

package/src/card/types.ts

@@ -0,0 +1,40 @@
+import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
+
+export type CardVariant = 'elevated' | 'outlined' | 'filled';
+
+export interface CardProps {
+  children?: React.ReactNode;
+  variant?: CardVariant;
+  style?: StyleProp<ViewStyle>;
+  onPress?: () => void;
+  disabled?: boolean;
+  accessibilityLabel?: string;
+  testID?: string;
+}
+
+export interface CardHeaderProps {
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export interface CardBodyProps {
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export interface CardFooterProps {
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export interface CardTitleProps {
+  children?: React.ReactNode;
+  style?: StyleProp<TextStyle>;
+  numberOfLines?: number;
+}
+
+export interface CardDescriptionProps {
+  children?: React.ReactNode;
+  style?: StyleProp<TextStyle>;
+  numberOfLines?: number;
+}

package/src/checkbox/Checkbox.tsx

@@ -0,0 +1,166 @@
+import React, { memo, useCallback, useEffect, useMemo, useRef } from 'react';
+import { View, Text, Pressable, Animated, type ViewStyle } from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import { animation, borderRadius, space } from '../styles/tokens';
+import type { CheckboxProps } from './types';
+
+const SIZE_CONFIG = {
+  small: { box: 18, checkmark: 10, fontSize: 14, lineHeight: 20, descFontSize: 12 },
+  medium: { box: 22, checkmark: 12, fontSize: 15, lineHeight: 22, descFontSize: 13 },
+  large: { box: 26, checkmark: 14, fontSize: 16, lineHeight: 24, descFontSize: 14 },
+} as const;
+
+const CheckboxComponent: React.FC<CheckboxProps> = ({
+  checked,
+  onCheckedChange,
+  label,
+  description,
+  size = 'medium',
+  disabled = false,
+  indeterminate = false,
+  color,
+  style,
+  labelStyle,
+  accessibilityLabel,
+  testID,
+}) => {
+  const theme = useTheme();
+  const scaleAnim = useRef(new Animated.Value(checked ? 1 : 0)).current;
+  const pressAnim = useRef(new Animated.Value(1)).current;
+  const sizeConfig = SIZE_CONFIG[size];
+  const checkColor = color ?? theme.colors.primary;
+
+  useEffect(() => {
+    Animated.spring(scaleAnim, {
+      toValue: checked || indeterminate ? 1 : 0,
+      useNativeDriver: true,
+      ...animation.spring.snappy,
+    }).start();
+  }, [checked, indeterminate, scaleAnim]);
+
+  const handlePress = useCallback(() => {
+    if (!disabled) {
+      onCheckedChange(!checked);
+    }
+  }, [checked, disabled, onCheckedChange]);
+
+  const onPressIn = useCallback(() => {
+    Animated.spring(pressAnim, {
+      toValue: 0.9,
+      useNativeDriver: true,
+      ...animation.spring.snappy,
+    }).start();
+  }, [pressAnim]);
+
+  const onPressOut = useCallback(() => {
+    Animated.spring(pressAnim, {
+      toValue: 1,
+      useNativeDriver: true,
+      ...animation.spring.gentle,
+    }).start();
+  }, [pressAnim]);
+
+  const boxStyle = useMemo((): ViewStyle => {
+    const base: ViewStyle = {
+      width: sizeConfig.box,
+      height: sizeConfig.box,
+      borderRadius: borderRadius._2xs + 2,
+      borderWidth: 2,
+      alignItems: 'center',
+      justifyContent: 'center',
+    };
+
+    if (checked || indeterminate) {
+      base.backgroundColor = checkColor;
+      base.borderColor = checkColor;
+    } else {
+      base.backgroundColor = 'transparent';
+      base.borderColor = theme.colors.border;
+    }
+
+    return base;
+  }, [sizeConfig, checked, indeterminate, checkColor, theme]);
+
+  // Checkmark using unicode characters for zero-dependency rendering
+  const checkmarkContent = indeterminate ? '\u2014' : '\u2713';
+
+  return (
+    <Pressable
+      style={[
+        {
+          flexDirection: 'row',
+          alignItems: 'flex-start',
+          gap: space.sm,
+          opacity: disabled ? 0.4 : 1,
+        },
+        style,
+      ]}
+      onPress={handlePress}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      disabled={disabled}
+      accessibilityRole="checkbox"
+      accessibilityState={{ checked: indeterminate ? 'mixed' : checked, disabled }}
+      accessibilityLabel={accessibilityLabel ?? label}
+      hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+      testID={testID}
+    >
+      <Animated.View style={[boxStyle, { transform: [{ scale: pressAnim }] }]}>
+        <Animated.View
+          style={{
+            opacity: scaleAnim,
+            transform: [{ scale: scaleAnim }],
+          }}
+        >
+          <Text
+            style={{
+              fontSize: sizeConfig.checkmark,
+              color: '#fff',
+              fontWeight: '700',
+              lineHeight: sizeConfig.checkmark + 2,
+              textAlign: 'center',
+            }}
+          >
+            {checkmarkContent}
+          </Text>
+        </Animated.View>
+      </Animated.View>
+
+      {(label || description) && (
+        <View style={{ flex: 1, paddingTop: 1 }}>
+          {label && (
+            <Text
+              style={[
+                {
+                  fontSize: sizeConfig.fontSize,
+                  lineHeight: sizeConfig.lineHeight,
+                  color: theme.colors.text,
+                  fontWeight: '500',
+                },
+                labelStyle,
+              ]}
+            >
+              {label}
+            </Text>
+          )}
+          {description && (
+            <Text
+              style={{
+                fontSize: sizeConfig.descFontSize,
+                color: theme.colors.textSecondary,
+                lineHeight: sizeConfig.descFontSize + 6,
+                marginTop: 2,
+              }}
+            >
+              {description}
+            </Text>
+          )}
+        </View>
+      )}
+    </Pressable>
+  );
+};
+
+export const Checkbox = memo(CheckboxComponent);
+Checkbox.displayName = 'Checkbox';

package/src/checkbox/index.ts

@@ -0,0 +1,2 @@
+export { Checkbox } from './Checkbox';
+export type { CheckboxProps, CheckboxSize } from './types';

package/src/checkbox/types.ts

@@ -0,0 +1,26 @@
+import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
+
+export type CheckboxSize = 'small' | 'medium' | 'large';
+
+export interface CheckboxProps {
+  /** Whether the checkbox is checked. */
+  checked: boolean;
+  /** Called when the checked state changes. */
+  onCheckedChange: (checked: boolean) => void;
+  /** Optional label text. */
+  label?: string;
+  /** Optional description shown below the label. */
+  description?: string;
+  /** Size preset. */
+  size?: CheckboxSize;
+  /** Whether the checkbox is disabled. */
+  disabled?: boolean;
+  /** Whether the checkbox is in an indeterminate state. */
+  indeterminate?: boolean;
+  /** Semantic color when checked. Uses theme primary by default. */
+  color?: string;
+  style?: StyleProp<ViewStyle>;
+  labelStyle?: StyleProp<TextStyle>;
+  accessibilityLabel?: string;
+  testID?: string;
+}

package/src/chip/Chip.tsx

@@ -0,0 +1,156 @@
+import React, { memo, useMemo, useRef, useCallback } from 'react';
+import { View, Text, Pressable, Animated, type ViewStyle, type TextStyle } from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import { animation, borderRadius, space } from '../styles/tokens';
+import type { ChipProps, ChipColor, ChipVariant } from './types';
+
+const SIZE_CONFIG = {
+  small: { height: 24, fontSize: 12, paddingHorizontal: 8, iconGap: 4, iconSize: 14 },
+  medium: { height: 32, fontSize: 14, paddingHorizontal: 12, iconGap: 6, iconSize: 16 },
+  large: { height: 40, fontSize: 16, paddingHorizontal: 16, iconGap: 8, iconSize: 18 },
+} as const;
+
+const PRESS_SCALE = 0.95;
+
+function useChipColors(
+  color: ChipColor,
+  variant: ChipVariant,
+  selected: boolean,
+  theme: ReturnType<typeof useTheme>,
+): { bg: string; fg: string; border: string } {
+  const colorMap: Record<ChipColor, string> = {
+    default: theme.colors.textSecondary,
+    primary: theme.colors.primary,
+    success: theme.colors.success,
+    warning: theme.colors.warning,
+    error: theme.colors.error,
+  };
+
+  const base = selected ? theme.colors.primary : colorMap[color];
+
+  switch (variant) {
+    case 'solid':
+      return { bg: base, fg: '#fff', border: base };
+    case 'outlined':
+      return { bg: 'transparent', fg: base, border: base };
+    case 'soft':
+      return { bg: base + '18', fg: base, border: 'transparent' };
+  }
+}
+
+const ChipComponent: React.FC<ChipProps> = ({
+  children,
+  variant = 'outlined',
+  color = 'default',
+  size = 'medium',
+  startIcon,
+  endIcon,
+  onPress,
+  onClose,
+  selected = false,
+  disabled = false,
+  style,
+  textStyle,
+  accessibilityLabel,
+  testID,
+}) => {
+  const theme = useTheme();
+  const scaleAnim = useRef(new Animated.Value(1)).current;
+  const colors = useChipColors(color, variant, selected, theme);
+  const sizeConfig = SIZE_CONFIG[size];
+
+  const onPressIn = useCallback(() => {
+    Animated.spring(scaleAnim, {
+      toValue: PRESS_SCALE,
+      useNativeDriver: true,
+      ...animation.spring.snappy,
+    }).start();
+  }, [scaleAnim]);
+
+  const onPressOut = useCallback(() => {
+    Animated.spring(scaleAnim, {
+      toValue: 1,
+      useNativeDriver: true,
+      ...animation.spring.gentle,
+    }).start();
+  }, [scaleAnim]);
+
+  const containerStyle = useMemo((): ViewStyle => ({
+    height: sizeConfig.height,
+    borderRadius: sizeConfig.height / 2,
+    paddingHorizontal: sizeConfig.paddingHorizontal,
+    backgroundColor: colors.bg,
+    borderWidth: variant === 'outlined' ? 1 : 0,
+    borderColor: colors.border,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: sizeConfig.iconGap,
+    alignSelf: 'flex-start',
+  }), [sizeConfig, colors, variant]);
+
+  const labelStyle = useMemo((): TextStyle => ({
+    fontSize: sizeConfig.fontSize,
+    fontWeight: '500',
+    color: colors.fg,
+  }), [sizeConfig, colors]);
+
+  const closeButton = onClose ? (
+    <Pressable
+      onPress={onClose}
+      hitSlop={{ top: 6, bottom: 6, left: 6, right: 6 }}
+      accessibilityLabel="Remove"
+      accessibilityRole="button"
+    >
+      <Text style={{ fontSize: sizeConfig.iconSize, color: colors.fg, lineHeight: sizeConfig.iconSize }}>
+        {'\u00D7'}
+      </Text>
+    </Pressable>
+  ) : null;
+
+  const content = (
+    <>
+      {startIcon}
+      {typeof children === 'string' ? (
+        <Text style={[labelStyle, textStyle]}>{children}</Text>
+      ) : (
+        children
+      )}
+      {endIcon}
+      {closeButton}
+    </>
+  );
+
+  if (onPress) {
+    return (
+      <Animated.View style={{ transform: [{ scale: scaleAnim }] }}>
+        <Pressable
+          style={[containerStyle, disabled && { opacity: 0.5 }, style]}
+          onPress={onPress}
+          onPressIn={onPressIn}
+          onPressOut={onPressOut}
+          disabled={disabled}
+          accessibilityLabel={accessibilityLabel}
+          accessibilityRole="button"
+          accessibilityState={{ disabled, selected }}
+          testID={testID}
+        >
+          {content}
+        </Pressable>
+      </Animated.View>
+    );
+  }
+
+  return (
+    <View
+      style={[containerStyle, disabled && { opacity: 0.5 }, style]}
+      accessibilityLabel={accessibilityLabel}
+      testID={testID}
+    >
+      {content}
+    </View>
+  );
+};
+
+export const Chip = memo(ChipComponent);
+Chip.displayName = 'Chip';

package/src/chip/index.ts

@@ -0,0 +1,2 @@
+export { Chip } from './Chip';
+export type { ChipProps, ChipVariant, ChipColor, ChipSize } from './types';

package/src/chip/types.ts

@@ -0,0 +1,32 @@
+import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
+
+export type ChipVariant = 'solid' | 'outlined' | 'soft';
+export type ChipColor = 'default' | 'primary' | 'success' | 'warning' | 'error';
+export type ChipSize = 'small' | 'medium' | 'large';
+
+export interface ChipProps {
+  /** Text content of the chip. */
+  children?: React.ReactNode;
+  /** Visual variant. */
+  variant?: ChipVariant;
+  /** Semantic color. */
+  color?: ChipColor;
+  /** Size preset. */
+  size?: ChipSize;
+  /** Icon rendered before the label. */
+  startIcon?: React.ReactNode;
+  /** Icon or close button rendered after the label. */
+  endIcon?: React.ReactNode;
+  /** Called when the chip is pressed. Makes the chip interactive. */
+  onPress?: () => void;
+  /** Called when the close/end icon is pressed. */
+  onClose?: () => void;
+  /** Whether the chip is in a selected state. */
+  selected?: boolean;
+  /** Whether the chip is disabled. */
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+  accessibilityLabel?: string;
+  testID?: string;
+}

package/src/index.ts

@@ -52,6 +52,14 @@ export { SearchInput } from './search-input';
 export { BottomSheet } from './bottom-sheet';
 export type { BottomSheetRef, BottomSheetProps } from './bottom-sheet';
 
+// Data display
+export * from './card';
+export * from './badge';
+export * from './chip';
+export * as Tabs from './tabs';
+export * from './checkbox';
+export * as Accordion from './accordion';
+
 // Overlay components
 export * as Admonition from './admonition';
 export * as Menu from './menu';