@campxdev/react-native-blueprint 0.1.13 → 0.1.15

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

@@ -0,0 +1,264 @@
+// @ts-nocheck
+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>
+  );
+}

package/src/components/Input/switch/Switch.figma.tsx

@@ -0,0 +1,39 @@
+// @ts-nocheck
+import figma from '@figma/code-connect';
+
+import { Switch } from './Switch';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=100-463';
+
+/**
+ * Switch – Binary on/off control
+ *
+ * Use cases:
+ * - Settings toggles
+ * - Preferences
+ * - Feature enable / disable
+ */
+figma.connect(Switch, FIGMA_URL, {
+  props: {
+    size: figma.enum('size', {
+      sm: 'sm',
+      md: 'md',
+    }),
+
+    state: figma.enum('state', {
+      on: 'on',
+      off: 'off',
+    }),
+
+    disabled: figma.boolean('disabled'),
+  },
+
+  example: (props) => (
+    <Switch
+      size={props.size}
+      disabled={props.disabled}
+      checked={props.state === 'on'}
+    />
+  ),
+});

package/src/components/Input/switch/Switch.tsx

@@ -0,0 +1,104 @@
+// @ts-nocheck
+import { cn } from '../../../lib/utils';
+import * as SwitchPrimitive from '@rn-primitives/switch';
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import { Platform } from 'react-native';
+
+/* ------------------------------------------------------------------
+ * Track variants
+ * ------------------------------------------------------------------ */
+const switchTrackVariants = cva(
+  cn(
+    'relative flex shrink-0 items-center justify-center rounded',
+    Platform.select({
+      web: 'inline-flex outline-none transition-[box-shadow] focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed',
+    })
+  ),
+  {
+    variants: {
+      size: {
+        sm: 'h-5 w-10', // 20 x 40
+        md: 'h-6 w-12', // 24 x 48
+      },
+      state: {
+        on: cn('bg-[#121212]', Platform.select({ web: 'dark:bg-white' })),
+        off: cn('bg-[#F3F4F6]', Platform.select({ web: 'dark:bg-[#293640]' })),
+      },
+      disabled: {
+        true: 'opacity-50',
+        false: '',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+      disabled: false,
+    },
+  }
+);
+
+/* ------------------------------------------------------------------
+ * Thumb variants
+ * ------------------------------------------------------------------ */
+const switchThumbVariants = cva(
+  cn(
+    'absolute rounded transition-transform',
+    Platform.select({
+      web: 'pointer-events-none',
+    })
+  ),
+  {
+    variants: {
+      size: {
+        sm: 'h-4 w-4', // 16 x 16
+        md: 'h-5 w-5', // 20 x 20
+      },
+      state: {
+        on: cn('bg-white', Platform.select({ web: 'dark:bg-[#161A1D]' })),
+        off: cn('bg-white', Platform.select({ web: 'dark:bg-[#161A1D]' })),
+      },
+    },
+    compoundVariants: [
+      {
+        size: 'sm',
+        state: 'on',
+        className: 'translate-x-5',
+      },
+      {
+        size: 'md',
+        state: 'on',
+        className: 'translate-x-6',
+      },
+    ],
+    defaultVariants: {
+      size: 'md',
+    },
+  }
+);
+
+/* ------------------------------------------------------------------
+ * Types
+ * ------------------------------------------------------------------ */
+type SwitchProps = Omit<SwitchPrimitive.RootProps, 'className'> &
+  VariantProps<typeof switchTrackVariants>;
+
+/* ------------------------------------------------------------------
+ * Component
+ * ------------------------------------------------------------------ */
+function Switch({ size, disabled, checked, ...props }: SwitchProps) {
+  const state = checked ? 'on' : 'off';
+
+  return (
+    <SwitchPrimitive.Root
+      {...props}
+      disabled={disabled}
+      className={cn(switchTrackVariants({ size, state, disabled }))}
+    >
+      <SwitchPrimitive.Thumb
+        className={cn(switchThumbVariants({ size, state }))}
+      />
+    </SwitchPrimitive.Root>
+  );
+}
+
+export { Switch };

package/src/components/Layout/AspectRatio/Aspect-Ratio.figma.tsx

@@ -0,0 +1,22 @@
+import figma from '@figma/code-connect';
+import { AspectRatio } from './Aspect-Ratio';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=200-379';
+
+figma.connect(AspectRatio, FIGMA_URL, {
+  props: {
+    variant: figma.enum('variant', {
+      '16:9': '16:9',
+      '1:1': '1:1',
+      '4:3': '4:3',
+    }),
+  },
+
+  example: ({ variant }) => (
+    <AspectRatio
+      variant={variant}
+      source={{ uri: 'https://placehold.co/600x400/2563eb/2563eb.png' }}
+    />
+  ),
+});

package/src/components/Layout/AspectRatio/Aspect-Ratio.tsx

@@ -0,0 +1,54 @@
+import { View, Image, type ImageSourcePropType } from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cssInterop } from 'nativewind';
+import { cn } from '../../../lib/utils';
+
+cssInterop(Image, { className: 'style' });
+cssInterop(View, { className: 'style' });
+
+/* ------------------------------------------------------------------
+ * Variants
+ * ------------------------------------------------------------------ */
+
+const aspectRatioVariants = cva('overflow-hidden rounded-[20px] px-5', {
+  variants: {
+    variant: {
+      '16:9': 'w-[400px] h-[214.286px]',
+      '1:1': 'w-[400px] h-[400px]',
+      '4:3': 'w-[400px] h-[300px]',
+    },
+  },
+  defaultVariants: {
+    variant: '16:9',
+  },
+});
+
+/* ------------------------------------------------------------------
+ * Types
+ * ------------------------------------------------------------------ */
+
+export interface AspectRatioProps
+  extends VariantProps<typeof aspectRatioVariants> {
+  source: ImageSourcePropType;
+  className?: string;
+}
+
+/* ------------------------------------------------------------------
+ * Component
+ * ------------------------------------------------------------------ */
+
+// Cast components to allow className prop without global type augmentation
+const StyledView = View as any;
+const StyledImage = Image as any;
+
+export function AspectRatio({ source, variant, className }: AspectRatioProps) {
+  return (
+    <StyledView className={cn(aspectRatioVariants({ variant }), className)}>
+      <StyledImage
+        source={source}
+        resizeMode="cover"
+        className="w-full h-full"
+      />
+    </StyledView>
+  );
+}