@hitachivantara/uikit-react-core 5.94.0 → 5.95.1

package/dist/cjs/Avatar/Avatar.styles.cjs

@@ -37,7 +37,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvAvatar",
   md: { width: 40, height: 40, fontSize: "1rem" },
   lg: { width: 52, height: 52, fontSize: "1.5rem" },
   xl: { width: 88, height: 88, fontSize: "2rem" },
-  avatar: {},
+  avatar: { borderRadius: "inherit" },
   badge: {
     width: 8,
     height: 8,

package/dist/cjs/Badge/Badge.styles.cjs

@@ -9,7 +9,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBadge", {
     ":has($badgeIcon)": {
       width: "fit-content",
       height: "fit-content",
-      "&>div:first-child": {
+      "&>div:first-of-type": {
         minWidth: 32,
         minHeight: 32,
         "--icsize": "100%"

package/dist/cjs/BaseCheckBox/BaseCheckBox.cjs

@@ -24,6 +24,8 @@ const HvBaseCheckBox = React.forwardRef(function HvBaseCheckBox2(props, ref) {
     readOnly = false,
     disabled = false,
     semantic = false,
+    color,
+    style,
     ...others
   } = uikitReactUtils.useDefaultProps("HvBaseCheckBox", props);
   const { classes, cx } = BaseCheckBox_styles.useClasses(classesProp);
@@ -51,7 +53,7 @@ const HvBaseCheckBox = React.forwardRef(function HvBaseCheckBox2(props, ref) {
     },
     [onFocusVisible]
   );
-  const params = { indeterminate, disabled, semantic };
+  const params = { indeterminate, disabled, semantic, color };
   return /* @__PURE__ */ jsxRuntime.jsx(
     MuiCheckbox__default.default,
     {

package/dist/cjs/BaseCheckBox/CheckBoxIcon.cjs

@@ -13,7 +13,7 @@ const { useClasses } = uikitReactUtils.createClasses("HvCheckBoxIcon", {
   },
   checked: {
     borderColor: "transparent",
-    backgroundColor: uikitStyles.theme.colors.primaryStrong,
+    backgroundColor: `var(--bg-color, ${uikitStyles.theme.colors.primaryStrong})`,
     color: uikitStyles.theme.colors.bgContainer
   },
   indeterminate: {
@@ -42,7 +42,8 @@ const HvCheckBoxIcon = (props) => {
     classes: classesProp,
     variant,
     disabled,
-    semantic
+    semantic,
+    color
   } = uikitReactUtils.useDefaultProps("HvCheckBoxIcon", props);
   const { classes, cx } = useClasses(classesProp, false);
   const d = React.useMemo(() => {
@@ -67,6 +68,7 @@ const HvCheckBoxIcon = (props) => {
         [classes.semantic]: semantic,
         [classes.disabled]: disabled
       }),
+      style: uikitReactUtils.mergeStyles({}, { "--bg-color": uikitStyles.getColor(color) }),
       children: /* @__PURE__ */ jsxRuntime.jsx("path", { d })
     }
   );

package/dist/cjs/BaseRadio/BaseRadio.cjs

@@ -22,6 +22,7 @@ const HvBaseRadio = React.forwardRef(
       onChange,
       semantic,
       inputProps,
+      color,
       onFocusVisible,
       onBlur,
       ...others
@@ -66,7 +67,7 @@ const HvBaseRadio = React.forwardRef(
           className
         ),
         icon: /* @__PURE__ */ jsxRuntime.jsx(RadioIcon.HvRadioIcon, { disabled }),
-        checkedIcon: /* @__PURE__ */ jsxRuntime.jsx(RadioIcon.HvRadioIcon, { checked: true, disabled }),
+        checkedIcon: /* @__PURE__ */ jsxRuntime.jsx(RadioIcon.HvRadioIcon, { checked: true, disabled, color }),
         color: "default",
         disabled,
         required,

package/dist/cjs/BaseRadio/RadioIcon.cjs

@@ -12,7 +12,7 @@ const { useClasses } = uikitReactUtils.createClasses("HvRadioIcon", {
   },
   checked: {
     borderColor: "transparent",
-    backgroundColor: uikitStyles.theme.colors.primaryStrong,
+    backgroundColor: `var(--bg-color, ${uikitStyles.theme.colors.primaryStrong})`,
     color: uikitStyles.theme.colors.bgContainer
   },
   disabled: {
@@ -30,7 +30,8 @@ const HvRadioIcon = (props) => {
     className,
     classes: classesProp,
     checked,
-    disabled
+    disabled,
+    color
   } = uikitReactUtils.useDefaultProps("HvRadioIcon", props);
   const { classes, cx } = useClasses(classesProp, false);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -42,6 +43,7 @@ const HvRadioIcon = (props) => {
         [classes.disabled]: disabled,
         [classes.checkedDisabled]: checked && disabled
       }),
+      style: uikitReactUtils.mergeStyles({}, { "--bg-color": uikitStyles.getColor(color) }),
       children: checked && /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "4.5" })
     }
   );

package/dist/esm/Avatar/Avatar.styles.js

@@ -35,7 +35,7 @@ const { staticClasses, useClasses } = createClasses("HvAvatar", {
   md: { width: 40, height: 40, fontSize: "1rem" },
   lg: { width: 52, height: 52, fontSize: "1.5rem" },
   xl: { width: 88, height: 88, fontSize: "2rem" },
-  avatar: {},
+  avatar: { borderRadius: "inherit" },
   badge: {
     width: 8,
     height: 8,

package/dist/esm/Badge/Badge.styles.js

@@ -7,7 +7,7 @@ const { staticClasses, useClasses } = createClasses("HvBadge", {
     ":has($badgeIcon)": {
       width: "fit-content",
       height: "fit-content",
-      "&>div:first-child": {
+      "&>div:first-of-type": {
         minWidth: 32,
         minHeight: 32,
         "--icsize": "100%"

package/dist/esm/BaseCheckBox/BaseCheckBox.js

@@ -21,6 +21,8 @@ const HvBaseCheckBox = forwardRef(function HvBaseCheckBox2(props, ref) {
     readOnly = false,
     disabled = false,
     semantic = false,
+    color,
+    style,
     ...others
   } = useDefaultProps("HvBaseCheckBox", props);
   const { classes, cx } = useClasses(classesProp);
@@ -48,7 +50,7 @@ const HvBaseCheckBox = forwardRef(function HvBaseCheckBox2(props, ref) {
     },
     [onFocusVisible]
   );
-  const params = { indeterminate, disabled, semantic };
+  const params = { indeterminate, disabled, semantic, color };
   return /* @__PURE__ */ jsx(
     MuiCheckbox,
     {

package/dist/esm/BaseCheckBox/CheckBoxIcon.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { useDefaultProps, createClasses } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
+import { useDefaultProps, createClasses, mergeStyles } from "@hitachivantara/uikit-react-utils";
+import { getColor, theme } from "@hitachivantara/uikit-styles";
 import { SvgBase } from "../icons.js";
 const { useClasses } = createClasses("HvCheckBoxIcon", {
   root: {
@@ -11,7 +11,7 @@ const { useClasses } = createClasses("HvCheckBoxIcon", {
   },
   checked: {
     borderColor: "transparent",
-    backgroundColor: theme.colors.primaryStrong,
+    backgroundColor: `var(--bg-color, ${theme.colors.primaryStrong})`,
     color: theme.colors.bgContainer
   },
   indeterminate: {
@@ -40,7 +40,8 @@ const HvCheckBoxIcon = (props) => {
     classes: classesProp,
     variant,
     disabled,
-    semantic
+    semantic,
+    color
   } = useDefaultProps("HvCheckBoxIcon", props);
   const { classes, cx } = useClasses(classesProp, false);
   const d = useMemo(() => {
@@ -65,6 +66,7 @@ const HvCheckBoxIcon = (props) => {
         [classes.semantic]: semantic,
         [classes.disabled]: disabled
       }),
+      style: mergeStyles({}, { "--bg-color": getColor(color) }),
       children: /* @__PURE__ */ jsx("path", { d })
     }
   );

package/dist/esm/BaseRadio/BaseRadio.js

@@ -19,6 +19,7 @@ const HvBaseRadio = forwardRef(
       onChange,
       semantic,
       inputProps,
+      color,
       onFocusVisible,
       onBlur,
       ...others
@@ -63,7 +64,7 @@ const HvBaseRadio = forwardRef(
           className
         ),
         icon: /* @__PURE__ */ jsx(HvRadioIcon, { disabled }),
-        checkedIcon: /* @__PURE__ */ jsx(HvRadioIcon, { checked: true, disabled }),
+        checkedIcon: /* @__PURE__ */ jsx(HvRadioIcon, { checked: true, disabled, color }),
         color: "default",
         disabled,
         required,

package/dist/esm/BaseRadio/RadioIcon.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
-import { useDefaultProps, createClasses } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
+import { useDefaultProps, createClasses, mergeStyles } from "@hitachivantara/uikit-react-utils";
+import { getColor, theme } from "@hitachivantara/uikit-styles";
 import { SvgBase } from "../icons.js";
 const { useClasses } = createClasses("HvRadioIcon", {
   root: {
@@ -10,7 +10,7 @@ const { useClasses } = createClasses("HvRadioIcon", {
   },
   checked: {
     borderColor: "transparent",
-    backgroundColor: theme.colors.primaryStrong,
+    backgroundColor: `var(--bg-color, ${theme.colors.primaryStrong})`,
     color: theme.colors.bgContainer
   },
   disabled: {
@@ -28,7 +28,8 @@ const HvRadioIcon = (props) => {
     className,
     classes: classesProp,
     checked,
-    disabled
+    disabled,
+    color
   } = useDefaultProps("HvRadioIcon", props);
   const { classes, cx } = useClasses(classesProp, false);
   return /* @__PURE__ */ jsx(
@@ -40,6 +41,7 @@ const HvRadioIcon = (props) => {
         [classes.disabled]: disabled,
         [classes.checkedDisabled]: checked && disabled
       }),
+      style: mergeStyles({}, { "--bg-color": getColor(color) }),
       children: checked && /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "4.5" })
     }
   );

package/dist/types/index.d.ts

@@ -1072,7 +1072,7 @@ export declare interface HvAccordionProps extends HvBaseProps<HTMLDivElement, "o
     defaultExpanded?: boolean;
     /** An object containing props to be passed onto container holding the accordion children. */
     containerProps?: React.HTMLAttributes<HTMLDivElement>;
-    /** Heading level to apply to accordion button. If ´undefined´ the button won't have a header wrapper. */
+    /** Heading level to apply to accordion button. If `undefined` the button won't have a header wrapper. */
     headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
     /** Whether the accordion is disabled. */
     disabled?: boolean;
@@ -1313,9 +1313,9 @@ export declare interface HvAvatarProps extends HvBaseProps {
     /** A string representing the type of avatar to display, circular or square. */
     variant?: HvAvatarVariant;
     /** A string representing the color of the avatar border that represents its status. */
-    status?: string;
+    status?: HvColorAny;
     /** A string representing the color of the avatar badge. */
-    badge?: string;
+    badge?: HvColorAny;
     /** Attributes applied to the avatar element. */
     avatarProps?: AvatarProps;
     /** A Jss Object used to override or extend the styles applied to the component. */
@@ -1471,7 +1471,7 @@ export declare const HvBaseCheckBox: ForwardRefExoticComponent<Omit<HvBaseCheckB
 
 export declare type HvBaseCheckBoxClasses = ExtractNames<typeof useClasses_32>;
 
-export declare interface HvBaseCheckBoxProps extends Omit<CheckboxProps, "onChange" | "classes"> {
+export declare interface HvBaseCheckBoxProps extends Omit<CheckboxProps, "onChange" | "classes" | "color"> {
     /**
      * The input name.
      */
@@ -1532,6 +1532,10 @@ export declare interface HvBaseCheckBoxProps extends Omit<CheckboxProps, "onChan
      * Callback fired when the component is blurred.
      */
     onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+    /**
+     * Color applied to the check box.
+     */
+    color?: HvColorAny;
     /**
      * A Jss Object used to override or extend the styles applied to the checkbox.
      */
@@ -1698,7 +1702,7 @@ export declare const HvBaseRadio: ForwardRefExoticComponent<Omit<HvBaseRadioProp
 
 export declare type HvBaseRadioClasses = ExtractNames<typeof useClasses_33>;
 
-export declare interface HvBaseRadioProps extends Omit<RadioProps, "onChange" | "classes"> {
+export declare interface HvBaseRadioProps extends Omit<RadioProps, "onChange" | "classes" | "color"> {
     /**
      * Class names to be applied.
      */
@@ -1743,6 +1747,10 @@ export declare interface HvBaseRadioProps extends Omit<RadioProps, "onChange" |
      * When uncontrolled, defines the initial checked state.
      */
     defaultChecked?: boolean;
+    /**
+     * Color applied to the radio button.
+     */
+    color?: HvColorAny;
     /**
      * The callback fired when the radio button is pressed.
      */
@@ -3671,6 +3679,11 @@ declare type HvFooterProps_2<D extends object = Record<string, unknown>> = HvTab
  * analogous to MUI's [`FormControl`](https://mui.com/material-ui/api/form-control/) component.
  *
  * It is used internally to build UI Kit's form components (eg. `HvInput`, `HvDatePicker`), and can be used to build custom form components.
+ *
+ * It exposes the common properties to be shared between all form components: `required`, `disabled`, `readOnly`, and `status`.
+ *
+ * Along with the properties above, form components also share the `value`/`defaultValue` and `onChange` props,
+ * used to control the value of the form component, analogous to the native `input` component.
  */
 export declare const HvFormElement: {
     (props: HvFormElementProps): JSX_2.Element;
@@ -3734,6 +3747,10 @@ export declare type HvFormStatus = "standBy" | "valid" | "invalid" | "empty";
 /**
  * Global Actions are actions that affect the entire page they live in.
  * They should persist while scrolling down the screen.
+ *
+ * It uses `variant="global"` by default, rendering an `h1` element and applying sticky positioning.
+ * Use `variant="section"` to group related content blocks.
+ * Use it sparingly, as it introduces strong visual separation, which may not always be necessary.
  */
 export declare const HvGlobalActions: ForwardRefExoticComponent<HvGlobalActionsProps & RefAttributes<HTMLDivElement>>;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "5.94.0",
+  "version": "5.95.1",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Core React components for the NEXT Design System.",
@@ -32,9 +32,9 @@
   "dependencies": {
     "@emotion/cache": "^11.11.0",
     "@emotion/serialize": "^1.1.2",
-    "@hitachivantara/uikit-react-shared": "^5.4.3",
-    "@hitachivantara/uikit-react-utils": "^0.2.36",
-    "@hitachivantara/uikit-styles": "^5.47.0",
+    "@hitachivantara/uikit-react-shared": "^5.4.5",
+    "@hitachivantara/uikit-react-utils": "^0.2.38",
+    "@hitachivantara/uikit-styles": "^5.48.1",
     "@internationalized/date": "^3.2.0",
     "@mui/base": "5.0.0-beta.68",
     "@popperjs/core": "^2.11.8",
@@ -61,7 +61,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "d260751e0d2244d0f37e5368f954d5a261a6535e",
+  "gitHead": "5ed545e2d3d9374198340f910ac464cb84b309ed",
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",