@longd/layout-ui 0.1.0

package/dist/index.cjs

@@ -0,0 +1,1098 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  LayoutSelect: () => LayoutSelect,
+  LayoutSelectDefault: () => select_default
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/layout/select.tsx
+var React = __toESM(require("react"), 1);
+var import_react = require("react");
+var import_popover = require("@base-ui/react/popover");
+var import_tooltip = require("@base-ui/react/tooltip");
+var import_cmdk = require("cmdk");
+var import_core = require("@dnd-kit/core");
+var import_sortable = require("@dnd-kit/sortable");
+var import_modifiers = require("@dnd-kit/modifiers");
+var import_react_virtual = require("@tanstack/react-virtual");
+var import_lucide_react = require("lucide-react");
+
+// src/lib/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/layout/select.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function resolveIcon(icon) {
+  if (icon === void 0 || icon === null) return null;
+  if (typeof icon === "function") return icon();
+  return icon;
+}
+function flattenOptions(options) {
+  const result = [];
+  for (const opt of options) {
+    if (opt.children && opt.children.length > 0) {
+      result.push(...flattenOptions(opt.children));
+    } else {
+      result.push(opt);
+    }
+  }
+  return result;
+}
+function buildDisplayRows(options) {
+  const rows = [];
+  for (const opt of options) {
+    if (opt.children && opt.children.length > 0) {
+      rows.push({
+        kind: "group-header",
+        label: opt.label,
+        groupValue: opt.value
+      });
+      for (const child of opt.children) {
+        rows.push({ kind: "option", option: child, groupValue: opt.value });
+      }
+    } else {
+      rows.push({ kind: "option", option: opt });
+    }
+  }
+  return rows;
+}
+function hasGroups(options) {
+  return options.some((o) => o.children && o.children.length > 0);
+}
+function optionEq(a, b) {
+  return a.value === b.value;
+}
+function isSelected(option, value) {
+  if (!value) return false;
+  if (Array.isArray(value)) return value.some((v) => optionEq(v, option));
+  return optionEq(value, option);
+}
+function SortableItem({ id, children, disabled }) {
+  const {
+    setNodeRef,
+    attributes,
+    listeners,
+    transform,
+    transition,
+    isDragging
+  } = (0, import_sortable.useSortable)({ id, disabled });
+  const style = {
+    transform: transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : void 0,
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+    position: "relative",
+    zIndex: isDragging ? 50 : void 0
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: setNodeRef, style, className: "flex items-center", children: [
+    !disabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "flex shrink-0 cursor-grab items-center px-1 text-muted-foreground hover:text-foreground active:cursor-grabbing",
+        ...attributes,
+        ...listeners,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.GripVertical, { className: "size-3.5" })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "min-w-0 flex-1", children })
+  ] });
+}
+function MaybeTooltip({
+  tooltip,
+  children
+}) {
+  if (!tooltip) return children;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tooltip.Tooltip.Root, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tooltip.Tooltip.Trigger, { render: children }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tooltip.Tooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tooltip.Tooltip.Positioner, { sideOffset: 6, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tooltip.Tooltip.Popup, { className: "rounded-md bg-foreground px-2.5 py-1 text-xs text-background shadow-md", children: tooltip }) }) })
+  ] });
+}
+function Chip({
+  option,
+  onRemove,
+  readOnly,
+  disabled,
+  className,
+  partial
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "span",
+    {
+      "data-partial-chip": partial || void 0,
+      className: cn(
+        "inline-flex max-w-35 items-center gap-1 rounded-md border border-border bg-secondary px-2 py-0.5 text-xs leading-5 text-secondary-foreground",
+        disabled && "opacity-50",
+        className
+      ),
+      children: [
+        option.icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "flex shrink-0 items-center [&_svg]:size-3", children: resolveIcon(option.icon) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "truncate", children: option.label }),
+        !readOnly && !disabled && onRemove && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "ml-0.5 flex shrink-0 items-center rounded-sm text-muted-foreground hover:text-foreground",
+            onClick: (e) => {
+              e.stopPropagation();
+              onRemove();
+            },
+            tabIndex: -1,
+            "aria-label": `Remove ${option.label}`,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.X, { className: "size-3" })
+          }
+        )
+      ]
+    }
+  );
+}
+function OverflowBadge({
+  items,
+  onRemove
+}) {
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tooltip.Tooltip.Root, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_tooltip.Tooltip.Trigger,
+      {
+        render: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "inline-flex shrink-0 items-center rounded-md border border-border bg-muted px-1.5 py-0.5 text-xs font-medium text-muted-foreground", children: [
+          "+",
+          items.length
+        ] })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tooltip.Tooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tooltip.Tooltip.Positioner, { sideOffset: 6, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tooltip.Tooltip.Popup, { className: "max-w-xs rounded-md bg-foreground px-3 py-2 text-xs text-background shadow-md", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-wrap gap-1", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "span",
+      {
+        className: "inline-flex items-center gap-1 rounded-md border border-background/20 bg-background/10 px-1.5 py-0.5 text-xs leading-4 text-background",
+        children: [
+          item.icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "flex shrink-0 items-center [&_svg]:size-3", children: resolveIcon(item.icon) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "truncate", children: item.label }),
+          onRemove && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "ml-0.5 flex shrink-0 items-center rounded-sm text-background/60 hover:text-background",
+              onClick: (e) => {
+                e.stopPropagation();
+                onRemove(item);
+              },
+              tabIndex: -1,
+              "aria-label": `Remove ${item.label}`,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.X, { className: "size-3" })
+            }
+          )
+        ]
+      },
+      item.value
+    )) }) }) }) })
+  ] });
+}
+function SingleTriggerContent({
+  value,
+  placeholder
+}) {
+  if (!value) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "truncate text-muted-foreground", children: placeholder });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "flex items-center gap-2 truncate", children: [
+    value.icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "flex shrink-0 items-center [&_svg]:size-4", children: resolveIcon(value.icon) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "truncate", children: value.label })
+  ] });
+}
+function MultipleTriggerContent({
+  value,
+  placeholder,
+  collapsed,
+  showItemsLength,
+  onRemove,
+  readOnly,
+  disabled
+}) {
+  const chipRowClass = "flex items-center gap-1";
+  const wrapperRef = (0, import_react.useRef)(null);
+  const measureRef = (0, import_react.useRef)(null);
+  const [visibleCount, setVisibleCount] = (0, import_react.useState)(value.length);
+  const [lastIsPartial, setLastIsPartial] = (0, import_react.useState)(false);
+  const [measured, setMeasured] = (0, import_react.useState)(false);
+  const measureCount = Math.min(value.length, 20);
+  const calculate = React.useEffectEvent(() => {
+    const measureContainer = measureRef.current;
+    if (!measureContainer) return;
+    const children = Array.from(measureContainer.children);
+    const containerRight = measureContainer.getBoundingClientRect().right;
+    const gap = parseFloat(getComputedStyle(measureContainer).columnGap) || 0;
+    const estimateBadgeWidth = (overflowCount) => overflowCount > 0 ? 14 + 8 * String(overflowCount).length : 0;
+    let count = 0;
+    let partial = false;
+    for (const child of children) {
+      const childRight = child.getBoundingClientRect().right;
+      const overflow = value.length - (count + 1);
+      const reserve = overflow > 0 ? Math.max(40, estimateBadgeWidth(overflow)) : 0;
+      if (childRight + reserve <= containerRight) {
+        count++;
+      } else {
+        break;
+      }
+    }
+    count = Math.max(1, count);
+    if (count < value.length && children.length >= count) {
+      const lastRight = children[count - 1].getBoundingClientRect().right;
+      const needsBadge = count + 1 < value.length;
+      const badgeReserve = needsBadge ? Math.max(40, estimateBadgeWidth(value.length - count - 1)) : 0;
+      const spaceForPartial = containerRight - badgeReserve - lastRight - gap;
+      const nextChip = value[count];
+      let minPartialWidth = 50;
+      if (nextChip.icon && children.length > count) {
+        const iconWrapper = children[count].firstElementChild;
+        if (iconWrapper) {
+          minPartialWidth += iconWrapper.getBoundingClientRect().width + gap;
+        }
+      }
+      if (spaceForPartial >= minPartialWidth) {
+        count++;
+        partial = true;
+      }
+    }
+    setVisibleCount(count);
+    setLastIsPartial(partial);
+    setMeasured(true);
+  });
+  (0, import_react.useLayoutEffect)(() => {
+    if (collapsed || value.length === 0) {
+      setVisibleCount(value.length);
+      setLastIsPartial(false);
+      setMeasured(true);
+      return;
+    }
+    const wrapper = wrapperRef.current;
+    const container = measureRef.current;
+    if (!wrapper || !container) return;
+    calculate();
+    const observer = new ResizeObserver(calculate);
+    observer.observe(wrapper);
+    return () => observer.disconnect();
+  }, [collapsed, value]);
+  if (value.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "truncate text-muted-foreground", children: placeholder });
+  }
+  const measureLayer = !collapsed && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref: measureRef,
+      className: cn(
+        "pointer-events-none absolute inset-0 overflow-hidden opacity-0",
+        chipRowClass
+      ),
+      "aria-hidden": true,
+      children: value.slice(0, measureCount).map((opt) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        Chip,
+        {
+          option: opt,
+          onRemove: onRemove ? () => {
+          } : void 0,
+          readOnly,
+          disabled,
+          className: "shrink-0"
+        },
+        opt.value
+      ))
+    }
+  );
+  const showContent = collapsed || measured;
+  if (!showContent) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        ref: wrapperRef,
+        className: cn("relative min-w-0 flex-1 overflow-hidden", chipRowClass),
+        children: [
+          measureLayer,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "truncate text-muted-foreground", children: [
+            value.length,
+            " selected"
+          ] })
+        ]
+      }
+    );
+  }
+  let maxVisible = collapsed ? value.length : visibleCount;
+  const hasExplicitLimit = !collapsed && showItemsLength !== void 0;
+  if (hasExplicitLimit) {
+    maxVisible = showItemsLength;
+  }
+  const hasOverflow = maxVisible < value.length;
+  const displayed = value.slice(0, maxVisible);
+  const overflowItems = value.slice(maxVisible);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ref: wrapperRef,
+      className: cn("relative min-w-0 flex-1", chipRowClass),
+      children: [
+        measureLayer,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: cn(
+              "min-w-0 flex-1",
+              chipRowClass,
+              collapsed ? "flex-wrap" : "overflow-hidden"
+            ),
+            children: displayed.map((opt, i) => {
+              const isPartial = (hasOverflow || lastIsPartial) && !hasExplicitLimit && i === displayed.length - 1;
+              const shouldShrink = isPartial || hasExplicitLimit;
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                Chip,
+                {
+                  option: opt,
+                  onRemove: onRemove ? () => onRemove(opt) : void 0,
+                  readOnly,
+                  disabled,
+                  partial: isPartial,
+                  className: shouldShrink ? "min-w-0 shrink" : "shrink-0"
+                },
+                opt.value
+              );
+            })
+          }
+        ),
+        overflowItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OverflowBadge, { items: overflowItems, onRemove }) })
+      ]
+    }
+  );
+}
+function OptionRow({
+  option,
+  selected,
+  renderItem,
+  onSelect,
+  highlighted = false
+}) {
+  const content = renderItem ? renderItem(option, {
+    selected,
+    highlighted,
+    disabled: !!option.disabled
+  }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex w-full items-center gap-2", children: [
+    option.icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "flex shrink-0 items-center [&_svg]:size-4", children: resolveIcon(option.icon) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "flex-1 truncate", children: option.label }),
+    selected && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ml-auto flex shrink-0 items-center text-primary", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Check, { className: "size-4" }) })
+  ] });
+  const row = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_cmdk.Command.Item,
+    {
+      value: `${option.value}`,
+      disabled: option.disabled,
+      onSelect: () => {
+        if (!option.disabled) onSelect(option);
+      },
+      className: cn(
+        "relative flex w-full cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none",
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground",
+        option.disabled && "pointer-events-none opacity-50"
+      ),
+      "data-highlighted": highlighted || void 0,
+      children: content
+    }
+  );
+  if (option.disabled && option.disabledTooltip) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MaybeTooltip, { tooltip: option.disabledTooltip, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: row }) });
+  }
+  return row;
+}
+function VirtualList({
+  options,
+  items,
+  selectedValue,
+  renderItem,
+  onSelect,
+  sortable,
+  sortableAcrossGroups,
+  onSortEnd,
+  onGroupSortEnd,
+  onTreeSort
+}) {
+  const parentRef = (0, import_react.useRef)(null);
+  const [activeId, setActiveId] = (0, import_react.useState)(null);
+  const [dragTree, setDragTree] = (0, import_react.useState)(null);
+  const effectiveOptions = dragTree ?? options;
+  const grouped = (0, import_react.useMemo)(() => hasGroups(effectiveOptions), [effectiveOptions]);
+  const displayRows = (0, import_react.useMemo)(
+    () => grouped ? buildDisplayRows(effectiveOptions) : void 0,
+    [grouped, effectiveOptions]
+  );
+  const flatDisplayRows = (0, import_react.useMemo)(
+    () => items.map((o) => ({ kind: "option", option: o })),
+    [items]
+  );
+  const virtualItems = displayRows ?? flatDisplayRows;
+  const activeIndex = (0, import_react.useMemo)(() => {
+    if (!activeId) return null;
+    const idx = virtualItems.findIndex(
+      (r) => r.kind === "option" && `${r.option.value}` === activeId
+    );
+    return idx !== -1 ? idx : null;
+  }, [activeId, virtualItems]);
+  const rangeExtractor = (0, import_react.useCallback)(
+    (range) => {
+      const result = (0, import_react_virtual.defaultRangeExtractor)(range);
+      if (activeIndex !== null && !result.includes(activeIndex)) {
+        result.push(activeIndex);
+        result.sort((a, b) => a - b);
+      }
+      return result;
+    },
+    [activeIndex]
+  );
+  const virtualizer = (0, import_react_virtual.useVirtualizer)({
+    count: virtualItems.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: (index) => virtualItems[index].kind === "group-header" ? 28 : 36,
+    overscan: 8,
+    rangeExtractor
+  });
+  (0, import_react.useLayoutEffect)(() => {
+    virtualizer.measure();
+  }, [virtualizer, displayRows]);
+  const sensors = (0, import_core.useSensors)(
+    (0, import_core.useSensor)(import_core.PointerSensor, { activationConstraint: { distance: 4 } }),
+    (0, import_core.useSensor)(import_core.KeyboardSensor)
+  );
+  const flatSortableIds = (0, import_react.useMemo)(
+    () => virtualItems.filter(
+      (r) => r.kind === "option"
+    ).map((r) => `${r.option.value}`),
+    [virtualItems]
+  );
+  const sameGroupCollision = (0, import_react.useCallback)(
+    (args) => {
+      if (!displayRows) return (0, import_core.closestCenter)(args);
+      const draggedId = args.active.id;
+      const activeRow = displayRows.find(
+        (r) => r.kind === "option" && `${r.option.value}` === `${draggedId}`
+      );
+      if (!activeRow || activeRow.kind !== "option") return (0, import_core.closestCenter)(args);
+      const activeGroup = activeRow.groupValue;
+      const filtered = args.droppableContainers.filter((container) => {
+        const row = displayRows.find(
+          (r) => r.kind === "option" && `${r.option.value}` === `${container.id}`
+        );
+        return row && row.kind === "option" && row.groupValue === activeGroup;
+      });
+      return (0, import_core.closestCenter)({ ...args, droppableContainers: filtered });
+    },
+    [displayRows]
+  );
+  const sortingStrategy = (0, import_react.useMemo)(() => {
+    if (!grouped || !displayRows) return import_sortable.verticalListSortingStrategy;
+    const idToGroup = /* @__PURE__ */ new Map();
+    for (const row of displayRows) {
+      if (row.kind === "option") {
+        idToGroup.set(`${row.option.value}`, row.groupValue);
+      }
+    }
+    const noMove = { x: 0, y: 0, scaleX: 1, scaleY: 1 };
+    return (args) => {
+      const draggedId = flatSortableIds[args.activeIndex];
+      const currentId = flatSortableIds[args.index];
+      if (draggedId && currentId && idToGroup.get(draggedId) !== idToGroup.get(currentId)) {
+        return noMove;
+      }
+      return (0, import_sortable.verticalListSortingStrategy)(args);
+    };
+  }, [grouped, displayRows, flatSortableIds]);
+  const handleDragOver = (0, import_react.useCallback)(
+    (event) => {
+      if (!sortableAcrossGroups || !grouped) return;
+      const { active, over } = event;
+      if (!over || active.id === over.id) return;
+      const currentTree = dragTree ?? options;
+      const currentRows = buildDisplayRows(currentTree);
+      const activeRow = currentRows.find(
+        (r) => r.kind === "option" && `${r.option.value}` === `${active.id}`
+      );
+      const overRow = currentRows.find(
+        (r) => r.kind === "option" && `${r.option.value}` === `${over.id}`
+      );
+      if (!activeRow || activeRow.kind !== "option" || !overRow || overRow.kind !== "option")
+        return;
+      if (activeRow.groupValue === overRow.groupValue) return;
+      const newTree = currentTree.map((opt) => {
+        if (!opt.children) return opt;
+        if (opt.value === activeRow.groupValue) {
+          return {
+            ...opt,
+            children: opt.children.filter(
+              (c) => `${c.value}` !== `${active.id}`
+            )
+          };
+        }
+        if (opt.value === overRow.groupValue) {
+          const destChildren = opt.children.filter(
+            (c) => `${c.value}` !== `${active.id}`
+          );
+          const overIdx = destChildren.findIndex(
+            (c) => `${c.value}` === `${over.id}`
+          );
+          destChildren.splice(
+            overIdx !== -1 ? overIdx : destChildren.length,
+            0,
+            activeRow.option
+          );
+          return { ...opt, children: destChildren };
+        }
+        return opt;
+      });
+      setDragTree(newTree);
+    },
+    [sortableAcrossGroups, grouped, dragTree, options]
+  );
+  const handleDragEndFlat = (0, import_react.useCallback)(
+    (event) => {
+      setActiveId(null);
+      setDragTree(null);
+      const { active, over } = event;
+      if (!over || active.id === over.id || !onSortEnd) return;
+      const oldIndex = items.findIndex((i) => `${i.value}` === `${active.id}`);
+      const newIndex = items.findIndex((i) => `${i.value}` === `${over.id}`);
+      if (oldIndex !== -1 && newIndex !== -1) {
+        onSortEnd((0, import_sortable.arrayMove)(items, oldIndex, newIndex));
+      }
+    },
+    [items, onSortEnd]
+  );
+  const handleDragEndGrouped = (0, import_react.useCallback)(
+    (event) => {
+      setActiveId(null);
+      const { active, over } = event;
+      if (!over || active.id === over.id) {
+        if (dragTree) onTreeSort?.(dragTree);
+        setDragTree(null);
+        return;
+      }
+      if (!displayRows) {
+        setDragTree(null);
+        return;
+      }
+      const activeRow = displayRows.find(
+        (r) => r.kind === "option" && `${r.option.value}` === `${active.id}`
+      );
+      const overRow = displayRows.find(
+        (r) => r.kind === "option" && `${r.option.value}` === `${over.id}`
+      );
+      if (!activeRow || activeRow.kind !== "option" || !overRow || overRow.kind !== "option") {
+        setDragTree(null);
+        return;
+      }
+      const activeGroup = activeRow.groupValue;
+      const overGroup = overRow.groupValue;
+      const baseTree = dragTree ?? options;
+      if (activeGroup === overGroup) {
+        const groupChildren = displayRows.filter(
+          (r) => r.kind === "option" && r.groupValue === activeGroup
+        ).map((r) => r.option);
+        const oldIdx = groupChildren.findIndex(
+          (i) => `${i.value}` === `${active.id}`
+        );
+        const newIdx = groupChildren.findIndex(
+          (i) => `${i.value}` === `${over.id}`
+        );
+        if (oldIdx !== -1 && newIdx !== -1 && oldIdx !== newIdx) {
+          const reordered = (0, import_sortable.arrayMove)(groupChildren, oldIdx, newIdx);
+          if (dragTree) {
+            const finalTree = baseTree.map((opt) => {
+              if (opt.value === activeGroup && opt.children) {
+                return { ...opt, children: reordered };
+              }
+              return opt;
+            });
+            onTreeSort?.(finalTree);
+          } else {
+            onGroupSortEnd?.(activeGroup, reordered);
+          }
+        } else if (dragTree) {
+          onTreeSort?.(baseTree);
+        }
+      } else {
+        const finalTree = baseTree.map((opt) => {
+          if (!opt.children) return opt;
+          if (opt.value === activeGroup) {
+            return {
+              ...opt,
+              children: opt.children.filter(
+                (c) => `${c.value}` !== `${active.id}`
+              )
+            };
+          }
+          if (opt.value === overGroup) {
+            const destChildren = [...opt.children];
+            const overIdx = destChildren.findIndex(
+              (c) => `${c.value}` === `${over.id}`
+            );
+            destChildren.splice(
+              overIdx !== -1 ? overIdx + 1 : destChildren.length,
+              0,
+              activeRow.option
+            );
+            return { ...opt, children: destChildren };
+          }
+          return opt;
+        });
+        onTreeSort?.(finalTree);
+      }
+      setDragTree(null);
+    },
+    [dragTree, options, displayRows, onTreeSort, onGroupSortEnd]
+  );
+  const listContent = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref: parentRef,
+      className: cn(
+        "max-h-75 overflow-x-hidden",
+        activeIndex !== null ? "overflow-y-visible" : "overflow-y-auto"
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          style: {
+            height: `${virtualizer.getTotalSize()}px`,
+            position: "relative",
+            width: "100%"
+          },
+          children: virtualizer.getVirtualItems().map((vItem) => {
+            const displayRow = virtualItems[vItem.index];
+            if (displayRow.kind === "group-header") {
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    width: "100%",
+                    transform: `translateY(${vItem.start}px)`
+                  },
+                  "data-index": vItem.index,
+                  ref: virtualizer.measureElement,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-2 py-1 text-xs font-semibold text-muted-foreground", children: displayRow.label })
+                },
+                `gh-${displayRow.groupValue}`
+              );
+            }
+            const option = displayRow.option;
+            const row = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              OptionRow,
+              {
+                option,
+                selected: isSelected(option, selectedValue),
+                renderItem,
+                onSelect
+              },
+              option.value
+            );
+            const wrappedRow = sortable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              SortableItem,
+              {
+                id: `${option.value}`,
+                disabled: option.disabled,
+                children: row
+              },
+              option.value
+            ) : row;
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  width: "100%",
+                  transform: `translateY(${vItem.start}px)`
+                },
+                "data-index": vItem.index,
+                ref: virtualizer.measureElement,
+                children: wrappedRow
+              },
+              option.value
+            );
+          })
+        }
+      )
+    }
+  );
+  if (sortable) {
+    const handleDragStart = (event) => {
+      setActiveId(`${event.active.id}`);
+    };
+    const handleCancel = () => {
+      setActiveId(null);
+      setDragTree(null);
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_core.DndContext,
+      {
+        modifiers: [import_modifiers.restrictToVerticalAxis, import_modifiers.restrictToFirstScrollableAncestor],
+        sensors,
+        collisionDetection: grouped && !sortableAcrossGroups ? sameGroupCollision : import_core.closestCenter,
+        onDragStart: handleDragStart,
+        onDragOver: handleDragOver,
+        onDragEnd: grouped ? handleDragEndGrouped : handleDragEndFlat,
+        onDragCancel: handleCancel,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sortable.SortableContext, { items: flatSortableIds, strategy: sortingStrategy, children: listContent })
+      }
+    );
+  }
+  return listContent;
+}
+function LayoutSelect(props) {
+  const {
+    type,
+    options,
+    placeholder = "Select item",
+    disabled = false,
+    readOnly = false,
+    error = false,
+    clearable = false,
+    className,
+    triggerClassName,
+    popupClassName,
+    renderTrigger,
+    renderItem,
+    listPrefix,
+    listSuffix,
+    queryFn,
+    label
+  } = props;
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const [search, setSearch] = (0, import_react.useState)("");
+  const [asyncOptions, setAsyncOptions] = (0, import_react.useState)(null);
+  const [loading, setLoading] = (0, import_react.useState)(false);
+  const [internalSortedOptions, setInternalSortedOptions] = (0, import_react.useState)(null);
+  const currentValue = (0, import_react.useMemo)(() => {
+    if (type === "single") {
+      return props.selectValue ?? null;
+    }
+    return props.selectValue ?? [];
+  }, [type, props]);
+  const resolvedOptions = (0, import_react.useMemo)(() => {
+    const base = asyncOptions ?? options;
+    return internalSortedOptions ?? base;
+  }, [asyncOptions, options, internalSortedOptions]);
+  const flatOptions = (0, import_react.useMemo)(
+    () => flattenOptions(resolvedOptions),
+    [resolvedOptions]
+  );
+  const filteredOptions = (0, import_react.useMemo)(() => {
+    if (!search) return flatOptions;
+    const q = search.toLowerCase();
+    return flatOptions.filter((o) => o.label.toLowerCase().includes(q));
+  }, [flatOptions, search]);
+  const filteredGroupedOptions = (0, import_react.useMemo)(() => {
+    if (!search) return resolvedOptions;
+    const q = search.toLowerCase();
+    return resolvedOptions.map((opt) => {
+      if (opt.children && opt.children.length > 0) {
+        const matched = opt.children.filter(
+          (c) => c.label.toLowerCase().includes(q)
+        );
+        if (matched.length === 0) return null;
+        return { ...opt, children: matched };
+      }
+      return opt.label.toLowerCase().includes(q) ? opt : null;
+    }).filter(Boolean);
+  }, [resolvedOptions, search]);
+  (0, import_react.useEffect)(() => {
+    if (open && queryFn) {
+      let cancelled = false;
+      setLoading(true);
+      queryFn().then((data) => {
+        if (!cancelled) {
+          setAsyncOptions(data);
+        }
+      }).finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+      return () => {
+        cancelled = true;
+      };
+    }
+  }, [open, queryFn]);
+  (0, import_react.useEffect)(() => {
+    if (!open) {
+      setSearch("");
+    }
+  }, [open]);
+  const handleSelect = (0, import_react.useCallback)(
+    (option) => {
+      if (readOnly) return;
+      if (type === "single") {
+        const onChange = props.onChange;
+        const current = currentValue;
+        if (clearable && current && optionEq(current, option)) {
+          onChange?.(null, option);
+        } else {
+          onChange?.(option, option);
+        }
+        setOpen(false);
+      } else {
+        const onChange = props.onChange;
+        const current = currentValue;
+        const exists = current.some((v) => optionEq(v, option));
+        if (exists) {
+          onChange?.(
+            current.filter((v) => !optionEq(v, option)),
+            option
+          );
+        } else {
+          onChange?.([...current, option], option);
+        }
+      }
+    },
+    [type, currentValue, clearable, readOnly, props]
+  );
+  const handleRemoveChip = (0, import_react.useCallback)(
+    (option) => {
+      if (type !== "multiple" || readOnly || disabled) return;
+      const onChange = props.onChange;
+      const current = currentValue;
+      onChange?.(
+        current.filter((v) => !optionEq(v, option)),
+        option
+      );
+    },
+    [type, currentValue, readOnly, disabled, props]
+  );
+  const handleToggleAll = (0, import_react.useCallback)(() => {
+    if (type !== "multiple" || readOnly || disabled) return;
+    const onChange = props.onChange;
+    const current = currentValue;
+    const selectableOptions = flatOptions.filter((o) => !o.disabled);
+    const allSelected2 = selectableOptions.length > 0 && selectableOptions.every((o) => current.some((v) => optionEq(v, o)));
+    if (allSelected2) {
+      const kept = current.filter(
+        (v) => selectableOptions.every((o) => !optionEq(o, v))
+      );
+      onChange?.(kept, selectableOptions[0]);
+    } else {
+      const missing = selectableOptions.filter(
+        (o) => !current.some((v) => optionEq(v, o))
+      );
+      onChange?.([...current, ...missing], selectableOptions[0]);
+    }
+  }, [type, currentValue, flatOptions, readOnly, disabled, props]);
+  const allSelected = (0, import_react.useMemo)(() => {
+    if (type !== "multiple") return false;
+    const current = currentValue;
+    const selectableOptions = flatOptions.filter((o) => !o.disabled);
+    return selectableOptions.length > 0 && selectableOptions.every((o) => current.some((v) => optionEq(v, o)));
+  }, [type, currentValue, flatOptions]);
+  const sortable = props.sortable ?? false;
+  const sortableAcrossGroups = props.sortable ? props.sortableAcrossGroups ?? false : false;
+  const consumerOnSortEnd = props.sortable ? props.onSortEnd : void 0;
+  const handleSortEnd = (0, import_react.useCallback)(
+    (sorted) => {
+      setInternalSortedOptions(sorted);
+      consumerOnSortEnd?.(sorted);
+    },
+    [consumerOnSortEnd]
+  );
+  const handleGroupSortEnd = (0, import_react.useCallback)(
+    (groupValue, reorderedChildren) => {
+      const updated = resolvedOptions.map((opt) => {
+        if (opt.value === groupValue && opt.children) {
+          return { ...opt, children: reorderedChildren };
+        }
+        return opt;
+      });
+      setInternalSortedOptions(updated);
+      consumerOnSortEnd?.(flattenOptions(updated));
+    },
+    [resolvedOptions, consumerOnSortEnd]
+  );
+  const handleTreeSort = (0, import_react.useCallback)(
+    (newTree) => {
+      setInternalSortedOptions(newTree);
+      consumerOnSortEnd?.(flattenOptions(newTree));
+    },
+    [consumerOnSortEnd]
+  );
+  const handleOpenChange = (0, import_react.useCallback)(
+    (nextOpen) => {
+      if (disabled || readOnly) return;
+      setOpen(nextOpen);
+    },
+    [disabled, readOnly]
+  );
+  const triggerContent = (0, import_react.useMemo)(() => {
+    if (renderTrigger) {
+      return renderTrigger({
+        value: currentValue,
+        open,
+        disabled,
+        readOnly,
+        error,
+        placeholder
+      });
+    }
+    if (type === "single") {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        SingleTriggerContent,
+        {
+          value: currentValue,
+          placeholder
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      MultipleTriggerContent,
+      {
+        value: currentValue,
+        placeholder,
+        collapsed: props.collapsed,
+        showItemsLength: props.showItemsLength,
+        onRemove: handleRemoveChip,
+        readOnly,
+        disabled
+      }
+    );
+  }, [
+    renderTrigger,
+    type,
+    currentValue,
+    open,
+    disabled,
+    readOnly,
+    error,
+    placeholder,
+    props,
+    handleRemoveChip
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tooltip.Tooltip.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cn("relative inline-flex flex-col", className), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { className: "mb-1 text-sm font-medium text-foreground", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_popover.Popover.Root, { open, onOpenChange: handleOpenChange, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_popover.Popover.Trigger,
+        {
+          disabled,
+          render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              type: "button",
+              "aria-expanded": open,
+              "aria-haspopup": "listbox",
+              "aria-invalid": error || void 0,
+              "data-readonly": readOnly || void 0,
+              className: cn(
+                "border-input flex min-h-9 w-full min-w-45 items-center gap-2 rounded-md border bg-transparent px-3 py-1.5 text-sm shadow-xs transition-[color,box-shadow,border-color] outline-none",
+                "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+                "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
+                "data-readonly:pointer-events-none data-readonly:opacity-70",
+                "disabled:cursor-not-allowed disabled:opacity-50",
+                "[&_svg:not([class*='text-'])]:text-muted-foreground",
+                triggerClassName
+              )
+            }
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex min-w-0 flex-1 items-center", children: triggerContent }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ChevronDown, { className: "size-4 shrink-0 opacity-50" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popover.Popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popover.Popover.Positioner, { sideOffset: 4, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_popover.Popover.Popup,
+        {
+          className: cn(
+            "z-50 min-w-(--anchor-width) rounded-md border bg-popover text-popover-foreground shadow-md outline-none",
+            "data-starting-style:scale-95 data-starting-style:opacity-0",
+            "data-ending-style:scale-95 data-ending-style:opacity-0",
+            "origin-(--transform-origin) transition-[transform,scale,opacity] duration-150",
+            popupClassName
+          ),
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_cmdk.Command, { shouldFilter: false, loop: true, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "border-b p-1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_cmdk.Command.Input,
+              {
+                value: search,
+                onValueChange: setSearch,
+                placeholder: "Search...",
+                className: "h-8 w-full rounded-sm bg-transparent px-2 text-sm outline-none placeholder:text-muted-foreground"
+              }
+            ) }),
+            listPrefix && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "border-b px-2 py-1.5", children: listPrefix }),
+            type === "multiple" && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "border-b px-1 py-1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: handleToggleAll,
+                className: "w-full rounded-sm px-2 py-1 text-left text-sm text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+                children: allSelected ? "Unselect all" : "Select all"
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_cmdk.Command.List, { className: "p-1", children: [
+              loading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_cmdk.Command.Loading, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center justify-center py-4 text-sm text-muted-foreground", children: "Loading\u2026" }) }),
+              !loading && filteredOptions.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_cmdk.Command.Empty, { className: "py-4 text-center text-sm text-muted-foreground", children: "No results found." }),
+              !loading && filteredOptions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                VirtualList,
+                {
+                  options: filteredGroupedOptions,
+                  items: filteredOptions,
+                  selectedValue: currentValue,
+                  renderItem,
+                  onSelect: handleSelect,
+                  sortable,
+                  sortableAcrossGroups,
+                  onSortEnd: handleSortEnd,
+                  onGroupSortEnd: handleGroupSortEnd,
+                  onTreeSort: handleTreeSort
+                }
+              )
+            ] }),
+            listSuffix && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "border-t px-2 py-1.5", children: listSuffix })
+          ] })
+        }
+      ) }) })
+    ] })
+  ] }) });
+}
+var select_default = LayoutSelect;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LayoutSelect,
+  LayoutSelectDefault
+});
+//# sourceMappingURL=index.cjs.map