@campxdev/react-native-blueprint 0.1.12 → 0.1.14

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

@@ -0,0 +1,179 @@
+import * as React from 'react';
+import { Pressable, View, type StyleProp, type ViewStyle } from 'react-native';
+import { cssInterop } from 'nativewind';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Check, Minus } from 'lucide-react-native';
+
+import { cn } from '../../../lib/utils';
+
+// NativeWind interop (className -> style)
+cssInterop(View, { className: 'style' });
+cssInterop(Pressable, { className: 'style' });
+
+/* -----------------------------------------------------
+ * Canonical variants (match Figma + Code Connect)
+ * --------------------------------------------------- */
+
+export const CheckboxVariants = {
+  size: ['sm', 'md'],
+  state: ['unchecked', 'checked', 'indeterminate'],
+} as const;
+
+/* -----------------------------------------------------
+ * Root (Touchable wrapper)
+ * --------------------------------------------------- */
+
+const rootVariants = cva('items-center justify-center', {
+  variants: {
+    size: {
+      sm: 'w-4 h-4',
+      md: 'w-5 h-5',
+    },
+    disabled: {
+      false: '',
+      true: 'opacity-50',
+    },
+  },
+  defaultVariants: {
+    size: 'sm',
+    disabled: false,
+  },
+});
+
+/* -----------------------------------------------------
+ * Box (Square container)
+ * --------------------------------------------------- */
+
+const boxVariants = cva('items-center justify-center border', {
+  variants: {
+    size: {
+      sm: 'w-4 h-4 rounded-[4px] border',
+      md: 'w-5 h-5 rounded-[4px] border-[1.5px]',
+    },
+    state: {
+      unchecked: 'border-border bg-transparent',
+      checked: 'border-primary bg-primary',
+      indeterminate: 'border-primary bg-primary',
+    },
+    disabled: {
+      false: '',
+      true: '',
+    },
+  },
+  defaultVariants: {
+    size: 'sm',
+    state: 'unchecked',
+    disabled: false,
+  },
+});
+
+/* -----------------------------------------------------
+ * Props (lowercase + backward compatible)
+ * --------------------------------------------------- */
+
+export type CheckboxProps = Omit<
+  VariantProps<typeof boxVariants>,
+  'state' | 'size' | 'disabled'
+> & {
+  size?: (typeof CheckboxVariants.size)[number] | 'Sm' | 'Md';
+  state?:
+    | (typeof CheckboxVariants.state)[number]
+    | 'Unchecked'
+    | 'Checked'
+    | 'Indeterminate';
+  disabled?: boolean | 'True' | 'False' | 'true' | 'false' | '1' | '0';
+
+  /** Called when the checkbox state changes */
+  onStateChange?: (state: (typeof CheckboxVariants.state)[number]) => void;
+
+  /** Override outer style */
+  style?: StyleProp<ViewStyle>;
+
+  /** E2E testing */
+  testID?: string;
+
+  /** Prevent passing className */
+  className?: never;
+};
+
+/* -----------------------------------------------------
+ * Normalizers
+ * --------------------------------------------------- */
+
+function normalizeSize(v: any): (typeof CheckboxVariants.size)[number] {
+  const s = String(v ?? 'sm').toLowerCase();
+  if (s === 'sm' || s === 'md') return s;
+  return 'sm';
+}
+
+function normalizeState(v: any): (typeof CheckboxVariants.state)[number] {
+  const s = String(v ?? 'unchecked').toLowerCase();
+  if (s === 'checked' || s === 'unchecked' || s === 'indeterminate') return s;
+  return 'unchecked';
+}
+
+function normalizeDisabled(v: any): boolean {
+  if (typeof v === 'boolean') return v;
+  const s = String(v ?? 'false').toLowerCase();
+  return s === 'true' || s === '1';
+}
+
+/* -----------------------------------------------------
+ * Component
+ * --------------------------------------------------- */
+
+export function Checkbox(props: CheckboxProps) {
+  const { state, size, disabled, onStateChange, style, testID } = props;
+
+  const s = normalizeSize(size);
+  const st = normalizeState(state);
+  const d = normalizeDisabled(disabled);
+
+  const handlePress = () => {
+    if (d) return;
+    onStateChange?.(st === 'checked' ? 'unchecked' : 'checked');
+  };
+
+  const iconSize = s === 'md' ? 14 : 12;
+
+  return (
+    <Pressable
+      testID={testID ?? 'checkbox'}
+      accessibilityRole="checkbox"
+      accessibilityState={{ checked: st === 'checked', disabled: d }}
+      disabled={d}
+      onPress={handlePress}
+      className={cn(rootVariants({ size: s, disabled: d }))}
+      style={style}
+      hitSlop={8}
+    >
+      <View
+        testID="checkbox-box"
+        className={cn(boxVariants({ size: s, state: st, disabled: d }))}
+      >
+        {st === 'checked' ? (
+          <Check
+            testID="checkbox-check"
+            size={iconSize}
+            color="white"
+            strokeWidth={3}
+          />
+        ) : null}
+
+        {st === 'indeterminate' ? (
+          <Minus
+            testID="checkbox-indeterminate"
+            size={iconSize}
+            color="white"
+            strokeWidth={3}
+          />
+        ) : null}
+      </View>
+    </Pressable>
+  );
+}
+
+Checkbox.displayName = 'Checkbox';
+
+export { rootVariants, boxVariants };
+export type { CheckboxProps };

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

@@ -0,0 +1,36 @@
+import figma from '@figma/code-connect';
+import { RadioGroup, RadioGroupItem } from './Radio-Group';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=50-68';
+
+figma.connect(RadioGroup, FIGMA_URL, {
+  props: {
+    size: figma.enum('size', {
+      sm: 'Sm',
+      md: 'Md',
+    }),
+
+    disabled: figma.enum('disabled', {
+      false: 'False',
+      true: 'True',
+    }),
+
+    state: figma.enum('state', {
+      unchecked: 'Unchecked',
+      checked: 'Checked',
+    }),
+  },
+
+  example: ({ size, disabled, state }) => (
+    <RadioGroup
+      value={state === 'Checked' ? 'one' : ''}
+      size={size}
+      disabled={disabled}
+      onValueChange={() => {}}
+    >
+      <RadioGroupItem value="one" />
+      <RadioGroupItem value="two" />
+    </RadioGroup>
+  ),
+});

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

@@ -0,0 +1,221 @@
+import * as React from 'react';
+import {
+  Pressable,
+  View,
+  type StyleProp,
+  type ViewStyle,
+  type PressableProps,
+} 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' });
+
+export const RadioVariants = {
+  disabled: ['False', 'True'] as const,
+  size: ['Sm', 'Md'] as const,
+  state: ['Unchecked', 'Checked'] as const,
+};
+
+type RadioDisabled = (typeof RadioVariants.disabled)[number];
+type RadioSize = (typeof RadioVariants.size)[number];
+type RadioState = (typeof RadioVariants.state)[number];
+
+const rootVariants = cva('', {
+  variants: {
+    size: {
+      Sm: 'w-4 h-4',
+      Md: 'w-5 h-5',
+    },
+    disabled: {
+      False: '',
+      True: 'opacity-50',
+    },
+    state: {
+      Unchecked: '',
+      Checked: '',
+    },
+  },
+  defaultVariants: {
+    size: 'Sm',
+    disabled: 'False',
+    state: 'Unchecked',
+  },
+});
+
+const outerVariants = cva(
+  'rounded-full border bg-muted items-center justify-center',
+  {
+    variants: {
+      size: {
+        Sm: 'w-4 h-4 border',
+        Md: 'w-5 h-5 border',
+      },
+      state: {
+        Unchecked: 'border-border',
+        Checked: 'border-primary',
+      },
+      disabled: {
+        False: '',
+        True: '',
+      },
+    },
+    defaultVariants: {
+      size: 'Sm',
+      state: 'Unchecked',
+      disabled: 'False',
+    },
+  }
+);
+
+const dotVariants = cva('rounded-full bg-primary', {
+  variants: {
+    size: {
+      Sm: 'w-2 h-2',
+      Md: 'w-[9px] h-[9px]',
+    },
+  },
+  defaultVariants: {
+    size: 'Sm',
+  },
+});
+
+/** ✅ Strict: prevent className prop */
+type PressablePropsWithoutClassName = Omit<PressableProps, 'style'> & {
+  className?: never;
+};
+
+export interface RadioItemProps extends PressablePropsWithoutClassName {
+  value: string;
+  onValueChange?: (value: string) => void;
+  disabled: RadioDisabled;
+  size: RadioSize;
+  state: RadioState;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export function RadioItem(props: RadioItemProps) {
+  const {
+    value,
+    state,
+    disabled,
+    size,
+    onValueChange,
+    style,
+    testID,
+    ...rest
+  } = props;
+
+  const isDisabled = disabled === 'True';
+
+  return (
+    <Pressable
+      testID={testID ?? 'radio'}
+      accessibilityRole="radio"
+      accessibilityState={{
+        disabled: isDisabled,
+        selected: state === 'Checked',
+      }}
+      disabled={isDisabled}
+      onPress={isDisabled ? undefined : () => onValueChange?.(value)}
+      className={cn(rootVariants({ state, disabled, size }))}
+      style={style}
+      {...rest}
+    >
+      <View
+        testID="radio-outer"
+        className={cn(outerVariants({ state, disabled, size }))}
+      >
+        {state === 'Checked' ? (
+          <View testID="radio-dot" className={cn(dotVariants({ size }))} />
+        ) : null}
+      </View>
+    </Pressable>
+  );
+}
+
+interface RadioGroupContextType {
+  value: string;
+  onValueChange: (value: string) => void;
+  disabled: RadioDisabled;
+  size: RadioSize;
+}
+
+const RadioGroupContext = React.createContext<RadioGroupContextType | null>(
+  null
+);
+
+export interface RadioGroupProps {
+  value: string;
+  onValueChange: (value: string) => void;
+  disabled?: RadioDisabled;
+  size?: RadioSize;
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+  className?: never;
+}
+
+export function RadioGroup({
+  value,
+  onValueChange,
+  disabled = 'False',
+  size = 'Sm',
+  children,
+  style,
+  testID,
+}: RadioGroupProps) {
+  return (
+    <RadioGroupContext.Provider
+      value={{ value, onValueChange, disabled, size }}
+    >
+      <View testID={testID ?? 'radio-group'} style={style}>
+        {children}
+      </View>
+    </RadioGroupContext.Provider>
+  );
+}
+
+export interface RadioGroupItemProps {
+  value: string;
+  disabled?: RadioDisabled;
+  size?: RadioSize;
+  testID?: string;
+  className?: never;
+}
+
+export function RadioGroupItem({
+  value,
+  disabled,
+  size,
+  testID,
+}: RadioGroupItemProps) {
+  const context = React.useContext(RadioGroupContext);
+
+  const groupValue = context?.value ?? '';
+  const onValueChange = context?.onValueChange;
+  const groupDisabled = context?.disabled ?? 'False';
+  const groupSize = context?.size ?? 'Sm';
+
+  const isChecked = value === groupValue;
+  const itemDisabled: RadioDisabled = disabled ?? groupDisabled;
+  const itemSize: RadioSize = size ?? groupSize;
+
+  return (
+    <RadioItem
+      value={value}
+      state={isChecked ? 'Checked' : 'Unchecked'}
+      disabled={itemDisabled}
+      size={itemSize}
+      onValueChange={onValueChange}
+      testID={testID}
+    />
+  );
+}
+
+export const Radio = RadioItem;

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

@@ -0,0 +1,44 @@
+import figma from '@figma/code-connect';
+import { Select } from './Select';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=120-457';
+
+figma.connect(Select, FIGMA_URL, {
+  props: {
+    state: figma.enum('state', {
+      default: 'default',
+      focused: 'focused',
+      disabled: 'disabled',
+    }),
+
+    open: figma.enum('open', {
+      false: 'false',
+      true: 'true',
+    }),
+
+    value: figma.enum('value', {
+      placeholder: 'placeholder',
+      filled: 'filled',
+    }),
+
+    showLabel: figma.boolean('Show label'),
+    showHelpText: figma.boolean('Show helpText'),
+    showLeftIcon: figma.boolean('Show leftIcon'),
+  },
+
+  example: (props) => (
+    <Select
+      state={props.state}
+      open={props.open}
+      value={props.value}
+      showLabel={props.showLabel}
+      showHelpText={props.showHelpText}
+      showLeftIcon={props.showLeftIcon}
+      label="Field Label"
+      helperText="This is a helper text"
+      placeholderText="Placeholder text"
+      filledText="Select item"
+    />
+  ),
+});