@hero-design/rn 8.82.2-alpha.2 → 8.83.0

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -48,6 +48,20 @@ exports[`theme returns correct theme object 1`] = `
         "textPaddingHorizontal": 12,
       },
     },
+    "appCue": {
+      "colors": {
+        "backdropColor": "rgba(0, 0, 0, 0.5)",
+        "background": "#001f23",
+      },
+      "radii": {
+        "container": 12,
+      },
+      "space": {
+        "arrowOffset": 12,
+        "offset": 8,
+        "padding": 16,
+      },
+    },
     "attachment": {
       "colors": {
         "highlightedBackground": "#ece8ef",
@@ -1008,9 +1022,33 @@ exports[`theme returns correct theme object 1`] = `
     },
     "slider": {
       "colors": {
+        "disabledThumbTint": "#bfc1c5",
+        "disabledTrackBackground": "#f6f6f7",
         "maximumTrackTint": "#ece8ef",
         "minimumTrackTint": "#401960",
         "thumbTint": "#401960",
+        "trackBackground": "#ece8ef",
+      },
+      "radii": {
+        "marker": 999,
+      },
+      "shadows": {
+        "marker": {
+          "elevation": 3,
+          "shadowColor": "#001f23",
+          "shadowOffset": {
+            "height": 2,
+            "width": 0,
+          },
+          "shadowOpacity": 0.12,
+          "shadowRadius": 4,
+        },
+      },
+      "sizes": {
+        "markerBorderRadius": 999,
+        "markerHeight": 24,
+        "markerWidth": 24,
+        "trackHeight": 4,
       },
     },
     "spinner": {
@@ -1125,6 +1163,7 @@ exports[`theme returns correct theme object 1`] = `
       "colors": {
         "active": "#001f23",
         "activeBackground": "#ccd2d3",
+        "headerBackground": "#ffffff",
         "headerBottom": "#e8e9ea",
         "inactive": "#001f23",
         "indicator": "#401960",

package/src/theme/components/appCue.ts

@@ -0,0 +1,22 @@
+import type { GlobalTheme } from '../global';
+
+const getAppCueTheme = (theme: GlobalTheme) => {
+  const colors = {
+    background: theme.colors.darkGlobalSurface,
+    backdropColor: 'rgba(0, 0, 0, 0.5)',
+  };
+
+  const space = {
+    padding: theme.space.medium,
+    offset: theme.space.small,
+    arrowOffset: theme.space.smallMedium,
+  };
+
+  const radii = {
+    container: theme.radii.large,
+  };
+
+  return { colors, space, radii };
+};
+
+export default getAppCueTheme;

package/src/theme/components/slider.ts

@@ -5,9 +5,27 @@ const getSliderTheme = (theme: GlobalTheme) => {
     minimumTrackTint: theme.colors.primary,
     thumbTint: theme.colors.primary,
     maximumTrackTint: theme.colors.highlightedSurface,
+    trackBackground: theme.colors.highlightedSurface,
+    disabledThumbTint: theme.colors.disabledOnDefaultGlobalSurface,
+    disabledTrackBackground: theme.colors.neutralGlobalSurface,
   };
 
-  return { colors };
+  const shadows = {
+    marker: theme.shadows.default,
+  };
+
+  const sizes = {
+    trackHeight: theme.sizes.xsmall,
+    markerWidth: theme.sizes.large,
+    markerHeight: theme.sizes.large,
+    markerBorderRadius: theme.radii.rounded,
+  };
+
+  const radii = {
+    marker: theme.radii.rounded,
+  };
+
+  return { colors, shadows, sizes, radii };
 };
 
 export default getSliderTheme;

package/src/theme/components/tabs.ts

@@ -8,6 +8,7 @@ const getTabsTheme = (theme: GlobalTheme) => {
     headerBottom: theme.colors.secondaryOutline,
     indicator: theme.colors.primary,
     text: theme.colors.onDefaultGlobalSurface,
+    headerBackground: theme.colors.defaultGlobalSurface,
   };
 
   const space = {

package/src/theme/getTheme.ts

@@ -51,11 +51,13 @@ import type { GlobalTheme, Scale, SystemPalette } from './global';
 import getSearchTheme from './components/search';
 import getMapPinTheme from './components/mapPin';
 import getFloatingIslandTheme from './components/floatingIsland';
+import getAppCueTheme from './components/appCue';
 
 type Theme = GlobalTheme & {
   __hd__: {
     accordion: ReturnType<typeof getAccordionTheme>;
     alert: ReturnType<typeof getAlertTheme>;
+    appCue: ReturnType<typeof getAppCueTheme>;
     attachment: ReturnType<typeof getAttachmentTheme>;
     avatar: ReturnType<typeof getAvatarTheme>;
     badge: BadgeThemeType;
@@ -116,6 +118,7 @@ const getTheme = (
     __hd__: {
       accordion: getAccordionTheme(globalTheme),
       alert: getAlertTheme(globalTheme),
+      appCue: getAppCueTheme(globalTheme),
       attachment: getAttachmentTheme(globalTheme),
       avatar: getAvatarTheme(globalTheme),
       badge: getBadgeTheme(globalTheme),

package/src/types.ts

@@ -17,6 +17,7 @@ import { TextProps } from './components/Typography/Text';
 import { CardCarouselHandles } from './components/Carousel/CardCarousel';
 import { FABHandles } from './components/FAB/FAB';
 import { ActionGroupHandles } from './components/FAB/ActionGroup';
+import type { SliderRangeValue } from './components/Slider/RangeSlider';
 
 export type {
   BottomNavigationTabType,
@@ -36,4 +37,5 @@ export type {
   CardCarouselHandles,
   FABHandles,
   ActionGroupHandles,
+  SliderRangeValue,
 };