@munchi_oy/native-ui 0.1.0

package/src/MDrawerRightPanel.tsx

@@ -0,0 +1,187 @@
+import type { ReactNode } from "react";
+import { useEffect, useRef, useState } from "react";
+import {
+  Modal,
+  Platform,
+  ScrollView,
+  TouchableWithoutFeedback,
+  View,
+  useWindowDimensions
+} from "react-native";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  withTiming
+} from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { NAV_THEME } from "./constants";
+import { useColorScheme } from "./hooks/useColorScheme";
+import { cn } from "./utils";
+
+export interface MDrawerRightPanelProps {
+  isVisible: boolean;
+  onClose: () => void;
+  header?: ReactNode;
+  footer?: ReactNode;
+  children: ReactNode;
+  closable?: boolean;
+  widthFraction?: number;
+  className?: string;
+  scrollable?: boolean;
+}
+
+const OPEN_SPRING = {
+  mass: 0.4,
+  stiffness: 110,
+  damping: 16,
+  overshootClamping: false
+} as const;
+
+const CLOSE_SPRING = {
+  mass: 0.4,
+  stiffness: 140,
+  damping: 22,
+  overshootClamping: true
+} as const;
+
+const CLOSE_DURATION_MS = 340;
+
+export const MDrawerRightPanel = ({
+  isVisible,
+  onClose,
+  header,
+  footer,
+  children,
+  closable = true,
+  widthFraction = 0.45,
+  className,
+  scrollable = true
+}: MDrawerRightPanelProps) => {
+  const { colorScheme } = useColorScheme();
+  const theme = NAV_THEME[colorScheme];
+  const { width } = useWindowDimensions();
+  const insets = useSafeAreaInsets();
+  const panelWidth = width * widthFraction;
+
+  const [modalVisible, setModalVisible] = useState(false);
+  const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const isAnimatingClose = useRef(false);
+
+  const translateX = useSharedValue(panelWidth);
+  const backdropOpacity = useSharedValue(0);
+
+  const runCloseAnimation = (callback?: () => void) => {
+    if (isAnimatingClose.current) return;
+    isAnimatingClose.current = true;
+
+    translateX.value = withSpring(panelWidth, CLOSE_SPRING);
+    backdropOpacity.value = withTiming(0, { duration: CLOSE_DURATION_MS });
+
+    closeTimerRef.current = setTimeout(() => {
+      setModalVisible(false);
+      isAnimatingClose.current = false;
+      callback?.();
+    }, CLOSE_DURATION_MS);
+  };
+
+  useEffect(() => {
+    if (isVisible) {
+      if (closeTimerRef.current) {
+        clearTimeout(closeTimerRef.current);
+        closeTimerRef.current = null;
+        isAnimatingClose.current = false;
+      }
+      setModalVisible(true);
+      translateX.value = withSpring(0, OPEN_SPRING);
+      backdropOpacity.value = withTiming(1, { duration: 300 });
+    } else {
+      runCloseAnimation();
+    }
+
+    return () => {
+      if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
+    };
+  }, [isVisible]);
+
+  const handleBackdropPress = () => {
+    if (!closable) return;
+    runCloseAnimation(onClose);
+  };
+
+  const handleCloseButton = () => {
+    runCloseAnimation(onClose);
+  };
+
+  const panelStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: translateX.value }]
+  }));
+
+  const backdropStyle = useAnimatedStyle(() => ({
+    opacity: backdropOpacity.value
+  }));
+
+  return (
+    <Modal
+      transparent
+      visible={modalVisible}
+      animationType="none"
+      onRequestClose={closable ? handleCloseButton : undefined}
+    >
+      <View
+        className="flex-1 flex-row justify-end"
+        style={{ paddingTop: insets.top, paddingBottom: insets.bottom }}
+      >
+        <TouchableWithoutFeedback onPress={handleBackdropPress}>
+          <Animated.View
+            className="absolute inset-0 bg-black/60"
+            style={backdropStyle}
+          />
+        </TouchableWithoutFeedback>
+
+        <Animated.View
+          style={[panelStyle, { width: panelWidth }]}
+          className={cn(
+            "h-full overflow-hidden border rounded-2xl border-border",
+            className
+          )}
+        >
+          <View
+            className="flex-1"
+            style={{ backgroundColor: theme.background }}
+          >
+            {header && (
+              <View className="px-6 pt-6 flex-shrink-0">{header}</View>
+            )}
+
+            {scrollable ? (
+              <ScrollView
+                className="flex-1 px-6"
+                showsVerticalScrollIndicator={false}
+                contentContainerStyle={{
+                  paddingTop: 16,
+                  paddingBottom: 24
+                }}
+                keyboardShouldPersistTaps="handled"
+                automaticallyAdjustKeyboardInsets={Platform.OS === "ios"}
+                keyboardDismissMode="interactive"
+              >
+                {children}
+              </ScrollView>
+            ) : (
+              <View className="flex-1 overflow-hidden">{children}</View>
+            )}
+
+            {footer && (
+              <View className="px-6 pb-6 pt-4 border-t-2 border-border flex-shrink-0">
+                {footer}
+              </View>
+            )}
+          </View>
+        </Animated.View>
+      </View>
+    </Modal>
+  );
+};
+
+MDrawerRightPanel.displayName = "MDrawerRightPanel";

package/src/MDropdown.tsx

@@ -0,0 +1,277 @@
+import { ArrowDown } from "lucide-react-native";
+import { useMemo } from "react";
+import { type StyleProp, StyleSheet, type ViewStyle } from "react-native";
+import { Dropdown } from "react-native-element-dropdown";
+import type { DropdownProps } from "react-native-element-dropdown/lib/typescript/components/Dropdown/model";
+import { NAV_THEME } from "./constants";
+import { useColorScheme } from "./hooks/useColorScheme";
+import { useIconColors } from "./hooks/useIconColors";
+import { darkVars, lightVars } from "./theme";
+
+export type MDropdownFieldFrame =
+  | "none"
+  | "mInputSm2xl"
+  | "mInputCompact"
+  | "pill";
+
+export type MDropdownProps<T = unknown> = DropdownProps<T> & {
+  customStyles?: StyleProp<ViewStyle>;
+  fieldFrame?: MDropdownFieldFrame;
+};
+
+function mInputSm2xlFieldPreset(args: {
+  cardColor: string;
+  borderColor: string;
+  textColor: string;
+  mutedColor: string;
+}): {
+  trigger: ViewStyle;
+  containerStyle: ViewStyle;
+  itemContainerStyle: ViewStyle;
+  activeColor: string;
+} {
+  const r = 16;
+  return {
+    trigger: {
+      width: "100%",
+      paddingHorizontal: 16,
+      paddingVertical: 12,
+      borderRadius: r,
+      borderWidth: 1,
+      borderColor: args.borderColor,
+      backgroundColor: args.cardColor
+    },
+    containerStyle: {
+      marginTop: 6,
+      borderRadius: r,
+      borderWidth: 1,
+      borderColor: args.borderColor,
+      backgroundColor: args.cardColor,
+      shadowColor: args.textColor,
+      shadowOpacity: 0.06,
+      shadowRadius: 8,
+      shadowOffset: { width: 0, height: 2 },
+      elevation: 3,
+      overflow: "hidden"
+    },
+    itemContainerStyle: {
+      backgroundColor: args.cardColor,
+      padding: 0
+    },
+    activeColor: args.mutedColor
+  };
+}
+
+function mInputCompactFieldPreset(args: {
+  cardColor: string;
+  borderColor: string;
+  textColor: string;
+  mutedColor: string;
+}): {
+  trigger: ViewStyle;
+  containerStyle: ViewStyle;
+  itemContainerStyle: ViewStyle;
+  activeColor: string;
+} {
+  const r = 12;
+  return {
+    trigger: {
+      width: "100%",
+      paddingHorizontal: 12,
+      paddingVertical: 8,
+      borderRadius: r,
+      borderWidth: 1,
+      borderColor: args.borderColor,
+      backgroundColor: args.cardColor
+    },
+    containerStyle: {
+      marginTop: 4,
+      borderRadius: r,
+      borderWidth: 1,
+      borderColor: args.borderColor,
+      backgroundColor: args.cardColor,
+      shadowColor: args.textColor,
+      shadowOpacity: 0.06,
+      shadowRadius: 6,
+      shadowOffset: { width: 0, height: 1 },
+      elevation: 2,
+      overflow: "hidden"
+    },
+    itemContainerStyle: {
+      backgroundColor: args.cardColor,
+      padding: 0
+    },
+    activeColor: args.mutedColor
+  };
+}
+
+function pillFieldPreset(args: {
+  bgColor: string;
+  cardColor: string;
+  borderColor: string;
+  textColor: string;
+  mutedColor: string;
+}): {
+  trigger: ViewStyle;
+  containerStyle: ViewStyle;
+  itemContainerStyle: ViewStyle;
+  activeColor: string;
+} {
+  return {
+    trigger: {
+      paddingHorizontal: 16,
+      paddingVertical: 8,
+      borderRadius: 999,
+      borderWidth: 0,
+      backgroundColor: args.bgColor,
+      minWidth: 160
+    },
+    containerStyle: {
+      marginTop: 4,
+      borderRadius: 16,
+      borderWidth: 1,
+      borderColor: args.borderColor,
+      backgroundColor: args.cardColor,
+      shadowColor: args.textColor,
+      shadowOpacity: 0.06,
+      shadowRadius: 6,
+      shadowOffset: { width: 0, height: 1 },
+      elevation: 2,
+      overflow: "hidden"
+    },
+    itemContainerStyle: {
+      backgroundColor: args.cardColor,
+      padding: 0
+    },
+    activeColor: args.mutedColor
+  };
+}
+
+export const MDropdown = <T = unknown>({
+  data = [],
+  placeholder = "",
+  value,
+  onFocus,
+  onBlur,
+  onChange,
+  customStyles,
+  fieldFrame = "none",
+  style,
+  containerStyle,
+  itemContainerStyle,
+  selectedTextStyle,
+  placeholderStyle,
+  activeColor: activeColorProp,
+  maxHeight = 300,
+  renderRightIcon: renderRightIconProp,
+  selectedTextProps: selectedTextPropsProp,
+  mode = "auto",
+  ...rest
+}: MDropdownProps<T>) => {
+  const { colorScheme } = useColorScheme();
+  const { foreground, muted } = useIconColors();
+  const isEmpty = data.length === 0;
+  const isDark = colorScheme === "dark";
+  const theme = NAV_THEME[isDark ? "dark" : "light"];
+  const vars = isDark ? darkVars : lightVars;
+  const mutedColor = `hsl(${vars["--muted"]})`;
+
+  const framePreset = useMemo(() => {
+    const args = {
+      cardColor: theme.card,
+      borderColor: theme.border,
+      textColor: theme.text,
+      mutedColor
+    };
+    if (fieldFrame === "mInputSm2xl") return mInputSm2xlFieldPreset(args);
+    if (fieldFrame === "mInputCompact") return mInputCompactFieldPreset(args);
+    if (fieldFrame === "pill") {
+      return pillFieldPreset({
+        ...args,
+        bgColor: mutedColor
+      });
+    }
+    return null;
+  }, [fieldFrame, theme.card, theme.border, theme.text, mutedColor]);
+
+  const mergedStyle = StyleSheet.flatten([
+    framePreset?.trigger,
+    customStyles,
+    style
+  ]);
+
+  const mergedContainerStyle = StyleSheet.flatten([
+    framePreset?.containerStyle,
+    containerStyle
+  ]);
+
+  const mergedItemContainerStyle = StyleSheet.flatten([
+    framePreset?.itemContainerStyle,
+    itemContainerStyle
+  ]);
+
+  const textSize =
+    fieldFrame === "mInputSm2xl"
+      ? 18
+      : fieldFrame === "mInputCompact"
+        ? 15
+        : 14;
+
+  const mergedSelectedTextStyle = StyleSheet.flatten([
+    { fontSize: textSize, color: foreground },
+    selectedTextStyle
+  ]);
+
+  const mergedPlaceholderStyle = StyleSheet.flatten([
+    {
+      fontSize: textSize,
+      color: isEmpty ? muted : foreground
+    },
+    placeholderStyle
+  ]);
+
+  const listActiveColor = framePreset
+    ? framePreset.activeColor
+    : (activeColorProp ?? mutedColor);
+
+  const rightIconSize = fieldFrame === "mInputCompact" ? 16 : 20;
+
+  return (
+    <Dropdown
+      {...rest}
+      mode={mode}
+      data={data}
+      maxHeight={maxHeight}
+      placeholder={placeholder}
+      value={value}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      onChange={onChange}
+      style={mergedStyle}
+      containerStyle={mergedContainerStyle}
+      itemContainerStyle={mergedItemContainerStyle}
+      activeColor={listActiveColor}
+      fontFamily="DMSans_400Regular"
+      selectedTextStyle={mergedSelectedTextStyle}
+      selectedTextProps={{
+        numberOfLines: 1,
+        ellipsizeMode: "tail",
+        ...(selectedTextPropsProp ?? {})
+      }}
+      placeholderStyle={mergedPlaceholderStyle}
+      renderRightIcon={
+        renderRightIconProp ??
+        (() => (
+          <ArrowDown
+            color={isEmpty ? muted : foreground}
+            size={rightIconSize}
+          />
+        ))
+      }
+    />
+  );
+};
+
+MDropdown.displayName = "MDropdown";
+
+export default MDropdown;

package/src/MInput.tsx

@@ -0,0 +1,162 @@
+import { type VariantProps, cva } from "class-variance-authority";
+import { AlertCircle } from "lucide-react-native";
+import { type ReactNode, useRef, useState } from "react";
+import {
+  Pressable,
+  TextInput,
+  type TextInputProps,
+  View,
+  type ViewProps
+} from "react-native";
+import { MText } from "./MText";
+import { useIconColors } from "./hooks/useIconColors";
+import { cn } from "./utils";
+
+const containerVariants = cva("w-full", {
+  variants: {
+    size: {
+      default: "gap-1.5",
+      sm: "gap-1",
+      lg: "gap-2"
+    }
+  },
+  defaultVariants: { size: "default" }
+});
+
+const inputWrapperVariants = cva(
+  "flex-row items-center bg-card border border-border",
+  {
+    variants: {
+      size: {
+        default: "px-4 py-3",
+        sm: "px-3 py-2",
+        lg: "px-5 py-4"
+      },
+      radius: {
+        xl: "rounded-xl",
+        "2xl": "rounded-2xl"
+      },
+      hasError: {
+        true: "border border-destructive",
+        false: ""
+      },
+      focused: {
+        true: "border border-primary",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      { hasError: true, focused: true, class: "border border-destructive" }
+    ],
+    defaultVariants: {
+      size: "default",
+      radius: "xl",
+      hasError: false,
+      focused: false
+    }
+  }
+);
+
+const inputVariants = cva("flex-1 min-w-0 font-munchi text-foreground p-0", {
+  variants: {
+    size: {
+      default: "text-lg",
+      sm: "text-base",
+      lg: "text-xl"
+    }
+  },
+  defaultVariants: { size: "default" }
+});
+
+const INPUT_FONT_SIZE: Record<string, number> = {
+  default: 18,
+  sm: 16,
+  lg: 20
+};
+
+export interface MInputProps
+  extends Omit<TextInputProps, "className">,
+    VariantProps<typeof containerVariants> {
+  label?: string;
+  errorMessage?: string;
+  rightIcon?: ReactNode;
+  className?: ViewProps["className"];
+  inputClassName?: string;
+  radius?: VariantProps<typeof inputWrapperVariants>["radius"];
+}
+
+export const MInput = ({
+  label,
+  errorMessage,
+  rightIcon,
+  size = "default",
+  radius = "xl",
+  className,
+  inputClassName,
+  onFocus,
+  onBlur,
+  placeholderTextColor,
+  ...textInputProps
+}: MInputProps) => {
+  const { foreground, muted, destructive } = useIconColors();
+  const [isFocused, setIsFocused] = useState(false);
+  const inputRef = useRef<TextInput>(null);
+  const hasError = !!errorMessage;
+
+  return (
+    <View className={cn(containerVariants({ size }), className)}>
+      {label && (
+        <MText
+          size={size === "lg" ? "lg" : size === "sm" ? "sm" : "base"}
+          className="font-munchi-semibold text-foreground"
+        >
+          {label}
+        </MText>
+      )}
+
+      <Pressable onPress={() => inputRef.current?.focus()}>
+        <View
+          className={inputWrapperVariants({
+            size,
+            radius,
+            hasError,
+            focused: isFocused
+          })}
+        >
+          <TextInput
+            ref={inputRef}
+            placeholderTextColor={placeholderTextColor ?? muted}
+            onFocus={(e) => {
+              setIsFocused(true);
+              onFocus?.(e);
+            }}
+            onBlur={(e) => {
+              setIsFocused(false);
+              onBlur?.(e);
+            }}
+            style={{
+              color: foreground,
+              fontSize: INPUT_FONT_SIZE[size ?? "default"],
+              paddingVertical: 0,
+              includeFontPadding: false
+            }}
+            className={cn(inputVariants({ size }), inputClassName)}
+            {...textInputProps}
+          />
+          {rightIcon && <View className="ml-2 shrink-0">{rightIcon}</View>}
+        </View>
+      </Pressable>
+
+      {hasError && (
+        <View className="flex-row items-center gap-1.5">
+          <AlertCircle size={14} color={destructive} />
+          <MText size="sm" className="text-destructive flex-1">
+            {errorMessage}
+          </MText>
+        </View>
+      )}
+    </View>
+  );
+};
+
+MInput.displayName = "MInput";

package/src/MLabel.tsx

@@ -0,0 +1,3 @@
+import { Label } from "./primitives/label";
+
+export { Label as MLabel };

package/src/MLucideIcon.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import * as LucideIcons from "lucide-react-native";
+import type { LucideProps } from "lucide-react-native";
+
+export type IconName = keyof typeof LucideIcons;
+
+export interface MLucideIconProps extends LucideProps {
+  name: IconName;
+}
+
+export const MLucideIcon = ({ name, ...props }: MLucideIconProps) => {
+  const Icon = LucideIcons[name] as React.ComponentType<LucideProps> | undefined;
+
+  if (!Icon) {
+    return null;
+  }
+
+  return <Icon {...props} />;
+};
+
+MLucideIcon.displayName = "MLucideIcon";