custom-mobile-ui 1.0.1

package/dist/hooks.mjs

@@ -0,0 +1,739 @@
+import { useFonts as useFonts$1 } from 'expo-font';
+import React, { createContext, useContext, useState, useCallback } from 'react';
+import { StyleSheet, Platform, Modal, View, TouchableOpacity, ActivityIndicator, Text as Text$1 } from 'react-native';
+import { X, AlertCircle, Info, CheckCircle } from 'lucide-react-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+
+// assets/fonts/Fonts-Light.ttf
+var require_Fonts_Light = __commonJS({
+  "assets/fonts/Fonts-Light.ttf"(exports$1, module) {
+    module.exports = "./Fonts-Light-RMQAEPUP.ttf";
+  }
+});
+
+// assets/fonts/Fonts-Regular.ttf
+var require_Fonts_Regular = __commonJS({
+  "assets/fonts/Fonts-Regular.ttf"(exports$1, module) {
+    module.exports = "./Fonts-Regular-JNHL4IDV.ttf";
+  }
+});
+
+// assets/fonts/Fonts-Medium.ttf
+var require_Fonts_Medium = __commonJS({
+  "assets/fonts/Fonts-Medium.ttf"(exports$1, module) {
+    module.exports = "./Fonts-Medium-UUWQX4EV.ttf";
+  }
+});
+
+// assets/fonts/Fonts-Bold.ttf
+var require_Fonts_Bold = __commonJS({
+  "assets/fonts/Fonts-Bold.ttf"(exports$1, module) {
+    module.exports = "./Fonts-Bold-QAA2AGZS.ttf";
+  }
+});
+
+// assets/fonts/Fonts-ExtraBold.ttf
+var require_Fonts_ExtraBold = __commonJS({
+  "assets/fonts/Fonts-ExtraBold.ttf"(exports$1, module) {
+    module.exports = "./Fonts-ExtraBold-OVZKTNJI.ttf";
+  }
+});
+
+// assets/fonts/Fonts-Black.ttf
+var require_Fonts_Black = __commonJS({
+  "assets/fonts/Fonts-Black.ttf"(exports$1, module) {
+    module.exports = "./Fonts-Black-U4YX6GHD.ttf";
+  }
+});
+var useFonts = () => {
+  const [fontsLoaded] = useFonts$1({
+    // Prompts family
+    "Fonts-Light": require_Fonts_Light(),
+    "Fonts-Regular": require_Fonts_Regular(),
+    "Fonts-Medium": require_Fonts_Medium(),
+    "Fonts-Bold": require_Fonts_Bold(),
+    "Fonts-ExtraBold": require_Fonts_ExtraBold(),
+    "Fonts-Black": require_Fonts_Black(),
+    // Weight aliases (VERY IMPORTANT for fontWeight mapping)
+    Fonts_300: require_Fonts_Light(),
+    Fonts_400: require_Fonts_Regular(),
+    Fonts_500: require_Fonts_Medium(),
+    Fonts_700: require_Fonts_Bold(),
+    Fonts_800: require_Fonts_ExtraBold(),
+    Fonts_900: require_Fonts_Black()
+  });
+  return fontsLoaded;
+};
+var Fonts = {
+  light: "Fonts-Light",
+  regular: "Fonts-Regular",
+  medium: "Fonts-Medium",
+  bold: "Fonts-Bold",
+  extraBold: "Fonts-ExtraBold",
+  black: "Fonts-Black"
+};
+
+// src/theme/colors.ts
+var Colors = {
+  primary: {
+    50: "#EFF6FF",
+    400: "#60A5FA",
+    500: "#3B82F6",
+    600: "#2563EB",
+    900: "#1E3A8A"
+  },
+  primaryColor: "#2563EB",
+  gray: {
+    50: "#F9FAFB",
+    100: "#F3F4F6",
+    200: "#E5E7EB",
+    300: "#D1D5DB",
+    400: "#9CA3AF",
+    500: "#6B7280",
+    600: "#4B5563",
+    700: "#374151",
+    800: "#1F2937",
+    900: "#111827"
+  },
+  white: "#ffffff",
+  green: { 500: "#22C55E" },
+  orange: { 500: "#F97316" },
+  red: { 50: "#FEE2E2", 500: "#EF4444" }};
+var colors_default = Colors;
+
+// src/theme/theme.ts
+var BaseTheme = {
+  primary: {
+    default: colors_default.primary[600],
+    hover: colors_default.primary[500]
+  },
+  background: {
+    screen: colors_default.gray[50],
+    surface: "#FFFFFF",
+    selected: colors_default.primary[50],
+    secondary: colors_default.gray[100],
+    design: colors_default.primary[50]
+  },
+  input: {
+    background: colors_default.gray[50]
+  },
+  text: {
+    primary: colors_default.gray[900],
+    secondary: colors_default.gray[600],
+    muted: colors_default.gray[400],
+    inverse: "#FFFFFF"
+  },
+  border: {
+    default: colors_default.gray[300],
+    focused: colors_default.primary[600],
+    success: colors_default.green[500],
+    warning: colors_default.orange[500],
+    error: colors_default.red[500]
+  },
+  status: {
+    success: colors_default.green[500],
+    warning: colors_default.orange[500],
+    error: colors_default.red[500],
+    validating: colors_default.primary[600]
+  },
+  icon: {
+    default: colors_default.gray[500],
+    active: colors_default.primary[600],
+    disabled: colors_default.gray[400]
+  },
+  tabContent: {
+    active: colors_default.primary[600],
+    inactive: colors_default.gray[400]
+  },
+  skeleton: {
+    background: colors_default.gray[200],
+    componentBg: colors_default.gray[300],
+    highlight: "#ffffff99"
+  },
+  primaryContent: {
+    color: colors_default.primaryColor
+  }
+};
+var LightTheme = {
+  ...BaseTheme
+};
+var DarkTheme = {
+  ...BaseTheme,
+  primary: {
+    default: colors_default.primary[500],
+    hover: colors_default.primary[400]
+  },
+  background: {
+    ...BaseTheme.background,
+    screen: colors_default.gray[900],
+    surface: colors_default.gray[800],
+    selected: colors_default.primary[900],
+    secondary: colors_default.gray[900],
+    design: colors_default.primaryColor + 10
+  },
+  input: {
+    background: colors_default.gray[700]
+  },
+  text: {
+    ...BaseTheme.text,
+    primary: "#FFFFFF",
+    secondary: colors_default.gray[200],
+    muted: colors_default.gray[500],
+    inverse: colors_default.gray[900]
+  },
+  border: {
+    ...BaseTheme.border,
+    default: colors_default.gray[700]
+  },
+  icon: {
+    ...BaseTheme.icon,
+    default: colors_default.gray[400],
+    disabled: colors_default.gray[600]
+  },
+  tabContent: {
+    active: colors_default.white,
+    inactive: colors_default.gray[500]
+  },
+  skeleton: {
+    background: colors_default.gray[700],
+    componentBg: colors_default.gray[800],
+    highlight: "#ffffff14"
+  },
+  primaryContent: {
+    color: colors_default.primary[400]
+  }
+};
+
+// src/theme/index.ts
+var getTheme = (mode) => mode === "dark" ? DarkTheme : LightTheme;
+
+// src/context/ThemeContext.tsx
+var ThemeContext = createContext({
+  mode: "system",
+  setMode: () => {
+  },
+  theme: getTheme("light"),
+  resolvedMode: "light"
+});
+
+// src/hooks/useTheme.ts
+var useTheme = () => {
+  const { theme } = useContext(ThemeContext);
+  return theme;
+};
+var FontFamily = (style) => {
+  const weight = style?.fontWeight ?? "400";
+  let fontFamily = "Fonts-Regular";
+  let numericWeight = "400";
+  switch (weight) {
+    case "100":
+    case "200":
+      fontFamily = "Fonts-Light";
+      numericWeight = "300";
+      break;
+    case "300":
+    case "light":
+      fontFamily = "Fonts-Light";
+      numericWeight = "300";
+      break;
+    case "400":
+    case "normal":
+    case "regular":
+      fontFamily = "Fonts-Regular";
+      numericWeight = "400";
+      break;
+    case "500":
+    case "medium":
+      fontFamily = "Fonts-Medium";
+      numericWeight = "500";
+      break;
+    case "600":
+    case "semibold":
+      fontFamily = "Fonts-Bold";
+      numericWeight = "600";
+      break;
+    case "700":
+    case "bold":
+      fontFamily = "Fonts-Bold";
+      numericWeight = "700";
+      break;
+    case "800":
+    case "heavy":
+      fontFamily = "Fonts-ExtraBold";
+      numericWeight = "800";
+      break;
+    case "900":
+    case "black":
+      fontFamily = "Fonts-Black";
+      numericWeight = "900";
+      break;
+  }
+  return {
+    fontFamily,
+    fontWeight: Platform.OS === "android" ? "normal" : numericWeight
+  };
+};
+var VARIANT_STYLES = {
+  display: {
+    fontSize: 34,
+    ...FontFamily({ fontWeight: "700" }),
+    lineHeight: 42,
+    letterSpacing: -0.5
+  },
+  heading: {
+    fontSize: 24,
+    ...FontFamily({ fontWeight: "700" }),
+    lineHeight: 32,
+    letterSpacing: -0.25
+  },
+  title: {
+    fontSize: 20,
+    ...FontFamily({ fontWeight: "600" }),
+    lineHeight: 28,
+    letterSpacing: 0
+  },
+  subtitle: {
+    fontSize: 16,
+    ...FontFamily({ fontWeight: "600" }),
+    lineHeight: 24,
+    letterSpacing: 0.1
+  },
+  body: {
+    fontSize: 14,
+    ...FontFamily({ fontWeight: "400" }),
+    lineHeight: 20,
+    letterSpacing: 0.15
+  },
+  caption: {
+    fontSize: 12,
+    ...FontFamily({ fontWeight: "400" }),
+    lineHeight: 16,
+    letterSpacing: 0.3
+  },
+  overline: {
+    fontSize: 10,
+    ...FontFamily({ fontWeight: "600" }),
+    lineHeight: 14,
+    letterSpacing: 1,
+    textTransform: "uppercase"
+  }
+};
+var COLOR_SHORTCUT_MAP = {
+  primary: (t) => t.text.primary,
+  secondary: (t) => t.text.secondary,
+  muted: (t) => t.text.muted,
+  inverse: (t) => t.text.inverse,
+  success: (t) => t.status.success,
+  error: (t) => t.status.error,
+  warning: (t) => t.status.warning
+};
+function resolveColor(color, theme) {
+  if (!color) return void 0;
+  const resolver = COLOR_SHORTCUT_MAP[color];
+  return resolver ? resolver(theme) : color;
+}
+function Text({
+  style,
+  variant,
+  color,
+  align,
+  uppercase,
+  italic,
+  underline,
+  strikethrough,
+  selectable = false,
+  numberOfLines,
+  ellipsizeMode = "tail",
+  ...props
+}) {
+  const theme = useTheme();
+  const flatStyle = Array.isArray(style) ? Object.assign({}, ...style) : style;
+  const enhancementStyle = {};
+  if (variant) {
+    Object.assign(enhancementStyle, VARIANT_STYLES[variant]);
+  }
+  const resolvedColor = resolveColor(color, theme);
+  if (resolvedColor) {
+    enhancementStyle.color = resolvedColor;
+  }
+  if (align) {
+    enhancementStyle.textAlign = align;
+  }
+  if (uppercase) {
+    enhancementStyle.textTransform = "uppercase";
+  }
+  if (italic) {
+    enhancementStyle.fontStyle = "italic";
+  }
+  const decorations = [];
+  if (underline) decorations.push("underline");
+  if (strikethrough) decorations.push("line-through");
+  if (decorations.length > 0) {
+    enhancementStyle.textDecorationLine = decorations.join(
+      " "
+    );
+  }
+  const mergedFlatForFont = { ...enhancementStyle, ...flatStyle };
+  return /* @__PURE__ */ jsx(
+    Text$1,
+    {
+      ...props,
+      selectable,
+      numberOfLines,
+      ellipsizeMode,
+      style: [
+        FontFamily(mergedFlatForFont),
+        { includeFontPadding: false, textAlignVertical: "center" },
+        enhancementStyle,
+        style
+      ]
+    }
+  );
+}
+var shade = (obj, key, fallback) => obj[key] ?? fallback;
+function getAlertIconAndColors(type) {
+  switch (type) {
+    case "danger":
+      return {
+        icon: React.createElement(AlertCircle, {
+          size: 32,
+          color: colors_default.red[500] || "#ef4444",
+          strokeWidth: 1.5
+        }),
+        color: colors_default.red[500] || "#ef4444",
+        backgroundColor: shade(
+          colors_default.red,
+          "50",
+          "#fef2f2"
+        )
+      };
+    case "success":
+      return {
+        icon: React.createElement(CheckCircle, {
+          size: 32,
+          color: colors_default.green[500] || "#16a34a",
+          strokeWidth: 1.5
+        }),
+        color: colors_default.green[500] || "#16a34a",
+        backgroundColor: shade(
+          colors_default.green,
+          "50",
+          "#f0fdf4"
+        )
+      };
+    case "info":
+      return {
+        icon: React.createElement(Info, {
+          size: 32,
+          color: colors_default.primaryColor,
+          strokeWidth: 1.5
+        }),
+        color: colors_default.primaryColor,
+        backgroundColor: colors_default.primary[50]
+      };
+    case "warning":
+    default:
+      return {
+        icon: React.createElement(AlertCircle, {
+          size: 32,
+          color: colors_default.orange[500] || "#ea580c",
+          strokeWidth: 1.5
+        }),
+        color: colors_default.orange[500] || "#ea580c",
+        backgroundColor: shade(
+          colors_default.orange,
+          "50",
+          "#fff7ed"
+        )
+      };
+  }
+}
+var AlertModal = ({
+  visible,
+  title,
+  message,
+  type = "warning",
+  buttons,
+  isLoading = false,
+  onButtonPress,
+  onCancel,
+  style
+}) => {
+  const {
+    icon,
+    color,
+    backgroundColor
+  } = getAlertIconAndColors(type);
+  const defaultButtons = [
+    {
+      text: "OK",
+      onPress: onCancel,
+      style: "default"
+    }
+  ];
+  const displayButtons = buttons && buttons.length > 0 ? buttons : defaultButtons;
+  const cancelButton = displayButtons.find((b) => b.style === "cancel");
+  const otherButtons = displayButtons.filter((b) => b.style !== "cancel");
+  return /* @__PURE__ */ jsx(
+    Modal,
+    {
+      visible,
+      animationType: "fade",
+      transparent: true,
+      onRequestClose: onCancel,
+      children: /* @__PURE__ */ jsx(View, { style: styles.overlay, children: /* @__PURE__ */ jsxs(View, { style: [styles.container, style], children: [
+        /* @__PURE__ */ jsx(
+          TouchableOpacity,
+          {
+            style: styles.closeButton,
+            onPress: onCancel,
+            disabled: isLoading,
+            children: /* @__PURE__ */ jsx(X, { size: 24, color: colors_default.gray[400] })
+          }
+        ),
+        /* @__PURE__ */ jsx(View, { style: [styles.iconContainer, { backgroundColor }], children: icon }),
+        /* @__PURE__ */ jsx(Text, { style: styles.title, children: title }),
+        message && /* @__PURE__ */ jsx(Text, { style: styles.message, children: message }),
+        /* @__PURE__ */ jsxs(View, { style: styles.buttonContainer, children: [
+          cancelButton && /* @__PURE__ */ jsx(
+            TouchableOpacity,
+            {
+              onPress: () => onButtonPress?.(cancelButton),
+              disabled: isLoading,
+              style: [styles.buttonWrapper, styles.cancelButtonStyle],
+              children: /* @__PURE__ */ jsx(Text, { style: styles.cancelButtonText, children: cancelButton.text || "Cancel" })
+            }
+          ),
+          otherButtons.map((button, index) => {
+            const isDestructive = button.style === "destructive";
+            const buttonColor = isDestructive ? color : colors_default.primaryColor;
+            return /* @__PURE__ */ jsx(
+              TouchableOpacity,
+              {
+                onPress: () => onButtonPress?.(button),
+                disabled: isLoading,
+                style: [
+                  styles.buttonWrapper,
+                  styles.actionButtonStyle,
+                  {
+                    backgroundColor: buttonColor,
+                    opacity: isLoading ? 0.6 : 1
+                  }
+                ],
+                children: isLoading ? /* @__PURE__ */ jsx(ActivityIndicator, { size: "small", color: "#fff" }) : /* @__PURE__ */ jsx(Text, { style: styles.actionButtonText, children: button.text || "OK" })
+              },
+              index
+            );
+          })
+        ] }),
+        isLoading && /* @__PURE__ */ jsx(View, { style: styles.loadingOverlay, children: /* @__PURE__ */ jsx(ActivityIndicator, { size: "large", color: colors_default.primaryColor }) })
+      ] }) })
+    }
+  );
+};
+var styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  container: {
+    backgroundColor: "#fff",
+    borderRadius: 10,
+    padding: 15,
+    margin: 15,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 10 },
+    shadowOpacity: 0.25,
+    shadowRadius: 12,
+    elevation: 10
+  },
+  closeButton: {
+    position: "absolute",
+    top: 12,
+    right: 12,
+    zIndex: 10,
+    padding: 8
+  },
+  iconContainer: {
+    width: 64,
+    height: 64,
+    borderRadius: 32,
+    justifyContent: "center",
+    alignItems: "center",
+    alignSelf: "center",
+    marginTop: 8,
+    marginBottom: 16
+  },
+  title: {
+    fontSize: 18,
+    ...FontFamily({ fontWeight: "600" }),
+    color: colors_default.gray[900],
+    textAlign: "center",
+    marginBottom: 8
+  },
+  message: {
+    fontSize: 14,
+    color: colors_default.gray[600],
+    textAlign: "center",
+    lineHeight: 20,
+    marginBottom: 24
+  },
+  buttonContainer: {
+    flexDirection: "row",
+    gap: 12,
+    width: "100%",
+    marginTop: 8
+  },
+  buttonWrapper: {
+    flex: 1,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    borderRadius: 8,
+    justifyContent: "center",
+    alignItems: "center",
+    minHeight: 44
+  },
+  cancelButtonStyle: {
+    backgroundColor: colors_default.gray[100],
+    borderWidth: 1,
+    borderColor: colors_default.gray[300]
+  },
+  cancelButtonText: {
+    fontSize: 14,
+    ...FontFamily({ fontWeight: "600" }),
+    color: colors_default.gray[700]
+  },
+  actionButtonStyle: {
+    backgroundColor: colors_default.primaryColor
+  },
+  actionButtonText: {
+    fontSize: 14,
+    ...FontFamily({ fontWeight: "600" }),
+    color: "#fff"
+  },
+  loadingOverlay: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderRadius: 16,
+    backgroundColor: "rgba(255, 255, 255, 0.7)",
+    justifyContent: "center",
+    alignItems: "center"
+  }
+});
+var AlertContext = createContext(void 0);
+var globalAlertState = null;
+var showAlert = (title, message, buttons, type = "warning") => {
+  if (!globalAlertState) {
+    console.warn(
+      "Alert must be used within AlertProvider. Wrap your app with <AlertProvider>"
+    );
+    return;
+  }
+  const defaultButtons = [
+    {
+      text: "OK",
+      onPress: () => globalAlertState?.setState((prev) => ({ ...prev, visible: false })),
+      style: "default"
+    }
+  ];
+  const finalButtons = buttons && buttons.length > 0 ? buttons : defaultButtons;
+  globalAlertState.setState({
+    visible: true,
+    title,
+    message: message || "",
+    type,
+    buttons: finalButtons,
+    isLoading: false
+  });
+};
+var Alert = {
+  alert: (title, message, buttons) => showAlert(title, message, buttons, "warning"),
+  warning: (title, message, buttons) => showAlert(title, message, buttons, "warning"),
+  error: (title, message, buttons) => showAlert(title, message, buttons, "danger"),
+  info: (title, message, buttons) => showAlert(title, message, buttons, "info"),
+  success: (title, message, buttons) => showAlert(title, message, buttons, "success")
+};
+var AlertProvider = ({
+  children
+}) => {
+  const [state, setState] = useState({
+    visible: false,
+    title: "",
+    message: "",
+    type: "warning",
+    buttons: [],
+    isLoading: false
+  });
+  React.useEffect(() => {
+    globalAlertState = { setState };
+  }, []);
+  const alert = useCallback(
+    (title, message, buttons, options) => {
+      const defaultButtons = [
+        {
+          text: "OK",
+          onPress: () => setState((prev) => ({ ...prev, visible: false })),
+          style: "default"
+        }
+      ];
+      const finalButtons = buttons && buttons.length > 0 ? buttons : defaultButtons;
+      setState({
+        visible: true,
+        title,
+        message: message || "",
+        type: options?.type || "warning",
+        buttons: finalButtons,
+        isLoading: false
+      });
+    },
+    []
+  );
+  const hide = useCallback(() => {
+    setState((prev) => ({ ...prev, visible: false }));
+  }, []);
+  const handleButtonPress = useCallback(async (button) => {
+    setState((prev) => ({ ...prev, isLoading: true }));
+    try {
+      if (button.onPress) {
+        await button.onPress();
+      }
+    } finally {
+      setState((prev) => ({ ...prev, isLoading: false, visible: false }));
+    }
+  }, []);
+  return /* @__PURE__ */ jsxs(AlertContext.Provider, { value: { alert }, children: [
+    children,
+    /* @__PURE__ */ jsx(
+      AlertModal,
+      {
+        visible: state.visible,
+        title: state.title,
+        message: state.message,
+        type: state.type,
+        buttons: state.buttons,
+        isLoading: state.isLoading,
+        onButtonPress: handleButtonPress,
+        onCancel: hide
+      }
+    )
+  ] });
+};
+var useAlert = () => {
+  const context = useContext(AlertContext);
+  if (!context) {
+    throw new Error("useAlert must be used within an AlertProvider");
+  }
+  return context;
+};
+
+export { Alert, AlertProvider, Fonts, useAlert, useFonts, useTheme };