@trail-ui/react/dist/multiselect/tw-tag-group.mjs

import {
  composeTailwindRenderProps
} from "../chunk-E45U7QEE.mjs";

// src/multiselect/tw-tag-group.tsx
import {
  Tag as AriaTag,
  TagGroup as AriaTagGroup,
  Button,
  TagList as RACTagList,
  composeRenderProps
} from "react-aria-components";
import { twMerge } from "tailwind-merge";
import { CloseIcon } from "@trail-ui/icons";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
function TagGroup({ children, ...props }) {
  return /* @__PURE__ */ jsx(AriaTagGroup, { ...props, className: twMerge("flex flex-col gap-1", props.className), children });
}
function TagList(props) {
  return /* @__PURE__ */ jsx(
    RACTagList,
    {
      ...props,
      className: composeTailwindRenderProps(props.className, "flex flex-wrap gap-1")
    }
  );
}
function Tag({ children, ...props }) {
  const textValue = typeof children === "string" ? children : void 0;
  return /* @__PURE__ */ jsx(
    AriaTag,
    {
      ...props,
      textValue,
      className: composeRenderProps(props.className, (className, renderProps) => {
        return twMerge(
          "flex h-6 max-w-fit cursor-default items-center gap-0.5 rounded border border-neutral-800 bg-neutral-200 px-2 text-xs text-neutral-950 transition",
          renderProps.allowsRemoving && "pe-1",
          renderProps.isFocused && ["outline-offset-1 outline-purple-600"],
          className
        );
      }),
      children: ({ allowsRemoving }) => {
        return /* @__PURE__ */ jsxs(Fragment, { children: [
          children,
          allowsRemoving && /* @__PURE__ */ jsx(
            Button,
            {
              slot: "remove",
              className: "flex cursor-pointer items-center justify-center rounded-full outline-0",
              children: /* @__PURE__ */ jsx(CloseIcon, { height: 16, width: 16 })
            }
          )
        ] });
      }
    }
  );
}
export {
  Tag,
  TagGroup,
  TagList
};