@oxyhq/bloom 0.1.14 → 0.1.16

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';

package/src/tabs/Tabs.tsx

@@ -0,0 +1,218 @@
+import React, {
+  createContext,
+  memo,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
+import {
+  View,
+  Text,
+  Pressable,
+  Animated,
+  ScrollView,
+  type ViewStyle,
+  type TextStyle,
+  type LayoutChangeEvent,
+} from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import { animation, borderRadius, space } from '../styles/tokens';
+import type { TabsProps, TabProps, TabPanelProps, TabsVariant } from './types';
+
+interface TabsContextValue {
+  value: string;
+  onValueChange: (value: string) => void;
+  variant: TabsVariant;
+}
+
+const TabsContext = createContext<TabsContextValue>({
+  value: '',
+  onValueChange: () => {},
+  variant: 'underline',
+});
+
+const TabsBarComponent: React.FC<TabsProps> = ({
+  value,
+  onValueChange,
+  variant = 'underline',
+  children,
+  style,
+  testID,
+}) => {
+  const theme = useTheme();
+
+  const contextValue = useMemo(
+    () => ({ value, onValueChange, variant }),
+    [value, onValueChange, variant],
+  );
+
+  const containerStyle = useMemo((): ViewStyle => {
+    const base: ViewStyle = {
+      flexDirection: 'row',
+      alignItems: 'center',
+    };
+
+    switch (variant) {
+      case 'underline':
+        base.borderBottomWidth = 1;
+        base.borderBottomColor = theme.colors.borderLight;
+        break;
+      case 'filled':
+        base.backgroundColor = theme.colors.backgroundSecondary;
+        base.borderRadius = borderRadius.sm;
+        base.padding = 2;
+        break;
+      case 'outlined':
+        base.borderWidth = 1;
+        base.borderColor = theme.colors.border;
+        base.borderRadius = borderRadius.sm;
+        base.padding = 2;
+        break;
+    }
+
+    return base;
+  }, [variant, theme]);
+
+  return (
+    <TabsContext.Provider value={contextValue}>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={[containerStyle, style]}
+        testID={testID}
+      >
+        {children}
+      </ScrollView>
+    </TabsContext.Provider>
+  );
+};
+
+const TabComponent: React.FC<TabProps> = ({
+  value,
+  label,
+  icon,
+  disabled = false,
+  style,
+  textStyle,
+}) => {
+  const theme = useTheme();
+  const { value: selectedValue, onValueChange, variant } = useContext(TabsContext);
+  const isSelected = value === selectedValue;
+  const scaleAnim = useRef(new Animated.Value(1)).current;
+
+  const handlePress = useCallback(() => {
+    if (!disabled) {
+      onValueChange(value);
+    }
+  }, [value, disabled, onValueChange]);
+
+  const onPressIn = useCallback(() => {
+    Animated.spring(scaleAnim, {
+      toValue: 0.97,
+      useNativeDriver: true,
+      ...animation.spring.snappy,
+    }).start();
+  }, [scaleAnim]);
+
+  const onPressOut = useCallback(() => {
+    Animated.spring(scaleAnim, {
+      toValue: 1,
+      useNativeDriver: true,
+      ...animation.spring.gentle,
+    }).start();
+  }, [scaleAnim]);
+
+  const tabStyle = useMemo((): ViewStyle => {
+    const base: ViewStyle = {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingHorizontal: space.lg,
+      paddingVertical: space.sm,
+      gap: space.xs,
+    };
+
+    switch (variant) {
+      case 'underline':
+        if (isSelected) {
+          base.borderBottomWidth = 2;
+          base.borderBottomColor = theme.colors.primary;
+          base.marginBottom = -1; // overlap container border
+        }
+        break;
+      case 'filled':
+        if (isSelected) {
+          base.backgroundColor = theme.colors.card;
+          base.borderRadius = borderRadius.xs + 2;
+          base.shadowColor = theme.colors.shadow;
+          base.shadowOffset = { width: 0, height: 1 };
+          base.shadowOpacity = 0.1;
+          base.shadowRadius = 2;
+          base.elevation = 1;
+        }
+        break;
+      case 'outlined':
+        if (isSelected) {
+          base.backgroundColor = theme.colors.primary;
+          base.borderRadius = borderRadius.xs + 2;
+        }
+        break;
+    }
+
+    return base;
+  }, [variant, isSelected, theme]);
+
+  const labelStyle = useMemo((): TextStyle => {
+    const base: TextStyle = {
+      fontSize: 14,
+      fontWeight: isSelected ? '600' : '500',
+    };
+
+    if (variant === 'outlined' && isSelected) {
+      base.color = '#fff';
+    } else if (isSelected) {
+      base.color = theme.colors.primary;
+    } else {
+      base.color = theme.colors.textSecondary;
+    }
+
+    return base;
+  }, [variant, isSelected, theme]);
+
+  return (
+    <Animated.View style={{ transform: [{ scale: scaleAnim }] }}>
+      <Pressable
+        style={[tabStyle, disabled && { opacity: 0.4 }, style]}
+        onPress={handlePress}
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
+        disabled={disabled}
+        accessibilityRole="tab"
+        accessibilityState={{ selected: isSelected, disabled }}
+      >
+        {icon}
+        <Text style={[labelStyle, textStyle]}>{label}</Text>
+      </Pressable>
+    </Animated.View>
+  );
+};
+
+const TabPanelComponent: React.FC<TabPanelProps> = ({ value, children, style }) => {
+  const { value: selectedValue } = useContext(TabsContext);
+
+  if (value !== selectedValue) return null;
+
+  return <View style={style}>{children}</View>;
+};
+
+export const TabsBar = memo(TabsBarComponent);
+TabsBar.displayName = 'TabsBar';
+
+export const Tab = memo(TabComponent);
+Tab.displayName = 'Tab';
+
+export const TabPanel = memo(TabPanelComponent);
+TabPanel.displayName = 'TabPanel';

package/src/tabs/index.ts

@@ -0,0 +1,2 @@
+export { TabsBar, Tab, TabPanel } from './Tabs';
+export type { TabsProps, TabProps, TabPanelProps, TabsVariant } from './types';

package/src/tabs/types.ts

@@ -0,0 +1,37 @@
+import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
+
+export type TabsVariant = 'underline' | 'filled' | 'outlined';
+
+export interface TabsProps {
+  /** The currently selected tab value. */
+  value: string;
+  /** Called when a tab is selected. */
+  onValueChange: (value: string) => void;
+  /** Visual variant for the tab bar. */
+  variant?: TabsVariant;
+  /** The tab items. Must be Tab components. */
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export interface TabProps {
+  /** Unique value identifying this tab. */
+  value: string;
+  /** Tab label text. */
+  label: string;
+  /** Icon rendered before the label. */
+  icon?: React.ReactNode;
+  /** Whether this tab is disabled. */
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+}
+
+export interface TabPanelProps {
+  /** The tab value this panel corresponds to. */
+  value: string;
+  /** Panel content. */
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}