@trail-ui/react/dist/select/select.js

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/select/select.tsx
var select_exports = {};
__export(select_exports, {
  Select: () => _Select
});
module.exports = __toCommonJS(select_exports);
var import_icons = require("@trail-ui/icons");
var import_shared_utils2 = require("@trail-ui/shared-utils");
var import_theme3 = require("@trail-ui/theme");
var import_react3 = require("react");
var import_react_aria_components2 = require("react-aria-components");

// src/listbox/listbox.tsx
var import_shared_utils = require("@trail-ui/shared-utils");
var import_theme = require("@trail-ui/theme");
var import_react = require("react");
var import_react_aria_components = require("react-aria-components");
var import_jsx_runtime = require("react/jsx-runtime");
var InternalListBoxContext = (0, import_react.createContext)(
  {}
);
function ListBox(props) {
  const { children, className, classNames, itemClasses, ...otherProps } = props;
  const slots = (0, import_react.useMemo)(() => (0, import_theme.menu)(), []);
  const baseStyles = (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.base, className);
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InternalListBoxContext.Provider, { value: { itemClasses }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.ListBox, { className: slots.base({ class: baseStyles }), ...otherProps, children }) });
}

// src/spinner/spinner.tsx
var import_theme2 = require("@trail-ui/theme");
var import_react2 = require("react");

// src/spinner/spinners/bars.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var Bars = (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { viewBox: "0 0 135 140", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", ...props, children: [
  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("rect", { y: "10", width: "15", height: "120", rx: "6", children: [
    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
      "animate",
      {
        attributeName: "height",
        begin: "0.5s",
        dur: "1s",
        values: "120;110;100;90;80;70;60;50;40;140;120",
        calcMode: "linear",
        repeatCount: "indefinite"
      }
    ),
    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
      "animate",
      {
        attributeName: "y",
        begin: "0.5s",
        dur: "1s",
        values: "10;15;20;25;30;35;40;45;50;0;10",
        calcMode: "linear",
        repeatCount: "indefinite"
      }
    )
  ] }),
  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("rect", { x: "30", y: "10", width: "15", height: "120", rx: "6", children: [
    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
      "animate",
      {
        attributeName: "height",
        begin: "0.25s",
        dur: "1s",
        values: "120;110;100;90;80;70;60;50;40;140;120",
        calcMode: "linear",
        repeatCount: "indefinite"
      }
    ),
    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
      "animate",
      {
        attributeName: "y",
        begin: "0.25s",
        dur: "1s",
        values: "10;15;20;25;30;35;40;45;50;0;10",
        calcMode: "linear",
        repeatCount: "indefinite"
      }
    )
  ] }),
  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("rect", { x: "60", width: "15", height: "140", rx: "6", children: [
    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
      "animate",
      {
        attributeName: "height",
        begin: "0s",
        dur: "1s",
        values: "120;110;100;90;80;70;60;50;40;140;120",
        calcMode: "linear",
        repeatCount: "indefinite"
      }
    ),
    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
      "animate",
      {
        attributeName: "y",
        begin: "0s",
        dur: "1s",
        values: "10;15;20;25;30;35;40;45;50;0;10",
        calcMode: "linear",
        repeatCount: "indefinite"
      }
    )
  ] }),
  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("rect", { x: "90", y: "10", width: "15", height: "120", rx: "6", children: [
    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
      "animate",
      {
        attributeName: "height",
        begin: "0.25s",
        dur: "1s",
        values: "120;110;100;90;80;70;60;50;40;140;120",
        calcMode: "linear",
        repeatCount: "indefinite"
      }
    ),
    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
      "animate",
      {
        attributeName: "y",
        begin: "0.25s",
        dur: "1s",
        values: "10;15;20;25;30;35;40;45;50;0;10",
        calcMode: "linear",
        repeatCount: "indefinite"
      }
    )
  ] }),
  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("rect", { x: "120", y: "10", width: "15", height: "120", rx: "6", children: [
    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
      "animate",
      {
        attributeName: "height",
        begin: "0.5s",
        dur: "1s",
        values: "120;110;100;90;80;70;60;50;40;140;120",
        calcMode: "linear",
        repeatCount: "indefinite"
      }
    ),
    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
      "animate",
      {
        attributeName: "y",
        begin: "0.5s",
        dur: "1s",
        values: "10;15;20;25;30;35;40;45;50;0;10",
        calcMode: "linear",
        repeatCount: "indefinite"
      }
    )
  ] })
] });

// src/spinner/spinners/dots.tsx
var import_jsx_runtime3 = require("react/jsx-runtime");
var Dots = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { viewBox: "0 0 120 30", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", ...props, children: [
  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("circle", { cx: "15", cy: "15", r: "15", children: [
    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
      "animate",
      {
        attributeName: "r",
        from: "15",
        to: "15",
        begin: "0s",
        dur: "0.8s",
        values: "15;9;15",
        calcMode: "linear",
        repeatCount: "indefinite"
      }
    ),
    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
      "animate",
      {
        attributeName: "fill-opacity",
        from: "1",
        to: "1",
        begin: "0s",
        dur: "0.8s",
        values: "1;.5;1",
        calcMode: "linear",
        repeatCount: "indefinite"
      }
    )
  ] }),
  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("circle", { cx: "60", cy: "15", r: "9", fillOpacity: "0.3", children: [
    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
      "animate",
      {
        attributeName: "r",
        from: "9",
        to: "9",
        begin: "0s",
        dur: "0.8s",
        values: "9;15;9",
        calcMode: "linear",
        repeatCount: "indefinite"
      }
    ),
    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
      "animate",
      {
        attributeName: "fill-opacity",
        from: "0.5",
        to: "0.5",
        begin: "0s",
        dur: "0.8s",
        values: ".5;1;.5",
        calcMode: "linear",
        repeatCount: "indefinite"
      }
    )
  ] }),
  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("circle", { cx: "105", cy: "15", r: "15", children: [
    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
      "animate",
      {
        attributeName: "r",
        from: "15",
        to: "15",
        begin: "0s",
        dur: "0.8s",
        values: "15;9;15",
        calcMode: "linear",
        repeatCount: "indefinite"
      }
    ),
    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
      "animate",
      {
        attributeName: "fill-opacity",
        from: "1",
        to: "1",
        begin: "0s",
        dur: "0.8s",
        values: "1;.5;1",
        calcMode: "linear",
        repeatCount: "indefinite"
      }
    )
  ] })
] });

// src/spinner/spinners/ring.tsx
var import_jsx_runtime4 = require("react/jsx-runtime");
var Ring = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
  "svg",
  {
    fill: "none",
    stroke: "currentColor",
    viewBox: "0 0 38 38",
    xmlns: "http://www.w3.org/2000/svg",
    ...props,
    children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { transform: "translate(2.5 2.5)", strokeWidth: "5", children: [
      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { strokeOpacity: ".5", cx: "16", cy: "16", r: "16" }),
      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M32 16c0-9.94-8.06-16-16-16", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
        "animateTransform",
        {
          attributeName: "transform",
          type: "rotate",
          from: "0 16 16",
          to: "360 16 16",
          dur: "1s",
          repeatCount: "indefinite"
        }
      ) })
    ] }) })
  }
);

// src/spinner/spinners/spin.tsx
var import_jsx_runtime5 = require("react/jsx-runtime");
var Spin = (props) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { children: [
  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("circle", { cx: "12", cy: "12", r: "9.5", fill: "none", strokeWidth: "3", strokeLinecap: "round", children: [
    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
      "animate",
      {
        attributeName: "stroke-dasharray",
        dur: "1.5s",
        calcMode: "spline",
        values: "0 150;42 150;42 150;42 150",
        keyTimes: "0;0.475;0.95;1",
        keySplines: "0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1",
        repeatCount: "indefinite"
      }
    ),
    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
      "animate",
      {
        attributeName: "stroke-dashoffset",
        dur: "1.5s",
        calcMode: "spline",
        values: "0;-16;-59;-59",
        keyTimes: "0;0.475;0.95;1",
        keySplines: "0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1",
        repeatCount: "indefinite"
      }
    )
  ] }),
  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
    "animateTransform",
    {
      attributeName: "transform",
      type: "rotate",
      dur: "2s",
      values: "0 12 12;360 12 12",
      repeatCount: "indefinite"
    }
  )
] }) });

// src/spinner/spinner.tsx
var import_jsx_runtime6 = require("react/jsx-runtime");
var SPINNERS = {
  bars: Bars,
  dots: Dots,
  ring: Ring,
  spin: Spin
};
var DEFAULT_SPINNER = "spin";
function Spinner(props, ref) {
  const { className, variant = DEFAULT_SPINNER, color, size, ...spinnerProps } = props;
  const defaultSpinner = variant in SPINNERS ? variant : DEFAULT_SPINNER;
  const SpinnerComponent = SPINNERS[defaultSpinner];
  const styles = (0, import_react2.useMemo)(
    () => (0, import_theme2.spinner)({
      color,
      size,
      className
    }),
    [className, color, size]
  );
  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SpinnerComponent, { "aria-hidden": true, className: styles, ref, ...spinnerProps });
}
var _Spinner = (0, import_react2.forwardRef)(Spinner);

// src/select/select.tsx
var import_jsx_runtime7 = require("react/jsx-runtime");
function Select(props, ref) {
  const [isOpen, setIsOpen] = (0, import_react3.useState)(false);
  const searchRef = (0, import_react3.useRef)(null);
  const targetRef = (0, import_react3.useRef)(null);
  const buttonRef = (0, import_react3.useRef)(null);
  const {
    children,
    className,
    classNames,
    label,
    labelId,
    optionId,
    description,
    errorId,
    errorIcon = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
      import_icons.ErrorIcon,
      {
        className: "h-4 w-4 text-red-800 dark:text-red-600",
        role: "img",
        "aria-label": "Error",
        "aria-hidden": false
      }
    ),
    errorMessage,
    items,
    placement = "bottom",
    isLoading = false,
    selectorIcon = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons.ChevronDownIcon, { height: 24, width: 24 }),
    spinnerProps,
    popoverProps,
    listBoxProps,
    ...otherProps
  } = props;
  (0, import_react3.useEffect)(() => {
    var _a;
    requestAnimationFrame(() => {
      var _a2;
      (_a2 = searchRef == null ? void 0 : searchRef.current) == null ? void 0 : _a2.focus();
    });
    if (!isOpen) {
      (_a = buttonRef.current) == null ? void 0 : _a.setAttribute(
        "aria-activedescendant",
        props.selectedItem ? `listbox-id-option-${props.selectedItem}` : ""
      );
    }
  }, [isOpen]);
  const slots = (0, import_react3.useMemo)(() => (0, import_theme3.select)(), []);
  const baseStyles = (0, import_shared_utils2.clsx)(classNames == null ? void 0 : classNames.base, className);
  const clonedIcon = (0, import_react3.cloneElement)(selectorIcon, {
    "aria-hidden": true,
    className: slots.selectorIcon({ class: classNames == null ? void 0 : classNames.selectorIcon })
  });
  const renderIndicator = (0, import_react3.useMemo)(() => {
    if (isLoading) {
      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
        _Spinner,
        {
          "aria-hidden": true,
          color: "current",
          size: "sm",
          ...spinnerProps,
          className: slots.spinner({ class: classNames == null ? void 0 : classNames.spinner })
        }
      );
    }
    return clonedIcon;
  }, [isLoading, clonedIcon, spinnerProps, slots, classNames == null ? void 0 : classNames.spinner]);
  (0, import_react3.useEffect)(() => {
    if (buttonRef.current)
      buttonRef.current.setAttribute("role", "combobox");
  }, []);
  (0, import_react3.useEffect)(() => {
    if (buttonRef.current)
      buttonRef.current.setAttribute(
        "aria-activedescendant",
        props.currentFocusedItem ? `listbox-id-option-${props.currentFocusedItem}` : ""
      );
  }, [props.currentFocusedItem]);
  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
    import_react_aria_components2.Select,
    {
      ref,
      isOpen,
      onOpenChange: setIsOpen,
      ...otherProps,
      className: slots.base({ class: baseStyles }),
      children: [
        label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_aria_components2.Label, { id: labelId, className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: slots.mainWrapper({ class: classNames == null ? void 0 : classNames.mainWrapper }), children: [
          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
            import_react_aria_components2.Button,
            {
              id: optionId,
              ref: buttonRef,
              "aria-labelledby": labelId ? labelId : optionId,
              "aria-expanded": isOpen,
              "aria-controls": "listbox-id",
              className: slots.trigger({ class: classNames == null ? void 0 : classNames.trigger }),
              ...errorMessage && { "aria-describedby": errorId },
              ...props.isRequired && { "aria-required": true },
              children: [
                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_aria_components2.SelectValue, { className: slots.value({ class: classNames == null ? void 0 : classNames.value }) }),
                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: `${isOpen ? "rotate-[180deg]" : ""}`, children: renderIndicator })
              ]
            }
          ),
          errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
            import_react_aria_components2.Text,
            {
              id: errorId,
              slot: "errorMessage",
              "aria-live": "polite",
              elementType: "div",
              className: `${slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })}`,
              children: [
                errorIcon,
                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: errorMessage })
              ]
            }
          ) : description ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
            import_react_aria_components2.Text,
            {
              slot: "description",
              elementType: "div",
              className: slots.description({ class: classNames == null ? void 0 : classNames.description }),
              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: description })
            }
          ) : null,
          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref: targetRef })
        ] }),
        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
          import_react_aria_components2.Popover,
          {
            placement,
            className: slots.popover({ class: classNames == null ? void 0 : classNames.popover }),
            isNonModal: true,
            "aria-labelledby": "",
            UNSTABLE_portalContainer: targetRef.current || void 0,
            ...popoverProps,
            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                "div",
                {
                  role: "button",
                  className: "z-2 fixed left-[0] top-[0] h-[100vh] w-[100vw]",
                  onClick: () => setIsOpen(false),
                  onKeyDown: () => {
                  },
                  "aria-label": "Close dropdown",
                  tabIndex: -1
                }
              ),
              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ListBox, { id: "listbox-id", items, ...listBoxProps, children })
            ] })
          }
        )
      ]
    }
  ) });
}
var _Select = (0, import_react3.forwardRef)(Select);
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Select
});