import { j as jsxRuntimeExports } from "../../../../../../../_virtual/jsx-runtime.js";
import StateManagedSelect$1 from "../../../../../../../node_modules/.pnpm/react-select@5.10.1_@types_react@19.1.13_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/react-select/dist/react-select.esm.js";
import { useState } from "react";
import { tx as D, css as E } from "../../../../../../style-system/dist/twind.js";
import { useFonts, getFontLabel } from "../../../hooks/use-fonts.js";
import { c as createFilter } from "../../../../../../../node_modules/.pnpm/react-select@5.10.1_@types_react@19.1.13_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/react-select/dist/Select-aab027f3.esm.js";
const GroupHeading = ({ data }) => {
  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-2 py-1 text-xs bg-gray-200 text-gray-600", children: data.group });
};
function FontPicker({ initialValue, onChange, fontType }) {
  const [selected, setSelected] = useState(initialValue);
  const allFonts = useFonts(fontType);
  const classNames = {
    control: (state) => !state.isFocused ? "outline-none bg-white rounded !min-h-full border border-gray-300" : "outline-none bg-white rounded !min-h-full border border-gray-300",
    valueContainer: () => "bg-white px-2.5",
    placeholder: () => "text-sm bg-white",
    input: () => "text-sm outline-none !focus:outline-none !focus-within:outline-none [&>input]:focus:ring-0 [&>input]:focus-within:ring-0",
    container: () => "text-sm h-8",
    menu: () => "text-sm bg-white shadow-2xl rounded py-1",
    menuList: () => E({
      scrollbarColor: "var(--violet-4) var(--violet-2)",
      scrollBehavior: "smooth",
      scrollbarWidth: "thin",
      "&:hover": {
        scrollbarColor: "var(--violet-7) var(--violet-3)"
      }
    }),
    loadingMessage(props) {
      return D("text-sm py-2");
    },
    indicatorsContainer: () => "text-sm pr-1.5 font-normal scale-75",
    option: (state) => state.isSelected ? D("bg-upstart-100 px-2 py-1.5") : D("bg-white px-2 py-1.5 hover:(bg-upstart-600 text-white)")
  };
  return /* @__PURE__ */ jsxRuntimeExports.jsx(
    StateManagedSelect$1,
    {
      unstyled: true,
      filterOption: createFilter({ ignoreAccents: false, matchFrom: "start", ignoreCase: true }),
      defaultValue: { ...selected, label: getFontLabel(selected) },
      onChange: (e) => {
        if (e === null) return;
        setSelected(e.value);
        onChange(e.value);
      },
      classNames,
      components: {
        // @ts-ignore
        GroupHeading
        // Uncomment this to use react-window
        // MenuList, Option
      },
      options: allFonts
    }
  );
}
export {
  FontPicker as default
};
//# sourceMappingURL=font.js.map
