@cerberus-design/react/dist/components/tag/closable.js

The Cerberus Design React component library.

'use client';
import { jsxs, jsx } from 'react/jsx-runtime';
import { useCerberusContext } from '../../context/cerberus.js';
import { TagRoot } from './primitives.js';
import { IconButton } from '../icon-button/button.js';

function ClosableTag(props) {
  const { onClick, children, ...rootProps } = props;
  const { icons } = useCerberusContext();
  const { close: Close } = icons;
  const palette = rootProps.palette === "page" ? "secondaryAction" : rootProps.palette ?? "secondaryAction";
  return /* @__PURE__ */ jsxs(
    TagRoot,
    {
      "data-palette": palette,
      palette,
      shape: "pill",
      pe: "0",
      ...rootProps,
      children: [
        children,
        /* @__PURE__ */ jsx(
          IconButton,
          {
            ariaLabel: "Close",
            onClick,
            palette,
            usage: "filled",
            size: "sm",
            children: /* @__PURE__ */ jsx(Close, {})
          }
        )
      ]
    }
  );
}

export { ClosableTag };