@navinc/base-react-components
Version:
Nav's Pattern Library
69 lines • 3.79 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from 'react';
import { Icon } from '../icon/icon.js';
import { NoStyleButton } from '../../no-style-button.js';
import { cva } from 'class-variance-authority';
import { cn } from '../../cn.js';
import { styledBackwardsCompatibility } from '../../styled-backwards-compatibility.js';
const badgeVariants = cva('caption1-emphasized inline-flex justify-center items-center whitespace-nowrap h-300 min-w-300 gap-25 px-100 rounded-full', {
variants: {
variant: {
super: 'bg-superContainer text-onSuperContainer',
success: 'bg-successContainer text-onSuccessContainer',
warn: 'bg-warnContainer text-onWarnContainer',
error: 'bg-errorContainer text-onErrorContainer',
lightGray: 'bg-inverseOnSurface text-onSurface',
lightStroke: 'bg-surfaceContainerHigh text-onSurfaceVariant border border-solid border-outlineVariant',
secondary: 'bg-primaryContainer text-primaryDim',
light: 'bg-surfaceContainerHigh text-onSurface',
info: 'bg-infoContainer text-onInfoContainer',
gray: 'bg-outlineVariant text-onSurface',
disabled: 'bg-inverseOnSurface text-outline border border-solid border-outlineVariant',
inverse: 'bg-onSurface text-inverseOnSurface',
/*
Below are deprecated or variants not documented in Wayfinder Figma
*/
default: 'bg-inverseOnSurface text-onSurface', // Use 'lightGray' variant instead
standard: 'bg-surfaceContainerHigh text-onSurfaceVariant border border-solid border-outlineVariant', // Use 'lightStroke' variant instead
prime: 'bg-prime text-onPrime',
primary: 'bg-primary text-onPrimary',
primaryContainer: 'bg-primaryContainer text-onPrimaryContainer', // Use 'secondary' variant instead
plain: 'text-onSurface', // Use 'light' variant instead
plainPrimary: 'text-primary',
},
letterOnly: {
true: 'headline w-300 px-75',
},
density: {
tight: 'h-250',
loose: '',
},
},
defaultVariants: {
variant: 'lightGray',
density: 'loose',
},
});
export const Badge = styledBackwardsCompatibility(forwardRef((_a, ref) => {
var _b;
var { variant, className, letterOnly, density } = _a, props = __rest(_a, ["variant", "className", "letterOnly", "density"]);
const Component = (_b = props.component) !== null && _b !== void 0 ? _b : (props.onClick ? NoStyleButton : 'div');
return _jsx(Component, Object.assign({ ref: ref }, props, { className: cn(badgeVariants({ variant, letterOnly, density, className })) }));
}));
export const BadgeIcon = (props) => _jsx(Icon, Object.assign({ size: "small" }, props));
export const BadgeWithIcon = styledBackwardsCompatibility(forwardRef((_a, ref) => {
var { children, leadIcon } = _a, props = __rest(_a, ["children", "leadIcon"]);
return (_jsxs(Badge, Object.assign({ ref: ref }, props, { children: [leadIcon && _jsx(BadgeIcon, { name: leadIcon, className: cn('-ml-25', { 'mr-[1px]': props.density === 'tight' }) }), children] })));
}));
//# sourceMappingURL=badge.js.map