@beyondcorp/beyond-ui-native 0.1.2 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beyondcorp/beyond-ui-native",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Accessible, NativeWind-first React Native component library for Beyond Softwares",
   "author": "Beyond Corp",
   "license": "MIT",
@@ -28,12 +28,15 @@
   ],
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
+  "react-native": "./src/index.ts",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "react-native": "./src/index.ts",
+      "import": "./src/index.ts",
+      "require": "./dist/index.js",
+      "default": "./src/index.ts"
     },
     "./preset": {
       "types": "./dist/preset.d.ts",
@@ -42,12 +45,15 @@
     },
     "./utilities": {
       "types": "./dist/utilities.d.ts",
-      "import": "./dist/utilities.mjs",
-      "require": "./dist/utilities.js"
+      "react-native": "./src/utilities/index.ts",
+      "import": "./src/utilities/index.ts",
+      "require": "./dist/utilities.js",
+      "default": "./src/utilities/index.ts"
     }
   },
   "files": [
     "dist",
+    "src",
     "README.md",
     "LICENSE"
   ],

package/src/components/accordion/accordion.tsx

@@ -0,0 +1,245 @@
+import * as React from "react";
+import {
+  View,
+  Pressable,
+  Animated,
+  type ViewProps,
+  type PressableProps,
+} from "react-native";
+import { cn } from "../../utilities/cn";
+import { Text } from "../text/text";
+
+type AccordionType = "single" | "multiple";
+
+interface AccordionContextValue {
+  type: AccordionType;
+  value: string[];
+  toggleItem: (itemValue: string) => void;
+  collapsible: boolean;
+}
+
+const AccordionContext = React.createContext<AccordionContextValue | null>(null);
+
+function useAccordionContext() {
+  const context = React.useContext(AccordionContext);
+  if (!context) {
+    throw new Error("Accordion components must be used within an Accordion");
+  }
+  return context;
+}
+
+export interface AccordionProps extends ViewProps {
+  type?: AccordionType;
+  value?: string | string[];
+  defaultValue?: string | string[];
+  onValueChange?: (value: string | string[]) => void;
+  collapsible?: boolean;
+  className?: string;
+  children: React.ReactNode;
+}
+
+export const Accordion = React.forwardRef<View, AccordionProps>(
+  (
+    {
+      type = "single",
+      value: controlledValue,
+      defaultValue,
+      onValueChange,
+      collapsible = true,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const toArray = (v?: string | string[]): string[] => {
+      if (!v) return [];
+      return Array.isArray(v) ? v : [v];
+    };
+
+    const [uncontrolledValue, setUncontrolledValue] = React.useState<string[]>(
+      toArray(defaultValue)
+    );
+
+    const isControlled = controlledValue !== undefined;
+    const currentValues = isControlled ? toArray(controlledValue) : uncontrolledValue;
+
+    const toggleItem = React.useCallback(
+      (itemValue: string) => {
+        let nextValues: string[];
+        const isCurrentOpen = currentValues.includes(itemValue);
+
+        if (type === "single") {
+          if (isCurrentOpen) {
+            nextValues = collapsible ? [] : [itemValue];
+          } else {
+            nextValues = [itemValue];
+          }
+        } else {
+          if (isCurrentOpen) {
+            nextValues = currentValues.filter((v) => v !== itemValue);
+          } else {
+            nextValues = [...currentValues, itemValue];
+          }
+        }
+
+        if (!isControlled) {
+          setUncontrolledValue(nextValues);
+        }
+
+        if (onValueChange) {
+          onValueChange(type === "single" ? nextValues[0] ?? "" : nextValues);
+        }
+      },
+      [currentValues, type, collapsible, isControlled, onValueChange]
+    );
+
+    return (
+      <AccordionContext.Provider
+        value={{
+          type,
+          value: currentValues,
+          toggleItem,
+          collapsible,
+        }}
+      >
+        <View
+          ref={ref}
+          className={cn("w-full divide-y divide-border", className)}
+          {...props}
+        >
+          {children}
+        </View>
+      </AccordionContext.Provider>
+    );
+  }
+);
+Accordion.displayName = "Accordion";
+
+// --- Accordion Item ---
+
+interface AccordionItemContextValue {
+  value: string;
+  isOpen: boolean;
+}
+
+const AccordionItemContext = React.createContext<AccordionItemContextValue | null>(null);
+
+function useAccordionItemContext() {
+  const context = React.useContext(AccordionItemContext);
+  if (!context) {
+    throw new Error("AccordionItem subcomponents must be used within an AccordionItem");
+  }
+  return context;
+}
+
+export interface AccordionItemProps extends ViewProps {
+  value: string;
+  className?: string;
+  children: React.ReactNode;
+}
+
+export const AccordionItem = React.forwardRef<View, AccordionItemProps>(
+  ({ value, className, children, ...props }, ref) => {
+    const { value: selectedValues } = useAccordionContext();
+    const isOpen = selectedValues.includes(value);
+
+    return (
+      <AccordionItemContext.Provider value={{ value, isOpen }}>
+        <View
+          ref={ref}
+          className={cn("border-b border-border py-1", className)}
+          {...props}
+        >
+          {children}
+        </View>
+      </AccordionItemContext.Provider>
+    );
+  }
+);
+AccordionItem.displayName = "AccordionItem";
+
+// --- Accordion Trigger ---
+
+export interface AccordionTriggerProps extends PressableProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+export const AccordionTrigger = React.forwardRef<View, AccordionTriggerProps>(
+  ({ className, children, ...props }, ref) => {
+    const { toggleItem } = useAccordionContext();
+    const { value, isOpen } = useAccordionItemContext();
+
+    const rotationAnim = React.useRef(new Animated.Value(isOpen ? 1 : 0)).current;
+
+    React.useEffect(() => {
+      Animated.timing(rotationAnim, {
+        toValue: isOpen ? 1 : 0,
+        duration: 200,
+        useNativeDriver: true,
+      }).start();
+    }, [isOpen, rotationAnim]);
+
+    const rotate = rotationAnim.interpolate({
+      inputRange: [0, 1],
+      outputRange: ["0deg", "180deg"],
+    });
+
+    return (
+      <Pressable
+        ref={ref}
+        onPress={() => toggleItem(value)}
+        accessibilityRole="button"
+        accessibilityState={{ expanded: isOpen }}
+        className={cn(
+          "flex-row items-center justify-between py-3 px-1 active:opacity-70",
+          className
+        )}
+        {...props}
+      >
+        <View className="flex-1 pr-2">
+          {typeof children === "string" ? (
+            <Text className="text-base font-medium text-foreground">{children}</Text>
+          ) : (
+            children
+          )}
+        </View>
+        <Animated.View style={{ transform: [{ rotate }] }}>
+          <Text className="text-muted text-base font-semibold">▼</Text>
+        </Animated.View>
+      </Pressable>
+    );
+  }
+);
+AccordionTrigger.displayName = "AccordionTrigger";
+
+// --- Accordion Content ---
+
+export interface AccordionContentProps extends ViewProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+export const AccordionContent = React.forwardRef<View, AccordionContentProps>(
+  ({ className, children, ...props }, ref) => {
+    const { isOpen } = useAccordionItemContext();
+
+    if (!isOpen) return null;
+
+    return (
+      <View
+        ref={ref}
+        className={cn("pt-1 pb-3 px-1 text-sm text-muted", className)}
+        {...props}
+      >
+        {typeof children === "string" ? (
+          <Text className="text-sm text-muted leading-relaxed">{children}</Text>
+        ) : (
+          children
+        )}
+      </View>
+    );
+  }
+);
+AccordionContent.displayName = "AccordionContent";

package/src/components/accordion/index.ts

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

package/src/components/alert/alert.tsx

@@ -0,0 +1,118 @@
+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 alertVariants = cva(
+  "w-full rounded-2xl border p-4 flex-col gap-1",
+  {
+    variants: {
+      variant: {
+        info: "bg-primary-50 border-primary-200 dark:bg-primary-950/40 dark:border-primary-800",
+        success: "bg-success-50 border-success-200 dark:bg-success-950/40 dark:border-success-800",
+        warning: "bg-warning-50 border-warning-200 dark:bg-warning-950/40 dark:border-warning-800",
+        danger: "bg-danger-50 border-danger-200 dark:bg-danger-950/40 dark:border-danger-800",
+      },
+    },
+    defaultVariants: {
+      variant: "info",
+    },
+  }
+);
+
+export const alertTitleVariants = cva("text-base font-bold tracking-tight", {
+  variants: {
+    variant: {
+      info: "text-primary-800 dark:text-primary-300",
+      success: "text-success-800 dark:text-success-300",
+      warning: "text-warning-800 dark:text-warning-300",
+      danger: "text-danger-800 dark:text-danger-300",
+    },
+  },
+  defaultVariants: {
+    variant: "info",
+  },
+});
+
+export const alertDescriptionVariants = cva("text-sm", {
+  variants: {
+    variant: {
+      info: "text-primary-700 dark:text-primary-400",
+      success: "text-success-700 dark:text-success-400",
+      warning: "text-warning-700 dark:text-warning-400",
+      danger: "text-danger-700 dark:text-danger-400",
+    },
+  },
+  defaultVariants: {
+    variant: "info",
+  },
+});
+
+type AlertVariantProps = VariantProps<typeof alertVariants>;
+
+interface AlertContextValue {
+  variant: AlertVariantProps["variant"];
+}
+
+const AlertContext = React.createContext<AlertContextValue>({ variant: "info" });
+
+export interface AlertProps extends ViewProps, AlertVariantProps {
+  className?: string;
+}
+
+export function Alert({
+  variant = "info",
+  className,
+  children,
+  ...props
+}: AlertProps) {
+  return (
+    <AlertContext.Provider value={{ variant }}>
+      <View
+        accessibilityRole="alert"
+        className={cn(alertVariants({ variant }), className)}
+        {...props}
+      >
+        {children}
+      </View>
+    </AlertContext.Provider>
+  );
+}
+
+Alert.displayName = "Alert";
+
+export function AlertTitle({
+  className,
+  children,
+  ...props
+}: TextProps & { className?: string }) {
+  const { variant } = React.useContext(AlertContext);
+  return (
+    <Text
+      className={cn(alertTitleVariants({ variant }), className)}
+      {...props}
+    >
+      {children}
+    </Text>
+  );
+}
+
+AlertTitle.displayName = "Alert.Title";
+
+export function AlertDescription({
+  className,
+  children,
+  ...props
+}: TextProps & { className?: string }) {
+  const { variant } = React.useContext(AlertContext);
+  return (
+    <Text
+      className={cn(alertDescriptionVariants({ variant }), className)}
+      {...props}
+    >
+      {children}
+    </Text>
+  );
+}
+
+AlertDescription.displayName = "Alert.Description";

package/src/components/alert/index.ts

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

package/src/components/avatar/avatar.tsx

@@ -0,0 +1,125 @@
+import * as React from "react";
+import { View, Text, Image as NativeImage, type ImageProps, type ViewProps } from "react-native";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../utilities/cn";
+
+export const avatarVariants = cva(
+  "relative flex shrink-0 overflow-hidden rounded-full items-center justify-center bg-neutral-200 dark:bg-neutral-800",
+  {
+    variants: {
+      size: {
+        sm: "h-8 w-8",
+        md: "h-10 w-10",
+        lg: "h-14 w-14",
+        xl: "h-20 w-20",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  }
+);
+
+export const avatarTextVariants = cva("font-semibold text-neutral-700 dark:text-neutral-300", {
+  variants: {
+    size: {
+      sm: "text-xs",
+      md: "text-sm",
+      lg: "text-lg",
+      xl: "text-2xl",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+
+interface AvatarContextValue {
+  size: "sm" | "md" | "lg" | "xl";
+}
+
+const AvatarContext = React.createContext<AvatarContextValue>({ size: "md" });
+
+export interface AvatarProps
+  extends ViewProps,
+    VariantProps<typeof avatarVariants> {
+  className?: string;
+}
+
+export function Avatar({
+  className,
+  size = "md",
+  children,
+  ...props
+}: AvatarProps) {
+  const currentSize = size ?? "md";
+  return (
+    <AvatarContext.Provider value={{ size: currentSize }}>
+      <View
+        className={cn(avatarVariants({ size: currentSize }), className)}
+        {...props}
+      >
+        {children}
+      </View>
+    </AvatarContext.Provider>
+  );
+}
+Avatar.displayName = "Avatar";
+
+export interface AvatarImageProps extends ImageProps {
+  className?: string;
+}
+
+export function AvatarImage({ className, ...props }: AvatarImageProps) {
+  const [hasError, setHasError] = React.useState(false);
+
+  if (hasError) return null;
+
+  return (
+    <NativeImage
+      onError={() => setHasError(true)}
+      className={cn("h-full w-full rounded-full object-cover", className)}
+      {...props}
+    />
+  );
+}
+AvatarImage.displayName = "Avatar.Image";
+
+export interface AvatarFallbackProps extends ViewProps {
+  children?: React.ReactNode;
+  text?: string;
+  className?: string;
+  textClassName?: string;
+}
+
+export function AvatarFallback({
+  children,
+  text,
+  className,
+  textClassName,
+  ...props
+}: AvatarFallbackProps) {
+  const { size } = React.useContext(AvatarContext);
+  const content = text ?? children;
+
+  return (
+    <View
+      className={cn(
+        "h-full w-full items-center justify-center rounded-full bg-neutral-200 dark:bg-neutral-800",
+        className
+      )}
+      {...props}
+    >
+      {typeof content === "string" ? (
+        <Text
+          className={cn(avatarTextVariants({ size }), textClassName)}
+        >
+          {content}
+        </Text>
+      ) : (
+        content
+      )}
+    </View>
+  );
+}
+AvatarFallback.displayName = "Avatar.Fallback";

package/src/components/avatar/index.ts

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

package/src/components/badge/badge.tsx

@@ -0,0 +1,89 @@
+import * as React from "react";
+import { View, Text, type ViewProps } from "react-native";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../utilities/cn";
+
+export const badgeVariants = cva(
+  "inline-flex flex-row items-center justify-center rounded-full self-start",
+  {
+    variants: {
+      variant: {
+        primary: "bg-primary-600 dark:bg-primary-500",
+        secondary: "bg-secondary-600 dark:bg-secondary-500",
+        danger: "bg-danger-600 dark:bg-danger-500",
+        destructive: "bg-danger-600 dark:bg-danger-500",
+        success: "bg-success-600 dark:bg-success-500",
+        warning: "bg-warning-600 dark:bg-warning-500",
+        outline: "border border-neutral-300 dark:border-neutral-700 bg-transparent",
+      },
+      size: {
+        sm: "px-2 py-0.5",
+        md: "px-2.5 py-1",
+        lg: "px-3.5 py-1.5",
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md",
+    },
+  }
+);
+
+export const badgeTextVariants = cva("font-semibold text-center", {
+  variants: {
+    variant: {
+      primary: "text-white",
+      secondary: "text-white",
+      danger: "text-white",
+      destructive: "text-white",
+      success: "text-white",
+      warning: "text-white",
+      outline: "text-neutral-700 dark:text-neutral-300",
+    },
+    size: {
+      sm: "text-[10px]",
+      md: "text-xs",
+      lg: "text-sm",
+    },
+  },
+  defaultVariants: {
+    variant: "primary",
+    size: "md",
+  },
+});
+
+export interface BadgeProps
+  extends ViewProps,
+    VariantProps<typeof badgeVariants> {
+  children?: React.ReactNode;
+  className?: string;
+  textClassName?: string;
+}
+
+export function Badge({
+  children,
+  variant = "primary",
+  size = "md",
+  className,
+  textClassName,
+  ...props
+}: BadgeProps) {
+  return (
+    <View
+      className={cn(badgeVariants({ variant, size }), className)}
+      {...props}
+    >
+      {typeof children === "string" || typeof children === "number" ? (
+        <Text
+          className={cn(badgeTextVariants({ variant, size }), textClassName)}
+        >
+          {children}
+        </Text>
+      ) : (
+        children
+      )}
+    </View>
+  );
+}
+
+Badge.displayName = "Badge";

package/src/components/badge/index.ts

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