@hitachivantara/uikit-react-core
Version:
UI Kit Core React components.
82 lines (81 loc) • 2.06 kB
JavaScript
;
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const React = require("react");
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
const uikitStyles = require("@hitachivantara/uikit-styles");
const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvIconContainer", {
root: {
display: "inline-flex",
flex: "0 0 auto",
// ensure icon doesn't flex grow/shrink
fontSize: `var(--isize, 16px)`,
// default size of 16px
transition: "rotate 0.2s ease",
justifyContent: "center",
alignItems: "center",
padding: 8
// default padding
// we're assuming svg children inherits from text color and size
},
xs: {
fontSize: 12,
padding: 10
},
sm: {
fontSize: 16
},
md: {
fontSize: 32
},
lg: {
fontSize: 96
},
xl: {
fontSize: 112
}
});
const HvIconContainer = React.forwardRef(function HvIconContainer2(props, ref) {
const {
className,
classes: classesProp,
style,
color,
size = "S",
rotate,
children,
...others
} = uikitReactUtils.useDefaultProps("HvIconContainer", props);
const { cx, classes } = useClasses(classesProp);
return /* @__PURE__ */ jsxRuntime.jsx(
"div",
{
ref,
className: cx(classes.root, className, {
[classes[mapSizes(size)]]: size
}),
style: uikitReactUtils.mergeStyles(style, {
"--isize": typeof size === "number" ? `${size}px` : void 0,
color: uikitStyles.getColor(color),
rotate: rotate ? "180deg" : void 0,
...style
}),
...others,
children
}
);
});
function mapSizes(size) {
if (typeof size === "number") return void 0;
const iconSizeMap = {
XS: "xs",
S: "sm",
M: "md",
L: "lg"
};
return iconSizeMap[size] || size;
}
exports.HvIconContainer = HvIconContainer;
exports.iconContainerClasses = staticClasses;
exports.staticClasses = staticClasses;
exports.useClasses = useClasses;