@beyondcorp/beyond-ui-native 0.1.2 → 0.1.4

package/src/components/checkbox/checkbox.tsx

@@ -0,0 +1,100 @@
+import * as React from "react";
+import {
+  View,
+  Text,
+  Pressable,
+  type PressableProps,
+  type GestureResponderEvent,
+} from "react-native";
+import { cn } from "../../utilities/cn";
+
+export interface CheckboxProps extends Omit<PressableProps, "onPress"> {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  className?: string;
+  indicatorClassName?: string;
+  label?: string;
+  labelClassName?: string;
+  onPress?: (e: GestureResponderEvent) => void;
+}
+
+export const Checkbox = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  CheckboxProps
+>(function Checkbox(
+  {
+    checked: controlledChecked,
+    defaultChecked = false,
+    onCheckedChange,
+    disabled = false,
+    className,
+    indicatorClassName,
+    label,
+    labelClassName,
+    onPress,
+    ...props
+  },
+  ref
+) {
+  const [uncontrolledChecked, setUncontrolledChecked] = React.useState(defaultChecked);
+  const isControlled = controlledChecked !== undefined;
+  const isChecked = isControlled ? controlledChecked : uncontrolledChecked;
+
+  const handlePress = (e: GestureResponderEvent) => {
+    if (disabled) return;
+    const nextChecked = !isChecked;
+    if (!isControlled) {
+      setUncontrolledChecked(nextChecked);
+    }
+    onCheckedChange?.(nextChecked);
+    onPress?.(e);
+  };
+
+  const content = (
+    <Pressable
+      ref={ref}
+      role="checkbox"
+      accessibilityRole="checkbox"
+      accessibilityState={{ checked: isChecked, disabled: !!disabled }}
+      disabled={disabled}
+      onPress={handlePress}
+      className={cn(
+        "h-6 w-6 shrink-0 items-center justify-center rounded-md border border-neutral-300 dark:border-neutral-700 bg-white dark:bg-neutral-900",
+        isChecked && "bg-primary-600 border-primary-600 dark:bg-primary-600 dark:border-primary-600",
+        disabled && "opacity-50",
+        className
+      )}
+      {...props}
+    >
+      {isChecked ? (
+        <View className={cn("items-center justify-center", indicatorClassName)}>
+          <Text className="text-white text-xs font-bold leading-none">✓</Text>
+        </View>
+      ) : null}
+    </Pressable>
+  );
+
+  if (!label) {
+    return content;
+  }
+
+  return (
+    <View className="flex-row items-center gap-2.5">
+      {content}
+      <Text
+        onPress={!disabled ? handlePress : undefined}
+        className={cn(
+          "text-sm font-medium text-neutral-800 dark:text-neutral-200",
+          disabled && "opacity-50",
+          labelClassName
+        )}
+      >
+        {label}
+      </Text>
+    </View>
+  );
+});
+
+Checkbox.displayName = "Checkbox";

package/src/components/checkbox/index.ts

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

package/src/components/data-table/data-table.tsx

@@ -0,0 +1,276 @@
+import * as React from "react";
+import {
+  View,
+  ScrollView,
+  Pressable,
+  type ViewProps,
+} from "react-native";
+import { cn } from "../../utilities/cn";
+import { Text } from "../text/text";
+import { Input } from "../input/input";
+import { Button } from "../button/button";
+import { Card, CardContent } from "../card/card";
+import { Skeleton } from "../skeleton/skeleton";
+
+export interface Column<T> {
+  key: keyof T | string;
+  title: string;
+  sortable?: boolean;
+  align?: "left" | "center" | "right";
+  width?: number;
+  render?: (value: any, item: T) => React.ReactNode;
+}
+
+export interface DataTableProps<T extends Record<string, any>> extends ViewProps {
+  columns: Column<T>[];
+  data: T[];
+  keyExtractor?: (item: T, index: number) => string;
+  mode?: "table" | "card";
+  searchable?: boolean;
+  searchPlaceholder?: string;
+  searchKeys?: (keyof T)[];
+  loading?: boolean;
+  pageSize?: number;
+  emptyText?: string;
+  onRowPress?: (item: T) => void;
+  className?: string;
+}
+
+export function DataTable<T extends Record<string, any>>({
+  columns,
+  data,
+  keyExtractor = (_, i) => String(i),
+  mode = "card",
+  searchable = true,
+  searchPlaceholder = "Search records...",
+  searchKeys,
+  loading = false,
+  pageSize = 5,
+  emptyText = "No records found",
+  onRowPress,
+  className,
+  ...props
+}: DataTableProps<T>) {
+  const [search, setSearch] = React.useState("");
+  const [sortKey, setSortKey] = React.useState<string | null>(null);
+  const [sortDirection, setSortDirection] = React.useState<"asc" | "desc">("asc");
+  const [currentPage, setCurrentPage] = React.useState(1);
+
+  // Filter
+  const filteredData = React.useMemo(() => {
+    if (!search.trim()) return data;
+    const query = search.toLowerCase();
+    const keys = searchKeys || (columns.map((c) => c.key) as (keyof T)[]);
+
+    return data.filter((item) => {
+      return keys.some((k) => {
+        const val = item[k];
+        if (val == null) return false;
+        return String(val).toLowerCase().includes(query);
+      });
+    });
+  }, [data, search, searchKeys, columns]);
+
+  // Sort
+  const sortedData = React.useMemo(() => {
+    if (!sortKey) return filteredData;
+    return [...filteredData].sort((a, b) => {
+      const valA = a[sortKey];
+      const valB = b[sortKey];
+      if (valA === valB) return 0;
+      if (valA == null) return 1;
+      if (valB == null) return -1;
+
+      if (typeof valA === "number" && typeof valB === "number") {
+        return sortDirection === "asc" ? valA - valB : valB - valA;
+      }
+      const strA = String(valA).toLowerCase();
+      const strB = String(valB).toLowerCase();
+      return sortDirection === "asc"
+        ? strA.localeCompare(strB)
+        : strB.localeCompare(strA);
+    });
+  }, [filteredData, sortKey, sortDirection]);
+
+  // Pagination
+  const totalPages = Math.max(1, Math.ceil(sortedData.length / pageSize));
+  const paginatedData = React.useMemo(() => {
+    const start = (currentPage - 1) * pageSize;
+    return sortedData.slice(start, start + pageSize);
+  }, [sortedData, currentPage, pageSize]);
+
+  const handleSort = (colKey: string) => {
+    if (sortKey === colKey) {
+      if (sortDirection === "asc") {
+        setSortDirection("desc");
+      } else {
+        setSortKey(null);
+        setSortDirection("asc");
+      }
+    } else {
+      setSortKey(colKey);
+      setSortDirection("asc");
+    }
+  };
+
+  return (
+    <View className={cn("w-full gap-4", className)} {...props}>
+      {/* Search Input */}
+      {searchable && (
+        <Input
+          placeholder={searchPlaceholder}
+          value={search}
+          onChangeText={(val) => {
+            setSearch(val);
+            setCurrentPage(1);
+          }}
+        />
+      )}
+
+      {/* Loading Skeleton */}
+      {loading ? (
+        <View className="gap-3">
+          {[1, 2, 3].map((idx) => (
+            <Skeleton key={idx} className="h-20 w-full rounded-2xl" />
+          ))}
+        </View>
+      ) : paginatedData.length === 0 ? (
+        <Card className="items-center justify-center p-8">
+          <Text className="text-neutral-500 dark:text-neutral-400 text-base">{emptyText}</Text>
+        </Card>
+      ) : mode === "card" ? (
+        /* Mobile Card Mode */
+        <View className="gap-3">
+          {paginatedData.map((item, idx) => (
+            <Pressable
+              key={keyExtractor(item, idx)}
+              disabled={!onRowPress}
+              onPress={() => onRowPress?.(item)}
+              className="active:opacity-80"
+            >
+              <Card className="p-4 gap-2">
+                {columns.map((col) => {
+                  const rawVal = item[col.key as string];
+                  const renderedVal = col.render ? col.render(rawVal, item) : String(rawVal ?? "—");
+
+                  return (
+                    <View
+                      key={String(col.key)}
+                      className="flex-row items-center justify-between py-1 border-b border-neutral-200 dark:border-neutral-800 last:border-b-0"
+                    >
+                      <Text className="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">
+                        {col.title}
+                      </Text>
+                      <View className="shrink">
+                        {typeof renderedVal === "string" ? (
+                          <Text className="text-sm font-medium text-neutral-900 dark:text-neutral-100">
+                            {renderedVal}
+                          </Text>
+                        ) : (
+                          renderedVal
+                        )}
+                      </View>
+                    </View>
+                  );
+                })}
+              </Card>
+            </Pressable>
+          ))}
+        </View>
+      ) : (
+        /* Horizontal Table Mode */
+        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+          <View className="rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 overflow-hidden">
+            {/* Header */}
+            <View className="flex-row bg-neutral-100 dark:bg-neutral-800/60 border-b border-neutral-200 dark:border-neutral-800">
+              {columns.map((col) => (
+                <Pressable
+                  key={String(col.key)}
+                  disabled={!col.sortable}
+                  onPress={() => handleSort(String(col.key))}
+                  style={{ width: col.width || 120 }}
+                  className="px-4 py-3 flex-row items-center justify-between"
+                >
+                  <Text className="text-xs font-bold text-neutral-900 dark:text-neutral-100 uppercase tracking-wider">
+                    {col.title}
+                  </Text>
+                  {col.sortable && (
+                    <Text className="text-xs text-neutral-500 dark:text-neutral-400">
+                      {sortKey === col.key
+                        ? sortDirection === "asc"
+                          ? "▲"
+                          : "▼"
+                        : "⇅"}
+                    </Text>
+                  )}
+                </Pressable>
+              ))}
+            </View>
+
+            {/* Rows */}
+            {paginatedData.map((item, idx) => (
+              <Pressable
+                key={keyExtractor(item, idx)}
+                disabled={!onRowPress}
+                onPress={() => onRowPress?.(item)}
+                className="flex-row border-b border-neutral-200 dark:border-neutral-800 active:bg-neutral-100 dark:active:bg-neutral-800"
+              >
+                {columns.map((col) => {
+                  const rawVal = item[col.key as string];
+                  const renderedVal = col.render ? col.render(rawVal, item) : String(rawVal ?? "—");
+
+                  return (
+                    <View
+                      key={String(col.key)}
+                      style={{ width: col.width || 120 }}
+                      className="px-4 py-3 justify-center"
+                    >
+                      {typeof renderedVal === "string" ? (
+                        <Text className="text-sm text-neutral-900 dark:text-neutral-100">{renderedVal}</Text>
+                      ) : (
+                        renderedVal
+                      )}
+                    </View>
+                  );
+                })}
+              </Pressable>
+            ))}
+          </View>
+        </ScrollView>
+      )}
+
+      {/* Pagination Footer */}
+      {totalPages > 1 && (
+        <View className="flex-row items-center justify-between pt-2">
+          <Text className="text-xs text-neutral-500 dark:text-neutral-400">
+            Showing {(currentPage - 1) * pageSize + 1} -{" "}
+            {Math.min(currentPage * pageSize, sortedData.length)} of{" "}
+            {sortedData.length}
+          </Text>
+
+          <View className="flex-row items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              disabled={currentPage <= 1}
+              onPress={() => setCurrentPage((p) => Math.max(1, p - 1))}
+            >
+              Prev
+            </Button>
+            <Text className="text-xs font-medium text-neutral-900 dark:text-neutral-100 px-1">
+              {currentPage} / {totalPages}
+            </Text>
+            <Button
+              variant="outline"
+              size="sm"
+              disabled={currentPage >= totalPages}
+              onPress={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
+            >
+              Next
+            </Button>
+          </View>
+        </View>
+      )}
+    </View>
+  );
+}

package/src/components/data-table/index.ts

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

package/src/components/dialog/dialog.tsx

@@ -0,0 +1,278 @@
+import * as React from "react";
+import {
+  Modal,
+  View,
+  Text,
+  Pressable,
+  StyleSheet,
+  type ViewProps,
+  type TextProps,
+  type PressableProps,
+  type GestureResponderEvent,
+} from "react-native";
+import { cn } from "../../utilities/cn";
+
+export interface DialogContextValue {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export const DialogContext = React.createContext<DialogContextValue | null>(null);
+
+export function useDialogContext(): DialogContextValue {
+  const context = React.useContext(DialogContext);
+  if (!context) {
+    throw new Error("Dialog compound components must be used within a Dialog component");
+  }
+  return context;
+}
+
+export interface DialogProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children: React.ReactNode;
+}
+
+export function Dialog({
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  children,
+}: DialogProps) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
+  const isControlled = controlledOpen !== undefined;
+  const open = isControlled ? controlledOpen : uncontrolledOpen;
+
+  const handleOpenChange = React.useCallback(
+    (nextOpen: boolean) => {
+      if (!isControlled) {
+        setUncontrolledOpen(nextOpen);
+      }
+      onOpenChange?.(nextOpen);
+    },
+    [isControlled, onOpenChange]
+  );
+
+  return (
+    <DialogContext.Provider value={{ open, onOpenChange: handleOpenChange }}>
+      {children}
+    </DialogContext.Provider>
+  );
+}
+Dialog.displayName = "Dialog";
+
+export interface DialogTriggerProps extends PressableProps {
+  asChild?: boolean;
+  className?: string;
+  children: React.ReactNode;
+}
+
+export const DialogTrigger = React.forwardRef<View, DialogTriggerProps>(
+  function DialogTrigger({ asChild, children, onPress, ...props }, ref) {
+    const { open, onOpenChange } = useDialogContext();
+
+    const handlePress = (e: GestureResponderEvent) => {
+      onOpenChange(!open);
+      onPress?.(e);
+    };
+
+    if (asChild && React.isValidElement(children)) {
+      return React.cloneElement(children as React.ReactElement<any>, {
+        ref,
+        onPress: (e: GestureResponderEvent) => {
+          (children.props as any)?.onPress?.(e);
+          handlePress(e);
+        },
+      });
+    }
+
+    return (
+      <Pressable ref={ref} onPress={handlePress} role="button" {...props}>
+        {children}
+      </Pressable>
+    );
+  }
+);
+DialogTrigger.displayName = "DialogTrigger";
+
+export interface DialogPortalProps {
+  children: React.ReactNode;
+  forceMount?: boolean;
+}
+
+export function DialogPortal({ children, forceMount }: DialogPortalProps) {
+  const { open, onOpenChange } = useDialogContext();
+
+  if (!open && !forceMount) {
+    return null;
+  }
+
+  return (
+    <Modal
+      transparent
+      visible={open}
+      animationType="fade"
+      onRequestClose={() => onOpenChange(false)}
+      statusBarTranslucent
+    >
+      {children}
+    </Modal>
+  );
+}
+DialogPortal.displayName = "DialogPortal";
+
+export interface DialogOverlayProps extends ViewProps {
+  className?: string;
+  closeOnPress?: boolean;
+}
+
+export const DialogOverlay = React.forwardRef<View, DialogOverlayProps>(
+  function DialogOverlay({ className, closeOnPress = true, ...props }, ref) {
+    const { onOpenChange } = useDialogContext();
+
+    return (
+      <Pressable
+        ref={ref}
+        style={StyleSheet.absoluteFill}
+        className={cn("z-50 bg-black/60", className)}
+        onPress={() => {
+          if (closeOnPress) {
+            onOpenChange(false);
+          }
+        }}
+        {...props}
+      />
+    );
+  }
+);
+DialogOverlay.displayName = "DialogOverlay";
+
+export interface DialogContentProps extends ViewProps {
+  className?: string;
+  overlayClassName?: string;
+  children: React.ReactNode;
+}
+
+export const DialogContent = React.forwardRef<View, DialogContentProps>(
+  function DialogContent({ className, overlayClassName, children, ...props }, ref) {
+    return (
+      <DialogPortal>
+        <View
+          pointerEvents="box-none"
+          style={StyleSheet.absoluteFill}
+          className="z-50 items-center justify-center p-4"
+        >
+          <DialogOverlay className={overlayClassName} />
+          <View
+            ref={ref}
+            role="dialog"
+            aria-modal={true}
+            className={cn(
+              "z-50 w-full max-w-lg rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-6 shadow-2xl",
+              className
+            )}
+            {...props}
+          >
+            {children}
+          </View>
+        </View>
+      </DialogPortal>
+    );
+  }
+);
+DialogContent.displayName = "DialogContent";
+
+export function DialogHeader({
+  className,
+  ...props
+}: ViewProps & { className?: string }) {
+  return (
+    <View
+      className={cn("flex-col space-y-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  );
+}
+DialogHeader.displayName = "DialogHeader";
+
+export const DialogTitle = React.forwardRef<Text, TextProps & { className?: string }>(
+  function DialogTitle({ className, ...props }, ref) {
+    return (
+      <Text
+        ref={ref}
+        role="heading"
+        aria-level={2}
+        className={cn(
+          "text-xl font-bold tracking-tight text-neutral-900 dark:text-neutral-50",
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+DialogTitle.displayName = "DialogTitle";
+
+export const DialogDescription = React.forwardRef<Text, TextProps & { className?: string }>(
+  function DialogDescription({ className, ...props }, ref) {
+    return (
+      <Text
+        ref={ref}
+        className={cn(
+          "text-sm text-neutral-500 dark:text-neutral-400 mt-1",
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+DialogDescription.displayName = "DialogDescription";
+
+export function DialogFooter({
+  className,
+  ...props
+}: ViewProps & { className?: string }) {
+  return (
+    <View
+      className={cn("flex-row justify-end space-x-2 mt-6", className)}
+      {...props}
+    />
+  );
+}
+DialogFooter.displayName = "DialogFooter";
+
+export interface DialogCloseProps extends PressableProps {
+  asChild?: boolean;
+  className?: string;
+  children: React.ReactNode;
+}
+
+export const DialogClose = React.forwardRef<View, DialogCloseProps>(
+  function DialogClose({ asChild, children, onPress, ...props }, ref) {
+    const { onOpenChange } = useDialogContext();
+
+    const handlePress = (e: GestureResponderEvent) => {
+      onOpenChange(false);
+      onPress?.(e);
+    };
+
+    if (asChild && React.isValidElement(children)) {
+      return React.cloneElement(children as React.ReactElement<any>, {
+        ref,
+        onPress: (e: GestureResponderEvent) => {
+          (children.props as any)?.onPress?.(e);
+          handlePress(e);
+        },
+      });
+    }
+
+    return (
+      <Pressable ref={ref} onPress={handlePress} role="button" {...props}>
+        {children}
+      </Pressable>
+    );
+  }
+);
+DialogClose.displayName = "DialogClose";

package/src/components/dialog/index.ts

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

package/src/components/input/index.ts

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