@himakarinv/nativex 1.0.0

package/src/theme/colors.ts

@@ -0,0 +1,273 @@
+export const colors = {
+  primary: {
+    lightest: '#f8fcff',
+    lighter: '#e6f2ff',
+    light: '#dff3ff',
+    base: '#185197',
+    dark: '#69c1f7',
+    darker: '#0a376d',
+    darkHover: '#0f3d71',
+    lightHover: '#cce0f0',
+    lightestHover: '#d8eaf6',
+    background: '#edf6ff',
+  },
+  gray: {
+    lightest: '#fafafa',
+    lighter: '#f9fafb',
+    light: '#f2f4f7',
+    medium: '#d0d5dd',
+    base: '#d5d7da',
+    dark: '#535862',
+    darker: '#414651',
+    darkest: '#344054',
+    lightHover: '#f8f0f0',
+    lightestHover: '#f0e3e3',
+  },
+  danger: {
+    lightest: '#fffbfa',
+    lighter: '#fef3f2',
+    light: '#fee4e2',
+    medium: '#fecdca',
+    base: '#fda29b',
+    dark: '#d92d20',
+    darker: '#b42318',
+    darkest: '#912018',
+    lightestHover: '#fae8e6',
+    lightHover: '#fce4e2',
+    background: '#fdecea',
+    strong: '#c82333',
+  },
+  success: {
+    base: '#12b76a',
+  },
+  white: '#ffffff',
+  black: '#0e0e0e',
+  blackSoft: '#252b37',
+  transparent: 'transparent',
+  text: {
+    primary: '#0e0e0e',
+    muted: '#656565',
+    strong: '#2f2f2f',
+  },
+  borderSubtle: '#ececec',
+  surfaceMuted: '#f5f5f5',
+  interactive: {
+    accent: '#0447a8',
+    accentHover: '#033a8f',
+  },
+  placeholder: '#9CA3AF',
+  focus: '#2382a0',
+  checkbox: {
+    bgDefault: '#ffffff',
+    borderDefault: '#d5d7da',
+    bgActive: '#f8fcff',
+    borderActive: '#0447a8',
+    shadowRing: '#edf6ff',
+    shadowElevation: '#0a0d120d',
+    disabledBg: '#f5f5f5',
+    disabledBorder: '#e9eaeb',
+    disabledIcon: '#d5d7da',
+    label: '#414651',
+    labelDisabled: '#d5d7da',
+    description: '#535862',
+    descriptionDisabled: '#d5d7da',
+    icon: '#0447a8',
+  },
+  pagination: {
+    border: '#e9eaeb',
+    inactiveNumber: '#535862',
+    disabled: '#656565',
+    activeBg: '#dff3ff',
+    segmentedActiveBg: '#fafafa',
+    segmentedActiveText: '#2f2f2f',
+    segmentedDivider: '#d5d7da',
+    segmentedNumber: '#414651',
+    navText: '#252b37',
+    button: '#535862',
+    background: '#ffffff',
+    buttonHover: '#344054',
+  },
+  shadowKeyRgb: '10, 13, 18',
+  shadowKey: '#0a0d12',
+  boxShadowLight: 'rgba(10, 13, 18, 0.05)',
+  alert: {
+    successSurface: '#e6f4e9',
+    successBorder: '#218838',
+    infoSurface: '#dff3ff',
+    infoBorder: '#185197',
+    warningSurface: '#fff8e6',
+    warningBorder: '#b8860b',
+    errorSurface: '#fee4e2',
+    errorBorder: '#d92d20',
+    successText: '#218838',
+    warningText: '#e0a800',
+    hintText: '#0069d9',
+    errorText: '#c82333',
+    title: '#263238',
+    description: '#546e7a',
+  },
+  input: {
+    label: '#2f2f2f',
+    placeholder: '#9CA3AF',
+    border: '#ececec',
+    text: '#0e0e0e',
+  },
+  inputDropdown: {
+    text: '#181d27',
+    mutedText: '#717680',
+  },
+  textarea: {
+    background: '#ffffff',
+    text: '#0e0e0e',
+    placeholder: '#9CA3AF',
+    label: '#0e0e0e',
+    focusShadow: '#edf6ff',
+    shadow: 'rgba(10, 13, 18, 0.05)',
+    dangerBorder: '#fdecea',
+  },
+  tabs: {
+    rule: '#ececec',
+    inactiveLabel: '#656565',
+    activeLabel: '#0447a8',
+    activeIndicator: '#0447a8',
+    undergoFrameBorder: '#ececec',
+    undergoFrameBackground: '#f5f5f5',
+    undergoActiveSurface: '#ffffff',
+    undergoActiveLabel: '#2f2f2f',
+  },
+  toggle: {
+    on: '#0447a8',
+    onHover: '#033a8f',
+    onFocusRing: '#2382a0',
+    off: '#d0d5dd',
+    offHover: '#b8bec9',
+    offDisabled: '#f2f4f7',
+    onDisabled: '#9dbdee',
+    thumb: '#ffffff',
+    thumbShadow: 'rgba(10, 13, 18, 0.06)',
+    thumbShadowMd: 'rgba(10, 13, 18, 0.1)',
+    label: '#344054',
+    supporting: '#535862',
+    labelDisabled: '#d0d5dd',
+  },
+  datepicker: {
+    fieldSurface: '#ffffff',
+    fieldBorder: '#d9dbdc',
+    fieldText: '#2a2c2e',
+    fieldHoverSurface: '#e8eef5',
+    fieldHoverBorder: '#185197',
+    fieldFocusBorder: '#2382a0',
+    fieldErrorBorder: '#a93f34',
+    fieldDisabledSurface: '#f0f1f1',
+    fieldDisabledBorder: '#d9dbdc',
+    fieldReadonlySurface: '#f5f5f5',
+    fieldLabelMuted: '#656565',
+    fieldErrorText: '#a93f34',
+    popupCellText: '#2a2c2e',
+    popupCellOutsideText: '#656565',
+    popupCellHoverBg: '#e8eef5',
+    popupCellHoverBorder: '#185197',
+    popupFocusRingInner: '#ffffff',
+    popupFocusRingOuter: '#2382a0',
+    popupCellSelectedBg: '#185197',
+    popupCellSelectedHoverBg: '#144580',
+    popupCellSelectedText: '#ffffff',
+    popupIconHoverBg: '#e8eef5',
+    popupIconHoverBorder: '#185197',
+    rangeBg: '#e8eef5',
+    rangeText: '#2a2c2e',
+  },
+  dataTable: {
+    rowBg: '#ffffff',
+    rowStripeBg: '#fafafa',
+    rowHoverOdd: '#f5f5f5',
+    rowHoverEven: '#f2f4f7',
+    border: '#e0c0af',
+    text: '#535862',
+    muted: '#535862',
+    namePrimary: '#181d27',
+    inactiveBg: '#f9fafb',
+  },
+  statCard: {
+    surface: '#ffffff',
+    border: '#ececec',
+    label: '#2f2f2f',
+    value: '#0e0e0e',
+    subtitle: '#656565',
+    iconBg: '#185197',
+    iconColor: '#ffffff',
+    iconSuccessBg: '#12b76a',
+    iconPrimaryBg: '#185197',
+    iconWarningBg: '#f79009',
+    iconErrorBg: '#d92d20',
+    iconInfoBg: '#0ba5ec',
+    iconGrayBg: '#535862',
+    trendUp: '#12b76a',
+    trendDown: '#f04438',
+  },
+  login: {
+    roleCardBorder: '#0c7ae8',
+    verificationFieldBorder: '#69c1f7',
+  },
+  timepicker: {
+    border: '#ececec',
+    background: '#ffffff',
+    text: '#0e0e0e',
+    placeholder: '#9CA3AF',
+    focus: '#edf6ff',
+    hover: '#cce0f0',
+    disabled: '#f2f4f7',
+    disabledBackground: '#f9fafb',
+    disabledText: '#d0d5dd',
+  },
+  badge: {
+    gray: { bg: '#f5f5f5', text: '#414651', icon: '#717680' },
+    primary: { bg: '#f9f5ff', text: '#0447a8', icon: '#9e77ed' },
+    error: { bg: '#fef3f2', text: '#b42318', icon: '#f04438' },
+    warning: { bg: '#fffaeb', text: '#b54708', icon: '#f79009' },
+    success: { bg: '#ecfdf3', text: '#027a48', icon: '#12b76a' },
+    blueGray: { bg: '#f8f9fc', text: '#363f72', icon: '#4e5ba6' },
+    blueLight: { bg: '#f0f9ff', text: '#026aa2', icon: '#0ba5ec' },
+    blue: { bg: '#eff8ff', text: '#175cd3', icon: '#2e90fa' },
+    indigo: { bg: '#eef4ff', text: '#3538cd', icon: '#6172f3' },
+    purple: { bg: '#f4f3ff', text: '#5925dc', icon: '#7a5af8' },
+    pink: { bg: '#fdf2fa', text: '#c11574', icon: '#ee46bc' },
+    rose: { bg: '#fff1f3', text: '#c01048', icon: '#f63d68' },
+    orange: { bg: '#fff6ed', text: '#c4320a', icon: '#fb6514' },
+  },
+  breadcrumb: {
+    link: '#0447a8',
+    cardBg: '#f7f8fa',
+    cardText: '#2f2f2f',
+    cardCurrent: '#0447a8',
+    normalText: '#656565',
+    withIconsText: '#2f2f2f',
+  },
+  modal: {
+    backdrop: '#101828ff',
+  },
+  actionsMenu: {
+    triggerBg: '#f8fcff',
+    triggerBorder: '#185197',
+    triggerHoverBg: '#dff3ff',
+    triggerOpenBg: '#dff3ff',
+    triggerHoverBorder: '#033a8f',
+    triggerOpenBorder: '#033a8f',
+    icon: '#414651',
+    panelBg: '#ffffff',
+    panelBorder: '#ececec',
+    divider: '#ececec',
+    itemHoverBg: '#f9fafb',
+  },
+  sidenavbar: {
+    background: '#f8f9fa',
+    border: '#e0c0af',
+    text: '#656565',
+    activeText: '#5c2800',
+    activeBackground: '#ff7a00',
+    hoverBackground: '#FFD0A8',
+    hoverText: '#2f2f2f',
+  },
+} as const;
+
+export type Colors = typeof colors;

package/src/theme/index.ts

@@ -0,0 +1,14 @@
+export { colors } from './colors';
+export type { Colors } from './colors';
+export { typography } from './typography';
+export type { Typography } from './typography';
+export { spacing } from './spacing';
+export type { Spacing, SpacingKey } from './spacing';
+export { radius } from './radius';
+export type { Radius } from './radius';
+export { borders } from './borders';
+export type { Borders } from './borders';
+export { shadows, segmentActiveShadow } from './shadows';
+export type { Shadows } from './shadows';
+export { button } from './button';
+export type { Button as ButtonTokens } from './button';

package/src/theme/nativewind-theme.js

@@ -0,0 +1,182 @@
+const colors = {
+  transparent: 'transparent',
+  current: 'currentColor',
+  inherit: 'inherit',
+  white: '#ffffff',
+  black: '#0e0e0e',
+  'black-soft': '#252b37',
+  'border-subtle': '#ececec',
+  'surface-muted': '#f5f5f5',
+  placeholder: '#9CA3AF',
+  focus: '#2382a0',
+  primary: {
+    lightest: '#f8fcff',
+    lighter: '#e6f2ff',
+    light: '#dff3ff',
+    base: '#185197',
+    dark: '#69c1f7',
+    darker: '#0a376d',
+    'dark-hover': '#0f3d71',
+    'light-hover': '#cce0f0',
+    'lightest-hover': '#d8eaf6',
+    background: '#edf6ff',
+  },
+  gray: {
+    lightest: '#fafafa',
+    lighter: '#f9fafb',
+    light: '#f2f4f7',
+    medium: '#d0d5dd',
+    base: '#d5d7da',
+    dark: '#535862',
+    darker: '#414651',
+    darkest: '#344054',
+    'light-hover': '#f8f0f0',
+    'lightest-hover': '#f0e3e3',
+  },
+  danger: {
+    lightest: '#fffbfa',
+    lighter: '#fef3f2',
+    light: '#fee4e2',
+    medium: '#fecdca',
+    base: '#fda29b',
+    dark: '#d92d20',
+    darker: '#b42318',
+    darkest: '#912018',
+    'lightest-hover': '#fae8e6',
+    'light-hover': '#fce4e2',
+    background: '#fdecea',
+    strong: '#c82333',
+  },
+  success: {
+    base: '#12b76a',
+  },
+  text: {
+    primary: '#0e0e0e',
+    muted: '#656565',
+    strong: '#2f2f2f',
+  },
+  interactive: {
+    accent: '#0447a8',
+    'accent-hover': '#033a8f',
+  },
+  alert: {
+    'success-surface': '#e6f4e9',
+    'success-border': '#218838',
+    'info-surface': '#dff3ff',
+    'info-border': '#185197',
+    'warning-surface': '#fff8e6',
+    'warning-border': '#b8860b',
+    'error-surface': '#fee4e2',
+    'error-border': '#d92d20',
+    'success-text': '#218838',
+    'warning-text': '#e0a800',
+    'hint-text': '#0069d9',
+    'error-text': '#c82333',
+    title: '#263238',
+    description: '#546e7a',
+  },
+  input: {
+    label: '#2f2f2f',
+    placeholder: '#9CA3AF',
+    border: '#ececec',
+    text: '#0e0e0e',
+  },
+  badge: {
+    gray: { bg: '#f5f5f5', text: '#414651', icon: '#717680' },
+    primary: { bg: '#f9f5ff', text: '#0447a8', icon: '#9e77ed' },
+    error: { bg: '#fef3f2', text: '#b42318', icon: '#f04438' },
+    warning: { bg: '#fffaeb', text: '#b54708', icon: '#f79009' },
+    success: { bg: '#ecfdf3', text: '#027a48', icon: '#12b76a' },
+  },
+};
+
+const spacing = {
+  none: '0px',
+  xs: '2px',
+  sm: '4px',
+  md: '8px',
+  base: '12px',
+  lg: '16px',
+  xl: '20px',
+  '2xl': '24px',
+  '3xl': '28px',
+  '4xl': '32px',
+  '5xl': '36px',
+  '6xl': '40px',
+  '7xl': '44px',
+  'btn-sm-y': '4px',
+  'btn-sm-x': '8px',
+  'btn-md-y': '6px',
+  'btn-md-x': '12px',
+  'btn-lg-y': '8px',
+  'btn-lg-x': '16px',
+  'btn-xl-y': '10px',
+  'btn-xl-x': '20px',
+};
+
+const height = {
+  'btn-sm': '36px',
+  'btn-md': '44px',
+  'btn-lg': '48px',
+  'btn-xl': '56px',
+};
+
+const width = {
+  'btn-sm': '36px',
+  'btn-md': '44px',
+  'btn-lg': '48px',
+  'btn-xl': '56px',
+};
+
+const borderRadius = {
+  none: '0px',
+  sm: '4px',
+  md: '8px',
+  lg: '12px',
+  xl: '16px',
+  full: '9999px',
+  pill: '999px',
+  button: '8px',
+};
+
+const fontFamily = {
+  sans: ['Inter'],
+};
+
+const fontSize = {
+  sm: ['14px', { lineHeight: '20px' }],
+  md: ['15px', { lineHeight: '22px' }],
+  base: ['16px', { lineHeight: '24px' }],
+  lg: ['18px', { lineHeight: '24px' }],
+  xl: ['20px', { lineHeight: '24px' }],
+  '2xl': ['24px', { lineHeight: '32px' }],
+};
+
+const fontWeight = {
+  regular: '400',
+  normal: '400',
+  medium: '500',
+  semibold: '600',
+  large: '600',
+  bold: '700',
+};
+
+const borderWidth = {
+  none: '0px',
+  thin: '1px',
+  DEFAULT: '1px',
+  medium: '2px',
+  thick: '4px',
+};
+
+module.exports = {
+  colors,
+  spacing,
+  borderRadius,
+  fontFamily,
+  fontSize,
+  fontWeight,
+  borderWidth,
+  height,
+  width,
+};

package/src/theme/radius.ts

@@ -0,0 +1,12 @@
+export const radius = {
+  none: 0,
+  sm: 4,
+  md: 8,
+  lg: 12,
+  xl: 16,
+  full: 9999,
+  pill: 999,
+  button: 8,
+} as const;
+
+export type Radius = typeof radius;

package/src/theme/shadows.ts

@@ -0,0 +1,40 @@
+import { Platform, type ViewStyle } from 'react-native';
+
+export const shadows = {
+  segmentActive: {
+    css: '0 0.125rem 0.25rem 0 #1b1c1d0a',
+    color: '#1b1c1d0a',
+    offsetY: 2,
+    radius: 4,
+  },
+  boxLight: {
+    css: 'rgba(10, 13, 18, 0.05)',
+    color: 'rgba(10, 13, 18, 0.05)',
+    offsetY: 1,
+    radius: 2,
+    opacity: 0.05,
+  },
+  toggleThumb: {
+    css: 'rgba(10, 13, 18, 0.06)',
+    color: 'rgba(10, 13, 18, 0.06)',
+  },
+  toggleThumbMd: {
+    css: 'rgba(10, 13, 18, 0.1)',
+    color: 'rgba(10, 13, 18, 0.1)',
+  },
+} as const;
+
+export function segmentActiveShadow(): ViewStyle {
+  if (Platform.OS === 'android') {
+    return { elevation: 2 };
+  }
+
+  return {
+    shadowColor: '#1b1c1d',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.04,
+    shadowRadius: 4,
+  };
+}
+
+export type Shadows = typeof shadows;

package/src/theme/spacing.ts

@@ -0,0 +1,18 @@
+export const spacing = {
+  none: 0,
+  xs: 2,
+  sm: 4,
+  md: 8,
+  base: 12,
+  lg: 16,
+  xl: 20,
+  '2xl': 24,
+  '3xl': 28,
+  '4xl': 32,
+  '5xl': 36,
+  '6xl': 40,
+  '7xl': 44,
+} as const;
+
+export type Spacing = typeof spacing;
+export type SpacingKey = keyof Spacing;

package/src/theme/typography.ts

@@ -0,0 +1,35 @@
+export const typography = {
+  fontFamily: {
+    base: 'Inter',
+  },
+  fontWeight: {
+    regular: '400' as const,
+    normal: '400' as const,
+    medium: '500' as const,
+    semibold: '600' as const,
+    large: '600' as const,
+    bold: '700' as const,
+  },
+  fontSize: {
+    sm: 14,
+    md: 15,
+    base: 16,
+    lg: 18,
+    xl: 20,
+    '2xl': 24,
+  },
+  lineHeight: {
+    tight: 1.25,
+    normal: 1.5,
+    relaxed: 1.75,
+  },
+  buttonLineHeight: {
+    sm: 20,
+    md: 20,
+    lg: 24,
+    xl: 24,
+    '2xl': 28,
+  },
+} as const;
+
+export type Typography = typeof typography;

package/src/utils/a11y.ts

@@ -0,0 +1,21 @@
+import { Platform } from 'react-native';
+
+type ImportantForAccessibility = 'auto' | 'yes' | 'no' | 'no-hide-descendants';
+
+export function a11yHiddenProps(
+  hidden = true,
+  importantForAccessibility: ImportantForAccessibility = 'no-hide-descendants',
+) {
+  if (!hidden) {
+    return {};
+  }
+
+  if (Platform.OS === 'web') {
+    return { 'aria-hidden': true as const };
+  }
+
+  return {
+    accessibilityElementsHidden: true as const,
+    importantForAccessibility,
+  };
+}

package/svg.d.ts

@@ -0,0 +1,7 @@
+declare module '*.svg' {
+  import type { ComponentType } from 'react';
+  import type { SvgProps } from 'react-native-svg';
+
+  const content: ComponentType<SvgProps>;
+  export default content;
+}