@hitachivantara/uikit-react-core 6.8.1 → 6.9.0

package/dist/Button/Button.styles.js

@@ -1,129 +1,112 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
 import { outlineStyles } from "../utils/focusUtils.js";
-const { staticClasses, useClasses } = createClasses("HvButton", {
-  /** applied to the root element */
-  root: {
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    textTransform: "none",
-    cursor: "pointer",
-    whiteSpace: "nowrap",
-    // Background color common for almost all variants
-    ":where(:not($disabled))": {
-      ":hover, :focus-visible": {
-        backgroundColor: theme.colors.bgHover
-      }
-    },
-    ":focus-visible": {
-      ...outlineStyles
-    },
-    // Default button - no size specified
-    fontFamily: theme.fontFamily.body,
-    ...theme.typography.label,
-    color: "var(--color, currentcolor)",
-    backgroundColor: "transparent",
-    height: "var(--HvButton-height, fit-content)",
-    border: "1px solid transparent",
-    borderRadius: `var(--radius, ${theme.radii.base})`,
-    padding: theme.spacing(0, "sm"),
-    // remove icon container spacing
-    "--icsize": "auto",
-    "& $startIcon, & $endIcon": {
-      flexShrink: 0,
-      lineHeight: 0,
-      minWidth: 16
-    }
-  },
-  /** applied to the _left_ icon container */
-  startIcon: {
-    marginRight: 8
-  },
-  /** applied to the _right_ icon container */
-  endIcon: {
-    marginLeft: 8
-  },
-  focusVisible: {},
-  /** applied to the root element when disabled */
-  disabled: {
-    cursor: "not-allowed",
-    color: theme.colors.textDisabled,
-    backgroundColor: "transparent",
-    borderColor: "transparent",
-    ":hover, :focus-visible": {
-      backgroundColor: "transparent",
-      borderColor: "transparent"
-    }
-  },
-  /** applied to the root element when is icon-only */
-  icon: {
-    margin: 0,
-    padding: 0,
-    flexShrink: 0,
-    width: "var(--HvButton-height, fit-content)"
-  },
-  /** applied to the root element when using the `contained` variant */
-  contained: {
-    color: theme.colors.textDimmed,
-    // `color-contrast(var(--color) vs ${colors.textDimmed}, ${colors.textLight}, ${colors.textDark})`,
-    backgroundColor: "var(--color)",
-    ":where(:not($disabled))": {
-      ":hover, :focus-visible": {
-        backgroundColor: theme.mix("var(--color)", 0.8, "black")
-      },
-      ":active": {
-        backgroundColor: theme.mix("var(--color)", 0.7, "black")
-      }
-    }
-  },
-  /** applied to the root element when using the `subtle` variant */
-  subtle: {
-    borderColor: "currentcolor"
-  },
-  /** applied to the root element when using the `ghost` variant */
-  ghost: {},
-  /** applied to the root element when using the `semantic` variant */
-  semantic: {
-    color: theme.colors.textDark,
-    backgroundColor: "transparent",
-    borderColor: "transparent",
-    "&:hover, &:focus-visible": {
-      backgroundColor: theme.alpha("textLight", 0.3)
-    },
-    "&:active": {
-      backgroundColor: theme.alpha("textLight", 0.5)
-    },
-    "&$disabled": {
-      backgroundColor: theme.alpha("textLight", 0.1)
-    }
-  }
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/Button/Button.styles.ts
+var { staticClasses, useClasses } = createClasses("HvButton", {
+	/** applied to the root element */
+	root: {
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center",
+		textTransform: "none",
+		cursor: "pointer",
+		whiteSpace: "nowrap",
+		":where(:not($disabled))": { ":hover, :focus-visible": { backgroundColor: theme.colors.bgHover } },
+		":focus-visible": { ...outlineStyles },
+		fontFamily: theme.fontFamily.body,
+		...theme.typography.label,
+		color: "var(--color, currentcolor)",
+		backgroundColor: "transparent",
+		height: "var(--HvButton-height, fit-content)",
+		border: "1px solid transparent",
+		borderRadius: `var(--radius, ${theme.radii.base})`,
+		padding: theme.spacing(0, "sm"),
+		"--icsize": "auto",
+		"& $startIcon, & $endIcon": {
+			flexShrink: 0,
+			lineHeight: 0,
+			minWidth: 16
+		}
+	},
+	/** applied to the _left_ icon container */
+	startIcon: { marginRight: 8 },
+	/** applied to the _right_ icon container */
+	endIcon: { marginLeft: 8 },
+	focusVisible: {},
+	/** applied to the root element when disabled */
+	disabled: {
+		cursor: "not-allowed",
+		color: theme.colors.textDisabled,
+		backgroundColor: "transparent",
+		borderColor: "transparent",
+		":hover, :focus-visible": {
+			backgroundColor: "transparent",
+			borderColor: "transparent"
+		}
+	},
+	/** applied to the root element when is icon-only */
+	icon: {
+		margin: 0,
+		padding: 0,
+		flexShrink: 0,
+		width: "var(--HvButton-height, fit-content)"
+	},
+	/** applied to the root element when using the `contained` variant */
+	contained: {
+		color: theme.colors.textDimmed,
+		backgroundColor: "var(--color)",
+		":where(:not($disabled))": {
+			":hover, :focus-visible": { backgroundColor: theme.mix("var(--color)", .8, "black") },
+			":active": { backgroundColor: theme.mix("var(--color)", .7, "black") }
+		}
+	},
+	/** applied to the root element when using the `subtle` variant */
+	subtle: { borderColor: "currentcolor" },
+	/** applied to the root element when using the `ghost` variant */
+	ghost: {},
+	/** applied to the root element when using the `semantic` variant */
+	semantic: {
+		color: theme.colors.textDark,
+		backgroundColor: "transparent",
+		borderColor: "transparent",
+		"&:hover, &:focus-visible": { backgroundColor: theme.alpha("textLight", .3) },
+		"&:active": { backgroundColor: theme.alpha("textLight", .5) },
+		"&$disabled": { backgroundColor: theme.alpha("textLight", .1) }
+	}
 });
-const sizes = {
-  xs: { height: "24px", fontSize: "sm" },
-  sm: { height: "24px", fontSize: "sm" },
-  md: { height: "32px" },
-  lg: { height: "48px", space: "md" },
-  xl: { height: "48px", space: "md" }
-};
-const getSizeStyles = (size) => {
-  const { height, space = "sm", fontSize } = sizes[size];
-  return {
-    height,
-    padding: theme.spacing(0, space),
-    fontSize: fontSize && theme.fontSizes[fontSize]
-  };
+var sizes = {
+	xs: {
+		height: "24px",
+		fontSize: "sm"
+	},
+	sm: {
+		height: "24px",
+		fontSize: "sm"
+	},
+	md: { height: "32px" },
+	lg: {
+		height: "48px",
+		space: "md"
+	},
+	xl: {
+		height: "48px",
+		space: "md"
+	}
 };
-const getIconSizeStyles = (size) => {
-  const { height } = sizes[size];
-  return {
-    height,
-    width: height
-  };
+var getSizeStyles = (size) => {
+	const { height, space = "sm", fontSize } = sizes[size];
+	return {
+		height,
+		padding: theme.spacing(0, space),
+		fontSize: fontSize && theme.fontSizes[fontSize]
+	};
 };
-export {
-  getIconSizeStyles,
-  getSizeStyles,
-  staticClasses,
-  useClasses
+var getIconSizeStyles = (size) => {
+	const { height } = sizes[size];
+	return {
+		height,
+		width: height
+	};
 };
+//#endregion
+export { getIconSizeStyles, getSizeStyles, staticClasses, useClasses };

package/dist/ButtonBase/ButtonBase.js

@@ -1,54 +1,35 @@
-import { jsx } from "react/jsx-runtime";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { fixedForwardRef } from "../types/generic.js";
 import { useClasses } from "./ButtonBase.styles.js";
-import { staticClasses } from "./ButtonBase.styles.js";
-const HvButtonBase = fixedForwardRef(function HvButtonBase2(props, ref) {
-  const {
-    className,
-    classes: classesProp,
-    children,
-    selected,
-    disabled,
-    focusableWhenDisabled,
-    component: Component = "button",
-    onClick: onClickProp,
-    onMouseDown: onMouseDownProp,
-    ...others
-  } = useDefaultProps("HvButtonBase", props);
-  const { classes, cx } = useClasses(classesProp);
-  return /* @__PURE__ */ jsx(
-    Component,
-    {
-      ref,
-      className: cx(
-        classes.root,
-        {
-          [classes.disabled]: disabled
-        },
-        className
-      ),
-      onClick: (e) => {
-        if (disabled) return;
-        onClickProp?.(e);
-      },
-      onMouseDown: (e) => {
-        if (disabled) return;
-        onMouseDownProp?.(e);
-      },
-      ...Component === "button" && { type: "button" },
-      ...disabled && {
-        disabled: !focusableWhenDisabled,
-        tabIndex: focusableWhenDisabled ? 0 : -1,
-        "aria-disabled": true
-      },
-      ...selected && { "aria-pressed": selected },
-      ...others,
-      children
-    }
-  );
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { jsx } from "react/jsx-runtime";
+//#region src/ButtonBase/ButtonBase.tsx
+/**
+* Button component is used to trigger an action or event.
+*/
+var HvButtonBase = fixedForwardRef(function HvButtonBase(props, ref) {
+	const { className, classes: classesProp, children, selected, disabled, focusableWhenDisabled, component: Component = "button", onClick: onClickProp, onMouseDown: onMouseDownProp, ...others } = useDefaultProps("HvButtonBase", props);
+	const { classes, cx } = useClasses(classesProp);
+	return /* @__PURE__ */ jsx(Component, {
+		ref,
+		className: cx(classes.root, { [classes.disabled]: disabled }, className),
+		onClick: (e) => {
+			if (disabled) return;
+			onClickProp?.(e);
+		},
+		onMouseDown: (e) => {
+			if (disabled) return;
+			onMouseDownProp?.(e);
+		},
+		...Component === "button" && { type: "button" },
+		...disabled && {
+			disabled: !focusableWhenDisabled,
+			tabIndex: focusableWhenDisabled ? 0 : -1,
+			"aria-disabled": true
+		},
+		...selected && { "aria-pressed": selected },
+		...others,
+		children
+	});
 });
-export {
-  HvButtonBase,
-  staticClasses as buttonBaseClasses
-};
+//#endregion
+export { HvButtonBase };

package/dist/ButtonBase/ButtonBase.styles.js

@@ -1,32 +1,23 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
 import { outlineStyles } from "../utils/focusUtils.js";
-const { staticClasses, useClasses } = createClasses("HvButtonBase", {
-  root: {
-    display: "inline-flex",
-    cursor: "pointer",
-    background: "none",
-    padding: 0,
-    // Background color common for almost all variants
-    ":where(:not($disabled))": {
-      ":hover, :focus-visible": {
-        backgroundColor: theme.colors.bgHover
-      }
-    },
-    ":focus-visible": {
-      ...outlineStyles
-    },
-    // Default button - no size specified
-    fontFamily: theme.fontFamily.body,
-    fontSize: "inherit",
-    color: "inherit"
-  },
-  disabled: {
-    cursor: "not-allowed",
-    color: theme.colors.textDisabled
-  }
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/ButtonBase/ButtonBase.styles.ts
+var { staticClasses, useClasses } = createClasses("HvButtonBase", {
+	root: {
+		display: "inline-flex",
+		cursor: "pointer",
+		background: "none",
+		padding: 0,
+		":where(:not($disabled))": { ":hover, :focus-visible": { backgroundColor: theme.colors.bgHover } },
+		":focus-visible": { ...outlineStyles },
+		fontFamily: theme.fontFamily.body,
+		fontSize: "inherit",
+		color: "inherit"
+	},
+	disabled: {
+		cursor: "not-allowed",
+		color: theme.colors.textDisabled
+	}
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };

package/dist/Calendar/Calendar.js

@@ -1,104 +1,76 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useContext } from "react";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { useClasses } from "./Calendar.styles.js";
-import { staticClasses } from "./Calendar.styles.js";
-import { DEFAULT_LOCALE, isRange } from "./utils.js";
 import { HvFormElementValueContext } from "../FormElement/context.js";
+import { useClasses } from "./Calendar.styles.js";
+import { isRange } from "./utils.js";
 import { HvSingleCalendar } from "./SingleCalendar/SingleCalendar.js";
-const HvCalendar = (props) => {
-  const {
-    classes: classesProp,
-    id,
-    locale = DEFAULT_LOCALE,
-    value: valueProp,
-    visibleMonth,
-    visibleYear,
-    rightVisibleMonth,
-    rightVisibleYear,
-    minimumDate,
-    maximumDate,
-    startAdornment,
-    onChange,
-    onInputChange,
-    onVisibleDateChange,
-    invalidDateLabel,
-    ...others
-  } = useDefaultProps("HvCalendar", props);
-  const { classes } = useClasses(classesProp);
-  const elementValue = useContext(HvFormElementValueContext);
-  const value = valueProp ?? elementValue;
-  const rangeMode = isRange(value);
-  const clampedMonth = visibleMonth && visibleMonth % 13 > 0 ? visibleMonth % 13 : 1;
-  const singleCalendar = /* @__PURE__ */ jsx(
-    HvSingleCalendar,
-    {
-      id,
-      locale,
-      value,
-      visibleMonth: clampedMonth,
-      visibleYear,
-      minimumDate,
-      maximumDate,
-      onChange,
-      onInputChange: (evt, date) => {
-        onInputChange?.(evt, date, "left");
-      },
-      onVisibleDateChange,
-      invalidDateLabel,
-      ...others
-    }
-  );
-  const rangeCalendar = /* @__PURE__ */ jsxs("div", { className: classes.rangeCalendarContainer, children: [
-    /* @__PURE__ */ jsx(
-      HvSingleCalendar,
-      {
-        className: classes.singleCalendar,
-        id,
-        locale,
-        value,
-        visibleMonth: clampedMonth,
-        visibleYear,
-        minimumDate,
-        maximumDate,
-        onChange,
-        onInputChange: (evt, date) => {
-          onInputChange?.(evt, date, "left");
-        },
-        onVisibleDateChange: (event, action, index) => onVisibleDateChange?.(event, action, index, "left"),
-        invalidDateLabel,
-        ...others
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      HvSingleCalendar,
-      {
-        className: classes.singleCalendar,
-        locale,
-        value,
-        visibleMonth: rightVisibleMonth,
-        visibleYear: rightVisibleYear,
-        minimumDate,
-        maximumDate,
-        onChange,
-        onInputChange: (evt, date) => {
-          onInputChange?.(evt, date, "right");
-        },
-        onVisibleDateChange: (event, action, index) => {
-          onVisibleDateChange?.(event, action, index, "right");
-        },
-        showEndDate: true,
-        invalidDateLabel,
-        ...others
-      }
-    )
-  ] });
-  return /* @__PURE__ */ jsxs("div", { className: classes.root, children: [
-    startAdornment,
-    rangeMode ? rangeCalendar : singleCalendar
-  ] });
-};
-export {
-  HvCalendar,
-  staticClasses as calendarClasses
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Calendar/Calendar.tsx
+var HvCalendar = (props) => {
+	const { classes: classesProp, id, locale = "en", value: valueProp, visibleMonth, visibleYear, rightVisibleMonth, rightVisibleYear, minimumDate, maximumDate, startAdornment, onChange, onInputChange, onVisibleDateChange, invalidDateLabel, ...others } = useDefaultProps("HvCalendar", props);
+	const { classes } = useClasses(classesProp);
+	const elementValue = useContext(HvFormElementValueContext);
+	const value = valueProp ?? elementValue;
+	const rangeMode = isRange(value);
+	const clampedMonth = visibleMonth && visibleMonth % 13 > 0 ? visibleMonth % 13 : 1;
+	const singleCalendar = /* @__PURE__ */ jsx(HvSingleCalendar, {
+		id,
+		locale,
+		value,
+		visibleMonth: clampedMonth,
+		visibleYear,
+		minimumDate,
+		maximumDate,
+		onChange,
+		onInputChange: (evt, date) => {
+			onInputChange?.(evt, date, "left");
+		},
+		onVisibleDateChange,
+		invalidDateLabel,
+		...others
+	});
+	const rangeCalendar = /* @__PURE__ */ jsxs("div", {
+		className: classes.rangeCalendarContainer,
+		children: [/* @__PURE__ */ jsx(HvSingleCalendar, {
+			className: classes.singleCalendar,
+			id,
+			locale,
+			value,
+			visibleMonth: clampedMonth,
+			visibleYear,
+			minimumDate,
+			maximumDate,
+			onChange,
+			onInputChange: (evt, date) => {
+				onInputChange?.(evt, date, "left");
+			},
+			onVisibleDateChange: (event, action, index) => onVisibleDateChange?.(event, action, index, "left"),
+			invalidDateLabel,
+			...others
+		}), /* @__PURE__ */ jsx(HvSingleCalendar, {
+			className: classes.singleCalendar,
+			locale,
+			value,
+			visibleMonth: rightVisibleMonth,
+			visibleYear: rightVisibleYear,
+			minimumDate,
+			maximumDate,
+			onChange,
+			onInputChange: (evt, date) => {
+				onInputChange?.(evt, date, "right");
+			},
+			onVisibleDateChange: (event, action, index) => {
+				onVisibleDateChange?.(event, action, index, "right");
+			},
+			showEndDate: true,
+			invalidDateLabel,
+			...others
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: classes.root,
+		children: [startAdornment, rangeMode ? rangeCalendar : singleCalendar]
+	});
 };
+//#endregion
+export { HvCalendar };

package/dist/Calendar/Calendar.styles.js

@@ -1,34 +1,16 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const { staticClasses, useClasses } = createClasses("HvCalendar", {
-  root: {
-    display: "flex",
-    justifyContent: "center"
-  },
-  rangeCalendarContainer: {
-    display: "flex"
-  },
-  singleCalendar: {
-    "&:hover": {
-      "& ~ $singleCalendar": {
-        // target the next calendar when the former is hovered
-        "& > div": {
-          "& > div:nth-of-type(3)": {
-            "& > div": {
-              "& > div[data-calendar-cell='calendarCell']": {
-                backgroundColor: theme.colors.bgContainer
-              }
-            }
-          }
-        }
-      }
-    }
-  },
-  focusSelection: {},
-  calendarMonthlyCell: {},
-  calendarMonthlyCellSelected: {}
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/Calendar/Calendar.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvCalendar", {
+	root: {
+		display: "flex",
+		justifyContent: "center"
+	},
+	rangeCalendarContainer: { display: "flex" },
+	singleCalendar: { "&:hover": { "& ~ $singleCalendar": { "& > div": { "& > div:nth-of-type(3)": { "& > div": { "& > div[data-calendar-cell='calendarCell']": { backgroundColor: theme.colors.bgContainer } } } } } } },
+	focusSelection: {},
+	calendarMonthlyCell: {},
+	calendarMonthlyCellSelected: {}
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };