custom-mobile-ui 1.0.1

package/dist/theme.js

@@ -0,0 +1,472 @@
+'use strict';
+
+var reactNative = require('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: reactNative.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: reactNative.Platform.select({
+    ios: {
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 1 },
+      shadowOpacity: 0.06,
+      shadowRadius: 4
+    },
+    android: { elevation: 2 },
+    default: {}
+  }),
+  /** Medium shadow — dropdowns, popups */
+  md: reactNative.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: reactNative.Platform.select({
+    ios: {
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 8 },
+      shadowOpacity: 0.15,
+      shadowRadius: 16
+    },
+    android: { elevation: 10 },
+    default: {}
+  }),
+  /** Extra strong — overlays */
+  xl: reactNative.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;
+
+exports.AVATAR_COLORS = AVATAR_COLORS;
+exports.BaseTheme = BaseTheme;
+exports.Colors = colors_default;
+exports.DarkTheme = DarkTheme;
+exports.Duration = Duration;
+exports.FontFamily = FontFamily;
+exports.FontSize = FontSize;
+exports.LightTheme = LightTheme;
+exports.LineHeight = LineHeight;
+exports.Shadow = Shadow;
+exports.Spacing = Spacing;
+exports.ZIndex = ZIndex;
+exports.getTheme = getTheme;