@keboola/design 9.1.0 → 11.0.0

package/dist/chunk-576G5OES.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Switch/styles.ts","../src/components/Switch/Switch.tsx"],"names":[],"mappings":"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","file":"chunk-576G5OES.js","sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport const switchVariants = cva(\n  [\n    'tailwindcss-preflight',\n    'tw:shrink-0',\n    'tw:cursor-pointer',\n    'tw:disabled:cursor-not-allowed',\n    'tw:disabled:opacity-50',\n  ],\n  {\n    defaultVariants: {\n      size: 'medium',\n      variant: 'default',\n    },\n    variants: {\n      variant: {\n        default: [\n          'tw:peer/switch',\n          'tw:group/switch',\n          'tw:relative',\n\n          // positioning\n          'tw:flex',\n          'tw:items-center',\n          'tw:gap-2',\n\n          'tw:min-h-5',\n\n          // label\n          'tw:text-neutral-800',\n          'tw:font-normal',\n\n          // before pseudo element\n          'tw:before:content-[\" \"]',\n          'tw:before:block',\n          'tw:before:relative',\n\n          // color\n          'tw:aria-checked:before:bg-primary-500',\n          'tw:before:bg-neutral-200',\n\n          // hover\n          'tw:aria-checked:before:hover:bg-primary-600',\n          'tw:before:hover:bg-neutral-300',\n\n          // disabled\n          'tw:before:disabled:hover:bg-neutral-200',\n\n          // others\n          'tw:transition-colors',\n\n          'tw:focus-visible:outline-hidden',\n          'tw:before:focus-visible:outline',\n          'tw:before:focus-visible:outline-1',\n          'tw:before:focus-visible:outline-ring',\n          'tw:before:focus-visible:ring-4',\n          'tw:before:focus-visible:ring-ring/30',\n        ],\n        argo: [\n          'tw:peer',\n          'tw:inline-flex',\n          'tw:items-center',\n\n          // track\n          'tw:w-9',\n          'tw:h-5',\n          'tw:rounded-full',\n          'tw:border',\n          'tw:border-transparent',\n          'tw:bg-input',\n          'tw:transition-colors',\n\n          // checked\n          'tw:data-[state=checked]:bg-primary',\n\n          // focus\n          'tw:focus-visible:outline-hidden',\n          'tw:focus-visible:border-primary',\n          'tw:focus-visible:ring-3',\n          'tw:focus-visible:ring-ring/50',\n        ],\n      },\n      size: {\n        small: [],\n        medium: [],\n        large: [],\n      },\n    },\n    compoundVariants: [\n      {\n        variant: 'default',\n        size: 'small',\n        class: ['tw:before:w-6', 'tw:before:h-4', 'tw:before:rounded-lg'],\n      },\n      {\n        variant: 'default',\n        size: 'medium',\n        class: ['tw:before:w-8', 'tw:before:h-4', 'tw:before:rounded-lg'],\n      },\n      {\n        variant: 'default',\n        size: 'large',\n        class: ['tw:before:w-10', 'tw:before:h-5', 'tw:before:rounded-xl'],\n      },\n    ],\n  },\n);\n\nexport const thumbVariants = cva(\n  ['tw:block', 'tw:shrink-0', 'tw:pointer-events-none', 'tw:bg-white', 'tw:rounded-full'],\n  {\n    defaultVariants: {\n      size: 'medium',\n      variant: 'default',\n    },\n    variants: {\n      variant: {\n        default: [\n          'tw:absolute',\n          'tw:left-0',\n          'tw:transition-transform',\n          'tw:ease-in-out',\n          'tw:shadow-[0_2px_5px_rgba(0,0,0,.26)]',\n        ],\n        argo: [\n          'tw:size-4',\n          'tw:shadow-sm',\n          'tw:transition-transform',\n          'tw:data-[state=checked]:translate-x-[16px]',\n          'tw:data-[state=unchecked]:translate-x-0.5',\n        ],\n      },\n      size: {\n        small: [],\n        medium: [],\n        large: [],\n      },\n    },\n    compoundVariants: [\n      {\n        variant: 'default',\n        size: 'small',\n        class: [\n          'tw:w-3',\n          'tw:h-3',\n          'tw:data-[state=checked]:translate-x-2.5',\n          'tw:data-[state=unchecked]:translate-x-0.5',\n        ],\n      },\n      {\n        variant: 'default',\n        size: 'medium',\n        class: [\n          'tw:w-3',\n          'tw:h-3',\n          'tw:data-[state=checked]:translate-x-[18px]',\n          'tw:data-[state=unchecked]:translate-x-0.5',\n        ],\n      },\n      {\n        variant: 'default',\n        size: 'large',\n        class: [\n          'tw:w-3.5',\n          'tw:h-3.5',\n          'tw:data-[state=checked]:translate-x-6',\n          'tw:data-[state=unchecked]:translate-x-0.5',\n        ],\n      },\n    ],\n  },\n);\n","import { useId } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { Root, Thumb } from '@radix-ui/react-switch';\nimport type { VariantProps } from 'class-variance-authority';\n\nimport { FieldBox } from '../FieldBox';\nimport type { fieldBoxVariants } from '../FieldBox/styles';\nimport { useArgoDesign } from '../ThemeProvider/context';\n\nimport { switchVariants, thumbVariants } from './styles';\n\ntype Props = {\n  id?: string | number;\n  children?: ReactNode;\n  description?: ReactNode;\n  variant?: VariantProps<typeof fieldBoxVariants>['variant'];\n  position?: 'start' | 'end';\n} & Omit<ComponentProps<typeof Root>, 'asChild' | 'id'> &\n  Omit<VariantProps<typeof switchVariants>, 'variant'>;\n\nexport const Switch = ({\n  ref,\n  className,\n  size,\n  disabled = false,\n  id: idProp,\n  children,\n  description,\n  variant,\n  position,\n  ...props\n}: Props) => {\n  const fallbackId = useId();\n  const id = idProp?.toString() ?? fallbackId;\n  const switchVariant = useArgoDesign() ? 'argo' : 'default';\n\n  const switchElement = (\n    <Root\n      {...props}\n      ref={ref}\n      id={id}\n      disabled={disabled}\n      className={switchVariants({ className, size, variant: switchVariant })}\n    >\n      <Thumb className={thumbVariants({ size, variant: switchVariant })} />\n    </Root>\n  );\n\n  if (!children) return switchElement;\n\n  return (\n    <FieldBox htmlFor={id} variant={variant} position={position} control={switchElement}>\n      <FieldBox.Title>{children}</FieldBox.Title>\n      {description && <FieldBox.Description>{description}</FieldBox.Description>}\n    </FieldBox>\n  );\n};\n"]}

package/dist/chunk-5AIE6SET.js

@@ -0,0 +1,659 @@
+import { Badge } from './chunk-SBGAUGXY.js';
+import { InputGroup } from './chunk-SC275NHZ.js';
+import { X, ChevronDown, Plus, Check } from './chunk-RQVK4IYC.js';
+import { useArgoDesign } from './chunk-WETKNYZX.js';
+import { cn } from './chunk-LXLIQ2D6.js';
+import { useRef, useState, useEffect } from 'react';
+import { Combobox as Combobox$1 } from '@base-ui/react/combobox';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// src/components/Combobox/utils.ts
+var isPlainObject = (item) => item !== null && typeof item === "object";
+var isNumber = (item) => typeof item === "number";
+var isString = (item) => typeof item === "string";
+var isLabeledItem = (item) => isPlainObject(item) && Reflect.has(item, "label") && Reflect.has(item, "value");
+var isInternalItem = (item) => isLabeledItem(item) && "__marker" in item;
+var isCreatableItem = (item) => {
+  return isInternalItem(item) && item.__marker === "creatable";
+};
+var isGroupItem = (itemOrGroup) => itemOrGroup !== null && typeof itemOrGroup === "object" && Reflect.has(itemOrGroup, "items");
+var isGroupItems = (items) => {
+  if (!Array.isArray(items)) return false;
+  if (items.length === 0) return false;
+  return isGroupItem(items[0]);
+};
+var defaultItemToLabel = (item) => {
+  if (isNumber(item) || isString(item)) return item;
+  if (!isLabeledItem(item))
+    throw new Error(
+      "Combobox: Item does not have a `label` field. Pass `itemToLabel` for custom item shapes."
+    );
+  return item.label;
+};
+var toLabel = (item) => {
+  if (isString(item)) return item;
+  if (isLabeledItem(item)) {
+    if (item.label) return item.label;
+    if (item.value) return item.value;
+  }
+  return String(item);
+};
+var toValueKey = (item) => {
+  if (isString(item)) return item;
+  if (isLabeledItem(item)) {
+    if (item.value) return item.value;
+    if (item.label) return item.label;
+  }
+  return String(item);
+};
+var defaultItemToIcon = (item) => isLabeledItem(item) ? item.icon : void 0;
+var defaultItemToDisabled = (item) => isLabeledItem(item) ? item.disabled ?? false : false;
+var defaultGroupToLabel = () => void 0;
+var createCreatableItem = (query) => ({
+  __marker: "creatable",
+  value: query,
+  label: query
+});
+var defaultToCreateValue = (query, value, queryToCreateValue) => {
+  if (queryToCreateValue) return queryToCreateValue(query);
+  if (value === void 0) return query;
+  if (isString(value)) return query;
+  if (isLabeledItem(value)) return { value: query, label: query };
+  throw new Error(
+    "Combobox: Cannot infer item shape for `allowCreate`. Pass `queryToCreateValue` for custom item shapes."
+  );
+};
+var defaultQueryToCreateLabel = (query) => `Create "${query}"`;
+var ComboboxChips = ({
+  maxVisible = 3,
+  itemToChipLabel = defaultItemToLabel,
+  itemToChipColor,
+  variant = "pill"
+}) => /* @__PURE__ */ jsx(Combobox$1.Value, { children: (values) => {
+  if (!values.length) return null;
+  const visible = values.slice(0, maxVisible);
+  const overflow = values.slice(maxVisible);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    visible.map((value, index) => /* @__PURE__ */ jsxs(
+      Combobox$1.Chip,
+      {
+        render: /* @__PURE__ */ jsx(
+          Badge.Root,
+          {
+            color: itemToChipColor?.(value),
+            className: "tw:max-w-40",
+            variant
+          }
+        ),
+        children: [
+          /* @__PURE__ */ jsx(Badge.Label, { children: itemToChipLabel(value) }),
+          /* @__PURE__ */ jsx(Badge.Addon, { variant: "inline", align: "inline-end", children: /* @__PURE__ */ jsx(
+            Combobox$1.ChipRemove,
+            {
+              render: /* @__PURE__ */ jsx(Badge.Button, { "aria-label": "Remove value", children: /* @__PURE__ */ jsx(X, { className: "tw:size-3" }) })
+            }
+          ) })
+        ]
+      },
+      index
+    )),
+    overflow.length > 0 && /* @__PURE__ */ jsx(Badge.Root, { variant: "pill", children: /* @__PURE__ */ jsxs(Badge.Label, { children: [
+      "+",
+      overflow.length
+    ] }) })
+  ] });
+} });
+var ComboboxContent = ({
+  ref,
+  align = "start",
+  side = "bottom",
+  sideOffset = 4,
+  alignOffset,
+  anchor,
+  container,
+  className,
+  children,
+  ...popupProps
+}) => {
+  const effectiveVariant = useArgoDesign() ? "argo" : "default";
+  return /* @__PURE__ */ jsx(Combobox$1.Portal, { container, children: /* @__PURE__ */ jsx(
+    Combobox$1.Positioner,
+    {
+      align,
+      side,
+      sideOffset,
+      alignOffset,
+      anchor,
+      className: "tw:isolate tw:z-[1055] tailwindcss-preflight",
+      children: /* @__PURE__ */ jsx(
+        Combobox$1.Popup,
+        {
+          ref,
+          "data-chips": !!anchor,
+          "data-variant": effectiveVariant,
+          className: cn(
+            "tw:!pointer-events-auto",
+            "tw:group/combobox-content",
+            "tw:relative",
+            "tw:flex tw:flex-col tw:overflow-hidden",
+            // sizing
+            "tw:max-h-[var(--available-height)]",
+            "tw:w-[var(--anchor-width)]",
+            "tw:max-w-[var(--available-width)]",
+            "tw:origin-[var(--transform-origin)]",
+            "tw:data-[chips=true]:min-w-[var(--anchor-width)]",
+            // appearance
+            "tw:rounded-lg",
+            "tw:data-[variant=default]:rounded",
+            "tw:bg-popover",
+            "tw:text-popover-foreground",
+            "tw:shadow-md",
+            "tw:ring-1",
+            "tw:ring-foreground/10",
+            "tw:duration-100",
+            // open animation
+            "data-open:animate-in",
+            "data-open:fade-in-0",
+            "data-open:zoom-in-95",
+            // closed animation
+            "data-closed:animate-out",
+            "data-closed:fade-out-0",
+            "data-closed:zoom-out-95",
+            // position animations
+            "tw:data-[side=bottom]:slide-in-from-top-2",
+            "tw:data-[side=top]:slide-in-from-bottom-2",
+            "tw:data-[side=left]:slide-in-from-right-2",
+            "tw:data-[side=right]:slide-in-from-left-2",
+            "tw:data-[side=inline-start]:slide-in-from-right-2",
+            "tw:data-[side=inline-end]:slide-in-from-left-2",
+            className
+          ),
+          ...popupProps,
+          children
+        }
+      )
+    }
+  ) });
+};
+var ComboboxEmpty = ({ ref, className, ...props }) => /* @__PURE__ */ jsx(
+  Combobox$1.Empty,
+  {
+    ref,
+    className: cn(
+      "tw:hidden",
+      "tw:group-data-[empty]/combobox-content:flex",
+      "tw:justify-center",
+      "tw:items-center",
+      "tw:text-center",
+      "tw:px-2",
+      "tw:text-muted-foreground",
+      "tw:py-6",
+      className
+    ),
+    ...props
+  }
+);
+var ComboboxInput = ({ ref, ...props }) => /* @__PURE__ */ jsx(Combobox$1.Input, { ...props, ref, render: /* @__PURE__ */ jsx(InputGroup.Input, {}) });
+var ComboboxInputGroup = ({
+  ref,
+  state,
+  variant,
+  sizing,
+  focusVariant,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  Combobox$1.InputGroup,
+  {
+    ...props,
+    ref,
+    render: /* @__PURE__ */ jsx(
+      InputGroup,
+      {
+        state,
+        variant,
+        focusVariant,
+        sizing,
+        className
+      }
+    )
+  }
+);
+var ComboboxItemIndicator = ({ ref, className, variant = "check", ...props }) => {
+  if (variant === "checkbox") {
+    return /* @__PURE__ */ jsx(
+      Combobox$1.ItemIndicator,
+      {
+        ref,
+        keepMounted: true,
+        className: cn(
+          "tw:group/combobox-item-indicator",
+          "tw:inline-flex",
+          "tw:items-center",
+          "tw:justify-center",
+          "tw:size-4",
+          "tw:shrink-0",
+          "tw:rounded",
+          "tw:border",
+          "tw:border-input",
+          "tw:bg-background",
+          "tw:data-[selected]:bg-primary",
+          "tw:data-[selected]:border-primary",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          Check,
+          {
+            className: cn(
+              "tw:hidden",
+              "tw:size-3",
+              "tw:stroke-[4px]",
+              "tw:!text-primary-foreground",
+              "tw:group-data-[selected]/combobox-item-indicator:block"
+            )
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Combobox$1.ItemIndicator,
+    {
+      ...props,
+      ref,
+      className: cn(
+        "tw:pointer-events-none",
+        "tw:absolute",
+        "tw:right-2",
+        "tw:group-data-[variant=default]/combobox-content:right-4",
+        // `render={<Check />}` makes the icon the indicator element itself (not a descendant), so a
+        // `[&_svg]` rule never matches it — size it directly or Lucide renders at its 24px default.
+        "tw:size-4",
+        "tw:group-data-[highlighted]/combobox-item:text-accent-foreground",
+        "tw:group-data-[variant=default]/combobox-content:group-data-[highlighted]/combobox-item:text-foreground",
+        className
+      ),
+      render: /* @__PURE__ */ jsx(Check, {})
+    }
+  );
+};
+var ComboboxItem = ({
+  ref,
+  className,
+  children,
+  icon,
+  indicator: variant = "check",
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  Combobox$1.Item,
+  {
+    ...props,
+    ref,
+    "data-slot": "combobox-item",
+    className: cn(
+      "tw:group/combobox-item",
+      // layout
+      "tw:relative",
+      "tw:flex",
+      "tw:flex-1",
+      "tw:items-center",
+      "tw:gap-2",
+      // spacing
+      "tw:py-2",
+      "tw:px-2",
+      "tw:group-data-[variant=default]/combobox-content:px-4",
+      "tw:rounded-lg",
+      "tw:group-data-[variant=default]/combobox-content:rounded-none",
+      // typography
+      "tw:text-sm",
+      "tw:select-none",
+      "tw:cursor-default",
+      "tw:outline-hidden",
+      // highlighted (keyboard / hover)
+      "tw:data-[highlighted]:bg-accent",
+      "tw:group-data-[variant=default]/combobox-content:data-[highlighted]:bg-neutral-100",
+      "tw:data-[highlighted]:text-accent-foreground",
+      "tw:group-data-[variant=default]/combobox-content:data-[highlighted]:text-foreground",
+      // disabled
+      "tw:data-disabled:pointer-events-none",
+      "tw:data-disabled:opacity-50",
+      // child svg defaults
+      "tw:[&_svg]:pointer-events-none",
+      "tw:[&_svg]:shrink-0",
+      "tw:[&_svg]:text-muted-foreground",
+      "tw:[&_svg:not([class*='size-'])]:size-4",
+      className
+    ),
+    children: [
+      /* @__PURE__ */ jsx(ComboboxItemIndicator, { variant }),
+      icon,
+      /* @__PURE__ */ jsx("span", { className: "tw:truncate", children })
+    ]
+  }
+);
+var ComboboxList = ({ ref, className, ...props }) => /* @__PURE__ */ jsx(
+  Combobox$1.List,
+  {
+    ref,
+    className: cn(
+      "tw:no-scrollbar",
+      "tw:scroll-py-1",
+      "tw:overflow-y-auto",
+      "tw:overscroll-contain",
+      "tw:min-h-0",
+      "tw:flex-1",
+      "tw:p-2",
+      "tw:data-[empty]:p-0",
+      "tw:group-data-[variant=default]/combobox-content:p-0",
+      className
+    ),
+    ...props
+  }
+);
+var ComboboxRoot = (props) => /* @__PURE__ */ jsx(Combobox$1.Root, { ...props });
+var ComboboxSeparator = ({ ref, className, ...props }) => /* @__PURE__ */ jsx(
+  Combobox$1.Separator,
+  {
+    ref,
+    className: cn("tw:mx-2 tw:my-1 tw:h-px tw:bg-border", className),
+    ...props
+  }
+);
+var ComboboxGroup = ({ ref, className, children, ...props }) => /* @__PURE__ */ jsx(
+  Combobox$1.Group,
+  {
+    ref,
+    className: cn("tw:flex tw:flex-col tw:gap-0.5", className),
+    ...props,
+    children
+  }
+);
+var ComboboxGroupLabel = ({ ref, className, ...props }) => /* @__PURE__ */ jsx(
+  Combobox$1.GroupLabel,
+  {
+    ...props,
+    ref,
+    className: cn(
+      // Base (argo variant) — soft gray section label.
+      "tw:px-2",
+      "tw:py-1.5",
+      "tw:text-xs",
+      "tw:font-medium",
+      "tw:leading-none",
+      "tw:text-muted-foreground",
+      "tw:group-data-[variant=default]/combobox-content:uppercase",
+      "tw:group-data-[variant=default]/combobox-content:font-semibold",
+      "tw:group-data-[variant=default]/combobox-content:tracking-wider",
+      "tw:group-data-[variant=default]/combobox-content:text-[11px]",
+      "tw:group-data-[variant=default]/combobox-content:text-black",
+      "tw:group-data-[variant=default]/combobox-content:pt-2",
+      "tw:group-data-[variant=default]/combobox-content:px-4",
+      className
+    )
+  }
+);
+var ComboboxCollection = ({ ...props }) => /* @__PURE__ */ jsx(Combobox$1.Collection, { "data-slot": "combobox-collection", ...props });
+var VIRTUALIZE_THRESHOLD = 30;
+var ESTIMATED_ROW_HEIGHT = 40;
+var ESTIMATED_LIST_HEIGHT = 320;
+var Combobox = ({
+  // root props
+  items: _itemsProp,
+  value,
+  defaultValue,
+  onValueChange,
+  itemToStringLabel: itemToStringLabelProp,
+  itemToStringValue,
+  disabled,
+  filter,
+  inputRef,
+  onOpenChangeComplete,
+  isItemEqualToValue: isItemEqualToValueProp,
+  // input props
+  variant,
+  sizing,
+  focusVariant,
+  state,
+  placeholder,
+  allowClear,
+  id,
+  className,
+  // own props
+  empty = "No items",
+  indicator,
+  prefix,
+  virtualized = false,
+  // creatable
+  allowCreate,
+  queryToCreateValue,
+  queryToCreateLabel = defaultQueryToCreateLabel,
+  // own item props
+  itemToDisabled = defaultItemToDisabled,
+  itemToLabel = defaultItemToLabel,
+  itemToIcon = defaultItemToIcon,
+  groupToLabel = defaultGroupToLabel
+}) => {
+  const closeReasonRef = useRef(
+    "none"
+  );
+  const [inputValue, setInputValue] = useState(() => {
+    const initial = value !== void 0 ? value : defaultValue;
+    if (initial == null) return "";
+    return itemToStringLabelProp?.(initial) ?? toLabel(initial);
+  });
+  useEffect(() => {
+    if (value === void 0) return;
+    const label = value === null ? "" : itemToStringLabelProp?.(value) ?? toLabel(value);
+    setInputValue((prev) => prev === label ? prev : label);
+  }, [value]);
+  const selectedLabel = value == null ? void 0 : itemToStringLabelProp?.(value) ?? toLabel(value);
+  const isShowingSelection = selectedLabel !== void 0 && inputValue === selectedLabel;
+  const query = (isShowingSelection ? "" : inputValue).trim();
+  const queryLower = query.toLowerCase();
+  const itemsProp = _itemsProp ?? [];
+  const sampleItem = itemsProp.flatMap((item) => isGroupItem(item) ? item.items : [item])[0];
+  const [createdItems, setCreatedItems] = useState([]);
+  const allItems = (() => {
+    if (createdItems.length === 0) return itemsProp;
+    if (isGroupItems(itemsProp))
+      return [...itemsProp, { items: createdItems }];
+    return [...itemsProp, ...createdItems];
+  })();
+  const items = (() => {
+    if (!allowCreate || disabled) return allItems;
+    if (!query) return allItems;
+    const exactMatch = allItems.flatMap((item) => isGroupItem(item) ? item.items : [item]).some(
+      (item) => (itemToStringLabelProp?.(item) ?? toLabel(item)).toLowerCase() === queryLower
+    );
+    if (exactMatch) return allItems;
+    const creatable = isGroupItems(itemsProp) ? [{ items: [createCreatableItem(query)] }] : [createCreatableItem(query)];
+    return [...allItems, ...creatable];
+  })();
+  const itemToStringLabel = (value2) => {
+    if (isCreatableItem(value2)) return value2.value;
+    return itemToStringLabelProp?.(value2) ?? toLabel(value2);
+  };
+  const wrappedFilter = isShowingSelection ? () => true : !allowCreate || !filter ? filter : (item, ...args) => isCreatableItem(item) || filter(item, ...args);
+  const wrappedItemToStringValue = !allowCreate || !itemToStringValue ? itemToStringValue : (item) => isCreatableItem(item) ? item.value : itemToStringValue(item);
+  const isItemEqualToValue = (a, b) => {
+    if (isCreatableItem(a) || isCreatableItem(b)) return toValueKey(a) === toValueKey(b);
+    return isItemEqualToValueProp?.(a, b) ?? Object.is(a, b);
+  };
+  const handleInputValueChange = (value2, { reason }) => {
+    if (["input-clear", "none"].includes(reason) && ["item-press", "creatable-item-press"].includes(closeReasonRef.current)) {
+      closeReasonRef.current = "none";
+      return;
+    }
+    if (reason === "none" && closeReasonRef.current == "outside-click") {
+      closeReasonRef.current = "none";
+      setInputValue(value2);
+      return;
+    }
+    setInputValue(value2);
+  };
+  const handleOnOpenChangeComplete = (open) => {
+    onOpenChangeComplete?.(open);
+    if (open) return;
+    if (closeReasonRef.current !== "none") return;
+    closeReasonRef.current = "outside-click";
+  };
+  const handleOnValueChange = (next, event) => {
+    if (isCreatableItem(next)) {
+      const newValue = defaultToCreateValue(next.value, sampleItem, queryToCreateValue);
+      closeReasonRef.current = "creatable-item-press";
+      setCreatedItems((prev) => [...prev, newValue]);
+      onValueChange?.(newValue, event);
+      return;
+    }
+    closeReasonRef.current = "item-press";
+    onValueChange?.(next, event);
+  };
+  const [listElement, setListElement] = useState(null);
+  const isGrouped = isGroupItems(allItems);
+  const shouldVirtualize = !isGrouped && (virtualized === true || virtualized === "auto" && allItems.length > VIRTUALIZE_THRESHOLD);
+  const matchesQuery = (item) => {
+    if (isCreatableItem(item)) return true;
+    if (!query) return true;
+    if (filter) return !!filter(item, query, (value2) => itemToStringLabel(value2) ?? toLabel(value2));
+    return (itemToStringLabel(item) ?? toLabel(item)).toLowerCase().includes(queryLower);
+  };
+  const virtualItems = shouldVirtualize ? items.filter(matchesQuery) : [];
+  const virtualizer = useVirtualizer({
+    count: virtualItems.length,
+    getScrollElement: () => listElement,
+    estimateSize: () => ESTIMATED_ROW_HEIGHT,
+    overscan: 12,
+    enabled: shouldVirtualize,
+    // Seed a viewport height so rows paint on the first frame. Without it the list measures 0 until
+    // the ResizeObserver fires (a frame later), which renders an empty popup on open.
+    initialRect: { width: 0, height: ESTIMATED_LIST_HEIGHT }
+  });
+  const renderItem = (item, index) => {
+    if (isCreatableItem(item)) {
+      return /* @__PURE__ */ jsx(Combobox.Item, { index, value: item, icon: /* @__PURE__ */ jsx(Plus, {}), children: queryToCreateLabel(item.value) });
+    }
+    return /* @__PURE__ */ jsx(
+      Combobox.Item,
+      {
+        index,
+        value: item,
+        indicator,
+        icon: itemToIcon(item),
+        disabled: itemToDisabled(item),
+        children: itemToLabel(item)
+      }
+    );
+  };
+  const rowStyle = (offset) => ({
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    transform: `translateY(${offset}px)`
+  });
+  return /* @__PURE__ */ jsxs(
+    Combobox$1.Root,
+    {
+      items: shouldVirtualize ? virtualItems : items,
+      value,
+      defaultValue,
+      filter: shouldVirtualize ? null : wrappedFilter,
+      onValueChange: handleOnValueChange,
+      itemToStringLabel,
+      isItemEqualToValue,
+      itemToStringValue: wrappedItemToStringValue,
+      onOpenChangeComplete: handleOnOpenChangeComplete,
+      disabled,
+      inputRef,
+      inputValue,
+      onInputValueChange: handleInputValueChange,
+      virtualized: shouldVirtualize,
+      onItemHighlighted: (_, details) => {
+        if (shouldVirtualize && details.reason === "keyboard") {
+          virtualizer.scrollToIndex(details.index);
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          ComboboxInputGroup,
+          {
+            variant,
+            sizing,
+            state,
+            focusVariant,
+            className,
+            children: [
+              prefix && /* @__PURE__ */ jsx(InputGroup.Addon, { align: "inline-start", children: prefix }),
+              /* @__PURE__ */ jsx(ComboboxInput, { id, placeholder, disabled }),
+              /* @__PURE__ */ jsxs(InputGroup.Addon, { align: "inline-end", children: [
+                allowClear && /* @__PURE__ */ jsx(InputGroup.Button, { asChild: true, "aria-label": "Clear", disabled, children: /* @__PURE__ */ jsx(Combobox$1.Clear, { children: /* @__PURE__ */ jsx(X, { className: "tw:size-4" }) }) }),
+                /* @__PURE__ */ jsx(InputGroup.Button, { disabled, asChild: true, "aria-label": "Open combobox", children: /* @__PURE__ */ jsx(Combobox$1.Trigger, { children: /* @__PURE__ */ jsx(ChevronDown, { className: "tw:size-4" }) }) })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(ComboboxContent, { children: [
+          /* @__PURE__ */ jsx(ComboboxEmpty, { children: empty }),
+          shouldVirtualize ? /* @__PURE__ */ jsx(ComboboxList, { ref: setListElement, children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                position: "relative",
+                width: "100%",
+                height: `${virtualizer.getTotalSize()}px`
+              },
+              children: virtualizer.getVirtualItems().map((row) => {
+                const item = virtualItems[row.index];
+                if (item === void 0) return null;
+                return /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    "data-index": row.index,
+                    ref: virtualizer.measureElement,
+                    style: rowStyle(row.start),
+                    children: renderItem(item, row.index)
+                  },
+                  row.key
+                );
+              })
+            }
+          ) }) : /* @__PURE__ */ jsx(ComboboxList, { children: (itemOrGroup) => {
+            if (isCreatableItem(itemOrGroup))
+              return /* @__PURE__ */ jsx(Combobox.Item, { value: itemOrGroup, icon: /* @__PURE__ */ jsx(Plus, {}), children: queryToCreateLabel(itemOrGroup.value) });
+            if (isGroupItem(itemOrGroup)) {
+              const maybeCreatable = itemOrGroup.items[0];
+              if (isCreatableItem(maybeCreatable)) {
+                return /* @__PURE__ */ jsx(Combobox.Item, { value: maybeCreatable, icon: /* @__PURE__ */ jsx(Plus, {}), children: queryToCreateLabel(maybeCreatable.value) });
+              }
+              const groupLabel = groupToLabel(itemOrGroup);
+              return /* @__PURE__ */ jsxs(Combobox.Group, { items: itemOrGroup.items, children: [
+                groupLabel && /* @__PURE__ */ jsx(Combobox.GroupLabel, { children: groupLabel }),
+                /* @__PURE__ */ jsx(Combobox.GroupList, { children: (item) => renderItem(item) })
+              ] });
+            }
+            return renderItem(itemOrGroup);
+          } })
+        ] })
+      ]
+    }
+  );
+};
+Combobox.Root = ComboboxRoot;
+Combobox.InputGroup = ComboboxInputGroup;
+Combobox.Input = ComboboxInput;
+Combobox.Content = ComboboxContent;
+Combobox.List = ComboboxList;
+Combobox.Item = ComboboxItem;
+Combobox.Empty = ComboboxEmpty;
+Combobox.Value = Combobox$1.Value;
+Combobox.Separator = ComboboxSeparator;
+Combobox.Group = ComboboxGroup;
+Combobox.GroupLabel = ComboboxGroupLabel;
+Combobox.GroupList = ComboboxCollection;
+Combobox.Chips = ComboboxChips;
+
+export { Combobox, createCreatableItem, defaultGroupToLabel, defaultItemToDisabled, defaultItemToIcon, defaultItemToLabel, defaultQueryToCreateLabel, defaultToCreateValue, isCreatableItem, isGroupItem, isGroupItems, isLabeledItem, toLabel };
+//# sourceMappingURL=chunk-5AIE6SET.js.map
+//# sourceMappingURL=chunk-5AIE6SET.js.map