@campxdev/react-native-blueprint 0.1.13 → 0.1.15

package/src/components/Feedback/AlertDialog/Alert-Dialog.tsx

@@ -0,0 +1,176 @@
+import {
+  View,
+  Text as RNText,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { cssInterop } from 'nativewind';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../../lib/utils';
+// Corrected import path for Button
+import { Button } from '../../Input/Button/Button';
+
+// NativeWind interop (className -> style)
+cssInterop(View, { className: 'style' });
+cssInterop(RNText, { className: 'style' });
+
+// Internal components with loose typing to allow className passing internally
+// while keeping the public API strict.
+const StyledView = View as any;
+const StyledText = RNText as any;
+
+/* -----------------------------------------------------
+ * Canonical variants (match Figma + Code Connect)
+ * --------------------------------------------------- */
+
+export const AlertDialogVariants = {
+  intent: ['default', 'destructive'] as const,
+} as const;
+
+type AlertDialogIntent = (typeof AlertDialogVariants.intent)[number];
+
+/* -----------------------------------------------------
+ * Variants
+ * --------------------------------------------------- */
+
+const rootVariants = cva(
+  'flex-1 flex-col items-start rounded-lg bg-background px-5 py-5 gap-4 mx-5',
+  {
+    variants: {
+      intent: {
+        default: '',
+        destructive: '',
+      },
+    },
+    defaultVariants: {
+      intent: 'default',
+    },
+  }
+);
+
+const contentVariants = cva('w-full flex-col items-start gap-2');
+
+const titleVariants = cva('w-full text-base font-semibold text-foreground');
+
+const descriptionVariants = cva(
+  'w-full text-xs font-medium text-muted-foreground'
+);
+
+const actionsVariants = cva('flex-row items-start gap-3');
+
+/* -----------------------------------------------------
+ * Props (lowercase + backward compatible)
+ * --------------------------------------------------- */
+
+export type AlertDialogProps = Omit<
+  VariantProps<typeof rootVariants>,
+  'intent'
+> & {
+  title: string;
+  description: string;
+
+  intent?: AlertDialogIntent | 'Default' | 'Destructive';
+
+  showDescription?: boolean;
+  showSecondaryAction?: boolean;
+
+  /** Used to override the default root style. */
+  style?: StyleProp<ViewStyle>;
+
+  /** Used to locate this view in end-to-end tests. */
+  testID?: string;
+
+  /** Prevent passing className */
+  className?: never;
+};
+
+/* -----------------------------------------------------
+ * Normalizer
+ * --------------------------------------------------- */
+
+function normalizeIntent(v: any): AlertDialogIntent {
+  const s = String(v ?? 'default').toLowerCase();
+  return s === 'destructive' ? 'destructive' : 'default';
+}
+
+/* -----------------------------------------------------
+ * Component
+ * --------------------------------------------------- */
+
+export function AlertDialog(props: AlertDialogProps) {
+  const {
+    title,
+    description,
+    intent,
+    showDescription = true,
+    showSecondaryAction = true,
+    style,
+    testID,
+  } = props;
+
+  const i = normalizeIntent(intent);
+
+  // map to your Button variants (lowercase here)
+  const primaryVariant = i === 'destructive' ? 'destructive' : 'default';
+  const secondaryVariant = i === 'destructive' ? 'outline' : 'outline';
+
+  return (
+    <StyledView
+      testID={testID ?? 'alert-dialog'}
+      className={cn(rootVariants({ intent: i }))}
+      style={style}
+    >
+      <StyledView
+        testID="alert-dialog-content"
+        className={cn(contentVariants())}
+      >
+        <StyledText testID="alert-dialog-title" className={cn(titleVariants())}>
+          {title}
+        </StyledText>
+
+        {showDescription ? (
+          <StyledText
+            testID="alert-dialog-description"
+            className={cn(descriptionVariants())}
+          >
+            {description}
+          </StyledText>
+        ) : null}
+      </StyledView>
+
+      <StyledView
+        testID="alert-dialog-actions"
+        className={cn(actionsVariants())}
+      >
+        <Button
+          testID="alert-dialog-confirm"
+          disabled={false}
+          size="default"
+          variant={primaryVariant}
+          showLeftIcon={false}
+          showRightIcon={false}
+        >
+          Confirm
+        </Button>
+
+        {showSecondaryAction ? (
+          <Button
+            testID="alert-dialog-cancel"
+            disabled={false}
+            size="default"
+            variant={secondaryVariant}
+            showLeftIcon={false}
+            showRightIcon={false}
+          >
+            Cancel
+          </Button>
+        ) : null}
+      </StyledView>
+    </StyledView>
+  );
+}
+
+AlertDialog.displayName = 'AlertDialog';
+
+export { rootVariants };

package/src/components/Feedback/InfoBar/InfoBar.figma.tsx

@@ -0,0 +1,31 @@
+import figma from '@figma/code-connect';
+import { InfoBar } from './InfoBar';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=375-5879';
+
+figma.connect(InfoBar, FIGMA_URL, {
+  props: {
+    title: figma.string('Title'),
+    description: figma.string('Description'),
+    showCloseIcon: figma.boolean('Show closeIcon'),
+    showAlertContent: figma.boolean('Show alertContent'),
+    showIconContainer: figma.boolean('Show iconContainer'),
+    showInfoBarDescription: figma.boolean('Show InfoBarDescription'),
+  },
+  example: (props) => (
+    <InfoBar
+      title={props.title}
+      description={props.description}
+      showCloseIcon={props.showCloseIcon}
+      showAlertContent={props.showAlertContent}
+      showIconContainer={props.showIconContainer}
+      showInfoBarDescription={props.showInfoBarDescription}
+      alertContent={[
+        { text: 'Point 1 of Content' },
+        { text: 'Point 2 of the Content' },
+        { text: 'Point 3 of the Content' },
+      ]}
+    />
+  ),
+});

package/src/components/Feedback/InfoBar/InfoBar.tsx

@@ -0,0 +1,127 @@
+// @ts-nocheck
+import React from 'react';
+import { View as RNView, Pressable as RNPressable } from 'react-native';
+import { cssInterop } from 'nativewind';
+import { X } from 'lucide-react-native';
+import { Text } from '../../Input/Text/Text';
+import { Icon } from '../../ui/Icon';
+
+cssInterop(RNView, { className: 'style' });
+cssInterop(RNPressable, { className: 'style' });
+
+const View = RNView as React.ComponentType<
+  React.ComponentProps<typeof RNView> & { className?: string }
+>;
+const Pressable = RNPressable as React.ComponentType<
+  React.ComponentProps<typeof RNPressable> & { className?: string }
+>;
+
+// ============================================================================
+// TYPES
+// ============================================================================
+
+export interface InfoBarProps {
+  title?: string;
+  description?: string;
+  showCloseIcon?: boolean;
+  showAlertContent?: boolean;
+  showIconContainer?: boolean;
+  showInfoBarDescription?: boolean;
+  alertContent?: Array<{ text: string }>;
+  onClose?: () => void;
+  icon?: React.ComponentType<{ size: number; color: string }>;
+  testID?: string;
+}
+
+// ============================================================================
+// MAIN COMPONENT
+// ============================================================================
+
+function InfoBar({
+  title = 'This is the Info Bar title',
+  description = 'Infobar description goes here. It can be one or two lines.',
+  showCloseIcon = true,
+  showAlertContent = true,
+  showIconContainer = true,
+  showInfoBarDescription = true,
+  alertContent = [
+    { text: 'Point 1 of Content' },
+    { text: 'Point 2 of the Content' },
+    { text: 'Point 3 of the Content' },
+  ],
+  onClose,
+  icon: IconComponent,
+  testID,
+}: InfoBarProps) {
+  return (
+    <View className="w-full flex-col items-start gap-3 justify-center">
+      <View
+        testID={testID}
+        className="bg-[#573dab33] flex-col items-start gap-3 p-5 rounded-[var(--radius-lg)]"
+      >
+        <View className="w-full flex-col items-start gap-2 justify-center">
+          {/* Icon Container & Close Button */}
+          {showIconContainer && (
+            <View className="w-full flex-row items-start justify-between">
+              <View className="flex-1 flex-row items-center">
+                {IconComponent && (
+                  <Icon as={IconComponent} size={16} color="#573dab" />
+                )}
+              </View>
+
+              {showCloseIcon && (
+                <Pressable
+                  onPress={onClose}
+                  hitSlop={12}
+                  style={{
+                    width: 16,
+                    height: 16,
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                  }}
+                >
+                  <Icon as={X} size={16} color="#573dab" />
+                </Pressable>
+              )}
+            </View>
+          )}
+
+          {/* Content: Title & Description */}
+          <View className="w-full flex-col items-start gap-2">
+            <View className="w-full flex-col items-start gap-1">
+              <Text className="font-semibold text-base text-[var(--colors-text-primary)]">
+                {title}
+              </Text>
+
+              {showInfoBarDescription && (
+                <Text className="font-medium text-xs opacity-70 text-[var(--colors-text-primary)]">
+                  {description}
+                </Text>
+              )}
+            </View>
+          </View>
+
+          {/* Alert Content - Bullet Points */}
+          {showAlertContent && alertContent && alertContent.length > 0 && (
+            <View className="w-full flex-col items-start gap-2">
+              {alertContent.map((item, index) => (
+                <View
+                  key={index}
+                  className="w-full flex-row items-center gap-1"
+                >
+                  <View className="w-1 h-1 rounded-full bg-[var(--colors-text-primary)]" />
+                  <Text className="font-normal text-xs text-[var(--colors-text-primary)]">
+                    {item.text}
+                  </Text>
+                </View>
+              ))}
+            </View>
+          )}
+        </View>
+      </View>
+    </View>
+  );
+}
+
+export { InfoBar };
+export default InfoBar;

package/src/components/Feedback/ProgressCircular/Progress-circular.figma.tsx

@@ -0,0 +1,32 @@
+import figma from '@figma/code-connect';
+import { ProgressCircular } from './Progress-circular';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=24-114';
+
+figma.connect(ProgressCircular, FIGMA_URL, {
+  props: {
+    indeterminate: figma.boolean('indeterminate'),
+
+    size: figma.enum('size', {
+      sm: 'sm',
+      md: 'md',
+      lg: 'lg',
+    }),
+
+    variant: figma.enum('variant', {
+      default: 'default',
+      success: 'success',
+      warning: 'warning',
+      destructive: 'destructive',
+    }),
+  },
+
+  example: (props) => (
+    <ProgressCircular
+      indeterminate={props.indeterminate}
+      size={props.size}
+      variant={props.variant}
+    />
+  ),
+});

package/src/components/Feedback/ProgressCircular/Progress-circular.tsx

@@ -0,0 +1,165 @@
+// @ts-nocheck
+import * as React from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { cssInterop } from 'nativewind';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../../lib/utils';
+
+// NativeWind interop (className -> style)
+cssInterop(View, { className: 'style' });
+
+/**
+ * ✅ Matches Figma / Code Connect canonical values:
+ * indeterminate: boolean
+ * size: 'sm' | 'md' | 'lg'
+ * variant: 'default' | 'success' | 'warning' | 'destructive'
+ */
+export const ProgressCircularVariants = {
+  size: ['sm', 'md', 'lg'],
+  variant: ['default', 'success', 'warning', 'destructive'],
+} as const;
+
+const rootVariants = cva('', {
+  variants: {
+    size: {
+      sm: 'w-5 h-5', // 20x20
+      md: 'w-6 h-6', // 24x24
+      lg: 'w-8 h-8', // 32x32
+    },
+    variant: {
+      default: '',
+      success: '',
+      warning: '',
+      destructive: '',
+    },
+    disabled: {
+      // (not used, but keeping pattern if you ever add)
+      false: '',
+      true: '',
+    },
+  },
+  defaultVariants: {
+    size: 'sm',
+    variant: 'default',
+  },
+});
+
+/**
+ * Ring that can spin when indeterminate === true.
+ * Uses NativeWind `animate-spin`.
+ */
+const spinnerVariants = cva(
+  'rounded-full border-2 border-l-transparent border-r-transparent border-b-transparent',
+  {
+    variants: {
+      size: {
+        sm: 'w-5 h-5 border-2',
+        md: 'w-6 h-6 border-2',
+        lg: 'w-8 h-8 border-2',
+      },
+      variant: {
+        default: 'border-t-brand-primary',
+        success: 'border-t-highlight-success-green',
+        warning: 'border-t-highlight-warning-orange',
+        destructive: 'border-t-highlight-alert-red',
+      },
+      indeterminate: {
+        false: '',
+        true: 'animate-spin',
+      },
+    },
+    defaultVariants: {
+      size: 'sm',
+      variant: 'default',
+      indeterminate: false,
+    },
+  }
+);
+
+/**
+ * ✅ Strict rule: className must NOT be accepted as a prop.
+ */
+export type ProgressCircularProps = Omit<
+  VariantProps<typeof rootVariants>,
+  'disabled'
+> & {
+  indeterminate?: boolean;
+  size?: (typeof ProgressCircularVariants.size)[number];
+  variant?: (typeof ProgressCircularVariants.variant)[number];
+
+  /** Used to override the default root style. */
+  style?: StyleProp<ViewStyle>;
+
+  /** Used to locate this view in end-to-end tests. */
+  testID?: string;
+
+  /** Prevent passing className */
+  className?: never;
+};
+
+/**
+ * Backward compatibility:
+ * If any old callers still pass 'True'/'False' or 'Sm'/'Md'/'Lg', normalize them.
+ */
+function normalizeIndeterminate(v: any): boolean {
+  if (typeof v === 'boolean') return v;
+  const s = String(v ?? 'false').toLowerCase();
+  return s === 'true' || s === '1';
+}
+
+function normalizeSize(v: any): (typeof ProgressCircularVariants.size)[number] {
+  const s = String(v ?? 'sm').toLowerCase();
+  if (s === 'sm' || s === 'md' || s === 'lg') return s;
+  // support old caps: Sm/Md/Lg
+  if (s === 'sm' || s === 'md' || s === 'lg') return s;
+  return 'sm';
+}
+
+function normalizeVariant(
+  v: any
+): (typeof ProgressCircularVariants.variant)[number] {
+  const s = String(v ?? 'default').toLowerCase();
+  if (
+    s === 'default' ||
+    s === 'success' ||
+    s === 'warning' ||
+    s === 'destructive'
+  )
+    return s;
+  return 'default';
+}
+
+export function ProgressCircular(props: ProgressCircularProps) {
+  const { style, testID } = props;
+
+  const size = normalizeSize(props.size);
+  const variant = normalizeVariant(props.variant);
+  const indeterminate = normalizeIndeterminate(props.indeterminate);
+
+  // sizes: sm=20, md=24, lg=32
+  const sizePx = size === 'sm' ? 20 : size === 'md' ? 24 : 32;
+
+  return (
+    <View
+      testID={testID ?? 'progress-circular'}
+      className={cn(rootVariants({ size, variant }))}
+      style={style}
+    >
+      <View
+        testID="progress-circular-ring"
+        className={cn(spinnerVariants({ size, variant, indeterminate }))}
+        style={{
+          width: sizePx,
+          height: sizePx,
+          borderRadius: sizePx / 2,
+        }}
+      />
+    </View>
+  );
+}
+
+ProgressCircular.displayName = 'ProgressCircular';
+
+export { rootVariants, spinnerVariants };
+export type { ProgressCircularProps };

package/src/components/Feedback/ProgressLinear/Progress-linear.figma.tsx

@@ -0,0 +1,27 @@
+import figma from '@figma/code-connect';
+import { ProgressLinear } from './Progress-linear';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=24-88';
+
+figma.connect(ProgressLinear, FIGMA_URL, {
+  props: {
+    // Boolean toggle in Figma
+    indeterminate: figma.boolean('indeterminate'),
+
+    // Lowercase enum values (match Figma + code)
+    variant: figma.enum('variant', {
+      default: 'default',
+      success: 'success',
+      warning: 'warning',
+      destructive: 'destructive',
+    }),
+  },
+
+  example: (props) => (
+    <ProgressLinear
+      indeterminate={props.indeterminate}
+      variant={props.variant}
+    />
+  ),
+});

package/src/components/Feedback/ProgressLinear/Progress-linear.tsx

@@ -0,0 +1,126 @@
+// @ts-nocheck
+import * as React from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { cssInterop } from 'nativewind';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../../lib/utils';
+
+// NativeWind interop (className -> style)
+cssInterop(View, { className: 'style' });
+
+/**
+ * ✅ Canonical values (match Figma + Code Connect)
+ * indeterminate: boolean
+ * variant: 'default' | 'success' | 'warning' | 'destructive'
+ */
+export const ProgressLinearVariants = {
+  variant: ['default', 'success', 'warning', 'destructive'],
+} as const;
+
+const rootVariants = cva(
+  'w-[400px] h-1 relative overflow-hidden rounded-full',
+  {
+    variants: {
+      variant: {
+        default: '',
+        success: '',
+        warning: '',
+        destructive: '',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+const backgroundVariants = cva('absolute inset-0 bg-surface-subtle');
+
+const barVariants = cva('absolute left-0 top-0 h-1 rounded-full', {
+  variants: {
+    indeterminate: {
+      false: 'w-[400px]',
+      true: 'w-[100px]',
+    },
+    variant: {
+      default: 'bg-brand-primary',
+      success: 'bg-highlight-success-green',
+      warning: 'bg-highlight-warning-orange',
+      destructive: 'bg-highlight-alert-red',
+    },
+  },
+  defaultVariants: {
+    indeterminate: false,
+    variant: 'default',
+  },
+});
+
+/**
+ * ✅ Strict rule: className must NOT be accepted as a prop.
+ * ✅ Backward compatible: accepts old 'True'/'False' and 'Default' casing too.
+ */
+export type ProgressLinearProps = Omit<
+  VariantProps<typeof barVariants>,
+  'variant' | 'indeterminate'
+> & {
+  indeterminate?: boolean | 'True' | 'False' | 'true' | 'false' | '1' | '0';
+  variant?:
+    | (typeof ProgressLinearVariants.variant)[number]
+    | Capitalize<(typeof ProgressLinearVariants.variant)[number]>;
+
+  /** Used to override the default root style. */
+  style?: StyleProp<ViewStyle>;
+
+  /** Used to locate this view in end-to-end tests. */
+  testID?: string;
+
+  /** Prevent passing className */
+  className?: never;
+};
+
+function normalizeIndeterminate(v: any): boolean {
+  if (typeof v === 'boolean') return v;
+  const s = String(v ?? 'false').toLowerCase();
+  return s === 'true' || s === '1';
+}
+
+function normalizeVariant(
+  v: any
+): (typeof ProgressLinearVariants.variant)[number] {
+  const s = String(v ?? 'default').toLowerCase();
+  if (
+    s === 'default' ||
+    s === 'success' ||
+    s === 'warning' ||
+    s === 'destructive'
+  )
+    return s;
+  return 'default';
+}
+
+export function ProgressLinear(props: ProgressLinearProps) {
+  const { style, testID } = props;
+
+  const variant = normalizeVariant(props.variant);
+  const indeterminate = normalizeIndeterminate(props.indeterminate);
+
+  return (
+    <View
+      testID={testID ?? 'progress-linear'}
+      className={cn(rootVariants({ variant }))}
+      style={style}
+    >
+      <View testID="progress-linear-bg" className={cn(backgroundVariants())} />
+      <View
+        testID="progress-linear-bar"
+        className={cn(barVariants({ variant, indeterminate }))}
+      />
+    </View>
+  );
+}
+
+ProgressLinear.displayName = 'ProgressLinear';
+
+export { rootVariants, backgroundVariants, barVariants };
+export type { ProgressLinearProps };