@teamsparta/stack-chip/dist/chunk-C6WYQNC2.mjs

stack chip

import {
  chipAddonCss,
  chipColorVariant,
  chipContainerCss,
  chipLeftAddonCss,
  chipRightAddonCss,
  chipSizeCss,
  chipTextCss,
  chipTextSizeCss,
  disabledStyle
} from "./chunk-KLWLLBGX.mjs";
import {
  __objRest,
  __spreadProps,
  __spreadValues
} from "./chunk-FUJQIYOF.mjs";

// src/Chip.tsx
import {
  mapResponsive,
  useBreakpointContext
} from "@teamsparta/stack-core";
import { forwardRef } from "react";
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
var Chip = forwardRef(
  (_a, ref) => {
    var _b = _a, {
      leftAddon,
      rightAddon,
      children,
      size = "sm",
      variant = "fill",
      selected = false,
      disabled = false,
      onClick,
      style: styleProp,
      className
    } = _b, restProps = __objRest(_b, [
      "leftAddon",
      "rightAddon",
      "children",
      "size",
      "variant",
      "selected",
      "disabled",
      "onClick",
      "style",
      "className"
    ]);
    const breakpoints = useBreakpointContext("Chip");
    const sizes = mapResponsive(breakpoints, size, (breakpoint, size2) => ({
      breakpoint,
      size: size2
    }));
    const style = __spreadValues(__spreadValues({}, chipColorVariant[variant]), styleProp);
    return /* @__PURE__ */ jsxs(
      "button",
      __spreadProps(__spreadValues({
        ref,
        style,
        onClick,
        disabled,
        "aria-selected": selected,
        className,
        "data-selected": selected,
        css: [chipContainerCss, chipSizeCss(sizes), disabled && disabledStyle]
      }, restProps), {
        children: [
          leftAddon && /* @__PURE__ */ jsx("div", { css: [chipAddonCss, chipLeftAddonCss], children: leftAddon }),
          /* @__PURE__ */ jsx("span", { css: [chipTextCss, chipTextSizeCss(sizes)], children }),
          rightAddon && /* @__PURE__ */ jsx("div", { css: [chipAddonCss, chipRightAddonCss], children: rightAddon })
        ]
      })
    );
  }
);
Chip.displayName = "Chip";

export {
  Chip
};