@beyondcorp/beyond-ui-native 0.1.6 → 0.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beyondcorp/beyond-ui-native",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Accessible, NativeWind-first React Native component library for Beyond Softwares",
   "author": "Beyond Corp",
   "license": "MIT",

package/src/components/dashboard-layout/dashboard-layout.tsx

@@ -0,0 +1,245 @@
+import * as React from "react";
+import {
+  View,
+  ScrollView,
+  Pressable,
+  TextInput,
+  RefreshControl,
+  type ViewProps,
+} from "react-native";
+import { cn } from "../../utilities/cn";
+import { Text } from "../text/text";
+import { Heading } from "../text/heading";
+import { Avatar, AvatarFallback, AvatarImage } from "../avatar/avatar";
+import { NightModeSwitch } from "../night-mode-switch/night-mode-switch";
+
+export interface DashboardBreadcrumb {
+  label: string;
+  onPress?: () => void;
+}
+
+export interface DashboardLayoutProps extends ViewProps {
+  /** Screen or dashboard title */
+  title?: string;
+  /** Subtitle or section caption */
+  subtitle?: string;
+  /** Optional breadcrumbs list */
+  breadcrumbs?: DashboardBreadcrumb[];
+  /** User information for the top bar profile */
+  user?: {
+    name?: string;
+    email?: string;
+    avatarUrl?: string;
+    role?: string;
+  };
+  onProfilePress?: () => void;
+  /** Notification button handler */
+  onNotificationPress?: () => void;
+  unreadNotificationsCount?: number;
+  /** Search bar configuration */
+  showSearch?: boolean;
+  searchPlaceholder?: string;
+  searchValue?: string;
+  onSearchChange?: (text: string) => void;
+  /** Night mode toggle display */
+  showNightModeSwitch?: boolean;
+  /** Navigation back action or drawer action */
+  onBackPress?: () => void;
+  backIcon?: React.ReactNode;
+  /** Custom actions rendered in the top header right section */
+  headerActions?: React.ReactNode;
+  /** Custom bottom bar or fixed footer */
+  footer?: React.ReactNode;
+  /** Whether the main content area scrolls */
+  scrollable?: boolean;
+  /** Pull to refresh handlers */
+  refreshing?: boolean;
+  onRefresh?: () => void;
+  /** Content wrapper class name */
+  contentClassName?: string;
+  children: React.ReactNode;
+}
+
+export const DashboardLayout: React.FC<DashboardLayoutProps> = ({
+  title,
+  subtitle,
+  breadcrumbs,
+  user,
+  onProfilePress,
+  onNotificationPress,
+  unreadNotificationsCount = 0,
+  showSearch = false,
+  searchPlaceholder = "Search...",
+  searchValue,
+  onSearchChange,
+  showNightModeSwitch = true,
+  onBackPress,
+  backIcon,
+  headerActions,
+  footer,
+  scrollable = true,
+  refreshing = false,
+  onRefresh,
+  contentClassName,
+  className,
+  children,
+  ...props
+}) => {
+  return (
+    <View
+      className={cn("flex-1 bg-neutral-50 dark:bg-neutral-950", className)}
+      {...props}
+    >
+      {/* Top Header Bar */}
+      <View className="px-5 pt-3 pb-3 border-b border-neutral-200 dark:border-neutral-800 bg-white/90 dark:bg-neutral-900/90 flex-row items-center justify-between z-10">
+        <View className="flex-row items-center gap-3 flex-1 mr-2">
+          {onBackPress && (
+            <Pressable
+              onPress={onBackPress}
+              className="w-9 h-9 rounded-full bg-neutral-100 dark:bg-neutral-800 items-center justify-center active:opacity-70"
+              accessibilityRole="button"
+              accessibilityLabel="Back"
+            >
+              {backIcon || (
+                <Text className="text-neutral-700 dark:text-neutral-200 font-bold text-base leading-none">
+                  ←
+                </Text>
+              )}
+            </Pressable>
+          )}
+
+          {user && (
+            <Pressable
+              onPress={onProfilePress}
+              className="flex-row items-center gap-2 active:opacity-80"
+              accessibilityRole="button"
+              accessibilityLabel={`User profile: ${user.name || "User"}`}
+            >
+              <Avatar size="sm">
+                {user.avatarUrl && <AvatarImage source={{ uri: user.avatarUrl }} />}
+                <AvatarFallback text={(user.name || "U").slice(0, 2).toUpperCase()} />
+              </Avatar>
+              <View className="hidden sm:flex">
+                <Text className="text-xs font-semibold text-neutral-800 dark:text-neutral-200 leading-tight">
+                  {user.name}
+                </Text>
+                {user.role && (
+                  <Text className="text-[10px] text-neutral-500 dark:text-neutral-400 leading-tight">
+                    {user.role}
+                  </Text>
+                )}
+              </View>
+            </Pressable>
+          )}
+
+          {(title || subtitle) && (
+            <View className="flex-1">
+              {breadcrumbs && breadcrumbs.length > 0 && (
+                <View className="flex-row items-center gap-1 mb-0.5">
+                  {breadcrumbs.map((crumb, idx) => (
+                    <React.Fragment key={idx}>
+                      {idx > 0 && (
+                        <Text className="text-[11px] text-neutral-400 dark:text-neutral-500">/</Text>
+                      )}
+                      <Text
+                        onPress={crumb.onPress}
+                        className={cn(
+                          "text-[11px]",
+                          crumb.onPress
+                            ? "text-primary-600 dark:text-primary-400 font-medium"
+                            : "text-neutral-500 dark:text-neutral-400"
+                        )}
+                      >
+                        {crumb.label}
+                      </Text>
+                    </React.Fragment>
+                  ))}
+                </View>
+              )}
+              {title && (
+                <Heading
+                  level={3}
+                  className="text-lg font-bold text-neutral-900 dark:text-neutral-50 leading-tight"
+                >
+                  {title}
+                </Heading>
+              )}
+              {subtitle && (
+                <Text className="text-xs text-neutral-500 dark:text-neutral-400 leading-tight">
+                  {subtitle}
+                </Text>
+              )}
+            </View>
+          )}
+        </View>
+
+        {/* Right header actions */}
+        <View className="flex-row items-center gap-2">
+          {headerActions}
+
+          {showNightModeSwitch && (
+            <NightModeSwitch size="sm" variant="ghost" />
+          )}
+
+          {onNotificationPress && (
+            <Pressable
+              onPress={onNotificationPress}
+              className="w-9 h-9 rounded-full bg-neutral-100 dark:bg-neutral-800 items-center justify-center relative active:opacity-70"
+              accessibilityRole="button"
+              accessibilityLabel="Notifications"
+            >
+              <Text className="text-sm">🔔</Text>
+              {unreadNotificationsCount > 0 && (
+                <View className="absolute -top-0.5 -right-0.5 min-w-[16px] h-4 px-1 rounded-full bg-danger items-center justify-center">
+                  <Text className="text-[9px] font-bold text-white leading-none">
+                    {unreadNotificationsCount > 9 ? "9+" : unreadNotificationsCount}
+                  </Text>
+                </View>
+              )}
+            </Pressable>
+          )}
+        </View>
+      </View>
+
+      {/* Optional Search Bar */}
+      {showSearch && (
+        <View className="px-5 py-2 border-b border-neutral-100 dark:border-neutral-800/60 bg-neutral-50/50 dark:bg-neutral-900/50">
+          <View className="flex-row items-center bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl px-3 py-2">
+            <Text className="text-neutral-400 mr-2 text-sm">🔍</Text>
+            <TextInput
+              value={searchValue}
+              onChangeText={onSearchChange}
+              placeholder={searchPlaceholder}
+              placeholderTextColor="#9ca3af"
+              className="flex-1 text-sm text-neutral-900 dark:text-neutral-100 p-0"
+            />
+          </View>
+        </View>
+      )}
+
+      {/* Main Body */}
+      {scrollable ? (
+        <ScrollView
+          className={cn("flex-1", contentClassName)}
+          contentContainerStyle={{ paddingBottom: 32 }}
+          showsVerticalScrollIndicator={false}
+          refreshControl={
+            onRefresh ? (
+              <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+            ) : undefined
+          }
+        >
+          {children}
+        </ScrollView>
+      ) : (
+        <View className={cn("flex-1", contentClassName)}>
+          {children}
+        </View>
+      )}
+
+      {/* Optional Fixed Footer / Navigation */}
+      {footer}
+    </View>
+  );
+};
+DashboardLayout.displayName = "DashboardLayout";

package/src/components/dashboard-layout/index.ts

@@ -0,0 +1 @@
+export * from "./dashboard-layout";

package/src/components/modal/index.ts

@@ -0,0 +1 @@
+export * from "./modal";

package/src/components/modal/modal.tsx

@@ -0,0 +1,227 @@
+import * as React from "react";
+import {
+  Modal as RNModal,
+  View,
+  Text,
+  Pressable,
+  StyleSheet,
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView,
+  type ViewProps,
+  type TextProps,
+  type PressableProps,
+} from "react-native";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../utilities/cn";
+
+export const modalVariants = cva(
+  "w-full rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-6 shadow-2xl relative",
+  {
+    variants: {
+      size: {
+        sm: "max-w-xs",
+        md: "max-w-md",
+        lg: "max-w-lg",
+        xl: "max-w-xl",
+        full: "max-w-[95%] max-h-[90%]",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  }
+);
+
+export interface ModalContextValue {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export const ModalContext = React.createContext<ModalContextValue | null>(null);
+
+export function useModalContext(): ModalContextValue {
+  const context = React.useContext(ModalContext);
+  if (!context) {
+    throw new Error("Modal compound components must be used within a Modal component");
+  }
+  return context;
+}
+
+export interface ModalProps extends VariantProps<typeof modalVariants> {
+  open?: boolean;
+  visible?: boolean; // alias for open for RN conventions
+  onOpenChange?: (open: boolean) => void;
+  onRequestClose?: () => void;
+  showCloseButton?: boolean;
+  closeOnOverlayPress?: boolean;
+  children: React.ReactNode;
+  className?: string;
+  overlayClassName?: string;
+}
+
+export function Modal({
+  open: controlledOpen,
+  visible,
+  onOpenChange,
+  onRequestClose,
+  showCloseButton = true,
+  closeOnOverlayPress = true,
+  size = "md",
+  children,
+  className,
+  overlayClassName,
+}: ModalProps) {
+  const isOpen = (controlledOpen !== undefined ? controlledOpen : visible) ?? false;
+
+  const handleClose = React.useCallback(() => {
+    onOpenChange?.(false);
+    onRequestClose?.();
+  }, [onOpenChange, onRequestClose]);
+
+  if (!isOpen) return null;
+
+  return (
+    <ModalContext.Provider value={{ open: isOpen, onOpenChange: (o) => !o && handleClose() }}>
+      <RNModal
+        transparent
+        visible={isOpen}
+        animationType="fade"
+        onRequestClose={handleClose}
+        statusBarTranslucent
+      >
+        <KeyboardAvoidingView
+          behavior={Platform.OS === "ios" ? "padding" : undefined}
+          style={StyleSheet.absoluteFill}
+        >
+          {/* Backdrop Overlay */}
+          <Pressable
+            style={StyleSheet.absoluteFill}
+            className={cn("bg-black/60", overlayClassName)}
+            onPress={closeOnOverlayPress ? handleClose : undefined}
+            accessibilityRole="button"
+            accessibilityLabel="Close modal overlay"
+          />
+
+          {/* Modal Container */}
+          <View
+            pointerEvents="box-none"
+            style={StyleSheet.absoluteFill}
+            className="items-center justify-center p-4 z-50"
+          >
+            <View
+              role="dialog"
+              aria-modal={true}
+              className={cn(modalVariants({ size }), className)}
+            >
+              {showCloseButton && (
+                <Pressable
+                  onPress={handleClose}
+                  hitSlop={{ top: 12, right: 12, bottom: 12, left: 12 }}
+                  className="absolute right-4 top-4 z-50 w-8 h-8 rounded-full bg-neutral-100 dark:bg-neutral-800 items-center justify-center active:opacity-70"
+                  accessibilityRole="button"
+                  accessibilityLabel="Close modal"
+                >
+                  <Text className="text-neutral-500 dark:text-neutral-400 text-sm font-semibold leading-none">
+                    ✕
+                  </Text>
+                </Pressable>
+              )}
+              {children}
+            </View>
+          </View>
+        </KeyboardAvoidingView>
+      </RNModal>
+    </ModalContext.Provider>
+  );
+}
+Modal.displayName = "Modal";
+
+export function ModalHeader({
+  className,
+  ...props
+}: ViewProps & { className?: string }) {
+  return (
+    <View
+      className={cn("flex-col space-y-1.5 pr-8", className)}
+      {...props}
+    />
+  );
+}
+ModalHeader.displayName = "ModalHeader";
+
+export const ModalTitle = React.forwardRef<Text, TextProps & { className?: string }>(
+  function ModalTitle({ className, ...props }, ref) {
+    return (
+      <Text
+        ref={ref}
+        role="heading"
+        aria-level={2}
+        className={cn(
+          "text-lg font-bold tracking-tight text-neutral-900 dark:text-neutral-50",
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+ModalTitle.displayName = "ModalTitle";
+
+export const ModalDescription = React.forwardRef<Text, TextProps & { className?: string }>(
+  function ModalDescription({ className, ...props }, ref) {
+    return (
+      <Text
+        ref={ref}
+        className={cn(
+          "text-sm text-neutral-500 dark:text-neutral-400 mt-1",
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+ModalDescription.displayName = "ModalDescription";
+
+export function ModalContent({
+  className,
+  children,
+  scrollable = false,
+  ...props
+}: ViewProps & { className?: string; scrollable?: boolean }) {
+  if (scrollable) {
+    return (
+      <ScrollView
+        showsVerticalScrollIndicator={false}
+        className={cn("py-3 max-h-[70vh]", className)}
+        {...props}
+      >
+        {children}
+      </ScrollView>
+    );
+  }
+
+  return (
+    <View className={cn("py-3", className)} {...props}>
+      {children}
+    </View>
+  );
+}
+ModalContent.displayName = "ModalContent";
+
+export function ModalFooter({
+  className,
+  ...props
+}: ViewProps & { className?: string }) {
+  return (
+    <View
+      className={cn(
+        "flex-row flex-wrap items-center justify-end gap-2 pt-3 border-t border-neutral-100 dark:border-neutral-800 mt-2",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+ModalFooter.displayName = "ModalFooter";

package/src/components/night-mode-switch/index.ts

@@ -0,0 +1 @@
+export * from "./night-mode-switch";

package/src/components/night-mode-switch/night-mode-switch.tsx

@@ -0,0 +1,95 @@
+import * as React from "react";
+import {
+  Pressable,
+  Text,
+  type PressableProps,
+  type GestureResponderEvent,
+} from "react-native";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../utilities/cn";
+import { useBeyondUI } from "../../providers/BeyondUIProvider";
+
+export const nightModeSwitchVariants = cva(
+  "inline-flex items-center justify-center rounded-full active:opacity-75",
+  {
+    variants: {
+      variant: {
+        primary: "bg-primary-600 dark:bg-primary-500",
+        secondary: "bg-secondary-600 dark:bg-secondary-500",
+        ghost: "bg-transparent active:bg-neutral-100 dark:active:bg-neutral-800",
+      },
+      size: {
+        sm: "w-8 h-8",
+        md: "w-10 h-10",
+        lg: "w-12 h-12",
+      },
+    },
+    defaultVariants: {
+      variant: "ghost",
+      size: "md",
+    },
+  }
+);
+
+export interface NightModeSwitchProps
+  extends Omit<PressableProps, "children">,
+    VariantProps<typeof nightModeSwitchVariants> {
+  ariaLabel?: string;
+  className?: string;
+  textClassName?: string;
+}
+
+export const NightModeSwitch = React.forwardRef<any, NightModeSwitchProps>(
+  function NightModeSwitch(
+    {
+      className,
+      textClassName,
+      variant,
+      size,
+      ariaLabel = "Toggle dark mode",
+      onPress,
+      ...props
+    },
+    ref
+  ) {
+    const { colorScheme, toggleColorScheme } = useBeyondUI();
+    const isDark = colorScheme === "dark";
+
+    const handlePress = (e: GestureResponderEvent) => {
+      toggleColorScheme();
+      onPress?.(e);
+    };
+
+    const iconSizeClasses = {
+      sm: "text-base",
+      md: "text-lg",
+      lg: "text-xl",
+    }[size || "md"];
+
+    return (
+      <Pressable
+        ref={ref}
+        role="button"
+        accessibilityRole="button"
+        accessibilityLabel={ariaLabel}
+        accessibilityState={{ checked: isDark }}
+        className={cn(nightModeSwitchVariants({ variant, size }), className)}
+        onPress={handlePress}
+        {...props}
+      >
+        <Text
+          className={cn(
+            iconSizeClasses,
+            variant === "ghost"
+              ? "text-neutral-700 dark:text-neutral-200"
+              : "text-white",
+            textClassName
+          )}
+        >
+          {isDark ? "🌙" : "☀️"}
+        </Text>
+      </Pressable>
+    );
+  }
+);
+NightModeSwitch.displayName = "NightModeSwitch";

package/src/index.ts

@@ -26,6 +26,9 @@ export * from "./components/accordion";
 export * from "./components/bottom-sheet";
 export * from "./components/select";
 export * from "./components/data-table";
+export * from "./components/modal";
+export * from "./components/night-mode-switch";
+export * from "./components/dashboard-layout";
 
 // Screen Templates
 export * from "./templates";