@crewlethq/ui 0.2.0 → 0.3.0

package/dist/chunk-T7FKOJKW.js

@@ -0,0 +1,221 @@
+import { CardHeaderSlotContext } from './chunk-AV2DXAEL.js';
+import { Count } from './chunk-BHHIIK3M.js';
+import { useHeadingLevel, HeadingLevelProvider, nextHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './Card-AHX3Q2JD.css';
+import { createContext, useId, useState, isValidElement, useRef, useCallback, useMemo, Children, cloneElement, useContext, useEffect, Fragment } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var CardContext = createContext(null);
+var isSlot = (node) => isValidElement(node) && SLOT_TYPES.has(node.type);
+function slotsIn(children) {
+  const found = { nodes: [], any: false, header: false };
+  for (const child of Children.toArray(children)) {
+    if (isValidElement(child) && child.type === Fragment) {
+      const nested = slotsIn(child.props.children);
+      if (nested.any) {
+        found.nodes.push(...nested.nodes);
+        found.any = true;
+        found.header = found.header || nested.header;
+        continue;
+      }
+    }
+    found.nodes.push(child);
+    if (!isValidElement(child)) continue;
+    if (child.type === CardHeader) {
+      found.any = true;
+      found.header = true;
+      continue;
+    }
+    if (isSlot(child)) found.any = true;
+  }
+  return found;
+}
+function withBodies(nodes, padding) {
+  if (padding === "none") return nodes;
+  const out = [];
+  let run = [];
+  const close = () => {
+    if (run.length === 0) return;
+    out.push(
+      // Keyed on the position among the card's own children, which is where
+      // this body is, so a run that gains or loses a node is an update rather
+      // than a remount of everything inside it.
+      /* @__PURE__ */ jsx(CardBody, { padding, children: run }, `body-${out.length}`)
+    );
+    run = [];
+  };
+  for (const node of nodes) {
+    if (isSlot(node)) {
+      close();
+      out.push(node);
+      continue;
+    }
+    run.push(node);
+  }
+  close();
+  return out;
+}
+function cardClass({ variant = "default", padding = "md", interactive, rail, selected, className }, flush, extra) {
+  return cx(
+    "crewlet-card",
+    `crewlet-card--${variant}`,
+    `crewlet-card--p-${padding}`,
+    flush && "crewlet-card--flush",
+    rail && `crewlet-card--rail-${rail}`,
+    selected && "is-selected",
+    interactive && "is-interactive",
+    extra,
+    className
+  );
+}
+var CardRoot = ({
+  variant = "default",
+  padding,
+  interactive = false,
+  rail,
+  selected = false,
+  as = "div",
+  href,
+  asChild = false,
+  className,
+  children,
+  ...rest
+}) => {
+  const level = useHeadingLevel();
+  const titleId = useId();
+  const [hasTitle, setHasTitle] = useState(false);
+  const navigates = href !== void 0 || asChild;
+  const inner = asChild && isValidElement(children) ? children.props["children"] : children;
+  const slots = slotsIn(inner);
+  const flush = slots.any;
+  const contentPadding = padding ?? "md";
+  const classes = cardClass(
+    {
+      variant,
+      padding: flush ? "none" : padding ?? (variant === "subtle" ? "tight" : "md"),
+      interactive: interactive || navigates,
+      rail,
+      selected,
+      className
+    },
+    flush
+  );
+  const content = flush ? withBodies(slots.nodes, contentPadding) : children;
+  const [chromeNode, setChromeNode] = useState(null);
+  const chromeHolder = useRef(null);
+  const hostChrome = useCallback((node) => setChromeNode(node), []);
+  const claimChrome = useCallback((claimant) => {
+    chromeHolder.current ??= claimant;
+    return chromeHolder.current === claimant;
+  }, []);
+  const releaseChrome = useCallback((claimant) => {
+    if (chromeHolder.current === claimant) chromeHolder.current = null;
+  }, []);
+  const headerSlot = useMemo(
+    () => ({
+      hasHeader: slots.header,
+      node: chromeNode,
+      claim: claimChrome,
+      release: releaseChrome
+    }),
+    [slots.header, chromeNode, claimChrome, releaseChrome]
+  );
+  const context = {
+    titleLevel: level,
+    titleId,
+    registerTitle: () => setHasTitle(true),
+    hostChrome
+  };
+  const body = /* @__PURE__ */ jsx(CardContext.Provider, { value: context, children: /* @__PURE__ */ jsx(CardHeaderSlotContext.Provider, { value: headerSlot, children: /* @__PURE__ */ jsx(HeadingLevelProvider, { level: nextHeadingLevel(level), children: content }) }) });
+  if (asChild) {
+    const child = Children.only(children);
+    if (!isValidElement(child)) {
+      throw new Error("Card with asChild expects exactly one valid React element child.");
+    }
+    const childEl = child;
+    return cloneElement(
+      childEl,
+      { ...rest, className: cx(childEl.props["className"], classes) },
+      /* @__PURE__ */ jsx(CardContext.Provider, { value: context, children: /* @__PURE__ */ jsx(CardHeaderSlotContext.Provider, { value: headerSlot, children: /* @__PURE__ */ jsx(HeadingLevelProvider, { level: nextHeadingLevel(level), children: content }) }) })
+    );
+  }
+  if (href !== void 0) {
+    return /* @__PURE__ */ jsx("a", { ...rest, href, className: classes, children: body });
+  }
+  const Tag = as;
+  const sectioning = as === "section" || as === "article";
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ...rest,
+      className: classes,
+      "aria-labelledby": sectioning && hasTitle ? rest["aria-labelledby"] ?? titleId : rest["aria-labelledby"],
+      children: body
+    }
+  );
+};
+var CardHeader = ({
+  divided = true,
+  icon,
+  count,
+  subtitle,
+  actions,
+  className,
+  children,
+  ...rest
+}) => {
+  const card = useContext(CardContext);
+  const host = card?.hostChrome;
+  const chromeRef = useCallback(
+    (node) => {
+      host?.(node);
+    },
+    [host]
+  );
+  return /* @__PURE__ */ jsxs("div", { ...rest, className: cx("crewlet-card__header", !divided && "crewlet-card__header--plain", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "crewlet-card__header-main", children: [
+      icon === void 0 ? null : /* @__PURE__ */ jsx("span", { className: "crewlet-card__header-icon", "aria-hidden": true, children: icon }),
+      children,
+      count === void 0 ? null : /* @__PURE__ */ jsx(Count, { value: count })
+    ] }),
+    subtitle === void 0 ? null : /* @__PURE__ */ jsx("span", { className: "crewlet-card__subtitle", children: subtitle }),
+    actions === void 0 ? null : /* @__PURE__ */ jsx("div", { className: "crewlet-card__header-actions", children: actions }),
+    card === null ? null : /* @__PURE__ */ jsx("div", { className: "crewlet-card__header-chrome", ref: chromeRef })
+  ] });
+};
+var CardBody = ({ padding = "md", className, children, ...rest }) => /* @__PURE__ */ jsx("div", { ...rest, className: cx("crewlet-card__body", `crewlet-card__body--p-${padding}`, className), children });
+var CardFooter = ({ variant = "actions", padding = "sm", className, children, ...rest }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ...rest,
+    className: cx(
+      "crewlet-card__footer",
+      `crewlet-card__footer--${variant}`,
+      `crewlet-card__footer--p-${padding}`,
+      className
+    ),
+    children
+  }
+);
+var CardTitle = ({ as, className, children, ...rest }) => {
+  const card = useContext(CardContext);
+  const fallback = useHeadingLevel();
+  const Tag = as ?? headingTag(card?.titleLevel ?? fallback);
+  const register = card?.registerTitle;
+  useEffect(() => {
+    register?.();
+  }, [register]);
+  return /* @__PURE__ */ jsx(Tag, { ...rest, id: rest.id ?? card?.titleId, className: cx("crewlet-card__title", className), children });
+};
+var CardDescription = ({ className, children, ...rest }) => /* @__PURE__ */ jsx("p", { ...rest, className: cx("crewlet-card__description", className), children });
+var SLOT_TYPES = /* @__PURE__ */ new Set([CardHeader, CardBody, CardFooter]);
+var Card = Object.assign(CardRoot, {
+  Header: CardHeader,
+  Body: CardBody,
+  Footer: CardFooter,
+  Title: CardTitle,
+  Description: CardDescription
+});
+
+export { Card };

package/dist/chunk-UG46QBLT.js

@@ -0,0 +1,325 @@
+import { Popover } from './chunk-DD5BBGBE.js';
+import { today, CalendarGrid, shiftMonth, compareDays } from './chunk-GXQ3B46I.js';
+import { IconButton } from './chunk-F27EPQ7D.js';
+import { Button } from './chunk-BZYDZBAN.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './DateTimePicker-22VNXRWC.css';
+import { useMemo, useState, useEffect } from 'react';
+import { CalendarTodayGlyph, KeyboardArrowDownGlyph, KeyboardDoubleArrowLeftGlyph, ChevronLeftGlyph, ChevronRightGlyph, KeyboardDoubleArrowRightGlyph } from '@crewlethq/icons/glyphs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var DEFAULT_DATE_TIME_PICKER_LABELS = {
+  triggerName: (name, value) => `${name}: ${value}`,
+  unsetLabel: "nothing chosen",
+  previousYearLabel: "Previous year",
+  previousMonthLabel: "Previous month",
+  nextMonthLabel: "Next month",
+  nextYearLabel: "Next year",
+  timeLabel: "Time",
+  hourLabel: "Hour",
+  minuteLabel: "Minute",
+  secondLabel: "Second",
+  nowLabel: "Now",
+  todayLabel: "Today",
+  clearLabel: "Clear",
+  doneLabel: "Done"
+};
+var pad = (n) => String(n).padStart(2, "0");
+var MONTH_NAMES = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+var formatValue = (parsed) => `${parsed.year}-${pad(parsed.month + 1)}-${pad(parsed.day)}T${pad(parsed.hour)}:${pad(parsed.minute)}:${pad(parsed.second)}`;
+function parseValue(text) {
+  if (!text) return null;
+  const at = text.indexOf("T");
+  const date = at >= 0 ? text.slice(0, at) : text;
+  const time = at >= 0 ? text.slice(at + 1) : "00:00:00";
+  const parts = date.split("-");
+  if (parts.length < 3) return null;
+  const year = Number.parseInt(parts[0], 10);
+  const month = Number.parseInt(parts[1], 10);
+  const day = Number.parseInt(parts[2], 10);
+  if (!Number.isFinite(year) || !Number.isFinite(month) || !Number.isFinite(day)) return null;
+  const clock = time.split(":");
+  const hour = Number.parseInt(clock[0] || "0", 10);
+  const minute = Number.parseInt(clock[1] || "0", 10);
+  const second = Number.parseInt(clock[2] || "0", 10);
+  return {
+    year,
+    month: month - 1,
+    day,
+    hour: Number.isFinite(hour) ? hour : 0,
+    minute: Number.isFinite(minute) ? minute : 0,
+    second: Number.isFinite(second) ? second : 0
+  };
+}
+function formatLabel(text, showTime) {
+  const parsed = parseValue(text);
+  if (!parsed) return "";
+  const when = new Date(parsed.year, parsed.month, parsed.day, parsed.hour, parsed.minute, parsed.second);
+  return showTime ? when.toLocaleString(void 0, {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: false
+  }) : when.toLocaleDateString(void 0, { year: "numeric", month: "short", day: "numeric" });
+}
+function DateTimePicker({
+  value,
+  onChange,
+  placeholder = "Pick a date",
+  showTime = true,
+  minDate,
+  maxDate,
+  firstDayOfWeek = 0,
+  ariaLabel = "Date",
+  inline = false,
+  onDone,
+  className = "",
+  disabled = false,
+  size = "md",
+  labels: labelOverrides
+}) {
+  const labels = useMemo(
+    () => labelOverrides ? { ...DEFAULT_DATE_TIME_PICKER_LABELS, ...labelOverrides } : DEFAULT_DATE_TIME_PICKER_LABELS,
+    [labelOverrides]
+  );
+  const parsed = useMemo(() => parseValue(value), [value]);
+  const min = useMemo(() => parseValue(minDate), [minDate]);
+  const max = useMemo(() => parseValue(maxDate), [maxDate]);
+  const now = useMemo(today, []);
+  const [view, setView] = useState(
+    () => parsed ? { year: parsed.year, month: parsed.month } : { year: now.year, month: now.month }
+  );
+  const [focused, setFocused] = useState(() => parsed ?? now);
+  const year = parsed?.year;
+  const month = parsed?.month;
+  const day = parsed?.day;
+  useEffect(() => {
+    if (year === void 0 || month === void 0 || day === void 0) return;
+    setView({ year, month });
+    setFocused({ year, month, day });
+  }, [year, month, day]);
+  const outOfBounds = (date) => min !== null && compareDays(date, min) < 0 || max !== null && compareDays(date, max) > 0;
+  const step = (months) => {
+    const next = shiftMonth({ ...view, day: 1 }, months);
+    setView({ year: next.year, month: next.month });
+  };
+  const choose = (date, close) => {
+    onChange(
+      formatValue({
+        ...date,
+        hour: parsed?.hour ?? 0,
+        minute: parsed?.minute ?? 0,
+        second: parsed?.second ?? 0
+      })
+    );
+    if (!showTime) close();
+  };
+  const setTime = (hour, minute, second) => {
+    const base = parsed ?? { ...now, hour: 0, minute: 0, second: 0 };
+    onChange(formatValue({ ...base, hour, minute, second }));
+  };
+  const takeNow = () => {
+    const at = /* @__PURE__ */ new Date();
+    const wanted = {
+      year: at.getFullYear(),
+      month: at.getMonth(),
+      day: at.getDate(),
+      hour: showTime ? at.getHours() : 0,
+      minute: showTime ? at.getMinutes() : 0,
+      second: showTime ? at.getSeconds() : 0
+    };
+    const held = min !== null && compareDays(wanted, min) < 0 ? { ...min } : max !== null && compareDays(wanted, max) > 0 ? { ...max } : wanted;
+    setView({ year: held.year, month: held.month });
+    setFocused({ year: held.year, month: held.month, day: held.day });
+    onChange(formatValue(held));
+  };
+  const panel = (close) => /* @__PURE__ */ jsxs("div", { className: "crewlet-datetime__panel", children: [
+    /* @__PURE__ */ jsxs("div", { className: "crewlet-datetime__nav", children: [
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          size: "sm",
+          label: labels.previousYearLabel,
+          icon: /* @__PURE__ */ jsx(KeyboardDoubleArrowLeftGlyph, {}),
+          onClick: () => step(-12)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          size: "sm",
+          label: labels.previousMonthLabel,
+          icon: /* @__PURE__ */ jsx(ChevronLeftGlyph, {}),
+          onClick: () => step(-1)
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "crewlet-datetime__title", "aria-live": "polite", children: [
+        MONTH_NAMES[view.month],
+        " ",
+        view.year
+      ] }),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          size: "sm",
+          label: labels.nextMonthLabel,
+          icon: /* @__PURE__ */ jsx(ChevronRightGlyph, {}),
+          onClick: () => step(1)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          size: "sm",
+          label: labels.nextYearLabel,
+          icon: /* @__PURE__ */ jsx(KeyboardDoubleArrowRightGlyph, {}),
+          onClick: () => step(12)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      CalendarGrid,
+      {
+        label: `${MONTH_NAMES[view.month]} ${view.year}`,
+        year: view.year,
+        month: view.month,
+        focused,
+        onFocusedChange: setFocused,
+        onMonthChange: (nextYear, nextMonth) => setView({ year: nextYear, month: nextMonth }),
+        onSelect: (date) => choose(date, close),
+        selected: parsed ? [{ year: parsed.year, month: parsed.month, day: parsed.day }] : [],
+        isDisabled: outOfBounds,
+        firstDayOfWeek
+      }
+    ),
+    showTime ? /* @__PURE__ */ jsxs("div", { className: "crewlet-datetime__time", children: [
+      /* @__PURE__ */ jsx("span", { className: "crewlet-datetime__time-label", children: labels.timeLabel }),
+      /* @__PURE__ */ jsx(
+        TimeUnit,
+        {
+          value: parsed?.hour ?? 0,
+          max: 23,
+          label: labels.hourLabel,
+          onCommit: (next) => setTime(next, parsed?.minute ?? 0, parsed?.second ?? 0)
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "crewlet-datetime__time-sep", "aria-hidden": "true", children: ":" }),
+      /* @__PURE__ */ jsx(
+        TimeUnit,
+        {
+          value: parsed?.minute ?? 0,
+          max: 59,
+          label: labels.minuteLabel,
+          onCommit: (next) => setTime(parsed?.hour ?? 0, next, parsed?.second ?? 0)
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "crewlet-datetime__time-sep", "aria-hidden": "true", children: ":" }),
+      /* @__PURE__ */ jsx(
+        TimeUnit,
+        {
+          value: parsed?.second ?? 0,
+          max: 59,
+          label: labels.secondLabel,
+          onCommit: (next) => setTime(parsed?.hour ?? 0, parsed?.minute ?? 0, next)
+        }
+      )
+    ] }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "crewlet-datetime__footer", children: [
+      /* @__PURE__ */ jsxs("div", { className: "crewlet-datetime__shortcuts", children: [
+        /* @__PURE__ */ jsx(Button, { size: "small", variant: "tertiary", onClick: takeNow, children: showTime ? labels.nowLabel : labels.todayLabel }),
+        /* @__PURE__ */ jsx(Button, { size: "small", variant: "tertiary", onClick: () => onChange(""), children: labels.clearLabel })
+      ] }),
+      /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", onClick: () => close(), children: labels.doneLabel })
+    ] })
+  ] });
+  if (inline) return panel(onDone ?? (() => void 0));
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      align: "start",
+      side: "bottom",
+      width: "auto",
+      label: ariaLabel,
+      className: "crewlet-datetime__popover",
+      trigger: (open, toggle) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: cx(
+            "crewlet-datetime",
+            `crewlet-datetime--${size}`,
+            value && "is-set",
+            open && "is-open",
+            disabled && "is-disabled",
+            className
+          ),
+          onClick: () => {
+            if (!disabled) toggle();
+          },
+          disabled,
+          "aria-haspopup": "dialog",
+          "aria-expanded": open,
+          "aria-label": labels.triggerName(
+            ariaLabel,
+            value ? formatLabel(value, showTime) : labels.unsetLabel
+          ),
+          children: [
+            /* @__PURE__ */ jsx(CalendarTodayGlyph, { className: "crewlet-datetime__icon", size: "sm" }),
+            /* @__PURE__ */ jsx("span", { className: cx("crewlet-datetime__label", !value && "is-placeholder"), children: value ? formatLabel(value, showTime) : placeholder }),
+            /* @__PURE__ */ jsx(KeyboardArrowDownGlyph, { className: "crewlet-datetime__chevron", size: "sm" })
+          ]
+        }
+      ),
+      children: (close) => panel(close)
+    }
+  );
+}
+function TimeUnit({ value, max, label, onCommit }) {
+  const [shown, setShown] = useState(() => pad(value));
+  useEffect(() => {
+    setShown(pad(value));
+  }, [value]);
+  const commit = () => {
+    const next = Math.max(0, Math.min(max, Number.parseInt(shown, 10) || 0));
+    setShown(pad(next));
+    if (next !== value) onCommit(next);
+  };
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: "number",
+      inputMode: "numeric",
+      min: 0,
+      max,
+      className: "crewlet-datetime__time-input",
+      value: shown,
+      "aria-label": label,
+      onChange: (event) => setShown(event.target.value.replace(/[^0-9]/g, "").slice(0, 2)),
+      onBlur: commit,
+      onKeyDown: (event) => {
+        if (event.key !== "Enter") return;
+        event.preventDefault();
+        commit();
+      },
+      onFocus: (event) => event.currentTarget.select()
+    }
+  );
+}
+
+export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker };

package/dist/chunk-UOGSZKLT.js

@@ -0,0 +1,134 @@
+import { useListbox } from './chunk-GTOUGQQK.js';
+import { Input } from './chunk-O6232G37.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './Combobox-4FUVYIE7.css';
+import { forwardRef, useId, useMemo, useRef, useCallback } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var Combobox = forwardRef(function Combobox2({
+  value,
+  onValueChange,
+  options,
+  renderList,
+  onCommit,
+  open,
+  onOpenChange,
+  label,
+  tabCommits = false,
+  commitOn = "mousedown",
+  mono = false,
+  emptyMessage,
+  id,
+  className,
+  containerClassName,
+  ...rest
+}, ref) {
+  const generatedId = useId();
+  const fieldId = id ?? generatedId;
+  const offered = useMemo(() => options ?? [], [options]);
+  const showing = open && (offered.length > 0 || renderList !== void 0 || emptyMessage !== void 0);
+  const lists = open && (offered.length > 0 || renderList !== void 0);
+  const box = useRef(null);
+  const commit = useCallback(
+    (index) => {
+      const option = offered[index];
+      if (!option || option.disabled) return;
+      if (onCommit) onCommit(option, index);
+      else onValueChange(option.value);
+      onOpenChange(false);
+    },
+    [offered, onCommit, onOpenChange, onValueChange]
+  );
+  const listbox = useListbox({
+    id: fieldId,
+    // A list that is showing with nothing in it still owns Escape: the reader
+    // can see it, so dismissing it is what Escape means there too.
+    open: showing,
+    count: offered.length,
+    onCommit: commit,
+    onClose: () => onOpenChange(false),
+    tabCommits
+  });
+  function onKeyDown(event) {
+    if (listbox.onKeyDown(event)) return;
+    if (!showing && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+      event.preventDefault();
+      onOpenChange(true);
+    }
+  }
+  const handlers = (index) => {
+    const { onMouseDown, onMouseEnter } = listbox.optionHandlers(index);
+    if (commitOn === "click") {
+      return {
+        onMouseEnter,
+        // The press is still swallowed, so the field keeps focus and the value
+        // being completed keeps its caret; only what TAKES the row moves.
+        onMouseDown: (event) => event.preventDefault(),
+        onClick: () => commit(index)
+      };
+    }
+    return { onMouseDown, onMouseEnter };
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-combobox", containerClassName), ref: listbox.anchorRef, children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        ...rest,
+        ref: (el) => {
+          box.current = el;
+          if (typeof ref === "function") ref(el);
+          else if (ref) ref.current = el;
+        },
+        id: fieldId,
+        className,
+        value,
+        role: "combobox",
+        "aria-autocomplete": "list",
+        "aria-expanded": lists,
+        "aria-controls": lists ? listbox.listId : void 0,
+        "aria-activedescendant": lists && offered.length > 0 ? listbox.optionId(listbox.active) : void 0,
+        autoComplete: "off",
+        spellCheck: false,
+        onChange: (event) => onValueChange(event.target.value),
+        onKeyDown
+      }
+    ),
+    showing ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: listbox.listRef,
+        className: cx("crewlet-combobox__panel", mono && "is-mono"),
+        role: lists ? "listbox" : void 0,
+        id: lists ? listbox.listId : void 0,
+        "aria-label": lists ? label : void 0,
+        children: renderList ? renderList({
+          listId: listbox.listId,
+          active: listbox.active,
+          optionId: listbox.optionId,
+          optionHandlers: handlers
+        }) : offered.length > 0 ? offered.map((option, index) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            id: listbox.optionId(index),
+            role: "option",
+            "aria-selected": index === listbox.active,
+            "aria-disabled": option.disabled || void 0,
+            className: cx(
+              "crewlet-listbox__option",
+              index === listbox.active && "is-highlight",
+              option.disabled && "is-disabled"
+            ),
+            ...option.disabled ? {} : handlers(index),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "crewlet-combobox__label", children: option.label ?? option.value }),
+              option.hint ? /* @__PURE__ */ jsx("span", { className: "crewlet-listbox__hint", children: option.hint }) : null
+            ]
+          },
+          option.value
+        )) : /* @__PURE__ */ jsx("div", { className: "crewlet-listbox__empty", children: emptyMessage })
+      }
+    ) : null
+  ] });
+});
+
+export { Combobox };