react-native-ui-lib 8.3.4 → 8.4.0

package/src/index.js

@@ -99,6 +99,15 @@ var _exportNames = {
   FloatingButton: true,
   FloatingButtonProps: true,
   FloatingButtonLayouts: true,
+  ScreenFooter: true,
+  ScreenFooterProps: true,
+  ScreenFooterLayouts: true,
+  ScreenFooterBackgrounds: true,
+  FooterAlignment: true,
+  HorizontalItemsDistribution: true,
+  ItemsFit: true,
+  KeyboardBehavior: true,
+  ScreenFooterShadow: true,
   Gradient: true,
   GradientProps: true,
   GradientTypes: true,
@@ -699,6 +708,12 @@ Object.defineProperty(exports, "FloatingButtonProps", {
     return _floatingButton().FloatingButtonProps;
   }
 });
+Object.defineProperty(exports, "FooterAlignment", {
+  enumerable: true,
+  get: function () {
+    return _screenFooter().FooterAlignment;
+  }
+});
 Object.defineProperty(exports, "ForwardRefInjectedProps", {
   enumerable: true,
   get: function () {
@@ -790,6 +805,12 @@ Object.defineProperty(exports, "HintProps", {
   }
 });
 exports.Hooks = void 0;
+Object.defineProperty(exports, "HorizontalItemsDistribution", {
+  enumerable: true,
+  get: function () {
+    return _screenFooter().HorizontalItemsDistribution;
+  }
+});
 Object.defineProperty(exports, "Icon", {
   enumerable: true,
   get: function () {
@@ -815,6 +836,12 @@ Object.defineProperty(exports, "ImageProps", {
   }
 });
 exports.Incubator = void 0;
+Object.defineProperty(exports, "ItemsFit", {
+  enumerable: true,
+  get: function () {
+    return _screenFooter().ItemsFit;
+  }
+});
 Object.defineProperty(exports, "KeyboardAwareFlatList", {
   enumerable: true,
   get: function () {
@@ -827,6 +854,12 @@ Object.defineProperty(exports, "KeyboardAwareScrollView", {
     return _KeyboardAwareScrollView().default;
   }
 });
+Object.defineProperty(exports, "KeyboardBehavior", {
+  enumerable: true,
+  get: function () {
+    return _screenFooter().KeyboardBehavior;
+  }
+});
 Object.defineProperty(exports, "ListItem", {
   enumerable: true,
   get: function () {
@@ -1146,6 +1179,36 @@ Object.defineProperty(exports, "RenderCustomModalProps", {
     return _picker().RenderCustomModalProps;
   }
 });
+Object.defineProperty(exports, "ScreenFooter", {
+  enumerable: true,
+  get: function () {
+    return _screenFooter().default;
+  }
+});
+Object.defineProperty(exports, "ScreenFooterBackgrounds", {
+  enumerable: true,
+  get: function () {
+    return _screenFooter().ScreenFooterBackgrounds;
+  }
+});
+Object.defineProperty(exports, "ScreenFooterLayouts", {
+  enumerable: true,
+  get: function () {
+    return _screenFooter().ScreenFooterLayouts;
+  }
+});
+Object.defineProperty(exports, "ScreenFooterProps", {
+  enumerable: true,
+  get: function () {
+    return _screenFooter().ScreenFooterProps;
+  }
+});
+Object.defineProperty(exports, "ScreenFooterShadow", {
+  enumerable: true,
+  get: function () {
+    return _screenFooter().ScreenFooterShadow;
+  }
+});
 Object.defineProperty(exports, "ScrollBar", {
   enumerable: true,
   get: function () {
@@ -1906,6 +1969,13 @@ function _floatingButton() {
   };
   return data;
 }
+function _screenFooter() {
+  const data = _interopRequireWildcard(require("./components/screenFooter"));
+  _screenFooter = function () {
+    return data;
+  };
+  return data;
+}
 function _gradient() {
   const data = _interopRequireWildcard(require("./components/gradient"));
   _gradient = function () {

package/src/style/colors.d.ts

@@ -19,9 +19,15 @@ export type GetColorByHexOptions = {
 export type GeneratePaletteOptions = {
     /** Whether to adjust the lightness of very light colors (generating darker palette) */
     adjustLightness?: boolean;
-    /** Whether to adjust the saturation of colors with high lightness and saturation (unifying saturation level throughout palette) */
+    /** Whether to apply the saturation curve to unify saturation levels throughout the palette */
     adjustSaturation?: boolean;
-    /** Array of saturation adjustments to apply on the color's tints array (from darkest to lightest).
+    /** Custom percentage-based saturation curve indexed by distance from the base color.
+     * Overrides the default curve when provided. Each value represents the fraction of the base
+     * color's saturation to apply at that distance (e.g. [1.0, 0.89, 0.77, ...]).
+     * The 'adjustSaturation' option must be true */
+    saturationCurve?: number[];
+    /** Array of additive saturation adjustments to apply per-index on the palette (from darkest to lightest).
+     * When provided, uses legacy per-index saturation logic instead of the default curve.
      * The 'adjustSaturation' option must be true */
     saturationLevels?: number[];
     /** Whether to add two extra dark colors usually used for dark mode (generating a palette of 10 instead of 8 colors) */
@@ -91,7 +97,6 @@ export declare class Colors {
         adjustSaturation: boolean;
         addDarkestTints: boolean;
         avoidReverseOnDark: boolean;
-        saturationLevels: undefined;
     };
     generateColorPalette: ((color: string, options?: GeneratePaletteOptions) => string[]) & _.MemoizedFunction;
     private generateDesignTokens;
@@ -144,7 +149,7 @@ declare const colorObject: Colors & {
     green70: string;
     green80: string;
     yellow1: string;
-    yellow5: string; /** Whether to adjust the saturation of colors with high lightness and saturation (unifying saturation level throughout palette) */
+    yellow5: string;
     yellow10: string;
     yellow20: string;
     yellow30: string;
@@ -212,7 +217,7 @@ declare const colorObject: Colors & {
     $backgroundGeneralHeavy: string;
     $backgroundGeneralMedium: string;
     $backgroundGeneralLight: string;
-    $backgroundSuccessHeavy: string; /** Whether to adjust the lightness of very light colors (generating darker palette) */
+    $backgroundSuccessHeavy: string;
     $backgroundSuccessLight: string;
     $backgroundWarningHeavy: string;
     $backgroundWarningLight: string;
@@ -258,16 +263,10 @@ declare const colorObject: Colors & {
     $outlineNeutralHeavy: string;
     $outlinePrimary: string;
     $outlinePrimaryMedium: string;
-    $outlineGeneral: string; /**
-     * Get app's current color scheme
-     */
+    $outlineGeneral: string;
     $outlineWarning: string;
     $outlineDanger: string;
-    $outlineInverted: string; /**
-     * Set color scheme for app
-     * arguments:
-     * scheme - color scheme e.g light/dark/default
-     */
+    $outlineInverted: string;
     $black: string;
     $white: string;
 };

package/src/style/colors.js

@@ -1,4 +1,3 @@
-import _map from "lodash/map";
 import _clamp from "lodash/clamp";
 import _toLower from "lodash/toLower";
 import _toUpper from "lodash/toUpper";
@@ -20,6 +19,9 @@ import DesignTokensDM from "./designTokensDM";
 import ColorName from "./colorName";
 import Scheme from "./scheme";
 import LogService from "../services/LogService";
+const SATURATION_CURVE = [1.0, 0.89, 0.77, 0.65, 0.55, 0.47, 0.42, 0.38, 0.34, 0.30];
+const SATURATION_THRESHOLD = 50;
+const SATURATION_FLOOR = 20;
 export class Colors {
   shouldSupportDarkMode = false;
   constructor() {
@@ -229,15 +231,14 @@ export class Colors {
     const start = options?.addDarkestTints && colorLightness > 10 ? -size : 0;
     const end = options?.addDarkestTints && colorLightness > 10 ? undefined : size;
     const sliced = tints.slice(start, end);
-    const adjusted = options?.adjustSaturation && adjustSaturation(sliced, color, options?.saturationLevels);
+    const adjusted = options?.adjustSaturation && adjustSaturation(sliced, color, options);
     return adjusted || sliced;
   }, generatePaletteCacheResolver);
   defaultPaletteOptions = {
     adjustLightness: true,
     adjustSaturation: true,
     addDarkestTints: false,
-    avoidReverseOnDark: false,
-    saturationLevels: undefined
+    avoidReverseOnDark: false
   };
   generateColorPalette = _memoize((color, options) => {
     const _options = {
@@ -308,46 +309,46 @@ export class Colors {
 function colorStringValue(color) {
   return color?.toString();
 }
-function adjustAllSaturations(colors, baseColor, levels) {
-  const array = [];
-  _forEach(colors, (c, index) => {
-    if (c === baseColor) {
-      array[index] = baseColor;
-    } else {
-      const hsl = Color(c).hsl();
-      const saturation = hsl.color[1];
-      const level = levels[index];
-      if (level !== undefined) {
-        const saturationLevel = saturation + level;
-        const clampedLevel = _clamp(saturationLevel, 0, 100);
-        const adjusted = setSaturation(c, clampedLevel);
-        array[index] = adjusted;
-      }
+function adjustSaturation(colors, baseColor, options) {
+  if (options?.saturationLevels) {
+    return adjustSaturationByLevels(colors, baseColor, options.saturationLevels);
+  }
+  return adjustSaturationWithCurve(colors, baseColor, options?.saturationCurve);
+}
+function adjustSaturationByLevels(colors, baseColor, levels) {
+  return colors.map((color, index) => {
+    if (color === baseColor) {
+      return baseColor;
     }
+    const level = levels[index];
+    if (level === undefined) {
+      return color;
+    }
+    const hsl = Color(color).hsl();
+    const newSaturation = _clamp(hsl.color[1] + level, 0, 100);
+    return Color.hsl(hsl.color[0], newSaturation, hsl.color[2]).hex();
   });
-  return array;
 }
-function adjustSaturation(colors, baseColor, levels) {
-  if (levels) {
-    return adjustAllSaturations(colors, baseColor, levels);
+function adjustSaturationWithCurve(colors, baseColor, customCurve) {
+  const baseSaturation = Color(baseColor).hsl().color[1];
+  if (baseSaturation <= SATURATION_THRESHOLD) {
+    return null;
   }
-  let array;
-  const lightnessLevel = 80;
-  const saturationLevel = 60;
-  const hsl = Color(baseColor).hsl();
-  const lightness = Math.round(hsl.color[2]);
-  if (lightness > lightnessLevel) {
-    const saturation = Math.round(hsl.color[1]);
-    if (saturation > saturationLevel) {
-      array = _map(colors, e => e !== baseColor ? setSaturation(e, saturationLevel) : e);
-    }
+  const baseIndex = colors.indexOf(baseColor.toUpperCase());
+  if (baseIndex === -1) {
+    return null;
   }
-  return array;
-}
-function setSaturation(color, saturation) {
-  const hsl = Color(color).hsl();
-  hsl.color[1] = saturation;
-  return hsl.hex();
+  const curve = customCurve ?? SATURATION_CURVE;
+  return colors.map((hex, i) => {
+    if (i === baseIndex) {
+      return hex;
+    }
+    const hsl = Color(hex).hsl();
+    const distance = Math.abs(i - baseIndex);
+    const percentage = curve[Math.min(distance, curve.length - 1)];
+    const newSaturation = Math.max(SATURATION_FLOOR, Math.round(baseSaturation * percentage));
+    return Color.hsl(hsl.color[0], newSaturation, hsl.color[2]).hex();
+  });
 }
 function generateColorTint(color, tintLevel) {
   const hsl = Color(color).hsl();