@crewlethq/ui 0.2.0 → 0.4.0

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 };

package/dist/chunk-V2XMNLMS.js

@@ -0,0 +1,52 @@
+import { useAnnouncer } from './chunk-RSAQOKH3.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './TagGroup-APC2EFH4.css';
+import { useState, useRef, Children } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function TagGroup({
+  label,
+  max = 6,
+  moreLabel = (hidden) => `+${hidden} more`,
+  expandedMessage = (total) => `Showing all ${total}.`,
+  className,
+  children
+}) {
+  const [open, setOpen] = useState(false);
+  const announce = useAnnouncer();
+  const list = useRef(null);
+  const all = Children.toArray(children);
+  const shown = open ? all : all.slice(0, max);
+  const hidden = all.length - shown.length;
+  return /* @__PURE__ */ jsxs(
+    "ul",
+    {
+      ref: list,
+      tabIndex: -1,
+      className: cx("crewlet-tag-group", className),
+      "aria-label": `${label}, ${all.length}`,
+      children: [
+        shown.map((tag, index) => (
+          // Keyed by position: the list only ever grows at the end, as the tail
+          // is revealed, so no item ever changes the index it sits at.
+          /* @__PURE__ */ jsx("li", { className: "crewlet-tag-group__item", children: tag }, index)
+        )),
+        hidden > 0 ? /* @__PURE__ */ jsx("li", { className: "crewlet-tag-group__item", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "crewlet-tag-group__more",
+            onClick: () => {
+              setOpen(true);
+              list.current?.focus();
+              announce(expandedMessage(all.length));
+            },
+            children: moreLabel(hidden)
+          }
+        ) }) : null
+      ]
+    }
+  );
+}
+
+export { TagGroup };

package/dist/chunk-W4ENKCXJ.js

@@ -0,0 +1,40 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './Layout-2ZCV3IGF.css';
+import { jsx } from 'react/jsx-runtime';
+
+function gapClass(gap) {
+  return gap !== void 0 && `crewlet-layout--gap-${gap}`;
+}
+function flexClasses(base, { gap, align, justify, wrap }, className) {
+  return cx(
+    base,
+    gapClass(gap),
+    align && `crewlet-layout--align-${align}`,
+    justify && `crewlet-layout--justify-${justify}`,
+    wrap && "crewlet-layout--wrap",
+    className
+  );
+}
+function Stack({ gap, align, justify, wrap, as: Tag = "div", className, children, ...rest }) {
+  return /* @__PURE__ */ jsx(Tag, { ...rest, className: flexClasses("crewlet-stack", { gap, align, justify, wrap }, className), children });
+}
+function Inline({
+  gap,
+  align = "center",
+  justify,
+  wrap,
+  as: Tag = "div",
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(Tag, { ...rest, className: flexClasses("crewlet-inline", { gap, align, justify, wrap }, className), children });
+}
+function Spacer({ className, ...rest }) {
+  return /* @__PURE__ */ jsx("span", { ...rest, "aria-hidden": true, className: cx("crewlet-spacer", className) });
+}
+function AutoGrid({ min = "md", gap = 4, className, children, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { ...rest, className: cx("crewlet-auto-grid", `crewlet-auto-grid--${min}`, gapClass(gap), className), children });
+}
+
+export { AutoGrid, Inline, Spacer, Stack };

package/dist/chunk-W5J7R5EB.js

@@ -0,0 +1,107 @@
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './Skeleton-V735HRGM.css';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var range = (n) => Array.from({ length: Math.max(0, n) }, (_, i) => i);
+var clampColumns = (n) => Math.min(4, Math.max(1, Math.round(n)));
+var line = (...modifiers) => cx("crewlet-skeleton__line", ...modifiers.map((modifier) => `crewlet-skeleton__line--${modifier}`));
+var Placeholder = ({
+  variant = "card",
+  rows = 1,
+  rowHeight,
+  columns = 1,
+  count = 4,
+  className = "",
+  style,
+  width = "100%",
+  height = 400,
+  borderRadius = 12,
+  marginTop = 32,
+  marginBottom = 0
+}) => {
+  const rootClass = (...modifiers) => cx("crewlet-skeleton", `crewlet-skeleton--${variant}`, ...modifiers, className);
+  switch (variant) {
+    case "box":
+      return /* @__PURE__ */ jsx("div", { className: rootClass(), style: { marginTop, marginBottom, ...style }, "aria-hidden": true, children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "crewlet-skeleton__glow-box",
+          style: {
+            height: typeof height === "number" ? `${height}px` : height,
+            width: typeof width === "number" ? `${width}px` : width,
+            borderRadius: `${borderRadius}px`
+          },
+          children: /* @__PURE__ */ jsx("div", { className: "crewlet-skeleton__glow-wave" })
+        }
+      ) });
+    case "text":
+      return /* @__PURE__ */ jsx("div", { className: rootClass(), style, "aria-hidden": true, children: range(rows).map((i) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: line(i === 0 ? "title" : "text", ...i === rows - 1 ? ["short"] : []),
+          style: rowHeight === void 0 ? void 0 : { height: rowHeight }
+        },
+        i
+      )) });
+    case "card":
+      return /* @__PURE__ */ jsxs("div", { className: rootClass(), style, "aria-hidden": true, children: [
+        /* @__PURE__ */ jsx("div", { className: line("title") }),
+        /* @__PURE__ */ jsx("div", { className: line("text") }),
+        /* @__PURE__ */ jsx("div", { className: line("text", "short") })
+      ] });
+    case "grid": {
+      const cols = clampColumns(columns);
+      return /* @__PURE__ */ jsx("div", { className: rootClass(`crewlet-skeleton--cols-${cols}`), style, "aria-hidden": true, children: range(rows * cols).map((i) => /* @__PURE__ */ jsxs("div", { className: "crewlet-skeleton__card", children: [
+        /* @__PURE__ */ jsx("div", { className: line("title") }),
+        /* @__PURE__ */ jsx("div", { className: line("text") }),
+        /* @__PURE__ */ jsx("div", { className: line("text", "short") })
+      ] }, i)) });
+    }
+    case "list":
+      return /* @__PURE__ */ jsx("div", { className: rootClass(), style, "aria-hidden": true, children: range(rows).map((i) => /* @__PURE__ */ jsxs("div", { className: "crewlet-skeleton__list-item", children: [
+        /* @__PURE__ */ jsx("div", { className: "crewlet-skeleton__avatar" }),
+        /* @__PURE__ */ jsxs("div", { className: "crewlet-skeleton__list-content", children: [
+          /* @__PURE__ */ jsx("div", { className: line("title") }),
+          /* @__PURE__ */ jsx("div", { className: line("text", "short") })
+        ] })
+      ] }, i)) });
+    case "table":
+      return /* @__PURE__ */ jsx("div", { className: rootClass(), style, "aria-hidden": true, children: /* @__PURE__ */ jsxs("table", { className: "crewlet-skeleton__table", children: [
+        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: range(columns).map((i) => /* @__PURE__ */ jsx("th", { className: "crewlet-skeleton__th", children: /* @__PURE__ */ jsx("div", { className: line("title") }) }, i)) }) }),
+        /* @__PURE__ */ jsx("tbody", { children: range(rows).map((rowIndex) => /* @__PURE__ */ jsx("tr", { className: "crewlet-skeleton__tr", children: range(columns).map((colIndex) => /* @__PURE__ */ jsx("td", { className: "crewlet-skeleton__td", children: /* @__PURE__ */ jsx("div", { className: line("text") }) }, colIndex)) }, rowIndex)) })
+      ] }) });
+    case "info-grid": {
+      const cols = clampColumns(columns);
+      return /* @__PURE__ */ jsx("div", { className: rootClass(`crewlet-skeleton--cols-${cols}`), style, "aria-hidden": true, children: range(rows * cols).map((i) => /* @__PURE__ */ jsxs("div", { className: "crewlet-skeleton__info-item", children: [
+        /* @__PURE__ */ jsx("div", { className: line("label") }),
+        /* @__PURE__ */ jsx("div", { className: line("value") })
+      ] }, i)) });
+    }
+    case "pricing-card":
+      return /* @__PURE__ */ jsx("div", { className: rootClass(), style, "aria-hidden": true, children: range(count).map((i) => /* @__PURE__ */ jsxs("div", { className: "crewlet-skeleton__pricing-card", children: [
+        /* @__PURE__ */ jsxs("div", { className: "crewlet-skeleton__pricing-card-header", children: [
+          /* @__PURE__ */ jsx("div", { className: "crewlet-skeleton__circle" }),
+          /* @__PURE__ */ jsx("div", { className: line("heading") })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "crewlet-skeleton__pricing-card-description", children: [
+          /* @__PURE__ */ jsx("div", { className: line("text") }),
+          /* @__PURE__ */ jsx("div", { className: line("text", "wide") }),
+          /* @__PURE__ */ jsx("div", { className: line("text", "three-quarter") })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "crewlet-skeleton__pricing-card-features", children: range(5).map((f) => /* @__PURE__ */ jsxs("div", { className: "crewlet-skeleton__pricing-card-feature", children: [
+          /* @__PURE__ */ jsx("div", { className: "crewlet-skeleton__circle crewlet-skeleton__circle--small" }),
+          /* @__PURE__ */ jsx("div", { className: line("feature") })
+        ] }, f)) }),
+        /* @__PURE__ */ jsx("div", { className: "crewlet-skeleton__button" })
+      ] }, i)) });
+    default:
+      return /* @__PURE__ */ jsx("div", { className: cx("crewlet-skeleton", className), style, "aria-hidden": true, children: /* @__PURE__ */ jsx("div", { className: "crewlet-skeleton__line" }) });
+  }
+};
+var Skeleton = ({ label, ...placeholder }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(Placeholder, { ...placeholder }),
+  label === void 0 ? null : /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("span", { role: "status", children: label }) })
+] });
+
+export { Skeleton };

package/dist/chunk-WNI2WSJF.js

@@ -0,0 +1,27 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './BrandLockup-6ISDEHPJ.css';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function BrandLockup({ name, mark, context, href, renderLink, className }) {
+  const inside = /* @__PURE__ */ jsxs(Fragment, { children: [
+    mark ? /* @__PURE__ */ jsx("span", { className: "crewlet-brand__mark", "aria-hidden": true, children: mark }) : null,
+    /* @__PURE__ */ jsx("span", { className: "crewlet-brand__name", children: name })
+  ] });
+  const linkProps = {
+    className: "crewlet-brand__home",
+    children: inside,
+    "aria-label": name,
+    ...href === void 0 ? {} : { href }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-brand", className), children: [
+    renderLink ? renderLink(linkProps) : href === void 0 ? (
+      // Not a link, because it goes nowhere. An anchor with no href is
+      // announced as text anyway, and one with href="#" navigates the page
+      // it is meant to be the way out of.
+      /* @__PURE__ */ jsx("span", { className: "crewlet-brand__home", children: inside })
+    ) : /* @__PURE__ */ jsx("a", { className: "crewlet-brand__home", href, "aria-label": name, children: inside }),
+    context ? /* @__PURE__ */ jsx("span", { className: "crewlet-brand__context", children: context }) : null
+  ] });
+}
+
+export { BrandLockup };