@navinc/base-react-components/dist/wayfinder/icon-button/icon-button.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 { styled, css } from 'styled-components';
import { forwardRef } from 'react';
import { Icon } from '../icon/icon.js';
import { Slot } from '../slot/slot.js';
const densities = {
    tight: css `
    width: ${({ theme }) => theme.spacing.space350};
    height: ${({ theme }) => theme.spacing.space350};
  `,
    standard: css `
    width: ${({ theme }) => theme.spacing.space400};
    height: ${({ theme }) => theme.spacing.space400};
  `,
    loose: css `
    width: ${({ theme }) => theme.spacing.space600};
    height: ${({ theme }) => theme.spacing.space600};
  `,
    hug: css `
    width: auto;
    height: auto;
  `,
};
const getDensity = (density) => (density ? densities[density] : densities.standard);
const baseIconButtonCss = css `
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  line-height: inherit;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: ${({ theme }) => theme.spacing.space0};
  border-radius: ${({ theme }) => theme.spacing.space75};
  color: ${({ theme }) => theme.onSurfaceVariant};

  &:disabled {
    color: ${({ theme }) => theme.onSurfaceDim};
  }

  &:hover:not(:disabled) {
    /* TODO: if this background gets reused, consider creating a theme token for it */
    background: rgb(120 118 122 / 16%);
    color: ${({ theme }) => theme.onSurface};
  }

  &:active:not(:disabled) {
    /* TODO: if this background gets reused, consider creating a theme token for it */
    background: rgb(120 118 122 / 24%);
    color: ${({ theme }) => theme.onSurface};
  }

  ${({ density }) => getDensity(density)};
`;
export const BaseIconButton = styled.button.withConfig({
    shouldForwardProp: (prop) => prop !== 'density',
}) `
  ${baseIconButtonCss}
`;
const iconSizeFromDensity = (density, size) => {
    if (density === 'tight')
        return 'small';
    if (density === 'loose')
        return 'large';
    if (density === 'hug')
        return size !== null && size !== void 0 ? size : 'medium';
    return 'medium';
};
export const IconButton = styled(forwardRef((_a, ref) => {
    var { name, size, isFilled, density, asChild, children } = _a, props = __rest(_a, ["name", "size", "isFilled", "density", "asChild", "children"]);
    return (_jsx(Slot, Object.assign({ asChild: asChild, child: children, defaultComponent: "button" }, props, { ref: ref, children: (_child) => _jsx(Icon, { name: name, size: iconSizeFromDensity(density, size), isFilled: isFilled }) })));
})).withConfig({ displayName: "brc-sc-IconButton", componentId: "brc-sc-a01sa6" }) `
  ${baseIconButtonCss}
`;
//# sourceMappingURL=icon-button.js.map