@webority-technologies/mobile-ui 0.0.1

package/lib/module/theme/tokens.js

@@ -0,0 +1,648 @@
+"use strict";
+
+const typography = {
+  fontSize: {
+    xs: 11,
+    sm: 13,
+    base: 15,
+    lg: 17,
+    xl: 20,
+    '2xl': 24,
+    '3xl': 30,
+    '4xl': 36
+  },
+  fontWeight: {
+    normal: '400',
+    medium: '500',
+    semibold: '600',
+    bold: '700'
+  },
+  lineHeight: {
+    tight: 1.2,
+    normal: 1.4,
+    relaxed: 1.6
+  },
+  letterSpacing: {
+    tight: -0.2,
+    normal: 0,
+    wide: 0.4
+  }
+};
+const spacing = {
+  none: 0,
+  xxs: 2,
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 24,
+  '2xl': 32,
+  '3xl': 48,
+  '4xl': 64
+};
+const radius = {
+  none: 0,
+  xs: 4,
+  sm: 6,
+  md: 10,
+  lg: 14,
+  xl: 20,
+  '2xl': 28,
+  full: 9999
+};
+
+// `field` tokens hold the canonical dimensions every input-like control
+// inherits via FieldBase. Heights, radii and padding ladders here are the
+// single source of truth — Input, Select, SearchBar, NumberInput, OTPInput
+// cell and PickerTrigger fall through to these unless their own component
+// tokens override. Fill / border colours resolve at theme-build time inside
+// the providers (which know `colors.*`) — these defaults are dimension-only.
+const fieldSizes = {
+  sm: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    minHeight: 38,
+    fontSize: 13,
+    borderRadius: 10,
+    iconSize: 16
+  },
+  md: {
+    paddingHorizontal: 14,
+    paddingVertical: 11,
+    minHeight: 46,
+    fontSize: 15,
+    borderRadius: 12,
+    iconSize: 18
+  },
+  lg: {
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    minHeight: 54,
+    fontSize: 16,
+    borderRadius: 14,
+    iconSize: 20
+  }
+};
+const components = {
+  button: {
+    xs: {
+      paddingHorizontal: 10,
+      paddingVertical: 4,
+      minHeight: 28,
+      fontSize: 12,
+      borderRadius: 8
+    },
+    sm: {
+      paddingHorizontal: 12,
+      paddingVertical: 6,
+      minHeight: 34,
+      fontSize: 13,
+      borderRadius: 10
+    },
+    md: {
+      paddingHorizontal: 16,
+      paddingVertical: 9,
+      minHeight: 42,
+      fontSize: 15,
+      borderRadius: 12
+    },
+    lg: {
+      paddingHorizontal: 20,
+      paddingVertical: 12,
+      minHeight: 50,
+      fontSize: 16,
+      borderRadius: 14
+    },
+    xl: {
+      paddingHorizontal: 24,
+      paddingVertical: 14,
+      minHeight: 58,
+      fontSize: 17,
+      borderRadius: 16
+    }
+  },
+  input: {
+    sm: {
+      paddingHorizontal: 12,
+      paddingVertical: 8,
+      minHeight: 38,
+      multilineMinHeight: 72,
+      fontSize: 13,
+      borderRadius: 10,
+      iconSize: 16
+    },
+    md: {
+      paddingHorizontal: 14,
+      paddingVertical: 11,
+      minHeight: 46,
+      multilineMinHeight: 92,
+      fontSize: 15,
+      borderRadius: 12,
+      iconSize: 18
+    },
+    lg: {
+      paddingHorizontal: 16,
+      paddingVertical: 14,
+      minHeight: 54,
+      multilineMinHeight: 110,
+      fontSize: 16,
+      borderRadius: 14,
+      iconSize: 20
+    }
+  },
+  searchBar: {
+    // `borderRadius: radius.full` keeps the historical pill shape as the
+    // library default. Brands wanting SearchBar to share Input / Select's
+    // rounded-rect shape override per size to match `field.<size>.borderRadius`
+    // (10 / 12 / 14), or drop a single value in via theme merge.
+    sm: {
+      height: 36,
+      paddingHorizontal: 10,
+      fontSize: 13,
+      iconSize: 16,
+      gap: 6,
+      borderRadius: radius.full
+    },
+    md: {
+      height: 44,
+      paddingHorizontal: 12,
+      fontSize: 15,
+      iconSize: 18,
+      gap: 8,
+      borderRadius: radius.full
+    },
+    lg: {
+      height: 52,
+      paddingHorizontal: 14,
+      fontSize: 16,
+      iconSize: 20,
+      gap: 10,
+      borderRadius: radius.full
+    },
+    cancelButtonWidth: 72
+  },
+  emptyState: {
+    sm: {
+      iconSize: 48,
+      titleFontSize: 'lg',
+      descriptionFontSize: 'sm',
+      paddingVertical: 'lg'
+    },
+    md: {
+      iconSize: 64,
+      titleFontSize: 'xl',
+      descriptionFontSize: 'base',
+      paddingVertical: 'xl'
+    },
+    lg: {
+      iconSize: 80,
+      titleFontSize: '2xl',
+      descriptionFontSize: 'base',
+      paddingVertical: '2xl'
+    }
+  },
+  field: {
+    defaultVariant: 'outlined',
+    sm: fieldSizes.sm,
+    md: fieldSizes.md,
+    lg: fieldSizes.lg
+    // Variant fill / border colours are filled in at theme-build time by the
+    // light/dark Theme objects below — they need access to `colors.*`.
+  },
+  listItem: {
+    sm: {
+      paddingVertical: 'sm',
+      titleFontSize: 'sm',
+      subtitleFontSize: 'xs',
+      minHeight: 44
+    },
+    md: {
+      paddingVertical: 'md',
+      titleFontSize: 'base',
+      subtitleFontSize: 'sm',
+      minHeight: 56
+    },
+    lg: {
+      paddingVertical: 'lg',
+      titleFontSize: 'lg',
+      subtitleFontSize: 'sm',
+      minHeight: 72
+    }
+  },
+  badge: {
+    sm: {
+      fontSize: 10,
+      minWidth: 16,
+      height: 16,
+      paddingHorizontal: 5,
+      dotSize: 8
+    },
+    md: {
+      fontSize: 11,
+      minWidth: 20,
+      height: 20,
+      paddingHorizontal: 6,
+      dotSize: 10
+    },
+    borderWidth: 1.5,
+    anchorOffset: 4
+  },
+  chip: {
+    sm: {
+      paddingHorizontal: 10,
+      paddingVertical: 4,
+      fontSize: 12,
+      minHeight: 26,
+      closeSize: 16,
+      closeFontSize: 12,
+      gap: 6
+    },
+    md: {
+      paddingHorizontal: 12,
+      paddingVertical: 6,
+      fontSize: 13,
+      minHeight: 32,
+      closeSize: 18,
+      closeFontSize: 13,
+      gap: 8
+    }
+  },
+  checkbox: {
+    sm: {
+      boxSize: 16
+    },
+    md: {
+      boxSize: 20
+    },
+    lg: {
+      boxSize: 24
+    },
+    labelGap: 10
+  },
+  radio: {
+    sm: {
+      outer: 16,
+      inner: 8
+    },
+    md: {
+      outer: 20,
+      inner: 10
+    },
+    lg: {
+      outer: 24,
+      inner: 12
+    },
+    labelGap: 10
+  },
+  switch: {
+    sm: {
+      trackWidth: 42,
+      trackHeight: 26,
+      thumbSize: 22,
+      padding: 2
+    },
+    md: {
+      trackWidth: 51,
+      trackHeight: 31,
+      thumbSize: 27,
+      padding: 2
+    },
+    lg: {
+      trackWidth: 60,
+      trackHeight: 36,
+      thumbSize: 32,
+      padding: 2
+    },
+    thumbColor: '#FFFFFF'
+  },
+  otpInput: {
+    sm: {
+      cell: 36,
+      fontSize: 16,
+      borderRadius: 8,
+      gap: 8
+    },
+    md: {
+      cell: 48,
+      fontSize: 20,
+      borderRadius: 10,
+      gap: 10
+    },
+    lg: {
+      cell: 56,
+      fontSize: 24,
+      borderRadius: 12,
+      gap: 12
+    }
+  },
+  dialog: {
+    iconWrapperSize: 48,
+    iconWrapperBorderRadius: 24,
+    actionButtonMinHeight: 44
+  },
+  toast: {
+    iconCircleSize: 28,
+    iconCircleBorderRadius: 14,
+    iconGlyphFontSize: 16,
+    tintBarWidth: 4
+  },
+  formField: {
+    inlineLabelWidth: '35%'
+  }
+};
+const motion = {
+  duration: {
+    instant: 80,
+    fast: 160,
+    normal: 240,
+    slow: 360,
+    slower: 500
+  },
+  easing: {
+    standard: [0.4, 0.0, 0.2, 1],
+    accelerate: [0.4, 0.0, 1, 1],
+    decelerate: [0.0, 0.0, 0.2, 1],
+    sharp: [0.4, 0.0, 0.6, 1]
+  },
+  /**
+   * Springs run at sub-1 mass on purpose. Mass is the lever that decides
+   * whether motion reads as "responsive" or "floaty", and leaving it at 1 (the
+   * RN default) is what makes an otherwise correct animation feel slow. Higher
+   * stiffness with lighter mass settles faster without losing the spring.
+   *
+   * The asymmetry rule: OPEN with a spring from this scale, CLOSE with
+   * `Animated.timing` at `duration.fast` and `easing.accelerate`. A spring on
+   * the way out re-reads as hesitation — the element should leave decisively.
+   */
+  spring: {
+    gentle: {
+      damping: 26,
+      stiffness: 240,
+      mass: 0.9
+    },
+    bouncy: {
+      damping: 16,
+      stiffness: 200,
+      mass: 0.7
+    },
+    snappy: {
+      damping: 20,
+      stiffness: 300,
+      mass: 0.7
+    }
+  }
+};
+const lightShadows = {
+  none: {},
+  xs: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    shadowOpacity: 0.04,
+    shadowRadius: 2,
+    elevation: 1
+  },
+  sm: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.06,
+    shadowRadius: 4,
+    elevation: 2
+  },
+  md: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 4
+    },
+    shadowOpacity: 0.08,
+    shadowRadius: 8,
+    elevation: 4
+  },
+  lg: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 8
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 16,
+    elevation: 8
+  },
+  xl: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 12
+    },
+    shadowOpacity: 0.14,
+    shadowRadius: 24,
+    elevation: 12
+  },
+  '2xl': {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 20
+    },
+    shadowOpacity: 0.18,
+    shadowRadius: 32,
+    elevation: 20
+  }
+};
+const darkShadows = {
+  none: {},
+  xs: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    shadowOpacity: 0.3,
+    shadowRadius: 2,
+    elevation: 1
+  },
+  sm: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.4,
+    shadowRadius: 4,
+    elevation: 2
+  },
+  md: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 4
+    },
+    shadowOpacity: 0.5,
+    shadowRadius: 8,
+    elevation: 4
+  },
+  lg: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 8
+    },
+    shadowOpacity: 0.55,
+    shadowRadius: 16,
+    elevation: 8
+  },
+  xl: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 12
+    },
+    shadowOpacity: 0.6,
+    shadowRadius: 24,
+    elevation: 12
+  },
+  '2xl': {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 20
+    },
+    shadowOpacity: 0.7,
+    shadowRadius: 32,
+    elevation: 20
+  }
+};
+export const lightTheme = {
+  mode: 'light',
+  colors: {
+    primary: '#5B5BD6',
+    primaryHover: '#4F4FBF',
+    primaryPressed: '#4040A8',
+    primaryMuted: '#EEEEFC',
+    secondary: '#F4F4F8',
+    secondaryHover: '#E9E9F0',
+    success: '#1FAD66',
+    warning: '#F59E0B',
+    error: '#E5484D',
+    info: '#3B82F6',
+    onPrimary: '#FFFFFF',
+    onSecondary: '#0F0F1A',
+    onSuccess: '#FFFFFF',
+    onWarning: '#0F0F1A',
+    onError: '#FFFFFF',
+    onInfo: '#FFFFFF',
+    text: {
+      primary: '#0F0F1A',
+      secondary: '#52525B',
+      tertiary: '#8B8B95',
+      inverse: '#FFFFFF',
+      disabled: '#B4B4BB',
+      link: '#5B5BD6'
+    },
+    background: {
+      primary: '#FFFFFF',
+      secondary: '#F8F8FB',
+      tertiary: '#F1F1F5',
+      elevated: '#FFFFFF',
+      overlay: 'rgba(15, 15, 26, 0.5)',
+      inverse: '#0F0F1A'
+    },
+    border: {
+      primary: '#E5E5EC',
+      secondary: '#EFEFF3',
+      focus: '#5B5BD6',
+      error: '#E5484D',
+      width: 1.5
+    },
+    surface: {
+      pressed: 'rgba(15, 15, 26, 0.06)',
+      hovered: 'rgba(15, 15, 26, 0.04)',
+      selected: 'rgba(91, 91, 214, 0.1)',
+      disabled: '#F1F1F5'
+    },
+    skeleton: {
+      background: '#EBEDF3',
+      highlight: '#F5F6FA'
+    },
+    // Held to one contrast standard: every hue lands in a 5.2:1-5.7:1 band
+    // against the white initials, so no single avatar colour is the weak one.
+    // Index order is load-bearing — it is what keeps a given user's colour stable.
+    avatarPalette: ['#5B5BD6', '#0A7979', '#A45A05', '#CD226E', '#2462EB', '#7C3AED', '#047C57', '#D42222']
+  },
+  typography,
+  spacing,
+  radius,
+  shadows: lightShadows,
+  motion,
+  components,
+  gradients: {}
+};
+export const darkTheme = {
+  mode: 'dark',
+  colors: {
+    primary: '#7C7CE8',
+    primaryHover: '#9292EE',
+    primaryPressed: '#A8A8F2',
+    primaryMuted: '#1F1F3D',
+    secondary: '#1F1F26',
+    secondaryHover: '#2A2A33',
+    success: '#30C780',
+    warning: '#FBBF24',
+    error: '#F87171',
+    info: '#60A5FA',
+    onPrimary: '#0F0F1A',
+    onSecondary: '#FAFAFA',
+    onSuccess: '#0F0F1A',
+    onWarning: '#0F0F1A',
+    onError: '#0F0F1A',
+    onInfo: '#0F0F1A',
+    text: {
+      primary: '#FAFAFA',
+      secondary: '#B4B4BB',
+      tertiary: '#71717A',
+      inverse: '#0F0F1A',
+      disabled: '#52525B',
+      link: '#9292EE'
+    },
+    background: {
+      primary: '#0B0B12',
+      secondary: '#13131C',
+      tertiary: '#1C1C26',
+      elevated: '#1C1C26',
+      overlay: 'rgba(0, 0, 0, 0.65)',
+      inverse: '#FAFAFA'
+    },
+    border: {
+      primary: '#27272F',
+      secondary: '#1C1C26',
+      focus: '#7C7CE8',
+      error: '#F87171',
+      width: 1.5
+    },
+    surface: {
+      pressed: 'rgba(255, 255, 255, 0.08)',
+      hovered: 'rgba(255, 255, 255, 0.05)',
+      selected: 'rgba(124, 124, 232, 0.18)',
+      disabled: '#1C1C26'
+    },
+    skeleton: {
+      background: '#1C1C26',
+      highlight: '#27272F'
+    },
+    avatarPalette: ['#8B8BEE', '#2DD4BF', '#FCD34D', '#F472B6', '#60A5FA', '#A78BFA', '#34D399', '#F87171']
+  },
+  typography,
+  spacing,
+  radius,
+  shadows: darkShadows,
+  motion,
+  components,
+  gradients: {}
+};
+//# sourceMappingURL=tokens.js.map

package/lib/module/theme/types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=types.js.map

package/lib/module/utils/dimensions.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { Breakpoints, isScreenSize, isTablet, ScreenDimensions } from "./responsive.js";
+//# sourceMappingURL=dimensions.js.map

package/lib/module/utils/feedback.js

@@ -0,0 +1,70 @@
+"use strict";
+
+import { triggerHaptic } from "./hapticUtils.js";
+
+/**
+ * What the interaction MEANT, not which vibration to play.
+ *
+ * Call sites that pick a `HapticType` directly end up disagreeing with each
+ * other — one screen fires `impactMedium` on delete, the next fires
+ * `notificationWarning`, and the app stops speaking one language. Naming the
+ * intent moves that decision here, once.
+ */
+
+const INTENT_HAPTIC = {
+  tap: 'impactLight',
+  select: 'selection',
+  longPress: 'impactMedium',
+  created: 'impactMedium',
+  deleted: 'notificationWarning',
+  restored: 'notificationSuccess',
+  toggledOn: 'impactMedium',
+  toggledOff: 'impactLight',
+  succeeded: 'notificationSuccess',
+  warned: 'notificationWarning',
+  failed: 'notificationError'
+};
+let hapticsEnabled = true;
+
+/**
+ * Gate every intent from one place, so an app's "haptics" setting needs no
+ * per-component plumbing.
+ */
+export const configureFeedback = prefs => {
+  hapticsEnabled = prefs.haptics;
+};
+export const isFeedbackEnabled = () => hapticsEnabled;
+const fire = intent => {
+  if (!hapticsEnabled) {
+    return;
+  }
+  triggerHaptic(INTENT_HAPTIC[intent]);
+};
+
+/** Resolve an intent to its haptic type without firing it. */
+export const hapticForIntent = intent => INTENT_HAPTIC[intent];
+export const feedback = {
+  /** A plain press: button, row, chip. */
+  tap: () => fire('tap'),
+  /** Moving between options — segmented control, picker wheel, tab. */
+  select: () => fire('select'),
+  /** A long-press threshold being crossed. */
+  longPress: () => fire('longPress'),
+  /** Something now exists that did not before. */
+  created: () => fire('created'),
+  /** Something was destroyed or removed. */
+  deleted: () => fire('deleted'),
+  /** An undo landed. */
+  restored: () => fire('restored'),
+  /** A binary control turned on / off — switch, checkbox, favourite. */
+  toggled: on => fire(on ? 'toggledOn' : 'toggledOff'),
+  /** A flow finished successfully. */
+  succeeded: () => fire('succeeded'),
+  /** A recoverable problem the user should notice. */
+  warned: () => fire('warned'),
+  /** A failure. */
+  failed: () => fire('failed'),
+  /** Escape hatch for an intent held in a variable. */
+  fire
+};
+//# sourceMappingURL=feedback.js.map