@campxdev/react-native-blueprint 0.1.13 → 0.1.14

package/src/components/ui/Alert-Dialog.tsx

@@ -1,297 +0,0 @@
-import { buttonTextVariants, buttonVariants } from './Button';
-import { NativeOnlyAnimatedView } from './Native-Only-Animated-View';
-import { TextClassContext } from './Text';
-import { cn } from '../../lib/utils';
-import * as AlertDialogPrimitive from '@rn-primitives/alert-dialog';
-import * as React from 'react';
-import { Platform, View as RNView, type ViewProps } from 'react-native';
-import { cssInterop } from 'nativewind';
-import { FadeIn, FadeOut } from 'react-native-reanimated';
-import { FullWindowOverlay as RNFullWindowOverlay } from 'react-native-screens';
-
-const View = cssInterop(RNView, { className: 'style' }) as React.ComponentType<
-  ViewProps & { className?: string; children?: React.ReactNode }
->;
-
-/**
- * Root alert dialog container
- *
- * A modal dialog that interrupts the user with important content and expects a response.
- * Use for critical actions that require user confirmation before proceeding.
- *
- * @component
- * @example
- * ```tsx
- * <AlertDialog>
- *   <AlertDialogTrigger asChild>
- *     <Button variant="destructive"><Text>Delete Account</Text></Button>
- *   </AlertDialogTrigger>
- *   <AlertDialogContent>
- *     <AlertDialogHeader>
- *       <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
- *       <AlertDialogDescription>
- *         This action cannot be undone.
- *       </AlertDialogDescription>
- *     </AlertDialogHeader>
- *     <AlertDialogFooter>
- *       <AlertDialogCancel><Text>Cancel</Text></AlertDialogCancel>
- *       <AlertDialogAction><Text>Continue</Text></AlertDialogAction>
- *     </AlertDialogFooter>
- *   </AlertDialogContent>
- * </AlertDialog>
- * ```
- *
- * @accessibility
- * - Traps focus within dialog when open
- * - Closes on Escape key press
- * - Returns focus to trigger on close
- * - Uses appropriate ARIA attributes
- */
-const AlertDialog = AlertDialogPrimitive.Root;
-
-/**
- * Trigger button that opens the alert dialog
- *
- * @component
- * @example
- * ```tsx
- * <AlertDialogTrigger asChild>
- *   <Button><Text>Open Dialog</Text></Button>
- * </AlertDialogTrigger>
- * ```
- */
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
-
-/**
- * Portal component for rendering dialog content outside the DOM hierarchy
- */
-const AlertDialogPortal = AlertDialogPrimitive.Portal;
-
-const FullWindowOverlay =
-  Platform.OS === 'ios' ? RNFullWindowOverlay : React.Fragment;
-
-/**
- * Semi-transparent overlay behind the alert dialog
- *
- * Provides backdrop that dims background content and handles click-outside behavior.
- * Uses platform-specific full window overlay on iOS for proper z-index layering.
- *
- * @component
- * @example
- * ```tsx
- * <AlertDialogOverlay>
- *   <AlertDialogContent>...</AlertDialogContent>
- * </AlertDialogOverlay>
- * ```
- */
-function AlertDialogOverlay({
-  className,
-  children,
-  ...props
-}: Omit<AlertDialogPrimitive.OverlayProps, 'asChild'> &
-  React.RefAttributes<AlertDialogPrimitive.OverlayRef> & {
-    children?: React.ReactNode;
-  }) {
-  return (
-    <FullWindowOverlay>
-      <AlertDialogPrimitive.Overlay
-        className={cn(
-          'absolute bottom-0 left-0 right-0 top-0 z-50 flex items-center justify-center bg-black/50 p-2',
-          Platform.select({
-            web: 'animate-in fade-in-0 fixed',
-          }),
-          className
-        )}
-        {...props}
-      >
-        <NativeOnlyAnimatedView
-          entering={FadeIn.duration(200).delay(50)}
-          exiting={FadeOut.duration(150)}
-        >
-          <>{children}</>
-        </NativeOnlyAnimatedView>
-      </AlertDialogPrimitive.Overlay>
-    </FullWindowOverlay>
-  );
-}
-
-/**
- * Main alert dialog content container
- *
- * Contains the dialog's title, description, and action buttons. Automatically centered
- * on screen with smooth entrance animations.
- *
- * @component
- * @example
- * ```tsx
- * <AlertDialogContent>
- *   <AlertDialogHeader>
- *     <AlertDialogTitle>Confirm Action</AlertDialogTitle>
- *     <AlertDialogDescription>Description here</AlertDialogDescription>
- *   </AlertDialogHeader>
- *   <AlertDialogFooter>
- *     <AlertDialogCancel><Text>Cancel</Text></AlertDialogCancel>
- *     <AlertDialogAction><Text>Continue</Text></AlertDialogAction>
- *   </AlertDialogFooter>
- * </AlertDialogContent>
- * ```
- */
-function AlertDialogContent({
-  className,
-  portalHost,
-  ...props
-}: AlertDialogPrimitive.ContentProps &
-  React.RefAttributes<AlertDialogPrimitive.ContentRef> & {
-    portalHost?: string;
-  }) {
-  return (
-    <AlertDialogPortal hostName={portalHost}>
-      <AlertDialogOverlay>
-        <AlertDialogPrimitive.Content
-          className={cn(
-            'bg-background border-border z-50 flex w-full max-w-[calc(100%-2rem)] flex-col gap-4 rounded-lg border p-6 shadow-lg shadow-black/5 sm:max-w-lg',
-            Platform.select({
-              web: 'animate-in fade-in-0 zoom-in-95 duration-200',
-            }),
-            className
-          )}
-          {...(props as any)}
-        />
-      </AlertDialogOverlay>
-    </AlertDialogPortal>
-  );
-}
-
-/**
- * Header section for alert dialog content
- *
- * Groups the title and description with proper spacing and text alignment.
- *
- * @component
- */
-function AlertDialogHeader({ className, ...props }: ViewProps) {
-  return (
-    <TextClassContext.Provider value="text-center sm:text-left">
-      <View className={cn('flex flex-col gap-2', className)} {...props} />
-    </TextClassContext.Provider>
-  );
-}
-
-/**
- * Footer section for alert dialog action buttons
- *
- * Contains cancel and action buttons with responsive layout (stacked on mobile, row on desktop).
- *
- * @component
- */
-function AlertDialogFooter({ className, ...props }: ViewProps) {
-  return (
-    <View
-      className={cn(
-        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-/**
- * Title text for the alert dialog
- *
- * Prominently displays the main heading with large, semibold text.
- *
- * @component
- */
-function AlertDialogTitle({
-  className,
-  ...props
-}: AlertDialogPrimitive.TitleProps &
-  React.RefAttributes<AlertDialogPrimitive.TitleRef>) {
-  return (
-    <AlertDialogPrimitive.Title
-      className={cn('text-foreground text-lg font-semibold', className)}
-      {...props}
-    />
-  );
-}
-
-/**
- * Description text for the alert dialog
- *
- * Provides additional context below the title with muted styling.
- *
- * @component
- */
-function AlertDialogDescription({
-  className,
-  ...props
-}: AlertDialogPrimitive.DescriptionProps &
-  React.RefAttributes<AlertDialogPrimitive.DescriptionRef>) {
-  return (
-    <AlertDialogPrimitive.Description
-      className={cn('text-muted-foreground text-sm', className)}
-      {...props}
-    />
-  );
-}
-
-/**
- * Primary action button that confirms the alert dialog action
- *
- * Styled as a primary button. Automatically closes dialog on press.
- *
- * @component
- */
-function AlertDialogAction({
-  className,
-  ...props
-}: AlertDialogPrimitive.ActionProps &
-  React.RefAttributes<AlertDialogPrimitive.ActionRef>) {
-  return (
-    <TextClassContext.Provider value={buttonTextVariants({ className })}>
-      <AlertDialogPrimitive.Action
-        className={cn(buttonVariants(), className)}
-        {...(props as any)}
-      />
-    </TextClassContext.Provider>
-  );
-}
-
-/**
- * Cancel button that dismisses the alert dialog
- *
- * Styled as an outline button. Automatically closes dialog on press without performing action.
- *
- * @component
- */
-function AlertDialogCancel({
-  className,
-  ...props
-}: AlertDialogPrimitive.CancelProps &
-  React.RefAttributes<AlertDialogPrimitive.CancelRef>) {
-  return (
-    <TextClassContext.Provider
-      value={buttonTextVariants({ className, variant: 'outline' })}
-    >
-      <AlertDialogPrimitive.Cancel
-        className={cn(buttonVariants({ variant: 'outline' }), className)}
-        {...(props as any)}
-      />
-    </TextClassContext.Provider>
-  );
-}
-
-export {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogOverlay,
-  AlertDialogPortal,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-};

package/src/components/ui/Alert.tsx

@@ -1,140 +0,0 @@
-import { Icon } from './Icon';
-import { Text, TextClassContext } from './Text';
-import { cn } from '../../lib/utils';
-import type { LucideIcon } from 'lucide-react-native';
-import * as React from 'react';
-import { View as RNView, type ViewProps } from 'react-native';
-import { cssInterop } from 'nativewind';
-
-const View = cssInterop(RNView, { className: 'style' }) as React.ComponentType<
-  ViewProps & { className?: string; children?: React.ReactNode }
->;
-
-/**
- * Alert component for displaying important messages or notifications
- *
- * Features an icon on the left side with title and description.
- * Supports default and destructive variants for different severity levels.
- *
- * @component
- * @example
- * ```tsx
- * <Alert icon={AlertCircle} variant="default">
- *   <AlertTitle><Text>Heads up!</Text></AlertTitle>
- *   <AlertDescription>
- *     <Text>You can add components to your app using the cli.</Text>
- *   </AlertDescription>
- * </Alert>
- *
- * // Destructive variant
- * <Alert icon={AlertTriangle} variant="destructive">
- *   <AlertTitle><Text>Error</Text></AlertTitle>
- *   <AlertDescription>
- *     <Text>Your session has expired. Please login again.</Text>
- *   </AlertDescription>
- * </Alert>
- * ```
- *
- * @param {LucideIcon} icon - Icon component to display
- * @param {'default' | 'destructive'} [variant='default'] - Alert style variant
- * @param {string} [iconClassName] - Additional classes for the icon
- * @param {string} [className] - Additional classes for the container
- *
- * @accessibility Sets role="alert" for screen reader announcement
- */
-function Alert({
-  className,
-  variant,
-  children,
-  icon,
-  iconClassName,
-  ...props
-}: ViewProps &
-  React.RefAttributes<RNView> & {
-    children?: React.ReactNode;
-    icon: LucideIcon;
-    variant?: 'default' | 'destructive';
-    iconClassName?: string;
-  }) {
-  return (
-    <TextClassContext.Provider
-      value={cn(
-        'text-sm text-foreground dark:text-foreground',
-        variant === 'destructive' && 'text-destructive dark:text-destructive',
-        className
-      )}
-    >
-      <View
-        role="alert"
-        className={cn(
-          'bg-card dark:bg-card border-border dark:border-border relative w-full rounded-lg border px-4 pb-2 pt-3.5',
-          className
-        )}
-        {...(props as any)}
-      >
-        <View className="absolute left-3.5 top-3">
-          <Icon
-            as={icon}
-            className={cn(
-              'size-4 text-foreground dark:text-foreground',
-              variant === 'destructive' &&
-                'text-destructive dark:text-destructive',
-              iconClassName
-            )}
-          />
-        </View>
-        {children}
-      </View>
-    </TextClassContext.Provider>
-  );
-}
-
-/**
- * AlertTitle - Title text for the alert
- *
- * Displays as a medium-weight heading with appropriate spacing from the icon.
- *
- * @param {string} [className] - Additional Tailwind classes
- */
-function AlertTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof Text> & React.RefAttributes<Text>) {
-  return (
-    <Text
-      className={cn(
-        'mb-1 ml-0.5 min-h-4 pl-6 font-medium leading-none tracking-tight',
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-/**
- * AlertDescription - Description text for the alert
- *
- * Displays detailed message content with muted styling and appropriate spacing.
- * Automatically adjusts color for destructive variants.
- *
- * @param {string} [className] - Additional Tailwind classes
- */
-function AlertDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof Text> & React.RefAttributes<Text>) {
-  const textClass = React.useContext(TextClassContext);
-  return (
-    <Text
-      className={cn(
-        'text-muted-foreground dark:text-muted-foreground ml-0.5 pb-1.5 pl-6 text-sm leading-relaxed',
-        textClass?.includes('text-destructive') &&
-          'text-destructive/90 dark:text-destructive/90',
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Alert, AlertDescription, AlertTitle };