@luxfi/ui 6.1.3 → 7.1.0

package/dist/select.cjs

@@ -0,0 +1,644 @@
+"use client";
+'use strict';
+
+var RadixSelect = require('@radix-ui/react-select');
+var usehooks = require('@uidotdev/usehooks');
+var React2 = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var RadixSelect__namespace = /*#__PURE__*/_interopNamespace(RadixSelect);
+var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
+
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var SHIM_PROPS = [
+  "w",
+  "h",
+  "minW",
+  "maxW",
+  "display",
+  "flexGrow",
+  "flexShrink",
+  "flexBasis",
+  "fontWeight",
+  "textStyle",
+  "borderRadius",
+  "alignSelf",
+  "alignItems",
+  "justifyContent",
+  "color",
+  "mt",
+  "mb",
+  "ml",
+  "mr",
+  "height",
+  "overflow",
+  "whiteSpace",
+  "textOverflow",
+  "textTransform",
+  "gap",
+  "gridTemplateColumns",
+  "minWidth",
+  "boxSize",
+  "py",
+  "px",
+  "p",
+  "hideBelow",
+  "fontSize",
+  "flexWrap",
+  "wordBreak",
+  "lineHeight",
+  "marginRight",
+  "position",
+  "background"
+];
+var S = 4;
+function dim(v) {
+  if (v == null) return void 0;
+  if (typeof v === "number") return `${v * S}px`;
+  if (typeof v === "string") return v;
+  if (typeof v === "object") {
+    const o = v;
+    return o.base ?? o.lg ?? o.xl ?? Object.values(o)[0];
+  }
+  return void 0;
+}
+function sp(v) {
+  if (v === void 0) return void 0;
+  return typeof v === "number" ? `${v * S}px` : v;
+}
+function shimToStyle(props) {
+  const s = {};
+  if (props.w !== void 0) s.width = dim(props.w);
+  if (props.h !== void 0) s.height = dim(props.h);
+  if (props.minW !== void 0) s.minWidth = dim(props.minW);
+  if (props.maxW !== void 0) s.maxWidth = dim(props.maxW);
+  if (props.display !== void 0) s.display = props.display;
+  if (props.flexGrow !== void 0) s.flexGrow = props.flexGrow;
+  if (props.flexShrink !== void 0) s.flexShrink = props.flexShrink;
+  if (props.flexBasis !== void 0) s.flexBasis = props.flexBasis;
+  if (props.fontWeight !== void 0) s.fontWeight = props.fontWeight;
+  if (props.borderRadius !== void 0) s.borderRadius = props.borderRadius;
+  if (props.alignSelf !== void 0) s.alignSelf = props.alignSelf;
+  if (props.alignItems !== void 0) s.alignItems = props.alignItems;
+  if (props.justifyContent !== void 0) s.justifyContent = props.justifyContent;
+  if (props.color !== void 0) s.color = props.color;
+  if (props.mt !== void 0) s.marginTop = sp(props.mt);
+  if (props.mb !== void 0) s.marginBottom = sp(props.mb);
+  if (props.ml !== void 0) s.marginLeft = sp(props.ml);
+  if (props.mr !== void 0) s.marginRight = sp(props.mr);
+  if (props.height !== void 0) s.height = props.height;
+  if (props.overflow !== void 0) s.overflow = props.overflow;
+  if (props.whiteSpace !== void 0) s.whiteSpace = props.whiteSpace;
+  if (props.textOverflow !== void 0) s.textOverflow = props.textOverflow;
+  if (props.textTransform !== void 0) s.textTransform = props.textTransform;
+  if (props.gap !== void 0) s.gap = sp(props.gap);
+  if (props.gridTemplateColumns !== void 0) s.gridTemplateColumns = props.gridTemplateColumns;
+  if (props.minWidth !== void 0) s.minWidth = props.minWidth;
+  if (props.boxSize !== void 0) {
+    const v = typeof props.boxSize === "number" ? `${props.boxSize * S}px` : props.boxSize;
+    s.width = v;
+    s.height = v;
+  }
+  if (props.py !== void 0) {
+    const v = sp(props.py);
+    s.paddingTop = v;
+    s.paddingBottom = v;
+  }
+  if (props.px !== void 0) {
+    const v = sp(props.px);
+    s.paddingLeft = v;
+    s.paddingRight = v;
+  }
+  if (props.p !== void 0) s.padding = sp(props.p);
+  if (props.fontSize !== void 0) s.fontSize = props.fontSize;
+  if (props.flexWrap !== void 0) s.flexWrap = props.flexWrap;
+  if (props.wordBreak !== void 0) s.wordBreak = props.wordBreak;
+  if (props.lineHeight !== void 0) s.lineHeight = props.lineHeight;
+  if (props.marginRight !== void 0) s.marginRight = props.marginRight;
+  if (props.position !== void 0) s.position = props.position;
+  if (props.background !== void 0) s.background = props.background;
+  return s;
+}
+function stripShims(props) {
+  const out = { ...props };
+  for (const k of SHIM_PROPS) delete out[k];
+  return out;
+}
+var SKELETON_CLASSES = [
+  "animate-skeleton-shimmer rounded-sm",
+  "bg-[linear-gradient(90deg,var(--color-skeleton-start)_0%,var(--color-skeleton-end)_50%,var(--color-skeleton-start)_100%)]",
+  "bg-[length:200%_100%]"
+].join(" ");
+var HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
+var Skeleton = React2__namespace.forwardRef(
+  function Skeleton2(props, ref) {
+    const { loading = false, asChild, className, children, style: styleProp, as: Component = "div", ...allRest } = props;
+    const shimStyle = shimToStyle(props);
+    const mergedStyle = Object.keys(shimStyle).length > 0 || styleProp ? { ...shimStyle, ...styleProp } : void 0;
+    const hideBelowClass = props.hideBelow ? HIDE_BELOW_MAP[props.hideBelow] : void 0;
+    const cls = hideBelowClass ? cn(className, hideBelowClass) : className;
+    const htmlRest = stripShims(allRest);
+    if (!loading) {
+      if (asChild && React2__namespace.isValidElement(children)) return children;
+      return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, className: cls, style: mergedStyle, ...htmlRest, children });
+    }
+    if (asChild && React2__namespace.isValidElement(children)) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Component,
+        {
+          ref,
+          "data-loading": true,
+          className: cn(SKELETON_CLASSES, "text-transparent [&_*]:invisible", cls),
+          style: mergedStyle,
+          ...htmlRest,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Component,
+      {
+        ref,
+        "data-loading": true,
+        className: cn(SKELETON_CLASSES, children ? "text-transparent [&_*]:invisible" : "min-h-5", cls),
+        style: mergedStyle,
+        ...htmlRest,
+        children
+      }
+    );
+  }
+);
+React2__namespace.forwardRef(
+  function SkeletonCircle2(props, ref) {
+    const { size = 40, loading = true, className, ...rest } = props;
+    const dimension = typeof size === "number" ? `${size}px` : size;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Skeleton,
+      {
+        ref,
+        loading,
+        className: cn("rounded-full shrink-0", className),
+        style: { width: dimension, height: dimension, ...rest.style },
+        ...rest
+      }
+    );
+  }
+);
+React2__namespace.forwardRef(
+  function SkeletonText2(props, ref) {
+    const { noOfLines = 3, loading = true, className, ...rest } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex w-full flex-col gap-2", className), ...rest, children: Array.from({ length: noOfLines }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      Skeleton,
+      {
+        loading,
+        className: cn("h-4", index === noOfLines - 1 && "max-w-[80%]")
+      },
+      index
+    )) });
+  }
+);
+function createListCollection(config) {
+  return { items: config.items };
+}
+var ArrowIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7.5 15L12.5 10L7.5 5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var CheckIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16.667 5L7.5 14.167 3.333 10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
+function FilterInput({ placeholder, initialValue = "", onChange }) {
+  const [value, setValue] = React2__namespace.useState(initialValue);
+  const handleChange = React2__namespace.useCallback((e) => {
+    setValue(e.target.value);
+    onChange?.(e.target.value);
+  }, [onChange]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      type: "text",
+      placeholder,
+      value,
+      onChange: handleChange,
+      className: cn(
+        "w-full px-3 py-2 text-sm outline-none",
+        "bg-transparent border-b border-[var(--color-border-divider)]",
+        "placeholder:text-[var(--color-input-placeholder)]"
+      )
+    }
+  );
+}
+var SelectInternalContext = React2__namespace.createContext(null);
+function useSelectInternalContext() {
+  const ctx = React2__namespace.useContext(SelectInternalContext);
+  if (!ctx) {
+    throw new Error("Select compound components must be rendered inside <SelectRoot>");
+  }
+  return ctx;
+}
+var SelectRoot = React2__namespace.forwardRef(
+  function SelectRoot2(props, ref) {
+    const {
+      children,
+      collection: collectionProp,
+      defaultValue: defaultValueArr,
+      value: valueProp,
+      onValueChange: onValueChangeProp,
+      onInteractOutside,
+      name,
+      disabled,
+      readOnly,
+      required,
+      invalid,
+      size,
+      variant,
+      open: openProp,
+      defaultOpen,
+      onOpenChange,
+      positioning: _positioning,
+      lazyMount: _lazyMount,
+      unmountOnExit: _unmountOnExit,
+      asChild: _asChild,
+      className,
+      style,
+      w,
+      maxW,
+      minW,
+      hideFrom: _hideFrom
+    } = props;
+    const collection = collectionProp ?? createListCollection({ items: [] });
+    const [internalValue, setInternalValue] = React2__namespace.useState(defaultValueArr ?? []);
+    const currentValue = valueProp ?? internalValue;
+    const selectedItems = React2__namespace.useMemo(() => {
+      return currentValue.map((v) => collection.items.find((item) => item.value === v)).filter(Boolean);
+    }, [currentValue, collection.items]);
+    const [open, setOpen] = React2__namespace.useState(defaultOpen ?? false);
+    const isOpen = openProp ?? open;
+    const handleOpenChange = React2__namespace.useCallback((nextOpen) => {
+      setOpen(nextOpen);
+      onOpenChange?.(nextOpen);
+      if (!nextOpen) {
+        onInteractOutside?.();
+      }
+    }, [onOpenChange, onInteractOutside]);
+    const handleRadixValueChange = React2__namespace.useCallback((radixValue) => {
+      const nextArr = [radixValue];
+      if (!valueProp) {
+        setInternalValue(nextArr);
+      }
+      const items = collection.items.filter((item) => nextArr.includes(item.value));
+      onValueChangeProp?.({ value: nextArr, items });
+    }, [valueProp, collection.items, onValueChangeProp]);
+    const ctxValue = React2__namespace.useMemo(() => ({
+      value: currentValue,
+      selectedItems,
+      collection,
+      onValueChange: (details) => {
+        if (!valueProp) {
+          setInternalValue(details.value);
+        }
+        onValueChangeProp?.(details);
+      },
+      open: isOpen,
+      size,
+      variant,
+      disabled
+    }), [currentValue, selectedItems, collection, valueProp, onValueChangeProp, isOpen, size, variant, disabled]);
+    const resolveVal = (v) => {
+      if (!v) return void 0;
+      if (typeof v === "string") return v;
+      return v.base ?? v.lg ?? Object.values(v)[0];
+    };
+    const inlineStyle = React2__namespace.useMemo(() => {
+      const s = { ...style };
+      const rw = resolveVal(w);
+      if (rw) s.width = rw;
+      const rmw = resolveVal(maxW);
+      if (rmw) s.maxWidth = rmw;
+      const rminw = resolveVal(minW);
+      if (rminw) s.minWidth = rminw;
+      return s;
+    }, [style, w, maxW, minW]);
+    return /* @__PURE__ */ jsxRuntime.jsx(SelectInternalContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+      RadixSelect__namespace.Root,
+      {
+        value: currentValue[0] ?? "",
+        defaultValue: defaultValueArr?.[0],
+        onValueChange: handleRadixValueChange,
+        open: isOpen,
+        onOpenChange: handleOpenChange,
+        disabled: disabled || readOnly,
+        name,
+        required,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref,
+            className: cn("relative inline-flex", className),
+            style: inlineStyle,
+            "data-invalid": invalid || void 0,
+            "data-disabled": disabled || void 0,
+            "data-variant": variant || void 0,
+            "data-size": size || void 0,
+            children
+          }
+        )
+      }
+    ) });
+  }
+);
+var SelectControl = React2__namespace.forwardRef(
+  function SelectControl2(props, ref) {
+    const { children, noIndicator, triggerProps, loading, defaultValue } = props;
+    const ctx = useSelectInternalContext();
+    const isDefaultValue = Array.isArray(defaultValue) ? ctx.value.every((item) => defaultValue.includes(item)) : false;
+    const { asChild, px: _px, className: triggerClassName, ...radixTriggerProps } = triggerProps ?? {};
+    const trigger = /* @__PURE__ */ jsxRuntime.jsx(
+      RadixSelect__namespace.Trigger,
+      {
+        ref,
+        asChild,
+        className: cn(
+          "group peer inline-flex items-center gap-2 cursor-pointer",
+          "rounded-lg text-sm transition-colors outline-none",
+          "border border-[var(--color-input-border)] bg-[var(--color-input-bg)] text-[var(--color-input-fg)]",
+          "hover:border-[var(--color-input-border-hover)]",
+          "focus-visible:border-[var(--color-input-border-focus)]",
+          "disabled:opacity-50 disabled:cursor-not-allowed",
+          ctx.variant === "plain" && "border-transparent bg-transparent px-1 py-0.5",
+          ctx.variant !== "plain" && ctx.size === "lg" && "px-4 py-2.5 min-h-[52px]",
+          ctx.variant !== "plain" && ctx.size !== "lg" && "px-3 py-1.5 min-h-[36px]",
+          triggerClassName
+        ),
+        "data-default-value": isDefaultValue || void 0,
+        ...radixTriggerProps,
+        children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          children,
+          !noIndicator && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto shrink-0 transition-transform data-[state=open]:rotate-180 text-[var(--color-icon-secondary)]", children: /* @__PURE__ */ jsxRuntime.jsx(ArrowIcon, { className: "h-5 w-5 -rotate-90" }) })
+        ] })
+      }
+    );
+    if (loading) {
+      return /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { loading, asChild: true, children: trigger });
+    }
+    return trigger;
+  }
+);
+var SelectClearTrigger = React2__namespace.forwardRef(
+  function SelectClearTrigger2(props, ref) {
+    const { className, ...rest } = props;
+    const ctx = useSelectInternalContext();
+    const handleClick = React2__namespace.useCallback(() => {
+      ctx.onValueChange({ value: [], items: [] });
+    }, [ctx]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        onClick: handleClick,
+        className: cn("pointer-events-auto", className),
+        "aria-label": "Clear selection",
+        ...rest,
+        children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "h-5 w-5", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6L6 18M6 6l12 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
+      }
+    );
+  }
+);
+var SelectContent = React2__namespace.forwardRef(
+  function SelectContent2(props, ref) {
+    const { portalled = true, portalRef, children, className, ...rest } = props;
+    const content = /* @__PURE__ */ jsxRuntime.jsx(
+      RadixSelect__namespace.Content,
+      {
+        ref,
+        position: "popper",
+        sideOffset: 4,
+        className: cn(
+          "z-50 min-w-[8rem] overflow-hidden rounded-lg",
+          "bg-[var(--color-popover-bg)] shadow-[var(--shadow-popover)]",
+          "border border-[var(--color-border-divider)]",
+          "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",
+          className
+        ),
+        ...rest,
+        children: /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.Viewport, { className: "p-1", children })
+      }
+    );
+    if (portalled) {
+      return /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.Portal, { container: portalRef?.current ?? void 0, children: content });
+    }
+    return content;
+  }
+);
+var SelectItem = React2__namespace.forwardRef(
+  function SelectItem2(props, ref) {
+    const { item, children, className, ...rest } = props;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      RadixSelect__namespace.Item,
+      {
+        ref,
+        value: item.value,
+        textValue: item.label,
+        className: cn(
+          "relative flex cursor-pointer select-none items-center gap-2",
+          "rounded-md px-3 py-2 text-sm outline-none",
+          "text-[var(--color-text-primary)]",
+          "data-[highlighted]:bg-[var(--color-selected-control-bg)]",
+          "data-[state=checked]:font-medium",
+          "data-[disabled]:opacity-50 data-[disabled]:pointer-events-none",
+          className
+        ),
+        ...rest,
+        children: [
+          item.icon,
+          /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.ItemText, { children }),
+          /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.ItemIndicator, { className: "ml-auto shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "h-5 w-5" }) })
+        ]
+      }
+    );
+  }
+);
+var SelectValueText = React2__namespace.forwardRef(
+  function SelectValueText2(props, ref) {
+    const { children, size, required, invalid, errorText, mode, className, style, placeholder: placeholderProp, ...rest } = props;
+    const ctx = useSelectInternalContext();
+    const placeholderText = `${placeholderProp ?? ""}${required ? "*" : ""}${invalid && errorText ? ` - ${errorText}` : ""}`;
+    const content = (() => {
+      const items = ctx.selectedItems;
+      if (items.length === 0) return null;
+      if (children) return children(items);
+      if (items.length === 1) {
+        const item = items[0];
+        if (!item) return null;
+        const label = size === "lg" ? /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn(
+              "text-xs block",
+              invalid ? "text-[var(--color-text-error)]" : "text-[var(--color-input-placeholder)]"
+            ),
+            style: { display: "-webkit-box" },
+            children: placeholderText
+          }
+        ) : null;
+        return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          label,
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center flex-nowrap gap-1", children: [
+            item.icon,
+            mode !== "compact" && /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                style: {
+                  WebkitLineClamp: 1,
+                  WebkitBoxOrient: "vertical",
+                  display: "-webkit-box",
+                  overflow: "hidden"
+                },
+                children: item.renderLabel ? item.renderLabel("value-text") : item.label
+              }
+            )
+          ] })
+        ] });
+      }
+      return `${items.length} selected`;
+    })();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      RadixSelect__namespace.Value,
+      {
+        ref,
+        placeholder: placeholderText,
+        className: cn("flex flex-col justify-center min-w-0 truncate", className),
+        ...rest,
+        children: content
+      }
+    );
+  }
+);
+var SelectItemGroup = React2__namespace.forwardRef(
+  function SelectItemGroup2(props, ref) {
+    const { children, label, className, ...rest } = props;
+    return /* @__PURE__ */ jsxRuntime.jsxs(RadixSelect__namespace.Group, { ref, className: cn("py-1", className), ...rest, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.Label, { className: "px-3 py-1.5 text-xs font-medium text-[var(--color-text-secondary)]", children: label }),
+      children
+    ] });
+  }
+);
+var SelectLabel = RadixSelect__namespace.Label;
+var SelectItemText = RadixSelect__namespace.ItemText;
+var Select = React2__namespace.forwardRef((props, ref) => {
+  const { collection, placeholder, portalled = true, loading, errorText, contentProps, contentHeader, itemFilter, mode, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    SelectRoot,
+    {
+      ref,
+      collection,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SelectControl, { loading, children: /* @__PURE__ */ jsxRuntime.jsx(
+          SelectValueText,
+          {
+            placeholder,
+            size: props.size,
+            required: props.required,
+            invalid: props.invalid,
+            errorText,
+            mode
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(SelectContent, { portalled, ...contentProps, children: [
+          contentHeader,
+          collection.items.filter(itemFilter ?? (() => true)).map((item) => /* @__PURE__ */ jsxRuntime.jsxs(React2__namespace.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { item, children: item.renderLabel ? item.renderLabel("item") : item.label }),
+            item.afterElement
+          ] }, item.value))
+        ] })
+      ]
+    }
+  );
+});
+var SelectAsync = React2__namespace.forwardRef((props, ref) => {
+  const { placeholder, portalled = true, loading, loadOptions, extraControls, onValueChange, errorText, mode, contentHeader, ...rest } = props;
+  const [collection, setCollection] = React2__namespace.useState(createListCollection({ items: [] }));
+  const [inputValue, setInputValue] = React2__namespace.useState("");
+  const [value, setValue] = React2__namespace.useState([]);
+  const debouncedInputValue = usehooks.useDebounce(inputValue, 300);
+  React2__namespace.useEffect(() => {
+    loadOptions(debouncedInputValue, value).then(setCollection);
+  }, [debouncedInputValue, loadOptions, value]);
+  const handleFilterChange = React2__namespace.useCallback((val) => {
+    setInputValue(val);
+  }, []);
+  const handleValueChange = React2__namespace.useCallback(({ value: v, items }) => {
+    setValue(v);
+    onValueChange?.({ value: v, items });
+  }, [onValueChange]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    SelectRoot,
+    {
+      ref,
+      collection,
+      onValueChange: handleValueChange,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SelectControl, { loading, children: /* @__PURE__ */ jsxRuntime.jsx(
+          SelectValueText,
+          {
+            placeholder,
+            size: props.size,
+            required: props.required,
+            invalid: props.invalid,
+            errorText,
+            mode
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(SelectContent, { portalled, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              FilterInput,
+              {
+                placeholder: "Search",
+                initialValue: inputValue,
+                onChange: handleFilterChange
+              }
+            ),
+            extraControls
+          ] }),
+          contentHeader,
+          collection.items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { item, children: item.renderLabel ? item.renderLabel("item") : item.label }, item.value))
+        ] })
+      ]
+    }
+  );
+});
+
+exports.Select = Select;
+exports.SelectAsync = SelectAsync;
+exports.SelectClearTrigger = SelectClearTrigger;
+exports.SelectContent = SelectContent;
+exports.SelectControl = SelectControl;
+exports.SelectItem = SelectItem;
+exports.SelectItemGroup = SelectItemGroup;
+exports.SelectItemText = SelectItemText;
+exports.SelectLabel = SelectLabel;
+exports.SelectRoot = SelectRoot;
+exports.SelectValueText = SelectValueText;
+exports.createListCollection = createListCollection;