@munchi_oy/native-ui 0.1.0

package/src/MText.tsx

@@ -0,0 +1,51 @@
+import { type VariantProps, cva } from "class-variance-authority";
+import React from "react";
+import { Text, type TextProps } from "react-native";
+import { cn } from "./utils";
+
+const mTextVariants = cva("text-base text-foreground", {
+  variants: {
+    variant: {
+      default: "font-munchi"
+    },
+    size: {
+      xs: "text-xs",
+      sm: "text-sm",
+      base: "text-base",
+      lg: "text-lg",
+      xl: "text-xl",
+      "2xl": "text-2xl",
+      "3xl": "text-3xl",
+      "4xl": "text-4xl"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "base"
+  }
+});
+
+export interface MTextProps
+  extends Omit<TextProps, "allowFontScaling">,
+    VariantProps<typeof mTextVariants> {
+  children: React.ReactNode;
+}
+
+const MText = React.forwardRef<Text, MTextProps>(
+  ({ className, variant, size, children, ...props }, ref) => {
+    return (
+      <Text
+        ref={ref}
+        className={cn(mTextVariants({ variant, size }), className)}
+        {...props}
+        allowFontScaling={false}
+      >
+        {children}
+      </Text>
+    );
+  }
+);
+
+MText.displayName = "MText";
+
+export { MText };

package/src/MTimerUp.tsx

@@ -0,0 +1,88 @@
+import dayjs from "dayjs";
+import type React from "react";
+import { useEffect, useMemo, useState } from "react";
+import { Text, type TextProps, View, type ViewProps } from "react-native";
+import { cn } from "./utils";
+
+export interface MTimerUpProps extends Pick<ViewProps, "className"> {
+  date: string | number | Date;
+  textClassName?: TextProps["className"];
+}
+
+const formatElapsedTime = (
+  now: dayjs.Dayjs,
+  targetDate: dayjs.Dayjs
+): string => {
+  const totalMinutes = now.diff(targetDate, "minute");
+
+  if (totalMinutes < 1) {
+    return "0m";
+  }
+
+  const days = Math.floor(totalMinutes / 1440);
+  const remainingMinutes = totalMinutes % 1440;
+  const hours = Math.floor(remainingMinutes / 60);
+  const minutes = remainingMinutes % 60;
+
+  let result = "";
+  if (days > 0) result += `${days}d `;
+  if (hours > 0 || days > 0) result += `${hours}h `;
+  result += `${minutes}m`;
+
+  return result.trim();
+};
+
+export const MTimerUp: React.FC<MTimerUpProps> = ({
+  date,
+  className = "",
+  textClassName = ""
+}) => {
+  const targetDate = useMemo(() => dayjs(date), [date]);
+  const [now, setNow] = useState(() => dayjs());
+
+  useEffect(() => {
+    const nextTick = () => {
+      const currentTime = dayjs();
+      const nextMinute = currentTime.add(1, "minute").startOf("minute");
+      const delay = nextMinute.diff(currentTime);
+
+      return setTimeout(
+        () => {
+          setNow(dayjs());
+        },
+        delay > 0 ? delay : 60000
+      );
+    };
+
+    const timerId = nextTick();
+    return () => clearTimeout(timerId);
+  }, [now]);
+
+  const formattedDuration = useMemo(
+    () => formatElapsedTime(now, targetDate),
+    [now, targetDate]
+  );
+
+  return (
+    <View
+      className={cn(
+        "rounded-md flex items-center justify-center bg-muted border border-border/60",
+        "dark:border-white/20 dark:bg-white/12",
+        className
+      )}
+    >
+      <Text
+        className={cn(
+          "font-munchi-semibold text-foreground dark:text-neutral-200",
+          textClassName
+        )}
+      >
+        {formattedDuration}
+      </Text>
+    </View>
+  );
+};
+
+MTimerUp.displayName = "MTimerUp";
+
+export default MTimerUp;

package/src/MToggle.tsx

@@ -0,0 +1,51 @@
+import { Pressable, Text, View } from "react-native";
+import { cn } from "./utils";
+
+export interface MToggleOption<T> {
+  key: T;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface MToggleProps<T> {
+  options: MToggleOption<T>[];
+  selectedKey: T;
+  onSelect: (key: T) => void;
+}
+
+export const MToggle = <T,>({
+  options,
+  selectedKey,
+  onSelect
+}: MToggleProps<T>) => {
+  return (
+    <View className="flex flex-row gap-4 w-full items-center justify-between">
+      {options.map((option) => (
+        <Pressable
+          key={String(option.key)}
+          className={cn(
+            "flex-1 rounded-lg py-4",
+            selectedKey === option.key ? "bg-primary" : "bg-muted"
+          )}
+          onPress={() => onSelect(option.key)}
+          disabled={option.disabled}
+        >
+          <Text
+            className={cn(
+              "text-center font-munchi",
+              selectedKey === option.key
+                ? "text-primary-foreground"
+                : "text-muted-foreground"
+            )}
+          >
+            {option.label}
+          </Text>
+        </Pressable>
+      ))}
+    </View>
+  );
+};
+
+MToggle.displayName = "MToggle";
+
+export default MToggle;

package/src/constants.ts

@@ -0,0 +1,19 @@
+import { darkVars, lightVars } from "./theme";
+
+type CssVars = Record<string, string>;
+
+const hsl = (vars: CssVars, key: string) => `hsl(${vars[key]})`;
+
+const makeNavTheme = (vars: CssVars) => ({
+  background: hsl(vars, "--background"),
+  border: hsl(vars, "--border"),
+  card: hsl(vars, "--card"),
+  notification: hsl(vars, "--destructive"),
+  primary: hsl(vars, "--primary"),
+  text: hsl(vars, "--foreground")
+});
+
+export const NAV_THEME = {
+  light: makeNavTheme(lightVars),
+  dark: makeNavTheme(darkVars)
+} as const;

package/src/hooks/useColorScheme.tsx

@@ -0,0 +1,12 @@
+import { useColorScheme as useNativewindColorScheme } from "nativewind";
+
+export function useColorScheme() {
+  const { colorScheme, setColorScheme, toggleColorScheme } =
+    useNativewindColorScheme();
+  return {
+    colorScheme: colorScheme ?? "light",
+    isDarkColorScheme: colorScheme === "dark",
+    setColorScheme,
+    toggleColorScheme
+  };
+}

package/src/hooks/useIconColors.ts

@@ -0,0 +1,19 @@
+import { NAV_THEME } from "../constants";
+import { useColorScheme } from "./useColorScheme";
+
+/** Icon `color` values aligned with `NAV_THEME` + semantic muted text (matches `global.css` muted-foreground). */
+export function useIconColors() {
+  const { colorScheme } = useColorScheme();
+  const scheme = colorScheme === "dark" ? "dark" : "light";
+  const t = NAV_THEME[scheme];
+  return {
+    foreground: t.text,
+    muted: scheme === "dark" ? "hsl(240 5% 64.9%)" : "hsl(240 3.8% 46.1%)",
+    primary: t.primary,
+    destructive: t.notification,
+    /** For icons/spinners on `bg-destructive` (matches `--destructive-foreground`). */
+    onDestructive: "hsl(0 0% 100%)",
+    /** For icons/spinners on `bg-primary` (matches `--primary-foreground`). */
+    onPrimary: scheme === "dark" ? "hsl(240 5.9% 10%)" : "hsl(0 0% 98%)"
+  };
+}

package/src/index.ts

@@ -0,0 +1,124 @@
+export { cn } from "./utils";
+export { useColorScheme } from "./hooks/useColorScheme";
+export { useIconColors } from "./hooks/useIconColors";
+export { NAV_THEME } from "./constants";
+export { typography } from "./tokens";
+export { lightVars, darkVars } from "./theme";
+export type { TypographyToken } from "./tokens";
+
+export { MAlert } from "./MAlert";
+export type { MAlertProps } from "./MAlert";
+
+export { MAnimation } from "./MAnimation";
+export type { MAnimationProps } from "./MAnimation";
+
+export { MAvatar } from "./MAvatar";
+export type { MAvatarProps } from "./MAvatar";
+
+export { MBadge } from "./MBadge";
+export type { MBadgeProps } from "./MBadge";
+
+export { MButton, buttonVariants } from "./MButton";
+export type { MButtonProps } from "./MButton";
+
+export { MChevron } from "./MChevron";
+export type { MChevronProps } from "./MChevron";
+
+export { MDateTimePicker } from "./MDateTimePicker";
+export type { CalendarProps } from "./MDateTimePicker";
+
+export { MDivider } from "./MDivider";
+export type { MDividerProps } from "./MDivider";
+
+export { MLucideIcon } from "./MLucideIcon";
+export type { MLucideIconProps, IconName } from "./MLucideIcon";
+
+export { MPicker } from "./MPicker";
+export type { MPickerProps, PickerItem } from "./MPicker";
+
+export { MProgressBar } from "./MProgressBar";
+export type { MProgressBarProps } from "./MProgressBar";
+
+export { MResponsiveContainer } from "./MResponsiveContainer";
+
+export { MText } from "./MText";
+export type { MTextProps } from "./MText";
+
+export { MRequiredLabel } from "./MRequiredLabel";
+
+export {
+  MModal,
+  ModalHeight,
+  ModalScrollContext,
+  ModalContent
+} from "./MModal";
+export type { MModalProps } from "./MModal";
+
+export { MDrawerRightPanel } from "./MDrawerRightPanel";
+export type { MDrawerRightPanelProps } from "./MDrawerRightPanel";
+
+export { MNativeAlert } from "./MNativeAlert";
+export type { MNativeAlertProps } from "./MNativeAlert";
+
+export { MCountDown } from "./MCountDown";
+export type { MCountDownProps } from "./MCountDown";
+
+export { MDropdown } from "./MDropdown";
+export type { MDropdownProps } from "./MDropdown";
+
+export { MSearch } from "./MSearch";
+export type { MSearchProps } from "./MSearch";
+
+export { MSelector } from "./MSelector";
+export type { MSelectorProps } from "./MSelector";
+
+export { MToggle } from "./MToggle";
+export type { MToggleProps, MToggleOption } from "./MToggle";
+
+export { MConfirmation } from "./MConfirmation";
+export type { MConfirmationProps } from "./MConfirmation";
+
+export { MPinPadKeys } from "./MPinPadKeys";
+export type { MPinPadKeysProps } from "./MPinPadKeys";
+
+export { MNumpad, NumpadMode, getDecimalSeparator } from "./MNumpad";
+export type { MNumpadProps } from "./MNumpad";
+
+export { MTabs } from "./MTabs";
+export type { MTabsProps, Tab } from "./MTabs";
+
+export { MTimerUp } from "./MTimerUp";
+export type { MTimerUpProps } from "./MTimerUp";
+
+export {
+  MCard,
+  MCardContent,
+  MCardDescription,
+  MCardFooter,
+  MCardHeader,
+  MCardTitle
+} from "./MCard";
+
+export { MSkeleton } from "./MSkeleton";
+
+export { MSwitch } from "./MSwitch";
+export type { MSwitchProps } from "./MSwitch";
+
+export {
+  MTable,
+  MTableBody,
+  MTableCell,
+  MTableFooter,
+  MTableHead,
+  MTableHeader,
+  MTableRow
+} from "./MTable";
+
+export { MPortal, MPortalHost } from "./MPortal";
+
+export { MInput } from "./MInput";
+export type { MInputProps } from "./MInput";
+
+export { MLabel } from "./MLabel";
+
+export { MRadioGroup, MRadioGroupItem } from "./MRadioGroup";

package/src/primitives/accordion.tsx

@@ -0,0 +1,143 @@
+import * as AccordionPrimitive from "@rn-primitives/accordion";
+import { ChevronDown } from "lucide-react-native";
+import * as React from "react";
+import { Platform, Pressable, View, type ViewProps } from "react-native";
+import Animated, {
+  Extrapolation,
+  FadeIn,
+  FadeOutUp,
+  LayoutAnimationConfig,
+  LinearTransition,
+  interpolate,
+  useAnimatedStyle,
+  useDerivedValue,
+  withTiming
+} from "react-native-reanimated";
+import { cn } from "../utils";
+import { TextClassContext } from "./text";
+
+const Accordion = React.forwardRef<
+  AccordionPrimitive.RootRef,
+  AccordionPrimitive.RootProps
+>(({ children, ...props }, ref) => {
+  return (
+    <LayoutAnimationConfig skipEntering>
+      <AccordionPrimitive.Root
+        ref={ref}
+        {...props}
+        asChild={Platform.OS !== "web"}
+      >
+        <Animated.View layout={LinearTransition.duration(200)}>
+          {children}
+        </Animated.View>
+      </AccordionPrimitive.Root>
+    </LayoutAnimationConfig>
+  );
+});
+
+Accordion.displayName = AccordionPrimitive.Root.displayName;
+
+const AccordionItem = React.forwardRef<
+  AccordionPrimitive.ItemRef,
+  AccordionPrimitive.ItemProps
+>(({ className, value, ...props }, ref) => {
+  return (
+    <Animated.View
+      className={"overflow-hidden"}
+      layout={LinearTransition.duration(200)}
+    >
+      <AccordionPrimitive.Item
+        ref={ref}
+        className={cn("border-b border-border", className)}
+        value={value}
+        {...props}
+      />
+    </Animated.View>
+  );
+});
+AccordionItem.displayName = AccordionPrimitive.Item.displayName;
+
+const Trigger = Platform.OS === "web" ? View : Pressable;
+
+const AccordionTrigger = React.forwardRef<
+  AccordionPrimitive.TriggerRef,
+  AccordionPrimitive.TriggerProps
+>(({ className, children, ...props }, ref) => {
+  const { isExpanded } = AccordionPrimitive.useItemContext();
+
+  const progress = useDerivedValue(() =>
+    isExpanded
+      ? withTiming(1, { duration: 250 })
+      : withTiming(0, { duration: 200 })
+  );
+  const chevronStyle = useAnimatedStyle(() => ({
+    transform: [{ rotate: `${progress.value * 180}deg` }],
+    opacity: interpolate(progress.value, [0, 1], [1, 0.8], Extrapolation.CLAMP)
+  }));
+
+  return (
+    <TextClassContext.Provider value="native:text-lg font-medium web:group-hover:underline">
+      <AccordionPrimitive.Header className="flex">
+        <AccordionPrimitive.Trigger ref={ref} {...props} asChild>
+          <Trigger
+            className={cn(
+              "flex flex-row web:flex-1 items-center justify-between py-4 web:transition-all group web:focus-visible:outline-none web:focus-visible:ring-1 web:focus-visible:ring-muted-foreground",
+              className
+            )}
+          >
+            <>{children}</>
+            <Animated.View style={chevronStyle}>
+              <ChevronDown size={18} className={"text-foreground shrink-0"} />
+            </Animated.View>
+          </Trigger>
+        </AccordionPrimitive.Trigger>
+      </AccordionPrimitive.Header>
+    </TextClassContext.Provider>
+  );
+});
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  AccordionPrimitive.ContentRef,
+  AccordionPrimitive.ContentProps
+>(({ className, children, ...props }, ref) => {
+  const { isExpanded } = AccordionPrimitive.useItemContext();
+  return (
+    <TextClassContext.Provider value="native:text-lg">
+      <AccordionPrimitive.Content
+        className={cn(
+          "overflow-hidden text-sm web:transition-all",
+          isExpanded ? "web:animate-accordion-down" : "web:animate-accordion-up"
+        )}
+        ref={ref}
+        {...props}
+      >
+        <InnerContent className={cn("pb-4", className)}>
+          {children}
+        </InnerContent>
+      </AccordionPrimitive.Content>
+    </TextClassContext.Provider>
+  );
+});
+
+function InnerContent({
+  children,
+  className
+}: React.PropsWithChildren<Pick<ViewProps, "className">>) {
+  if (Platform.OS === "web") {
+    return <View className={cn("pb-4", className)}>{children}</View>;
+  }
+  return (
+    <Animated.View
+      entering={FadeIn}
+      exiting={FadeOutUp.duration(200)}
+      className={cn("pb-4", className)}
+    >
+      {children}
+    </Animated.View>
+  );
+}
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/src/primitives/alert-dialog.tsx

@@ -0,0 +1,181 @@
+import * as AlertDialogPrimitive from "@rn-primitives/alert-dialog";
+import * as React from "react";
+import { Platform, StyleSheet, View, type ViewProps } from "react-native";
+import Animated, { FadeIn, FadeOut } from "react-native-reanimated";
+import { cn } from "../utils";
+import { buttonTextVariants, buttonVariants } from "./button";
+import { TextClassContext } from "./text";
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlayWeb = React.forwardRef<
+  AlertDialogPrimitive.OverlayRef,
+  AlertDialogPrimitive.OverlayProps
+>(({ className, ...props }, ref) => {
+  const { open } = AlertDialogPrimitive.useRootContext();
+  return (
+    <AlertDialogPrimitive.Overlay
+      className={cn(
+        "z-50 bg-black/80 flex justify-center items-center p-2 absolute top-0 right-0 bottom-0 left-0",
+        open
+          ? "web:animate-in web:fade-in-0"
+          : "web:animate-out web:fade-out-0",
+        className
+      )}
+      {...props}
+      ref={ref}
+    />
+  );
+});
+
+AlertDialogOverlayWeb.displayName = "AlertDialogOverlayWeb";
+
+const AlertDialogOverlayNative = React.forwardRef<
+  AlertDialogPrimitive.OverlayRef,
+  AlertDialogPrimitive.OverlayProps
+>(({ className, children, ...props }, ref) => {
+  return (
+    <AlertDialogPrimitive.Overlay
+      style={StyleSheet.absoluteFill}
+      className={cn(
+        "z-50 bg-black/80 flex justify-center items-center p-2",
+        className
+      )}
+      {...props}
+      ref={ref}
+      asChild
+    >
+      <Animated.View
+        entering={FadeIn.duration(150)}
+        exiting={FadeOut.duration(150)}
+      >
+        {children}
+      </Animated.View>
+    </AlertDialogPrimitive.Overlay>
+  );
+});
+
+AlertDialogOverlayNative.displayName = "AlertDialogOverlayNative";
+
+const AlertDialogOverlay = Platform.select({
+  web: AlertDialogOverlayWeb,
+  default: AlertDialogOverlayNative
+});
+
+const AlertDialogContent = React.forwardRef<
+  AlertDialogPrimitive.ContentRef,
+  AlertDialogPrimitive.ContentProps & { portalHost?: string }
+>(({ className, portalHost, ...props }, ref) => {
+  const { open } = AlertDialogPrimitive.useRootContext();
+
+  return (
+    <AlertDialogPortal hostName={portalHost}>
+      <AlertDialogOverlay>
+        <AlertDialogPrimitive.Content
+          ref={ref}
+          className={cn(
+            "z-50 max-w-lg gap-4 border border-border bg-background p-6 shadow-lg shadow-foreground/10 web:duration-200 rounded-lg",
+            open
+              ? "web:animate-in web:fade-in-0 web:zoom-in-95"
+              : "web:animate-out web:fade-out-0 web:zoom-out-95",
+            className
+          )}
+          {...props}
+        />
+      </AlertDialogOverlay>
+    </AlertDialogPortal>
+  );
+});
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({ className, ...props }: ViewProps) => (
+  <View className={cn("flex flex-col gap-2", className)} {...props} />
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
+
+const AlertDialogFooter = ({ className, ...props }: ViewProps) => (
+  <View
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end gap-2",
+      className
+    )}
+    {...props}
+  />
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
+
+const AlertDialogTitle = React.forwardRef<
+  AlertDialogPrimitive.TitleRef,
+  AlertDialogPrimitive.TitleProps
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg native:text-xl text-foreground font-semibold",
+      className
+    )}
+    {...props}
+  />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = React.forwardRef<
+  AlertDialogPrimitive.DescriptionRef,
+  AlertDialogPrimitive.DescriptionProps
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm native:text-base text-muted-foreground", className)}
+    {...props}
+  />
+));
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = React.forwardRef<
+  AlertDialogPrimitive.ActionRef,
+  AlertDialogPrimitive.ActionProps
+>(({ className, ...props }, ref) => (
+  <TextClassContext.Provider value={buttonTextVariants({ className })}>
+    <AlertDialogPrimitive.Action
+      ref={ref}
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
+  </TextClassContext.Provider>
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+  AlertDialogPrimitive.CancelRef,
+  AlertDialogPrimitive.CancelProps
+>(({ className, ...props }, ref) => (
+  <TextClassContext.Provider
+    value={buttonTextVariants({ className, variant: "outline" })}
+  >
+    <AlertDialogPrimitive.Cancel
+      ref={ref}
+      className={cn(buttonVariants({ variant: "outline", className }))}
+      {...props}
+    />
+  </TextClassContext.Provider>
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger
+};