@crewlethq/ui 0.32.0 → 0.34.0

package/dist/chunk-RV7SZAHR.js

@@ -1,105 +0,0 @@
-import { SlideStage } from './chunk-E6CR5PEV.js';
-import { useReorder } from './chunk-XJ2QEBMM.js';
-import { VisuallyHidden } from './chunk-BZFWDIV6.js';
-import { cx } from './chunk-ODEQTPFM.js';
-import './SlideFilmstrip-BCLNAHFX.css';
-import { useRef } from 'react';
-import { EyeOffGlyph, GripVerticalGlyph } from '@crewlethq/icons/glyphs';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var LABELS = {
-  list: "Slides",
-  slide: (position, title) => `Slide ${position}, ${title}`,
-  hidden: "Hidden when presenting",
-  untitled: "Untitled"
-};
-function SlideFilmstrip({
-  slides,
-  selected,
-  onSelect,
-  renderSlide,
-  onReorder,
-  className,
-  labels
-}) {
-  const text = { ...LABELS, ...labels };
-  const ids = slides.map((s) => s.id);
-  const byId = new Map(slides.map((s) => [s.id, s]));
-  const titleOf = (id) => byId.get(id)?.title || text.untitled;
-  const reorder = useReorder({
-    keys: ids,
-    onReorder: (next) => onReorder?.(next),
-    nameOf: (id) => text.slide(ids.indexOf(id) + 1, titleOf(id)),
-    axis: "vertical"
-  });
-  const order = onReorder ? reorder.order : ids;
-  const options = useRef(/* @__PURE__ */ new Map());
-  const go = (id) => {
-    if (!id) return;
-    onSelect(id);
-    options.current.get(id)?.focus();
-  };
-  const onKeyDown = (event) => {
-    const at = order.indexOf(selected);
-    const to = {
-      ArrowDown: order[at + 1],
-      ArrowUp: order[at - 1],
-      Home: order[0],
-      End: order[order.length - 1]
-    }[event.key];
-    if (to === void 0) return;
-    event.preventDefault();
-    go(to);
-  };
-  return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-slide-filmstrip", className), children: [
-    onReorder ? /* @__PURE__ */ jsx(VisuallyHidden, { id: reorder.hintId, children: reorder.hint }) : null,
-    /* @__PURE__ */ jsx(
-      "ol",
-      {
-        className: "crewlet-slide-filmstrip__list",
-        "aria-label": text.list,
-        ...onReorder ? reorder.containerProps : {},
-        children: order.map((id, i) => {
-          const slide = byId.get(id);
-          const isSelected = id === selected;
-          return /* @__PURE__ */ jsxs(
-            "li",
-            {
-              className: "crewlet-slide-filmstrip__item",
-              "data-selected": isSelected ? "true" : void 0,
-              "data-hidden": slide?.hidden ? "true" : void 0,
-              ...onReorder ? reorder.itemProps(id) : {},
-              children: [
-                /* @__PURE__ */ jsx("span", { className: "crewlet-slide-filmstrip__number", "aria-hidden": "true", children: i + 1 }),
-                /* @__PURE__ */ jsxs(
-                  "button",
-                  {
-                    type: "button",
-                    ref: (node) => {
-                      if (node) options.current.set(id, node);
-                      else options.current.delete(id);
-                    },
-                    className: "crewlet-slide-filmstrip__thumb",
-                    "aria-current": isSelected ? "true" : void 0,
-                    "aria-label": text.slide(i + 1, titleOf(id)) + (slide?.hidden ? `, ${text.hidden}` : ""),
-                    tabIndex: isSelected ? 0 : -1,
-                    onClick: () => go(id),
-                    onKeyDown,
-                    children: [
-                      /* @__PURE__ */ jsx(SlideStage, { label: text.slide(i + 1, titleOf(id)), children: renderSlide(id) }),
-                      slide?.hidden ? /* @__PURE__ */ jsx("span", { className: "crewlet-slide-filmstrip__hidden", children: /* @__PURE__ */ jsx(EyeOffGlyph, { size: "sm" }) }) : null
-                    ]
-                  }
-                ),
-                onReorder ? /* @__PURE__ */ jsx("button", { type: "button", className: "crewlet-slide-filmstrip__handle", ...reorder.handleProps(id), children: /* @__PURE__ */ jsx(GripVerticalGlyph, { size: "sm" }) }) : null
-              ]
-            },
-            id
-          );
-        })
-      }
-    )
-  ] });
-}
-
-export { SlideFilmstrip };

package/dist/chunk-UZ7ZUSLH.js

@@ -1,179 +0,0 @@
-import { useReorder } from './chunk-XJ2QEBMM.js';
-import { Input } from './chunk-6QFAK2WV.js';
-import { Button } from './chunk-OG6CL3EB.js';
-import { IconButton } from './chunk-4FQT6ZAY.js';
-import { VisuallyHidden } from './chunk-BZFWDIV6.js';
-import { cx } from './chunk-ODEQTPFM.js';
-import './DocTabsEditor-RCOWHX5J.css';
-import { useState, useId } from 'react';
-import { GripVerticalGlyph, PencilGlyph, ChevronUpGlyph, ChevronDownGlyph, TrashGlyph, PlusGlyph } from '@crewlethq/icons/glyphs';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var DOC_TABS_EDITOR_LABELS = {
-  handle: (name) => `Move ${name}`,
-  hint: "Drag to move, or press the up or down arrow key.",
-  moved: (name, position, total) => `${name} moved to position ${position} of ${total}.`,
-  titleField: (position) => `Title of tab ${position}`,
-  editText: (title) => `Edit the text of ${title}`,
-  remove: (title) => `Remove ${title}`,
-  lastTab: "A doc keeps at least one tab.",
-  moveUp: (title) => `Move ${title} up`,
-  moveDown: (title) => `Move ${title} down`,
-  atTop: (title) => `${title} is first.`,
-  atBottom: (title) => `${title} is last.`,
-  newTitle: "New tab title",
-  add: "Add tab",
-  addNeedsTitle: "Give the new tab a title.",
-  untitled: "Untitled tab"
-};
-function DocTabsEditor({
-  label,
-  items,
-  selected,
-  onSelect,
-  onRename,
-  onReorder,
-  onRemove,
-  onAdd,
-  titleProblem,
-  addBlocked,
-  disabled = false,
-  labels: overrides,
-  className
-}) {
-  const labels = { ...DOC_TABS_EDITOR_LABELS, ...overrides };
-  const byKey = new Map(items.map((item) => [item.key, item]));
-  const nameOf = (key) => byKey.get(key)?.title.trim() || labels.untitled;
-  const reorder = useReorder({ keys: items.map((item) => item.key), onReorder, nameOf, labels });
-  const [title, setTitle] = useState("");
-  const id = useId();
-  const last = reorder.order.length - 1;
-  const add = () => {
-    if (title.trim() === "" || addBlocked || disabled) return;
-    onAdd(title.trim());
-    setTitle("");
-  };
-  return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-doc-tabs-editor", className), children: [
-    /* @__PURE__ */ jsx(VisuallyHidden, { id: reorder.hintId, children: reorder.hint }),
-    /* @__PURE__ */ jsx("ol", { className: "crewlet-doc-tabs-editor__list", "aria-label": label, ...reorder.containerProps, children: reorder.order.map((key, index) => {
-      const item = byKey.get(key);
-      if (!item) return null;
-      const name = nameOf(key);
-      const problem = titleProblem?.(item.title) ?? null;
-      const problemId = `${id}-${index}-problem`;
-      const open = key === selected;
-      const { "aria-label": handleName, ...handle } = reorder.handleProps(key);
-      return /* @__PURE__ */ jsxs("li", { className: cx("crewlet-doc-tabs-editor__item", open && "is-open"), ...reorder.itemProps(key), children: [
-        /* @__PURE__ */ jsx(
-          IconButton,
-          {
-            size: "sm",
-            variant: "ghost",
-            className: "crewlet-doc-tabs-editor__handle",
-            label: handleName,
-            icon: /* @__PURE__ */ jsx(GripVerticalGlyph, { size: "md" }),
-            disabled,
-            ...handle
-          }
-        ),
-        /* @__PURE__ */ jsxs("span", { className: "crewlet-doc-tabs-editor__field", children: [
-          /* @__PURE__ */ jsx(
-            Input,
-            {
-              inputSize: "sm",
-              value: item.title,
-              "aria-label": labels.titleField(index + 1),
-              error: problem !== null,
-              disabled,
-              ...problem !== null ? { "aria-describedby": problemId } : {},
-              onChange: (event) => onRename(key, event.target.value)
-            }
-          ),
-          problem !== null && /* @__PURE__ */ jsx("span", { id: problemId, className: "crewlet-doc-tabs-editor__problem", children: problem })
-        ] }),
-        /* @__PURE__ */ jsx(
-          IconButton,
-          {
-            size: "sm",
-            variant: open ? "secondary" : "ghost",
-            pressed: open,
-            label: labels.editText(name),
-            icon: /* @__PURE__ */ jsx(PencilGlyph, { size: "sm" }),
-            disabled,
-            onClick: () => onSelect(key)
-          }
-        ),
-        /* @__PURE__ */ jsxs("span", { className: "crewlet-doc-tabs-editor__moves", children: [
-          /* @__PURE__ */ jsx(
-            IconButton,
-            {
-              size: "sm",
-              variant: "ghost",
-              label: labels.moveUp(name),
-              icon: /* @__PURE__ */ jsx(ChevronUpGlyph, { size: "sm" }),
-              ...index === 0 ? { disabledReason: labels.atTop(name) } : {},
-              disabled,
-              onClick: () => reorder.move(key, -1)
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            IconButton,
-            {
-              size: "sm",
-              variant: "ghost",
-              label: labels.moveDown(name),
-              icon: /* @__PURE__ */ jsx(ChevronDownGlyph, { size: "sm" }),
-              ...index === last ? { disabledReason: labels.atBottom(name) } : {},
-              disabled,
-              onClick: () => reorder.move(key, 1)
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx(
-          IconButton,
-          {
-            size: "sm",
-            variant: "ghost",
-            label: labels.remove(name),
-            icon: /* @__PURE__ */ jsx(TrashGlyph, { size: "sm" }),
-            ...items.length <= 1 ? { disabledReason: labels.lastTab } : {},
-            disabled,
-            onClick: () => onRemove(key)
-          }
-        )
-      ] }, key);
-    }) }),
-    /* @__PURE__ */ jsxs("div", { className: "crewlet-doc-tabs-editor__add", children: [
-      /* @__PURE__ */ jsx(
-        Input,
-        {
-          inputSize: "sm",
-          value: title,
-          "aria-label": labels.newTitle,
-          placeholder: labels.newTitle,
-          disabled,
-          onChange: (event) => setTitle(event.target.value),
-          onKeyDown: (event) => {
-            if (event.key !== "Enter") return;
-            event.preventDefault();
-            add();
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          size: "small",
-          variant: "secondary",
-          leadingIcon: /* @__PURE__ */ jsx(PlusGlyph, { size: "sm" }),
-          disabled,
-          disabledReason: addBlocked ?? (title.trim() === "" ? labels.addNeedsTitle : void 0),
-          onClick: add,
-          children: labels.add
-        }
-      )
-    ] })
-  ] });
-}
-
-export { DOC_TABS_EDITOR_LABELS, DocTabsEditor };

package/dist/utils/useMediaMatch.d.ts

@@ -1,12 +0,0 @@
-/**
- * Whether a media query matches now, and again whenever that changes.
- *
- * ONE COPY FOR THE PACKAGE. The shell reads it to decide where its rail goes
- * and the switcher to decide whether it opens as a sheet; two copies of the
- * subscription would be two answers to "is this a phone" that can disagree for
- * a frame while a window is resized.
- *
- * On the server, and in a browser without `matchMedia`, the answer is `false`:
- * the wide layout is the one that needs no JavaScript to be usable.
- */
-export declare function useMediaMatch(query: string): boolean;