@hero-design/rn 8.123.1-test-dispatch-downstream.0 → 8.124.0

package/CHANGELOG.md

@@ -1,44 +1,44 @@
 # @hero-design/rn
 
-## 8.123.1-test-dispatch-downstream.0
+## 8.124.0
 
-### Patch Changes
+### Minor Changes
 
-- test
+- [#5023](https://github.com/Thinkei/hero-design/pull/5023) [`7d35f92916acd42649e79f2f276dff3cf94a5a03`](https://github.com/Thinkei/hero-design/commit/7d35f92916acd42649e79f2f276dff3cf94a5a03) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [Tag] Support icon and rightIcon props
 
-- Updated dependencies []:
-  - @hero-design/react-native-month-year-picker@8.45.3-test-dispatch-downstream.0
-  - @hero-design/colors@8.47.4-test-dispatch-downstream.0
+## 8.123.0
 
-## 8.120.2-test-dispatch-downstream.2
+### Minor Changes
 
-### Patch Changes
+- [#5000](https://github.com/Thinkei/hero-design/pull/5000) [`65005affb073e5de21dbe2511a8ef42251aa21ca`](https://github.com/Thinkei/hero-design/commit/65005affb073e5de21dbe2511a8ef42251aa21ca) Thanks [@phucdph](https://github.com/phucdph)! - Add `InlineLoader` component for React Native with idle, loading, success, and error states. Supports five text size variants (10–18px), a neutral intent and an AI intent with animated gradient text for the loading state.
 
-- test dispatch workflow
+## 8.122.0
 
-- Updated dependencies []:
-  - @hero-design/react-native-month-year-picker@8.45.3-test-dispatch-downstream.2
-  - @hero-design/colors@8.47.4-test-dispatch-downstream.2
+### Minor Changes
 
-## 8.120.2-test-dispatch-downstream.1
+- [#4992](https://github.com/Thinkei/hero-design/pull/4992) [`87bd2b334180c9908328a7cdd2e686694dae1d7d`](https://github.com/Thinkei/hero-design/commit/87bd2b334180c9908328a7cdd2e686694dae1d7d) Thanks [@haudao-eh](https://github.com/haudao-eh)! - [Avatar] Add `neutral` intent to Avatar. `neutral` is now the default intent, replacing `primary`.
 
-### Patch Changes
+  **Note:** Any Avatar rendered without an explicit `intent` prop will now
+  display a teal-grey background instead of dark purple. Add `intent="primary"`
+  to preserve the previous appearance.
 
-- test
+## 8.121.0
 
-- Updated dependencies []:
-  - @hero-design/react-native-month-year-picker@8.45.3-test-dispatch-downstream.1
-  - @hero-design/colors@8.47.4-test-dispatch-downstream.1
+### Minor Changes
 
-## 8.120.2-test-dispatch-downstream.0
+- [#4963](https://github.com/Thinkei/hero-design/pull/4963) [`8921509e3c0271abe2c0df377316fc5ded154a05`](https://github.com/Thinkei/hero-design/commit/8921509e3c0271abe2c0df377316fc5ded154a05) Thanks [@ttkien](https://github.com/ttkien)! - [Icon] add 'ai' intent
+
+- [#4968](https://github.com/Thinkei/hero-design/pull/4968) [`654135e5178e2ab74dc6e9d80edb7bdab60275d7`](https://github.com/Thinkei/hero-design/commit/654135e5178e2ab74dc6e9d80edb7bdab60275d7) Thanks [@ttkien](https://github.com/ttkien)! - [PS-2754] Add ai intent to RN Typography components
 
 ### Patch Changes
 
-- bump test version
+- [#4972](https://github.com/Thinkei/hero-design/pull/4972) [`4caa323ce232ef982bab8e3845aadc6b493a3804`](https://github.com/Thinkei/hero-design/commit/4caa323ce232ef982bab8e3845aadc6b493a3804) Thanks [@ttkien](https://github.com/ttkien)! - Fix GradientText cross-axis stretch in row containers
 
-- Updated dependencies []:
-  - @hero-design/colors@8.47.4-test-dispatch-downstream.0
-  - @hero-design/react-native-month-year-picker@8.45.3-test-dispatch-downstream.0
+## 8.120.2
+
+### Patch Changes
+
+- [#4962](https://github.com/Thinkei/hero-design/pull/4962) [`78197ad0e210611eedab518bf088e7ee1c872fc3`](https://github.com/Thinkei/hero-design/commit/78197ad0e210611eedab518bf088e7ee1c872fc3) Thanks [@phucdph](https://github.com/phucdph)! - Update sparkle outlined icon
 
 ## 8.120.1
 

package/CLAUDE.md

@@ -0,0 +1,35 @@
+# @hero-design/rn
+
+React Native component library for Hero Design. Built with TypeScript and emotion (`@emotion/native`).
+
+## File Organization
+
+- Entry: `ComponentName/index.tsx` (exports main component, often compound)
+- Component: `ComponentName/ComponentName.tsx` (main implementation)
+- Styled: `ComponentName/StyledComponentName.tsx`
+- Sub-components: `ComponentName/SubComponentName/index.tsx`
+- Types: `ComponentName/types.ts` (if needed)
+- Tests: `ComponentName/__tests__/ComponentName.spec.tsx`
+
+## Conventions
+
+- Import `styled` from `@emotion/native`; use `useTheme()` hook (no prop drilling)
+- Styled props: `themeButtonVariant`, `themeIsPressed`, `themeIsCompact` pattern
+- Use `theme.__hd__.componentName.*` tokens (component-specific) over global tokens
+- JSDoc on each prop; include `testID?: string` for testing
+- Functional components; React Native primitives (`Text`, `View`, not HTML); strict TypeScript
+
+## Testing
+
+- Use `renderWithTheme()` from `'../../../testHelpers/renderWithTheme'` for theme context
+- Use `@testing-library/react-native` + `jest` + `@testing-library/jest-native`
+- Handle nested styles with `StyleSheet.flatten()` when needed
+
+## Commands
+
+```bash
+yarn turbo run test --filter=@hero-design/rn -- -- ComponentName [--watch|--updateSnapshot]
+yarn workspace @hero-design/rn lint
+yarn workspace @hero-design/rn type-check
+yarn build:watch:rn
+```

package/es/index.js

@@ -7187,7 +7187,8 @@ var getTagTheme = function getTagTheme(theme) {
   };
   var space = {
     horizontalPadding: theme.space.small,
-    verticalPadding: theme.space.xsmall
+    verticalPadding: theme.space.xsmall,
+    iconGap: theme.space.xsmall
   };
   var radii = {
     "default": theme.radii.large
@@ -28546,7 +28547,10 @@ var StyledView = index$c(View)(function (_ref) {
     backgroundColor: theme.__hd__.tag.colors["".concat(themeIntent, "Background")],
     borderRadius: theme.__hd__.tag.radii["default"],
     paddingVertical: theme.__hd__.tag.space.verticalPadding,
-    paddingHorizontal: theme.__hd__.tag.space.horizontalPadding
+    paddingHorizontal: theme.__hd__.tag.space.horizontalPadding,
+    flexDirection: 'row',
+    alignItems: 'center',
+    alignSelf: 'flex-start'
   };
 });
 var StyledText$1 = index$c(Typography.Caption)(function (_ref2) {
@@ -28559,14 +28563,26 @@ var StyledText$1 = index$c(Typography.Caption)(function (_ref2) {
     textAlign: 'center'
   };
 });
+var StyledTagIcon = index$c(Icon)(function (_ref3) {
+  var themeIntent = _ref3.themeIntent,
+    themePosition = _ref3.themePosition,
+    theme = _ref3.theme;
+  return {
+    color: theme.__hd__.tag.colors[themeIntent],
+    marginRight: themePosition === 'left' ? theme.__hd__.tag.space.iconGap : undefined,
+    marginLeft: themePosition === 'right' ? theme.__hd__.tag.space.iconGap : undefined
+  };
+});
 
-var _excluded$9 = ["content", "variant", "intent", "style", "testID"];
+var _excluded$9 = ["content", "icon", "variant", "intent", "rightIcon", "style", "testID"];
 var Tag = function Tag(_ref) {
   var content = _ref.content,
+    icon = _ref.icon,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'outlined' : _ref$variant,
     _ref$intent = _ref.intent,
     intent = _ref$intent === void 0 ? 'primary' : _ref$intent,
+    rightIcon = _ref.rightIcon,
     style = _ref.style,
     testID = _ref.testID,
     nativeProps = _objectWithoutProperties(_ref, _excluded$9);
@@ -28575,10 +28591,22 @@ var Tag = function Tag(_ref) {
     themeIntent: intent,
     style: style,
     testID: testID
+  }), icon !== undefined && /*#__PURE__*/React__default.createElement(StyledTagIcon, {
+    icon: icon,
+    size: "xsmall",
+    themeIntent: intent,
+    themePosition: "left",
+    testID: testID !== undefined ? "".concat(testID, "-left-icon") : undefined
   }), typeof content === 'string' ? /*#__PURE__*/React__default.createElement(StyledText$1, {
     themeIntent: intent,
     fontWeight: "semi-bold"
-  }, content) : content);
+  }, content) : content, rightIcon !== undefined && /*#__PURE__*/React__default.createElement(StyledTagIcon, {
+    icon: rightIcon,
+    size: "xsmall",
+    themeIntent: intent,
+    themePosition: "right",
+    testID: testID !== undefined ? "".concat(testID, "-right-icon") : undefined
+  }));
 };
 
 var StyledPickerWrapper = index$c(View)(function (_ref) {

package/lib/index.js

@@ -7217,7 +7217,8 @@ var getTagTheme = function getTagTheme(theme) {
   };
   var space = {
     horizontalPadding: theme.space.small,
-    verticalPadding: theme.space.xsmall
+    verticalPadding: theme.space.xsmall,
+    iconGap: theme.space.xsmall
   };
   var radii = {
     "default": theme.radii.large
@@ -28576,7 +28577,10 @@ var StyledView = index$c(reactNative.View)(function (_ref) {
     backgroundColor: theme.__hd__.tag.colors["".concat(themeIntent, "Background")],
     borderRadius: theme.__hd__.tag.radii["default"],
     paddingVertical: theme.__hd__.tag.space.verticalPadding,
-    paddingHorizontal: theme.__hd__.tag.space.horizontalPadding
+    paddingHorizontal: theme.__hd__.tag.space.horizontalPadding,
+    flexDirection: 'row',
+    alignItems: 'center',
+    alignSelf: 'flex-start'
   };
 });
 var StyledText$1 = index$c(Typography.Caption)(function (_ref2) {
@@ -28589,14 +28593,26 @@ var StyledText$1 = index$c(Typography.Caption)(function (_ref2) {
     textAlign: 'center'
   };
 });
+var StyledTagIcon = index$c(Icon)(function (_ref3) {
+  var themeIntent = _ref3.themeIntent,
+    themePosition = _ref3.themePosition,
+    theme = _ref3.theme;
+  return {
+    color: theme.__hd__.tag.colors[themeIntent],
+    marginRight: themePosition === 'left' ? theme.__hd__.tag.space.iconGap : undefined,
+    marginLeft: themePosition === 'right' ? theme.__hd__.tag.space.iconGap : undefined
+  };
+});
 
-var _excluded$9 = ["content", "variant", "intent", "style", "testID"];
+var _excluded$9 = ["content", "icon", "variant", "intent", "rightIcon", "style", "testID"];
 var Tag = function Tag(_ref) {
   var content = _ref.content,
+    icon = _ref.icon,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'outlined' : _ref$variant,
     _ref$intent = _ref.intent,
     intent = _ref$intent === void 0 ? 'primary' : _ref$intent,
+    rightIcon = _ref.rightIcon,
     style = _ref.style,
     testID = _ref.testID,
     nativeProps = _objectWithoutProperties(_ref, _excluded$9);
@@ -28605,10 +28621,22 @@ var Tag = function Tag(_ref) {
     themeIntent: intent,
     style: style,
     testID: testID
+  }), icon !== undefined && /*#__PURE__*/React__namespace.default.createElement(StyledTagIcon, {
+    icon: icon,
+    size: "xsmall",
+    themeIntent: intent,
+    themePosition: "left",
+    testID: testID !== undefined ? "".concat(testID, "-left-icon") : undefined
   }), typeof content === 'string' ? /*#__PURE__*/React__namespace.default.createElement(StyledText$1, {
     themeIntent: intent,
     fontWeight: "semi-bold"
-  }, content) : content);
+  }, content) : content, rightIcon !== undefined && /*#__PURE__*/React__namespace.default.createElement(StyledTagIcon, {
+    icon: rightIcon,
+    size: "xsmall",
+    themeIntent: intent,
+    themePosition: "right",
+    testID: testID !== undefined ? "".concat(testID, "-right-icon") : undefined
+  }));
 };
 
 var StyledPickerWrapper = index$c(reactNative.View)(function (_ref) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.123.1-test-dispatch-downstream.0",
+  "version": "8.124.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -22,14 +22,14 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.47.4-test-dispatch-downstream.0",
+    "@hero-design/colors": "8.47.3",
     "d3": "^7.8.5",
     "date-fns": "^2.30.0",
     "hero-editor": "^1.17.0",
     "nanoid": "^5.0.9"
   },
   "peerDependencies": {
-    "@hero-design/react-native-month-year-picker": "^8.45.3-test-dispatch-downstream.0",
+    "@hero-design/react-native-month-year-picker": "^8.45.2",
     "@ptomasroos/react-native-multi-slider": "^2.2.2",
     "@react-native-community/datetimepicker": "^8.4.4",
     "@react-native-community/slider": "^5.0.1",
@@ -58,8 +58,8 @@
     "@eslint/compat": "^1.1.1",
     "@eslint/eslintrc": "^3.1.0",
     "@eslint/js": "^9.8.0",
-    "@hero-design/eslint-plugin": "9.2.4-test-dispatch-downstream.0",
-    "@hero-design/react-native-month-year-picker": "^8.45.3-test-dispatch-downstream.0",
+    "@hero-design/eslint-plugin": "9.2.3",
+    "@hero-design/react-native-month-year-picker": "^8.45.2",
     "@ptomasroos/react-native-multi-slider": "^2.2.2",
     "@react-native-community/datetimepicker": "8.4.4",
     "@react-native-community/slider": "^5.0.1",
@@ -83,12 +83,12 @@
     "babel-plugin-inline-import": "^3.0.0",
     "core-js": "^3.33.0",
     "eslint": "^8.56.0",
-    "eslint-config-hd": "8.42.6-test-dispatch-downstream.0",
+    "eslint-config-hd": "8.42.5",
     "expo-linear-gradient": "55.0.9",
     "jest": "^29.2.1",
     "jest-environment-jsdom": "^29.2.1",
     "jest-junit": "^16.0.0",
-    "prettier-config-hd": "8.42.5-test-dispatch-downstream.0",
+    "prettier-config-hd": "8.42.4",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-native": "0.81.5",

package/src/components/Tag/StyledTag.tsx

@@ -1,6 +1,7 @@
 import styled from '@emotion/native';
 import { View } from 'react-native';
 import Typography from '../Typography';
+import Icon from '../Icon';
 
 type ThemeIntent =
   | 'primary'
@@ -18,6 +19,9 @@ const StyledView = styled(View)<{
     borderRadius: theme.__hd__.tag.radii.default,
     paddingVertical: theme.__hd__.tag.space.verticalPadding,
     paddingHorizontal: theme.__hd__.tag.space.horizontalPadding,
+    flexDirection: 'row',
+    alignItems: 'center',
+    alignSelf: 'flex-start',
   };
 });
 
@@ -32,4 +36,15 @@ const StyledText = styled(Typography.Caption)<{
   };
 });
 
-export { StyledText, StyledView };
+const StyledTagIcon = styled(Icon)<{
+  themeIntent: ThemeIntent;
+  themePosition: 'left' | 'right';
+}>(({ themeIntent, themePosition, theme }) => ({
+  color: theme.__hd__.tag.colors[themeIntent],
+  marginRight:
+    themePosition === 'left' ? theme.__hd__.tag.space.iconGap : undefined,
+  marginLeft:
+    themePosition === 'right' ? theme.__hd__.tag.space.iconGap : undefined,
+}));
+
+export { StyledText, StyledView, StyledTagIcon };

package/src/components/Tag/index.tsx

@@ -1,18 +1,27 @@
 import type { ReactElement } from 'react';
 import React from 'react';
 import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
-import { StyledText, StyledView } from './StyledTag';
+import { StyledText, StyledView, StyledTagIcon } from './StyledTag';
 import { useDeprecation } from '../../utils/hooks';
+import type { IconName } from '../Icon';
 
 interface TagProps extends ViewProps {
   /**
    * Content of the Tag.
    */
   content: string | ReactElement;
+  /**
+   * Places an icon within the tag, before the content.
+   */
+  icon?: IconName;
   /**
    * Visual intent color to apply to Tag.
    */
   intent?: 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'archived';
+  /**
+   * Places an icon within the tag, after the content.
+   */
+  rightIcon?: IconName;
   /**
    * @deprecated Tag variant prop is deprecated and will be removed in the next major release. Please remove it.
    *
@@ -31,8 +40,10 @@ interface TagProps extends ViewProps {
 
 const Tag = ({
   content,
+  icon,
   variant = 'outlined',
   intent = 'primary',
+  rightIcon,
   style,
   testID,
   ...nativeProps
@@ -49,6 +60,15 @@ const Tag = ({
       style={style}
       testID={testID}
     >
+      {icon !== undefined && (
+        <StyledTagIcon
+          icon={icon}
+          size="xsmall"
+          themeIntent={intent}
+          themePosition="left"
+          testID={testID !== undefined ? `${testID}-left-icon` : undefined}
+        />
+      )}
       {typeof content === 'string' ? (
         <StyledText themeIntent={intent} fontWeight="semi-bold">
           {content}
@@ -56,6 +76,15 @@ const Tag = ({
       ) : (
         content
       )}
+      {rightIcon !== undefined && (
+        <StyledTagIcon
+          icon={rightIcon}
+          size="xsmall"
+          themeIntent={intent}
+          themePosition="right"
+          testID={testID !== undefined ? `${testID}-right-icon` : undefined}
+        />
+      )}
     </StyledView>
   );
 };

package/src/theme/components/tag.ts

@@ -35,6 +35,7 @@ const getTagTheme = (theme: GlobalTheme) => {
   const space = {
     horizontalPadding: theme.space.small,
     verticalPadding: theme.space.xsmall,
+    iconGap: theme.space.xsmall,
   };
 
   const radii = {

package/types/components/Tag/StyledTag.d.ts

@@ -14,4 +14,11 @@ declare const StyledText: import("@emotion/native").StyledComponent<import("../.
 } & {
     themeIntent: ThemeIntent;
 }, {}, {}>;
-export { StyledText, StyledView };
+declare const StyledTagIcon: import("@emotion/native").StyledComponent<import("../Icon").IconProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    themeIntent: ThemeIntent;
+    themePosition: "left" | "right";
+}, {}, {}>;
+export { StyledText, StyledView, StyledTagIcon };

package/types/components/Tag/index.d.ts

@@ -1,14 +1,23 @@
 import type { ReactElement } from 'react';
 import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
+import type { IconName } from '../Icon';
 interface TagProps extends ViewProps {
     /**
      * Content of the Tag.
      */
     content: string | ReactElement;
+    /**
+     * Places an icon within the tag, before the content.
+     */
+    icon?: IconName;
     /**
      * Visual intent color to apply to Tag.
      */
     intent?: 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'archived';
+    /**
+     * Places an icon within the tag, after the content.
+     */
+    rightIcon?: IconName;
     /**
      * @deprecated Tag variant prop is deprecated and will be removed in the next major release. Please remove it.
      *
@@ -24,5 +33,5 @@ interface TagProps extends ViewProps {
      */
     testID?: string;
 }
-declare const Tag: ({ content, variant, intent, style, testID, ...nativeProps }: TagProps) => ReactElement;
+declare const Tag: ({ content, icon, variant, intent, rightIcon, style, testID, ...nativeProps }: TagProps) => ReactElement;
 export default Tag;

package/types/theme/components/tag.d.ts

@@ -27,6 +27,7 @@ declare const getTagTheme: (theme: GlobalTheme) => {
     space: {
         horizontalPadding: number;
         verticalPadding: number;
+        iconGap: number;
     };
     radii: {
         default: number;