@crafter/rn-ai-elements 0.0.1

package/src/primitives/Button.tsx

@@ -0,0 +1,213 @@
+import React, { useCallback, type ReactNode } from 'react';
+import {
+  Pressable,
+  Text,
+  View,
+  StyleSheet,
+  type PressableProps,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native';
+import { useAIElementsTheme } from '../theme';
+import type { AIElementsTheme } from '../theme';
+
+export type ButtonVariant =
+  | 'default'
+  | 'secondary'
+  | 'outline'
+  | 'ghost'
+  | 'destructive';
+
+export type ButtonSize = 'sm' | 'md' | 'lg';
+
+export interface ButtonProps
+  extends Omit<PressableProps, 'style' | 'children'> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  disabled?: boolean;
+  onPress?: PressableProps['onPress'];
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+  leftIcon?: ReactNode;
+  rightIcon?: ReactNode;
+}
+
+function getVariantStyles(
+  variant: ButtonVariant,
+  theme: AIElementsTheme
+): { container: ViewStyle; text: TextStyle } {
+  const { colors, radius } = theme;
+
+  switch (variant) {
+    case 'default':
+      return {
+        container: {
+          backgroundColor: colors.primary,
+          borderRadius: radius.md,
+        },
+        text: { color: colors.primaryForeground },
+      };
+    case 'secondary':
+      return {
+        container: {
+          backgroundColor: colors.secondary,
+          borderRadius: radius.md,
+        },
+        text: { color: colors.secondaryForeground },
+      };
+    case 'outline':
+      return {
+        container: {
+          backgroundColor: 'transparent',
+          borderWidth: 1,
+          borderColor: colors.border,
+          borderRadius: radius.md,
+        },
+        text: { color: colors.foreground },
+      };
+    case 'ghost':
+      return {
+        container: {
+          backgroundColor: 'transparent',
+          borderRadius: radius.md,
+        },
+        text: { color: colors.foreground },
+      };
+    case 'destructive':
+      return {
+        container: {
+          backgroundColor: colors.destructive,
+          borderRadius: radius.md,
+        },
+        text: { color: colors.destructiveForeground },
+      };
+  }
+}
+
+function getSizeStyles(
+  size: ButtonSize,
+  theme: AIElementsTheme
+): { container: ViewStyle; text: TextStyle } {
+  const { spacing, typography } = theme;
+
+  switch (size) {
+    case 'sm':
+      return {
+        container: {
+          paddingVertical: spacing.xs,
+          paddingHorizontal: spacing.sm,
+          minHeight: 32,
+        },
+        text: {
+          fontSize: typography.fontSize.sm,
+        },
+      };
+    case 'md':
+      return {
+        container: {
+          paddingVertical: spacing.sm,
+          paddingHorizontal: spacing.lg,
+          minHeight: 40,
+        },
+        text: {
+          fontSize: typography.fontSize.md,
+        },
+      };
+    case 'lg':
+      return {
+        container: {
+          paddingVertical: spacing.md,
+          paddingHorizontal: spacing.xl,
+          minHeight: 48,
+        },
+        text: {
+          fontSize: typography.fontSize.lg,
+        },
+      };
+  }
+}
+
+export function Button({
+  variant = 'default',
+  size = 'md',
+  disabled = false,
+  onPress,
+  children,
+  style,
+  leftIcon,
+  rightIcon,
+  ...pressableProps
+}: ButtonProps) {
+  const theme = useAIElementsTheme();
+  const variantStyles = getVariantStyles(variant, theme);
+  const sizeStyles = getSizeStyles(size, theme);
+
+  const renderContent = useCallback(
+    (pressed: boolean) => {
+      const textStyle: TextStyle = {
+        ...sizeStyles.text,
+        ...variantStyles.text,
+        fontWeight: theme.typography.fontWeight.semibold as TextStyle['fontWeight'],
+        fontFamily: theme.typography.fontFamily,
+        opacity: disabled ? 0.5 : pressed ? 0.8 : 1,
+      };
+
+      return (
+        <View style={styles.content}>
+          {leftIcon && <View style={styles.iconLeft}>{leftIcon}</View>}
+          {typeof children === 'string' ? (
+            <Text style={textStyle}>{children}</Text>
+          ) : (
+            children
+          )}
+          {rightIcon && <View style={styles.iconRight}>{rightIcon}</View>}
+        </View>
+      );
+    },
+    [children, leftIcon, rightIcon, sizeStyles.text, variantStyles.text, theme, disabled]
+  );
+
+  return (
+    <Pressable
+      {...pressableProps}
+      onPress={onPress}
+      disabled={disabled}
+      style={({ pressed }) => [
+        styles.base,
+        variantStyles.container,
+        sizeStyles.container,
+        disabled && styles.disabled,
+        pressed && styles.pressed,
+        style,
+      ]}
+    >
+      {({ pressed }) => renderContent(pressed)}
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  base: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  content: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+  pressed: {
+    opacity: 0.7,
+  },
+  iconLeft: {
+    marginRight: 8,
+  },
+  iconRight: {
+    marginLeft: 8,
+  },
+});

package/src/primitives/Card.tsx

@@ -0,0 +1,221 @@
+import React, { createContext, useContext, type ReactNode } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  Platform,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native';
+import { useAIElementsTheme } from '../theme';
+import type { AIElementsTheme } from '../theme';
+
+// ---------------------------------------------------------------------------
+// Context (shared theme reference for compound children)
+// ---------------------------------------------------------------------------
+
+const CardContext = createContext<AIElementsTheme | null>(null);
+
+function useCardTheme(): AIElementsTheme {
+  const ctx = useContext(CardContext);
+  if (!ctx) {
+    throw new Error('Card compound components must be used within a <Card>.');
+  }
+  return ctx;
+}
+
+// ---------------------------------------------------------------------------
+// Prop types
+// ---------------------------------------------------------------------------
+
+export interface CardProps {
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export interface CardHeaderProps {
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export interface CardTitleProps {
+  children?: ReactNode;
+  style?: StyleProp<TextStyle>;
+}
+
+export interface CardDescriptionProps {
+  children?: ReactNode;
+  style?: StyleProp<TextStyle>;
+}
+
+export interface CardContentProps {
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export interface CardFooterProps {
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+// ---------------------------------------------------------------------------
+// Components
+// ---------------------------------------------------------------------------
+
+export function Card({ children, style }: CardProps) {
+  const theme = useAIElementsTheme();
+  const { colors, radius } = theme;
+
+  const shadowStyle: ViewStyle = Platform.select({
+    ios: {
+      shadowColor: '#000',
+      shadowOffset: { width: 0, height: 1 },
+      shadowOpacity: 0.05,
+      shadowRadius: 2,
+    },
+    android: {
+      elevation: 1,
+    },
+    default: {},
+  }) as ViewStyle;
+
+  return (
+    <CardContext.Provider value={theme}>
+      <View
+        style={[
+          styles.card,
+          {
+            backgroundColor: colors.card,
+            borderColor: colors.border,
+            borderRadius: radius.lg,
+          },
+          shadowStyle,
+          style,
+        ]}
+      >
+        {children}
+      </View>
+    </CardContext.Provider>
+  );
+}
+
+export function CardHeader({ children, style }: CardHeaderProps) {
+  const theme = useCardTheme();
+
+  return (
+    <View
+      style={[
+        styles.header,
+        { padding: theme.spacing.lg },
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  );
+}
+
+export function CardTitle({ children, style }: CardTitleProps) {
+  const theme = useCardTheme();
+
+  return (
+    <Text
+      style={[
+        {
+          color: theme.colors.cardForeground,
+          fontSize: theme.typography.fontSize.lg,
+          fontWeight: theme.typography.fontWeight.semibold as TextStyle['fontWeight'],
+          fontFamily: theme.typography.fontFamily,
+          lineHeight:
+            theme.typography.fontSize.lg * theme.typography.lineHeight.tight,
+        },
+        style,
+      ]}
+    >
+      {children}
+    </Text>
+  );
+}
+
+export function CardDescription({ children, style }: CardDescriptionProps) {
+  const theme = useCardTheme();
+
+  return (
+    <Text
+      style={[
+        {
+          color: theme.colors.mutedForeground,
+          fontSize: theme.typography.fontSize.sm,
+          fontFamily: theme.typography.fontFamily,
+          lineHeight:
+            theme.typography.fontSize.sm * theme.typography.lineHeight.normal,
+          marginTop: theme.spacing.xs,
+        },
+        style,
+      ]}
+    >
+      {children}
+    </Text>
+  );
+}
+
+export function CardContent({ children, style }: CardContentProps) {
+  const theme = useCardTheme();
+
+  return (
+    <View
+      style={[
+        styles.content,
+        {
+          paddingHorizontal: theme.spacing.lg,
+          paddingBottom: theme.spacing.lg,
+        },
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  );
+}
+
+export function CardFooter({ children, style }: CardFooterProps) {
+  const theme = useCardTheme();
+
+  return (
+    <View
+      style={[
+        styles.footer,
+        {
+          paddingHorizontal: theme.spacing.lg,
+          paddingBottom: theme.spacing.lg,
+          borderTopColor: theme.colors.border,
+        },
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+const styles = StyleSheet.create({
+  card: {
+    borderWidth: 1,
+    overflow: 'hidden',
+  },
+  header: {
+    flexDirection: 'column',
+  },
+  content: {},
+  footer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderTopWidth: StyleSheet.hairlineWidth,
+    paddingTop: 16,
+  },
+});

package/src/primitives/Collapsible.tsx

@@ -0,0 +1,168 @@
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useState,
+  type ReactNode,
+} from 'react';
+import { Pressable, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+
+// ---------------------------------------------------------------------------
+// Context
+// ---------------------------------------------------------------------------
+
+interface CollapsibleContextValue {
+  open: boolean;
+  onToggle: () => void;
+}
+
+const CollapsibleContext = createContext<CollapsibleContextValue | null>(null);
+
+function useCollapsibleContext(): CollapsibleContextValue {
+  const ctx = useContext(CollapsibleContext);
+  if (!ctx) {
+    throw new Error(
+      'Collapsible compound components must be used within a <Collapsible>.'
+    );
+  }
+  return ctx;
+}
+
+// ---------------------------------------------------------------------------
+// Prop types
+// ---------------------------------------------------------------------------
+
+export interface CollapsibleProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export interface CollapsibleTriggerProps {
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export interface CollapsibleContentProps {
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+// ---------------------------------------------------------------------------
+// Collapsible (parent)
+// ---------------------------------------------------------------------------
+
+export function Collapsible({
+  open: controlledOpen,
+  onOpenChange,
+  children,
+  style,
+}: CollapsibleProps) {
+  const [internalOpen, setInternalOpen] = useState(false);
+
+  const isControlled = controlledOpen !== undefined;
+  const open = isControlled ? controlledOpen : internalOpen;
+
+  const onToggle = useCallback(() => {
+    const next = !open;
+    if (!isControlled) {
+      setInternalOpen(next);
+    }
+    onOpenChange?.(next);
+  }, [open, isControlled, onOpenChange]);
+
+  return (
+    <CollapsibleContext.Provider value={{ open, onToggle }}>
+      <Animated.View style={style}>{children}</Animated.View>
+    </CollapsibleContext.Provider>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// CollapsibleTrigger
+// ---------------------------------------------------------------------------
+
+export function CollapsibleTrigger({
+  children,
+  style,
+}: CollapsibleTriggerProps) {
+  const { onToggle } = useCollapsibleContext();
+
+  return (
+    <Pressable
+      onPress={onToggle}
+      style={({ pressed }) => [pressed && styles.pressed, style]}
+    >
+      {children}
+    </Pressable>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// CollapsibleContent (animated)
+// ---------------------------------------------------------------------------
+
+export function CollapsibleContent({
+  children,
+  style,
+}: CollapsibleContentProps) {
+  const { open } = useCollapsibleContext();
+  const measuredHeight = useSharedValue(0);
+
+  const progress = useDerivedValue(() =>
+    withTiming(open ? 1 : 0, { duration: 250 })
+  );
+
+  const animatedContainerStyle = useAnimatedStyle(() => ({
+    height: progress.value * measuredHeight.value,
+    opacity: progress.value,
+    overflow: 'hidden' as const,
+  }));
+
+  const onLayout = useCallback(
+    (event: { nativeEvent: { layout: { height: number } } }) => {
+      const layoutHeight = event.nativeEvent.layout.height;
+      if (layoutHeight > 0) {
+        measuredHeight.value = layoutHeight;
+      }
+    },
+    [measuredHeight]
+  );
+
+  return (
+    <Animated.View style={[animatedContainerStyle as any, style]}>
+      <Animated.View
+        style={styles.inner}
+        onLayout={onLayout}
+      >
+        {children}
+      </Animated.View>
+    </Animated.View>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+const styles = StyleSheet.create({
+  pressed: {
+    opacity: 0.7,
+  },
+  inner: {
+    // Position absolute so we can measure the natural height without
+    // the parent constraining it while collapsed. Once the parent animates
+    // to the full measured height the content is fully visible.
+    position: 'absolute',
+    width: '100%',
+    top: 0,
+    left: 0,
+  },
+});

package/src/primitives/ScrollArea.tsx

@@ -0,0 +1,53 @@
+import React, { type ReactNode } from 'react';
+import {
+  ScrollView,
+  StyleSheet,
+  type ScrollViewProps,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { useAIElementsTheme } from '../theme';
+
+export interface ScrollAreaProps
+  extends Omit<ScrollViewProps, 'style' | 'contentContainerStyle'> {
+  horizontal?: boolean;
+  style?: StyleProp<ViewStyle>;
+  contentContainerStyle?: StyleProp<ViewStyle>;
+  children?: ReactNode;
+}
+
+export function ScrollArea({
+  horizontal = false,
+  style,
+  contentContainerStyle,
+  children,
+  ...scrollViewProps
+}: ScrollAreaProps) {
+  const theme = useAIElementsTheme();
+
+  return (
+    <ScrollView
+      {...scrollViewProps}
+      horizontal={horizontal}
+      showsVerticalScrollIndicator={false}
+      showsHorizontalScrollIndicator={false}
+      style={[
+        styles.base,
+        { backgroundColor: theme.colors.background },
+        style,
+      ]}
+      contentContainerStyle={[styles.contentContainer, contentContainerStyle]}
+    >
+      {children}
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  base: {
+    flex: 1,
+  },
+  contentContainer: {
+    flexGrow: 1,
+  },
+});

package/src/primitives/index.ts

@@ -0,0 +1,36 @@
+export { Button } from './Button';
+export type { ButtonProps, ButtonVariant, ButtonSize } from './Button';
+
+export { Badge } from './Badge';
+export type { BadgeProps, BadgeVariant } from './Badge';
+
+export {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+} from './Card';
+export type {
+  CardProps,
+  CardHeaderProps,
+  CardTitleProps,
+  CardDescriptionProps,
+  CardContentProps,
+  CardFooterProps,
+} from './Card';
+
+export {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+} from './Collapsible';
+export type {
+  CollapsibleProps,
+  CollapsibleTriggerProps,
+  CollapsibleContentProps,
+} from './Collapsible';
+
+export { ScrollArea } from './ScrollArea';
+export type { ScrollAreaProps } from './ScrollArea';