@luxfi/ui 5.6.0 → 6.1.0

package/dist/select.js

@@ -1,757 +0,0 @@
-"use client";
-import * as RadixSelect from '@radix-ui/react-select';
-import { useDebounce } from '@uidotdev/usehooks';
-import * as React2 from 'react';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-var SPACING_SCALE = 4;
-function toStylePx(value) {
-  if (value === void 0) return void 0;
-  if (typeof value === "string") return value;
-  return `${value * SPACING_SCALE}px`;
-}
-function extractSkeletonStyleProps(props) {
-  const style = {};
-  const rest = {};
-  function resolveDimension(value) {
-    if (value === void 0 || value === null) return void 0;
-    if (typeof value === "number") return `${value * SPACING_SCALE}px`;
-    if (typeof value === "string") return value;
-    if (typeof value === "object") {
-      const obj = value;
-      return obj.base ?? obj.lg ?? obj.xl ?? Object.values(obj)[0];
-    }
-    return void 0;
-  }
-  for (const [key, value] of Object.entries(props)) {
-    if (value === void 0) continue;
-    switch (key) {
-      case "w": {
-        const v = resolveDimension(value);
-        if (v) style.width = v;
-        break;
-      }
-      case "h": {
-        const v = resolveDimension(value);
-        if (v) style.height = v;
-        break;
-      }
-      case "minW": {
-        const v = resolveDimension(value);
-        if (v) style.minWidth = v;
-        break;
-      }
-      case "maxW": {
-        const v = resolveDimension(value);
-        if (v) style.maxWidth = v;
-        break;
-      }
-      case "height":
-        style.height = value;
-        break;
-      case "display":
-        style.display = value;
-        break;
-      case "flexGrow":
-        style.flexGrow = value;
-        break;
-      case "flexShrink":
-        style.flexShrink = value;
-        break;
-      case "flexBasis":
-        style.flexBasis = value;
-        break;
-      case "fontWeight":
-        style.fontWeight = value;
-        break;
-      case "borderRadius":
-        style.borderRadius = value;
-        break;
-      case "alignSelf":
-        style.alignSelf = value;
-        break;
-      case "alignItems":
-        style.alignItems = value;
-        break;
-      case "justifyContent":
-        style.justifyContent = value;
-        break;
-      case "color":
-        style.color = value;
-        break;
-      case "mt":
-        style.marginTop = toStylePx(value);
-        break;
-      case "mb":
-        style.marginBottom = toStylePx(value);
-        break;
-      case "ml":
-        style.marginLeft = toStylePx(value);
-        break;
-      case "mr":
-        style.marginRight = toStylePx(value);
-        break;
-      case "overflow":
-        style.overflow = value;
-        break;
-      case "whiteSpace":
-        style.whiteSpace = value;
-        break;
-      case "textOverflow":
-        style.textOverflow = value;
-        break;
-      case "textTransform":
-        style.textTransform = value;
-        break;
-      case "gap":
-        style.gap = typeof value === "number" ? `${value * SPACING_SCALE}px` : value;
-        break;
-      case "gridTemplateColumns":
-        style.gridTemplateColumns = value;
-        break;
-      case "minWidth":
-        style.minWidth = value;
-        break;
-      case "boxSize": {
-        const s = typeof value === "number" ? `${value * SPACING_SCALE}px` : value;
-        style.width = s;
-        style.height = s;
-        break;
-      }
-      case "py": {
-        const v = toStylePx(value);
-        style.paddingTop = v;
-        style.paddingBottom = v;
-        break;
-      }
-      case "px": {
-        const v = toStylePx(value);
-        style.paddingLeft = v;
-        style.paddingRight = v;
-        break;
-      }
-      case "p": {
-        const v = toStylePx(value);
-        style.padding = v;
-        break;
-      }
-      case "hideBelow":
-        break;
-      // handled via className
-      case "textStyle":
-        break;
-      // drop textStyle, not directly applicable
-      case "fontSize":
-        style.fontSize = value;
-        break;
-      case "flexWrap":
-        style.flexWrap = value;
-        break;
-      case "wordBreak":
-        style.wordBreak = value;
-        break;
-      case "lineHeight":
-        style.lineHeight = value;
-        break;
-      case "marginRight":
-        style.marginRight = value;
-        break;
-      case "position":
-        style.position = value;
-        break;
-      case "background":
-        style.background = value;
-        break;
-      default:
-        rest[key] = value;
-        break;
-    }
-  }
-  return { style, rest };
-}
-var Skeleton = React2.forwardRef(
-  function Skeleton2(props, ref) {
-    const {
-      loading = false,
-      asChild,
-      className,
-      children,
-      style: styleProp,
-      // Destructure style-prop shims so they don't leak into DOM
-      w: _w,
-      h: _h,
-      minW: _minW,
-      maxW: _maxW,
-      display: _display,
-      flexGrow: _flexGrow,
-      flexShrink: _flexShrink,
-      flexBasis: _flexBasis,
-      fontWeight: _fontWeight,
-      textStyle: _textStyle,
-      borderRadius: _borderRadius,
-      alignSelf: _alignSelf,
-      alignItems: _alignItems,
-      justifyContent: _justifyContent,
-      color: _color,
-      mt: _mt,
-      mb: _mb,
-      ml: _ml,
-      mr: _mr,
-      height: _height,
-      overflow: _overflow,
-      whiteSpace: _whiteSpace,
-      textOverflow: _textOverflow,
-      textTransform: _textTransform,
-      gap: _gap,
-      gridTemplateColumns: _gridTemplateColumns,
-      minWidth: _minWidth,
-      boxSize: _boxSize,
-      py: _py,
-      px: _px,
-      p: _p,
-      hideBelow: _hideBelow,
-      fontSize: _fontSize,
-      flexWrap: _flexWrap,
-      wordBreak: _wordBreak,
-      lineHeight: _lineHeight,
-      marginRight: _marginRight,
-      position: _position,
-      background: _background,
-      as: Component = "div",
-      ...htmlRest
-    } = props;
-    const { style: shimStyle } = extractSkeletonStyleProps({
-      w: _w,
-      h: _h,
-      minW: _minW,
-      maxW: _maxW,
-      display: _display,
-      flexGrow: _flexGrow,
-      flexShrink: _flexShrink,
-      flexBasis: _flexBasis,
-      fontWeight: _fontWeight,
-      textStyle: _textStyle,
-      borderRadius: _borderRadius,
-      alignSelf: _alignSelf,
-      alignItems: _alignItems,
-      justifyContent: _justifyContent,
-      color: _color,
-      mt: _mt,
-      mb: _mb,
-      ml: _ml,
-      mr: _mr,
-      height: _height,
-      overflow: _overflow,
-      whiteSpace: _whiteSpace,
-      textOverflow: _textOverflow,
-      textTransform: _textTransform,
-      gap: _gap,
-      gridTemplateColumns: _gridTemplateColumns,
-      minWidth: _minWidth,
-      boxSize: _boxSize,
-      py: _py,
-      px: _px,
-      p: _p,
-      hideBelow: _hideBelow,
-      fontSize: _fontSize,
-      flexWrap: _flexWrap,
-      wordBreak: _wordBreak,
-      lineHeight: _lineHeight,
-      marginRight: _marginRight,
-      position: _position,
-      background: _background
-    });
-    const mergedStyle = Object.keys(shimStyle).length > 0 || styleProp ? { ...shimStyle, ...styleProp } : void 0;
-    const HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
-    const hideBelowClass = _hideBelow ? HIDE_BELOW_MAP[_hideBelow] : void 0;
-    const finalClassName = hideBelowClass ? cn(className, hideBelowClass) : className;
-    if (!loading) {
-      if (asChild && React2.isValidElement(children)) {
-        return children;
-      }
-      return /* @__PURE__ */ jsx(Component, { ref, className: finalClassName, style: mergedStyle, ...htmlRest, children });
-    }
-    if (asChild && React2.isValidElement(children)) {
-      return /* @__PURE__ */ jsx(
-        Component,
-        {
-          ref,
-          "data-loading": true,
-          className: cn(
-            "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%]",
-            "text-transparent [&_*]:invisible",
-            finalClassName
-          ),
-          style: mergedStyle,
-          ...htmlRest,
-          children
-        }
-      );
-    }
-    return /* @__PURE__ */ jsx(
-      Component,
-      {
-        ref,
-        "data-loading": true,
-        className: cn(
-          "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%]",
-          children ? "text-transparent [&_*]:invisible" : "min-h-5",
-          finalClassName
-        ),
-        style: mergedStyle,
-        ...htmlRest,
-        children
-      }
-    );
-  }
-);
-React2.forwardRef(
-  function SkeletonCircle2(props, ref) {
-    const { size = 40, loading = true, className, ...rest } = props;
-    const dimension = typeof size === "number" ? `${size}px` : size;
-    return /* @__PURE__ */ jsx(
-      Skeleton,
-      {
-        ref,
-        loading,
-        className: cn("rounded-full shrink-0", className),
-        style: { width: dimension, height: dimension, ...rest.style },
-        ...rest
-      }
-    );
-  }
-);
-React2.forwardRef(
-  function SkeletonText2(props, ref) {
-    const { noOfLines = 3, loading = true, className, ...rest } = props;
-    return /* @__PURE__ */ jsx("div", { ref, className: cn("flex w-full flex-col gap-2", className), ...rest, children: Array.from({ length: noOfLines }).map((_, index) => /* @__PURE__ */ 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__ */ jsx("svg", { className, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M7.5 15L12.5 10L7.5 5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
-var CheckIcon = ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ 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.useState(initialValue);
-  const handleChange = React2.useCallback((e) => {
-    setValue(e.target.value);
-    onChange?.(e.target.value);
-  }, [onChange]);
-  return /* @__PURE__ */ 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.createContext(null);
-function useSelectInternalContext() {
-  const ctx = React2.useContext(SelectInternalContext);
-  if (!ctx) {
-    throw new Error("Select compound components must be rendered inside <SelectRoot>");
-  }
-  return ctx;
-}
-var SelectRoot = React2.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.useState(defaultValueArr ?? []);
-    const currentValue = valueProp ?? internalValue;
-    const selectedItems = React2.useMemo(() => {
-      return currentValue.map((v) => collection.items.find((item) => item.value === v)).filter(Boolean);
-    }, [currentValue, collection.items]);
-    const [open, setOpen] = React2.useState(defaultOpen ?? false);
-    const isOpen = openProp ?? open;
-    const handleOpenChange = React2.useCallback((nextOpen) => {
-      setOpen(nextOpen);
-      onOpenChange?.(nextOpen);
-      if (!nextOpen) {
-        onInteractOutside?.();
-      }
-    }, [onOpenChange, onInteractOutside]);
-    const handleRadixValueChange = React2.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.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.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__ */ jsx(SelectInternalContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx(
-      RadixSelect.Root,
-      {
-        value: currentValue[0] ?? "",
-        defaultValue: defaultValueArr?.[0],
-        onValueChange: handleRadixValueChange,
-        open: isOpen,
-        onOpenChange: handleOpenChange,
-        disabled: disabled || readOnly,
-        name,
-        required,
-        children: /* @__PURE__ */ 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.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__ */ jsx(
-      RadixSelect.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__ */ jsxs(Fragment, { children: [
-          children,
-          !noIndicator && /* @__PURE__ */ jsx("span", { className: "ml-auto shrink-0 transition-transform data-[state=open]:rotate-180 text-[var(--color-icon-secondary)]", children: /* @__PURE__ */ jsx(ArrowIcon, { className: "h-5 w-5 -rotate-90" }) })
-        ] })
-      }
-    );
-    if (loading) {
-      return /* @__PURE__ */ jsx(Skeleton, { loading, asChild: true, children: trigger });
-    }
-    return trigger;
-  }
-);
-var SelectClearTrigger = React2.forwardRef(
-  function SelectClearTrigger2(props, ref) {
-    const { className, ...rest } = props;
-    const ctx = useSelectInternalContext();
-    const handleClick = React2.useCallback(() => {
-      ctx.onValueChange({ value: [], items: [] });
-    }, [ctx]);
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        ref,
-        type: "button",
-        onClick: handleClick,
-        className: cn("pointer-events-auto", className),
-        "aria-label": "Clear selection",
-        ...rest,
-        children: /* @__PURE__ */ jsx("svg", { className: "h-5 w-5", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
-      }
-    );
-  }
-);
-var SelectContent = React2.forwardRef(
-  function SelectContent2(props, ref) {
-    const { portalled = true, portalRef, children, className, ...rest } = props;
-    const content = /* @__PURE__ */ jsx(
-      RadixSelect.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__ */ jsx(RadixSelect.Viewport, { className: "p-1", children })
-      }
-    );
-    if (portalled) {
-      return /* @__PURE__ */ jsx(RadixSelect.Portal, { container: portalRef?.current ?? void 0, children: content });
-    }
-    return content;
-  }
-);
-var SelectItem = React2.forwardRef(
-  function SelectItem2(props, ref) {
-    const { item, children, className, ...rest } = props;
-    return /* @__PURE__ */ jsxs(
-      RadixSelect.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__ */ jsx(RadixSelect.ItemText, { children }),
-          /* @__PURE__ */ jsx(RadixSelect.ItemIndicator, { className: "ml-auto shrink-0", children: /* @__PURE__ */ jsx(CheckIcon, { className: "h-5 w-5" }) })
-        ]
-      }
-    );
-  }
-);
-var SelectValueText = React2.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__ */ 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__ */ jsxs(Fragment, { children: [
-          label,
-          /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center flex-nowrap gap-1", children: [
-            item.icon,
-            mode !== "compact" && /* @__PURE__ */ 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__ */ jsx(
-      RadixSelect.Value,
-      {
-        ref,
-        placeholder: placeholderText,
-        className: cn("flex flex-col justify-center min-w-0 truncate", className),
-        ...rest,
-        children: content
-      }
-    );
-  }
-);
-var SelectItemGroup = React2.forwardRef(
-  function SelectItemGroup2(props, ref) {
-    const { children, label, className, ...rest } = props;
-    return /* @__PURE__ */ jsxs(RadixSelect.Group, { ref, className: cn("py-1", className), ...rest, children: [
-      /* @__PURE__ */ jsx(RadixSelect.Label, { className: "px-3 py-1.5 text-xs font-medium text-[var(--color-text-secondary)]", children: label }),
-      children
-    ] });
-  }
-);
-var SelectLabel = RadixSelect.Label;
-var SelectItemText = RadixSelect.ItemText;
-var Select = React2.forwardRef((props, ref) => {
-  const { collection, placeholder, portalled = true, loading, errorText, contentProps, contentHeader, itemFilter, mode, ...rest } = props;
-  return /* @__PURE__ */ jsxs(
-    SelectRoot,
-    {
-      ref,
-      collection,
-      ...rest,
-      children: [
-        /* @__PURE__ */ jsx(SelectControl, { loading, children: /* @__PURE__ */ jsx(
-          SelectValueText,
-          {
-            placeholder,
-            size: props.size,
-            required: props.required,
-            invalid: props.invalid,
-            errorText,
-            mode
-          }
-        ) }),
-        /* @__PURE__ */ jsxs(SelectContent, { portalled, ...contentProps, children: [
-          contentHeader,
-          collection.items.filter(itemFilter ?? (() => true)).map((item) => /* @__PURE__ */ jsxs(React2.Fragment, { children: [
-            /* @__PURE__ */ jsx(SelectItem, { item, children: item.renderLabel ? item.renderLabel("item") : item.label }),
-            item.afterElement
-          ] }, item.value))
-        ] })
-      ]
-    }
-  );
-});
-var SelectAsync = React2.forwardRef((props, ref) => {
-  const { placeholder, portalled = true, loading, loadOptions, extraControls, onValueChange, errorText, mode, contentHeader, ...rest } = props;
-  const [collection, setCollection] = React2.useState(createListCollection({ items: [] }));
-  const [inputValue, setInputValue] = React2.useState("");
-  const [value, setValue] = React2.useState([]);
-  const debouncedInputValue = useDebounce(inputValue, 300);
-  React2.useEffect(() => {
-    loadOptions(debouncedInputValue, value).then(setCollection);
-  }, [debouncedInputValue, loadOptions, value]);
-  const handleFilterChange = React2.useCallback((val) => {
-    setInputValue(val);
-  }, []);
-  const handleValueChange = React2.useCallback(({ value: v, items }) => {
-    setValue(v);
-    onValueChange?.({ value: v, items });
-  }, [onValueChange]);
-  return /* @__PURE__ */ jsxs(
-    SelectRoot,
-    {
-      ref,
-      collection,
-      onValueChange: handleValueChange,
-      ...rest,
-      children: [
-        /* @__PURE__ */ jsx(SelectControl, { loading, children: /* @__PURE__ */ jsx(
-          SelectValueText,
-          {
-            placeholder,
-            size: props.size,
-            required: props.required,
-            invalid: props.invalid,
-            errorText,
-            mode
-          }
-        ) }),
-        /* @__PURE__ */ jsxs(SelectContent, { portalled, children: [
-          /* @__PURE__ */ jsxs("div", { className: "px-4", children: [
-            /* @__PURE__ */ jsx(
-              FilterInput,
-              {
-                placeholder: "Search",
-                initialValue: inputValue,
-                onChange: handleFilterChange
-              }
-            ),
-            extraControls
-          ] }),
-          contentHeader,
-          collection.items.map((item) => /* @__PURE__ */ jsx(SelectItem, { item, children: item.renderLabel ? item.renderLabel("item") : item.label }, item.value))
-        ] })
-      ]
-    }
-  );
-});
-
-export { Select, SelectAsync, SelectClearTrigger, SelectContent, SelectControl, SelectItem, SelectItemGroup, SelectItemText, SelectLabel, SelectRoot, SelectValueText, createListCollection };