@sudobility/components-rn 1.0.20 → 1.0.21

package/dist/ui/Banner/Banner.d.ts

@@ -0,0 +1,97 @@
+import { default as React } from 'react';
+import { InfoType } from '@sudobility/types';
+export interface BannerProps {
+    /** Whether the banner is visible */
+    isVisible: boolean;
+    /** Callback when banner is dismissed */
+    onDismiss: () => void;
+    /** Banner title */
+    title: string;
+    /** Banner description (optional) */
+    description?: string;
+    /** Visual variant */
+    variant?: InfoType;
+    /** Auto-dismiss duration in milliseconds (0 to disable, default: 5000) */
+    duration?: number;
+    /** Custom icon (overrides variant icon) */
+    icon?: React.ReactNode;
+    /** Additional NativeWind classes */
+    className?: string;
+    /** Accessible label for close button */
+    closeAccessibilityLabel?: string;
+}
+/**
+ * Banner Component
+ *
+ * A temporary notification banner that slides down from the top of the screen.
+ * React Native port of the web Banner from @sudobility/components.
+ *
+ * Features:
+ * - Slides down from top with spring animation
+ * - Auto-dismisses after configurable duration (default 5 seconds)
+ * - Manual dismiss via close button
+ * - Multiple variants: info, success, warning, error
+ * - Dark/light theme support via NativeWind
+ *
+ * @example
+ * ```tsx
+ * const [showBanner, setShowBanner] = useState(false);
+ *
+ * <Banner
+ *   isVisible={showBanner}
+ *   onDismiss={() => setShowBanner(false)}
+ *   variant={InfoType.SUCCESS}
+ *   title="Changes saved"
+ *   description="Your settings have been updated successfully."
+ * />
+ * ```
+ */
+export declare const Banner: React.FC<BannerProps>;
+/**
+ * Hook for managing banner state
+ *
+ * @example
+ * ```tsx
+ * const { isVisible, bannerProps, showBanner, hideBanner } = useBanner();
+ *
+ * showBanner({
+ *   title: 'Success!',
+ *   description: 'Your changes have been saved.',
+ *   variant: InfoType.SUCCESS,
+ * });
+ *
+ * {bannerProps && (
+ *   <Banner
+ *     isVisible={isVisible}
+ *     onDismiss={hideBanner}
+ *     {...bannerProps}
+ *   />
+ * )}
+ * ```
+ */
+export interface UseBannerOptions {
+    /** Default duration for auto-dismiss (default: 5000) */
+    defaultDuration?: number;
+}
+export interface UseBannerReturn {
+    /** Whether the banner is currently visible */
+    isVisible: boolean;
+    /** Current banner props */
+    bannerProps: {
+        title: string;
+        description?: string;
+        variant: InfoType;
+        duration: number;
+    } | null;
+    /** Show a banner */
+    showBanner: (options: {
+        title: string;
+        description?: string;
+        variant?: InfoType;
+        duration?: number;
+    }) => void;
+    /** Hide the current banner */
+    hideBanner: () => void;
+}
+export declare const useBanner: (options?: UseBannerOptions) => UseBannerReturn;
+//# sourceMappingURL=Banner.d.ts.map

package/dist/ui/Banner/Banner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../src/ui/Banner/Banner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAExE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG7C,MAAM,WAAW,WAAW;IAC1B,oCAAoC;IACpC,SAAS,EAAE,OAAO,CAAC;IACnB,wCAAwC;IACxC,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,mBAAmB;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB;IACrB,OAAO,CAAC,EAAE,QAAQ,CAAC;IACnB,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2CAA2C;IAC3C,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,uBAAuB,CAAC,EAAE,MAAM,CAAC;CAClC;AA6CD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAuIxC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,WAAW,gBAAgB;IAC/B,wDAAwD;IACxD,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,eAAe;IAC9B,8CAA8C;IAC9C,SAAS,EAAE,OAAO,CAAC;IACnB,2BAA2B;IAC3B,WAAW,EAAE;QACX,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,OAAO,EAAE,QAAQ,CAAC;QAClB,QAAQ,EAAE,MAAM,CAAC;KAClB,GAAG,IAAI,CAAC;IACT,oBAAoB;IACpB,UAAU,EAAE,CAAC,OAAO,EAAE;QACpB,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,OAAO,CAAC,EAAE,QAAQ,CAAC;QACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,KAAK,IAAI,CAAC;IACX,8BAA8B;IAC9B,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,eAAO,MAAM,SAAS,GAAI,UAAS,gBAAqB,KAAG,eAkC1D,CAAC"}

package/dist/ui/Banner/index.d.ts

@@ -0,0 +1,2 @@
+export { Banner, useBanner, type BannerProps, type UseBannerOptions, type UseBannerReturn, } from './Banner';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/Banner/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/Banner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,SAAS,EACT,KAAK,WAAW,EAChB,KAAK,gBAAgB,EACrB,KAAK,eAAe,GACrB,MAAM,UAAU,CAAC"}

package/dist/ui/Button/Button.d.ts

@@ -3,8 +3,8 @@ import { VariantProps } from 'class-variance-authority';
 import { ButtonBaseProps } from './Button.shared';
 import * as React from 'react';
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "primary" | "secondary" | "outline" | "ghost" | "destructive" | "destructive-outline" | "success" | "link" | "gradient" | "gradient-secondary" | "gradient-success" | "wallet" | "connect" | "disconnect" | null | undefined;
-    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+    variant?: "link" | "default" | "primary" | "secondary" | "outline" | "ghost" | "destructive" | "destructive-outline" | "success" | "gradient" | "gradient-secondary" | "gradient-success" | "wallet" | "connect" | "disconnect" | null | undefined;
+    size?: "icon" | "default" | "sm" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface ButtonProps extends ButtonBaseProps, Omit<PressableProps, 'children' | 'disabled'>, Omit<VariantProps<typeof buttonVariants>, 'variant' | 'size'> {
     /** Callback when button is pressed */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sudobility/components-rn",
-  "version": "1.0.20",
+  "version": "1.0.21",
   "description": "React Native UI components and design system - Ported from @sudobility/components",
   "type": "module",
   "main": "dist/index.js",
@@ -49,6 +49,7 @@
   "author": "Sudobility",
   "peerDependencies": {
     "@sudobility/design": "^1.1.19",
+    "@sudobility/types": "^1.9.53",
     "nativewind": ">=4.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-native": ">=0.72.0",
@@ -62,6 +63,7 @@
   "devDependencies": {
     "@eslint/js": "^9.15.0",
     "@sudobility/design": "^1.1.19",
+    "@sudobility/types": "^1.9.53",
     "@testing-library/jest-native": "^5.4.3",
     "@testing-library/react-native": "^13.3.3",
     "@types/jest": "^29.5.0",

package/src/index.ts

@@ -7,6 +7,7 @@
 export { cn } from './lib/utils';
 
 // UI Components - Core
+export * from './ui/Banner';
 export * from './ui/Button';
 export * from './ui/Card';
 export * from './ui/Input';

package/src/ui/Banner/Banner.tsx

@@ -0,0 +1,315 @@
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { View, Text, Pressable, Animated } from 'react-native';
+import { InfoType } from '@sudobility/types';
+import { cn } from '../../lib/utils';
+
+export interface BannerProps {
+  /** Whether the banner is visible */
+  isVisible: boolean;
+  /** Callback when banner is dismissed */
+  onDismiss: () => void;
+  /** Banner title */
+  title: string;
+  /** Banner description (optional) */
+  description?: string;
+  /** Visual variant */
+  variant?: InfoType;
+  /** Auto-dismiss duration in milliseconds (0 to disable, default: 5000) */
+  duration?: number;
+  /** Custom icon (overrides variant icon) */
+  icon?: React.ReactNode;
+  /** Additional NativeWind classes */
+  className?: string;
+  /** Accessible label for close button */
+  closeAccessibilityLabel?: string;
+}
+
+const variantConfig: Record<
+  InfoType,
+  {
+    icon: string;
+    container: string;
+    iconColor: string;
+    titleColor: string;
+    descriptionColor: string;
+  }
+> = {
+  [InfoType.INFO]: {
+    icon: '\u2139',
+    container:
+      'bg-blue-50 dark:bg-blue-950 border-blue-200 dark:border-blue-800',
+    iconColor: 'text-blue-600 dark:text-blue-400',
+    titleColor: 'text-blue-900 dark:text-blue-100',
+    descriptionColor: 'text-blue-700 dark:text-blue-300',
+  },
+  [InfoType.SUCCESS]: {
+    icon: '\u2713',
+    container:
+      'bg-green-50 dark:bg-green-950 border-green-200 dark:border-green-800',
+    iconColor: 'text-green-600 dark:text-green-400',
+    titleColor: 'text-green-900 dark:text-green-100',
+    descriptionColor: 'text-green-700 dark:text-green-300',
+  },
+  [InfoType.WARNING]: {
+    icon: '\u26A0',
+    container:
+      'bg-yellow-50 dark:bg-amber-950 border-yellow-200 dark:border-amber-800',
+    iconColor: 'text-yellow-600 dark:text-amber-400',
+    titleColor: 'text-yellow-900 dark:text-amber-100',
+    descriptionColor: 'text-yellow-700 dark:text-amber-300',
+  },
+  [InfoType.ERROR]: {
+    icon: '\u2717',
+    container: 'bg-red-50 dark:bg-red-950 border-red-200 dark:border-red-800',
+    iconColor: 'text-red-600 dark:text-red-400',
+    titleColor: 'text-red-900 dark:text-red-100',
+    descriptionColor: 'text-red-700 dark:text-red-300',
+  },
+};
+
+/**
+ * Banner Component
+ *
+ * A temporary notification banner that slides down from the top of the screen.
+ * React Native port of the web Banner from @sudobility/components.
+ *
+ * Features:
+ * - Slides down from top with spring animation
+ * - Auto-dismisses after configurable duration (default 5 seconds)
+ * - Manual dismiss via close button
+ * - Multiple variants: info, success, warning, error
+ * - Dark/light theme support via NativeWind
+ *
+ * @example
+ * ```tsx
+ * const [showBanner, setShowBanner] = useState(false);
+ *
+ * <Banner
+ *   isVisible={showBanner}
+ *   onDismiss={() => setShowBanner(false)}
+ *   variant={InfoType.SUCCESS}
+ *   title="Changes saved"
+ *   description="Your settings have been updated successfully."
+ * />
+ * ```
+ */
+export const Banner: React.FC<BannerProps> = ({
+  isVisible,
+  onDismiss,
+  title,
+  description,
+  variant = InfoType.INFO,
+  duration = 5000,
+  icon,
+  className,
+  closeAccessibilityLabel = 'Dismiss banner',
+}) => {
+  const [mounted, setMounted] = useState(false);
+  const slideAnim = useRef(new Animated.Value(-100)).current;
+  const opacityAnim = useRef(new Animated.Value(0)).current;
+  const dismissTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const config = variantConfig[variant];
+
+  const clearDismissTimeout = useCallback(() => {
+    if (dismissTimeoutRef.current) {
+      clearTimeout(dismissTimeoutRef.current);
+      dismissTimeoutRef.current = null;
+    }
+  }, []);
+
+  const handleDismiss = useCallback(() => {
+    clearDismissTimeout();
+    Animated.parallel([
+      Animated.timing(slideAnim, {
+        toValue: -100,
+        duration: 300,
+        useNativeDriver: true,
+      }),
+      Animated.timing(opacityAnim, {
+        toValue: 0,
+        duration: 300,
+        useNativeDriver: true,
+      }),
+    ]).start(() => {
+      setMounted(false);
+      onDismiss();
+    });
+  }, [clearDismissTimeout, slideAnim, opacityAnim, onDismiss]);
+
+  // Handle visibility changes
+  useEffect(() => {
+    if (isVisible) {
+      setMounted(true);
+      slideAnim.setValue(-100);
+      opacityAnim.setValue(0);
+
+      Animated.parallel([
+        Animated.spring(slideAnim, {
+          toValue: 0,
+          useNativeDriver: true,
+          friction: 8,
+        }),
+        Animated.timing(opacityAnim, {
+          toValue: 1,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+      ]).start(() => {
+        // Start auto-dismiss timer after animation completes
+        if (duration > 0) {
+          dismissTimeoutRef.current = setTimeout(() => {
+            handleDismiss();
+          }, duration);
+        }
+      });
+    } else if (mounted) {
+      handleDismiss();
+    }
+
+    return () => clearDismissTimeout();
+  }, [isVisible]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => clearDismissTimeout();
+  }, [clearDismissTimeout]);
+
+  if (!mounted) {
+    return null;
+  }
+
+  return (
+    <Animated.View
+      style={{
+        transform: [{ translateY: slideAnim }],
+        opacity: opacityAnim,
+      }}
+      className={cn('absolute top-0 left-0 right-0 z-50', className)}
+      accessibilityRole='alert'
+      accessibilityLiveRegion='polite'
+    >
+      <View
+        className={cn(
+          'flex-row items-start gap-3 p-4 border-b',
+          config.container
+        )}
+      >
+        {/* Icon */}
+        <View className='flex-shrink-0 mt-0.5'>
+          {icon || (
+            <Text className={cn('text-lg', config.iconColor)}>
+              {config.icon}
+            </Text>
+          )}
+        </View>
+
+        {/* Content */}
+        <View className='flex-1 min-w-0'>
+          <Text className={cn('font-semibold', config.titleColor)}>
+            {title}
+          </Text>
+          {description ? (
+            <Text className={cn('text-sm mt-1', config.descriptionColor)}>
+              {description}
+            </Text>
+          ) : null}
+        </View>
+
+        {/* Close button */}
+        <Pressable
+          onPress={handleDismiss}
+          className='flex-shrink-0 p-1 rounded-md'
+          accessibilityRole='button'
+          accessibilityLabel={closeAccessibilityLabel}
+        >
+          <Text className={cn('text-lg', config.iconColor)}>{'\u2717'}</Text>
+        </Pressable>
+      </View>
+    </Animated.View>
+  );
+};
+
+/**
+ * Hook for managing banner state
+ *
+ * @example
+ * ```tsx
+ * const { isVisible, bannerProps, showBanner, hideBanner } = useBanner();
+ *
+ * showBanner({
+ *   title: 'Success!',
+ *   description: 'Your changes have been saved.',
+ *   variant: InfoType.SUCCESS,
+ * });
+ *
+ * {bannerProps && (
+ *   <Banner
+ *     isVisible={isVisible}
+ *     onDismiss={hideBanner}
+ *     {...bannerProps}
+ *   />
+ * )}
+ * ```
+ */
+export interface UseBannerOptions {
+  /** Default duration for auto-dismiss (default: 5000) */
+  defaultDuration?: number;
+}
+
+export interface UseBannerReturn {
+  /** Whether the banner is currently visible */
+  isVisible: boolean;
+  /** Current banner props */
+  bannerProps: {
+    title: string;
+    description?: string;
+    variant: InfoType;
+    duration: number;
+  } | null;
+  /** Show a banner */
+  showBanner: (options: {
+    title: string;
+    description?: string;
+    variant?: InfoType;
+    duration?: number;
+  }) => void;
+  /** Hide the current banner */
+  hideBanner: () => void;
+}
+
+export const useBanner = (options: UseBannerOptions = {}): UseBannerReturn => {
+  const { defaultDuration = 5000 } = options;
+  const [isVisible, setIsVisible] = useState(false);
+  const [bannerProps, setBannerProps] =
+    useState<UseBannerReturn['bannerProps']>(null);
+
+  const showBanner = useCallback(
+    ({
+      title,
+      description,
+      variant = InfoType.INFO,
+      duration = defaultDuration,
+    }: {
+      title: string;
+      description?: string;
+      variant?: InfoType;
+      duration?: number;
+    }) => {
+      setBannerProps({ title, description, variant, duration });
+      setIsVisible(true);
+    },
+    [defaultDuration]
+  );
+
+  const hideBanner = useCallback(() => {
+    setIsVisible(false);
+  }, []);
+
+  return {
+    isVisible,
+    bannerProps,
+    showBanner,
+    hideBanner,
+  };
+};

package/src/ui/Banner/index.ts

@@ -0,0 +1,7 @@
+export {
+  Banner,
+  useBanner,
+  type BannerProps,
+  type UseBannerOptions,
+  type UseBannerReturn,
+} from './Banner';