@medusajs/draft-order 0.0.1

package/.medusa/server/src/admin/components/draft-orders/shipping-section.js

@@ -0,0 +1,211 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { TriangleRightMini, Buildings, TruckFast, Shopping } from "@medusajs/icons";
+import { Container, Heading, Divider, IconButton, Text, StatusBadge, Button } from "@medusajs/ui";
+import { Accordion } from "radix-ui";
+import { Link } from "react-router-dom";
+import { useShippingOptions } from "../../hooks/api/shipping-options.js";
+import { getUniqueShippingProfiles } from "../../lib/utils/order-utils.js";
+import { Thumbnail } from "../common/thumbnail.js";
+const ShippingSection = ({ order }) => {
+  const data = getShippingProfileData(order.items);
+  const orderHasShipping = order.shipping_methods.length > 0;
+  const {
+    shipping_options = [],
+    isPending,
+    isError,
+    error
+  } = useShippingOptions(
+    {
+      id: order.shipping_methods.map((method) => method.shipping_option_id).filter(Boolean),
+      fields: "+service_zone.*,+service_zone.fulfillment_set.*,+service_zone.fulfillment_set.location.*"
+    },
+    {
+      enabled: orderHasShipping
+    }
+  );
+  if (isError) {
+    throw error;
+  }
+  const ready = !orderHasShipping ? true : shipping_options && !isPending;
+  const isAllProfilesAssigned = data.every(
+    (profile) => shipping_options == null ? void 0 : shipping_options.find(
+      (option) => option.shipping_profile_id === profile.id
+    )
+  );
+  return /* @__PURE__ */ jsxs(Container, { className: "p-0 overflow-hidden", children: [
+    /* @__PURE__ */ jsx("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsx(Heading, { children: "Shipping" }) }),
+    /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
+    /* @__PURE__ */ jsx(Accordion.Root, { type: "multiple", children: ready && data.map((profile, idx) => /* @__PURE__ */ jsx("div", { children: renderShippingProfile(
+      profile,
+      shipping_options,
+      idx === data.length - 1
+    ) }, profile.id)) }),
+    !isAllProfilesAssigned && /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
+      /* @__PURE__ */ jsx(Footer, {})
+    ] })
+  ] });
+};
+function renderShippingProfile(profile, shippingOptions, isLast) {
+  const shippingOption = shippingOptions.find(
+    (option) => option.shipping_profile_id === profile.id
+  );
+  if (shippingOption) {
+    return /* @__PURE__ */ jsx(
+      ProfileWithShipping,
+      {
+        profile,
+        shippingOption,
+        isLast
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(ProfileWithoutShipping, { profile, isLast });
+}
+const ProfileWithShipping = ({
+  profile,
+  shippingOption,
+  isLast
+}) => {
+  var _a, _b, _c;
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(Accordion.Item, { value: profile.id, children: [
+      /* @__PURE__ */ jsx("div", { className: "flex items-center px-6 py-4 justify-between gap-x-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3", children: [
+        /* @__PURE__ */ jsx(Accordion.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            size: "2xsmall",
+            variant: "transparent",
+            className: "group/trigger",
+            children: /* @__PURE__ */ jsx(TriangleRightMini, { className: "group-data-[state=open]/trigger:rotate-90 transition-transform" })
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3", children: [
+          /* @__PURE__ */ jsx(ShippingBadge, {}),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-[5px] text-ui-fg-subtle", children: [
+            /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: `${profile.items.length}x ${profile.items.length === 1 ? "item" : "items"}` }),
+            /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: "shipping from" }),
+            /* @__PURE__ */ jsx(Buildings, {}),
+            /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", weight: "plus", children: (_c = (_b = (_a = shippingOption.service_zone) == null ? void 0 : _a.fulfillment_set) == null ? void 0 : _b.location) == null ? void 0 : _c.name }),
+            /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: "using" }),
+            /* @__PURE__ */ jsx(TruckFast, {}),
+            /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", weight: "plus", children: shippingOption.name })
+          ] })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx(ShippingProfileItems, { profile })
+    ] }),
+    !isLast && /* @__PURE__ */ jsx(Divider, { variant: "dashed" })
+  ] });
+};
+const ProfileWithoutShipping = ({
+  profile,
+  isLast
+}) => {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(Accordion.Item, { value: profile.id, children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3 justify-between px-6 py-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3", children: [
+          /* @__PURE__ */ jsx(Accordion.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              size: "2xsmall",
+              variant: "transparent",
+              className: "group/trigger",
+              children: /* @__PURE__ */ jsx(TriangleRightMini, { className: "group-data-[state=open]/trigger:rotate-90 transition-transform" })
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 flex items-center gap-x-3", children: [
+            /* @__PURE__ */ jsx(ShippingBadge, {}),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: profile.name }),
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  size: "small",
+                  leading: "compact",
+                  className: "text-ui-fg-subtle",
+                  children: `${profile.items.length} ${profile.items.length === 1 ? "item" : "items"}`
+                }
+              )
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(StatusBadge, { color: "orange", children: "Requires shipping" }) })
+      ] }),
+      /* @__PURE__ */ jsx(ShippingProfileItems, { profile })
+    ] }),
+    !isLast && /* @__PURE__ */ jsx(Divider, { variant: "dashed" })
+  ] });
+};
+const ShippingProfileItems = ({ profile }) => {
+  return /* @__PURE__ */ jsxs(Accordion.Content, { children: [
+    /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
+    profile.items.map((item, idx) => {
+      var _a, _b, _c, _d, _e;
+      return /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs("div", { className: "px-6 flex items-center gap-x-3", children: [
+          /* @__PURE__ */ jsx("div", { className: "w-5 h-[72px] flex flex-col justify-center items-center", children: /* @__PURE__ */ jsx(Divider, { variant: "dashed", orientation: "vertical" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "py-4 flex items-center gap-x-3", children: [
+            /* @__PURE__ */ jsx("div", { className: "size-7 flex items-center justify-center tabular-nums", children: /* @__PURE__ */ jsxs(
+              Text,
+              {
+                size: "small",
+                leading: "compact",
+                className: "text-ui-fg-subtle",
+                children: [
+                  item.quantity,
+                  "x"
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Thumbnail, { thumbnail: item.thumbnail }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsxs(Text, { size: "small", leading: "compact", weight: "plus", children: [
+                (_b = (_a = item.variant) == null ? void 0 : _a.product) == null ? void 0 : _b.title,
+                " (",
+                (_c = item.variant) == null ? void 0 : _c.title,
+                ")"
+              ] }),
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  size: "small",
+                  leading: "compact",
+                  className: "text-ui-fg-subtle",
+                  children: (_e = (_d = item.variant) == null ? void 0 : _d.options) == null ? void 0 : _e.map((option) => option.value).join(" · ")
+                }
+              )
+            ] })
+          ] })
+        ] }, item.id),
+        idx !== profile.items.length - 1 && /* @__PURE__ */ jsx(Divider, { variant: "dashed" })
+      ] }, item.id);
+    })
+  ] });
+};
+const Footer = () => {
+  return /* @__PURE__ */ jsx("div", { className: "px-6 py-4 flex items-center justify-end bg-ui-bg-component", children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", asChild: true, children: /* @__PURE__ */ jsx(Link, { to: "shipping", children: "Add shipping options" }) }) });
+};
+const ShippingBadge = () => {
+  return /* @__PURE__ */ jsx("div", { className: "size-7 rounded-md shadow-borders-base flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "size-6 rounded bg-ui-bg-component-hover flex items-center justify-center", children: /* @__PURE__ */ jsx(Shopping, { className: "text-ui-fg-subtle" }) }) });
+};
+function getShippingProfileData(items) {
+  const uniqueShippingProfiles = getUniqueShippingProfiles(items);
+  const output = uniqueShippingProfiles.map((profile) => {
+    return {
+      id: profile.id,
+      name: profile.name,
+      items: items.filter(
+        (item) => {
+          var _a, _b, _c;
+          return ((_c = (_b = (_a = item.variant) == null ? void 0 : _a.product) == null ? void 0 : _b.shipping_profile) == null ? void 0 : _c.id) === profile.id;
+        }
+      )
+    };
+  });
+  return output;
+}
+export {
+  ShippingSection
+};

package/.medusa/server/src/admin/components/draft-orders/summary-section.js

@@ -0,0 +1,148 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Plus, ReceiptPercent } from "@medusajs/icons";
+import { Container, Heading, Divider, Text, Button, toast } from "@medusajs/ui";
+import { useNavigate } from "react-router-dom";
+import { useConvertDraftOrder } from "../../hooks/api/draft-orders.js";
+import { getLocaleAmount, getStylizedAmount } from "../../lib/data/currencies.js";
+import { ActionMenu } from "../common/action-menu.js";
+import { Thumbnail } from "../common/thumbnail.js";
+const SummarySection = ({ order }) => {
+  return /* @__PURE__ */ jsxs(Container, { className: "p-0 overflow-hidden", children: [
+    /* @__PURE__ */ jsxs("div", { className: "px-6 py-4 flex items-center justify-between gap-x-4", children: [
+      /* @__PURE__ */ jsx(Heading, { children: "Summary" }),
+      /* @__PURE__ */ jsx(
+        ActionMenu,
+        {
+          groups: [
+            {
+              actions: [
+                {
+                  label: "Edit items",
+                  icon: /* @__PURE__ */ jsx(Plus, {}),
+                  to: "items"
+                },
+                {
+                  label: "Edit custom items",
+                  icon: /* @__PURE__ */ jsx(Plus, {}),
+                  to: "custom-items"
+                }
+              ]
+            },
+            {
+              actions: [
+                {
+                  label: "Edit promotions",
+                  icon: /* @__PURE__ */ jsx(ReceiptPercent, {}),
+                  to: "promotions"
+                }
+              ]
+            }
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
+    /* @__PURE__ */ jsx("div", { children: order.items.map((item, idx) => /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(Item, { item, currencyCode: order.currency_code }),
+      idx !== order.items.length - 1 && /* @__PURE__ */ jsx(Divider, { variant: "dashed" })
+    ] }, item.id)) }),
+    /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
+    /* @__PURE__ */ jsx(
+      Total,
+      {
+        currencyCode: order.currency_code,
+        total: order.total,
+        shippingSubtotal: order.shipping_subtotal,
+        taxTotal: order.tax_total
+      }
+    ),
+    /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
+    /* @__PURE__ */ jsx(Footer, { order })
+  ] });
+};
+const Item = ({ item, currencyCode }) => {
+  return /* @__PURE__ */ jsxs("div", { className: "px-6 py-4 grid grid-cols-2 gap-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3", children: [
+      /* @__PURE__ */ jsx(Thumbnail, { thumbnail: item.thumbnail, alt: item.title }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-1", children: [
+          /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: item.product_title }),
+          /* @__PURE__ */ jsxs(Text, { size: "small", leading: "compact", className: "text-ui-fg-subtle", children: [
+            "(",
+            item.variant_title,
+            ")"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", className: "text-ui-fg-subtle", children: item.variant_sku })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 items-center gap-3 [&>div]:text-right text-ui-fg-subtle", children: [
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Text, { children: getLocaleAmount(item.unit_price, currencyCode) }) }),
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(Text, { children: [
+        item.quantity,
+        "x"
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Text, { children: getLocaleAmount(item.subtotal, currencyCode) }) })
+    ] })
+  ] });
+};
+const Total = ({
+  total,
+  shippingSubtotal,
+  taxTotal,
+  currencyCode
+}) => {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col px-6 py-4 gap-y-2", children: [
+    shippingSubtotal !== null && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-x-4 text-ui-fg-subtle", children: [
+      /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: "Shipping" }),
+      /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: getLocaleAmount(shippingSubtotal, currencyCode) })
+    ] }),
+    taxTotal !== null && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-x-4 text-ui-fg-subtle", children: [
+      /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: "Tax" }),
+      /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: getLocaleAmount(taxTotal, currencyCode) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-x-4", children: [
+      /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", weight: "plus", children: "Total" }),
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          size: "small",
+          leading: "compact",
+          weight: "plus",
+          className: "text-right",
+          children: getStylizedAmount(total, currencyCode)
+        }
+      )
+    ] })
+  ] });
+};
+const Footer = ({ order }) => {
+  const navigate = useNavigate();
+  const { mutateAsync: convertDraftOrder, isPending } = useConvertDraftOrder(
+    order.id
+  );
+  const handleConvert = async () => {
+    await convertDraftOrder(void 0, {
+      onSuccess: () => {
+        toast.success("Draft order converted to order");
+        navigate(`/orders/${order.id}`);
+      },
+      onError: (error) => {
+        toast.error(error.message);
+      }
+    });
+  };
+  return /* @__PURE__ */ jsx("div", { className: "px-6 py-4 flex items-center justify-end gap-x-2 bg-ui-bg-component", children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      size: "small",
+      variant: "secondary",
+      isLoading: isPending,
+      onClick: handleConvert,
+      children: "Convert to order"
+    }
+  ) });
+};
+export {
+  SummarySection
+};

package/.medusa/server/src/admin/components/inputs/combobox.js

@@ -0,0 +1,311 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { ComboboxProvider, Combobox as Combobox$1, ComboboxDisclosure, ComboboxPopover, ComboboxItem, ComboboxItemCheck, ComboboxItemValue, Separator } from "@ariakit/react";
+import { XMarkMini, TrianglesMini, CheckMini, EllipseMiniSolid, PlusMini } from "@medusajs/icons";
+import { clx, Text } from "@medusajs/ui";
+import { matchSorter } from "match-sorter";
+import { useState, useTransition, useRef, useImperativeHandle, useDeferredValue, useMemo, useCallback, Fragment } from "react";
+import { genericForwardRef } from "../utilities/generic-forward-ref.js";
+const TABLUAR_NUM_WIDTH = 8;
+const TAG_BASE_WIDTH = 28;
+const ComboboxImpl = ({
+  value: controlledValue,
+  onChange,
+  searchValue: controlledSearchValue,
+  onSearchValueChange,
+  options,
+  className,
+  placeholder,
+  fetchNextPage,
+  isFetchingNextPage,
+  onCreateOption,
+  noResultsPlaceholder,
+  ...inputProps
+}, ref) => {
+  var _a;
+  const [open, setOpen] = useState(false);
+  const [isPending, startTransition] = useTransition();
+  const comboboxRef = useRef(null);
+  const listboxRef = useRef(null);
+  useImperativeHandle(ref, () => comboboxRef.current);
+  const isValueControlled = controlledValue !== void 0;
+  const isSearchControlled = controlledSearchValue !== void 0;
+  const isArrayValue = Array.isArray(controlledValue);
+  const emptyState = isArrayValue ? [] : "";
+  const [uncontrolledSearchValue, setUncontrolledSearchValue] = useState(
+    controlledSearchValue || ""
+  );
+  const defferedSearchValue = useDeferredValue(uncontrolledSearchValue);
+  const [uncontrolledValue, setUncontrolledValue] = useState(emptyState);
+  const searchValue = isSearchControlled ? controlledSearchValue : uncontrolledSearchValue;
+  const selectedValues = isValueControlled ? controlledValue : uncontrolledValue;
+  const handleValueChange = (newValues) => {
+    const exists = options.filter((o) => !o.disabled).find((o) => {
+      if (isArrayValue) {
+        return newValues == null ? void 0 : newValues.includes(o.value);
+      }
+      return o.value === newValues;
+    });
+    if (!exists && onCreateOption && newValues) {
+      onCreateOption(newValues);
+    }
+    if (!isValueControlled) {
+      setUncontrolledValue(newValues || emptyState);
+    }
+    if (onChange) {
+      onChange(newValues);
+    }
+    setUncontrolledSearchValue("");
+  };
+  const handleSearchChange = (query) => {
+    setUncontrolledSearchValue(query);
+    if (onSearchValueChange) {
+      onSearchValueChange(query);
+    }
+  };
+  const matches = useMemo(() => {
+    if (isSearchControlled) {
+      return [];
+    }
+    return matchSorter(options, defferedSearchValue, {
+      keys: ["label"]
+    });
+  }, [options, defferedSearchValue, isSearchControlled]);
+  const observer = useRef(
+    new IntersectionObserver(
+      (entries) => {
+        const first = entries[0];
+        if (first.isIntersecting) {
+          fetchNextPage == null ? void 0 : fetchNextPage();
+        }
+      },
+      { threshold: 1 }
+    )
+  );
+  const lastOptionRef = useCallback(
+    (node) => {
+      if (isFetchingNextPage) {
+        return;
+      }
+      if (observer.current) {
+        observer.current.disconnect();
+      }
+      if (node) {
+        observer.current.observe(node);
+      }
+    },
+    [isFetchingNextPage]
+  );
+  const handleOpenChange = (open2) => {
+    if (!open2) {
+      setUncontrolledSearchValue("");
+    }
+    setOpen(open2);
+  };
+  const hasValue = (selectedValues == null ? void 0 : selectedValues.length) > 0;
+  const showTag = hasValue && isArrayValue;
+  const showSelected = showTag && !searchValue && !open;
+  const hideInput = !isArrayValue && !open;
+  const selectedLabel = (_a = options.find((o) => o.value === selectedValues)) == null ? void 0 : _a.label;
+  const hidePlaceholder = showSelected || open;
+  const tagWidth = useMemo(() => {
+    if (!Array.isArray(selectedValues)) {
+      return TAG_BASE_WIDTH + TABLUAR_NUM_WIDTH;
+    }
+    const count = selectedValues.length;
+    const digits = count.toString().length;
+    return TAG_BASE_WIDTH + digits * TABLUAR_NUM_WIDTH;
+  }, [selectedValues]);
+  const results = useMemo(() => {
+    return isSearchControlled ? options : matches;
+  }, [matches, options, isSearchControlled]);
+  return /* @__PURE__ */ jsxs(
+    ComboboxProvider,
+    {
+      open,
+      setOpen: handleOpenChange,
+      selectedValue: selectedValues,
+      setSelectedValue: (value) => handleValueChange(value),
+      value: uncontrolledSearchValue,
+      setValue: (query) => {
+        startTransition(() => handleSearchChange(query));
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: clx(
+              "relative flex cursor-pointer items-center gap-x-2 overflow-hidden",
+              "h-8 w-full rounded-md",
+              "bg-ui-bg-field transition-fg shadow-borders-base",
+              "has-[input:focus]:shadow-borders-interactive-with-active",
+              "has-[:invalid]:shadow-borders-error has-[[aria-invalid=true]]:shadow-borders-error",
+              "has-[:disabled]:bg-ui-bg-disabled has-[:disabled]:text-ui-fg-disabled has-[:disabled]:cursor-not-allowed",
+              className
+            ),
+            style: {
+              "--tag-width": `${tagWidth}px`
+            },
+            children: [
+              showTag && /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: (e) => {
+                    e.preventDefault();
+                    handleValueChange(void 0);
+                  },
+                  className: "bg-ui-bg-base hover:bg-ui-bg-base-hover txt-compact-small-plus text-ui-fg-subtle focus-within:border-ui-fg-interactive transition-fg absolute left-0.5 top-0.5 z-[1] flex h-[28px] items-center rounded-[4px] border py-[3px] pl-1.5 pr-1 outline-none",
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: selectedValues.length }),
+                    /* @__PURE__ */ jsx(XMarkMini, { className: "text-ui-fg-muted" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "relative flex size-full items-center", children: [
+                showSelected && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: clx(
+                      "pointer-events-none absolute inset-y-0 flex size-full items-center",
+                      {
+                        "left-[calc(var(--tag-width)+8px)]": showTag,
+                        "left-2": !showTag
+                      }
+                    ),
+                    children: /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: "Selected" })
+                  }
+                ),
+                hideInput && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: clx(
+                      "pointer-events-none absolute inset-y-0 flex size-full items-center overflow-hidden pr-10",
+                      {
+                        "left-[calc(var(--tag-width)+8px)]": showTag,
+                        "left-2": !showTag
+                      }
+                    ),
+                    children: /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", className: "truncate", children: selectedLabel })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Combobox$1,
+                  {
+                    autoSelect: true,
+                    ref: comboboxRef,
+                    onFocus: () => setOpen(true),
+                    className: clx(
+                      "txt-compact-small text-ui-fg-base !placeholder:text-ui-fg-muted transition-fg size-full cursor-pointer bg-transparent pl-2 pr-8 outline-none focus:cursor-text",
+                      "hover:bg-ui-bg-field-hover",
+                      {
+                        "opacity-0": hideInput,
+                        "pl-2": !showTag,
+                        "pl-[calc(var(--tag-width)+8px)]": showTag
+                      }
+                    ),
+                    placeholder: hidePlaceholder ? void 0 : placeholder,
+                    ...inputProps
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                ComboboxDisclosure,
+                {
+                  render: (props) => {
+                    return /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        ...props,
+                        type: "button",
+                        className: "text-ui-fg-muted transition-fg hover:bg-ui-bg-field-hover absolute right-0 flex size-8 items-center justify-center rounded-r outline-none",
+                        children: /* @__PURE__ */ jsx(TrianglesMini, {})
+                      }
+                    );
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          ComboboxPopover,
+          {
+            gutter: 4,
+            sameWidth: true,
+            ref: listboxRef,
+            role: "listbox",
+            className: clx(
+              "shadow-elevation-flyout bg-ui-bg-base z-50 rounded-[8px] p-1",
+              "max-h-[200px] overflow-y-auto",
+              "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+              "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+              "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+            ),
+            style: {
+              pointerEvents: open ? "auto" : "none"
+            },
+            "aria-busy": isPending,
+            children: [
+              results.map(({ value, label, disabled }) => /* @__PURE__ */ jsxs(
+                ComboboxItem,
+                {
+                  value,
+                  focusOnHover: true,
+                  setValueOnClick: false,
+                  disabled,
+                  className: clx(
+                    "transition-fg bg-ui-bg-base data-[active-item=true]:bg-ui-bg-base-hover group flex cursor-pointer items-center gap-x-2 rounded-[4px] px-2 py-1",
+                    {
+                      "text-ui-fg-disabled": disabled,
+                      "bg-ui-bg-component": disabled
+                    }
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(ComboboxItemCheck, { className: "flex !size-5 items-center justify-center", children: isArrayValue ? /* @__PURE__ */ jsx(CheckMini, {}) : /* @__PURE__ */ jsx(EllipseMiniSolid, {}) }),
+                    /* @__PURE__ */ jsx(ComboboxItemValue, { className: "txt-compact-small", children: label })
+                  ]
+                },
+                value
+              )),
+              !!fetchNextPage && /* @__PURE__ */ jsx("div", { ref: lastOptionRef, className: "w-px" }),
+              isFetchingNextPage && /* @__PURE__ */ jsx("div", { className: "transition-fg bg-ui-bg-base flex items-center rounded-[4px] px-2 py-1.5", children: /* @__PURE__ */ jsx("div", { className: "bg-ui-bg-component size-full h-5 w-full animate-pulse rounded-[4px]" }) }),
+              !results.length && (noResultsPlaceholder && !(searchValue == null ? void 0 : searchValue.length) ? noResultsPlaceholder : /* @__PURE__ */ jsx("div", { className: "flex items-center gap-x-2 rounded-[4px] px-2 py-1.5", children: /* @__PURE__ */ jsx(
+                Text,
+                {
+                  size: "small",
+                  leading: "compact",
+                  className: "text-ui-fg-subtle",
+                  children: "No results found"
+                }
+              ) })),
+              !results.length && onCreateOption && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(Separator, { className: "bg-ui-border-base -mx-1" }),
+                /* @__PURE__ */ jsxs(
+                  ComboboxItem,
+                  {
+                    value: uncontrolledSearchValue,
+                    focusOnHover: true,
+                    setValueOnClick: false,
+                    className: "transition-fg bg-ui-bg-base data-[active-item=true]:bg-ui-bg-base-hover group mt-1 flex cursor-pointer items-center gap-x-2 rounded-[4px] px-2 py-1.5",
+                    children: [
+                      /* @__PURE__ */ jsx(PlusMini, { className: "text-ui-fg-subtle" }),
+                      /* @__PURE__ */ jsxs(Text, { size: "small", leading: "compact", children: [
+                        'Create "',
+                        searchValue,
+                        '"'
+                      ] })
+                    ]
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+const Combobox = genericForwardRef(ComboboxImpl);
+export {
+  Combobox
+};