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

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,

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/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,
 };