@trail-ui/react/dist/chunk-WX6MFSZC.mjs

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

// src/multiselect/tw-listbox.tsx
import React from "react";
import {
  ListBox as RACListBox,
  ListBoxItem as RACListBoxItem,
  Collection,
  Header,
  Section,
  composeRenderProps
} from "react-aria-components";
import { twMerge } from "tailwind-merge";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
function ListBox({ children, ...props }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (ref.current) {
      const selectedItem = ref.current.querySelector("[aria-selected=true]");
      if (selectedItem) {
        const timer = setTimeout(() => {
          selectedItem.scrollIntoView({
            block: "nearest",
            behavior: "smooth"
          });
        }, 50);
        return () => {
          clearTimeout(timer);
        };
      }
    }
  }, []);
  return /* @__PURE__ */ jsx(
    RACListBox,
    {
      ...props,
      className: composeTailwindRenderProps(props.className, "outline-none"),
      ref,
      children
    }
  );
}
function ListBoxItem(props) {
  const textValue = props.textValue || (typeof props.children === "string" ? props.children : void 0);
  return /* @__PURE__ */ jsx(
    RACListBoxItem,
    {
      ...props,
      textValue,
      className: composeRenderProps(
        props.className,
        (className, { isDisabled, isFocusVisible }) => {
          return twMerge(
            "group relative flex cursor-pointer border-l-[3px] border-transparent px-2 py-1.5 hover:border-purple-600 hover:bg-purple-50",
            isDisabled && "opacity-50",
            isFocusVisible && "border-l-[3px] border-purple-600 bg-purple-50",
            className
          );
        }
      ),
      children: props.children
    }
  );
}
function DropdownItem({ destructive, ...props }) {
  const textValue = props.textValue || (typeof props.children === "string" ? props.children : void 0);
  return /* @__PURE__ */ jsx(
    RACListBoxItem,
    {
      ...props,
      textValue,
      className: composeRenderProps(props.className, (className, { isDisabled, isFocused }) => {
        return twMerge([
          "group flex cursor-default select-none items-center gap-x-1 outline-none",
          "has-submenu:pe-0 px-1.5 py-2.5 sm:py-1.5",
          "text-base/6 sm:text-sm/6 [&:has(_[slot=description])_[slot=label]]:leading-5",
          "[&:not(:has([slot=description]))_[role=img]]:size-5",
          "[&:has([slot=description])_[role=img]]:size-7",
          "[&:has([slot=description])_[role=img]]:self-start",
          "[&:has([slot=description])_[role=img]]:mt-0.5",
          "[&:has([slot=description])_[role=img]]:me-0.5",
          isDisabled && "opacity-50",
          isFocused && "bg-hover",
          destructive && "text-destructive",
          className
        ]);
      }),
      children: composeRenderProps(props.children, (children, { isSelected }) => /* @__PURE__ */ jsxs(Fragment, { children: [
        /* @__PURE__ */ jsx("span", { className: twMerge("flex w-4 shrink-0 self-start", isSelected && "mt-[5px]"), children: isSelected && /* @__PURE__ */ jsx(Check, { className: "size-4" }) }),
        /* @__PURE__ */ jsx(
          "span",
          {
            className: twMerge(
              "flex min-w-0 flex-1 items-center gap-x-2",
              "[&>svg:not([class^=text-])]:text-muted",
              "[&>svg:not([class^=size-])]:size-4"
            ),
            children
          }
        )
      ] }))
    }
  );
}
function DropdownSection({
  className,
  ...props
}) {
  return /* @__PURE__ */ jsxs(
    Section,
    {
      className: twMerge(
        "[&:first-child]:-mt-[1px]",
        "[&:not(:first-child)]:my-1.5",
        "[&:not(:first-child)]:border-t-border/40 [&:not(:first-child)]:border-t",
        className
      ),
      children: [
        /* @__PURE__ */ jsx(
          Header,
          {
            className: twMerge(
              "bg-background text-muted sticky z-10 truncate px-2 pt-2 text-xs/4",
              "top-[0px] -mx-[1px] rounded-md backdrop-blur-md"
            ),
            children: props.title
          }
        ),
        /* @__PURE__ */ jsx(Collection, { items: props.items, children: props.children })
      ]
    }
  );
}
function Check(props) {
  return /* @__PURE__ */ jsx(
    "svg",
    {
      "data-slot": "icon-internal",
      xmlns: "http://www.w3.org/2000/svg",
      viewBox: "0 0 16 16",
      fill: "currentColor",
      ...props,
      children: /* @__PURE__ */ jsx(
        "path",
        {
          fillRule: "evenodd",
          d: "M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z",
          clipRule: "evenodd"
        }
      )
    }
  );
}

export {
  ListBox,
  ListBoxItem,
  DropdownItem,
  DropdownSection
};