@navinc/base-react-components/dist/wayfinder/chip/chip.js

Nav's Pattern Library

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 } from "react/jsx-runtime";
import { NoStyleButton } from '../../no-style-button.js';
import { forwardRef } from 'react';
import { cn } from '../../cn.js';
import { Icon } from '../icon/icon.js';
import { addClassNameTo } from '../../add-classname-to.js';
export const ChipIcon = addClassNameTo(Icon, 'text-onSurfaceVariant group-aria-[pressed=true]/chip:text-onSurfaceDim group-disabled/chip:text-onSurfaceDim');
/** Wayfinder chip */
export const Chip = forwardRef((_a, ref) => {
    var { selected, className } = _a, props = __rest(_a, ["selected", "className"]);
    return (_jsx(NoStyleButton, Object.assign({ ref: ref, "aria-pressed": !!selected, className: cn([
            'group/chip inline-flex justify-center items-center text-center caption1-emphasized font-semibold transition-all duration-100 ease-in-out rounded-200 bg-surfaceContainerHighest text-onSurface shadow-elevation1 px-75 py-50 gap-x-25 min-w-500',
            'hover:bg-gradient-to-b hover:from-white/0 hover:to-[rgb(27,27,31)]/4',
            'active:bg-[rgb(27,27,31)]/8 active:scale-[0.96] active:shadow-buttonActive active:text-onSurface/60',
            'disabled:shadow-none disabled:bg-[rgb(27,27,31)]/4 disabled:text-onSurfaceDim disabled:hover:bg-none',
            'aria-[pressed=true]:bg-onSurface aria-[pressed=true]:text-inverseOnSurface',
            'active:aria-[pressed=true]:bg-inverseSurface',
            'hover:aria-[pressed=true]:bg-[linear-gradient(180deg,#3E3E43_-14.58%,theme(colors.onSurface)_112.5%)]',
        ], className) }, props)));
});
//# sourceMappingURL=chip.js.map