@campxdev/react-native-blueprint 0.1.13 → 0.1.14

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

@@ -0,0 +1,269 @@
+/// <reference types="nativewind/types" />
+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 { cn } from '../../../lib/utils';
+import { TextClassContext, Text } from '../Text/Text';
+
+// 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 textFieldVariants = cva(
+  'flex-row items-center border bg-surface-default px-3 py-4',
+  {
+    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',
+      },
+    },
+    defaultVariants: {
+      state: 'default',
+    },
+  }
+);
+
+const fieldTextVariants = cva('text-sm', {
+  variants: {
+    state: {
+      default: 'text-text-primary',
+      focused: 'text-text-primary',
+      success: 'text-highlight-success-green',
+      error: 'text-highlight-alert-red',
+      disabled: 'text-text-muted',
+    },
+  },
+  defaultVariants: {
+    state: 'default',
+  },
+});
+
+const nativeTextFieldVariants = cva('flex-1 text-base', {
+  variants: {
+    state: {
+      default: 'text-text-primary',
+      focused: 'text-text-primary',
+      success: 'text-text-primary',
+      error: 'text-text-primary',
+      disabled: 'text-text-muted',
+    },
+    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',
+    },
+  },
+  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;
+
+    // Type (custom, not from CVA)
+    type?: 'text' | 'search' | 'ai' | 'composer';
+
+    // 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 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'
+          : 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 'text':
+        default:
+          return inputProps?.placeholder ?? 'Placeholder text';
+      }
+    };
+
+    return (
+      <TextClassContext.Provider value={fieldTextVariants({ state })}>
+        <StyledView className="gap-1">
+          {showLabel && (
+            <StyledView>
+              <Text>{label || 'Label'}</Text>
+            </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>
+
+          {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.tsx

@@ -0,0 +1,119 @@
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../../../lib/utils';
+
+/* ------------------------------------------------------------------
+ * Variants
+ * ------------------------------------------------------------------ */
+
+const toggleItemVariants = cva(
+  'flex-row items-center justify-center gap-2 px-4 py-3 rounded-md border',
+  {
+    variants: {
+      tone: {
+        default: 'border-border-default',
+        success: 'border-highlight-success-green',
+        destructive: 'border-highlight-alert-red',
+        warning: 'border-highlight-warning-orange',
+      },
+      state: {
+        true: '',
+        false: 'bg-transparent',
+      },
+    },
+    compoundVariants: [
+      // DEFAULT (ON)
+      {
+        tone: 'default',
+        state: true,
+        className: 'bg-surface-subtle',
+      },
+      // SUCCESS (ON)
+      {
+        tone: 'success',
+        state: true,
+        className: 'bg-highlight-success-green-muted',
+      },
+      // DESTRUCTIVE (ON)
+      {
+        tone: 'destructive',
+        state: true,
+        className: 'bg-highlight-alert-red-muted',
+      },
+      // WARNING (ON)
+      {
+        tone: 'warning',
+        state: true,
+        className: 'bg-highlight-warning-orange-muted',
+      },
+    ],
+    defaultVariants: {
+      tone: 'default',
+      state: false,
+    },
+  }
+);
+
+const textVariants = cva('text-sm font-semibold', {
+  variants: {
+    tone: {
+      default: 'text-text-secondary',
+      success: 'text-highlight-success-green',
+      destructive: 'text-highlight-alert-red',
+      warning: 'text-highlight-warning-orange',
+    },
+    state: {
+      true: '',
+      false: '',
+    },
+  },
+  compoundVariants: [
+    // Default (ON) uses brand primary
+    {
+      tone: 'default',
+      state: true,
+      className: 'text-brand-primary',
+    },
+    // Colored tones maintain their color in ON state (already handled by variant definition),
+    // but if we needed to override, we would do it here.
+    // The current definitions 'text-highlight-success-green' apply to both ON/OFF for success tone.
+  ],
+});
+
+/* ------------------------------------------------------------------
+ * 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 (
+    <View className={cn(toggleItemVariants({ tone, state }), className)}>
+      {showLeftIcon && <View className="h-4 w-4 bg-muted rounded-sm" />}
+
+      <Text
+        className={textVariants({
+          tone,
+          state,
+        })}
+      >
+        {text}
+      </Text>
+
+      {showRightIcon && <View className="h-4 w-4 bg-muted rounded-sm" />}
+    </View>
+  );
+}

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

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

@@ -0,0 +1,263 @@
+import * as React from 'react';
+import { Pressable, View, type StyleProp, type ViewStyle } from 'react-native';
+import { cssInterop } from 'nativewind';
+import { cva } from 'class-variance-authority';
+
+import { cn } from '../../../lib/utils';
+
+// NativeWind interop (className -> style)
+cssInterop(Pressable, { className: 'style' });
+cssInterop(View, { className: 'style' });
+
+/* -----------------------------------------------------
+ * Canonical Variants (lowercase – match Figma + Code Connect)
+ * --------------------------------------------------- */
+
+export const ToggleGroupVariants = {
+  orientation: ['horizontal', 'vertical'] as const,
+  type: ['single', 'multiple'] as const,
+};
+
+type ToggleGroupOrientation = (typeof ToggleGroupVariants.orientation)[number];
+type ToggleGroupType = (typeof ToggleGroupVariants.type)[number];
+
+// Backward-compat (old caps)
+type LegacyOrientation = 'Horizontal' | 'Vertical';
+type LegacyType = 'Single' | 'Multiple';
+
+/* -----------------------------------------------------
+ * Root = SINGLE CONTAINER (matches Figma)
+ * --------------------------------------------------- */
+
+const rootVariants = cva(
+  'rounded-md border border-border bg-muted overflow-hidden self-start',
+  {
+    variants: {
+      orientation: {
+        horizontal: 'flex-row',
+        vertical: 'flex-col',
+      },
+    },
+    defaultVariants: {
+      orientation: 'horizontal',
+    },
+  }
+);
+
+/* -----------------------------------------------------
+ * Item (segment)
+ * - Divider handled per-item (border-l / border-t)
+ * - Selected sits on top with overlay border
+ * --------------------------------------------------- */
+
+const itemVariants = cva('relative items-center justify-center px-4 py-3', {
+  variants: {
+    orientation: {
+      horizontal: 'flex-1',
+      vertical: 'w-full',
+    },
+    divider: {
+      none: '',
+      left: 'border-l border-border',
+      top: 'border-t border-border',
+    },
+    selected: {
+      false: '',
+      true: 'bg-background',
+    },
+  },
+  defaultVariants: {
+    selected: false,
+    divider: 'none',
+  },
+});
+
+/* -----------------------------------------------------
+ * Normalizers (so old callers still work)
+ * --------------------------------------------------- */
+
+function normalizeType(v: any): ToggleGroupType {
+  const s = String(v ?? 'single').toLowerCase();
+  return s === 'multiple' ? 'multiple' : 'single';
+}
+
+function normalizeOrientation(v: any): ToggleGroupOrientation {
+  const s = String(v ?? 'horizontal').toLowerCase();
+  return s === 'vertical' ? 'vertical' : 'horizontal';
+}
+
+/* -----------------------------------------------------
+ * Context
+ * --------------------------------------------------- */
+
+interface ToggleGroupContextType {
+  value: string | string[];
+  onValueChange: (value: string | string[]) => void;
+  type: ToggleGroupType;
+  orientation: ToggleGroupOrientation;
+}
+
+const ToggleGroupContext = React.createContext<ToggleGroupContextType | null>(
+  null
+);
+
+function useToggleGroupContext() {
+  const context = React.useContext(ToggleGroupContext);
+  if (!context)
+    throw new Error('ToggleGroupItem must be used within a ToggleGroup');
+  return context;
+}
+
+/* -----------------------------------------------------
+ * ToggleGroupItem (internal impl)
+ * --------------------------------------------------- */
+
+type InternalItemProps = {
+  __index?: number;
+  __count?: number;
+};
+
+interface ToggleItemProps extends InternalItemProps {
+  value: string;
+  testID?: string;
+  children: React.ReactNode;
+}
+
+function ToggleItem({ value, testID, children, __index = 0 }: ToggleItemProps) {
+  const {
+    value: groupValue,
+    onValueChange,
+    type,
+    orientation,
+  } = useToggleGroupContext();
+
+  const isSelected = Array.isArray(groupValue)
+    ? groupValue.includes(value)
+    : groupValue === value;
+
+  const isFirst = __index === 0;
+  const divider = isFirst
+    ? 'none'
+    : orientation === 'horizontal'
+      ? 'left'
+      : 'top';
+
+  return (
+    <Pressable
+      testID={testID ?? `toggle-item-${value}`}
+      accessibilityRole="button"
+      accessibilityState={{ selected: isSelected }}
+      onPress={() => {
+        if (type === 'single') {
+          onValueChange(isSelected ? '' : value);
+          return;
+        }
+
+        // multiple
+        if (Array.isArray(groupValue)) {
+          onValueChange(
+            isSelected
+              ? groupValue.filter((v) => v !== value)
+              : [...groupValue, value]
+          );
+        } else {
+          onValueChange(isSelected ? [] : [value]);
+        }
+      }}
+      className={cn(
+        itemVariants({ orientation, divider, selected: isSelected })
+      )}
+    >
+      {/* Selected border overlay (no reflow, no flicker) */}
+      {isSelected ? (
+        <View
+          pointerEvents="none"
+          className="absolute inset-0 border border-primary"
+        />
+      ) : null}
+
+      {/* Content */}
+      <View className="flex-row items-center justify-center gap-2">
+        {children}
+      </View>
+    </Pressable>
+  );
+}
+
+/* -----------------------------------------------------
+ * Public Props
+ * --------------------------------------------------- */
+
+export interface ToggleGroupProps {
+  type?: ToggleGroupType | LegacyType;
+  value: string | string[];
+  onValueChange: (value: string | string[]) => void;
+  orientation?: ToggleGroupOrientation | LegacyOrientation;
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+  className?: never;
+}
+
+export function ToggleGroup({
+  type = 'single',
+  value,
+  onValueChange,
+  orientation = 'horizontal',
+  children,
+  style,
+  testID,
+}: ToggleGroupProps) {
+  const items = React.Children.toArray(children).filter(Boolean);
+
+  const t = normalizeType(type);
+  const o = normalizeOrientation(orientation);
+
+  return (
+    <ToggleGroupContext.Provider
+      value={{ value, onValueChange, type: t, orientation: o }}
+    >
+      <View
+        testID={testID ?? 'toggle-group'}
+        className={cn(rootVariants({ orientation: o }))}
+        style={style}
+      >
+        {items.map((child, index) => {
+          if (!React.isValidElement(child)) return child;
+
+          return React.cloneElement(child as React.ReactElement<any>, {
+            __index: index,
+            __count: items.length,
+          });
+        })}
+      </View>
+    </ToggleGroupContext.Provider>
+  );
+}
+
+/* -----------------------------------------------------
+ * ToggleGroupItem (public)
+ * --------------------------------------------------- */
+
+export interface ToggleGroupItemProps {
+  value: string;
+  testID?: string;
+  children: React.ReactNode;
+  className?: never;
+}
+
+export function ToggleGroupItem(
+  props: ToggleGroupItemProps & InternalItemProps
+) {
+  const { value, testID, children, __index, __count } = props;
+  return (
+    <ToggleItem
+      value={value}
+      testID={testID}
+      __index={__index}
+      __count={__count}
+    >
+      {children}
+    </ToggleItem>
+  );
+}