react-native-ui-lib 8.3.4 → 8.4.0-snapshot.7827

package/lib/android/build.gradle

@@ -1,10 +1,10 @@
 apply plugin: 'com.android.library'
 
 project.ext {
-    buildToolsVersion = rootProject.ext.has("buildToolsVersion") ? rootProject.ext.buildToolsVersion : '35.0.0'
+    buildToolsVersion = rootProject.ext.has("buildToolsVersion") ? rootProject.ext.buildToolsVersion : '36.0.0'
     minSdkVersion = rootProject.ext.has("minSdkVersion") ? rootProject.ext.minSdkVersion : 24
-    compileSdkVersion = rootProject.ext.has("compileSdkVersion") ? rootProject.ext.compileSdkVersion : 35
-    targetSdkVersion = rootProject.ext.has("targetSdkVersion") ? rootProject.ext.targetSdkVersion : 34
+    compileSdkVersion = rootProject.ext.has("compileSdkVersion") ? rootProject.ext.compileSdkVersion : 36
+    targetSdkVersion = rootProject.ext.has("targetSdkVersion") ? rootProject.ext.targetSdkVersion : 36
     supportLibVersion = rootProject.ext.has("supportLibVersion") ? rootProject.ext.supportLibVersion  : '28.0.0'
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "8.3.4",
+  "version": "8.4.0-snapshot.7827",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",
@@ -112,7 +112,6 @@
     "react-native": ">=0.77.3",
     "react-native-gesture-handler": ">=2.24.0",
     "react-native-reanimated": ">=3.17.5",
-    "react-native-safe-area-context": ">=5.6.2",
     "uilib-native": "^5.0.1"
   },
   "jest": {

package/screenFooter.d.ts

@@ -0,0 +1,2 @@
+import {ScreenFooter} from './src';
+export default ScreenFooter;

package/screenFooter.js

@@ -0,0 +1 @@
+module.exports = require('./src/components/screenFooter').default;

package/scripts/release/prReleaseNotesCommon.js

@@ -9,6 +9,7 @@ const BRANCH_CATEGORIES = [
   {name: 'fixes', branch: 'fix/', title: ':wrench: Fixes'},
   {name: 'infra', branch: 'infra/', title: ':gear: Maintenance & Infra'}
 ];
+const SILENT_PRS = ['none', 'n/a', 'na'];
 
 function getBranchPrefixes() {
   return BRANCH_CATEGORIES.map(category => category.branch);
@@ -95,7 +96,7 @@ function isSilent(pr) {
     return true;
   } else {
     const changelog = pr.info.changelog.toLowerCase();
-    if (changelog === 'none' || changelog === 'n/a') {
+    if (SILENT_PRS.includes(changelog)) {
       return true;
     }
   }

package/src/assets/internal/images/index.js

@@ -1,4 +1,7 @@
 export const images = {
+  get bottomGradient() {
+    return require('./bottomGradient.png');
+  },
   get gradient() {
     return require('./gradient.png');
   },

package/src/components/screenFooter/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ScreenFooterProps, ScreenFooterLayouts, ScreenFooterBackgrounds, FooterAlignment, HorizontalItemsDistribution, ItemsFit, KeyboardBehavior, ScreenFooterShadow } from './types';
+export { ScreenFooterProps, ScreenFooterLayouts, ScreenFooterBackgrounds, FooterAlignment, HorizontalItemsDistribution, ItemsFit, KeyboardBehavior, ScreenFooterShadow };
+declare const _default: React.ForwardRefExoticComponent<ScreenFooterProps & React.RefAttributes<any>> & {
+    (props: ScreenFooterProps): React.JSX.Element;
+    displayName: string;
+};
+export default _default;

package/src/components/screenFooter/index.js

@@ -0,0 +1,211 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { StyleSheet } from 'react-native';
+import Animated, { useAnimatedKeyboard, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import { Keyboard } from 'uilib-native';
+import { SafeAreaContextPackage } from "../../optionalDependencies";
+import View from "../view";
+import Image from "../image";
+import Assets from "../../assets";
+import { Colors, Shadows, Spacings } from "../../style";
+import { asBaseComponent, Constants } from "../../commons/new";
+import { useKeyboardHeight } from "../../hooks";
+import { ScreenFooterProps, ScreenFooterLayouts, ScreenFooterBackgrounds, FooterAlignment, HorizontalItemsDistribution, ItemsFit, KeyboardBehavior, ScreenFooterShadow } from "./types";
+export { ScreenFooterProps, ScreenFooterLayouts, ScreenFooterBackgrounds, FooterAlignment, HorizontalItemsDistribution, ItemsFit, KeyboardBehavior, ScreenFooterShadow };
+const ScreenFooter = props => {
+  const {
+    testID,
+    layout,
+    alignment,
+    horizontalAlignment,
+    backgroundType,
+    children,
+    keyboardBehavior = KeyboardBehavior.STICKY,
+    itemsFit,
+    itemWidth,
+    horizontalItemsDistribution: distribution,
+    visible = true,
+    animationDuration = 200,
+    shadow = ScreenFooterShadow.SH20,
+    hideDivider = false
+  } = props;
+  const keyboard = useAnimatedKeyboard();
+  const [height, setHeight] = useState(0);
+  const visibilityTranslateY = useSharedValue(0);
+
+  // Update visibility translation when visible or height changes
+  useEffect(() => {
+    visibilityTranslateY.value = withTiming(visible ? 0 : height, {
+      duration: animationDuration
+    });
+  }, [visible, height, animationDuration, visibilityTranslateY]);
+
+  // Animated style for STICKY behavior (counters Android system offset + visibility)
+  const stickyAnimatedStyle = useAnimatedStyle(() => {
+    const counterSystemOffset = Constants.isAndroid ? keyboard.height.value : 0;
+    return {
+      transform: [{
+        translateY: counterSystemOffset + visibilityTranslateY.value
+      }]
+    };
+  });
+
+  // Animated style for HOISTED behavior (visibility only, keyboard handled by KeyboardAccessoryView)
+  const hoistedAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{
+        translateY: visibilityTranslateY.value
+      }]
+    };
+  });
+  const onLayout = useCallback(event => {
+    setHeight(event.nativeEvent.layout.height);
+  }, []);
+  const isSolid = backgroundType === ScreenFooterBackgrounds.SOLID;
+  const isFading = backgroundType === ScreenFooterBackgrounds.FADING;
+  const isHorizontal = layout === ScreenFooterLayouts.HORIZONTAL;
+  const childrenCount = React.Children.count(children);
+  const justifyContent = useMemo(() => {
+    if (isHorizontal) {
+      if (distribution === HorizontalItemsDistribution.SPREAD) {
+        return childrenCount === 1 ? 'center' : 'space-between';
+      }
+      switch (horizontalAlignment) {
+        case FooterAlignment.START:
+          return 'flex-start';
+        case FooterAlignment.END:
+          return 'flex-end';
+        default:
+          return 'center';
+      }
+    }
+    return 'flex-start';
+  }, [isHorizontal, distribution, horizontalAlignment, childrenCount]);
+  const alignItems = useMemo(() => {
+    if (layout === ScreenFooterLayouts.VERTICAL) {
+      if (itemsFit === ItemsFit.STRETCH) {
+        return 'stretch';
+      }
+    }
+    switch (alignment) {
+      case FooterAlignment.START:
+        return 'flex-start';
+      case FooterAlignment.END:
+        return 'flex-end';
+      default:
+        return 'center';
+    }
+  }, [layout, itemsFit, alignment]);
+  const useSafeAreaInsets = SafeAreaContextPackage?.useSafeAreaInsets ?? (() => Constants.getSafeAreaInsets());
+  const insets = useSafeAreaInsets();
+  const keyboardHeight = useKeyboardHeight();
+  const isKeyboardVisible = keyboardHeight > 0;
+  const contentContainerStyle = useMemo(() => {
+    const style = [styles.contentContainer, layout === ScreenFooterLayouts.HORIZONTAL ? styles.horizontalContainer : styles.verticalContainer, {
+      alignItems,
+      justifyContent
+    }];
+    if (!isKeyboardVisible) {
+      style.push({
+        paddingBottom: insets.bottom
+      });
+    }
+    if (isSolid) {
+      const shadowStyle = Shadows[shadow]?.top;
+      const backgroundElevation = shadowStyle?.elevation || 0;
+      // When the background has a shadow (elevation on Android), it might render on top of the content
+      style.push({
+        elevation: backgroundElevation + 1
+      });
+    }
+    return style;
+  }, [layout, alignItems, justifyContent, insets.bottom, isSolid, shadow, isKeyboardVisible]);
+  const solidBackgroundStyle = useMemo(() => {
+    if (!isSolid) {
+      return undefined;
+    }
+    const shadowStyle = Shadows[shadow]?.top;
+    const dividerStyle = hideDivider ? undefined : {
+      borderTopWidth: 1,
+      borderColor: Colors.$outlineDefault
+    };
+    return [shadowStyle, dividerStyle];
+  }, [isSolid, shadow, hideDivider]);
+  const renderBackground = useCallback(() => {
+    if (isSolid) {
+      return <View testID={testID ? `${testID}.solidBackground` : undefined} absF bg-$backgroundElevated style={solidBackgroundStyle} pointerEvents="none" />;
+    }
+    if (isFading) {
+      return <View testID={testID ? `${testID}.fadingBackground` : undefined} absF pointerEvents="none">
+          <Image source={Assets.internal.images.bottomGradient} style={styles.background} resizeMode="stretch" tintColor={Colors.$backgroundDefault} />
+        </View>;
+    }
+    return null;
+  }, [testID, isSolid, isFading, solidBackgroundStyle]);
+  const renderChild = useCallback((child, index) => {
+    if (itemsFit === ItemsFit.FIXED && itemWidth) {
+      const fixedStyle = isHorizontal ? {
+        width: itemWidth,
+        flexShrink: 1,
+        overflow: 'hidden',
+        flexDirection: 'row',
+        justifyContent: 'center'
+      } : {
+        width: itemWidth,
+        maxWidth: '100%'
+      };
+      return <View key={index} style={fixedStyle}>
+          {child}
+        </View>;
+    }
+    if (isHorizontal && React.isValidElement(child) && itemsFit === ItemsFit.STRETCH) {
+      return <View flex row centerH key={index}>
+          {child}
+        </View>;
+    }
+    return child;
+  }, [itemsFit, itemWidth, isHorizontal]);
+  const childrenArray = React.Children.toArray(children).slice(0, 3).map(renderChild);
+  const renderFooterContent = useCallback(() => {
+    return <>
+        {renderBackground()}
+        <View testID={testID ? `${testID}.content` : undefined} style={contentContainerStyle}>
+          {childrenArray}
+        </View>
+      </>;
+  }, [renderBackground, testID, contentContainerStyle, childrenArray]);
+  if (keyboardBehavior === KeyboardBehavior.HOISTED) {
+    return <Animated.View style={[styles.container, hoistedAnimatedStyle]} pointerEvents={visible ? 'box-none' : 'none'}>
+        <Keyboard.KeyboardAccessoryView renderContent={renderFooterContent} kbInputRef={undefined} scrollBehavior={Keyboard.KeyboardAccessoryView.scrollBehaviors.FIXED_OFFSET} useSafeArea={false} manageScrollView={false} revealKeyboardInteractive onHeightChanged={setHeight} />
+      </Animated.View>;
+  }
+  return <Animated.View testID={testID} onLayout={onLayout} style={[styles.container, stickyAnimatedStyle]}>
+      {renderFooterContent()}
+    </Animated.View>;
+};
+ScreenFooter.displayName = 'ScreenFooter';
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0
+  },
+  contentContainer: {
+    paddingTop: Spacings.s4,
+    paddingHorizontal: Spacings.s5,
+    paddingBottom: Spacings.s5
+  },
+  horizontalContainer: {
+    flexDirection: 'row',
+    gap: Spacings.s5
+  },
+  verticalContainer: {
+    flexDirection: 'column',
+    gap: Spacings.s3
+  },
+  background: {
+    width: '100%',
+    height: '100%'
+  }
+});
+export default asBaseComponent(ScreenFooter);

package/src/components/screenFooter/screenFooter.api.json

@@ -0,0 +1,262 @@
+{
+  "name": "ScreenFooter",
+  "category": "layout",
+  "description": "A flexible footer component that stays at the bottom of the screen with support for various layouts, backgrounds, and keyboard behaviors",
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ScreenFooterScreen.tsx",
+  "images": [],
+  "props": [
+    {
+      "name": "backgroundType",
+      "type": "ScreenFooterBackgrounds",
+      "description": "The background style of the footer [fading, solid, transparent]",
+      "default": "'solid'"
+    },
+    {
+      "name": "layout",
+      "type": "ScreenFooterLayouts",
+      "description": "The layout direction of footer items [horizontal, vertical]",
+      "default": "'vertical'"
+    },
+    {
+      "name": "alignment",
+      "type": "FooterAlignment",
+      "description": "Cross-axis alignment [start, center, end]. In vertical layout: controls horizontal position. In horizontal layout: controls vertical position",
+      "default": "'center'"
+    },
+    {
+      "name": "horizontalAlignment",
+      "type": "FooterAlignment",
+      "description": "Main-axis alignment for horizontal layout only when distribution is STACK [start, center, end]",
+      "default": "'center'"
+    },
+    {
+      "name": "horizontalItemsDistribution",
+      "type": "HorizontalItemsDistribution",
+      "description": "Distribution of items in horizontal layout [stack, spread]",
+      "default": "'spread'"
+    },
+    {
+      "name": "itemsFit",
+      "type": "ItemsFit",
+      "description": "How items should fit in vertical layout [fit, fixed, stretch]",
+      "default": "'fit'"
+    },
+    {
+      "name": "keyboardBehavior",
+      "type": "KeyboardBehavior",
+      "description": "The footer's keyboard behavior [sticky, hoisted]. Sticky: stays at bottom when keyboard opens. Hoisted: pushed up when keyboard opens",
+      "default": "'sticky'"
+    },
+    {
+      "name": "itemWidth",
+      "type": "DimensionValue",
+      "description": "Fixed width for all items (used with ItemsFit.FIXED)"
+    },
+    {
+      "name": "visible",
+      "type": "boolean",
+      "description": "If true, the footer is visible. If false, it slides down",
+      "default": "true"
+    },
+    {
+      "name": "animationDuration",
+      "type": "number",
+      "description": "Duration of the show/hide animation in ms",
+      "default": "200"
+    },
+    {
+      "name": "useSafeArea",
+      "type": "boolean",
+      "description": "If true, the footer will respect the safe area (add bottom padding)",
+      "default": "true"
+    },
+    {
+      "name": "shadow",
+      "type": "ScreenFooterShadow",
+      "description": "Shadow preset for solid background [sh10, sh20, sh30]. Only applies when backgroundType is 'solid'",
+      "default": "'sh20'"
+    },
+    {
+      "name": "hideDivider",
+      "type": "boolean",
+      "description": "If true, hides the top divider for solid background. Only applies when backgroundType is 'solid'",
+      "default": "false"
+    }
+  ],
+  "snippet": [
+    "<View flex bg-$backgroundDefault>",
+    "  <ScrollView>",
+    "    {/* Screen content */}",
+    "  </ScrollView>",
+    "  <ScreenFooter>",
+    "    <Button label=\"Primary Action\" />",
+    "    <Button label=\"Secondary Action\" link />",
+    "  </ScreenFooter>",
+    "</View>"
+  ],
+  "docs": {
+    "hero": {
+      "title": "ScreenFooter",
+      "description": "The ScreenFooter component provides a flexible footer that stays at the bottom of the screen with support for various layouts, backgrounds, and keyboard behaviors. It's ideal for forms, checkout flows, and any screen requiring persistent bottom actions.",
+      "type": "hero",
+      "layout": "horizontal",
+      "content": [
+        {
+          "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ScreenFooter/screenFooter_overview_preview.png"
+        }
+      ]
+    },
+    "tabs": [
+      {
+        "title": "Overview",
+        "sections": [
+          {
+            "type": "section",
+            "title": "Use Examples",
+            "description": "The ScreenFooter can be used in various scenarios depending on the content and action hierarchy. Each layout type serves different use cases and provides different visual emphasis.",
+            "content": []
+          },
+          {
+            "type": "table",
+            "columns": [
+              "Layout Type",
+              "Use Case",
+              "Example"
+            ],
+            "items": [
+              {
+                "title": "Horizontal - Spread",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ScreenFooter/screenFooter_horizontal_spread.png"
+                  }
+                ],
+                "description": "Best for two equally important actions positioned at opposite ends. Common in navigation flows or when presenting contrasting choices."
+              },
+              {
+                "title": "Horizontal - Stacked Center",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ScreenFooter/screenFooter_horizontal_stacked.png"
+                  }
+                ],
+                "description": "Ideal for primary and secondary actions of similar importance that should be grouped together in the center."
+              },
+              {
+                "title": "Horizontal - With Content",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ScreenFooter/screenFooter_horizontal_content.png"
+                  }
+                ],
+                "description": "Perfect for checkout or summary screens where you need to display information alongside actions. The footer can accommodate text, prices, or other content elements."
+              }
+            ],
+            "title": "Horizontal Layouts",
+            "description": "markdown: Horizontal layouts are best when screen content is abundant and vertical space is limited. They keep actions compact while maintaining good reachability. Use the `layout` prop set to `ScreenFooterLayouts.HORIZONTAL`."
+          },
+          {
+            "type": "table",
+            "columns": [
+              "Layout Type",
+              "Use Case",
+              "Example"
+            ],
+            "items": [
+              {
+                "title": "Vertical - Fit",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ScreenFooter/screenFooter_vertical_fit.png"
+                  }
+                ],
+                "description": "Buttons are sized based on their content. Best for clear action hierarchy with a prominent primary button and a subtle secondary link button."
+              },
+              {
+                "title": "Vertical - Stretched",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ScreenFooter/screenFooter_vertical_stretched.png"
+                  }
+                ],
+                "description": "Full-width buttons provide maximum tap area and visual prominence. Recommended for forms and high-priority actions where accessibility is crucial."
+              }
+            ],
+            "title": "Vertical Layouts",
+            "description": "markdown: Vertical layouts provide better action prominence and are recommended when a single primary action needs emphasis, or when content can be obscured. Use `itemsFit` prop with `ItemsFit.STRETCH` for full-width buttons or `ItemsFit.FIT` for content-sized buttons."
+          },
+          {
+            "type": "table",
+            "columns": [
+              "Background Type",
+              "Visual",
+              "When to Use"
+            ],
+            "items": [
+              {
+                "title": "Solid",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ScreenFooter/screenFooter_background_solid.png"
+                  }
+                ],
+                "description": "Provides clear separation with a solid background and optional shadow. Best for content-heavy screens where the footer needs to stand out."
+              },
+              {
+                "title": "Fading",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ScreenFooter/screenFooter_background_fading.png"
+                  }
+                ],
+                "description": "Creates a subtle gradient overlay that doesn't obscure content completely. Ideal for minimal designs or when content should remain partially visible."
+              },
+              {
+                "title": "Transparent",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ScreenFooter/screenFooter_background_transparent.png"
+                  }
+                ],
+                "description": "No background overlay. Use when the screen has minimal content or a solid background color, and separation isn't needed."
+              }
+            ],
+            "title": "Background Types",
+            "description": "markdown: Choose the background type based on your content density and visual hierarchy needs. Set using the `backgroundType` prop."
+          },
+          {
+            "type": "table",
+            "columns": [
+              "Behavior",
+              "Description",
+              "Example"
+            ],
+            "items": [
+              {
+                "title": "Sticky",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ScreenFooter/screenFooter_behavior_sticky.png"
+                  }
+                ],
+                "description": "The footer remains at the bottom of the screen even when the keyboard is open. Best for short forms or when the footer actions don't relate to keyboard input."
+              },
+              {
+                "title": "Hoisted",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ScreenFooter/screenFooter_behavior_hoisted.png"
+                  }
+                ],
+                "description": "The footer moves up with the keyboard, staying above it. Recommended for forms where users need immediate access to submit actions while typing."
+              }
+            ],
+            "title": "Keyboard Behavior",
+            "description": "markdown: Control how the footer responds to the keyboard using the `keyboardBehavior` prop. Choose `KeyboardBehavior.STICKY` to keep it at the bottom, or `KeyboardBehavior.HOISTED` to move it above the keyboard."
+          }
+        ]
+      }
+    ]
+  }
+}
+

package/src/components/screenFooter/types.d.ts

@@ -0,0 +1,100 @@
+import { PropsWithChildren } from 'react';
+import { DimensionValue } from 'react-native';
+export declare enum ScreenFooterLayouts {
+    HORIZONTAL = "horizontal",
+    VERTICAL = "vertical"
+}
+export declare enum ScreenFooterBackgrounds {
+    FADING = "fading",
+    SOLID = "solid",
+    TRANSPARENT = "transparent"
+}
+export declare enum FooterAlignment {
+    START = "start",
+    CENTER = "center",
+    END = "end"
+}
+export declare enum HorizontalItemsDistribution {
+    STACK = "stack",
+    SPREAD = "spread"
+}
+export declare enum ItemsFit {
+    FIT = "fit",
+    STRETCH = "stretch",
+    FIXED = "fixed"
+}
+export declare enum KeyboardBehavior {
+    STICKY = "sticky",
+    HOISTED = "hoisted"
+}
+export declare enum ScreenFooterShadow {
+    SH10 = "sh10",
+    SH20 = "sh20",
+    SH30 = "sh30"
+}
+export interface ScreenFooterProps extends PropsWithChildren<{}> {
+    /**
+     * Used as testing identifier
+     */
+    testID?: string;
+    /**
+     * The background style of the footer
+     */
+    backgroundType?: ScreenFooterBackgrounds | `${ScreenFooterBackgrounds}`;
+    /**
+     * The layout direction of footer items
+     */
+    layout?: ScreenFooterLayouts | `${ScreenFooterLayouts}`;
+    /**
+     * Cross-axis alignment:
+     * - Vertical layout: controls horizontal position (left/center/right)
+     * - Horizontal layout: controls vertical position (top/center/bottom)
+     */
+    alignment?: FooterAlignment | `${FooterAlignment}`;
+    /**
+     * Main-axis alignment for horizontal layout only (when distribution is STACK):
+     * Controls horizontal position (left/center/right) of the stacked items
+     */
+    horizontalAlignment?: FooterAlignment | `${FooterAlignment}`;
+    /**
+     * Distribution of items in horizontal layout (stack/spread)
+     */
+    horizontalItemsDistribution?: HorizontalItemsDistribution | `${HorizontalItemsDistribution}`;
+    /**
+     * How items should fit in vertical layout (fit/fixed/stretch)
+     */
+    itemsFit?: ItemsFit | `${ItemsFit}`;
+    /**
+     * The footer's keyboard behavior.
+     * When STICKY, the footer will stay at the bottom of the screen when keyboard is opened.
+     * When HOISTED, the footer will be pushed up when keyboard is opened.
+     */
+    keyboardBehavior?: KeyboardBehavior | `${KeyboardBehavior}`;
+    /**
+     * Fixed width for all items (used with ItemsFit.FIXED)
+     */
+    itemWidth?: DimensionValue;
+    /**
+     * If true, the footer is visible. If false, it slides down.
+     */
+    visible?: boolean;
+    /**
+     * Duration of the show/hide animation in ms.
+     * @default 200
+     */
+    animationDuration?: number;
+    /**
+     * If true, the footer will respect the safe area (add bottom padding)
+     */
+    useSafeArea?: boolean;
+    /**
+     * Shadow preset for solid background (default: SH20)
+     * Only applies when backgroundType is 'solid'
+     */
+    shadow?: ScreenFooterShadow | `${ScreenFooterShadow}`;
+    /**
+     * If true, hides the top divider for solid background (default: false)
+     * Only applies when backgroundType is 'solid'
+     */
+    hideDivider?: boolean;
+}

package/src/components/screenFooter/types.js

@@ -0,0 +1,39 @@
+export let ScreenFooterLayouts = /*#__PURE__*/function (ScreenFooterLayouts) {
+  ScreenFooterLayouts["HORIZONTAL"] = "horizontal";
+  ScreenFooterLayouts["VERTICAL"] = "vertical";
+  return ScreenFooterLayouts;
+}({});
+export let ScreenFooterBackgrounds = /*#__PURE__*/function (ScreenFooterBackgrounds) {
+  ScreenFooterBackgrounds["FADING"] = "fading";
+  ScreenFooterBackgrounds["SOLID"] = "solid";
+  ScreenFooterBackgrounds["TRANSPARENT"] = "transparent";
+  return ScreenFooterBackgrounds;
+}({});
+export let FooterAlignment = /*#__PURE__*/function (FooterAlignment) {
+  FooterAlignment["START"] = "start";
+  FooterAlignment["CENTER"] = "center";
+  FooterAlignment["END"] = "end";
+  return FooterAlignment;
+}({});
+export let HorizontalItemsDistribution = /*#__PURE__*/function (HorizontalItemsDistribution) {
+  HorizontalItemsDistribution["STACK"] = "stack";
+  HorizontalItemsDistribution["SPREAD"] = "spread";
+  return HorizontalItemsDistribution;
+}({});
+export let ItemsFit = /*#__PURE__*/function (ItemsFit) {
+  ItemsFit["FIT"] = "fit";
+  ItemsFit["STRETCH"] = "stretch";
+  ItemsFit["FIXED"] = "fixed";
+  return ItemsFit;
+}({});
+export let KeyboardBehavior = /*#__PURE__*/function (KeyboardBehavior) {
+  KeyboardBehavior["STICKY"] = "sticky";
+  KeyboardBehavior["HOISTED"] = "hoisted";
+  return KeyboardBehavior;
+}({});
+export let ScreenFooterShadow = /*#__PURE__*/function (ScreenFooterShadow) {
+  ScreenFooterShadow["SH10"] = "sh10";
+  ScreenFooterShadow["SH20"] = "sh20";
+  ScreenFooterShadow["SH30"] = "sh30";
+  return ScreenFooterShadow;
+}({});

package/src/components/slider/index.d.ts

@@ -23,6 +23,7 @@ declare const _default: React.ForwardRefExoticComponent<Omit<import("./Thumb").T
     disableRTL?: boolean | undefined;
     accessible?: boolean | undefined;
     testID?: string | undefined;
+    useRelativeDrag?: boolean | undefined;
     migrate?: boolean | undefined;
     enableThumbShadow?: boolean | undefined;
     disabledThumbTintColor?: string | undefined;

package/src/components/slider/index.js

@@ -1,4 +1,5 @@
 import _isFunction from "lodash/isFunction";
+import _clamp from "lodash/clamp";
 import React, { PureComponent } from 'react';
 import { StyleSheet, PanResponder, AccessibilityInfo, Animated } from 'react-native';
 import { Constants, asBaseComponent } from "../../commons/new";
@@ -55,6 +56,7 @@ class Slider extends PureComponent {
     width: THUMB_SIZE,
     height: THUMB_SIZE
   };
+  _containerDragInitialValue = 0;
   constructor(props) {
     super(props);
     this.activeThumbRef = this.thumb;
@@ -85,6 +87,15 @@ class Slider extends PureComponent {
       onPanResponderEnd: () => true,
       onPanResponderTerminationRequest: () => false
     });
+    this.containerPanResponder = PanResponder.create({
+      onMoveShouldSetPanResponder: this.handleMoveShouldSetPanResponder,
+      onPanResponderGrant: this.handleContainerGrant,
+      onPanResponderMove: this.handleContainerMove,
+      onPanResponderRelease: this.handleContainerEnd,
+      onStartShouldSetPanResponder: () => true,
+      onPanResponderEnd: () => true,
+      onPanResponderTerminationRequest: () => false
+    });
   }
   reset() {
     // NOTE: used with ref
@@ -203,6 +214,32 @@ class Slider extends PureComponent {
     this.bounceToStep();
     this.onSeekEnd();
   };
+  handleContainerGrant = () => {
+    this._containerDragInitialValue = this.getValueForX(this._x);
+    this.onSeekStart();
+  };
+  handleContainerMove = (_e, gestureState) => {
+    if (this.props.disabled) {
+      return;
+    }
+    const {
+      minimumValue,
+      maximumValue
+    } = this.props;
+    const range = this.getRange();
+    const containerWidth = this.state.containerSize.width;
+    const dx = gestureState.dx * (Constants.isRTL && !this.disableRTL ? -1 : 1);
+    const deltaValue = dx / containerWidth * range;
+    const newValue = _clamp(this._containerDragInitialValue + deltaValue, minimumValue, maximumValue);
+    const newX = this.getXForValue(newValue);
+    this.set_x(newX);
+    this.moveTo(newX);
+    this.updateValue(newX);
+  };
+  handleContainerEnd = () => {
+    this.bounceToStep();
+    this.onSeekEnd();
+  };
 
   /* Actions */
 
@@ -463,6 +500,9 @@ class Slider extends PureComponent {
   onThumbLayout = nativeEvent => {
     this.handleMeasure('thumbSize', nativeEvent);
   };
+  handleContainerShouldSetResponder = () => {
+    return !this.props.disabled;
+  };
   handleTrackPress = event => {
     if (this.props.disabled) {
       return;
@@ -562,10 +602,16 @@ class Slider extends PureComponent {
 
   /* Renders */
   renderMinThumb = () => {
-    return <Thumb {...this.getThumbProps()} ref={this.minThumb} onTouchStart={this.onMinTouchStart} {...this.panResponder.panHandlers} />;
+    const {
+      useRelativeDrag
+    } = this.props;
+    return <Thumb {...this.getThumbProps()} ref={this.minThumb} onTouchStart={useRelativeDrag ? undefined : this.onMinTouchStart} pointerEvents={useRelativeDrag ? 'none' : undefined} {...useRelativeDrag ? {} : this.panResponder.panHandlers} />;
   };
   renderThumb = () => {
-    return <Thumb {...this.getThumbProps()} ref={this.thumb} onTouchStart={this.onTouchStart} {...this.panResponder.panHandlers} />;
+    const {
+      useRelativeDrag
+    } = this.props;
+    return <Thumb {...this.getThumbProps()} ref={this.thumb} onTouchStart={useRelativeDrag ? undefined : this.onTouchStart} pointerEvents={useRelativeDrag ? 'none' : undefined} {...useRelativeDrag ? {} : this.panResponder.panHandlers} />;
   };
   renderTrack() {
     const {
@@ -607,14 +653,18 @@ class Slider extends PureComponent {
     const {
       containerStyle,
       testID,
-      migrate
+      migrate,
+      useRelativeDrag
     } = this.props;
     if (migrate) {
       return <IncubatorSlider {...this.props} />;
     }
-    return <View style={[styles.container, containerStyle]} onLayout={this.onContainerLayout} onAccessibilityAction={this.onAccessibilityAction} testID={testID} {...this.getAccessibilityProps()}>
+    const containerGestureProps = useRelativeDrag ? this.containerPanResponder.panHandlers : {
+      onStartShouldSetResponder: this.handleContainerShouldSetResponder,
+      onResponderRelease: this.handleTrackPress
+    };
+    return <View style={[styles.container, containerStyle]} onLayout={this.onContainerLayout} onAccessibilityAction={this.onAccessibilityAction} testID={testID} {...containerGestureProps} {...this.getAccessibilityProps()}>
         {this.renderTrack()}
-        <View style={styles.touchArea} onTouchEnd={this.handleTrackPress} />
         {this.renderRangeThumb()}
         {this.renderThumb()}
       </View>;
@@ -636,9 +686,5 @@ const styles = StyleSheet.create({
   },
   trackDisableRTL: {
     right: 0
-  },
-  touchArea: {
-    ...StyleSheet.absoluteFillObject,
-    backgroundColor: 'transparent'
   }
 });

package/src/components/slider/slider.api.json

@@ -140,6 +140,12 @@
       "type": "string",
       "description": "The component test id"
     },
+    {
+      "name": "useRelativeDrag",
+      "type": "boolean",
+      "description": "If true, dragging anywhere on the slider moves the thumb relative to its current position instead of snapping to the touch point. Designed for single-thumb mode.",
+      "default": "false"
+    },
     {
       "name": "migrate",
       "type": "boolean",

package/src/components/slider/types.d.ts

@@ -97,6 +97,11 @@ export type SliderProps = Omit<ThumbProps, 'ref'> & {
      * The slider's test identifier
      */
     testID?: string;
+    /**
+     * If true, dragging anywhere on the slider moves the thumb relative to its current position
+     * instead of snapping to the touch point. Designed for single-thumb mode.
+     */
+    useRelativeDrag?: boolean;
     /**
      * Whether to use the new Slider implementation using Reanimated
      */

package/src/hooks/index.d.ts

@@ -6,6 +6,7 @@ export { default as useModifiers } from './useModifiers';
 export { default as useOrientation } from './useOrientation';
 export { default as useScrollEnabler } from './useScrollEnabler';
 export { default as useScrollReached } from './useScrollReached';
+export { default as useScrollToHide } from './useScrollToHide';
 export { default as useScrollToItem } from './useScrollToItem';
 export { default as useScrollTo } from './useScrollTo';
 export { default as useThemeProps } from './useThemeProps';

package/src/hooks/index.js

@@ -6,6 +6,7 @@ export { default as useModifiers } from "./useModifiers";
 export { default as useOrientation } from "./useOrientation";
 export { default as useScrollEnabler } from "./useScrollEnabler";
 export { default as useScrollReached } from "./useScrollReached";
+export { default as useScrollToHide } from "./useScrollToHide";
 export { default as useScrollToItem } from "./useScrollToItem";
 export { default as useScrollTo } from "./useScrollTo";
 export { default as useThemeProps } from "./useThemeProps";

package/src/hooks/useScrollToHide/index.d.ts

@@ -0,0 +1,24 @@
+import { NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
+export type ScrollToHideProps = {
+    /**
+     * The threshold (in pixels) to ignore small scroll movements before updating visibility.
+     * Defaults to 0 (immediate reaction).
+     */
+    scrollingThreshold?: number;
+};
+export type ScrollToHideResult = {
+    /**
+     * onScroll callback (should be passed to your ScrollView/FlatList onScroll prop).
+     */
+    onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+    /**
+     * Whether the footer should be visible based on scroll direction.
+     */
+    visible: boolean;
+};
+/**
+ * @description: A hook that tracks scroll direction to toggle visibility (e.g., for hiding a footer on scroll).
+ * @example: const {onScroll, visible} = useScrollToHide();
+ */
+declare const useScrollToHide: (props?: ScrollToHideProps) => ScrollToHideResult;
+export default useScrollToHide;

package/src/hooks/useScrollToHide/index.js

@@ -0,0 +1,48 @@
+import { useState, useCallback, useRef } from 'react';
+/**
+ * @description: A hook that tracks scroll direction to toggle visibility (e.g., for hiding a footer on scroll).
+ * @example: const {onScroll, visible} = useScrollToHide();
+ */
+const useScrollToHide = (props = {}) => {
+  const {
+    scrollingThreshold = 0
+  } = props;
+  const [visible, setVisible] = useState(true);
+  const prevContentOffset = useRef(0);
+  const onScroll = useCallback(event => {
+    const {
+      nativeEvent: {
+        contentOffset: {
+          y: currentOffset
+        },
+        contentSize: {
+          height: contentHeight
+        },
+        layoutMeasurement: {
+          height: layoutHeight
+        }
+      }
+    } = event;
+
+    // Ignore bounces (iOS)
+    if (currentOffset < 0 || currentOffset > contentHeight - layoutHeight) {
+      return;
+    }
+    const diff = currentOffset - prevContentOffset.current;
+    if (Math.abs(diff) > scrollingThreshold) {
+      if (diff > 0 && visible) {
+        // Scrolling Down -> Hide
+        setVisible(false);
+      } else if (diff < 0 && !visible) {
+        // Scrolling Up -> Show
+        setVisible(true);
+      }
+      prevContentOffset.current = currentOffset;
+    }
+  }, [visible, scrollingThreshold]);
+  return {
+    onScroll,
+    visible
+  };
+};
+export default useScrollToHide;

package/src/incubator/expandableOverlay/index.js

@@ -33,11 +33,15 @@ const ExpandableOverlay = (props, ref) => {
     setExpandableVisible(true);
     onPress?.(props);
   }, [onPress, customValue]);
-  const closeExpandable = useCallback(() => {
+  const dismissOverlay = useCallback(() => {
     setExpandableVisible(false);
     focusAccessibility();
+  }, [focusAccessibility]);
+  const closeExpandable = useCallback(() => {
+    dismissOverlay();
     useDialog ? dialogProps?.onDismiss?.() : modalProps?.onDismiss?.();
-  }, [useDialog, dialogProps?.onDismiss, modalProps?.onDismiss, focusAccessibility]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dismissOverlay, dialogProps?.onDismiss, modalProps?.onDismiss]);
   const toggleExpandable = useCallback(() => visible ? closeExpandable() : openExpandable(), [visible, openExpandable, closeExpandable]);
   useImperativeHandle(ref, () => ({
     openExpandable,
@@ -45,7 +49,7 @@ const ExpandableOverlay = (props, ref) => {
     toggleExpandable
   }));
   const renderModal = () => {
-    return <Modal testID={`${testID}.overlay`} overlayBackgroundColor={Colors.$backgroundDefault} {...modalProps} visible={visible} onDismiss={closeExpandable} onRequestClose={closeExpandable} onBackgroundPress={closeExpandable}>
+    return <Modal testID={`${testID}.overlay`} overlayBackgroundColor={Colors.$backgroundDefault} {...modalProps} visible={visible} onDismiss={dismissOverlay} onRequestClose={closeExpandable} onBackgroundPress={closeExpandable}>
         {showTopBar && <Modal.TopBar onDone={closeExpandable} {...topBarProps} />}
         {expandableContent}
       </Modal>;

package/src/index.d.ts

@@ -38,6 +38,7 @@ export { default as ExpandableSection, ExpandableSectionProps } from './componen
 export { default as Fader, FaderProps, FaderPosition } from './components/fader';
 export { default as FeatureHighlight, FeatureHighlightProps } from './components/featureHighlight';
 export { default as FloatingButton, FloatingButtonProps, FloatingButtonLayouts } from './components/floatingButton';
+export { default as ScreenFooter, ScreenFooterProps, ScreenFooterLayouts, ScreenFooterBackgrounds, FooterAlignment, HorizontalItemsDistribution, ItemsFit, KeyboardBehavior, ScreenFooterShadow } from './components/screenFooter';
 export { default as Gradient, GradientProps, GradientTypes } from './components/gradient';
 export { default as Slider } from './components/slider';
 export { default as GradientSlider } from './components/slider/GradientSlider';

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();