@penaprieto/design-system
Version:
Multi-brand React design system with design tokens from Figma
13 lines (12 loc) • 1.2 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Pill = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
require("./Pill.css");
const Pill = ({ selected = false, disabled = false, iconLeft, iconRight, label, className = '', 'aria-pressed': ariaPressed, type = 'button', ...rest }) => {
const stateClassName = selected ? 'ds-pill--selected' : 'ds-pill--unselected';
const rootClassName = ['ds-pill', stateClassName, className].filter(Boolean).join(' ');
const computedAriaPressed = ariaPressed !== null && ariaPressed !== void 0 ? ariaPressed : selected;
return ((0, jsx_runtime_1.jsx)("button", { type: type, className: rootClassName, disabled: disabled, "aria-pressed": computedAriaPressed, ...rest, children: (0, jsx_runtime_1.jsxs)("span", { className: "ds-pill__content", children: [iconLeft && ((0, jsx_runtime_1.jsx)("span", { className: "ds-pill__icon ds-pill__icon--left", children: iconLeft })), (0, jsx_runtime_1.jsx)("span", { className: "ds-pill__label", children: label }), iconRight && ((0, jsx_runtime_1.jsx)("span", { className: "ds-pill__icon ds-pill__icon--right", children: iconRight }))] }) }));
};
exports.Pill = Pill;