@crewlethq/ui 0.45.0 → 0.46.0

package/dist/chunk-NMYGJJJK.js

@@ -1,263 +0,0 @@
-import { FormField, Textarea, Input } from './chunk-ZI5G5RS7.js';
-import { Kbd } from './chunk-SMBKXWML.js';
-import { announce } from './chunk-RSAQOKH3.js';
-import { isComposing } from './chunk-H5XTJ7GJ.js';
-import { IconButton } from './chunk-LACA4JGC.js';
-import './ListInput-O7LJKOIG.css';
-import { useState, useRef, useLayoutEffect } from 'react';
-import { ArrowUpGlyph, ArrowDownGlyph, XGlyph, PlusGlyph } from '@crewlethq/icons/glyphs';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var minted = 0;
-var mint = () => `item-${minted += 1}`;
-var capitalized = (text) => text.charAt(0).toLocaleUpperCase() + text.slice(1);
-function ListInput({
-  label,
-  itemName,
-  value,
-  onChange,
-  multiline = false,
-  helper,
-  helperOnFocus,
-  error,
-  placeholder,
-  disabled = false,
-  optional,
-  enterHint = true,
-  focusOnMount = false,
-  addLabel = (name) => `Add ${name}`,
-  itemLabel = (name, position) => `${name} ${position}`,
-  newItemLabel = (name) => `New ${name}`,
-  moveUpLabel = (name, position) => `Move ${name} ${position} up`,
-  moveDownLabel = (name, position) => `Move ${name} ${position} down`,
-  removeLabel = (name, position) => `Remove ${name} ${position}`,
-  addedMessage = (name, position) => `Added ${name} ${position}`,
-  removedMessage = (name, position) => `Removed ${name} ${position}`,
-  movedMessage = (name, position, count) => `Moved ${name} to position ${position} of ${count}`
-}) {
-  const [draft, setDraft] = useState("");
-  const ids = useRef([]);
-  const emitted = useRef(null);
-  if (value !== emitted.current && value.length !== ids.current.length) {
-    ids.current = value.map(mint);
-  }
-  const inputs = useRef(/* @__PURE__ */ new Map());
-  const ups = useRef(/* @__PURE__ */ new Map());
-  const downs = useRef(/* @__PURE__ */ new Map());
-  const addBox = useRef(null);
-  const focusNext = useRef(null);
-  const focusAtMount = useRef(focusOnMount);
-  useLayoutEffect(() => {
-    if (focusAtMount.current) addBox.current?.focus();
-  }, []);
-  useLayoutEffect(() => {
-    const want = focusNext.current;
-    if (!want) return;
-    focusNext.current = null;
-    if (want.target === "add") {
-      addBox.current?.focus();
-      return;
-    }
-    const up = ups.current.get(want.id);
-    const down = downs.current.get(want.id);
-    const box = inputs.current.get(want.id);
-    const order = want.target === "up" ? [up, down, box] : want.target === "down" ? [down, up, box] : [box];
-    order.find((el) => el && !el.disabled)?.focus();
-  });
-  function emit(next, nextIds, said) {
-    ids.current = nextIds;
-    emitted.current = next;
-    onChange(next);
-    if (said) announce(said);
-  }
-  const name = capitalized(itemName);
-  const count = value.length;
-  function add() {
-    const text = draft.trim();
-    if (!text || disabled) return;
-    emit(
-      [...value, text],
-      [...ids.current, mint()],
-      addedMessage(itemName, `${count + 1} of ${count + 1}`)
-    );
-    setDraft("");
-    focusNext.current = { id: "", target: "add" };
-  }
-  function move(index, by, target) {
-    const to = index + by;
-    if (disabled || to < 0 || to >= count) return;
-    const next = [...value];
-    const nextIds = [...ids.current];
-    [next[index], next[to]] = [next[to], next[index]];
-    [nextIds[index], nextIds[to]] = [nextIds[to], nextIds[index]];
-    focusNext.current = { id: nextIds[to], target };
-    emit(next, nextIds, movedMessage(itemName, to + 1, count));
-  }
-  function remove(index) {
-    if (disabled) return;
-    const next = value.filter((_, at) => at !== index);
-    const nextIds = ids.current.filter((_, at) => at !== index);
-    const neighbour = nextIds[index] ?? nextIds[index - 1];
-    focusNext.current = neighbour ? { id: neighbour, target: "input" } : { id: "", target: "add" };
-    emit(next, nextIds, removedMessage(itemName, `${index + 1} of ${count}`));
-  }
-  const acts = (event) => event.key === "Enter" && !(multiline && event.shiftKey) && !isComposing(event);
-  function itemKeys(event, index) {
-    if (isComposing(event)) return;
-    if (event.altKey && (event.key === "ArrowUp" || event.key === "ArrowDown")) {
-      event.preventDefault();
-      move(index, event.key === "ArrowUp" ? -1 : 1, "input");
-      return;
-    }
-    if (!acts(event)) return;
-    event.preventDefault();
-    const next = ids.current[index + 1];
-    if (next) inputs.current.get(next)?.focus();
-    else addBox.current?.focus();
-  }
-  const control = (props) => (
-    /*
-     * ONE LINE THAT GROWS, never a fixed block of rows. A list of sentences
-     * read as a list wants each item on its own line; a two-row textarea per
-     * item made three of them 256px where the console draws 111, and the
-     * second row was empty in every one of them. `autoResize` starts at one
-     * line and takes as many as the sentence needs.
-     */
-    multiline ? /* @__PURE__ */ jsx(
-      Textarea,
-      {
-        rows: 1,
-        autoResize: true,
-        "aria-label": props.label,
-        value: props.value,
-        placeholder: props.placeholder,
-        disabled,
-        spellCheck: true,
-        trailing: props.trailing,
-        onChange: (event) => props.onChange(event.target.value),
-        onKeyDown: props.onKeyDown,
-        ref: props.ref
-      }
-    ) : /* @__PURE__ */ jsx(
-      Input,
-      {
-        "aria-label": props.label,
-        value: props.value,
-        placeholder: props.placeholder,
-        disabled,
-        autoComplete: "off",
-        spellCheck: true,
-        trailing: props.trailing,
-        onChange: (event) => props.onChange(event.target.value),
-        onKeyDown: props.onKeyDown,
-        ref: props.ref
-      }
-    )
-  );
-  return /* @__PURE__ */ jsxs(
-    FormField,
-    {
-      as: "fieldset",
-      label,
-      optional,
-      helper,
-      helperOnFocus,
-      error,
-      className: "crewlet-list-input",
-      labelAction: /* @__PURE__ */ jsx(
-        IconButton,
-        {
-          size: "sm",
-          variant: "soft-brand",
-          label: addLabel(itemName),
-          icon: /* @__PURE__ */ jsx(PlusGlyph, {}),
-          disabled: disabled || draft.trim() === "",
-          onClick: add
-        }
-      ),
-      children: [
-        /* @__PURE__ */ jsx("div", { className: "crewlet-list-input__add", children: control({
-          label: newItemLabel(itemName),
-          value: draft,
-          placeholder,
-          trailing: enterHint ? /* @__PURE__ */ jsx(Kbd, { subtle: true, children: "Enter" }) : void 0,
-          onChange: setDraft,
-          onKeyDown: (event) => {
-            if (!acts(event)) return;
-            event.preventDefault();
-            add();
-          },
-          ref: (el) => {
-            addBox.current = el;
-          }
-        }) }),
-        count > 0 ? /* @__PURE__ */ jsx("ol", { className: "crewlet-list-input__items", children: value.map((item, index) => {
-          const key = ids.current[index];
-          const position = `${index + 1} of ${count}`;
-          return /* @__PURE__ */ jsxs("li", { className: "crewlet-list-input__item", children: [
-            /* @__PURE__ */ jsx("span", { className: "crewlet-list-input__index", "aria-hidden": "true", children: index + 1 }),
-            control({
-              label: itemLabel(name, position),
-              value: item,
-              onChange: (next) => {
-                const list = [...value];
-                list[index] = next;
-                emit(list, ids.current);
-              },
-              onKeyDown: (event) => itemKeys(event, index),
-              ref: (el) => {
-                if (el) inputs.current.set(key, el);
-                else inputs.current.delete(key);
-              }
-            }),
-            /* @__PURE__ */ jsxs("span", { className: "crewlet-list-input__actions", children: [
-              /* @__PURE__ */ jsxs("span", { className: "crewlet-list-input__move", children: [
-                /* @__PURE__ */ jsx(
-                  IconButton,
-                  {
-                    size: "sm",
-                    label: moveUpLabel(itemName, position),
-                    icon: /* @__PURE__ */ jsx(ArrowUpGlyph, {}),
-                    disabled: disabled || index === 0,
-                    onClick: () => move(index, -1, "up"),
-                    ref: (el) => {
-                      if (el) ups.current.set(key, el);
-                      else ups.current.delete(key);
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  IconButton,
-                  {
-                    size: "sm",
-                    label: moveDownLabel(itemName, position),
-                    icon: /* @__PURE__ */ jsx(ArrowDownGlyph, {}),
-                    disabled: disabled || index === count - 1,
-                    onClick: () => move(index, 1, "down"),
-                    ref: (el) => {
-                      if (el) downs.current.set(key, el);
-                      else downs.current.delete(key);
-                    }
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsx(
-                IconButton,
-                {
-                  size: "sm",
-                  variant: "ghost-danger",
-                  label: removeLabel(itemName, position),
-                  icon: /* @__PURE__ */ jsx(XGlyph, {}),
-                  disabled,
-                  onClick: () => remove(index)
-                }
-              )
-            ] })
-          ] }, key);
-        }) }) : null
-      ]
-    }
-  );
-}
-
-export { ListInput };

package/dist/{chunk-OED6LUWE.js → chunk-4A4QG6UC.js}

@@ -1,6 +1,6 @@
 import { Callout } from './chunk-SZZRIHGT.js';
-import { isComposing } from './chunk-H5XTJ7GJ.js';
 import { Button } from './chunk-OG6CL3EB.js';
+import { isComposing } from './chunk-H5XTJ7GJ.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import { useEffect } from 'react';
 import { EyeGlyph, UserGlyph } from '@crewlethq/icons/glyphs';

package/dist/{chunk-FYINAYAJ.js → chunk-6AKG2VLR.js}

@@ -1,7 +1,7 @@
 import { HeadingLevelProvider } from './chunk-PQADV6P6.js';
 import { useLayerContainer } from './chunk-OMV5W53A.js';
-import { focusables, useModalLayer, useBodyScrollLock } from './chunk-H5XTJ7GJ.js';
 import { Button } from './chunk-OG6CL3EB.js';
+import { focusables, useModalLayer, useBodyScrollLock } from './chunk-H5XTJ7GJ.js';
 import { IconButton } from './chunk-LACA4JGC.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Modal-TOEWHDCQ.css';

package/dist/{chunk-E6HXFFWO.js → chunk-ISDEXIXH.js}

@@ -1,5 +1,5 @@
-import { SlideNav } from './chunk-RRO7UEYU.js';
 import { SlideStage, SLIDE_WIDTH, SLIDE_HEIGHT } from './chunk-RMEBFYL7.js';
+import { SlideNav } from './chunk-RRO7UEYU.js';
 import { Eyebrow } from './chunk-RK4XPHVG.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-PCI7ZJ6Z.js → chunk-TMM32U7D.js}

@@ -1,6 +1,6 @@
 import { useLayerContainer, viewportBounds, LAYER_GAP, anchorGone, placePopup, LAYER_REPOSITION_EVENT } from './chunk-OMV5W53A.js';
-import { usePopupLayer } from './chunk-H5XTJ7GJ.js';
 import { Button } from './chunk-OG6CL3EB.js';
+import { usePopupLayer } from './chunk-H5XTJ7GJ.js';
 import { IconButton } from './chunk-LACA4JGC.js';
 import { returnFocus } from './chunk-NUZHC6MM.js';
 import { cx } from './chunk-ODEQTPFM.js';