@nex-ui/react
Version:
🎉 A beautiful, modern, and reliable React component library.
106 lines (102 loc) • 3.38 kB
JavaScript
"use client";
'use strict';
var jsxRuntime = require('react/jsx-runtime');
var icons = require('@nex-ui/icons');
var Context = require('../provider/Context.cjs');
var useDefaultProps = require('../utils/useDefaultProps.cjs');
var useSlotClasses = require('../utils/useSlotClasses.cjs');
var useStyles = require('../utils/useStyles.cjs');
var useSlot = require('../utils/useSlot.cjs');
var ButtonBase = require('../buttonBase/ButtonBase.cjs');
var badge = require('../../theme/recipes/badge.cjs');
const slots = [
'root',
'closeButton',
'startIcon',
'endIcon'
];
const Badge = (inProps)=>{
const { primaryThemeColor } = Context.useNexUI();
const props = useDefaultProps.useDefaultProps({
name: 'Badge',
props: inProps
});
const { children, onClose, classNames, slotProps, startIcon, endIcon, disabled = false, closable = false, color = primaryThemeColor, size = 'md', variant = 'solid', radius = size, ...remainningProps } = props;
const ownerState = {
...props,
color,
size,
variant,
radius,
closable,
disabled
};
const slotClasses = useSlotClasses.useSlotClasses({
name: 'Badge',
slots,
classNames
});
const styles = useStyles.useStyles({
name: 'Badge',
ownerState: ownerState,
recipe: badge.badgeRecipe
});
const [BadgeRoot, getBadgeRootProps] = useSlot.useSlot({
style: styles.root,
elementType: 'span',
externalForwardedProps: remainningProps,
classNames: slotClasses.root,
dataAttrs: {
color,
size,
variant,
radius,
closable,
disabled
}
});
const [BadgeCloseButton, getBadgeCloseButtonProps] = useSlot.useSlot({
elementType: ButtonBase.ButtonBase,
style: styles.closeButton,
shouldForwardComponent: false,
externalSlotProps: slotProps?.closeButton,
classNames: slotClasses.closeButton,
additionalProps: {
disabled,
onClick: onClose,
'aria-label': 'Close Badge'
}
});
const [BadgeStartIcon, getBadgeStartIconProps] = useSlot.useSlot({
elementType: 'span',
style: styles.startIcon,
externalSlotProps: slotProps?.startIcon,
classNames: slotClasses.startIcon
});
const [BadgeEndIcon, getBadgeEndIconProps] = useSlot.useSlot({
elementType: 'span',
style: styles.endIcon,
externalSlotProps: slotProps?.endIcon,
classNames: slotClasses.endIcon
});
return /*#__PURE__*/ jsxRuntime.jsxs(BadgeRoot, {
...getBadgeRootProps(),
children: [
startIcon && /*#__PURE__*/ jsxRuntime.jsx(BadgeStartIcon, {
...getBadgeStartIconProps(),
children: startIcon
}),
children,
endIcon && /*#__PURE__*/ jsxRuntime.jsx(BadgeEndIcon, {
...getBadgeEndIconProps(),
children: endIcon
}),
closable && /*#__PURE__*/ jsxRuntime.jsx(BadgeCloseButton, {
...getBadgeCloseButtonProps(),
children: /*#__PURE__*/ jsxRuntime.jsx(icons.CloseCircleFilled, {})
})
]
});
};
Badge.displayName = 'Badge';
exports.Badge = Badge;