@munchi_oy/native-ui 0.1.0

package/src/MPinPadKeys.tsx

@@ -0,0 +1,104 @@
+import { Delete } from "lucide-react-native";
+import type React from "react";
+import { Pressable, View } from "react-native";
+import { MText } from "./MText";
+import { useIconColors } from "./hooks/useIconColors";
+import { cn } from "./utils";
+
+type KeyProps = {
+  label?: string;
+  onPress: () => void;
+  testID?: string;
+  icon?: React.ReactNode;
+  disabled: boolean;
+  iconTint: string;
+  labelClassName: string;
+};
+
+const PinPadKey: React.FC<KeyProps> = ({
+  label,
+  onPress,
+  testID,
+  icon,
+  disabled,
+  iconTint,
+  labelClassName
+}) => {
+  return (
+    <Pressable
+      testID={testID}
+      onPress={onPress}
+      className="w-20 h-20 md:w-24 md:h-24 rounded-full items-center justify-center active:bg-accent"
+      disabled={disabled}
+    >
+      {label ? (
+        <MText
+          className={cn("text-3xl md:text-4xl font-light", labelClassName)}
+        >
+          {label}
+        </MText>
+      ) : (
+        (icon ?? <Delete size={26} color={iconTint} />)
+      )}
+    </Pressable>
+  );
+};
+
+export interface MPinPadKeysProps {
+  onDigit: (d: string) => void;
+  onBackspace: () => void;
+  isLoading: boolean;
+}
+
+export const MPinPadKeys: React.FC<MPinPadKeysProps> = ({
+  onDigit,
+  onBackspace,
+  isLoading
+}) => {
+  const { foreground } = useIconColors();
+
+  const keyRows = [
+    ["1", "2", "3"],
+    ["4", "5", "6"],
+    ["7", "8", "9"]
+  ];
+
+  return (
+    <View className="w-full items-center gap-0">
+      {keyRows.map((row, rowIndex) => (
+        <View key={rowIndex} className="flex-row justify-center gap-24">
+          {row.map((digit) => (
+            <PinPadKey
+              key={digit}
+              label={digit}
+              onPress={() => onDigit(digit)}
+              disabled={isLoading}
+              iconTint={foreground}
+              labelClassName="text-foreground"
+            />
+          ))}
+        </View>
+      ))}
+      <View className="flex-row justify-center gap-24">
+        <View className="w-20 h-20 md:w-24 md:h-24" />
+        <PinPadKey
+          label="0"
+          onPress={() => onDigit("0")}
+          disabled={isLoading}
+          iconTint={foreground}
+          labelClassName="text-foreground"
+        />
+        <PinPadKey
+          onPress={onBackspace}
+          testID="backspace"
+          disabled={isLoading}
+          iconTint={foreground}
+          labelClassName="text-foreground"
+          icon={<Delete size={26} color={foreground} />}
+        />
+      </View>
+    </View>
+  );
+};
+
+MPinPadKeys.displayName = "MPinPadKeys";

package/src/MPortal.tsx

@@ -0,0 +1,4 @@
+import { Portal, PortalHost } from "@rn-primitives/portal";
+
+export { Portal as MPortal };
+export { PortalHost as MPortalHost };

package/src/MProgressBar.tsx

@@ -0,0 +1,74 @@
+import { type VariantProps, cva } from "class-variance-authority";
+import type React from "react";
+import { View, type ViewProps } from "react-native";
+import { cn } from "./utils";
+
+const progressBarVariants = cva("w-full h-2 rounded-full relative", {
+  variants: {
+    size: {
+      sm: "h-1",
+      md: "h-2",
+      lg: "h-3"
+    },
+    variant: {
+      default: "bg-muted",
+      accent: "bg-accent/30",
+      destructive: "bg-destructive/30",
+      secondary: "bg-secondary",
+      gray: "bg-gray",
+      pink: "bg-pink",
+      blue: "bg-blue-200",
+      green: "bg-green-200"
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "default"
+  }
+});
+
+const progressFillVariants = cva("h-full rounded-full absolute top-0 left-0", {
+  variants: {
+    variant: {
+      default: "bg-foreground",
+      accent: "bg-accent",
+      destructive: "bg-destructive",
+      secondary: "bg-secondary-foreground",
+      gray: "bg-gray-600",
+      pink: "bg-pink",
+      blue: "bg-blue-600",
+      green: "bg-green-600"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+
+export interface MProgressBarProps
+  extends Pick<ViewProps, "className">,
+    VariantProps<typeof progressBarVariants> {
+  progress: number;
+  fillClassName?: ViewProps["className"];
+}
+
+export const MProgressBar: React.FC<MProgressBarProps> = ({
+  progress,
+  size = "md",
+  variant = "default",
+  className,
+  fillClassName
+}) => {
+  const clampedProgress = Math.min(Math.max(progress, 0), 100);
+
+  return (
+    <View className={cn(progressBarVariants({ size, variant }), className)}>
+      <View
+        style={{ width: `${clampedProgress}%` }}
+        className={cn(progressFillVariants({ variant }), fillClassName)}
+      />
+    </View>
+  );
+};
+
+MProgressBar.displayName = "MProgressBar";

package/src/MRadioGroup.tsx

@@ -0,0 +1,4 @@
+import { RadioGroup, RadioGroupItem } from "./primitives/radio-group";
+
+export { RadioGroup as MRadioGroup };
+export { RadioGroupItem as MRadioGroupItem };

package/src/MRequiredLabel.tsx

@@ -0,0 +1,21 @@
+import { View, type ViewProps } from "react-native";
+import { MText } from "./MText";
+import { cn } from "./utils";
+
+type MRequiredLabelProps = ViewProps & {
+  label: string;
+};
+
+export const MRequiredLabel = ({
+  label,
+  className,
+  ...props
+}: MRequiredLabelProps) => (
+  <View
+    className={cn("flex-row items-center gap-1 mb-3", className)}
+    {...props}
+  >
+    <MText className="font-munchi-bold text-xl">{label}</MText>
+    <MText className="font-munchi-bold text-xl text-destructive">*</MText>
+  </View>
+);

package/src/MResponsiveContainer.tsx

@@ -0,0 +1,74 @@
+import type React from "react";
+import { View, type ViewProps } from "react-native";
+import { cn } from "./utils";
+
+interface MResponsiveContainerProps extends Omit<ViewProps, "children"> {
+  children: React.ReactNode;
+  /**
+   * Responsive padding values. Keys are Tailwind breakpoints; values must be
+   * valid Tailwind spacing scale steps (0, 1, 2, 3, 4, 5, 6, 8, 10, 12, …).
+   */
+  padding?: {
+    xs?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+    "2xl"?: number;
+  };
+  /**
+   * Responsive margin values. Keys are Tailwind breakpoints; values must be
+   * valid Tailwind spacing scale steps (0, 1, 2, 3, 4, 5, 6, 8, 10, 12, …).
+   */
+  margin?: {
+    xs?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+    "2xl"?: number;
+  };
+}
+
+export const MResponsiveContainer: React.FC<MResponsiveContainerProps> = ({
+  children,
+  className,
+  style,
+  padding,
+  margin,
+  ...rest
+}) => {
+  const getResponsiveClasses = () => {
+    const classes: string[] = [];
+
+    if (padding) {
+      for (const [size, value] of Object.entries(padding)) {
+        if (value !== undefined) {
+          classes.push(`${size}:p-${value}`);
+        }
+      }
+    }
+
+    if (margin) {
+      for (const [size, value] of Object.entries(margin)) {
+        if (value !== undefined) {
+          classes.push(`${size}:m-${value}`);
+        }
+      }
+    }
+
+    return classes.join(" ");
+  };
+
+  return (
+    <View
+      className={cn(getResponsiveClasses(), className)}
+      style={style}
+      {...rest}
+    >
+      {children}
+    </View>
+  );
+};
+
+MResponsiveContainer.displayName = "MResponsiveContainer";

package/src/MSearch.tsx

@@ -0,0 +1,138 @@
+import { type VariantProps, cva } from "class-variance-authority";
+import { Search, X } from "lucide-react-native";
+import React from "react";
+import {
+  Keyboard,
+  Pressable,
+  TextInput,
+  type TextInputProps,
+  type TextProps,
+  View,
+  type ViewProps
+} from "react-native";
+import { useIconColors } from "./hooks/useIconColors";
+import { cn } from "./utils";
+
+const containerVariants = cva(
+  "flex-row items-center bg-card rounded-full border border-border",
+  {
+    variants: {
+      size: {
+        default: "",
+        sm: "",
+        lg: ""
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+
+const INPUT_SIZE: Record<string, number> = {
+  default: 18,
+  sm: 15,
+  lg: 21
+};
+
+const INPUT_HEIGHT: Record<string, number> = {
+  default: 36,
+  sm: 30,
+  lg: 52
+};
+
+const inputVariants = cva("flex-1 min-w-0 px-2 font-munchi", {
+  variants: {
+    size: {
+      default: "text-lg",
+      sm: "text-base",
+      lg: "text-xl"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+
+export interface MSearchProps
+  extends Omit<TextInputProps, "className">,
+    VariantProps<typeof containerVariants> {
+  value: string;
+  onChangeText: (text: string) => void;
+  onClear?: () => void;
+  placeholder?: string;
+  className?: ViewProps["className"];
+  containerClassName?: ViewProps["className"];
+  inputClassName?: TextProps["className"];
+  iconSize?: number;
+}
+
+export const MSearch = React.forwardRef<TextInput, MSearchProps>(
+  (
+    {
+      value,
+      onChangeText,
+      onClear,
+      placeholder = "Search...",
+      size = "default",
+      className,
+      containerClassName,
+      inputClassName,
+      iconSize = 20,
+      placeholderTextColor: placeholderTextColorProp,
+      ...textInputProps
+    },
+    ref
+  ) => {
+    const { foreground, muted } = useIconColors();
+
+    const handleClear = () => {
+      if (onClear) onClear();
+      else onChangeText("");
+      if (Keyboard.isVisible()) Keyboard.dismiss();
+    };
+
+    return (
+      <View
+        className={cn(
+          containerVariants({ size }),
+          className,
+          containerClassName
+        )}
+      >
+        <View className="pl-3 shrink-0">
+          <Search size={iconSize} color={muted} />
+        </View>
+        <TextInput
+          ref={ref}
+          placeholder={placeholder}
+          placeholderTextColor={placeholderTextColorProp ?? muted}
+          value={value}
+          onChangeText={onChangeText}
+          textAlignVertical="center"
+          style={{
+            color: foreground,
+            fontSize: INPUT_SIZE[size ?? "default"],
+            height: INPUT_HEIGHT[size ?? "default"],
+            paddingVertical: 0,
+            includeFontPadding: false
+          }}
+          className={cn(inputVariants({ size }), inputClassName)}
+          {...textInputProps}
+        />
+        <View className="pr-2 shrink-0" style={{ width: iconSize + 16 }}>
+          {value.length > 0 && (
+            <Pressable
+              onPress={handleClear}
+              className="items-center justify-center p-2"
+            >
+              <X size={iconSize} color={muted} />
+            </Pressable>
+          )}
+        </View>
+      </View>
+    );
+  }
+);
+
+MSearch.displayName = "MSearch";

package/src/MSelector.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { Pressable, Text, View } from "react-native";
+import { cn } from "./utils";
+
+export interface MSelectorProps {
+  label: string;
+  isSelected: boolean;
+  onPress: () => void;
+  description?: string | null;
+}
+
+export const MSelector = React.memo(
+  ({ label, isSelected, onPress, description }: MSelectorProps) => {
+    return (
+      <Pressable
+        className="flex flex-row justify-between items-center p-2"
+        onPress={onPress}
+      >
+        <Text
+          className={cn("font-munchi", isSelected && "font-munchi-semibold")}
+        >
+          {label}
+        </Text>
+
+        {isSelected && description && (
+          <Text className="text-muted-foreground text-sm mx-2 flex-1 text-right">
+            {description}
+          </Text>
+        )}
+
+        <View
+          className={cn(
+            "w-6 h-6 rounded-full border-2 border-primary ml-2",
+            !isSelected && "bg-card"
+          )}
+        >
+          {isSelected && (
+            <View className="absolute inset-0 m-1 rounded-full bg-primary" />
+          )}
+        </View>
+      </Pressable>
+    );
+  }
+);
+
+MSelector.displayName = "MSelector";
+
+export default MSelector;

package/src/MSkeleton.tsx

@@ -0,0 +1,3 @@
+import { Skeleton } from "./primitives/skeleton";
+
+export { Skeleton as MSkeleton };

package/src/MSwitch.tsx

@@ -0,0 +1,13 @@
+import { Switch } from "react-native";
+import type { SwitchProps } from "react-native";
+
+export type MSwitchProps = Omit<
+  SwitchProps,
+  "trackColor" | "thumbColor" | "ios_backgroundColor"
+>;
+
+export const MSwitch = (props: MSwitchProps) => {
+  return <Switch {...props} />;
+};
+
+MSwitch.displayName = "MSwitch";

package/src/MTable.tsx

@@ -0,0 +1,17 @@
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow
+} from "./primitives/table";
+
+export { Table as MTable };
+export { TableBody as MTableBody };
+export { TableCell as MTableCell };
+export { TableFooter as MTableFooter };
+export { TableHead as MTableHead };
+export { TableHeader as MTableHeader };
+export { TableRow as MTableRow };

package/src/MTabs.tsx

@@ -0,0 +1,198 @@
+import type React from "react";
+import { useEffect, useRef, useState } from "react";
+import {
+  type LayoutRectangle,
+  Pressable,
+  View,
+  type ViewProps
+} from "react-native";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring
+} from "react-native-reanimated";
+import { MText } from "./MText";
+import { NAV_THEME } from "./constants";
+import { useColorScheme } from "./hooks/useColorScheme";
+import { cn } from "./utils";
+
+export interface Tab<T> {
+  key: T;
+  label?: string;
+  icon?: React.ReactNode;
+  disabled?: boolean;
+}
+
+export interface MTabsProps<T> extends Omit<ViewProps, "children"> {
+  tabs: Tab<T>[];
+  activeTab: T | null;
+  onTabChange: (tab: T) => void;
+  tabClassName?: string;
+  activeTabClassName?: string;
+  disabled?: boolean;
+  size?: "default" | "compact";
+  variant?: "default" | "ghost";
+  stretch?: boolean;
+}
+
+const SPRING = { damping: 20, stiffness: 200, mass: 0.8 };
+
+export const MTabs = <T,>({
+  tabs,
+  activeTab,
+  onTabChange,
+  className,
+  style,
+  disabled = false,
+  size = "default",
+  variant = "default",
+  stretch = false,
+  ...viewProps
+}: MTabsProps<T>) => {
+  const { colorScheme } = useColorScheme();
+  const theme = NAV_THEME[colorScheme === "dark" ? "dark" : "light"];
+  const isCompact = size === "compact";
+  const isGhost = variant === "ghost";
+  const indicatorInset = isGhost ? 0 : isCompact ? 2 : 4;
+  const indicatorRadius = isGhost ? 20 : isCompact ? 8 : 12;
+  const pressPadH = isCompact ? 8 : 12;
+  const pressPadV = isGhost ? 7 : isCompact ? 2 : 4;
+  const pressRadius = isGhost ? 22 : isCompact ? 8 : 12;
+  const innerGap = isCompact ? 2 : 4;
+
+  const layouts = useRef<Record<string, LayoutRectangle>>({});
+  const indicatorX = useSharedValue(0);
+  const indicatorW = useSharedValue(0);
+  const initialized = useRef(false);
+
+  const [, forceUpdate] = useState(0);
+
+  useEffect(() => {
+    if (activeTab == null) {
+      initialized.current = false;
+      indicatorW.value = withSpring(0, SPRING);
+      return;
+    }
+    const keyStr = String(activeTab);
+    const rect = layouts.current[keyStr];
+    if (rect) {
+      indicatorX.value = withSpring(rect.x, SPRING);
+      indicatorW.value = withSpring(rect.width, SPRING);
+      initialized.current = true;
+      forceUpdate((n) => n + 1);
+      return;
+    }
+    initialized.current = false;
+  }, [activeTab, indicatorW, indicatorX]);
+
+  const indicatorStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: indicatorX.value }],
+    width: indicatorW.value
+  }));
+
+  const handleLayout = (key: string, rect: LayoutRectangle) => {
+    layouts.current[key] = rect;
+
+    const activeKey = String(activeTab);
+    if (key !== activeKey) return;
+
+    if (!initialized.current) {
+      indicatorX.value = rect.x;
+      indicatorW.value = rect.width;
+      initialized.current = true;
+      forceUpdate((n) => n + 1);
+      return;
+    }
+    indicatorX.value = withSpring(rect.x, SPRING);
+    indicatorW.value = withSpring(rect.width, SPRING);
+  };
+
+  const handleTabPress = (key: T) => {
+    const keyStr = String(key);
+    const rect = layouts.current[keyStr];
+    if (rect) {
+      indicatorX.value = withSpring(rect.x, SPRING);
+      indicatorW.value = withSpring(rect.width, SPRING);
+    }
+    onTabChange(key);
+  };
+
+  return (
+    <View
+      className={cn(
+        "flex-row",
+        !isGhost && "bg-accent",
+        isCompact ? "gap-0.5 rounded-xl p-0.5" : "gap-1 rounded-2xl p-1",
+        stretch ? "self-stretch" : "self-start",
+        className
+      )}
+      style={style}
+      {...viewProps}
+    >
+      <Animated.View
+        pointerEvents="none"
+        style={[
+          {
+            position: "absolute",
+            top: indicatorInset,
+            bottom: indicatorInset,
+            borderRadius: indicatorRadius,
+            backgroundColor: theme.card,
+            shadowColor: theme.text,
+            shadowOpacity: isGhost ? 0 : colorScheme === "dark" ? 0.08 : 0.14,
+            shadowRadius: isCompact ? 4 : 6,
+            shadowOffset: { width: 0, height: isCompact ? 1 : 2 },
+            elevation: isCompact ? 2 : 3
+          },
+          indicatorStyle
+        ]}
+      />
+      {tabs.map(({ key, label, icon, disabled: tabDisabled = false }) => {
+        const isDisabled = disabled || tabDisabled;
+
+        return (
+          <Pressable
+            key={String(key)}
+            onPress={() => handleTabPress(key)}
+            disabled={isDisabled}
+            onLayout={(e) => handleLayout(String(key), e.nativeEvent.layout)}
+            style={{
+              ...(stretch
+                ? { flex: 1, minWidth: 0 }
+                : { flexShrink: 1, minWidth: 0 }),
+              alignItems: "center",
+              justifyContent: "center",
+              paddingHorizontal: pressPadH,
+              paddingVertical: pressPadV,
+              borderRadius: pressRadius,
+              opacity: isDisabled ? 0.5 : 1
+            }}
+          >
+            <View
+              style={{
+                flexDirection: "row",
+                alignItems: "center",
+                gap: innerGap,
+                flexShrink: 1,
+                overflow: "hidden"
+              }}
+            >
+              {icon}
+              {label && (
+                <MText
+                  size={isGhost ? "lg" : "xl"}
+                  numberOfLines={1}
+                  style={{ flexShrink: 1 }}
+                >
+                  {label}
+                </MText>
+              )}
+            </View>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+};
+
+MTabs.displayName = "MTabs";