@nobak/design-system 1.0.0

package/lib/styles/motion.js

@@ -0,0 +1,668 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+// src/styles/motion.ts
+// Motion Design System with Semantic Token Architecture
+// Following Adobe Spectrum patterns: Global → Semantic → Fintech → Component
+
+import { Easing } from 'react-native-reanimated';
+
+// ===========================
+// TYPE DEFINITIONS
+// ===========================
+
+// ===========================
+// LAYER 1: GLOBAL MOTION TOKENS
+// Raw motion values - the source of truth
+// ===========================
+
+export var globalMotion = {
+  // Duration scale with clean numeric naming
+  duration: {
+    // Micro-interactions (0-150ms)
+    75: 75,
+    100: 100,
+    130: 130,
+    // Standard interactions (150-300ms)
+    160: 160,
+    200: 200,
+    250: 250,
+    // Emphasized interactions (300-700ms)
+    300: 300,
+    400: 400,
+    500: 500,
+    // Expressive interactions (700ms+)
+    600: 600,
+    700: 700,
+    1000: 1000,
+    1500: 1500,
+    2000: 2000
+  },
+  // Easing curves for different motion characteristics
+  easing: {
+    // Standard CSS easing
+    linear: Easing.linear,
+    ease: Easing.ease,
+    easeIn: Easing["in"](Easing.ease),
+    easeOut: Easing.out(Easing.ease),
+    easeInOut: Easing.inOut(Easing.ease),
+    // Material Design inspired curves
+    accelerate: Easing.bezier(0.4, 0.0, 1, 1),
+    // Elements leaving
+    decelerate: Easing.bezier(0.0, 0.0, 0.2, 1),
+    // Elements entering
+    standard: Easing.bezier(0.4, 0.0, 0.2, 1),
+    // Standard transitions
+    emphasize: Easing.bezier(0.2, 0.0, 0, 1),
+    // Attention-getting
+
+    // Expressive curves with personality
+    gentle: Easing.bezier(0.25, 0.1, 0.25, 1),
+    // Soft, trustworthy
+    confident: Easing.bezier(0.4, 0.0, 0.2, 1),
+    // Decisive, professional
+    bounce: Easing.bezier(0.175, 0.885, 0.32, 1.275),
+    // Celebratory
+    springy: Easing.bezier(0.68, -0.55, 0.265, 1.55),
+    // Attention-grabbing
+    sharp: Easing.bezier(0.77, 0, 0.175, 1),
+    // Firm, immediate
+    smooth: Easing.bezier(0.645, 0.045, 0.355, 1) // Continuous, flowing
+  },
+  // Reduced motion scale for accessibility
+  reducedDuration: {
+    75: 0,
+    100: 0,
+    130: 50,
+    160: 50,
+    200: 100,
+    250: 100,
+    300: 150,
+    400: 150,
+    500: 200,
+    600: 200,
+    700: 250,
+    1000: 300,
+    1500: 400,
+    2000: 500
+  }
+};
+
+// ===========================
+// LAYER 2: SEMANTIC MOTION TOKENS
+// Purpose-based motion assignments
+// ===========================
+
+export var semanticMotion = {
+  // Interactive feedback - immediate response to user actions
+  interactive: {
+    // Hover states
+    hover: {
+      duration: globalMotion.duration[75],
+      easing: globalMotion.easing.standard,
+      delay: 0
+    },
+    // Focus states
+    focus: {
+      duration: globalMotion.duration[100],
+      easing: globalMotion.easing.decelerate,
+      delay: 0
+    },
+    // Active/pressed states
+    press: {
+      duration: globalMotion.duration[130],
+      easing: globalMotion.easing.accelerate,
+      delay: 0
+    },
+    // Selection states
+    select: {
+      duration: globalMotion.duration[160],
+      easing: globalMotion.easing.standard,
+      delay: 0
+    }
+  },
+  // Content transitions - revealing and hiding content
+  content: {
+    // Showing content
+    enter: {
+      duration: globalMotion.duration[200],
+      easing: globalMotion.easing.decelerate,
+      delay: 0
+    },
+    // Hiding content
+    exit: {
+      duration: globalMotion.duration[160],
+      easing: globalMotion.easing.accelerate,
+      delay: 0
+    },
+    // Fading content
+    fade: {
+      duration: globalMotion.duration[250],
+      easing: globalMotion.easing.standard,
+      delay: 0
+    },
+    // Sliding content
+    slide: {
+      duration: globalMotion.duration[300],
+      easing: globalMotion.easing.standard,
+      delay: 0
+    }
+  },
+  // Navigation transitions - moving between views
+  navigation: {
+    // Page transitions
+    page: {
+      duration: globalMotion.duration[300],
+      easing: globalMotion.easing.standard,
+      delay: 0
+    },
+    // Modal presentations
+    modal: {
+      duration: globalMotion.duration[250],
+      easing: globalMotion.easing.decelerate,
+      delay: 0
+    },
+    // Drawer slides
+    drawer: {
+      duration: globalMotion.duration[300],
+      easing: globalMotion.easing.emphasize,
+      delay: 0
+    },
+    // Tab switching
+    tab: {
+      duration: globalMotion.duration[200],
+      easing: globalMotion.easing.standard,
+      delay: 0
+    }
+  },
+  // Feedback animations - system responses
+  feedback: {
+    // Success states
+    success: {
+      duration: globalMotion.duration[400],
+      easing: globalMotion.easing.gentle,
+      delay: 0
+    },
+    // Error states
+    error: {
+      duration: globalMotion.duration[400],
+      easing: globalMotion.easing.sharp,
+      delay: 0
+    },
+    // Warning states
+    warning: {
+      duration: globalMotion.duration[400],
+      easing: globalMotion.easing.springy,
+      delay: 0
+    },
+    // Loading states
+    loading: {
+      duration: globalMotion.duration[1000],
+      easing: globalMotion.easing.smooth,
+      delay: 0
+    }
+  },
+  // Data visualization animations
+  data: {
+    // Chart animations
+    chart: {
+      duration: globalMotion.duration[500],
+      easing: globalMotion.easing.decelerate,
+      delay: 0
+    },
+    // Number changes
+    number: {
+      duration: globalMotion.duration[300],
+      easing: globalMotion.easing.standard,
+      delay: 0
+    },
+    // Progress updates
+    progress: {
+      duration: globalMotion.duration[400],
+      easing: globalMotion.easing.standard,
+      delay: 0
+    }
+  }
+};
+
+// ===========================
+// LAYER 3: FINTECH-SPECIFIC MOTION TOKENS
+// Business domain motion assignments
+// ===========================
+
+export var fintechMotion = {
+  // Transaction-related animations
+  transaction: {
+    // Processing states
+    processing: {
+      duration: globalMotion.duration[1000],
+      easing: globalMotion.easing.smooth,
+      delay: 0
+    },
+    // Transaction completion
+    completed: {
+      duration: globalMotion.duration[600],
+      easing: globalMotion.easing.confident,
+      delay: 0
+    },
+    // Transaction failure
+    failed: {
+      duration: globalMotion.duration[400],
+      easing: globalMotion.easing.sharp,
+      delay: 0
+    },
+    // Pending states
+    pending: {
+      duration: globalMotion.duration[700],
+      easing: globalMotion.easing.gentle,
+      delay: 0
+    }
+  },
+  // Currency and market data animations
+  market: {
+    // Price changes
+    priceChange: {
+      duration: globalMotion.duration[300],
+      easing: globalMotion.easing.confident,
+      delay: 0
+    },
+    // Significant price movements
+    priceMovement: {
+      duration: globalMotion.duration[400],
+      easing: globalMotion.easing.emphasize,
+      delay: 0
+    },
+    // Real-time updates
+    liveUpdate: {
+      duration: globalMotion.duration[200],
+      easing: globalMotion.easing.standard,
+      delay: 0
+    },
+    // Market alerts
+    alert: {
+      duration: globalMotion.duration[500],
+      easing: globalMotion.easing.springy,
+      delay: 0
+    }
+  },
+  // Security and authentication animations
+  security: {
+    // Authentication success
+    authSuccess: {
+      duration: globalMotion.duration[500],
+      easing: globalMotion.easing.confident,
+      delay: 0
+    },
+    // Authentication failure
+    authFailure: {
+      duration: globalMotion.duration[400],
+      easing: globalMotion.easing.sharp,
+      delay: 100 // Slight delay for emphasis
+    },
+    // Biometric prompts
+    biometric: {
+      duration: globalMotion.duration[300],
+      easing: globalMotion.easing.gentle,
+      delay: 0
+    },
+    // Security warnings
+    warning: {
+      duration: globalMotion.duration[600],
+      easing: globalMotion.easing.springy,
+      delay: 0
+    }
+  },
+  // Account and portfolio animations
+  account: {
+    // Balance updates
+    balanceUpdate: {
+      duration: globalMotion.duration[400],
+      easing: globalMotion.easing.confident,
+      delay: 0
+    },
+    // Portfolio changes
+    portfolioChange: {
+      duration: globalMotion.duration[500],
+      easing: globalMotion.easing.standard,
+      delay: 0
+    },
+    // Achievement unlocks
+    achievement: {
+      duration: globalMotion.duration[1000],
+      easing: globalMotion.easing.bounce,
+      delay: 0
+    },
+    // Goal completions
+    goalComplete: {
+      duration: globalMotion.duration[700],
+      easing: globalMotion.easing.bounce,
+      delay: 0
+    }
+  },
+  // Risk and compliance animations
+  risk: {
+    // Risk level changes
+    levelChange: {
+      duration: globalMotion.duration[400],
+      easing: globalMotion.easing.emphasize,
+      delay: 0
+    },
+    // Compliance alerts
+    compliance: {
+      duration: globalMotion.duration[500],
+      easing: globalMotion.easing.sharp,
+      delay: 0
+    },
+    // KYC flow progression
+    kyc: {
+      duration: globalMotion.duration[300],
+      easing: globalMotion.easing.standard,
+      delay: 0
+    }
+  }
+};
+
+// ===========================
+// LAYER 4: COMPONENT-SPECIFIC MOTION TOKENS
+// Motion for specific UI components
+// ===========================
+
+export var componentMotion = {
+  // Button component animations
+  button: {
+    // Standard button press
+    press: {
+      duration: globalMotion.duration[130],
+      easing: globalMotion.easing.accelerate,
+      scale: 0.95,
+      delay: 0
+    },
+    // Primary action button
+    primary: {
+      duration: globalMotion.duration[160],
+      easing: globalMotion.easing.confident,
+      scale: 0.98,
+      delay: 0
+    },
+    // Destructive action button
+    destructive: {
+      duration: globalMotion.duration[200],
+      easing: globalMotion.easing.sharp,
+      scale: 0.96,
+      delay: 50 // Slight delay for caution
+    }
+  },
+  // Input component animations
+  input: {
+    // Focus animation
+    focus: {
+      duration: globalMotion.duration[200],
+      easing: globalMotion.easing.decelerate,
+      delay: 0
+    },
+    // Validation success
+    valid: {
+      duration: globalMotion.duration[300],
+      easing: globalMotion.easing.gentle,
+      delay: 0
+    },
+    // Validation error
+    invalid: {
+      duration: globalMotion.duration[300],
+      easing: globalMotion.easing.springy,
+      delay: 0
+    },
+    // Autocomplete dropdown
+    dropdown: {
+      duration: globalMotion.duration[200],
+      easing: globalMotion.easing.decelerate,
+      delay: 0
+    }
+  },
+  // Card component animations
+  card: {
+    // Card hover
+    hover: {
+      duration: globalMotion.duration[200],
+      easing: globalMotion.easing.standard,
+      scale: 1.02,
+      delay: 0
+    },
+    // Card selection
+    select: {
+      duration: globalMotion.duration[250],
+      easing: globalMotion.easing.confident,
+      scale: 1.01,
+      delay: 0
+    },
+    // Card flip (for reveals)
+    flip: {
+      duration: globalMotion.duration[500],
+      easing: globalMotion.easing.standard,
+      delay: 0
+    }
+  },
+  // Modal component animations
+  modal: {
+    // Modal entrance
+    enter: {
+      duration: globalMotion.duration[300],
+      easing: globalMotion.easing.decelerate,
+      scale: 0.95,
+      delay: 0
+    },
+    // Modal exit
+    exit: {
+      duration: globalMotion.duration[200],
+      easing: globalMotion.easing.accelerate,
+      scale: 0.95,
+      delay: 0
+    },
+    // Backdrop animation
+    backdrop: {
+      duration: globalMotion.duration[250],
+      easing: globalMotion.easing.standard,
+      delay: 0
+    }
+  },
+  // Toast/notification animations
+  toast: {
+    // Toast entrance
+    enter: {
+      duration: globalMotion.duration[300],
+      easing: globalMotion.easing.decelerate,
+      translateY: -100,
+      delay: 0
+    },
+    // Toast exit
+    exit: {
+      duration: globalMotion.duration[200],
+      easing: globalMotion.easing.accelerate,
+      translateY: -100,
+      delay: 0
+    },
+    // Auto-dismiss timing
+    autoDismiss: {
+      duration: globalMotion.duration[500],
+      easing: globalMotion.easing.standard,
+      delay: 4000 // 4 second delay before auto-dismiss starts
+    }
+  },
+  // Loading spinner animations
+  spinner: {
+    // Standard spinner
+    rotate: {
+      duration: globalMotion.duration[1000],
+      easing: globalMotion.easing.linear,
+      delay: 0
+    },
+    // Pulsing loader
+    pulse: {
+      duration: globalMotion.duration[1500],
+      easing: globalMotion.easing.smooth,
+      delay: 0
+    },
+    // Progress bar
+    progress: {
+      duration: globalMotion.duration[300],
+      easing: globalMotion.easing.standard,
+      delay: 0
+    }
+  }
+};
+
+// ===========================
+// MOTION UTILITIES
+// ===========================
+
+export var motionUtils = {
+  /**
+   * Get motion values with reduced motion support
+   */
+  getMotionConfig: function getMotionConfig(motionToken) {
+    var respectReducedMotion = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    if (respectReducedMotion && shouldReduceMotion()) {
+      return _objectSpread(_objectSpread({}, motionToken), {}, {
+        duration: globalMotion.reducedDuration[motionToken.duration] || motionToken.duration,
+        easing: globalMotion.easing.linear
+      });
+    }
+    return motionToken;
+  },
+  /**
+   * Create motion configuration from individual tokens
+   */
+  createMotionConfig: function createMotionConfig(options) {
+    return _objectSpread(_objectSpread(_objectSpread({
+      duration: globalMotion.duration[options.duration],
+      easing: globalMotion.easing[options.easing],
+      delay: options.delay || 0
+    }, options.scale && {
+      scale: options.scale
+    }), options.translateX && {
+      translateX: options.translateX
+    }), options.translateY && {
+      translateY: options.translateY
+    });
+  },
+  /**
+   * Get staggered animation delays for lists
+   */
+  getStaggeredDelay: function getStaggeredDelay(index) {
+    var baseDelay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 50;
+    var maxDelay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 300;
+    return Math.min(index * baseDelay, maxDelay);
+  },
+  /**
+   * Convert to CSS-compatible strings
+   */
+  toCSSStrings: function toCSSStrings(motionToken) {
+    return {
+      duration: "".concat(motionToken.duration, "ms"),
+      easing: convertEasingToCSSString(motionToken.easing),
+      delay: "".concat(motionToken.delay || 0, "ms")
+    };
+  },
+  /**
+   * Get motion based on urgency level
+   */
+  getUrgencyMotion: function getUrgencyMotion(baseMotion, urgency) {
+    var urgencyMultipliers = {
+      low: {
+        duration: 1.0,
+        delay: 0
+      },
+      medium: {
+        duration: 0.8,
+        delay: 0
+      },
+      high: {
+        duration: 0.6,
+        delay: 100
+      },
+      critical: {
+        duration: 0.4,
+        delay: 200
+      }
+    };
+    var multiplier = urgencyMultipliers[urgency];
+    return _objectSpread(_objectSpread({}, baseMotion), {}, {
+      duration: Math.round(baseMotion.duration * multiplier.duration),
+      delay: (baseMotion.delay || 0) + multiplier.delay,
+      easing: urgency === 'critical' ? globalMotion.easing.sharp : baseMotion.easing
+    });
+  },
+  /**
+   * Get motion based on data importance
+   */
+  getImportanceMotion: function getImportanceMotion(baseMotion, importance) {
+    var importanceAdjustments = {
+      primary: {
+        duration: 1.2,
+        easing: globalMotion.easing.emphasize
+      },
+      secondary: {
+        duration: 1.0,
+        easing: globalMotion.easing.standard
+      },
+      tertiary: {
+        duration: 0.8,
+        easing: globalMotion.easing.gentle
+      }
+    };
+    var adjustment = importanceAdjustments[importance];
+    return _objectSpread(_objectSpread({}, baseMotion), {}, {
+      duration: Math.round(baseMotion.duration * adjustment.duration),
+      easing: adjustment.easing
+    });
+  }
+};
+
+// ===========================
+// HELPER FUNCTIONS
+// ===========================
+
+/**
+ * Check if user prefers reduced motion
+ */
+var shouldReduceMotion = function shouldReduceMotion() {
+  // Implementation depends on platform
+  // For React Native: Use AccessibilityInfo.isReduceMotionEnabled()
+  // For web: Use window.matchMedia('(prefers-reduced-motion: reduce)').matches
+  return false; // Default implementation
+};
+
+/**
+ * Convert React Native easing to CSS string
+ */
+var convertEasingToCSSString = function convertEasingToCSSString(easing) {
+  // This would need platform-specific implementation
+  // For now, return a default
+  return 'cubic-bezier(0.4, 0.0, 0.2, 1)';
+};
+
+// ===========================
+// TYPE EXPORTS
+// ===========================
+
+// Core motion token types
+
+// Semantic category types
+
+// Backward compatibility aliases
+
+// ===========================
+// MAIN EXPORT
+// ===========================
+
+export var motion = {
+  global: globalMotion,
+  semantic: semanticMotion,
+  fintech: fintechMotion,
+  component: componentMotion,
+  utils: motionUtils
+};
+export default motion;

package/lib/styles/opacity.js

@@ -0,0 +1,10 @@
+/**
+ * Opacity scale with semantic naming
+ */
+export var opacity = {
+  transparent: 0,
+  disabled: 0.4,
+  muted: 0.6,
+  subtle: 0.8,
+  opaque: 1
+};

package/lib/styles/radius.js

@@ -0,0 +1,11 @@
+/**
+ * Border radius scale with semantic naming
+ */
+export var radius = {
+  none: 0,
+  small: 4,
+  medium: 8,
+  large: 12,
+  extraLarge: 16,
+  full: 999
+};