@helpwave/hightide 0.1.25 → 0.1.27

package/dist/components/layout/ListBox.js

@@ -0,0 +1,329 @@
+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/components/layout/ListBox.tsx
+var ListBox_exports = {};
+__export(ListBox_exports, {
+  ListBox: () => ListBox,
+  ListBoxItem: () => ListBoxItem,
+  ListBoxMultiple: () => ListBoxMultiple,
+  ListBoxMultipleUncontrolled: () => ListBoxMultipleUncontrolled,
+  ListBoxPrimitive: () => ListBoxPrimitive,
+  ListBoxUncontrolled: () => ListBoxUncontrolled
+});
+module.exports = __toCommonJS(ListBox_exports);
+var import_react = __toESM(require("react"));
+var import_clsx = require("clsx");
+
+// src/utils/match.ts
+var match = (key, values) => {
+  return values[key];
+};
+
+// src/components/layout/ListBox.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var ListBoxContext = (0, import_react.createContext)(null);
+function useListBoxContext() {
+  const ctx = (0, import_react.useContext)(ListBoxContext);
+  if (!ctx) {
+    throw new Error("ListBoxItem must be used within a ListBoxPrimitive");
+  }
+  return ctx;
+}
+var ListBoxItem = (0, import_react.forwardRef)(
+  function ListBoxItem2({ value, disabled = false, children, className, ...rest }, ref) {
+    const {
+      registerItem,
+      unregisterItem,
+      highlightedId,
+      setHighlightedId,
+      onItemClick,
+      isSelected
+    } = useListBoxContext();
+    const itemRef = (0, import_react.useRef)(null);
+    const id = import_react.default.useId();
+    (0, import_react.useEffect)(() => {
+      registerItem({ id, value, disabled, ref: itemRef });
+      return () => unregisterItem(id);
+    }, [id, value, disabled, registerItem, unregisterItem]);
+    const isHighlighted = highlightedId === id;
+    const selected = isSelected(value);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "li",
+      {
+        ref: (node) => {
+          itemRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        },
+        id,
+        role: "option",
+        "aria-disabled": disabled,
+        "aria-selected": selected,
+        "data-highlighted": isHighlighted ? "" : void 0,
+        "data-selected": selected ? "" : void 0,
+        "data-disabled": disabled ? "" : void 0,
+        className: (0, import_clsx.clsx)(
+          "flex-row-1 items-center px-2 py-1 rounded-md",
+          "data-highlighted:bg-primary/20",
+          "data-disabled:text-disabled data-disabled:cursor-not-allowed",
+          "not-data-disabled:cursor-pointer",
+          className
+        ),
+        onClick: () => {
+          if (!disabled) onItemClick(id);
+        },
+        onMouseEnter: () => {
+          if (!disabled) {
+            setHighlightedId(id);
+          }
+        },
+        ...rest,
+        children: children ?? value
+      }
+    );
+  }
+);
+var ListBoxPrimitive = (0, import_react.forwardRef)(
+  function ListBoxPrimitive2({
+    value,
+    onSelectionChanged,
+    onItemClicked,
+    isSelection = false,
+    isMultiple = false,
+    orientation = "vertical",
+    ...props
+  }, ref) {
+    const itemsRef = (0, import_react.useRef)([]);
+    const [highlightedIndex, setHighlightedIndex] = (0, import_react.useState)(void 0);
+    const registerItem = (0, import_react.useCallback)((item) => {
+      itemsRef.current.push(item);
+      itemsRef.current.sort((a, b) => {
+        const aEl = a.ref.current;
+        const bEl = b.ref.current;
+        if (!aEl || !bEl) return 0;
+        return aEl.compareDocumentPosition(bEl) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+      });
+    }, []);
+    const unregisterItem = (0, import_react.useCallback)((id) => {
+      itemsRef.current = itemsRef.current.filter((i) => i.id !== id);
+    }, []);
+    const isSelected = (0, import_react.useCallback)(
+      (val) => (value ?? []).includes(val),
+      [value]
+    );
+    const onItemClickedHandler = (0, import_react.useCallback)(
+      (id) => {
+        const index = itemsRef.current.findIndex((i) => i.id === id);
+        if (index === -1) {
+          console.error("ListBoxItem provided an invalid id");
+          return;
+        }
+        const item = itemsRef.current[index];
+        const val = item.value;
+        onItemClicked?.(val);
+        setHighlightedIndex(index);
+        if (!isSelection) return;
+        if (!isMultiple) {
+          onSelectionChanged?.([val]);
+        } else {
+          if (isSelected(val)) {
+            onSelectionChanged?.((value ?? []).filter((v) => v !== val));
+          } else {
+            onSelectionChanged?.([...value ?? [], val]);
+          }
+        }
+      },
+      [onItemClicked, isSelection, isMultiple, onSelectionChanged, isSelected, value]
+    );
+    const setHighlightedId = (0, import_react.useCallback)((id) => {
+      const index = itemsRef.current.findIndex((i) => i.id === id);
+      if (index !== -1) {
+        setHighlightedIndex(index);
+      }
+    }, []);
+    (0, import_react.useEffect)(() => {
+      if (highlightedIndex !== void 0) {
+        itemsRef.current[highlightedIndex]?.ref.current?.scrollIntoView({ block: "nearest", behavior: "auto" });
+      }
+    }, [highlightedIndex]);
+    const highlightedItem = itemsRef.current[highlightedIndex];
+    const ctxValue = {
+      registerItem,
+      unregisterItem,
+      highlightedId: highlightedItem?.id,
+      setHighlightedId,
+      onItemClick: onItemClickedHandler,
+      isSelected
+    };
+    const moveHighlight = (delta) => {
+      if (itemsRef.current.length === 0) return;
+      let nextIndex = highlightedIndex ?? -1;
+      for (let i = 0; i < itemsRef.current.length; i++) {
+        nextIndex = (nextIndex + delta + itemsRef.current.length) % itemsRef.current.length;
+        if (!itemsRef.current[nextIndex].disabled) break;
+      }
+      setHighlightedIndex(nextIndex);
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListBoxContext.Provider, { value: ctxValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "ul",
+      {
+        ref,
+        ...props,
+        onFocus: (event) => {
+          if (highlightedIndex === void 0) {
+            const firstEnabled = itemsRef.current.findIndex((i) => !i.disabled);
+            setHighlightedIndex(firstEnabled !== -1 ? firstEnabled : void 0);
+          }
+          props.onFocus?.(event);
+        },
+        onBlur: (event) => {
+          setHighlightedIndex(void 0);
+          props.onBlur?.(event);
+        },
+        onKeyDown: (event) => {
+          switch (event.key) {
+            case match(orientation, {
+              vertical: "ArrowDown",
+              horizontal: "ArrowUp"
+            }):
+              moveHighlight(1);
+              event.preventDefault();
+              break;
+            case match(orientation, {
+              vertical: "ArrowUp",
+              horizontal: "ArrowDown"
+            }):
+              moveHighlight(-1);
+              event.preventDefault();
+              break;
+            case "Home":
+              setHighlightedIndex(itemsRef.current.findIndex((i) => !i.disabled));
+              event.preventDefault();
+              break;
+            case "End":
+              for (let i = itemsRef.current.length - 1; i >= 0; i--) {
+                if (!itemsRef.current[i].disabled) {
+                  setHighlightedIndex(i);
+                  break;
+                }
+              }
+              event.preventDefault();
+              break;
+            case "Enter":
+            case " ":
+              if (highlightedIndex !== void 0) {
+                event.preventDefault();
+                onItemClickedHandler(itemsRef.current[highlightedIndex].id);
+              }
+              break;
+          }
+          props.onKeyDown?.(event);
+        },
+        role: "listbox",
+        "aria-multiselectable": isSelection ? isMultiple : void 0,
+        "aria-orientation": orientation,
+        tabIndex: 0,
+        children: props.children
+      }
+    ) });
+  }
+);
+var ListBoxMultiple = ({ ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListBoxPrimitive, { ...props });
+};
+var ListBoxMultipleUncontrolled = ({
+  value: initialValue,
+  onSelectionChanged,
+  ...props
+}) => {
+  const [value, setValue] = (0, import_react.useState)(initialValue);
+  (0, import_react.useEffect)(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    ListBoxMultiple,
+    {
+      ...props,
+      value,
+      onSelectionChanged: (newValue) => {
+        setValue(newValue);
+        onSelectionChanged?.(newValue);
+      }
+    }
+  );
+};
+var ListBox = (0, import_react.forwardRef)(function ListBox2({
+  value,
+  onSelectionChanged,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    ListBoxPrimitive,
+    {
+      ref,
+      value: value !== void 0 ? [value] : void 0,
+      onSelectionChanged: (newValue) => {
+        onSelectionChanged(newValue[0] ?? value);
+      },
+      isMultiple: false,
+      ...props
+    }
+  );
+});
+var ListBoxUncontrolled = ({
+  value: initialValue,
+  onSelectionChanged,
+  ...props
+}) => {
+  const [value, setValue] = (0, import_react.useState)(initialValue);
+  (0, import_react.useEffect)(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    ListBox,
+    {
+      ...props,
+      value,
+      onSelectionChanged: (newValue) => {
+        setValue(newValue);
+        onSelectionChanged?.(newValue);
+      }
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ListBox,
+  ListBoxItem,
+  ListBoxMultiple,
+  ListBoxMultipleUncontrolled,
+  ListBoxPrimitive,
+  ListBoxUncontrolled
+});
+//# sourceMappingURL=ListBox.js.map

package/dist/components/layout/ListBox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/layout/ListBox.tsx","../../../src/utils/match.ts"],"sourcesContent":["import type { HTMLAttributes } from 'react'\nimport React, { createContext, forwardRef, useCallback, useContext, useEffect, useRef, useState } from 'react'\nimport { clsx } from 'clsx'\nimport { match } from '@/src/utils/match'\n\n//\n// Context\n//\ntype RegisteredItem = {\n  id: string,\n  value: string,\n  disabled: boolean,\n  ref: React.RefObject<HTMLLIElement>,\n}\n\ntype ListBoxContextType = {\n  registerItem: (item: RegisteredItem) => void,\n  unregisterItem: (id: string) => void,\n\n  highlightedId?: string,\n  setHighlightedId: (id: string) => void,\n\n  onItemClick: (id: string) => void,\n  isSelected: (value: string) => boolean,\n}\n\nconst ListBoxContext = createContext<ListBoxContextType | null>(null)\n\nfunction useListBoxContext() {\n  const ctx = useContext(ListBoxContext)\n  if (!ctx) {\n    throw new Error('ListBoxItem must be used within a ListBoxPrimitive')\n  }\n  return ctx\n}\n\n\n/*\n * ListBoxItem\n */\nexport type ListBoxItemProps = HTMLAttributes<HTMLLIElement> & {\n  value: string,\n  disabled?: boolean,\n}\n\nexport const ListBoxItem = forwardRef<HTMLLIElement, ListBoxItemProps>(\n  function ListBoxItem({ value, disabled = false, children, className, ...rest }, ref) {\n    const {\n      registerItem,\n      unregisterItem,\n      highlightedId,\n      setHighlightedId,\n      onItemClick,\n      isSelected,\n    } = useListBoxContext()\n\n    const itemRef = useRef<HTMLLIElement>(null)\n    const id = React.useId()\n\n    // Register with parent\n    useEffect(() => {\n      registerItem({ id, value, disabled, ref: itemRef })\n      return () => unregisterItem(id)\n    }, [id, value, disabled, registerItem, unregisterItem])\n\n    const isHighlighted = highlightedId === id\n    const selected = isSelected(value)\n\n    return (\n      <li\n        ref={(node) => {\n          itemRef.current = node\n          if (typeof ref === 'function') ref(node)\n          else if (ref) (ref as React.MutableRefObject<HTMLLIElement | null>).current = node\n        }}\n        id={id}\n        role=\"option\"\n        aria-disabled={disabled}\n        aria-selected={selected}\n        data-highlighted={isHighlighted ? '' : undefined}\n        data-selected={selected ? '' : undefined}\n        data-disabled={disabled ? '' : undefined}\n        className={clsx(\n          'flex-row-1 items-center px-2 py-1 rounded-md',\n          'data-highlighted:bg-primary/20',\n          'data-disabled:text-disabled data-disabled:cursor-not-allowed',\n          'not-data-disabled:cursor-pointer',\n          className\n        )}\n        onClick={() => {\n          if (!disabled) onItemClick(id)\n        }}\n        onMouseEnter={() => {\n          if (!disabled) {\n            setHighlightedId(id)\n          }\n        }}\n        {...rest}\n      >\n        {children ?? value}\n      </li>\n    )\n  }\n)\n\ntype ListBoxOrientation = 'vertical' | 'horizontal'\n\n//\n// ListBoxPrimitive\n//\nexport type ListBoxPrimitiveProps = HTMLAttributes<HTMLUListElement> & {\n  value?: string[],\n  onItemClicked?: (value: string) => void,\n  onSelectionChanged?: (value: string[]) => void,\n  isSelection?: boolean,\n  isMultiple?: boolean,\n  orientation?: ListBoxOrientation,\n}\n\n\nexport const ListBoxPrimitive = forwardRef<HTMLUListElement, ListBoxPrimitiveProps>(\n  function ListBoxPrimitive({\n                              value,\n                              onSelectionChanged,\n                              onItemClicked,\n                              isSelection = false,\n                              isMultiple = false,\n                              orientation = 'vertical',\n                              ...props\n                            }, ref) {\n    const itemsRef = useRef<RegisteredItem[]>([])\n    const [highlightedIndex, setHighlightedIndex] = useState<number | undefined>(undefined)\n\n    const registerItem = useCallback((item: RegisteredItem) => {\n      itemsRef.current.push(item)\n      itemsRef.current.sort((a, b) => {\n        const aEl = a.ref.current\n        const bEl = b.ref.current\n        if (!aEl || !bEl) return 0\n        return aEl.compareDocumentPosition(bEl) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1\n      })\n    }, [])\n\n    const unregisterItem = useCallback((id: string) => {\n      itemsRef.current = itemsRef.current.filter(i => i.id !== id)\n    }, [])\n\n    const isSelected = useCallback(\n      (val: string) => (value ?? []).includes(val),\n      [value]\n    )\n\n    const onItemClickedHandler = useCallback(\n      (id: string) => {\n        const index = itemsRef.current.findIndex(i => i.id === id)\n        if (index === -1) {\n          console.error('ListBoxItem provided an invalid id')\n          return\n        }\n        const item = itemsRef.current[index]\n        const val = item.value\n        onItemClicked?.(val)\n        setHighlightedIndex(index)\n        if (!isSelection) return\n        if (!isMultiple) {\n          onSelectionChanged?.([val])\n        } else {\n          if (isSelected(val)) {\n            onSelectionChanged?.((value ?? []).filter(v => v !== val))\n          } else {\n            onSelectionChanged?.([...(value ?? []), val])\n          }\n        }\n      },\n      [onItemClicked, isSelection, isMultiple, onSelectionChanged, isSelected, value]\n    )\n\n    const setHighlightedId = useCallback((id: string) => {\n      const index = itemsRef.current.findIndex(i => i.id === id)\n      if (index !== -1) {\n        setHighlightedIndex(index)\n      }\n    }, [])\n\n    // Scroll highlighted item into view\n    useEffect(() => {\n      if (highlightedIndex !== undefined) {\n        itemsRef.current[highlightedIndex]?.ref.current?.scrollIntoView({ block: 'nearest', behavior: 'auto' })\n      }\n    }, [highlightedIndex])\n\n    const highlightedItem: RegisteredItem | undefined = itemsRef.current[highlightedIndex]\n    const ctxValue: ListBoxContextType = {\n      registerItem,\n      unregisterItem,\n      highlightedId: highlightedItem?.id,\n      setHighlightedId,\n      onItemClick: onItemClickedHandler,\n      isSelected,\n    }\n\n    const moveHighlight = (delta: number) => {\n      if (itemsRef.current.length === 0) return\n      let nextIndex = highlightedIndex ?? -1\n      for (let i = 0; i < itemsRef.current.length; i++) {\n        nextIndex = (nextIndex + delta + itemsRef.current.length) % itemsRef.current.length\n        if (!itemsRef.current[nextIndex].disabled) break\n      }\n      setHighlightedIndex(nextIndex)\n    }\n\n    return (\n      <ListBoxContext.Provider value={ctxValue}>\n        <ul\n          ref={ref}\n          {...props}\n          onFocus={event => {\n            if (highlightedIndex === undefined) {\n              const firstEnabled = itemsRef.current.findIndex(i => !i.disabled)\n              setHighlightedIndex(firstEnabled !== -1 ? firstEnabled : undefined)\n            }\n            props.onFocus?.(event)\n          }}\n          onBlur={event => {\n            setHighlightedIndex(undefined)\n            props.onBlur?.(event)\n          }}\n          onKeyDown={(event) => {\n            switch (event.key) {\n              case match(orientation, {\n                vertical: 'ArrowDown',\n                horizontal: 'ArrowUp'\n              }):\n                moveHighlight(1)\n                event.preventDefault()\n                break\n              case match(orientation, {\n                vertical: 'ArrowUp',\n                horizontal: 'ArrowDown'\n              }):\n                moveHighlight(-1)\n                event.preventDefault()\n                break\n              case 'Home':\n                setHighlightedIndex(itemsRef.current.findIndex(i => !i.disabled))\n                event.preventDefault()\n                break\n              case 'End':\n                for (let i = itemsRef.current.length - 1; i >= 0; i--) {\n                  if (!itemsRef.current[i].disabled) {\n                    setHighlightedIndex(i)\n                    break\n                  }\n                }\n                event.preventDefault()\n                break\n              case 'Enter':\n              case ' ':\n                if (highlightedIndex !== undefined) {\n                  event.preventDefault()\n                  onItemClickedHandler(itemsRef.current[highlightedIndex].id)\n                }\n                break\n            }\n            props.onKeyDown?.(event)\n          }}\n          role=\"listbox\"\n          aria-multiselectable={isSelection ? isMultiple : undefined}\n          aria-orientation={orientation}\n          tabIndex={0}\n        >\n          {props.children}\n        </ul>\n      </ListBoxContext.Provider>\n    )\n  }\n)\n\n/*\n * ListBoxMultiple\n */\nexport type ListBoxMultipleProps = Omit<ListBoxPrimitiveProps, 'isMultiple'>\nexport const ListBoxMultiple = ({ ...props }: ListBoxMultipleProps) => {\n  return (\n    <ListBoxPrimitive {...props}/>\n  )\n}\n\nexport type ListBoxMultipleUncontrolledProps = ListBoxMultipleProps\nexport const ListBoxMultipleUncontrolled = ({\n                                              value: initialValue,\n                                              onSelectionChanged,\n                                              ...props\n                                            }: ListBoxMultipleUncontrolledProps) => {\n  const [value, setValue] = useState(initialValue)\n\n  useEffect(() => {\n    setValue(initialValue)\n  }, [initialValue])\n\n  return (\n    <ListBoxMultiple\n      {...props}\n      value={value}\n      onSelectionChanged={(newValue) => {\n        setValue(newValue)\n        onSelectionChanged?.(newValue)\n      }}\n    />\n  )\n}\n\nexport type ListBoxProps = Omit<ListBoxPrimitiveProps, 'isMultiple' | 'value' | 'onSelectionChanged'> & {\n  value?: string,\n  onSelectionChanged?: (value: string) => void,\n}\nexport const ListBox = forwardRef<HTMLUListElement, ListBoxProps>(function ListBox({\n                                                                                     value,\n                                                                                     onSelectionChanged,\n                                                                                     ...props\n                                                                                   }, ref) {\n  return (\n    <ListBoxPrimitive\n      ref={ref}\n      value={value !== undefined ? [value] : undefined}\n      onSelectionChanged={(newValue) => {\n        onSelectionChanged(newValue[0] ?? value)\n      }}\n      isMultiple={false}\n      {...props}\n    />\n  )\n})\n\nexport type ListBoxUncontrolledProps = ListBoxProps\nexport const ListBoxUncontrolled = ({\n                                      value: initialValue,\n                                      onSelectionChanged,\n                                      ...props\n                                    }: ListBoxUncontrolledProps) => {\n  const [value, setValue] = useState(initialValue)\n\n  useEffect(() => {\n    setValue(initialValue)\n  }, [initialValue])\n\n  return (\n    <ListBox\n      {...props}\n      value={value}\n      onSelectionChanged={(newValue) => {\n        setValue(newValue)\n        onSelectionChanged?.(newValue)\n      }}\n    />\n  )\n}","export const match = <K extends string | number | symbol, V>(key: K, values: Record<K, V>) => {\n  return values[key]\n}"],"mappings":"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","names":["ListBoxItem","React","ListBoxPrimitive","ListBox"]}

package/dist/components/layout/ListBox.mjs

@@ -0,0 +1,290 @@
+// src/components/layout/ListBox.tsx
+import React, { createContext, forwardRef, useCallback, useContext, useEffect, useRef, useState } from "react";
+import { clsx } from "clsx";
+
+// src/utils/match.ts
+var match = (key, values) => {
+  return values[key];
+};
+
+// src/components/layout/ListBox.tsx
+import { jsx } from "react/jsx-runtime";
+var ListBoxContext = createContext(null);
+function useListBoxContext() {
+  const ctx = useContext(ListBoxContext);
+  if (!ctx) {
+    throw new Error("ListBoxItem must be used within a ListBoxPrimitive");
+  }
+  return ctx;
+}
+var ListBoxItem = forwardRef(
+  function ListBoxItem2({ value, disabled = false, children, className, ...rest }, ref) {
+    const {
+      registerItem,
+      unregisterItem,
+      highlightedId,
+      setHighlightedId,
+      onItemClick,
+      isSelected
+    } = useListBoxContext();
+    const itemRef = useRef(null);
+    const id = React.useId();
+    useEffect(() => {
+      registerItem({ id, value, disabled, ref: itemRef });
+      return () => unregisterItem(id);
+    }, [id, value, disabled, registerItem, unregisterItem]);
+    const isHighlighted = highlightedId === id;
+    const selected = isSelected(value);
+    return /* @__PURE__ */ jsx(
+      "li",
+      {
+        ref: (node) => {
+          itemRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        },
+        id,
+        role: "option",
+        "aria-disabled": disabled,
+        "aria-selected": selected,
+        "data-highlighted": isHighlighted ? "" : void 0,
+        "data-selected": selected ? "" : void 0,
+        "data-disabled": disabled ? "" : void 0,
+        className: clsx(
+          "flex-row-1 items-center px-2 py-1 rounded-md",
+          "data-highlighted:bg-primary/20",
+          "data-disabled:text-disabled data-disabled:cursor-not-allowed",
+          "not-data-disabled:cursor-pointer",
+          className
+        ),
+        onClick: () => {
+          if (!disabled) onItemClick(id);
+        },
+        onMouseEnter: () => {
+          if (!disabled) {
+            setHighlightedId(id);
+          }
+        },
+        ...rest,
+        children: children ?? value
+      }
+    );
+  }
+);
+var ListBoxPrimitive = forwardRef(
+  function ListBoxPrimitive2({
+    value,
+    onSelectionChanged,
+    onItemClicked,
+    isSelection = false,
+    isMultiple = false,
+    orientation = "vertical",
+    ...props
+  }, ref) {
+    const itemsRef = useRef([]);
+    const [highlightedIndex, setHighlightedIndex] = useState(void 0);
+    const registerItem = useCallback((item) => {
+      itemsRef.current.push(item);
+      itemsRef.current.sort((a, b) => {
+        const aEl = a.ref.current;
+        const bEl = b.ref.current;
+        if (!aEl || !bEl) return 0;
+        return aEl.compareDocumentPosition(bEl) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+      });
+    }, []);
+    const unregisterItem = useCallback((id) => {
+      itemsRef.current = itemsRef.current.filter((i) => i.id !== id);
+    }, []);
+    const isSelected = useCallback(
+      (val) => (value ?? []).includes(val),
+      [value]
+    );
+    const onItemClickedHandler = useCallback(
+      (id) => {
+        const index = itemsRef.current.findIndex((i) => i.id === id);
+        if (index === -1) {
+          console.error("ListBoxItem provided an invalid id");
+          return;
+        }
+        const item = itemsRef.current[index];
+        const val = item.value;
+        onItemClicked?.(val);
+        setHighlightedIndex(index);
+        if (!isSelection) return;
+        if (!isMultiple) {
+          onSelectionChanged?.([val]);
+        } else {
+          if (isSelected(val)) {
+            onSelectionChanged?.((value ?? []).filter((v) => v !== val));
+          } else {
+            onSelectionChanged?.([...value ?? [], val]);
+          }
+        }
+      },
+      [onItemClicked, isSelection, isMultiple, onSelectionChanged, isSelected, value]
+    );
+    const setHighlightedId = useCallback((id) => {
+      const index = itemsRef.current.findIndex((i) => i.id === id);
+      if (index !== -1) {
+        setHighlightedIndex(index);
+      }
+    }, []);
+    useEffect(() => {
+      if (highlightedIndex !== void 0) {
+        itemsRef.current[highlightedIndex]?.ref.current?.scrollIntoView({ block: "nearest", behavior: "auto" });
+      }
+    }, [highlightedIndex]);
+    const highlightedItem = itemsRef.current[highlightedIndex];
+    const ctxValue = {
+      registerItem,
+      unregisterItem,
+      highlightedId: highlightedItem?.id,
+      setHighlightedId,
+      onItemClick: onItemClickedHandler,
+      isSelected
+    };
+    const moveHighlight = (delta) => {
+      if (itemsRef.current.length === 0) return;
+      let nextIndex = highlightedIndex ?? -1;
+      for (let i = 0; i < itemsRef.current.length; i++) {
+        nextIndex = (nextIndex + delta + itemsRef.current.length) % itemsRef.current.length;
+        if (!itemsRef.current[nextIndex].disabled) break;
+      }
+      setHighlightedIndex(nextIndex);
+    };
+    return /* @__PURE__ */ jsx(ListBoxContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx(
+      "ul",
+      {
+        ref,
+        ...props,
+        onFocus: (event) => {
+          if (highlightedIndex === void 0) {
+            const firstEnabled = itemsRef.current.findIndex((i) => !i.disabled);
+            setHighlightedIndex(firstEnabled !== -1 ? firstEnabled : void 0);
+          }
+          props.onFocus?.(event);
+        },
+        onBlur: (event) => {
+          setHighlightedIndex(void 0);
+          props.onBlur?.(event);
+        },
+        onKeyDown: (event) => {
+          switch (event.key) {
+            case match(orientation, {
+              vertical: "ArrowDown",
+              horizontal: "ArrowUp"
+            }):
+              moveHighlight(1);
+              event.preventDefault();
+              break;
+            case match(orientation, {
+              vertical: "ArrowUp",
+              horizontal: "ArrowDown"
+            }):
+              moveHighlight(-1);
+              event.preventDefault();
+              break;
+            case "Home":
+              setHighlightedIndex(itemsRef.current.findIndex((i) => !i.disabled));
+              event.preventDefault();
+              break;
+            case "End":
+              for (let i = itemsRef.current.length - 1; i >= 0; i--) {
+                if (!itemsRef.current[i].disabled) {
+                  setHighlightedIndex(i);
+                  break;
+                }
+              }
+              event.preventDefault();
+              break;
+            case "Enter":
+            case " ":
+              if (highlightedIndex !== void 0) {
+                event.preventDefault();
+                onItemClickedHandler(itemsRef.current[highlightedIndex].id);
+              }
+              break;
+          }
+          props.onKeyDown?.(event);
+        },
+        role: "listbox",
+        "aria-multiselectable": isSelection ? isMultiple : void 0,
+        "aria-orientation": orientation,
+        tabIndex: 0,
+        children: props.children
+      }
+    ) });
+  }
+);
+var ListBoxMultiple = ({ ...props }) => {
+  return /* @__PURE__ */ jsx(ListBoxPrimitive, { ...props });
+};
+var ListBoxMultipleUncontrolled = ({
+  value: initialValue,
+  onSelectionChanged,
+  ...props
+}) => {
+  const [value, setValue] = useState(initialValue);
+  useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+  return /* @__PURE__ */ jsx(
+    ListBoxMultiple,
+    {
+      ...props,
+      value,
+      onSelectionChanged: (newValue) => {
+        setValue(newValue);
+        onSelectionChanged?.(newValue);
+      }
+    }
+  );
+};
+var ListBox = forwardRef(function ListBox2({
+  value,
+  onSelectionChanged,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ jsx(
+    ListBoxPrimitive,
+    {
+      ref,
+      value: value !== void 0 ? [value] : void 0,
+      onSelectionChanged: (newValue) => {
+        onSelectionChanged(newValue[0] ?? value);
+      },
+      isMultiple: false,
+      ...props
+    }
+  );
+});
+var ListBoxUncontrolled = ({
+  value: initialValue,
+  onSelectionChanged,
+  ...props
+}) => {
+  const [value, setValue] = useState(initialValue);
+  useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+  return /* @__PURE__ */ jsx(
+    ListBox,
+    {
+      ...props,
+      value,
+      onSelectionChanged: (newValue) => {
+        setValue(newValue);
+        onSelectionChanged?.(newValue);
+      }
+    }
+  );
+};
+export {
+  ListBox,
+  ListBoxItem,
+  ListBoxMultiple,
+  ListBoxMultipleUncontrolled,
+  ListBoxPrimitive,
+  ListBoxUncontrolled
+};
+//# sourceMappingURL=ListBox.mjs.map