custom-mobile-ui 1.0.1

package/dist/theme.mjs

@@ -0,0 +1,458 @@
+import { Platform } from 'react-native';
+
+// src/theme/colors.ts
+var Colors = {
+  primary: {
+    50: "#EFF6FF",
+    100: "#DBEAFE",
+    200: "#BFDBFE",
+    300: "#93C5FD",
+    400: "#60A5FA",
+    500: "#3B82F6",
+    600: "#2563EB",
+    700: "#1D4ED8",
+    800: "#1E40AF",
+    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",
+  black: "#000000",
+  green: { 500: "#22C55E" },
+  orange: { 500: "#F97316" },
+  red: { 50: "#FEE2E2", 500: "#EF4444" },
+  status: {
+    success: {
+      light: "#DCFCE7",
+      default: "#22C55E",
+      dark: "#15803D"
+    },
+    warning: {
+      light: "#FFEDD5",
+      default: "#F97316",
+      dark: "#C2410C"
+    },
+    error: {
+      light: "#FEE2E2",
+      default: "#EF4444",
+      dark: "#B91C1C"
+    },
+    info: {
+      light: "#DBEAFE",
+      default: "#3B82F6",
+      dark: "#1D4ED8"
+    },
+    pending: {
+      light: "#FEF3C7",
+      default: "#EAB308",
+      dark: "#A16207"
+    },
+    disabled: {
+      light: "#F3F4F6",
+      default: "#9CA3AF",
+      dark: "#6B7280"
+    },
+    // Uppercase aliases for basic statuses
+    SUCCESS: {
+      light: "#DCFCE7",
+      default: "#22C55E",
+      dark: "#15803D"
+    },
+    WARNING: {
+      light: "#FFEDD5",
+      default: "#F97316",
+      dark: "#C2410C"
+    },
+    ERROR: {
+      light: "#FEE2E2",
+      default: "#EF4444",
+      dark: "#B91C1C"
+    },
+    INFO: {
+      light: "#DBEAFE",
+      default: "#3B82F6",
+      dark: "#1D4ED8"
+    },
+    PENDING: {
+      light: "#FEF3C7",
+      default: "#EAB308",
+      dark: "#A16207"
+    },
+    DISABLED: {
+      light: "#F3F4F6",
+      default: "#9CA3AF",
+      dark: "#6B7280"
+    },
+    // Complaint Statuses
+    OPEN: {
+      light: "#DBEAFE",
+      default: "#3B82F6",
+      dark: "#1D4ED8"
+    },
+    ASSIGNED: {
+      light: "#E0E7FF",
+      default: "#6366F1",
+      dark: "#4338CA"
+    },
+    IN_PROGRESS: {
+      light: "#FEF3C7",
+      default: "#EAB308",
+      dark: "#A16207"
+    },
+    ON_HOLD: {
+      light: "#FFEDD5",
+      default: "#F97316",
+      dark: "#C2410C"
+    },
+    RESOLVED: {
+      light: "#DCFCE7",
+      default: "#22C55E",
+      dark: "#15803D"
+    },
+    CLOSED: {
+      light: "#F3F4F6",
+      default: "#6B7280",
+      dark: "#374151"
+    },
+    REJECTED: {
+      light: "#FEE2E2",
+      default: "#EF4444",
+      dark: "#B91C1C"
+    },
+    CANCELLED: {
+      light: "#F3F4F6",
+      default: "#9CA3AF",
+      dark: "#6B7280"
+    }
+  }
+};
+var AVATAR_COLORS = [
+  "#2563EB",
+  // Blue
+  "#9333EA",
+  // Purple
+  "#16A34A",
+  // Green
+  "#EA580C",
+  // Orange
+  "#DC2626",
+  // Red
+  "#0891B2",
+  // Cyan
+  "#CA8A04",
+  // Yellow
+  "#4F46E5",
+  // Indigo
+  "#BE185D",
+  // Pink
+  "#374151"
+  // Dark Gray
+];
+var colors_default = Colors;
+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
+  };
+};
+
+// 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/spacing.ts
+var Spacing = {
+  /** 2px — hairline gaps, icon nudges */
+  xxs: 2,
+  /** 4px — tight internal padding */
+  xs: 4,
+  /** 8px — compact spacing between elements */
+  sm: 8,
+  /** 12px — default internal padding */
+  md: 12,
+  /** 16px — section padding, card padding */
+  lg: 16,
+  /** 24px — generous padding between sections */
+  xl: 24,
+  /** 32px — large section gaps */
+  xxl: 32,
+  /** 48px — page-level vertical spacing */
+  xxxl: 48
+};
+
+// src/theme/typography.ts
+var FontSize = {
+  /** 11px — small badges, captions, overlines */
+  xs: 11,
+  /** 13px — labels, secondary text, button small */
+  sm: 13,
+  /** 15px — body text, default input */
+  md: 15,
+  /** 17px — section headings, large labels */
+  lg: 17,
+  /** 20px — page sub-headings */
+  xl: 20,
+  /** 24px — page headings */
+  xxl: 24,
+  /** 28px — hero / display text */
+  display: 28
+};
+var LineHeight = {
+  /** Tight line-height for xs */
+  xs: 15,
+  /** Tight line-height for sm */
+  sm: 18,
+  /** Default line-height for md */
+  md: 22,
+  /** Line-height for lg */
+  lg: 24,
+  /** Line-height for xl */
+  xl: 28,
+  /** Line-height for xxl */
+  xxl: 32,
+  /** Line-height for display */
+  display: 36
+};
+var Shadow = {
+  /** Subtle shadow — cards, inputs */
+  sm: Platform.select({
+    ios: {
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 1 },
+      shadowOpacity: 0.06,
+      shadowRadius: 4
+    },
+    android: { elevation: 2 },
+    default: {}
+  }),
+  /** Medium shadow — dropdowns, popups */
+  md: Platform.select({
+    ios: {
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.1,
+      shadowRadius: 8
+    },
+    android: { elevation: 5 },
+    default: {}
+  }),
+  /** Strong shadow — modals, floating elements */
+  lg: Platform.select({
+    ios: {
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 8 },
+      shadowOpacity: 0.15,
+      shadowRadius: 16
+    },
+    android: { elevation: 10 },
+    default: {}
+  }),
+  /** Extra strong — overlays */
+  xl: Platform.select({
+    ios: {
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 12 },
+      shadowOpacity: 0.2,
+      shadowRadius: 24
+    },
+    android: { elevation: 16 },
+    default: {}
+  }),
+  /** No shadow */
+  none: {}
+};
+
+// src/theme/animations.ts
+var Duration = {
+  /** 100ms — micro-interactions (press feedback, check toggle) */
+  instant: 100,
+  /** 150ms — quick transitions (button press, icon swap) */
+  fast: 150,
+  /** 250ms — default transitions (modal, popup, focus ring) */
+  normal: 250,
+  /** 350ms — deliberate transitions (page slide, bottom sheet) */
+  slow: 350,
+  /** 500ms — emphasis transitions (celebration, onboarding) */
+  slower: 500
+};
+
+// src/theme/zindex.ts
+var ZIndex = {
+  /** Base content layer */
+  base: 0,
+  /** Sticky headers, FABs */
+  sticky: 100,
+  /** Dropdown menus, select popups */
+  dropdown: 1e3,
+  /** Bottom sheets, drawers */
+  drawer: 1100,
+  /** Modals, dialogs */
+  modal: 2e3,
+  /** Popup menus, tooltips */
+  popup: 2500,
+  /** Toast notifications */
+  toast: 3e3,
+  /** Highest priority overlays (loading screens, critical alerts) */
+  overlay: 4e3
+};
+
+// src/theme/index.ts
+var getTheme = (mode) => mode === "dark" ? DarkTheme : LightTheme;
+
+export { AVATAR_COLORS, BaseTheme, colors_default as Colors, DarkTheme, Duration, FontFamily, FontSize, LightTheme, LineHeight, Shadow, Spacing, ZIndex, getTheme };

package/dist/types-cxHozHqF.d.mts

@@ -0,0 +1,92 @@
+import { StyleProp, ViewStyle } from 'react-native';
+import React__default, { ReactNode } from 'react';
+
+declare const useTheme: () => {
+    primary: {
+        default: string;
+        hover: string;
+    };
+    background: {
+        screen: string;
+        surface: string;
+        selected: string;
+        secondary: string;
+        design: string;
+    };
+    input: {
+        background: string;
+    };
+    text: {
+        primary: string;
+        secondary: string;
+        muted: string;
+        inverse: string;
+    };
+    border: {
+        default: string;
+        focused: string;
+        success: string;
+        warning: string;
+        error: string;
+    };
+    status: {
+        success: string;
+        warning: string;
+        error: string;
+        validating: string;
+    };
+    icon: {
+        default: string;
+        active: string;
+        disabled: string;
+    };
+    tabContent: {
+        active: string;
+        inactive: string;
+    };
+    skeleton: {
+        background: string;
+        componentBg: string;
+        highlight: string;
+    };
+    primaryContent: {
+        color: string;
+    };
+};
+
+interface AlertButton {
+    text?: string;
+    onPress?: () => void | Promise<void>;
+    style?: "default" | "cancel" | "destructive";
+}
+interface AlertContextType {
+    alert: (title: string, message?: string, buttons?: AlertButton[], options?: {
+        type?: AlertType;
+    }) => void;
+}
+declare const Alert: {
+    alert: (title: string, message?: string, buttons?: AlertButton[]) => void;
+    warning: (title: string, message?: string, buttons?: AlertButton[]) => void;
+    error: (title: string, message?: string, buttons?: AlertButton[]) => void;
+    info: (title: string, message?: string, buttons?: AlertButton[]) => void;
+    success: (title: string, message?: string, buttons?: AlertButton[]) => void;
+};
+declare const AlertProvider: React__default.FC<{
+    children: ReactNode;
+}>;
+declare const useAlert: () => AlertContextType;
+
+type AlertType = "warning" | "danger" | "info" | "success";
+interface AlertModalProps {
+    visible: boolean;
+    title: string;
+    message: string;
+    type?: AlertType;
+    buttons?: AlertButton[];
+    isLoading?: boolean;
+    onButtonPress?: (button: AlertButton) => void;
+    onCancel?: () => void;
+    style?: StyleProp<ViewStyle>;
+}
+
+export { Alert as A, type AlertModalProps as a, AlertProvider as b, type AlertType as c, useTheme as d, useAlert as u };

package/dist/types-cxHozHqF.d.ts

@@ -0,0 +1,92 @@
+import { StyleProp, ViewStyle } from 'react-native';
+import React__default, { ReactNode } from 'react';
+
+declare const useTheme: () => {
+    primary: {
+        default: string;
+        hover: string;
+    };
+    background: {
+        screen: string;
+        surface: string;
+        selected: string;
+        secondary: string;
+        design: string;
+    };
+    input: {
+        background: string;
+    };
+    text: {
+        primary: string;
+        secondary: string;
+        muted: string;
+        inverse: string;
+    };
+    border: {
+        default: string;
+        focused: string;
+        success: string;
+        warning: string;
+        error: string;
+    };
+    status: {
+        success: string;
+        warning: string;
+        error: string;
+        validating: string;
+    };
+    icon: {
+        default: string;
+        active: string;
+        disabled: string;
+    };
+    tabContent: {
+        active: string;
+        inactive: string;
+    };
+    skeleton: {
+        background: string;
+        componentBg: string;
+        highlight: string;
+    };
+    primaryContent: {
+        color: string;
+    };
+};
+
+interface AlertButton {
+    text?: string;
+    onPress?: () => void | Promise<void>;
+    style?: "default" | "cancel" | "destructive";
+}
+interface AlertContextType {
+    alert: (title: string, message?: string, buttons?: AlertButton[], options?: {
+        type?: AlertType;
+    }) => void;
+}
+declare const Alert: {
+    alert: (title: string, message?: string, buttons?: AlertButton[]) => void;
+    warning: (title: string, message?: string, buttons?: AlertButton[]) => void;
+    error: (title: string, message?: string, buttons?: AlertButton[]) => void;
+    info: (title: string, message?: string, buttons?: AlertButton[]) => void;
+    success: (title: string, message?: string, buttons?: AlertButton[]) => void;
+};
+declare const AlertProvider: React__default.FC<{
+    children: ReactNode;
+}>;
+declare const useAlert: () => AlertContextType;
+
+type AlertType = "warning" | "danger" | "info" | "success";
+interface AlertModalProps {
+    visible: boolean;
+    title: string;
+    message: string;
+    type?: AlertType;
+    buttons?: AlertButton[];
+    isLoading?: boolean;
+    onButtonPress?: (button: AlertButton) => void;
+    onCancel?: () => void;
+    style?: StyleProp<ViewStyle>;
+}
+
+export { Alert as A, type AlertModalProps as a, AlertProvider as b, type AlertType as c, useTheme as d, useAlert as u };