@campxdev/react-native-blueprint 0.1.14 → 0.1.15

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,4 +1,5 @@
 /// <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';
@@ -6,9 +7,13 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cssInterop } from 'nativewind';
 import { View, TextInput } 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,77 @@ 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)
+    if (type === 'code') {
+      const codeLength = 6;
+      const codeValue = (inputProps?.value as string) || '';
+      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) => (
+                <StyledView
+                  key={index}
+                  className={cn(
+                    'flex-1 items-center justify-center border rounded-md px-3 py-4',
+                    index === codeValue.length
+                      ? '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 || 'X'}
+                  </Text>
+                </StyledView>
+              ))}
+            </StyledView>
+
+            {/* Hidden input for actual text input */}
+            <StyledTextInput
+              {...inputProps}
+              maxLength={codeLength}
+              editable={!isDisabled}
+              style={{ position: 'absolute', opacity: 0, width: 0, height: 0 }}
+            />
+
+            {showHelpText && (
+              <StyledView>
+                <Text>{message}</Text>
+              </StyledView>
+            )}
+          </StyledView>
+        </TextClassContext.Provider>
+      );
+    }
+
     return (
       <TextClassContext.Provider value={fieldTextVariants({ state })}>
         <StyledView className="gap-1">
@@ -209,42 +330,68 @@ const TextField = React.forwardRef<ViewRef, TextFieldProps>(
             </StyledView>
           )}
 
-          <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
-              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>
+          <View style={{ overflow: 'hidden', borderRadius: CORNER_RADIUS }}>
+            <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
+                  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 === 'function' ? (
+                    <RightIcon
+                      size={16}
+                      className={cn('ml-2 mt-1', iconVariants({ state }))}
+                    />
+                  ) : (
+                    <StyledView className={cn('ml-2 mt-1')}>
+                      {RightIcon}
+                    </StyledView>
+                  )
+                ) : null}
+              </Component>
+            </SquircleView>
+          </View>
 
           {showHelpText && (
             <StyledView>

package/src/components/Input/Toggle/Toggle.figma.tsx

@@ -0,0 +1,37 @@
+import figma from '@figma/code-connect';
+import { ToggleItem } from './Toggle';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=408-2632';
+
+figma.connect(ToggleItem, FIGMA_URL, {
+  props: {
+    // State (whether toggle is on/off)
+    state: figma.boolean('state'),
+
+    // Tone (color variant)
+    tone: figma.enum('tone', {
+      default: 'default',
+      success: 'success',
+      destructive: 'destructive',
+      warning: 'warning',
+    }),
+
+    // Text content
+    text: figma.string('Text'),
+
+    // Icon visibility
+    showLeftIcon: figma.boolean('Show leftIcon'),
+    showRightIcon: figma.boolean('Show rightIcon'),
+  },
+
+  example: (props) => (
+    <ToggleItem
+      state={props.state}
+      tone={props.tone}
+      text={props.text}
+      showLeftIcon={props.showLeftIcon}
+      showRightIcon={props.showRightIcon}
+    />
+  ),
+});