@beyondcorp/beyond-ui-native 0.1.1 → 0.1.3

package/src/components/button/button.tsx

@@ -0,0 +1,172 @@
+import * as React from "react";
+import {
+  ActivityIndicator,
+  Pressable,
+  Text,
+  View,
+  type PressableProps,
+  type TextProps,
+} from "react-native";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../utilities/cn";
+
+export const buttonVariants = cva(
+  "flex-row items-center justify-center rounded-xl transition-colors",
+  {
+    variants: {
+      variant: {
+        primary: "bg-primary-600 active:bg-primary-700 dark:bg-primary-600 dark:active:bg-primary-700",
+        secondary: "bg-secondary-600 active:bg-secondary-700 dark:bg-secondary-600 dark:active:bg-secondary-700",
+        danger: "bg-danger-600 active:bg-danger-700 dark:bg-danger-600 dark:active:bg-danger-700",
+        destructive: "bg-danger-600 active:bg-danger-700 dark:bg-danger-600 dark:active:bg-danger-700",
+        success: "bg-success-600 active:bg-success-700 dark:bg-success-600 dark:active:bg-success-700",
+        warning: "bg-warning-600 active:bg-warning-700 dark:bg-warning-600 dark:active:bg-warning-700",
+        outline: "border border-neutral-300 dark:border-neutral-700 bg-transparent active:bg-neutral-100 dark:active:bg-neutral-800",
+        ghost: "bg-transparent active:bg-neutral-100 dark:active:bg-neutral-800",
+        link: "bg-transparent underline",
+      },
+      size: {
+        sm: "min-h-8 px-3 py-1.5 rounded-lg",
+        md: "min-h-10 px-4 py-2 rounded-xl",
+        lg: "min-h-12 px-6 py-2.5 rounded-xl",
+        xl: "min-h-14 px-8 py-3 rounded-2xl",
+        icon: "min-h-10 min-w-10 p-0 rounded-xl",
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md",
+    },
+  }
+);
+
+export const buttonTextVariants = cva("font-semibold text-center select-none", {
+  variants: {
+    variant: {
+      primary: "text-white",
+      secondary: "text-white",
+      danger: "text-white",
+      destructive: "text-white",
+      success: "text-white",
+      warning: "text-white",
+      outline: "text-neutral-800 dark:text-neutral-100",
+      ghost: "text-neutral-800 dark:text-neutral-100",
+      link: "text-primary-600 dark:text-primary-400 underline",
+    },
+    size: {
+      sm: "text-xs",
+      md: "text-sm",
+      lg: "text-base font-semibold",
+      xl: "text-lg font-bold",
+      icon: "text-sm",
+    },
+  },
+  defaultVariants: {
+    variant: "primary",
+    size: "md",
+  },
+});
+
+type ButtonVariantProps = VariantProps<typeof buttonVariants>;
+
+export interface ButtonProps
+  extends Omit<PressableProps, "children">,
+    ButtonVariantProps {
+  children?: React.ReactNode;
+  loading?: boolean;
+  disabled?: boolean;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  className?: string;
+  textClassName?: string;
+}
+
+interface ButtonContextValue {
+  variant: ButtonVariantProps["variant"];
+  size: ButtonVariantProps["size"];
+}
+
+const ButtonContext = React.createContext<ButtonContextValue>({
+  variant: "primary",
+  size: "md",
+});
+
+export const Button = React.forwardRef<View, ButtonProps>(function Button(
+  {
+    children,
+    variant = "primary",
+    size = "md",
+    loading = false,
+    disabled = false,
+    leftIcon,
+    rightIcon,
+    className,
+    textClassName,
+    ...props
+  },
+  ref
+) {
+  const isDisabled = disabled || loading;
+  const isLightText = variant === "outline" || variant === "ghost" || variant === "link";
+  const spinnerColor = isLightText ? "#2563eb" : "#ffffff";
+
+  return (
+    <ButtonContext.Provider value={{ variant, size }}>
+      <Pressable
+        ref={ref}
+        accessibilityRole="button"
+        accessibilityState={{ disabled: !!isDisabled, busy: loading }}
+        disabled={isDisabled}
+        className={cn(
+          buttonVariants({ variant, size }),
+          isDisabled && "opacity-50",
+          className
+        )}
+        {...props}
+      >
+        {loading ? (
+          <ActivityIndicator color={spinnerColor} className="mr-2" size="small" />
+        ) : leftIcon ? (
+          <View className="mr-2">{leftIcon}</View>
+        ) : null}
+
+        {typeof children === "string" || typeof children === "number" ? (
+          <Text
+            className={cn(
+              buttonTextVariants({ variant, size }),
+              textClassName
+            )}
+          >
+            {children}
+          </Text>
+        ) : (
+          children
+        )}
+
+        {rightIcon && !loading ? (
+          <View className="ml-2">{rightIcon}</View>
+        ) : null}
+      </Pressable>
+    </ButtonContext.Provider>
+  );
+});
+
+Button.displayName = "Button";
+
+export function ButtonText({
+  children,
+  className,
+  ...props
+}: TextProps & { className?: string }) {
+  const { variant, size } = React.useContext(ButtonContext);
+  return (
+    <Text
+      className={cn(buttonTextVariants({ variant, size }), className)}
+      {...props}
+    >
+      {children}
+    </Text>
+  );
+}
+
+ButtonText.displayName = "Button.Text";

package/src/components/button/index.ts

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

package/src/components/card/card.tsx

@@ -0,0 +1,121 @@
+import * as React from "react";
+import { View, Text, type ViewProps, type TextProps } from "react-native";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../utilities/cn";
+
+export const cardVariants = cva(
+  "w-full rounded-2xl border bg-white dark:bg-neutral-900 overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "border-neutral-200 dark:border-neutral-800 shadow-sm",
+        elevated: "border-neutral-200/80 dark:border-neutral-800 shadow-md",
+        outlined: "border-2 border-primary-200 dark:border-primary-800",
+        ghost: "border-transparent bg-transparent shadow-none",
+      },
+      padding: {
+        none: "p-0",
+        sm: "p-3",
+        md: "p-4",
+        lg: "p-6",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      padding: "none",
+    },
+  }
+);
+
+export interface CardProps
+  extends ViewProps,
+    VariantProps<typeof cardVariants> {
+  className?: string;
+}
+
+export const Card = React.forwardRef<View, CardProps>(function Card(
+  { className, variant, padding, ...props },
+  ref
+) {
+  return (
+    <View
+      ref={ref}
+      className={cn(cardVariants({ variant, padding }), className)}
+      {...props}
+    />
+  );
+});
+Card.displayName = "Card";
+
+export const CardHeader = React.forwardRef<
+  View,
+  ViewProps & { className?: string }
+>(function CardHeader({ className, ...props }, ref) {
+  return (
+    <View
+      ref={ref}
+      className={cn("flex-col space-y-1.5 p-4 pb-2", className)}
+      {...props}
+    />
+  );
+});
+CardHeader.displayName = "Card.Header";
+
+export const CardTitle = React.forwardRef<
+  Text,
+  TextProps & { className?: string }
+>(function CardTitle({ className, ...props }, ref) {
+  return (
+    <Text
+      ref={ref}
+      className={cn(
+        "text-lg font-bold tracking-tight text-neutral-900 dark:text-neutral-50",
+        className
+      )}
+      {...props}
+    />
+  );
+});
+CardTitle.displayName = "Card.Title";
+
+export const CardDescription = React.forwardRef<
+  Text,
+  TextProps & { className?: string }
+>(function CardDescription({ className, ...props }, ref) {
+  return (
+    <Text
+      ref={ref}
+      className={cn("text-sm text-neutral-500 dark:text-neutral-400", className)}
+      {...props}
+    />
+  );
+});
+CardDescription.displayName = "Card.Description";
+
+export const CardContent = React.forwardRef<
+  View,
+  ViewProps & { className?: string }
+>(function CardContent({ className, ...props }, ref) {
+  return (
+    <View
+      ref={ref}
+      className={cn("p-4 pt-1", className)}
+      {...props}
+    />
+  );
+});
+CardContent.displayName = "Card.Content";
+
+export const CardFooter = React.forwardRef<
+  View,
+  ViewProps & { className?: string }
+>(function CardFooter({ className, ...props }, ref) {
+  return (
+    <View
+      ref={ref}
+      className={cn("flex-row items-center p-4 pt-0", className)}
+      {...props}
+    />
+  );
+});
+CardFooter.displayName = "Card.Footer";

package/src/components/card/index.ts

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

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,277 @@
+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);
+          }}
+          className="bg-card"
+        />
+      )}
+
+      {/* 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-muted 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-border/40 last:border-b-0"
+                    >
+                      <Text className="text-xs font-semibold text-muted uppercase tracking-wider">
+                        {col.title}
+                      </Text>
+                      <View className="shrink">
+                        {typeof renderedVal === "string" ? (
+                          <Text className="text-sm font-medium text-foreground">
+                            {renderedVal}
+                          </Text>
+                        ) : (
+                          renderedVal
+                        )}
+                      </View>
+                    </View>
+                  );
+                })}
+              </Card>
+            </Pressable>
+          ))}
+        </View>
+      ) : (
+        /* Horizontal Table Mode */
+        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+          <View className="rounded-2xl border border-border bg-card overflow-hidden">
+            {/* Header */}
+            <View className="flex-row bg-muted/10 border-b border-border">
+              {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-foreground uppercase tracking-wider">
+                    {col.title}
+                  </Text>
+                  {col.sortable && (
+                    <Text className="text-xs text-muted">
+                      {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-border/60 active:bg-muted/10"
+              >
+                {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-foreground">{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-muted">
+            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-foreground 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";