@munchi_oy/native-ui 0.1.0

package/src/MBadge.tsx

@@ -0,0 +1,72 @@
+import { type VariantProps, cva } from "class-variance-authority";
+import type React from "react";
+import { Text, type TextProps, View, type ViewProps } from "react-native";
+import { cn } from "./utils";
+
+const badgeVariants = cva("p-1 px-2 rounded-md border-0", {
+  variants: {
+    variant: {
+      default: "bg-secondary",
+      accent: "bg-accent",
+      muted: "bg-muted text-muted-foreground",
+      destructive: "bg-destructive",
+      primary: "bg-primary text-primary-foreground mx-1",
+      gray: "bg-muted text-muted-foreground",
+      custom: ""
+    }
+  },
+  defaultVariants: {
+    variant: "gray"
+  }
+});
+
+const badgeTextVariants = cva("text-xs font-munchi", {
+  variants: {
+    variant: {
+      default: "text-secondary-foreground",
+      accent: "text-accent-foreground",
+      muted: "text-muted-foreground",
+      destructive: "text-destructive-foreground",
+      primary: "text-primary-foreground",
+      gray: "text-muted-foreground",
+      custom: "text-foreground"
+    }
+  },
+  defaultVariants: {
+    variant: "gray"
+  }
+});
+
+export interface MBadgeProps
+  extends Pick<ViewProps, "className">,
+    VariantProps<typeof badgeVariants> {
+  text: string;
+  show?: boolean;
+  customBackgroundColor?: string;
+  textClassName?: TextProps["className"];
+}
+
+export const MBadge: React.FC<MBadgeProps> = ({
+  variant = "gray",
+  text,
+  show = true,
+  customBackgroundColor,
+  className,
+  textClassName
+}) => {
+  if (!show) return null;
+  const isCustom = variant === "custom";
+
+  return (
+    <View
+      className={cn(badgeVariants({ variant }), className)}
+      style={isCustom ? { backgroundColor: customBackgroundColor } : undefined}
+    >
+      <Text className={cn(badgeTextVariants({ variant }), textClassName)}>
+        {text}
+      </Text>
+    </View>
+  );
+};
+
+MBadge.displayName = "MBadge";

package/src/MButton.tsx

@@ -0,0 +1,90 @@
+import { type VariantProps, cva } from "class-variance-authority";
+import React from "react";
+import { Pressable, type PressableProps, type View } from "react-native";
+import { cn } from "./utils";
+
+export const buttonVariants = cva(
+  "flex-row justify-center items-center rounded-full",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary",
+        primary: "bg-primary",
+        white: "bg-card border border-border",
+        destructive: "bg-destructive",
+        outline: "bg-transparent border border-border",
+        secondary: "bg-secondary",
+        ghost: "bg-transparent",
+        link: "bg-transparent",
+        none: "none",
+        custom: ""
+      },
+      size: {
+        none: "",
+        default: "h-auto px-4 md:py-2",
+        sm: "h-8 px-3 py-1.5",
+        lg: "h-10 px-6 py-2.5",
+        icon: "h-9 w-9 p-2 justify-center items-center"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+
+export interface MButtonProps
+  extends Omit<PressableProps, "children">,
+    VariantProps<typeof buttonVariants> {
+  onPress?: () => void;
+  disabled?: boolean;
+  children: React.ReactNode;
+}
+
+const MButton = React.forwardRef<View, MButtonProps>((props, ref) => {
+  const {
+    onPress,
+    variant = "default",
+    size = "default",
+    disabled = false,
+    children,
+    className,
+    ...rest
+  } = props;
+
+  if (variant === "custom") {
+    return (
+      <Pressable
+        ref={ref}
+        disabled={disabled}
+        className={cn(disabled && "opacity-50", className)}
+        onPress={onPress}
+        android_ripple={null}
+        {...rest}
+      >
+        {children}
+      </Pressable>
+    );
+  }
+
+  return (
+    <Pressable
+      ref={ref}
+      disabled={disabled}
+      className={cn(
+        buttonVariants({ variant, size }),
+        disabled && "opacity-50",
+        className
+      )}
+      onPress={onPress}
+      {...rest}
+    >
+      {children}
+    </Pressable>
+  );
+});
+
+MButton.displayName = "MButton";
+
+export { MButton };

package/src/MCard.tsx

@@ -0,0 +1,15 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+} from "./primitives/card";
+
+export { Card as MCard };
+export { CardContent as MCardContent };
+export { CardDescription as MCardDescription };
+export { CardFooter as MCardFooter };
+export { CardHeader as MCardHeader };
+export { CardTitle as MCardTitle };

package/src/MChevron.tsx

@@ -0,0 +1,47 @@
+import { useEffect, useRef } from "react";
+import { Animated } from "react-native";
+import Svg, { Path } from "react-native-svg";
+import { NAV_THEME } from "./constants";
+import { useColorScheme } from "./hooks/useColorScheme";
+
+export interface MChevronProps {
+  isOpen: boolean;
+  size?: number;
+  /** Override the chevron color. Defaults to the theme foreground color. */
+  color?: string;
+}
+
+export const MChevron = ({ isOpen, size = 11, color }: MChevronProps) => {
+  const { colorScheme } = useColorScheme();
+  const fillColor = color ?? NAV_THEME[colorScheme].text;
+
+  const rotateAnim = useRef(new Animated.Value(isOpen ? 90 : 0)).current;
+
+  useEffect(() => {
+    Animated.timing(rotateAnim, {
+      toValue: isOpen ? 90 : 0,
+      duration: 200,
+      useNativeDriver: true
+    }).start();
+  }, [isOpen, rotateAnim]);
+
+  const rotate = rotateAnim.interpolate({
+    inputRange: [0, 90],
+    outputRange: ["0deg", "90deg"]
+  });
+
+  return (
+    <Animated.View style={{ transform: [{ rotate }] }}>
+      <Svg width={size} height={size} viewBox="0 0 11 11" fill="none">
+        <Path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M3.80026 1.96823C3.97925 1.78924 4.26945 1.78924 4.44844 1.96823L7.65677 5.17656C7.83575 5.35554 7.83575 5.64576 7.65677 5.82474L4.44844 9.03307C4.26945 9.21205 3.97925 9.21205 3.80026 9.03307C3.62127 8.85409 3.62127 8.56388 3.80026 8.3849L6.68451 5.50065L3.80026 2.61641C3.62127 2.43742 3.62127 2.14722 3.80026 1.96823Z"
+          fill={fillColor}
+        />
+      </Svg>
+    </Animated.View>
+  );
+};
+
+MChevron.displayName = "MChevron";

package/src/MConfirmation.tsx

@@ -0,0 +1,68 @@
+import type React from "react";
+import { ActivityIndicator, Pressable, Text, View } from "react-native";
+import { useIconColors } from "./hooks/useIconColors";
+import { cn } from "./utils";
+
+export interface MConfirmationProps {
+  message: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+  confirmText?: string;
+  cancelText?: string;
+  isLoading?: boolean;
+}
+
+export const MConfirmation: React.FC<MConfirmationProps> = ({
+  message,
+  onConfirm,
+  onCancel,
+  confirmText = "Confirm",
+  cancelText = "Cancel",
+  isLoading = false
+}) => {
+  const { onPrimary } = useIconColors();
+
+  return (
+    <View className="p-4">
+      <Text className="font-munchi text-center mb-10 mt-4 text-foreground">
+        {message}
+      </Text>
+
+      <View className="flex-row justify-between">
+        <Pressable
+          className={cn(
+            "flex-1 mr-2 border border-border rounded-md py-3 bg-card",
+            isLoading && "opacity-50"
+          )}
+          onPress={onCancel}
+          disabled={isLoading}
+        >
+          <Text className="font-munchi text-center text-card-foreground">
+            {cancelText}
+          </Text>
+        </Pressable>
+
+        <Pressable
+          className={cn(
+            "flex-1 ml-2 bg-primary rounded-md py-3",
+            isLoading && "opacity-50"
+          )}
+          onPress={onConfirm}
+          disabled={isLoading}
+        >
+          {isLoading ? (
+            <ActivityIndicator color={onPrimary} />
+          ) : (
+            <Text className="font-munchi text-center text-primary-foreground">
+              {confirmText}
+            </Text>
+          )}
+        </Pressable>
+      </View>
+    </View>
+  );
+};
+
+MConfirmation.displayName = "MConfirmation";
+
+export default MConfirmation;

package/src/MCountDown.tsx

@@ -0,0 +1,120 @@
+import type React from "react";
+import { useMemo } from "react";
+import Countdown, {
+  type CountdownProps,
+  type CountdownRenderProps
+} from "react-countdown";
+import { Text, type TextProps, View, type ViewProps } from "react-native";
+import { cn, padNumber } from "./utils";
+
+export interface MCountDownProps
+  extends Omit<CountdownProps, "renderer" | "className">,
+    Pick<ViewProps, "className"> {
+  warningThreshold?: number;
+  textClassName?: TextProps["className"];
+  showPrefix?: boolean;
+  countUp?: boolean;
+  renderer?: (props: CountdownRenderProps) => React.ReactNode;
+}
+
+export const MCountDown: React.FC<MCountDownProps> = ({
+  warningThreshold = 3,
+  className = "",
+  textClassName = "",
+  showPrefix = true,
+  countUp = false,
+  renderer: customRenderer,
+  onComplete,
+  date,
+  ...countdownProps
+}) => {
+  const defaultRenderer = useMemo(
+    () =>
+      ({
+        minutes,
+        seconds,
+        completed
+      }: CountdownRenderProps): React.ReactNode => {
+        let displayMinutes: number;
+        let displaySeconds: number;
+        let timePrefix = "";
+
+        if (completed) {
+          if (countUp) {
+            const targetDate = new Date(date as number | string | Date);
+            const now = new Date();
+            const timeDiffMs: number = now.getTime() - targetDate.getTime();
+
+            displayMinutes = Math.floor(timeDiffMs / (1000 * 60));
+            displaySeconds = Math.floor((timeDiffMs % (1000 * 60)) / 1000);
+
+            if (showPrefix) {
+              timePrefix = "-";
+            }
+          } else {
+            displayMinutes = 0;
+            displaySeconds = 0;
+          }
+        } else {
+          displayMinutes = minutes;
+          displaySeconds = seconds;
+        }
+
+        const formattedMinutes: string =
+          !completed || countUp ? padNumber(Math.abs(displayMinutes), 2) : "00";
+
+        const formattedSeconds: string =
+          !completed || countUp ? padNumber(Math.abs(displaySeconds), 2) : "00";
+
+        const isUnderThreshold: boolean =
+          !completed && minutes < warningThreshold;
+        const isExpired: boolean = completed;
+
+        const bgColorClass: string =
+          isUnderThreshold || isExpired
+            ? "bg-destructive/15"
+            : "bg-green-500/15";
+
+        const textColorClass: string =
+          isUnderThreshold || isExpired ? "text-destructive" : "text-green-600";
+
+        return (
+          <View
+            className={cn(
+              "rounded-md flex items-center justify-center",
+              bgColorClass,
+              className
+            )}
+          >
+            <Text
+              className={cn(
+                "font-munchi-semibold text-center",
+                textColorClass,
+                textClassName
+              )}
+            >
+              {timePrefix}
+              {formattedMinutes}:{formattedSeconds}
+            </Text>
+          </View>
+        );
+      },
+    [warningThreshold, countUp, date, showPrefix, className, textClassName]
+  );
+
+  const renderer = customRenderer ?? defaultRenderer;
+
+  return (
+    <Countdown
+      renderer={renderer}
+      onComplete={onComplete}
+      overtime={countUp}
+      date={date}
+      {...countdownProps}
+    />
+  );
+};
+
+MCountDown.displayName = "MCountDown";
+
+export default MCountDown;

package/src/MDateTimePicker.tsx

@@ -0,0 +1,124 @@
+import type React from "react";
+import { Text } from "react-native";
+import DateTimePicker, {
+  useDefaultClassNames,
+  type CalendarComponents
+} from "react-native-ui-datepicker";
+import { cn } from "./utils";
+
+export type CalendarProps = React.ComponentProps<typeof DateTimePicker>;
+
+export const MDateTimePicker = ({
+  className,
+  classNames,
+  showOutsideDays = true,
+  containerHeight = 220,
+  components,
+  minDate,
+  maxDate,
+  ...props
+}: React.ComponentProps<typeof DateTimePicker>) => {
+  const defaultClassNames = useDefaultClassNames();
+
+  const defaultMinDate =
+    minDate ||
+    (() => {
+      const date = new Date();
+      date.setFullYear(date.getFullYear() - 1);
+      return date;
+    })();
+
+  const defaultMaxDate =
+    maxDate ||
+    (() => {
+      const date = new Date();
+      date.setDate(date.getDate());
+      return date;
+    })();
+
+  const defaultComponents: Partial<CalendarComponents> = {
+    IconPrev: (
+      <Text className="font-munchi text-lg text-foreground">{"<"}</Text>
+    ),
+    IconNext: <Text className="font-munchi text-lg text-foreground">{">"}</Text>
+  };
+
+  return (
+    <DateTimePicker
+      showOutsideDays={showOutsideDays}
+      className={cn("bg-card w-full rounded-xl", className)}
+      containerHeight={containerHeight}
+      minDate={defaultMinDate}
+      maxDate={defaultMaxDate}
+      classNames={{
+        ...defaultClassNames,
+        day_cell: "p-0.5",
+        day: cn(
+          defaultClassNames.day,
+          "font-munchi rounded-xl text-foreground w-10 h-10"
+        ),
+        day_label: "font-munchi text-base text-foreground",
+        outside_label: "font-munchi text-base text-foreground opacity-40",
+        today_label: "text-destructive font-munchi-bold text-base",
+        month_selector_label: cn(
+          defaultClassNames.month_selector_label,
+          "text-base font-munchi-semibold text-foreground"
+        ),
+        year_selector_label: cn(
+          defaultClassNames.year_selector_label,
+          "text-base font-munchi-semibold text-foreground"
+        ),
+        time_selector_label: cn(
+          defaultClassNames.time_selector_label,
+          "text-base font-munchi text-foreground"
+        ),
+        header: "font-munchi-semibold text-lg text-foreground pb-2",
+        weekday_label: "font-munchi-semibold text-sm text-muted-foreground",
+        selected: cn(
+          defaultClassNames.selected,
+          "font-munchi bg-primary rounded-xl"
+        ),
+        selected_label:
+          "font-munchi-semibold text-primary-foreground text-base",
+        range_end: cn(
+          defaultClassNames.range_end,
+          "font-munchi bg-primary rounded-r-xl"
+        ),
+        range_start: cn(
+          defaultClassNames.range_start,
+          "font-munchi bg-primary rounded-l-xl"
+        ),
+        range_end_label: cn(
+          defaultClassNames.range_end_label,
+          "font-munchi-semibold text-primary-foreground text-base"
+        ),
+        range_start_label: cn(
+          defaultClassNames.range_start_label,
+          "font-munchi-semibold text-primary-foreground text-base"
+        ),
+        range_fill: "bg-primary/20 my-1",
+        range_fill_weekstart: "rounded-s-lg",
+        range_fill_weekend: "rounded-e-lg",
+        range_middle_label: "font-munchi text-base text-foreground",
+        month: cn(
+          defaultClassNames.month,
+          "font-munchi rounded-xl text-foreground"
+        ),
+        month_label: "font-munchi text-base text-foreground",
+        year: cn(
+          defaultClassNames.year,
+          "font-munchi rounded-xl text-foreground"
+        ),
+        year_label: "font-munchi text-base text-foreground",
+        time_label: "font-munchi text-2xl text-foreground",
+        ...classNames
+      }}
+      components={{ ...defaultComponents, ...components }}
+      {...props}
+    />
+  );
+};
+
+MDateTimePicker.displayName = "MDateTimePicker";
+
+export default MDateTimePicker;

package/src/MDivider.tsx

@@ -0,0 +1,69 @@
+import { type VariantProps, cva } from "class-variance-authority";
+import { View, type ViewProps } from "react-native";
+import { cn } from "./utils";
+
+const dividerVariants = cva("", {
+  variants: {
+    direction: {
+      horizontal: "my-2",
+      vertical: "mx-2"
+    },
+    variant: {
+      sm: "",
+      md: "",
+      lg: ""
+    }
+  },
+  defaultVariants: {
+    direction: "horizontal",
+    variant: "md"
+  }
+});
+
+const thicknessMap = {
+  sm: 1,
+  md: 2,
+  lg: 4
+} as const;
+
+export interface MDividerProps
+  extends Pick<ViewProps, "className" | "style">,
+    VariantProps<typeof dividerVariants> {
+  /** When set, overrides theme border color (e.g. legacy `#D3D3D3`). */
+  color?: string;
+}
+
+export const MDivider = ({
+  className,
+  direction = "horizontal",
+  variant = "md",
+  color,
+  style
+}: MDividerProps) => {
+  const isHorizontal = direction === "horizontal";
+  const thickness = thicknessMap[variant ?? "md"];
+
+  const dynamicStyles = color
+    ? {
+        backgroundColor: color,
+        [isHorizontal ? "height" : "width"]: thickness,
+        [isHorizontal ? "width" : "height"]: "100%"
+      }
+    : {
+        [isHorizontal ? "height" : "width"]: thickness,
+        [isHorizontal ? "width" : "height"]: "100%"
+      };
+
+  return (
+    <View
+      className={cn(
+        !color && "bg-border",
+        dividerVariants({ direction, variant }),
+        className
+      )}
+      style={[dynamicStyles, style]}
+    />
+  );
+};
+
+MDivider.displayName = "MDivider";