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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.104.1-alpha.3",
+  "version": "8.105.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/components/Icon/HeroIcon/glyphMap.json

@@ -1 +1 @@
-{"activate":59000,"add-emoji":59001,"add-person":59002,"adjustment":59003,"alignment":59004,"antenna":59005,"archive":59006,"assignment-warning":59007,"bank":59008,"bell":59009,"billing":59010,"bolt":59011,"bookmark-added":59012,"bookmark-checked":59013,"bookmark":59014,"box-check":59015,"box":59016,"bpay":59017,"buildings":59018,"cake":59019,"calendar-clock":59020,"calendar":59021,"candy-box-menu":59022,"caret-down-small":59023,"caret-down":59024,"caret-left-small":59025,"caret-left":59026,"caret-right-small":59027,"caret-right":59028,"caret-up-small":59029,"caret-up":59030,"check-radio":59031,"circle-add":59032,"circle-cancel":59033,"circle-check":59034,"circle-down":59035,"circle-info":59036,"circle-left":59037,"circle-ok":59038,"circle-pencil":59039,"circle-question":59040,"circle-remove":59041,"circle-right":59042,"circle-up":59043,"circle-warning":59044,"clock-3":59045,"clock":59046,"cloud-download":59047,"cloud-upload":59048,"cog":59049,"coin":59050,"contacts":59051,"credit-card":59052,"diamond":59053,"direction-arrows":59054,"directory":59055,"document":59056,"dollar-coin-shine":59057,"dot":59058,"double-buildings":59059,"edit-template":59060,"envelope":59061,"exclude":59062,"expand-content":59063,"expense":59064,"explore_nearby":59065,"eye-circle":59066,"eye-invisible":59067,"eye":59068,"face-meh":59069,"face-sad":59070,"face-smiley":59071,"feed":59072,"feedbacks":59073,"file-certified":59074,"file-clone":59075,"file-copy":59076,"file-csv":59077,"file-dispose":59078,"file-doc":59079,"file-excel":59080,"file-export":59081,"file-lock":59082,"file-pdf":59083,"file-powerpoint":59084,"file-search":59085,"file-secured":59086,"file-sheets":59087,"file-slide":59088,"file-verified":59089,"file-word":59090,"file":59091,"filter":59092,"folder-user":59093,"folder":59094,"format-bold":59095,"format-heading1":59096,"format-heading2":59097,"format-italic":59098,"format-list-bulleted":59099,"format-list-numbered":59100,"format-underlined":59101,"funnel-filter":59102,"global-dollar":59103,"globe":59104,"graduation-cap":59105,"graph":59106,"happy-sun":59107,"health-bag":59108,"heart":59109,"hero-points":59110,"home":59111,"image":59112,"import":59113,"incident-siren":59114,"instapay-daily":59115,"instapay-now":59116,"instapay":59117,"list":59118,"loading-2":59119,"loading":59120,"location-on":59121,"location":59122,"lock":59123,"looks-one":59124,"looks-two":59125,"media-content":59126,"menu":59127,"money-notes":59128,"moneybag":59129,"moon":59130,"multiple-stars":59131,"multiple-users":59132,"near-me":59133,"node":59134,"open-folder":59135,"paperclip-vertical":59136,"paperclip":59137,"payment-summary":59138,"pencil":59139,"phone":59140,"piggy-bank":59141,"plane-up":59142,"plane":59143,"play-arrow":59144,"play-circle":59145,"print":59146,"raising-hands":59147,"reply-arrow":59148,"reply":59149,"reschedule":59150,"rostering":59151,"salary-sacrifice":59152,"save":59153,"schedule-send":59154,"schedule":59155,"search-person":59156,"search":59157,"send":59158,"speaker-active":59159,"speaker":59160,"star-award":59161,"star-badge":59162,"star-circle":59163,"star-medal":59164,"star":59165,"steps-circle":59166,"stopwatch":59167,"suitcase":59168,"surfing":59169,"survey":59170,"swag-pillar-benefit":59171,"swag-pillar-career":59172,"swag-pillar-money":59173,"swag-pillar-work":59174,"swag":59175,"swipe-right":59176,"switch":59177,"tag":59178,"target":59179,"teams":59180,"thumb-down":59181,"timesheet":59182,"touch-id":59183,"trash-bin":59184,"unlock":59185,"user":59186,"video-1":59187,"video-2":59188,"wallet":59189,"warning":59190,"academic-hat-outlined":59191,"accommodation-outlined":59192,"activate-outlined":59193,"add-credit-card-outlined":59194,"add-person-outlined":59195,"add-section-outlined":59196,"add-time-outlined":59197,"add":59198,"adjustment-outlined":59199,"afternoon-outlined":59200,"ai-outlined":59201,"alignment-2-outlined":59202,"alignment-outlined":59203,"all-caps":59204,"application-outlined":59205,"arrow-down":59206,"arrow-downwards":59207,"arrow-left":59208,"arrow-leftwards":59209,"arrow-right":59210,"arrow-rightwards":59211,"arrow-up":59212,"arrow-upwards":59213,"article-outlined":59214,"at-sign":59215,"auto-graph-outlined":59216,"automotive-outlined":59217,"bakery-outlined":59218,"bar-outlined":59219,"beauty-outlined":59220,"beer-outlined":59221,"bell-active-outlined":59222,"bell-outlined":59223,"bell-slash-outlined":59224,"bill-management-outlined":59225,"billing-outlined":59226,"body-outlined":59227,"bold":59228,"bolt-outlined":59229,"book-outlined":59230,"bookmark-added-outlined":59231,"bookmark-checked-outlined":59232,"bookmark-outlined":59233,"box-1-outlined":59234,"box-check-outlined":59235,"box-outlined":59236,"bullet-points":59237,"cake-outlined":59238,"calculator-outlined":59239,"calendar-dates-outlined":59240,"calendar-star-outlined":59241,"call-outlined":59242,"call-split-outlined":59243,"camera-outlined":59244,"cancel":59245,"car-forward-outlined":59246,"cashback-outlined":59247,"charging-station-outlined":59248,"chat-bubble-outlined":59249,"chat-unread-outlined":59250,"checkmark":59251,"circle-add-outlined":59252,"circle-cancel-outlined":59253,"circle-down-outlined":59254,"circle-info-outlined":59255,"circle-left-outlined":59256,"circle-ok-outlined":59257,"circle-question-outlined":59258,"circle-remove-outlined":59259,"circle-right-outlined":59260,"circle-up-outlined":59261,"circle-warning-outlined":59262,"clock-2-outlined":59263,"clock-in-outlined":59264,"clock-out-outlined":59265,"clock-outlined":59266,"cog-outlined":59267,"coin-outlined":59268,"coin-super-outlined":59269,"comment-outlined":59270,"contacts-outlined":59271,"contacts-user-outlined":59272,"credit-card-outlined":59273,"cultural-site-outlined":59274,"cup-outlined":59275,"dentistry-outlined":59276,"direction-arrows-outlined":59277,"directory-outlined":59278,"document-outlined":59279,"dollar-box-outlined":59280,"dollar-card-outlined":59281,"dollar-coin-shine-outlined":59282,"dollar-credit-card-outlined":59283,"dollar-sign":59284,"double-buildings-outlined":59285,"double-left-arrows":59286,"double-right-arrows":59287,"download-box-outlined":59288,"download-outlined":59289,"edit-template-outlined":59290,"electronics-outlined":59291,"email-outlined":59292,"end-break-outlined":59293,"enter-arrow":59294,"entertainment-outlined":59295,"envelope-outlined":59296,"evening-outlined":59297,"expense-approval-outlined":59298,"expense-outlined":59299,"explore-outlined":59300,"extension-outlined":59301,"external-link":59302,"eye-invisible-outlined":59303,"eye-outlined":59304,"face-id":59305,"face-meh-outlined":59306,"face-open-smiley-outlined":59307,"face-sad-outlined":59308,"face-smiley-outlined":59309,"fastfood-outlined":59310,"feed-outlined":59311,"file-certified-outlined":59312,"file-clone-outlined":59313,"file-copy-outlined":59314,"file-dispose-outlined":59315,"file-dollar-certified-outlined":59316,"file-dollar-outlined":59317,"file-download-outlined":59318,"file-export-outlined":59319,"file-lock-outlined":59320,"file-outlined":59321,"file-search-outlined":59322,"file-secured-outlined":59323,"file-statutory-outlined":59324,"file-verified-outlined":59325,"filter-outlined":59326,"fitness-outlined":59327,"folder-outlined":59328,"folder-upload-outlined":59329,"folder-user-outlined":59330,"form-outlined":59331,"funnel-filter-outline":59332,"goal-outlined":59333,"graph-outlined":59334,"grocery-outlined":59335,"hand-holding-user-outlined":59336,"handshake-outlined":59337,"happy-sun-outlined":59338,"health-bag-outlined":59339,"heart-outlined":59340,"home-active-outlined":59341,"home-outlined":59342,"id-card-outlined":59343,"image-outlined":59344,"import-outlined":59345,"instapay-outlined":59346,"italic":59347,"job-search-outlined":59348,"leave-approval-outlined":59349,"link-1":59350,"link-2":59351,"list-outlined":59352,"live-help-outlined":59353,"local_mall_outlined":59354,"location-on-outlined":59355,"location-outlined":59356,"lock-outlined":59357,"locked-file-outlined":59358,"log-out":59359,"mail-outlined":59360,"map-outlined":59361,"media-content-outlined":59362,"menu-close":59363,"menu-expand":59364,"menu-fold-outlined":59365,"menu-unfold-outlined":59366,"moneybag-outlined":59367,"moon-outlined":59368,"more-horizontal":59369,"more-vertical":59370,"morning-outlined":59371,"multiple-folders-outlined":59372,"multiple-users-outlined":59373,"near-me-outlined":59374,"node-outlined":59375,"number-points":59376,"number":59377,"overview-outlined":59378,"park-outlined":59379,"payment-summary-outlined":59380,"payslip-outlined":59381,"pencil-outlined":59382,"percentage":59383,"phone-outlined":59384,"piggy-bank-outlined":59385,"plane-outlined":59386,"play-circle-outlined":59387,"print-outlined":59388,"propane-tank-outlined":59389,"qr-code-outlined":59390,"qualification-outlined":59391,"re-assign":59392,"redeem":59393,"refresh":59394,"remove":59395,"reply-outlined":59396,"restart":59397,"restaurant-outlined":59398,"resume-outlined":59399,"return-arrow":59400,"rostering-outlined":59401,"safety-outlined":59402,"save-outlined":59403,"schedule-outlined":59404,"search-outlined":59405,"search-secured-outlined":59406,"send-outlined":59407,"share-1":59408,"share-2":59409,"share-outlined-2":59410,"share-outlined":59411,"shield-check-outlined":59412,"shop-outlined":59413,"shopping_basket_outlined":59414,"show-chart-outlined":59415,"single-down-arrow":59416,"single-left-arrow":59417,"single-right-arrow":59418,"single-up-arrow":59419,"smart-match-outlined":59420,"sparkle-outlined":59421,"speaker-active-outlined":59422,"speaker-outlined":59423,"star-circle-outlined":59424,"star-outlined":59425,"start-break-outlined":59426,"stash-outlined":59427,"stopwatch-outlined":59428,"strikethrough":59429,"styler-outlined":59430,"suitcase-clock-outlined":59431,"suitcase-outlined":59432,"survey-outlined":59433,"switch-outlined":59434,"sync":59435,"tag-outlined":59436,"target-outlined":59437,"tennis-outlined":59438,"thumb-down-outlined":59439,"ticket-outlined":59440,"timesheet-outlined":59441,"timesheets-outlined":59442,"today-outlined":59443,"transfer":59444,"transportation-outlined":59445,"trash-bin-outlined":59446,"umbrela-outlined":59447,"unavailability-outlined":59448,"unavailable":59449,"underline":59450,"union-outlined":59451,"unlock-outlined":59452,"upload-outlined":59453,"user-circle-outlined":59454,"user-gear-outlined":59455,"user-outlined":59456,"user-rectangle-outlined":59457,"video-1-outlined":59458,"video-2-outlined":59459,"volunteer-outlined":59460,"wallet-outlined":59461,"wellness-outlined":59462}
+{"activate":59000,"add-emoji":59001,"add-person":59002,"adjustment":59003,"alignment":59004,"antenna":59005,"archive":59006,"assignment-warning":59007,"bank":59008,"bell":59009,"billing":59010,"bolt":59011,"bookmark-added":59012,"bookmark-checked":59013,"bookmark":59014,"box-check":59015,"box":59016,"bpay":59017,"buildings":59018,"cake":59019,"calendar-clock":59020,"calendar":59021,"candy-box-menu":59022,"caret-down-small":59023,"caret-down":59024,"caret-left-small":59025,"caret-left":59026,"caret-right-small":59027,"caret-right":59028,"caret-up-small":59029,"caret-up":59030,"check-radio":59031,"circle-add":59032,"circle-cancel":59033,"circle-check":59034,"circle-down":59035,"circle-info":59036,"circle-left":59037,"circle-ok":59038,"circle-pencil":59039,"circle-question":59040,"circle-remove":59041,"circle-right":59042,"circle-up":59043,"circle-warning":59044,"clock-3":59045,"clock":59046,"cloud-download":59047,"cloud-upload":59048,"cog":59049,"coin":59050,"contacts":59051,"credit-card":59052,"diamond":59053,"direction-arrows":59054,"directory":59055,"document":59056,"dollar-coin-shine":59057,"dot":59058,"double-buildings":59059,"edit-template":59060,"envelope":59061,"exclude":59062,"expand-content":59063,"expense":59064,"explore_nearby":59065,"eye-circle":59066,"eye-invisible":59067,"eye":59068,"face-meh":59069,"face-sad":59070,"face-smiley":59071,"feed":59072,"feedbacks":59073,"file-certified":59074,"file-clone":59075,"file-copy":59076,"file-csv":59077,"file-dispose":59078,"file-doc":59079,"file-excel":59080,"file-export":59081,"file-lock":59082,"file-pdf":59083,"file-powerpoint":59084,"file-search":59085,"file-secured":59086,"file-sheets":59087,"file-slide":59088,"file-verified":59089,"file-word":59090,"file":59091,"filter":59092,"folder-user":59093,"folder":59094,"format-bold":59095,"format-heading1":59096,"format-heading2":59097,"format-italic":59098,"format-list-bulleted":59099,"format-list-numbered":59100,"format-underlined":59101,"funnel-filter":59102,"global-dollar":59103,"globe":59104,"graduation-cap":59105,"graph":59106,"happy-sun":59107,"health-bag":59108,"heart":59109,"hero-points":59110,"home":59111,"image":59112,"import":59113,"incident-siren":59114,"instapay-daily":59115,"instapay-now":59116,"instapay":59117,"list":59118,"loading-2":59119,"loading":59120,"location-on":59121,"location":59122,"lock":59123,"looks-one":59124,"looks-two":59125,"media-content":59126,"menu":59127,"money-notes":59128,"moneybag":59129,"moon":59130,"multiple-stars":59131,"multiple-users":59132,"near-me":59133,"node":59134,"open-folder":59135,"paperclip-vertical":59136,"paperclip":59137,"payment-summary":59138,"pencil":59139,"phone":59140,"piggy-bank":59141,"plane-up":59142,"plane":59143,"play-arrow":59144,"play-circle":59145,"print":59146,"raising-hands":59147,"reply-arrow":59148,"reply":59149,"reschedule":59150,"rostering":59151,"salary-sacrifice":59152,"save":59153,"schedule-send":59154,"schedule":59155,"search-person":59156,"search":59157,"send":59158,"speaker-active":59159,"speaker":59160,"star-award":59161,"star-badge":59162,"star-circle":59163,"star-medal":59164,"star":59165,"steps-circle":59166,"stopwatch":59167,"suitcase":59168,"surfing":59169,"survey":59170,"swag-pillar-benefit":59171,"swag-pillar-career":59172,"swag-pillar-money":59173,"swag-pillar-work":59174,"swag":59175,"swipe-right":59176,"switch":59177,"tag":59178,"target":59179,"teams":59180,"thumb-down":59181,"thumb-up":59182,"timesheet":59183,"touch-id":59184,"trash-bin":59185,"unlock":59186,"user":59187,"video-1":59188,"video-2":59189,"wallet":59190,"warning":59191,"academic-hat-outlined":59192,"accommodation-outlined":59193,"activate-outlined":59194,"add-credit-card-outlined":59195,"add-person-outlined":59196,"add-section-outlined":59197,"add-time-outlined":59198,"add":59199,"adjustment-outlined":59200,"afternoon-outlined":59201,"ai-outlined":59202,"alignment-2-outlined":59203,"alignment-outlined":59204,"all-caps":59205,"application-outlined":59206,"arrow-down":59207,"arrow-downwards":59208,"arrow-left":59209,"arrow-leftwards":59210,"arrow-right":59211,"arrow-rightwards":59212,"arrow-up":59213,"arrow-upwards":59214,"article-outlined":59215,"at-sign":59216,"auto-graph-outlined":59217,"automotive-outlined":59218,"bakery-outlined":59219,"bar-outlined":59220,"beauty-outlined":59221,"beer-outlined":59222,"bell-active-outlined":59223,"bell-outlined":59224,"bell-slash-outlined":59225,"bill-management-outlined":59226,"billing-outlined":59227,"body-outlined":59228,"bold":59229,"bolt-outlined":59230,"book-outlined":59231,"bookmark-added-outlined":59232,"bookmark-checked-outlined":59233,"bookmark-outlined":59234,"box-1-outlined":59235,"box-check-outlined":59236,"box-outlined":59237,"bullet-points":59238,"cake-outlined":59239,"calculator-outlined":59240,"calendar-dates-outlined":59241,"calendar-star-outlined":59242,"call-outlined":59243,"call-split-outlined":59244,"camera-outlined":59245,"cancel":59246,"car-forward-outlined":59247,"cashback-outlined":59248,"charging-station-outlined":59249,"chat-bubble-outlined":59250,"chat-unread-outlined":59251,"checkmark":59252,"circle-add-outlined":59253,"circle-cancel-outlined":59254,"circle-down-outlined":59255,"circle-info-outlined":59256,"circle-left-outlined":59257,"circle-ok-outlined":59258,"circle-question-outlined":59259,"circle-remove-outlined":59260,"circle-right-outlined":59261,"circle-up-outlined":59262,"circle-warning-outlined":59263,"clock-2-outlined":59264,"clock-in-outlined":59265,"clock-out-outlined":59266,"clock-outlined":59267,"cog-outlined":59268,"coin-outlined":59269,"coin-super-outlined":59270,"comment-outlined":59271,"contacts-outlined":59272,"contacts-user-outlined":59273,"credit-card-outlined":59274,"cultural-site-outlined":59275,"cup-outlined":59276,"dentistry-outlined":59277,"direction-arrows-outlined":59278,"directory-outlined":59279,"document-outlined":59280,"dollar-box-outlined":59281,"dollar-card-outlined":59282,"dollar-coin-shine-outlined":59283,"dollar-credit-card-outlined":59284,"dollar-sign":59285,"double-buildings-outlined":59286,"double-left-arrows":59287,"double-right-arrows":59288,"download-box-outlined":59289,"download-outlined":59290,"edit-template-outlined":59291,"electronics-outlined":59292,"email-outlined":59293,"end-break-outlined":59294,"enter-arrow":59295,"entertainment-outlined":59296,"envelope-outlined":59297,"evening-outlined":59298,"expense-approval-outlined":59299,"expense-outlined":59300,"explore-outlined":59301,"extension-outlined":59302,"external-link":59303,"eye-invisible-outlined":59304,"eye-outlined":59305,"face-id":59306,"face-meh-outlined":59307,"face-open-smiley-outlined":59308,"face-sad-outlined":59309,"face-smiley-outlined":59310,"fastfood-outlined":59311,"feed-outlined":59312,"file-certified-outlined":59313,"file-clone-outlined":59314,"file-copy-outlined":59315,"file-dispose-outlined":59316,"file-dollar-certified-outlined":59317,"file-dollar-outlined":59318,"file-download-outlined":59319,"file-export-outlined":59320,"file-lock-outlined":59321,"file-outlined":59322,"file-search-outlined":59323,"file-secured-outlined":59324,"file-statutory-outlined":59325,"file-verified-outlined":59326,"filter-outlined":59327,"fitness-outlined":59328,"folder-outlined":59329,"folder-upload-outlined":59330,"folder-user-outlined":59331,"form-outlined":59332,"funnel-filter-outline":59333,"goal-outlined":59334,"graph-outlined":59335,"grocery-outlined":59336,"hand-holding-user-outlined":59337,"handshake-outlined":59338,"happy-sun-outlined":59339,"health-bag-outlined":59340,"heart-outlined":59341,"home-active-outlined":59342,"home-outlined":59343,"id-card-outlined":59344,"image-outlined":59345,"import-outlined":59346,"instapay-outlined":59347,"italic":59348,"job-search-outlined":59349,"leave-approval-outlined":59350,"link-1":59351,"link-2":59352,"list-outlined":59353,"live-help-outlined":59354,"local_mall_outlined":59355,"location-on-outlined":59356,"location-outlined":59357,"lock-outlined":59358,"locked-file-outlined":59359,"log-out":59360,"mail-outlined":59361,"map-outlined":59362,"media-content-outlined":59363,"menu-close":59364,"menu-expand":59365,"menu-fold-outlined":59366,"menu-unfold-outlined":59367,"moneybag-outlined":59368,"moon-outlined":59369,"more-horizontal":59370,"more-vertical":59371,"morning-outlined":59372,"multiple-folders-outlined":59373,"multiple-users-outlined":59374,"near-me-outlined":59375,"node-outlined":59376,"number-points":59377,"number":59378,"overview-outlined":59379,"park-outlined":59380,"payment-summary-outlined":59381,"payslip-outlined":59382,"pencil-outlined":59383,"percentage":59384,"phone-outlined":59385,"piggy-bank-outlined":59386,"plane-outlined":59387,"play-circle-outlined":59388,"print-outlined":59389,"propane-tank-outlined":59390,"qr-code-outlined":59391,"qualification-outlined":59392,"re-assign":59393,"redeem":59394,"refresh":59395,"remove":59396,"reply-outlined":59397,"restart":59398,"restaurant-outlined":59399,"resume-outlined":59400,"return-arrow":59401,"rostering-outlined":59402,"safety-outlined":59403,"save-outlined":59404,"schedule-outlined":59405,"search-outlined":59406,"search-secured-outlined":59407,"send-outlined":59408,"share-1":59409,"share-2":59410,"share-outlined-2":59411,"share-outlined":59412,"shield-check-outlined":59413,"shop-outlined":59414,"shopping_basket_outlined":59415,"show-chart-outlined":59416,"single-down-arrow":59417,"single-left-arrow":59418,"single-right-arrow":59419,"single-up-arrow":59420,"smart-match-outlined":59421,"sparkle-outlined":59422,"speaker-active-outlined":59423,"speaker-outlined":59424,"star-circle-outlined":59425,"star-outlined":59426,"start-break-outlined":59427,"stash-outlined":59428,"stopwatch-outlined":59429,"strikethrough":59430,"styler-outlined":59431,"suitcase-clock-outlined":59432,"suitcase-outlined":59433,"survey-outlined":59434,"switch-outlined":59435,"sync":59436,"tag-outlined":59437,"target-outlined":59438,"tennis-outlined":59439,"thumb-down-outlined":59440,"thumb-up-outlined":59441,"ticket-outlined":59442,"timesheet-outlined":59443,"timesheets-outlined":59444,"today-outlined":59445,"transfer":59446,"transportation-outlined":59447,"trash-bin-outlined":59448,"umbrela-outlined":59449,"unavailability-outlined":59450,"unavailable":59451,"underline":59452,"union-outlined":59453,"unlock-outlined":59454,"upload-outlined":59455,"user-circle-outlined":59456,"user-gear-outlined":59457,"user-outlined":59458,"user-rectangle-outlined":59459,"video-1-outlined":59460,"video-2-outlined":59461,"volunteer-outlined":59462,"wallet-outlined":59463,"wellness-outlined":59464}

package/src/components/Icon/IconList.ts

@@ -182,6 +182,7 @@ const IconList = [
   'target',
   'teams',
   'thumb-down',
+  'thumb-up',
   'timesheet',
   'touch-id',
   'trash-bin',
@@ -440,6 +441,7 @@ const IconList = [
   'target-outlined',
   'tennis-outlined',
   'thumb-down-outlined',
+  'thumb-up-outlined',
   'ticket-outlined',
   'timesheet-outlined',
   'timesheets-outlined',

package/src/components/SegmentedControl/SegmentedItem.tsx

@@ -0,0 +1,192 @@
+import React, { ComponentProps } from 'react';
+import Badge from '../Badge';
+import Icon from '../Icon';
+import Typography from '../Typography';
+import {
+  StyledSegmentedItem,
+  StyledSegmentedItemLabelWrapper,
+  StyledSegmentedItemText,
+  StyledSegmentedItemWrapper,
+} from './StyledSegmentedControl';
+import type {
+  CounterBadgeType,
+  SegmentedControlItemConfig,
+  StatusBadgeType,
+} from './types';
+import Box from '../Box';
+
+const DOT_CHAR = '\u00B7';
+type TypographyIntent = ComponentProps<typeof Typography.Body>['intent'];
+type IconIntent = ComponentProps<typeof Icon>['intent'];
+
+export interface SegmentedItemProps extends SegmentedControlItemConfig {
+  /**
+   * Whether the segment option is selected.
+   */
+  selected?: boolean;
+  /**
+   * The size of the segment option.
+   */
+  size?: 'medium' | 'large';
+  /**
+   * The callback function to be called when the segment option is pressed.
+   */
+  onPress: () => void;
+}
+
+const SegmentedItemBadge = ({
+  children,
+  badge,
+  testID,
+}: {
+  children?: React.ReactNode;
+  badge?: StatusBadgeType | CounterBadgeType;
+  testID?: string;
+}) => {
+  if (!badge) return children;
+
+  if (badge.type === 'status') {
+    return (
+      <Badge.Status visible testID={testID}>
+        <Box marginEnd="smallMedium">{children}</Box>
+      </Badge.Status>
+    );
+  }
+
+  if (badge.type === 'counter') {
+    return (
+      <>
+        <Box marginEnd="xsmall">{children}</Box>
+        <Badge
+          visible
+          content={badge.value}
+          max={badge.max}
+          testID={testID}
+          size="small"
+        />
+      </>
+    );
+  }
+};
+
+const getTextAndIconIntent = ({
+  selected,
+  disabled,
+}: {
+  selected?: boolean;
+  disabled?: boolean;
+}): {
+  iconIntent: IconIntent;
+  textIntent: TypographyIntent;
+  subTextIntent: TypographyIntent;
+} => {
+  if (disabled) {
+    return {
+      iconIntent: 'disabled-text',
+      textIntent: 'disabled',
+      subTextIntent: 'disabled',
+    };
+  }
+
+  if (selected) {
+    return {
+      iconIntent: 'text',
+      textIntent: 'body',
+      subTextIntent: 'muted',
+    };
+  }
+
+  return {
+    iconIntent: 'inactive',
+    textIntent: 'inactive',
+    subTextIntent: 'inactive',
+  };
+};
+
+const SegmentedItem = ({
+  label,
+  prefix,
+  suffix,
+  selected = false,
+  size = 'medium',
+  testID,
+  onPress,
+  disabled,
+  badge,
+  subText,
+}: SegmentedItemProps) => {
+  const { iconIntent, textIntent, subTextIntent } = getTextAndIconIntent({
+    selected,
+    disabled,
+  });
+
+  const shouldShowSuffix = !!label && !!suffix;
+
+  return (
+    <StyledSegmentedItem
+      themeSize={size}
+      themeSelected={selected}
+      testID={testID}
+      onPress={onPress}
+      disabled={disabled}
+    >
+      <SegmentedItemBadge badge={badge} testID={`${testID}-badge`}>
+        <StyledSegmentedItemWrapper>
+          {/* Prefix */}
+          {prefix && (
+            <Icon
+              icon={prefix}
+              intent={iconIntent}
+              size="xxxsmall"
+              testID={`${testID}-prefix`}
+            />
+          )}
+
+          {/* Label and subtext */}
+
+          {!!label && (
+            <StyledSegmentedItemLabelWrapper>
+              {label && (
+                <StyledSegmentedItemText
+                  variant="small-bold"
+                  intent={textIntent}
+                >
+                  {label}
+                </StyledSegmentedItemText>
+              )}
+
+              {subText && (
+                <>
+                  <StyledSegmentedItemText
+                    variant="small"
+                    intent={subTextIntent}
+                  >
+                    {DOT_CHAR}
+                  </StyledSegmentedItemText>
+                  <StyledSegmentedItemText
+                    variant="small"
+                    intent={subTextIntent}
+                  >
+                    {subText}
+                  </StyledSegmentedItemText>
+                </>
+              )}
+            </StyledSegmentedItemLabelWrapper>
+          )}
+
+          {/* Suffix, only shown if there is a label and suffix */}
+          {shouldShowSuffix && (
+            <Icon
+              icon={suffix}
+              intent={iconIntent}
+              size="xxxsmall"
+              testID={`${testID}-suffix`}
+            />
+          )}
+        </StyledSegmentedItemWrapper>
+      </SegmentedItemBadge>
+    </StyledSegmentedItem>
+  );
+};
+
+export default SegmentedItem;

package/src/components/SegmentedControl/StyledSegmentedControl.tsx

@@ -0,0 +1,62 @@
+import styled from '@emotion/native';
+import { TouchableOpacity } from 'react-native';
+import Box from '../Box';
+import Typography from '../Typography';
+
+const StyledSegmentedControlWrapper = styled(Box)<{
+  themeSize: 'medium' | 'large';
+}>(({ themeSize, theme }) => ({
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: theme.__hd__.segmentedControl.sizes.wrapperHeight[themeSize],
+  borderRadius: theme.__hd__.segmentedControl.radii.wrapper[themeSize],
+  backgroundColor: theme.__hd__.segmentedControl.colors.wrapperBackground,
+  alignSelf: 'flex-start',
+  paddingHorizontal:
+    theme.__hd__.segmentedControl.space.wrapperHorizontalPadding,
+}));
+
+const StyledSegmentedItem = styled(TouchableOpacity)<{
+  themeSize: 'medium' | 'large';
+  themeSelected: boolean;
+}>(({ themeSize, theme, themeSelected }) => ({
+  flexGrow: 1,
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: theme.__hd__.segmentedControl.sizes.itemHeight[themeSize],
+  borderRadius: theme.__hd__.segmentedControl.radii.item[themeSize],
+  backgroundColor: themeSelected
+    ? theme.__hd__.segmentedControl.colors.itemBackground.active
+    : theme.__hd__.segmentedControl.colors.itemBackground.inactive,
+  ...theme.__hd__.segmentedControl.shadows.item[
+    themeSelected ? 'active' : 'inactive'
+  ],
+}));
+
+const StyledSegmentedItemWrapper = styled(Box)(({ theme }) => ({
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: theme.__hd__.segmentedControl.space.itemAffixGap,
+}));
+
+const StyledSegmentedItemLabelWrapper = styled(Box)(({ theme }) => ({
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: theme.__hd__.segmentedControl.space.itemLabelGap,
+}));
+
+const StyledSegmentedItemText = styled(Typography.Body)(({ theme }) => ({
+  lineHeight: theme.__hd__.segmentedControl.lineHeights.itemText,
+}));
+
+export {
+  StyledSegmentedControlWrapper,
+  StyledSegmentedItem,
+  StyledSegmentedItemLabelWrapper,
+  StyledSegmentedItemText,
+  StyledSegmentedItemWrapper,
+};

package/src/components/SegmentedControl/__tests__/SegmentedItem.spec.tsx

@@ -0,0 +1,162 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react-native';
+import SegmentedItem from '../SegmentedItem';
+import type { SegmentedItemProps } from '../SegmentedItem';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import { scale } from '../../../utils/scale';
+
+describe('SegmentedItem', () => {
+  const defaultProps: SegmentedItemProps = {
+    value: 'test-item',
+    label: 'Test Item',
+    onPress: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render correctly with default props', () => {
+    const { toJSON, getByText } = renderWithTheme(
+      <SegmentedItem {...defaultProps} />
+    );
+
+    expect(getByText('Test Item')).toBeVisible();
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  describe('sizing', () => {
+    it.each`
+      size        | expectedHeight
+      ${'medium'} | ${scale(28)}
+      ${'large'}  | ${scale(36)}
+    `(
+      'should have correct height of $expectedHeight for $size size',
+      ({ size, expectedHeight }) => {
+        const { getByTestId } = renderWithTheme(
+          <SegmentedItem
+            {...defaultProps}
+            size={size}
+            testID="segmented-item"
+          />
+        );
+
+        const item = getByTestId('segmented-item');
+        expect(item).toHaveStyle({ height: expectedHeight });
+      }
+    );
+  });
+
+  it('should not call onPress when disabled', () => {
+    const onPress = jest.fn();
+    const { getByText } = renderWithTheme(
+      <SegmentedItem {...defaultProps} onPress={onPress} disabled />
+    );
+
+    fireEvent.press(getByText('Test Item'));
+    expect(onPress).not.toHaveBeenCalled();
+  });
+
+  it('should display icons when provided', () => {
+    const { getByTestId } = renderWithTheme(
+      <SegmentedItem
+        {...defaultProps}
+        prefix="home-outlined"
+        suffix="cog-outlined"
+        testID="item-with-icons"
+      />
+    );
+
+    expect(getByTestId('item-with-icons-suffix')).toBeVisible();
+    expect(getByTestId('item-with-icons-prefix')).toBeVisible();
+    expect(getByTestId('item-with-icons')).toBeVisible();
+  });
+
+  it.each`
+    value | max          | expectedText
+    ${10} | ${10}        | ${'10'}
+    ${15} | ${10}        | ${'10+'}
+    ${99} | ${undefined} | ${'99'}
+  `(
+    'should display count badge $expectedText for $value and $max',
+    ({ value, max, expectedText }) => {
+      const { getByText } = renderWithTheme(
+        <SegmentedItem
+          {...defaultProps}
+          badge={{ type: 'counter', value, max }}
+        />
+      );
+
+      expect(getByText('Test Item')).toBeVisible();
+      expect(getByText(expectedText)).toBeVisible();
+    }
+  );
+
+  it('should display status badge correctly', () => {
+    const { getByText, getByTestId } = renderWithTheme(
+      <SegmentedItem
+        {...defaultProps}
+        badge={{ type: 'status' }}
+        testID="item-with-status-badge"
+      />
+    );
+
+    expect(getByText('Test Item')).toBeVisible();
+    expect(getByTestId('item-with-status-badge-badge')).toBeVisible();
+  });
+
+  it('should display subtext when provided', () => {
+    const { getByText } = renderWithTheme(
+      <SegmentedItem {...defaultProps} subText="Secondary info" />
+    );
+
+    expect(getByText('Test Item')).toBeVisible();
+    expect(getByText('Secondary info')).toBeVisible();
+    expect(getByText('·')).toBeVisible(); // bullet separator
+  });
+
+  it('should render complex item with all features correctly', () => {
+    const { getByText, getByTestId } = renderWithTheme(
+      <SegmentedItem
+        value="complex-item"
+        label="Dashboard"
+        subText="Overview"
+        prefix="home-outlined"
+        suffix="cog-outlined"
+        badge={{ type: 'counter', value: 5, max: 3 }}
+        selected
+        size="large"
+        testID="complex-item"
+        onPress={jest.fn()}
+      />
+    );
+
+    // Label and subtext
+    expect(getByText('Dashboard')).toBeVisible();
+    expect(getByText('Overview')).toBeVisible();
+    expect(getByText('·')).toBeVisible(); // bullet separator
+
+    // Icons
+    expect(getByTestId('complex-item-prefix')).toBeVisible();
+    expect(getByTestId('complex-item-suffix')).toBeVisible();
+
+    // Badge (over max)
+    expect(getByText('3+')).toBeVisible();
+
+    // Main item
+    expect(getByTestId('complex-item')).toBeVisible();
+    expect(getByTestId('complex-item')).toHaveStyle({
+      height: scale(36),
+    }); // large size
+  });
+
+  it('should call onPress when pressed', () => {
+    const onPress = jest.fn();
+    const { getByText } = renderWithTheme(
+      <SegmentedItem {...defaultProps} onPress={onPress} />
+    );
+
+    fireEvent.press(getByText('Test Item'));
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+});

package/src/components/SegmentedControl/__tests__/__snapshots__/SegmentedItem.spec.tsx.snap

@@ -0,0 +1,131 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SegmentedItem should render correctly with default props 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "alignItems": "center",
+        "backgroundColor": "transparent",
+        "borderRadius": 12,
+        "flexDirection": "row",
+        "flexGrow": 1,
+        "height": 28,
+        "justifyContent": "center",
+        "opacity": 1,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {},
+          [
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "gap": 8,
+              "justifyContent": "center",
+            },
+            undefined,
+          ],
+        ]
+      }
+    >
+      <View
+        style={
+          [
+            {},
+            [
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "gap": 4,
+                "justifyContent": "center",
+              },
+              undefined,
+            ],
+          ]
+        }
+      >
+        <Text
+          allowFontScaling={false}
+          style={
+            [
+              {
+                "color": "#808f91",
+                "fontFamily": "BeVietnamPro-SemiBold",
+                "fontSize": 14,
+                "letterSpacing": 0.24,
+                "lineHeight": 22,
+              },
+              [
+                {},
+                undefined,
+              ],
+            ]
+          }
+          themeIntent="inactive"
+          themeTypeface="neutral"
+          themeVariant="small-bold"
+        >
+          Test Item
+        </Text>
+      </View>
+    </View>
+  </View>
+  <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>
+`;