@campxdev/react-native-blueprint 0.1.14 → 0.1.16

package/src/components/Input/Button/Button.tsx

@@ -1,16 +1,20 @@
+// @ts-nocheck
 import * as React from 'react';
 import {
   Pressable,
   View,
   Text as RNText,
+  type GestureResponderEvent,
   type StyleProp,
   type ViewStyle,
   type PressableProps,
 } from 'react-native';
 import { cssInterop } from 'nativewind';
+import { SquircleView } from 'react-native-figma-squircle';
 import { cva, type VariantProps } from 'class-variance-authority';
 
 import { cn } from '../../../lib/utils';
+import { useThemeColors } from '../../../lib/theme';
 
 // NativeWind interop (className -> style)
 cssInterop(Pressable, { className: 'style' });
@@ -30,19 +34,66 @@ export const ButtonVariants = {
  * ✅ No inline styles (satisfies react-native/no-inline-styles)
  */
 function DummyIcon({ testID }: { testID?: string }) {
-  return <View testID={testID} className="w-4 h-4 rounded bg-black/60" />;
+  return <View testID={testID} className="w-4 h-4 rounded bg-text-inverse" />;
 }
 
-const buttonVariants = cva('flex-row items-center justify-center rounded-md', {
+/**
+ * Returns squircle fill & stroke colors per variant from THEME tokens
+ */
+function useVariantSquircleParams(variant: string) {
+  const colors = useThemeColors();
+
+  const map: Record<
+    string,
+    { fillColor: string; strokeColor: string; strokeWidth: number }
+  > = {
+    default: {
+      fillColor: colors.brandPrimary,
+      strokeColor: 'transparent',
+      strokeWidth: 0,
+    },
+    secondary: {
+      fillColor: colors.brandSecondary,
+      strokeColor: colors.brandPrimary,
+      strokeWidth: 1,
+    },
+    outline: {
+      fillColor: 'transparent',
+      strokeColor: colors.border,
+      strokeWidth: 1,
+    },
+    ghost: {
+      fillColor: 'transparent',
+      strokeColor: 'transparent',
+      strokeWidth: 0,
+    },
+    destructive: {
+      fillColor: colors.destructive,
+      strokeColor: 'transparent',
+      strokeWidth: 0,
+    },
+    link: {
+      fillColor: 'transparent',
+      strokeColor: 'transparent',
+      strokeWidth: 0,
+    },
+  };
+
+  return map[variant] ?? map.default;
+}
+
+const CORNER_RADIUS = 8; // radius-lg
+const CORNER_SMOOTHING = 1; // maximum smoothing
+
+const buttonVariants = cva('flex-row items-center justify-center', {
   variants: {
     variant: {
-      default: 'bg-brand-primary active:opacity-90',
-      secondary:
-        'bg-brand-secondary border border-brand-primary active:opacity-90',
-      outline: 'bg-transparent border border-border-default active:opacity-90',
-      ghost: 'bg-transparent active:opacity-90',
-      destructive: 'bg-highlight-alert-red active:opacity-90',
-      link: 'bg-transparent',
+      default: 'gap-2 active:opacity-90',
+      secondary: 'active:opacity-90',
+      outline: 'active:opacity-90',
+      ghost: 'active:opacity-90',
+      destructive: 'active:opacity-90',
+      link: '',
     },
     size: {
       // ✅ Figma-like sizing
@@ -77,7 +128,7 @@ const buttonVariants = cva('flex-row items-center justify-center rounded-md', {
 const buttonTextVariants = cva('font-semibold', {
   variants: {
     variant: {
-      default: 'text-primary-foreground',
+      default: 'text-text-inverse',
       secondary: 'text-foreground',
       outline: 'text-foreground',
       ghost: 'text-foreground',
@@ -177,44 +228,60 @@ export function Button(props: ButtonProps) {
   // spacing only when icons exist
   const hasIcons = Boolean(showLeftIcon || showRightIcon);
 
-  // For link variant: we keep Pressable minimal
-  // - still show label unless icon-only (rare)
-  // - can show icons with gap
+  const squircleParams = useVariantSquircleParams(v);
+
+  const handlePress = React.useCallback(
+    (e: GestureResponderEvent) => {
+      if (d) return;
+      onPress?.(e);
+    },
+    [d, onPress]
+  );
+
   return (
-    <Pressable
-      testID={testID ?? 'button'}
-      accessibilityRole="button"
-      accessibilityState={{ disabled: d }}
-      disabled={d}
-      onPress={d ? undefined : onPress}
-      className={cn(
-        buttonVariants({
-          variant: v,
-          size: s,
-          disabled: d,
-          hasIcons,
-        })
-      )}
-      style={style}
-      {...rest}
-    >
-      {showLeftIcon ? <DummyIcon testID="button-left-icon" /> : null}
-
-      {!isIconOnly ? (
-        <RNText
-          testID="button-label"
+    <View style={style}>
+      <SquircleView
+        squircleParams={{
+          cornerRadius: CORNER_RADIUS,
+          cornerSmoothing: CORNER_SMOOTHING,
+          ...squircleParams,
+        }}
+      >
+        <Pressable
+          testID={testID ?? 'button'}
+          accessibilityRole="button"
+          accessibilityState={{ disabled: d }}
+          disabled={d}
+          onPress={handlePress}
           className={cn(
-            buttonTextVariants({ variant: v, size: s, disabled: d })
+            buttonVariants({
+              variant: v,
+              size: s,
+              disabled: d,
+              hasIcons,
+            })
           )}
-          numberOfLines={1}
-          ellipsizeMode="tail"
+          {...rest}
         >
-          {children}
-        </RNText>
-      ) : null}
+          {showLeftIcon ? <DummyIcon testID="button-left-icon" /> : null}
+
+          {!isIconOnly ? (
+            <RNText
+              testID="button-label"
+              className={cn(
+                buttonTextVariants({ variant: v, size: s, disabled: d })
+              )}
+              numberOfLines={1}
+              ellipsizeMode="tail"
+            >
+              {children}
+            </RNText>
+          ) : null}
 
-      {showRightIcon ? <DummyIcon testID="button-right-icon" /> : null}
-    </Pressable>
+          {showRightIcon ? <DummyIcon testID="button-right-icon" /> : null}
+        </Pressable>
+      </SquircleView>
+    </View>
   );
 }
 

package/src/components/Input/Checkbox/Checkbox.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import * as React from 'react';
 import { Pressable, View, type StyleProp, type ViewStyle } from 'react-native';
 import { cssInterop } from 'nativewind';

package/src/components/Input/RadioGroup/Radio-Group.figma.tsx

@@ -17,14 +17,14 @@ figma.connect(RadioGroup, FIGMA_URL, {
     }),
 
     state: figma.enum('state', {
-      unchecked: 'Unchecked',
-      checked: 'Checked',
+      Unchecked: 'unchecked',
+      Checked: 'checked',
     }),
   },
 
   example: ({ size, disabled, state }) => (
     <RadioGroup
-      value={state === 'Checked' ? 'one' : ''}
+      value={state === 'checked' ? 'one' : ''}
       size={size}
       disabled={disabled}
       onValueChange={() => {}}

package/src/components/Input/RadioGroup/Radio-Group.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import * as React from 'react';
 import {
   Pressable,

package/src/components/Input/Select/Select.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import * as React from 'react';
 import {
   View as RNView,

package/src/components/Input/TextField/Textfield.figma.tsx

@@ -13,6 +13,7 @@ figma.connect(TextField, FIGMA_URL, {
       success: 'success',
       error: 'error',
       disabled: 'disabled',
+      loading: 'loading',
     }),
 
     // Content
@@ -27,6 +28,7 @@ figma.connect(TextField, FIGMA_URL, {
       search: 'search',
       ai: 'ai',
       composer: 'composer',
+      code: 'code',
     }),
 
     // Visibility

package/src/components/Input/TextField/Textfield.tsx

@@ -1,14 +1,19 @@
 /// <reference types="nativewind/types" />
+// @ts-nocheck
 import * as React from 'react';
 import * as Slot from '@rn-primitives/slot';
 import type { SlottableViewProps, ViewRef } from '@rn-primitives/types';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { cssInterop } from 'nativewind';
-import { View, TextInput } from 'react-native';
+import { View, TextInput, Pressable } from 'react-native';
 import type { LucideIcon } from 'lucide-react-native';
+import LottieView from 'lottie-react-native';
+import { SquircleView } from 'react-native-figma-squircle';
 
 import { cn } from '../../../lib/utils';
 import { TextClassContext, Text } from '../Text/Text';
+import { Lotties } from '../../../assets/lotties';
+import { useThemeColors } from '../../../lib/theme';
 
 // NativeWind interop (className -> style)
 cssInterop(View, { className: 'style' });
@@ -23,17 +28,62 @@ const StyledTextInput = TextInput as any;
  * Variants
  * -------------------------------------------------------------------------- */
 
+const CORNER_RADIUS = 8;
+const CORNER_SMOOTHING = 1;
+
+function useStateSquircleParams(state: string) {
+  const colors = useThemeColors();
+
+  const map: Record<
+    string,
+    { fillColor: string; strokeColor: string; strokeWidth: number }
+  > = {
+    default: {
+      fillColor: colors.surfaceDefault,
+      strokeColor: colors.border,
+      strokeWidth: 1,
+    },
+    focused: {
+      fillColor: colors.surfaceDefault,
+      strokeColor: colors.brandPrimary,
+      strokeWidth: 1,
+    },
+    success: {
+      fillColor: colors.surfaceDefault,
+      strokeColor: colors.success,
+      strokeWidth: 1,
+    },
+    error: {
+      fillColor: colors.surfaceDefault,
+      strokeColor: colors.destructive,
+      strokeWidth: 1,
+    },
+    disabled: {
+      fillColor: colors.surfaceSubtle,
+      strokeColor: colors.border,
+      strokeWidth: 1,
+    },
+    loading: {
+      fillColor: colors.surfaceDefault,
+      strokeColor: colors.border,
+      strokeWidth: 1,
+    },
+  };
+
+  return map[state] ?? map.default;
+}
+
 const textFieldVariants = cva(
-  'flex-row items-center border bg-surface-default px-3 py-4',
+  'flex-row items-center justify-between self-stretch bg-transparent min-h-[54px] px-3',
   {
     variants: {
       state: {
-        default: 'border-border-default-2 rounded-lg',
-        focused: 'border-brand-primary ring-1 ring-brand-primary rounded-lg',
-        success: 'border-highlight-success-green rounded-lg',
-        error: 'border-highlight-alert-red rounded-lg',
-        disabled:
-          'border-border-default-2 bg-surface-subtle rounded-lg opacity-50',
+        default: '',
+        focused: '',
+        success: '',
+        error: '',
+        disabled: 'opacity-60',
+        loading: '',
       },
     },
     defaultVariants: {
@@ -42,7 +92,7 @@ const textFieldVariants = cva(
   }
 );
 
-const fieldTextVariants = cva('text-sm', {
+const fieldTextVariants = cva('text-xs font-medium', {
   variants: {
     state: {
       default: 'text-text-primary',
@@ -50,6 +100,7 @@ const fieldTextVariants = cva('text-sm', {
       success: 'text-highlight-success-green',
       error: 'text-highlight-alert-red',
       disabled: 'text-text-muted',
+      loading: 'text-text-secondary',
     },
   },
   defaultVariants: {
@@ -57,7 +108,7 @@ const fieldTextVariants = cva('text-sm', {
   },
 });
 
-const nativeTextFieldVariants = cva('flex-1 text-base', {
+const nativeTextFieldVariants = cva('flex-1 text-sm font-medium', {
   variants: {
     state: {
       default: 'text-text-primary',
@@ -65,6 +116,7 @@ const nativeTextFieldVariants = cva('flex-1 text-base', {
       success: 'text-text-primary',
       error: 'text-text-primary',
       disabled: 'text-text-muted',
+      loading: 'text-text-secondary',
     },
     content: {
       placeholder: 'placeholder:text-text-muted',
@@ -85,6 +137,7 @@ const iconVariants = cva('', {
       success: 'text-highlight-success-green',
       error: 'text-highlight-alert-red',
       disabled: 'text-text-muted',
+      loading: 'text-text-primary',
     },
   },
   defaultVariants: {
@@ -107,10 +160,10 @@ type TextFieldProps = Omit<SlottableViewProps, 'className'> &
     asChild?: boolean;
 
     leftIcon?: LucideIcon;
-    rightIcon?: LucideIcon;
+    rightIcon?: LucideIcon | React.ReactNode;
 
     // Type (custom, not from CVA)
-    type?: 'text' | 'search' | 'ai' | 'composer';
+    type?: 'text' | 'search' | 'ai' | 'composer' | 'code';
 
     // Visibility
     showLabel?: boolean;
@@ -160,6 +213,7 @@ const TextField = React.forwardRef<ViewRef, TextFieldProps>(
   ) => {
     const Component = asChild ? Slot.View : View;
     const isDisabled = state === 'disabled';
+    const squircleParams = useStateSquircleParams(state ?? 'default');
 
     const valueLike =
       inputProps?.value ??
@@ -180,7 +234,9 @@ const TextField = React.forwardRef<ViewRef, TextFieldProps>(
         ? errorMessage || 'This field has an error'
         : state === 'success'
           ? successMessage || 'This field is valid'
-          : helpText || 'Helper text';
+          : state === 'loading'
+            ? 'Loading...'
+            : helpText || 'Helper text';
 
     const getPlaceholder = () => {
       if (resolvedContent !== 'placeholder') {
@@ -194,12 +250,157 @@ const TextField = React.forwardRef<ViewRef, TextFieldProps>(
           return 'Ask AI';
         case 'composer':
           return 'Type here';
+        case 'code':
+          return 'Paste your code here';
         case 'text':
         default:
           return inputProps?.placeholder ?? 'Placeholder text';
       }
     };
 
+    // Handle code type (OTP-style boxes)
+    const hiddenInputRef = React.useRef<TextInput>(null);
+    const [isFocused, setIsFocused] = React.useState(false);
+    const [selection, setSelection] = React.useState({
+      start: (inputProps?.value as string)?.length || 0,
+      end: (inputProps?.value as string)?.length || 0,
+    });
+
+    const codeLength = 6;
+    const codeValue = (inputProps?.value as string) || '';
+
+    const handlePress = React.useCallback((index: number) => {
+      setIsFocused(true);
+      setSelection({ start: index, end: index });
+      // Focus on next frame to avoid navigation context issues
+      setTimeout(() => {
+        hiddenInputRef.current?.focus();
+      }, 0);
+    }, []);
+
+    const handleChangeText = React.useCallback(
+      (text: string) => {
+        // Only keep numbers
+        const numericText = text.replace(/[^0-9]/g, '');
+
+        // Update the value through inputProps.onChangeText if available
+        if (inputProps?.onChangeText) {
+          inputProps.onChangeText(numericText);
+        }
+
+        // Auto-focus to next box when digit is entered
+        if (
+          numericText.length < codeLength &&
+          selection.start < codeLength - 1
+        ) {
+          setSelection({
+            start: selection.start + 1,
+            end: selection.start + 1,
+          });
+        }
+      },
+      [selection.start, codeLength, inputProps]
+    );
+
+    const handleKeyPress = React.useCallback(
+      (e: any) => {
+        // Handle backspace to go to previous box
+        if (
+          e.nativeEvent.key === 'Backspace' &&
+          selection.start > 0 &&
+          codeValue.length === selection.start
+        ) {
+          setSelection({
+            start: selection.start - 1,
+            end: selection.start - 1,
+          });
+        }
+      },
+      [selection.start, codeValue.length]
+    );
+
+    if (type === 'code') {
+      const codeBoxes = Array.from({ length: codeLength }).map(
+        (_, i) => codeValue[i] || ''
+      );
+
+      return (
+        <TextClassContext.Provider value={fieldTextVariants({ state })}>
+          <StyledView className="gap-2">
+            {showLabel && (
+              <StyledView>
+                <Text>{label || 'Label'}</Text>
+              </StyledView>
+            )}
+
+            <StyledView className="flex-row gap-2 justify-between">
+              {codeBoxes.map((char, index) => {
+                const isActive = selection.start === index && isFocused;
+
+                return (
+                  <Pressable
+                    key={index}
+                    onPress={() => handlePress(index)}
+                    className="flex-1"
+                  >
+                    <StyledView
+                      className={cn(
+                        'items-center justify-center border rounded-md px-3 py-4',
+                        isActive
+                          ? 'border-brand-primary ring-1 ring-brand-primary'
+                          : state === 'error'
+                            ? 'border-highlight-alert-red'
+                            : 'border-border-default',
+                        'bg-surface-default'
+                      )}
+                    >
+                      <Text
+                        className={cn(
+                          'text-sm font-medium',
+                          state === 'error'
+                            ? 'text-highlight-alert-red'
+                            : 'text-text-primary'
+                        )}
+                      >
+                        {char || ''}
+                      </Text>
+                    </StyledView>
+                  </Pressable>
+                );
+              })}
+            </StyledView>
+
+            {/* Hidden input for actual text input */}
+            <StyledTextInput
+              {...inputProps}
+              ref={hiddenInputRef}
+              maxLength={codeLength}
+              editable={!isDisabled}
+              keyboardType="number-pad"
+              textContentType="oneTimeCode"
+              value={codeValue}
+              onChangeText={handleChangeText}
+              onKeyPress={handleKeyPress}
+              selection={selection}
+              onSelectionChange={(e: any) =>
+                setSelection(e.nativeEvent.selection)
+              }
+              onFocus={() => setIsFocused(true)}
+              onBlur={() => setIsFocused(false)}
+              multiline={false}
+              className="absolute opacity-0 w-0 h-0"
+            />
+
+            {showHelpText && (
+              <StyledView>
+                <Text>{message}</Text>
+              </StyledView>
+            )}
+          </StyledView>
+        </TextClassContext.Provider>
+      );
+    }
+
     return (
       <TextClassContext.Provider value={fieldTextVariants({ state })}>
         <StyledView className="gap-1">
@@ -209,42 +410,73 @@ const TextField = React.forwardRef<ViewRef, TextFieldProps>(
             </StyledView>
           )}
 
-          <Component
-            ref={ref as any}
-            {...containerProps}
-            className={cn(textFieldVariants({ state }))}
+          <View
+            key={`squircle-${state}`}
+            style={{ overflow: 'hidden', borderRadius: CORNER_RADIUS }}
           >
-            {showLeftIcon && LeftIcon && (
-              <LeftIcon
-                size={16}
-                className={cn('mr-2 mt-1', iconVariants({ state }))}
-              />
-            )}
-
-            <StyledTextInput
-              {...inputProps}
-              multiline
-              editable={!isDisabled}
-              placeholder={getPlaceholder()}
-              className={cn(
-                nativeTextFieldVariants({ state, content: resolvedContent }),
-                isDisabled && 'opacity-100'
-              )}
-              style={[
-                {
-                  textAlignVertical: 'top',
-                },
-                inputProps?.style,
-              ]}
-            />
-
-            {showRightIcon && RightIcon && (
-              <RightIcon
-                size={16}
-                className={cn('ml-2 mt-1', iconVariants({ state }))}
-              />
-            )}
-          </Component>
+            <SquircleView
+              squircleParams={{
+                cornerRadius: CORNER_RADIUS,
+                cornerSmoothing: CORNER_SMOOTHING,
+                ...squircleParams,
+              }}
+            >
+              <Component
+                ref={ref as any}
+                {...containerProps}
+                className={cn(textFieldVariants({ state }))}
+              >
+                {showLeftIcon && LeftIcon && (
+                  <LeftIcon
+                    size={16}
+                    className={cn('mr-2 mt-1', iconVariants({ state }))}
+                  />
+                )}
+
+                <StyledTextInput
+                  {...inputProps}
+                  multiline={type === 'composer' || inputProps?.multiline}
+                  editable={!isDisabled}
+                  placeholder={getPlaceholder()}
+                  className={cn(
+                    nativeTextFieldVariants({
+                      state,
+                      content: resolvedContent,
+                    }),
+                    isDisabled && 'opacity-100'
+                  )}
+                  style={[
+                    {
+                      textAlignVertical: 'top',
+                    },
+                    inputProps?.style,
+                  ]}
+                />
+
+                {state === 'loading' ? (
+                  <LottieView
+                    source={Lotties.loading}
+                    autoPlay
+                    loop
+                    style={{ width: 48, height: 48, marginLeft: 8 }}
+                  />
+                ) : showRightIcon &&
+                  RightIcon &&
+                  typeof RightIcon !== 'undefined' ? (
+                  typeof RightIcon === 'function' ? (
+                    <RightIcon
+                      size={16}
+                      className={cn('ml-2 mt-1', iconVariants({ state }))}
+                    />
+                  ) : React.isValidElement(RightIcon) ? (
+                    <StyledView className={cn('ml-2 mt-1')}>
+                      {RightIcon}
+                    </StyledView>
+                  ) : null
+                ) : null}
+              </Component>
+            </SquircleView>
+          </View>
 
           {showHelpText && (
             <StyledView>