@hero-design/rn 8.104.1-alpha.2 → 8.105.0

package/src/components/Typography/Title/__tests__/__snapshots__/index.spec.tsx.snap

@@ -816,6 +816,57 @@ exports[`Title has h6 level and playful typeface style 1`] = `
 </View>
 `;
 
+exports[`Title has inactive intent style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#808f91",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 42,
+          "letterSpacing": 0,
+          "lineHeight": 50,
+        },
+        undefined,
+      ]
+    }
+    themeIntent="inactive"
+    themeLevel="h1"
+    themeTypeface="neutral"
+  >
+    This is a test
+  </Text>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
 exports[`Title has info intent style 1`] = `
 <View
   style={

package/src/components/Typography/Title/__tests__/index.spec.tsx

@@ -23,6 +23,7 @@ describe('Title', () => {
     ${'archived'}
     ${'disabled'}
     ${'muted'}
+    ${'inactive'}
   `('has $intent intent style', ({ intent }) => {
     const { toJSON } = renderWithTheme(
       <Title intent={intent}>This is a test</Title>

package/src/components/Typography/Title/index.tsx

@@ -6,6 +6,7 @@ import type {
   TextStyle,
 } from 'react-native';
 import { StyledTitle } from './StyledTitle';
+import type { TypographyIntent } from '../types';
 
 export interface TitleProps extends NativeTextProps {
   /**
@@ -15,19 +16,7 @@ export interface TitleProps extends NativeTextProps {
   /**
    * Visual intent color to apply to the text.
    */
-  intent?:
-    | 'body'
-    | 'subdued'
-    | 'primary'
-    | 'secondary'
-    | 'success'
-    | 'info'
-    | 'warning'
-    | 'danger'
-    | 'inverted'
-    | 'archived'
-    | 'disabled'
-    | 'muted';
+  intent?: TypographyIntent;
   /**
    * Additional style.
    */

package/src/components/Typography/types.ts

@@ -4,7 +4,7 @@ export const FONTWEIGHT_MAP = {
   'semi-bold': 'semiBold',
 } as const;
 
-export type ThemeIntent =
+export type TypographyIntent =
   | 'body'
   | 'subdued'
   | 'primary'
@@ -16,4 +16,5 @@ export type ThemeIntent =
   | 'inverted'
   | 'archived'
   | 'disabled'
-  | 'muted';
+  | 'muted'
+  | 'inactive';

package/src/index.ts

@@ -77,6 +77,7 @@ import {
   FlatListWithFAB,
 } from './components/AnimatedScroller';
 import Search from './components/Search';
+import SegmentedControl from './components/SegmentedControl';
 import FloatingIsland from './components/FloatingIsland';
 import LocaleProvider from './components/LocaleProvider';
 import FilterTrigger from './components/FilterTrigger';
@@ -141,6 +142,7 @@ export {
   Swipeable,
   Radio,
   Search,
+  SegmentedControl,
   ScrollViewWithFAB,
   SectionHeading,
   SectionListWithFAB,

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

@@ -1151,6 +1151,59 @@ exports[`theme returns correct theme object 1`] = `
         "iconMarginRight": 12,
       },
     },
+    "segmentedControl": {
+      "colors": {
+        "itemBackground": {
+          "active": "#ffffff",
+          "inactive": "transparent",
+        },
+        "wrapperBackground": "#f6f6f7",
+      },
+      "lineHeights": {
+        "itemText": undefined,
+      },
+      "radii": {
+        "item": {
+          "large": 16,
+          "medium": 12,
+        },
+        "wrapper": {
+          "large": 20,
+          "medium": 16,
+        },
+      },
+      "shadows": {
+        "item": {
+          "active": {
+            "elevation": 6,
+            "shadowColor": "#001f23",
+            "shadowOffset": {
+              "height": 2,
+              "width": 0,
+            },
+            "shadowOpacity": 0.12,
+            "shadowRadius": 2,
+          },
+          "inactive": undefined,
+        },
+      },
+      "sizes": {
+        "itemHeight": {
+          "large": 36,
+          "medium": 28,
+        },
+        "wrapperHeight": {
+          "large": 44,
+          "medium": 36,
+        },
+      },
+      "space": {
+        "itemAffixGap": 8,
+        "itemLabelGap": 4,
+        "itemLabelMarginEnd": 12,
+        "wrapperHorizontalPadding": 4,
+      },
+    },
     "select": {
       "radii": {
         "option": 4,
@@ -1576,6 +1629,7 @@ exports[`theme returns correct theme object 1`] = `
         "body": "#001f23",
         "danger": "#f46363",
         "disabled": "#bfc1c5",
+        "inactive": "#808f91",
         "info": "#355bfb",
         "inverted": "#ffffff",
         "muted": "#4d6265",

package/src/theme/components/segmentedControl.ts

@@ -0,0 +1,60 @@
+import { Platform } from 'react-native';
+import { scale } from '../../utils/scale';
+import type { GlobalTheme } from '../global';
+
+const getSegmentedControlTheme = (theme: GlobalTheme) => {
+  const sizes = {
+    itemHeight: {
+      medium: scale(28),
+      large: scale(36),
+    },
+    wrapperHeight: {
+      medium: scale(36),
+      large: scale(44),
+    },
+  };
+
+  const colors = {
+    itemBackground: {
+      inactive: 'transparent',
+      active: theme.colors.defaultGlobalSurface,
+    },
+    wrapperBackground: theme.colors.neutralGlobalSurface,
+  };
+
+  const shadows = {
+    item: {
+      inactive: undefined,
+      active: theme.shadows.default,
+    },
+  };
+
+  const radii = {
+    item: {
+      medium: theme.radii.large,
+      large: theme.radii.xlarge,
+    },
+    wrapper: {
+      medium: theme.radii.xlarge,
+      large: theme.radii.xxlarge,
+    },
+  };
+
+  const space = {
+    wrapperHorizontalPadding: theme.space.xsmall,
+    itemLabelGap: theme.space.xsmall,
+    itemLabelMarginEnd: theme.space.smallMedium,
+    itemAffixGap: theme.space.small,
+  };
+
+  const lineHeights = {
+    itemText: Platform.select({
+      android: 20,
+      ios: undefined,
+    }),
+  };
+
+  return { sizes, colors, shadows, radii, space, lineHeights };
+};
+
+export default getSegmentedControlTheme;

package/src/theme/components/typography.ts

@@ -14,6 +14,7 @@ const getTypographyTheme = (theme: GlobalTheme) => {
     archived: theme.colors.onArchivedSurface,
     disabled: theme.colors.disabledOnDefaultGlobalSurface,
     muted: theme.colors.mutedOnDefaultGlobalSurface,
+    inactive: theme.colors.inactiveOnDefaultGlobalSurface,
   };
 
   const fontSizes = {

package/src/theme/getTheme.ts

@@ -56,6 +56,7 @@ import getFloatingIslandTheme from './components/floatingIsland';
 import getAppCueTheme from './components/appCue';
 import { ThemeMode } from './global/colors/types';
 import getFilterTriggerTheme from './components/filterTrigger';
+import getSegmentedControlTheme from './components/segmentedControl';
 
 type Theme = GlobalTheme & {
   themeMode?: ThemeMode;
@@ -114,6 +115,7 @@ type Theme = GlobalTheme & {
     toolbar: ReturnType<typeof getToolbarTheme>;
     typography: ReturnType<typeof getTypographyTheme>;
     floatingIsland: ReturnType<typeof getFloatingIslandTheme>;
+    segmentedControl: ReturnType<typeof getSegmentedControlTheme>;
   };
 };
 
@@ -179,6 +181,7 @@ const getTheme = (
       toolbar: getToolbarTheme(globalTheme),
       typography: getTypographyTheme(globalTheme),
       floatingIsland: getFloatingIslandTheme(globalTheme),
+      segmentedControl: getSegmentedControlTheme(globalTheme),
     },
   };
 };

package/src/types.ts

@@ -51,6 +51,7 @@ import { PinInputHandler } from './components/PinInput';
 import { ThemeScale } from './components/Box/types';
 import { TimePickerProps } from './components/TimePicker/types';
 import { DatePickerProps } from './components/DatePicker/types';
+import type { SegmentedControlItemConfig } from './components/SegmentedControl/types';
 
 export type {
   Space,
@@ -105,4 +106,5 @@ export type {
   BadgeProps,
   TimePickerProps,
   DatePickerProps,
+  SegmentedControlItemConfig,
 };