@crewlethq/ui 0.2.0 → 0.4.0

package/dist/chunk-OFHBK7RI.js

@@ -0,0 +1,498 @@
+import { useListbox, useOptionKeys } from './chunk-GTOUGQQK.js';
+import { useLayerContainer, viewportBounds, outsideBounds, placePopup, LAYER_GAP, LAYER_REPOSITION_EVENT } from './chunk-7RPGY3JE.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './Select-2X77FSWR.css';
+import { forwardRef, useId, useMemo, useState, useRef, useCallback, useEffect, useLayoutEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { KeyboardArrowDownGlyph, CheckGlyph, SearchGlyph } from '@crewlethq/icons/glyphs';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var same = (a, b) => String(a) === String(b);
+var optionText = (option) => option.text ?? (typeof option.label === "string" ? option.label : String(option.value));
+var Select = forwardRef(function Select2({
+  id,
+  mode = "listbox",
+  value,
+  onChange,
+  options,
+  placeholder = "Select an option",
+  disabled = false,
+  className = "",
+  menuClassName = "",
+  size = "md",
+  width = "full",
+  align = "left",
+  active = false,
+  error = false,
+  ariaLabel,
+  searchable = false,
+  searchPlaceholder = "Search",
+  multiple = false,
+  renderTrigger,
+  renderOption,
+  renderMultiLabel,
+  emptyMessage = "No matches",
+  ...native
+}, ref) {
+  const generatedId = useId();
+  const rootId = id ?? generatedId;
+  const classes = cx(className, width === "auto" && "crewlet-select--auto");
+  const chosen = useMemo(() => {
+    if (multiple) return Array.isArray(value) ? value : [];
+    if (value === void 0 || value === null) return [];
+    if (Array.isArray(value)) return value;
+    if (value === "" && !options.some((option) => String(option.value) === "")) return [];
+    return [value];
+  }, [value, multiple, options]);
+  if (mode === "native") {
+    return /* @__PURE__ */ jsx(
+      NativeSelect,
+      {
+        ref,
+        id: rootId,
+        value: chosen[0],
+        onChange,
+        options,
+        placeholder,
+        disabled,
+        className: classes,
+        size,
+        active,
+        error,
+        ariaLabel,
+        ...native
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    ListboxSelect,
+    {
+      ref,
+      id: rootId,
+      chosen,
+      onChange,
+      options,
+      placeholder,
+      disabled,
+      className: classes,
+      menuClassName,
+      size,
+      align,
+      active,
+      error,
+      ariaLabel,
+      searchable,
+      searchPlaceholder,
+      multiple,
+      renderTrigger,
+      renderOption,
+      renderMultiLabel,
+      emptyMessage,
+      describedBy: native["aria-describedby"],
+      required: native.required,
+      ariaRequired: native["aria-required"],
+      focusOnMount: native.autoFocus,
+      name: native.name,
+      onBlur: native.onBlur,
+      onFocus: native.onFocus
+    }
+  );
+});
+var NativeSelect = forwardRef(function NativeSelect2({ id, value, onChange, options, placeholder, disabled, className, size, active, error, ariaLabel, ...rest }, ref) {
+  const current = value ?? "";
+  const offersEmpty = options.some((option) => String(option.value) === "");
+  const known = options.some((option) => same(option.value, current));
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(
+        "crewlet-select",
+        "crewlet-select--native",
+        `crewlet-select--${size}`,
+        active && "is-active",
+        error && "is-error",
+        disabled && "is-disabled",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            ref,
+            id,
+            className: "crewlet-select__native",
+            value: current,
+            disabled,
+            "aria-label": ariaLabel,
+            "aria-invalid": error || void 0,
+            onChange: (event) => {
+              const next = event.target.value;
+              const option = options.find((candidate) => String(candidate.value) === next);
+              onChange?.(next, option ?? { value: next, label: next });
+            },
+            ...rest,
+            children: [
+              current === "" && !offersEmpty ? /* @__PURE__ */ jsx("option", { value: "", children: placeholder }) : null,
+              current !== "" && !known ? /* @__PURE__ */ jsx("option", { value: current, children: String(current) }) : null,
+              options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, disabled: option.disabled, children: optionText(option) }, String(option.value)))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(KeyboardArrowDownGlyph, { className: "crewlet-select__chevron", size: "sm" })
+      ]
+    }
+  );
+});
+var ListboxSelect = forwardRef(function ListboxSelect2({
+  id,
+  chosen,
+  onChange,
+  options,
+  placeholder,
+  disabled,
+  className,
+  menuClassName,
+  size,
+  align,
+  active,
+  error,
+  ariaLabel,
+  searchable,
+  searchPlaceholder,
+  multiple,
+  renderTrigger,
+  renderOption,
+  renderMultiLabel,
+  emptyMessage,
+  describedBy,
+  required,
+  ariaRequired,
+  focusOnMount,
+  name,
+  onBlur,
+  onFocus
+}, ref) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [place, setPlace] = useState(null);
+  const trigger = useRef(null);
+  const panel = useRef(null);
+  const list = useRef(null);
+  const search = useRef(null);
+  const container = useLayerContainer();
+  const isChosen = useCallback(
+    (candidate) => chosen.some((held) => same(held, candidate)),
+    [chosen]
+  );
+  const needle = query.trim().toLowerCase();
+  const offered = useMemo(() => {
+    if (!searchable || needle === "") return options;
+    return options.filter((option) => {
+      if (optionText(option).toLowerCase().includes(needle)) return true;
+      const description = typeof option.description === "string" ? option.description : "";
+      return description.toLowerCase().includes(needle);
+    });
+  }, [options, searchable, needle]);
+  const groups = useMemo(() => {
+    const out = [];
+    for (const option of offered) {
+      const group = out.find((candidate) => candidate.name === option.group);
+      if (group) group.items.push(option);
+      else out.push({ name: option.group, items: [option] });
+    }
+    return out;
+  }, [offered]);
+  const flat = useMemo(() => groups.flatMap((group) => group.items), [groups]);
+  const close = useCallback((returnFocus) => {
+    setOpen(false);
+    setQuery("");
+    if (returnFocus) trigger.current?.focus();
+  }, []);
+  const commit = useCallback(
+    (index2) => {
+      const option = flat[index2];
+      if (!option || option.disabled) return;
+      if (multiple) {
+        const next = isChosen(option.value) ? chosen.filter((held) => !same(held, option.value)) : [...chosen, option.value];
+        onChange?.(next, option);
+        return;
+      }
+      onChange?.(option.value, option);
+      close(true);
+    },
+    [chosen, close, flat, isChosen, multiple, onChange]
+  );
+  const listbox = useListbox({
+    id,
+    open,
+    count: flat.length,
+    onCommit: commit,
+    onClose: () => close(true),
+    // Tab is a form control's own key here: it leaves the field. The list
+    // closes with it rather than taking the highlighted row on the way out.
+    tabCommits: false
+  });
+  const keys = useOptionKeys({
+    listbox,
+    count: flat.length,
+    disabled: (index2) => flat[index2]?.disabled === true,
+    ...searchable ? {} : {
+      textOf: (index2) => {
+        const option = flat[index2];
+        return option ? optionText(option) : "";
+      }
+    }
+  });
+  useEffect(() => {
+    if (!open) return;
+    listbox.setActive(keys.opening(flat.findIndex((option) => isChosen(option.value))));
+  }, [open]);
+  useEffect(() => {
+    if (open && searchable) search.current?.focus();
+  }, [open, searchable]);
+  useEffect(() => {
+    if (focusOnMount) trigger.current?.focus();
+  }, [focusOnMount]);
+  useEffect(() => {
+    const box = list.current;
+    const row = box?.querySelector('[data-active="true"]');
+    if (!box || !row) return;
+    const bounds = box.getBoundingClientRect();
+    const spot = row.getBoundingClientRect();
+    if (spot.top < bounds.top) box.scrollTop -= bounds.top - spot.top;
+    else if (spot.bottom > bounds.bottom) box.scrollTop += spot.bottom - bounds.bottom;
+  }, [listbox.active, flat.length, open]);
+  const position = useCallback(() => {
+    const at = trigger.current;
+    const box = panel.current;
+    if (!at || !box || !container) return;
+    const inHost = container !== document.body;
+    const host = inHost ? container.getBoundingClientRect() : viewportBounds();
+    const rect = at.getBoundingClientRect();
+    const width = rect.width;
+    const local = {
+      x: (align === "right" ? rect.right - width : rect.left) - (inHost ? host.x : 0),
+      y: rect.top - (inHost ? host.y : 0),
+      width: rect.width,
+      height: rect.height
+    };
+    const whole = { x: 0, y: 0, width: host.width, height: host.height };
+    if (outsideBounds(local, whole)) {
+      close(false);
+      return;
+    }
+    const spot = placePopup(
+      local,
+      { width, height: box.getBoundingClientRect().height },
+      { x: LAYER_GAP, y: LAYER_GAP, width: host.width - 2 * LAYER_GAP, height: host.height - 2 * LAYER_GAP }
+    );
+    setPlace(
+      (was) => was && was.left === spot.left && was.top === spot.top && was.width === width ? was : { left: spot.left, top: spot.top, width }
+    );
+  }, [align, close, container]);
+  useLayoutEffect(() => {
+    if (!open) {
+      setPlace(null);
+      return;
+    }
+    position();
+    const onLayout = () => position();
+    container?.addEventListener(LAYER_REPOSITION_EVENT, onLayout);
+    window.addEventListener("resize", onLayout);
+    window.addEventListener("scroll", onLayout, true);
+    return () => {
+      container?.removeEventListener(LAYER_REPOSITION_EVENT, onLayout);
+      window.removeEventListener("resize", onLayout);
+      window.removeEventListener("scroll", onLayout, true);
+    };
+  }, [open, container, position]);
+  function onKeyDown(event) {
+    if (disabled) return;
+    if (!open) {
+      if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        setOpen(true);
+      }
+      return;
+    }
+    if (event.key === "Tab") {
+      close(searchable);
+      return;
+    }
+    if (keys.onKeyDown(event)) return;
+    listbox.onKeyDown(event);
+  }
+  const byValue = new Map(options.map((option) => [String(option.value), option]));
+  const selectedOptions = chosen.map(
+    (held) => byValue.get(String(held)) ?? { value: held, label: String(held) }
+  );
+  const single = selectedOptions[0] ?? null;
+  let label = placeholder;
+  let hasValue = selectedOptions.length > 0;
+  if (multiple && renderMultiLabel) {
+    label = renderMultiLabel(selectedOptions);
+  } else if (multiple && selectedOptions.length > 1) {
+    label = `${selectedOptions.length} selected`;
+  } else if (single) {
+    label = single.label;
+  } else {
+    hasValue = false;
+  }
+  const listId = listbox.listId;
+  const activeId = open && flat.length > 0 ? listbox.optionId(listbox.active) : void 0;
+  const comboOnTrigger = !searchable;
+  const requiredForAria = ariaRequired ?? required;
+  let index = -1;
+  const rows = groups.map((group, position2) => {
+    const items = group.items.map((option) => {
+      index += 1;
+      const at = index;
+      const selected = isChosen(option.value);
+      const highlighted = at === listbox.active;
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          id: listbox.optionId(at),
+          role: "option",
+          "aria-selected": selected,
+          "aria-disabled": option.disabled || void 0,
+          "data-active": highlighted || void 0,
+          className: cx(
+            "crewlet-listbox__option",
+            "crewlet-select__option",
+            selected && "is-selected",
+            highlighted && "is-highlight",
+            option.disabled && "is-disabled"
+          ),
+          ...option.disabled ? {} : listbox.optionHandlers(at),
+          children: renderOption ? renderOption(option, { active: highlighted, selected }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "crewlet-select__option-tick", "aria-hidden": "true", children: selected ? /* @__PURE__ */ jsx(CheckGlyph, { size: "sm" }) : null }),
+            /* @__PURE__ */ jsxs("span", { className: "crewlet-select__option-body", children: [
+              /* @__PURE__ */ jsx("span", { className: "crewlet-select__option-label", children: option.label }),
+              option.description ? /* @__PURE__ */ jsx("span", { className: "crewlet-select__option-desc", children: option.description }) : null
+            ] })
+          ] })
+        },
+        String(option.value)
+      );
+    });
+    if (group.name === void 0) return items;
+    const headingId = `${id}-group-${position2}`;
+    return /* @__PURE__ */ jsxs("div", { role: "group", "aria-labelledby": headingId, className: "crewlet-select__group", children: [
+      /* @__PURE__ */ jsx("div", { className: "crewlet-listbox__heading", id: headingId, role: "presentation", children: group.name }),
+      items
+    ] }, group.name);
+  });
+  const panelNode = open ? /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: (el) => {
+        panel.current = el;
+      },
+      className: cx(
+        "crewlet-select__menu",
+        `crewlet-select__menu--${size}`,
+        container !== null && container !== document.body ? "crewlet-select__menu--in-host" : "crewlet-select__menu--fixed",
+        menuClassName
+      ),
+      style: place ? { left: place.left, top: place.top, width: place.width } : (
+        // Laid out but not painted, so its own height can be measured
+        // before it is placed and no reader sees it in a corner first.
+        { visibility: "hidden" }
+      ),
+      role: "presentation",
+      onPointerDown: (event) => event.stopPropagation(),
+      children: [
+        searchable ? /* @__PURE__ */ jsxs("div", { className: "crewlet-select__search", children: [
+          /* @__PURE__ */ jsx(SearchGlyph, { size: "sm" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: search,
+              type: "text",
+              className: "crewlet-select__search-input",
+              role: "combobox",
+              "aria-autocomplete": "list",
+              "aria-expanded": true,
+              "aria-controls": listId,
+              "aria-activedescendant": activeId,
+              "aria-label": searchPlaceholder,
+              "aria-required": requiredForAria,
+              placeholder: searchPlaceholder,
+              value: query,
+              onChange: (event) => setQuery(event.target.value),
+              onKeyDown
+            }
+          )
+        ] }) : null,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: (el) => {
+              list.current = el;
+              listbox.listRef(el);
+            },
+            id: listId,
+            className: cx("crewlet-listbox", "crewlet-select__list"),
+            role: "listbox",
+            "aria-label": ariaLabel ?? placeholder,
+            "aria-multiselectable": multiple || void 0,
+            children: flat.length === 0 ? /* @__PURE__ */ jsx("div", { className: "crewlet-listbox__empty", children: emptyMessage }) : rows
+          }
+        )
+      ]
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(
+        "crewlet-select",
+        `crewlet-select--${size}`,
+        open && "is-open",
+        active && "is-active",
+        error && "is-error",
+        disabled && "is-disabled",
+        className
+      ),
+      ref: listbox.anchorRef,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: (el) => {
+              trigger.current = el;
+              if (typeof ref === "function") ref(el);
+              else if (ref) ref.current = el;
+            },
+            type: "button",
+            id,
+            name,
+            className: "crewlet-select__trigger",
+            role: comboOnTrigger ? "combobox" : void 0,
+            "aria-haspopup": "listbox",
+            "aria-expanded": open,
+            "aria-controls": open ? listId : void 0,
+            "aria-activedescendant": comboOnTrigger ? activeId : void 0,
+            "aria-label": ariaLabel,
+            "aria-describedby": describedBy,
+            "aria-invalid": error || void 0,
+            "aria-required": comboOnTrigger ? requiredForAria : void 0,
+            disabled,
+            onBlur,
+            onFocus,
+            onClick: () => open ? close(false) : setOpen(true),
+            onKeyDown,
+            children: [
+              renderTrigger ? renderTrigger(single, { open }) : /* @__PURE__ */ jsx("span", { className: cx("crewlet-select__label", !hasValue && "is-placeholder"), children: label }),
+              /* @__PURE__ */ jsx(KeyboardArrowDownGlyph, { className: "crewlet-select__chevron", size: "sm" })
+            ]
+          }
+        ),
+        panelNode && container ? createPortal(panelNode, container) : null
+      ]
+    }
+  );
+});
+
+export { Select };

package/dist/chunk-PNFASD6F.js

@@ -0,0 +1,98 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './Avatar-P2KRQM2B.css';
+import { useState, useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var AVATAR_SIZES = { xs: 20, sm: 26, md: 32, lg: 40 };
+var getInitials = (name) => {
+  if (!name) return "?";
+  const words = name.trim().split(/[\s\-_.]+/).filter(Boolean);
+  if (words.length === 0) return "?";
+  return words.slice(0, 2).map((word) => (Array.from(word)[0] ?? "").toUpperCase()).join("") || "?";
+};
+var TINT_COUNT = 10;
+var avatarTint = (seed) => {
+  let hash = 0;
+  for (let i = 0; i < seed.length; i += 1) {
+    hash = hash * 31 + seed.charCodeAt(i) >>> 0;
+  }
+  return hash % TINT_COUNT;
+};
+function avatarPixels(size) {
+  return typeof size === "number" ? size : AVATAR_SIZES[size];
+}
+function avatarSquareCorner(pixels) {
+  if (pixels < 23) return "var(--radius-xs)";
+  if (pixels < 36) return "var(--radius-md)";
+  return "var(--radius-lg)";
+}
+var Avatar = ({
+  src,
+  name,
+  size = "md",
+  shape = "square",
+  tone = "neutral",
+  variant = "solid",
+  decorative = false,
+  colorSeed,
+  className,
+  style,
+  ...rest
+}) => {
+  const [imageFailed, setImageFailed] = useState(false);
+  useEffect(() => {
+    setImageFailed(false);
+  }, [src]);
+  const step = typeof size === "number" ? null : size;
+  const pixels = avatarPixels(size);
+  const measured = step === null ? {
+    width: pixels,
+    height: pixels,
+    fontSize: Math.max(9, Math.round(pixels * 0.36)),
+    // And its corner, for the same reason: the stylesheet's square steps
+    // move the radius with the box, so an arbitrary box that took one
+    // fixed step would be squarer or rounder than every step beside it.
+    ...shape === "square" ? { borderRadius: avatarSquareCorner(pixels) } : {}
+  } : {};
+  const seeded = tone === "seeded" ? avatarTint(colorSeed ?? name ?? "") : null;
+  const classes = cx(
+    "crewlet-avatar",
+    `crewlet-avatar--${shape}`,
+    step === null ? null : `crewlet-avatar--${step}`,
+    className
+  );
+  if (src && !imageFailed) {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        ...rest,
+        className: cx(classes, "crewlet-avatar--image", variant === "dashed" && "crewlet-avatar--dashed"),
+        style: { ...measured, ...style },
+        src,
+        alt: decorative ? "" : name ?? "",
+        "aria-hidden": decorative ? true : void 0,
+        onError: () => setImageFailed(true)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...rest,
+      className: cx(
+        classes,
+        "crewlet-avatar--fallback",
+        `crewlet-avatar--${tone}`,
+        variant === "dashed" && "crewlet-avatar--dashed",
+        seeded === null ? null : `crewlet-avatar--tint-${seeded}`
+      ),
+      style: { ...measured, ...style },
+      role: decorative ? void 0 : "img",
+      "aria-hidden": decorative ? true : void 0,
+      "aria-label": decorative ? void 0 : name ? `${name} avatar` : "Avatar",
+      children: getInitials(name)
+    }
+  );
+};
+
+export { AVATAR_SIZES, Avatar, avatarPixels, avatarSquareCorner, avatarTint, getInitials };

package/dist/chunk-PQADV6P6.js

@@ -0,0 +1,19 @@
+import { createContext, useContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/utils/headingLevel.tsx
+var HeadingLevelContext = createContext(2);
+function HeadingLevelProvider({ level, children }) {
+  return /* @__PURE__ */ jsx(HeadingLevelContext.Provider, { value: level, children });
+}
+function useHeadingLevel() {
+  return useContext(HeadingLevelContext);
+}
+function nextHeadingLevel(level) {
+  return level < 6 ? level + 1 : 6;
+}
+function headingTag(level) {
+  return `h${level}`;
+}
+
+export { HeadingLevelProvider, headingTag, nextHeadingLevel, useHeadingLevel };

package/dist/chunk-PZSWF74H.js

@@ -0,0 +1,15 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './StatusDot-HA2L2FSX.css';
+import { jsx } from 'react/jsx-runtime';
+
+function StatusDot({ tone = "neutral", pulse = false, className }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      className: cx("crewlet-status-dot", `crewlet-status-dot--${tone}`, pulse && "is-pulsing", className)
+    }
+  );
+}
+
+export { StatusDot };

package/dist/chunk-Q4ZPPART.js

@@ -0,0 +1,26 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './SearchTrigger-QXOYAUUY.css';
+import { forwardRef } from 'react';
+import { SearchGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var SearchTrigger = forwardRef(function SearchTrigger2({ label = "Search", shortcut, keyshortcuts, icon, className, type = "button", ...rest }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ...rest,
+      ref,
+      type,
+      className: cx("crewlet-search-trigger", className),
+      "aria-label": label,
+      "aria-keyshortcuts": keyshortcuts,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "crewlet-search-trigger__icon", children: icon ?? /* @__PURE__ */ jsx(SearchGlyph, { size: "sm" }) }),
+        /* @__PURE__ */ jsx("span", { className: "crewlet-search-trigger__label", children: label }),
+        shortcut ? /* @__PURE__ */ jsx("span", { className: "crewlet-search-trigger__shortcut", children: shortcut }) : null
+      ]
+    }
+  );
+});
+
+export { SearchTrigger };