@campxdev/react-native-blueprint 0.1.12 → 0.1.14

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

@@ -0,0 +1,38 @@
+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,103 @@
+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>
+  );
+}

package/src/components/Layout/Bottomsheet/Bottom-Sheet.tsx

@@ -0,0 +1,443 @@
+import React, {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from 'react';
+import {
+  StyleSheet,
+  View as RNView,
+  Text as RNText,
+  type ViewStyle,
+} from 'react-native';
+import { cssInterop } from 'nativewind';
+import BottomSheetPrimitive, {
+  BottomSheetBackdrop,
+  BottomSheetView,
+  type BottomSheetBackdropProps,
+} from '@gorhom/bottom-sheet';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../../lib/utils';
+import { useTheme } from '../../../lib/ThemeProvider';
+import { hslToRgb } from '../../theme-config';
+import { Button } from '../../Input/Button/Button';
+import { TextField } from '../../Input/TextField/Textfield';
+
+// NativeWind interop (className -> style)
+const View = cssInterop(RNView, { className: 'style' });
+const Text = cssInterop(RNText, { className: 'style' });
+
+/* -----------------------------------------------------
+ * BottomSheetDefault Variants
+ * --------------------------------------------------- */
+const sheetRootVariants = cva(
+  cn(
+    'flex-col items-start',
+    'w-full',
+    'pt-4 px-5 pb-12 gap-4',
+    'rounded-t-xl bg-background'
+  ),
+  {
+    variants: {
+      tone: {
+        default: '',
+      },
+    },
+    defaultVariants: {
+      tone: 'default',
+    },
+  }
+);
+
+const handleWrapVariants = cva('self-stretch items-center');
+const handleBarVariants = cva('w-20 h-1 rounded-sm bg-muted');
+const headerRowVariants = cva(cn('self-stretch', 'flex-row items-start'));
+const headerStackVariants = cva(cn('flex-1 flex-col items-start', 'gap-1'));
+const titleVariants = cva('text-base font-bold text-foreground');
+const descriptionVariants = cva('text-xs font-medium text-muted-foreground');
+const contentVariants = cva('self-stretch');
+const footerVariants = cva(cn('self-stretch flex-row items-start', 'gap-2'));
+const footerBtnFillVariants = cva('flex-1');
+
+/* BottomSheet Content Types */
+interface BottomSheetContentRendererProps {
+  type?: 'placeholder' | 'form' | 'text';
+}
+
+function BottomSheetContentRenderer({
+  type = 'placeholder',
+}: BottomSheetContentRendererProps) {
+  const StyledView = RNView as any;
+  const StyledText = RNText as any;
+
+  switch (type) {
+    case 'form':
+      return (
+        <StyledView className="gap-4">
+          <TextField
+            state="default"
+            content="placeholder"
+            type="text"
+            showLabel={true}
+            showHelpText={true}
+            showLeftIcon={false}
+            showRightIcon={false}
+            label="Email Address"
+            helpText="Enter your email address"
+            inputProps={{
+              placeholder: 'name@example.com',
+            }}
+          />
+        </StyledView>
+      );
+    case 'text':
+      return (
+        <StyledView>
+          <StyledText className="text-base text-text-primary text-left leading-6">
+            This is a text content area. You can display detailed information,
+            instructions, or any text-based content here.
+          </StyledText>
+        </StyledView>
+      );
+    case 'placeholder':
+    default:
+      return (
+        <StyledView>
+          <StyledText className="text-base text-text-primary text-left">
+            Placeholder Content
+          </StyledText>
+        </StyledView>
+      );
+  }
+}
+
+/* -----------------------------------------------------
+ * BottomSheetDefault Props
+ * --------------------------------------------------- */
+interface BottomSheetDefaultProps {
+  descriptionText?: string;
+  titleText?: string;
+  showDescription?: boolean;
+  showFooter?: boolean;
+  showHeader?: boolean;
+  dismissable?: boolean;
+  primaryButtonText?: string;
+  secondaryButtonText?: string;
+  onPrimaryPress?: () => void;
+  onSecondaryPress?: () => void;
+  // Content type prop
+  sheetContentType?: 'placeholder' | 'form' | 'text';
+  children?: React.ReactNode;
+  style?: ViewStyle;
+  testID?: string;
+}
+
+/* -----------------------------------------------------
+ * BottomSheetDefault Component
+ * --------------------------------------------------- */
+function BottomSheetDefault(props: BottomSheetDefaultProps) {
+  const {
+    descriptionText = 'Description',
+    titleText = 'Title',
+    showDescription = true,
+    showFooter = true,
+    showHeader = true,
+    dismissable = true,
+    primaryButtonText = 'Primary',
+    secondaryButtonText = 'Secondary',
+    onPrimaryPress,
+    onSecondaryPress,
+    sheetContentType = 'placeholder',
+    children,
+    style,
+    testID,
+  } = props;
+
+  return (
+    <View
+      testID={testID ?? 'bottom-sheet-default'}
+      className={cn(sheetRootVariants({ tone: 'default' }))}
+      style={style}
+    >
+      {/* Drag handle */}
+      {dismissable ? (
+        <View testID="bottom-sheet-handle" className={cn(handleWrapVariants())}>
+          <View className={cn(handleBarVariants())} />
+        </View>
+      ) : null}
+
+      {/* Header */}
+      {showHeader ? (
+        <View testID="bottom-sheet-header" className={cn(headerRowVariants())}>
+          <View className={cn(headerStackVariants())}>
+            <Text testID="bottom-sheet-title" className={cn(titleVariants())}>
+              {titleText}
+            </Text>
+
+            {showDescription ? (
+              <Text
+                testID="bottom-sheet-description"
+                className={cn(descriptionVariants())}
+              >
+                {descriptionText}
+              </Text>
+            ) : null}
+          </View>
+        </View>
+      ) : null}
+
+      {/* Content */}
+      <View testID="bottom-sheet-content" className={cn(contentVariants())}>
+        {children ? (
+          children
+        ) : (
+          <BottomSheetContentRenderer type={sheetContentType} />
+        )}
+      </View>
+
+      {/* Footer */}
+      {showFooter ? (
+        <View testID="bottom-sheet-footer" className={cn(footerVariants())}>
+          <View className={cn(footerBtnFillVariants())}>
+            <Button
+              testID="bottom-sheet-secondary"
+              variant="secondary"
+              size="lg"
+              onPress={onSecondaryPress}
+            >
+              {secondaryButtonText}
+            </Button>
+          </View>
+
+          <View className={cn(footerBtnFillVariants())}>
+            <Button
+              testID="bottom-sheet-primary"
+              variant="default"
+              size="lg"
+              onPress={onPrimaryPress}
+            >
+              {primaryButtonText}
+            </Button>
+          </View>
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+BottomSheetDefault.displayName = 'BottomSheetDefault';
+
+/* -----------------------------------------------------
+ * Original BottomSheet Types
+ * --------------------------------------------------- */
+type BottomSheetRef = {
+  open: () => void;
+  close: () => void;
+  expand: () => void;
+  collapse: () => void;
+  snapToIndex: (index: number) => void;
+};
+
+interface BottomSheetProps {
+  children: React.ReactNode;
+  snapPoints?: (string | number)[];
+  initialSnapIndex?: number;
+  enablePanDownToClose?: boolean;
+  enableDynamicSizing?: boolean;
+  backdropOpacity?: number;
+  enableBackdropDismiss?: boolean;
+  handleIndicatorStyle?: ViewStyle;
+  backgroundStyle?: ViewStyle;
+  className?: string;
+  containerClassName?: string;
+  onChange?: (index: number) => void;
+  onClose?: () => void;
+}
+
+/* -----------------------------------------------------
+ * Original BottomSheet Component
+ * --------------------------------------------------- */
+const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>(
+  (
+    {
+      children,
+      snapPoints: customSnapPoints,
+      initialSnapIndex = -1,
+      enablePanDownToClose = true,
+      enableDynamicSizing = false,
+      backdropOpacity = 0.5,
+      enableBackdropDismiss = true,
+      handleIndicatorStyle,
+      backgroundStyle,
+      className,
+      containerClassName,
+      onChange,
+      onClose,
+    },
+    ref
+  ) => {
+    const bottomSheetRef = useRef<BottomSheetPrimitive>(null);
+    const { colors } = useTheme();
+
+    // Default snap points if not provided
+    const snapPoints = useMemo(
+      () => customSnapPoints ?? ['25%', '50%', '90%'],
+      [customSnapPoints]
+    );
+
+    // Expose methods via ref
+    useImperativeHandle(ref, () => ({
+      open: () => bottomSheetRef.current?.expand(),
+      close: () => bottomSheetRef.current?.close(),
+      expand: () => bottomSheetRef.current?.expand(),
+      collapse: () => bottomSheetRef.current?.collapse(),
+      snapToIndex: (index: number) =>
+        bottomSheetRef.current?.snapToIndex(index),
+    }));
+
+    // Custom backdrop component
+    const renderBackdrop = useCallback(
+      (props: BottomSheetBackdropProps) => (
+        <BottomSheetBackdrop
+          {...props}
+          opacity={backdropOpacity}
+          appearsOnIndex={0}
+          disappearsOnIndex={-1}
+          pressBehavior={enableBackdropDismiss ? 'close' : 'none'}
+        />
+      ),
+      [backdropOpacity, enableBackdropDismiss]
+    );
+
+    // Handle sheet changes
+    const handleSheetChanges = useCallback(
+      (index: number) => {
+        onChange?.(index);
+        if (index === -1) {
+          onClose?.();
+        }
+      },
+      [onChange, onClose]
+    );
+
+    // Theme-aware background style
+    const themedBackgroundStyle = useMemo(
+      () => [
+        styles.background,
+        { backgroundColor: hslToRgb(colors.card) },
+        backgroundStyle,
+      ],
+      [colors.card, backgroundStyle]
+    );
+
+    // Theme-aware handle indicator style
+    const themedHandleStyle = useMemo(
+      () => [
+        styles.handleIndicator,
+        { backgroundColor: hslToRgb(colors.border) },
+        handleIndicatorStyle,
+      ],
+      [colors.border, handleIndicatorStyle]
+    );
+
+    return (
+      <BottomSheetPrimitive
+        ref={bottomSheetRef}
+        index={initialSnapIndex}
+        snapPoints={snapPoints}
+        enablePanDownToClose={enablePanDownToClose}
+        enableDynamicSizing={enableDynamicSizing}
+        backdropComponent={renderBackdrop}
+        onChange={handleSheetChanges}
+        handleIndicatorStyle={themedHandleStyle}
+        backgroundStyle={themedBackgroundStyle}
+        style={styles.container}
+        animateOnMount={false}
+      >
+        <BottomSheetView>
+          <View className={cn('flex-1 bg-card', containerClassName)}>
+            <View className={cn('flex-1', className)}>{children}</View>
+          </View>
+        </BottomSheetView>
+      </BottomSheetPrimitive>
+    );
+  }
+);
+
+BottomSheet.displayName = 'BottomSheet';
+
+const styles = StyleSheet.create({
+  container: {
+    zIndex: 9999,
+  },
+  contentContainer: {
+    flex: 1,
+  },
+  background: {
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+  },
+  handleIndicator: {
+    width: 40,
+    height: 4,
+  },
+});
+
+/* -----------------------------------------------------
+ * Helper Components
+ * --------------------------------------------------- */
+interface BottomSheetHeaderProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+const BottomSheetHeader = ({ children, className }: BottomSheetHeaderProps) => {
+  return (
+    <View
+      className={cn('border-b border-border px-4 py-3 web:px-6', className)}
+    >
+      {children}
+    </View>
+  );
+};
+
+interface BottomSheetContentProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+const BottomSheetContent = ({
+  children,
+  className,
+}: BottomSheetContentProps) => {
+  return (
+    <View className={cn('flex-1 px-4 py-4 web:px-6', className)}>
+      {children}
+    </View>
+  );
+};
+
+interface BottomSheetFooterProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+const BottomSheetFooter = ({ children, className }: BottomSheetFooterProps) => {
+  return (
+    <View
+      className={cn('border-t border-border px-4 py-3 web:px-6', className)}
+    >
+      {children}
+    </View>
+  );
+};
+
+export {
+  BottomSheet,
+  BottomSheetDefault,
+  BottomSheetHeader,
+  BottomSheetContent,
+  BottomSheetFooter,
+};
+export type { BottomSheetRef, BottomSheetProps, BottomSheetDefaultProps };

package/src/components/Layout/Bottomsheet/BottomSheet.figma.tsx

@@ -0,0 +1,38 @@
+import figma from '@figma/code-connect';
+import { BottomSheetDefault } from './Bottom-Sheet';
+
+figma.connect(
+  BottomSheetDefault,
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=299-5915',
+  {
+    props: {
+      // Text content
+      titleText: figma.string('Title Text'),
+      descriptionText: figma.string('Description Text'),
+      // Visibility toggles
+      showHeader: figma.boolean('Show Header'),
+      showDescription: figma.boolean('Show Description'),
+      showFooter: figma.boolean('Show Footer'),
+      dismissable: figma.boolean('dismissable'),
+      // Content type (nested instance)
+      bottomSheetContent: figma.nestedProps('Bottom Sheet Content', {
+        variant: figma.enum('variant', {
+          placeholder: 'placeholder',
+          form: 'form',
+          text: 'text',
+        }),
+      }),
+    },
+    example: (props) => (
+      <BottomSheetDefault
+        titleText={props.titleText}
+        descriptionText={props.descriptionText}
+        showHeader={props.showHeader}
+        showDescription={props.showDescription}
+        showFooter={props.showFooter}
+        dismissable={props.dismissable}
+        sheetContentType={props.bottomSheetContent.variant}
+      />
+    ),
+  }
+);