@oxyhq/bloom 0.1.18 → 0.1.20

package/src/button/Button.tsx

@@ -31,7 +31,7 @@ const SIZE_CONFIG = {
 const ICON_HIT_SLOP = { top: 10, bottom: 10, left: 10, right: 10 } as const;
 
 const PRESS_SCALE = 0.97;
-const SCALE_VARIANTS = new Set<string>(['primary', 'secondary']);
+const SCALE_VARIANTS = new Set<string>(['primary', 'secondary', 'inverse']);
 
 const ButtonComponent: React.FC<ButtonProps> = ({
   onPress,
@@ -97,6 +97,10 @@ const ButtonComponent: React.FC<ButtonProps> = ({
         styles.borderColor = theme.colors.border;
         styles.borderRadius = 20;
         break;
+      case 'inverse':
+        styles.backgroundColor = '#FFFFFF';
+        styles.borderRadius = 20;
+        break;
       case 'icon':
         styles.backgroundColor = theme.colors.background;
         styles.borderWidth = 1;
@@ -134,6 +138,9 @@ const ButtonComponent: React.FC<ButtonProps> = ({
       case 'secondary':
         styles.color = theme.colors.text;
         break;
+      case 'inverse':
+        styles.color = '#000000';
+        break;
       case 'ghost':
       case 'text':
         styles.color = theme.colors.primary;
@@ -199,6 +206,11 @@ export const GhostButton = memo((props: Omit<ButtonProps, 'variant'>) => (
 ));
 GhostButton.displayName = 'GhostButton';
 
+export const InverseButton = memo((props: Omit<ButtonProps, 'variant'>) => (
+  <Button {...props} variant="inverse" />
+));
+InverseButton.displayName = 'InverseButton';
+
 export const TextButton = memo((props: Omit<ButtonProps, 'variant'>) => (
   <Button {...props} variant="text" />
 ));

package/src/button/types.ts

@@ -1,6 +1,6 @@
 import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
 
-export type ButtonVariant = 'primary' | 'secondary' | 'icon' | 'ghost' | 'text';
+export type ButtonVariant = 'primary' | 'secondary' | 'inverse' | 'icon' | 'ghost' | 'text';
 
 export type ButtonSize = 'small' | 'medium' | 'large';
 

package/src/index.ts

@@ -60,6 +60,9 @@ export * as Tabs from './tabs';
 export * from './checkbox';
 export * as Accordion from './accordion';
 
+// Settings / Grouped list
+export * from './settings-list';
+
 // Overlay components
 export * as Admonition from './admonition';
 export * as Menu from './menu';

package/src/settings-list/SettingsList.tsx

@@ -0,0 +1,233 @@
+import React, { memo } from 'react';
+import { View, Text, Pressable, StyleSheet } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+
+import { useTheme } from '../theme/use-theme';
+import type {
+  SettingsListItemProps,
+  SettingsListGroupProps,
+  SettingsListDividerProps,
+} from './types';
+
+// ── Chevron icon (inline to avoid external dependency) ──────────
+const Chevron = memo(({ size = 16, color }: { size?: number; color: string }) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M9.29 6.71c-.39.39-.39 1.02 0 1.41L13.17 12l-3.88 3.88c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41L10.7 6.7c-.38-.38-1.02-.38-1.41.01z"
+      fill={color}
+    />
+  </Svg>
+));
+Chevron.displayName = 'Chevron';
+
+// ── SettingsListItem ────────────────────────────────────────────
+
+export const SettingsListItem = memo<SettingsListItemProps>(function SettingsListItem({
+  icon,
+  title,
+  description,
+  value,
+  rightElement,
+  showChevron,
+  destructive = false,
+  onPress,
+  disabled = false,
+}) {
+  const theme = useTheme();
+  const hasChevron = showChevron ?? Boolean(onPress);
+  const titleColor = destructive ? theme.colors.error : theme.colors.text;
+  const pressedOpacity = disabled ? 1 : 0.6;
+
+  const content = (
+    <View style={styles.itemContainer}>
+      {icon ? (
+        <View style={styles.iconContainer}>{icon}</View>
+      ) : null}
+
+      <View style={styles.textContainer}>
+        <Text
+          style={[styles.title, { color: titleColor }]}
+          numberOfLines={1}
+        >
+          {title}
+        </Text>
+        {description ? (
+          <Text
+            style={[styles.description, { color: theme.colors.textSecondary }]}
+            numberOfLines={2}
+          >
+            {description}
+          </Text>
+        ) : null}
+      </View>
+
+      {value ? (
+        <Text
+          style={[styles.value, { color: theme.colors.textSecondary }]}
+          numberOfLines={1}
+        >
+          {value}
+        </Text>
+      ) : null}
+
+      {rightElement}
+
+      {hasChevron ? (
+        <Chevron size={16} color={theme.colors.textTertiary} />
+      ) : null}
+    </View>
+  );
+
+  if (onPress) {
+    return (
+      <Pressable
+        onPress={onPress}
+        disabled={disabled}
+        android_ripple={{ color: theme.colors.border }}
+        style={({ pressed }) => [
+          disabled && styles.disabled,
+          pressed && { opacity: pressedOpacity },
+        ]}
+      >
+        {content}
+      </Pressable>
+    );
+  }
+
+  return content;
+});
+
+// ── SettingsListGroup ───────────────────────────────────────────
+
+export const SettingsListGroup = memo<SettingsListGroupProps>(function SettingsListGroup({
+  title,
+  footer,
+  children,
+  style,
+}) {
+  const theme = useTheme();
+  const filteredChildren = React.Children.toArray(children).filter(Boolean);
+
+  return (
+    <View style={[styles.groupContainer, style]}>
+      {title ? (
+        <Text style={[styles.groupTitle, { color: theme.colors.textSecondary }]}>
+          {title}
+        </Text>
+      ) : null}
+
+      <View
+        style={[
+          styles.groupCard,
+          { backgroundColor: theme.colors.backgroundSecondary },
+        ]}
+      >
+        {filteredChildren.map((child, index) => (
+          <React.Fragment key={index}>
+            {child}
+            {index < filteredChildren.length - 1 ? (
+              <View
+                style={[
+                  styles.divider,
+                  { backgroundColor: theme.colors.border, opacity: 0.3 },
+                ]}
+              />
+            ) : null}
+          </React.Fragment>
+        ))}
+      </View>
+
+      {footer ? (
+        <Text style={[styles.groupFooter, { color: theme.colors.textTertiary }]}>
+          {footer}
+        </Text>
+      ) : null}
+    </View>
+  );
+});
+
+// ── SettingsListDivider ─────────────────────────────────────────
+
+export const SettingsListDivider = memo<SettingsListDividerProps>(
+  function SettingsListDivider({ inset = 52 }) {
+    const theme = useTheme();
+    return (
+      <View
+        style={[
+          styles.divider,
+          { marginLeft: inset, backgroundColor: theme.colors.border, opacity: 0.3 },
+        ]}
+      />
+    );
+  }
+);
+
+// ── Styles ──────────────────────────────────────────────────────
+
+const styles = StyleSheet.create({
+  // Item
+  itemContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    minHeight: 44,
+    gap: 12,
+  },
+  iconContainer: {
+    width: 20,
+    height: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  textContainer: {
+    flex: 1,
+  },
+  title: {
+    fontSize: 15,
+    fontWeight: '500',
+    lineHeight: 20,
+  },
+  description: {
+    fontSize: 13,
+    lineHeight: 17,
+  },
+  value: {
+    fontSize: 13,
+    lineHeight: 17,
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+
+  // Group
+  groupContainer: {
+    marginBottom: 16,
+  },
+  groupCard: {
+    marginHorizontal: 16,
+    borderRadius: 16,
+    overflow: 'hidden',
+  },
+  groupTitle: {
+    fontSize: 11,
+    fontWeight: '600',
+    textTransform: 'uppercase',
+    letterSpacing: 0.6,
+    paddingHorizontal: 20,
+    paddingTop: 4,
+    paddingBottom: 6,
+  },
+  groupFooter: {
+    fontSize: 12,
+    lineHeight: 16,
+    paddingHorizontal: 20,
+    paddingTop: 6,
+  },
+
+  // Divider
+  divider: {
+    height: StyleSheet.hairlineWidth,
+    marginLeft: 16,
+  },
+});

package/src/settings-list/index.ts

@@ -0,0 +1,2 @@
+export { SettingsListItem, SettingsListGroup, SettingsListDivider } from './SettingsList';
+export type { SettingsListItemProps, SettingsListGroupProps, SettingsListDividerProps } from './types';

package/src/settings-list/types.ts

@@ -0,0 +1,38 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export interface SettingsListItemProps {
+  /** Icon element (e.g. SVG icon component) or Ionicons-style string */
+  icon?: React.ReactNode;
+  /** Primary label */
+  title: string;
+  /** Secondary description text below title */
+  description?: string;
+  /** Right-side value text (e.g. "English", "On") */
+  value?: string;
+  /** Custom right-side element (toggle, badge, etc.) */
+  rightElement?: React.ReactNode;
+  /** Show trailing chevron (default: true when onPress is set) */
+  showChevron?: boolean;
+  /** Destructive action styling (red text) */
+  destructive?: boolean;
+  /** Press handler */
+  onPress?: () => void;
+  /** Disabled state */
+  disabled?: boolean;
+}
+
+export interface SettingsListGroupProps {
+  /** Optional section header text */
+  title?: string;
+  /** Optional section footer text */
+  footer?: string;
+  /** Group items */
+  children: React.ReactNode;
+  /** Override group container style */
+  style?: StyleProp<ViewStyle>;
+}
+
+export interface SettingsListDividerProps {
+  /** Inset from left edge to align with text (default: 52) */
+  inset?: number;
+}