@campxdev/react-native-blueprint 0.1.13 → 0.1.15

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

@@ -0,0 +1,416 @@
+/// <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 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' });
+cssInterop(TextInput, { className: 'style' });
+cssInterop(Slot.View, { className: 'style' });
+
+// Internal components with loose typing to allow className passing
+const StyledView = View as any;
+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 justify-between self-stretch bg-transparent min-h-[54px] px-3',
+  {
+    variants: {
+      state: {
+        default: '',
+        focused: '',
+        success: '',
+        error: '',
+        disabled: 'opacity-60',
+        loading: '',
+      },
+    },
+    defaultVariants: {
+      state: 'default',
+    },
+  }
+);
+
+const fieldTextVariants = cva('text-xs font-medium', {
+  variants: {
+    state: {
+      default: 'text-text-primary',
+      focused: 'text-text-primary',
+      success: 'text-highlight-success-green',
+      error: 'text-highlight-alert-red',
+      disabled: 'text-text-muted',
+      loading: 'text-text-secondary',
+    },
+  },
+  defaultVariants: {
+    state: 'default',
+  },
+});
+
+const nativeTextFieldVariants = cva('flex-1 text-sm font-medium', {
+  variants: {
+    state: {
+      default: 'text-text-primary',
+      focused: 'text-text-primary',
+      success: 'text-text-primary',
+      error: 'text-text-primary',
+      disabled: 'text-text-muted',
+      loading: 'text-text-secondary',
+    },
+    content: {
+      placeholder: 'placeholder:text-text-muted',
+      filled: '',
+    },
+  },
+  defaultVariants: {
+    state: 'default',
+    content: 'placeholder',
+  },
+});
+
+const iconVariants = cva('', {
+  variants: {
+    state: {
+      default: 'text-text-muted',
+      focused: 'text-text-primary',
+      success: 'text-highlight-success-green',
+      error: 'text-highlight-alert-red',
+      disabled: 'text-text-muted',
+      loading: 'text-text-primary',
+    },
+  },
+  defaultVariants: {
+    state: 'default',
+  },
+});
+
+/* -----------------------------------------------------------------------------
+ * Props
+ * -------------------------------------------------------------------------- */
+
+type RNTextFieldSafeProps = Omit<
+  React.ComponentPropsWithoutRef<typeof TextInput>,
+  'className'
+>;
+
+type TextFieldProps = Omit<SlottableViewProps, 'className'> &
+  VariantProps<typeof textFieldVariants> &
+  VariantProps<typeof nativeTextFieldVariants> & {
+    asChild?: boolean;
+
+    leftIcon?: LucideIcon;
+    rightIcon?: LucideIcon | React.ReactNode;
+
+    // Type (custom, not from CVA)
+    type?: 'text' | 'search' | 'ai' | 'composer' | 'code';
+
+    // Visibility
+    showLabel?: boolean;
+    showHelpText?: boolean;
+    showLeftIcon?: boolean;
+    showRightIcon?: boolean;
+
+    label?: string;
+    helpText?: string;
+    successMessage?: string;
+    errorMessage?: string;
+
+    inputProps?: RNTextFieldSafeProps;
+  };
+
+/* -----------------------------------------------------------------------------
+ * Component
+ * -------------------------------------------------------------------------- */
+
+const TextField = React.forwardRef<ViewRef, TextFieldProps>(
+  (
+    {
+      asChild = false,
+
+      state = 'default',
+      content = 'placeholder',
+      type = 'text',
+
+      leftIcon: LeftIcon,
+      rightIcon: RightIcon,
+
+      showLabel = false,
+      showHelpText = false,
+      showLeftIcon = false,
+      showRightIcon = false,
+
+      label,
+      helpText,
+      successMessage,
+      errorMessage,
+
+      inputProps,
+
+      ...containerProps
+    },
+    ref
+  ) => {
+    const Component = asChild ? Slot.View : View;
+    const isDisabled = state === 'disabled';
+    const squircleParams = useStateSquircleParams(state ?? 'default');
+
+    const valueLike =
+      inputProps?.value ??
+      (typeof inputProps?.defaultValue === 'string'
+        ? inputProps.defaultValue
+        : '');
+
+    const isFilled =
+      content === 'filled' ||
+      (typeof valueLike === 'string' && valueLike.trim().length > 0);
+
+    const resolvedContent: 'filled' | 'placeholder' = isFilled
+      ? 'filled'
+      : 'placeholder';
+
+    const message =
+      state === 'error'
+        ? errorMessage || 'This field has an error'
+        : state === 'success'
+          ? successMessage || 'This field is valid'
+          : state === 'loading'
+            ? 'Loading...'
+            : helpText || 'Helper text';
+
+    const getPlaceholder = () => {
+      if (resolvedContent !== 'placeholder') {
+        return inputProps?.placeholder;
+      }
+
+      switch (type) {
+        case 'search':
+          return 'Search for a Keyword';
+        case 'ai':
+          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">
+          {showLabel && (
+            <StyledView>
+              <Text>{label || 'Label'}</Text>
+            </StyledView>
+          )}
+
+          <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>
+              <Text>{message}</Text>
+            </StyledView>
+          )}
+        </StyledView>
+      </TextClassContext.Provider>
+    );
+  }
+);
+
+TextField.displayName = 'TextField';
+
+export {
+  TextField,
+  textFieldVariants,
+  fieldTextVariants as textFieldTextVariants,
+  nativeTextFieldVariants,
+  iconVariants,
+};
+export type { TextFieldProps };

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}
+    />
+  ),
+});

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

@@ -0,0 +1,146 @@
+// @ts-nocheck
+import React from 'react';
+import { View, Text } from 'react-native';
+import { cssInterop } from 'nativewind';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../../../lib/utils';
+
+// NativeWind interop
+cssInterop(View, { className: 'style' });
+cssInterop(Text, { className: 'style' });
+
+// Typed components
+const StyledView = View as any;
+const StyledText = Text as any;
+
+/* ------------------------------------------------------------------
+ * Variants
+ * ------------------------------------------------------------------ */
+
+const toggleItemVariants = cva(
+  'flex-row items-center justify-center gap-2 px-4 py-3 rounded-md border',
+  {
+    variants: {
+      tone: {
+        default: 'border-text-primary bg-surface-default',
+        success: 'border-text-primary bg-surface-default',
+        destructive: 'border-text-primary bg-surface-default',
+        warning: 'border-text-primary bg-surface-default',
+      },
+      state: {
+        true: '',
+        false: '',
+      },
+    },
+    compoundVariants: [
+      // DEFAULT (ON)
+      {
+        tone: 'default',
+        state: true,
+        className: 'bg-surface-subtle border-text-primary',
+      },
+      // SUCCESS (ON)
+      {
+        tone: 'success',
+        state: true,
+        className:
+          'bg-highlight-success-green-muted border-highlight-success-green',
+      },
+      // DESTRUCTIVE (ON)
+      {
+        tone: 'destructive',
+        state: true,
+        className: 'bg-highlight-alert-red-muted border-highlight-alert-red',
+      },
+      // WARNING (ON)
+      {
+        tone: 'warning',
+        state: true,
+        className:
+          'bg-highlight-warning-orange-muted border-highlight-warning-orange',
+      },
+    ],
+    defaultVariants: {
+      tone: 'default',
+      state: false,
+    },
+  }
+);
+
+const textVariants = cva('text-sm font-semibold', {
+  variants: {
+    tone: {
+      default: 'text-text-secondary',
+      success: 'text-text-secondary',
+      destructive: 'text-text-secondary',
+      warning: 'text-text-secondary',
+    },
+    state: {
+      true: '',
+      false: '',
+    },
+  },
+  compoundVariants: [
+    // Default (ON) uses brand primary
+    {
+      tone: 'default',
+      state: true,
+      className: 'text-brand-primary',
+    },
+    // Success (ON)
+    {
+      tone: 'success',
+      state: true,
+      className: 'text-highlight-success-green',
+    },
+    // Destructive (ON)
+    {
+      tone: 'destructive',
+      state: true,
+      className: 'text-highlight-alert-red',
+    },
+    // Warning (ON)
+    {
+      tone: 'warning',
+      state: true,
+      className: 'text-highlight-warning-orange',
+    },
+  ],
+});
+
+/* ------------------------------------------------------------------
+ * Component
+ * ------------------------------------------------------------------ */
+
+export type ToggleItemProps = VariantProps<typeof toggleItemVariants> & {
+  text?: string;
+  showLeftIcon?: boolean;
+  showRightIcon?: boolean;
+  className?: string;
+};
+
+export function ToggleItem({
+  text = 'Toggle',
+  tone = 'default',
+  state = false,
+  showLeftIcon = false,
+  showRightIcon = false,
+  className,
+}: ToggleItemProps) {
+  return (
+    <StyledView className={cn(toggleItemVariants({ tone, state }), className)}>
+      {showLeftIcon && <StyledView className="h-4 w-4 bg-muted rounded-sm" />}
+
+      <StyledText
+        className={textVariants({
+          tone,
+          state,
+        })}
+      >
+        {text}
+      </StyledText>
+
+      {showRightIcon && <StyledView className="h-4 w-4 bg-muted rounded-sm" />}
+    </StyledView>
+  );
+}

package/src/components/Input/ToggleGroup/Toggle-Group.figma.tsx

@@ -0,0 +1,48 @@
+import figma from '@figma/code-connect';
+import { ToggleGroup, ToggleGroupItem } from './Toggle-Group';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=97-224';
+
+/**
+ * ToggleGroup – Segmented control for single or multiple selection
+ *
+ * Use cases:
+ * - View switchers (list / grid)
+ * - Filters (multiple selection)
+ * - Mode toggles (single selection)
+ *
+ * Notes:
+ * - Selection state is controlled via `value`
+ * - Figma variants expose ONLY structural props
+ */
+figma.connect(ToggleGroup, FIGMA_URL, {
+  props: {
+    type: figma.enum('type', {
+      single: 'single',
+      multiple: 'multiple',
+    }),
+
+    orientation: figma.enum('orientation', {
+      horizontal: 'horizontal',
+      vertical: 'vertical',
+    }),
+  },
+
+  example: ({ type, orientation }) => {
+    const value = type === 'single' ? 'one' : ['one', 'two'];
+
+    return (
+      <ToggleGroup
+        type={type}
+        orientation={orientation}
+        value={value}
+        onValueChange={() => {}}
+      >
+        <ToggleGroupItem value="one">Toggle</ToggleGroupItem>
+        <ToggleGroupItem value="two">Toggle</ToggleGroupItem>
+        <ToggleGroupItem value="three">Toggle</ToggleGroupItem>
+      </ToggleGroup>
+    );
+  },
+});