@crewlethq/ui 0.45.0 → 0.47.0

package/dist/{chunk-QOP7QYUW.js → chunk-34RMTXDZ.js}

@@ -1,5 +1,5 @@
 import { NODE_HUES, NODE_HUE_NAMES } from './chunk-AYKXMIOR.js';
-import { SegmentedControl } from './chunk-BF5WV7NM.js';
+import { SegmentedControl } from './chunk-6FVGSWLS.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-Q7HLZH32.js → chunk-3QSKDZR5.js}

@@ -1,4 +1,4 @@
-import { HuePicker } from './chunk-QOP7QYUW.js';
+import { HuePicker } from './chunk-34RMTXDZ.js';
 import { Popover } from './chunk-KHJIEPZV.js';
 import { NODE_HUE_NAMES } from './chunk-AYKXMIOR.js';
 import { CharacterPicker } from './chunk-SNQRGH4A.js';

package/dist/{chunk-BVFMLSE3.js → chunk-5EBDOE3C.js}

@@ -1,6 +1,6 @@
 import { Select } from './chunk-XQZ6EWOE.js';
 import { CopyButton } from './chunk-7SHAFLEX.js';
-import { Modal } from './chunk-FYINAYAJ.js';
+import { Modal } from './chunk-6AKG2VLR.js';
 import { Callout } from './chunk-SZZRIHGT.js';
 import { PrincipalAvatar } from './chunk-CI3VPIJN.js';
 import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';

package/dist/{chunk-W53CWWX3.js → chunk-627KFRON.js}

@@ -1,6 +1,6 @@
 import { useReorder } from './chunk-XJ2QEBMM.js';
-import { Input } from './chunk-ZI5G5RS7.js';
-import { Menu } from './chunk-PCI7ZJ6Z.js';
+import { Input } from './chunk-EXRRTKWT.js';
+import { Menu } from './chunk-TMM32U7D.js';
 import { IconButton } from './chunk-LACA4JGC.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-AGNZIT3Z.js → chunk-6EBGPCAW.js}

@@ -1,7 +1,7 @@
 import { PrincipalAvatar } from './chunk-CI3VPIJN.js';
 import { toInstant, RelativeTime, formatExact, toISO } from './chunk-3CZ7XAVY.js';
 import { Document } from './chunk-PWG3VHRQ.js';
-import { Composer } from './chunk-7CXGSS7D.js';
+import { Composer } from './chunk-6R5BSA36.js';
 import { Count } from './chunk-BHHIIK3M.js';
 import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
 import { Button } from './chunk-OG6CL3EB.js';

package/dist/{chunk-BF5WV7NM.js → chunk-6FVGSWLS.js}

@@ -1,4 +1,4 @@
-import { tabId } from './chunk-KA75QPFM.js';
+import { tabId } from './chunk-ILFEWRLG.js';
 import { useRoving, tabStop } from './chunk-EGMQURBR.js';
 import { Count } from './chunk-BHHIIK3M.js';
 import { HIT_AREA_CLASS } from './chunk-2YTOOH3A.js';

package/dist/{chunk-7CXGSS7D.js → chunk-6R5BSA36.js}

@@ -1,4 +1,4 @@
-import { Textarea } from './chunk-ZI5G5RS7.js';
+import { Textarea } from './chunk-EXRRTKWT.js';
 import { Kbd } from './chunk-SMBKXWML.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Composer-TXULCPPV.css';

package/dist/{chunk-NF6SWHQI.js → chunk-7JED2NYP.js}

@@ -1,9 +1,9 @@
-import { Modal } from './chunk-FYINAYAJ.js';
+import { Modal } from './chunk-6AKG2VLR.js';
 import { useListbox, useOptionKeys } from './chunk-7KHM2FZH.js';
 import { Popover } from './chunk-KHJIEPZV.js';
 import { KeyChip, highlightMatch } from './chunk-FYTIJM2T.js';
 import { Skeleton } from './chunk-TEUQWOWZ.js';
-import { Input } from './chunk-ZI5G5RS7.js';
+import { Input } from './chunk-EXRRTKWT.js';
 import { announce } from './chunk-RSAQOKH3.js';
 import { useMediaMatch } from './chunk-RTPQDNW3.js';
 import { focusables, isComposing } from './chunk-H5XTJ7GJ.js';

package/dist/chunk-7P336RA5.js

@@ -0,0 +1,147 @@
+import { EditingStatus } from './chunk-MULOZYHL.js';
+import { Kbd } from './chunk-SMBKXWML.js';
+import { Button } from './chunk-OG6CL3EB.js';
+import { isComposing } from './chunk-H5XTJ7GJ.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './InlineEditor-W55DDKML.css';
+import { useRef, useLayoutEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var INLINE_EDITOR_LABELS = {
+  save: "Save",
+  cancel: "Cancel",
+  unchanged: "Nothing has changed yet.",
+  invalid: "Fix the highlighted field first.",
+  saving: "Saving. Wait for it to finish.",
+  shortcut: "to save"
+};
+function firstField(root) {
+  return root.querySelector(
+    'textarea:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), [contenteditable="true"]'
+  );
+}
+function InlineEditor({
+  label,
+  children,
+  onSave,
+  onCancel,
+  dirty,
+  saving = false,
+  invalid = false,
+  error,
+  notice,
+  focusOnMount = true,
+  shortcutHint = true,
+  secondaryActions,
+  labels: overrides,
+  className,
+  onKeyDown,
+  ...rest
+}) {
+  const labels = { ...INLINE_EDITOR_LABELS, ...overrides };
+  const form = useRef(null);
+  const focusAtMount = useRef(focusOnMount);
+  useLayoutEffect(() => {
+    if (!focusAtMount.current || !form.current) return;
+    const field = firstField(form.current);
+    if (!field) return;
+    field.focus();
+    if (field instanceof HTMLTextAreaElement || field instanceof HTMLInputElement) {
+      const end = field.value.length;
+      try {
+        field.setSelectionRange(end, end);
+      } catch {
+      }
+    }
+  }, []);
+  const blocked = saving ? labels.saving : invalid ? labels.invalid : !dirty ? labels.unchanged : null;
+  const save = () => {
+    if (blocked === null) onSave();
+  };
+  const submit = (event) => {
+    event.preventDefault();
+    save();
+  };
+  const keys = (event) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented || isComposing(event)) return;
+    if (event.key === "Escape") {
+      event.preventDefault();
+      if (!saving) onCancel();
+      return;
+    }
+    if (event.key !== "Enter") return;
+    if ((event.metaKey || event.ctrlKey) && !event.altKey) {
+      event.preventDefault();
+      save();
+      return;
+    }
+    if (event.target instanceof HTMLInputElement) event.preventDefault();
+  };
+  return (
+    /*
+     * THE FORM LISTENS FOR ITS TWO KEYS, as React's own handler rather than a
+     * native one, because React's runs after every handler inside it: that is
+     * what lets an open menu's Escape close the menu and stop there. A
+     * native listener on the form would hear the key first, before anything
+     * inside had the chance to claim it.
+     */
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- see above
+    /* @__PURE__ */ jsxs(
+      "form",
+      {
+        ...rest,
+        ref: form,
+        "aria-label": label,
+        "aria-busy": saving || void 0,
+        noValidate: true,
+        className: cx("crewlet-inline-editor", className),
+        onSubmit: submit,
+        onKeyDown: keys,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "crewlet-inline-editor__fields", children }),
+          notice ? /* @__PURE__ */ jsx("div", { className: "crewlet-inline-editor__notice", children: notice }) : null,
+          error ? /* @__PURE__ */ jsx("div", { className: "crewlet-inline-editor__error", role: "alert", children: error }) : null,
+          /* @__PURE__ */ jsxs("div", { className: "crewlet-inline-editor__bar", children: [
+            /* @__PURE__ */ jsxs("span", { className: "crewlet-inline-editor__start", children: [
+              /* @__PURE__ */ jsx(EditingStatus, { dirty, saving, labels: labels.status }),
+              secondaryActions
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "crewlet-inline-editor__end", children: [
+              shortcutHint ? /* @__PURE__ */ jsxs("span", { className: "crewlet-inline-editor__hint", children: [
+                /* @__PURE__ */ jsx(Kbd, { keys: ["Mod", "Enter"], subtle: true }),
+                " ",
+                labels.shortcut
+              ] }) : null,
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "small",
+                  variant: "ghost",
+                  ...saving ? { disabledReason: labels.saving } : {},
+                  onClick: () => {
+                    if (!saving) onCancel();
+                  },
+                  children: labels.cancel
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "small",
+                  variant: "primary",
+                  type: "submit",
+                  loading: saving,
+                  ...blocked !== null && !saving ? { disabledReason: blocked } : {},
+                  children: labels.save
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    )
+  );
+}
+
+export { INLINE_EDITOR_LABELS, InlineEditor };

package/dist/{chunk-GI3S6RMM.js → chunk-AS2BMY3E.js}

@@ -1,9 +1,9 @@
 import { useClipboard } from './chunk-STJ7QBC3.js';
-import { Modal } from './chunk-FYINAYAJ.js';
-import { Checkbox } from './chunk-EY7LACIR.js';
+import { Modal } from './chunk-6AKG2VLR.js';
+import { Checkbox } from './chunk-F57N6ZJG.js';
 import { EmptyValue } from './chunk-EUCC37WY.js';
 import { useCardHeaderSlot } from './chunk-AV2DXAEL.js';
-import { Menu } from './chunk-PCI7ZJ6Z.js';
+import { Menu } from './chunk-TMM32U7D.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-LACA4JGC.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';

package/dist/{chunk-N3SHQ3VU.js → chunk-CWKWMIIJ.js}

@@ -1,7 +1,7 @@
 import { Timeline } from './chunk-AUQPBL4O.js';
 import { Section } from './chunk-JQ7IFSF6.js';
 import { Disclosure } from './chunk-OGXHZHRX.js';
-import { Composer } from './chunk-7CXGSS7D.js';
+import { Composer } from './chunk-6R5BSA36.js';
 import { ArtifactPanel } from './chunk-NBDN5JZV.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-KKUJSMLF.js → chunk-DY4DQ7EB.js}

@@ -1,5 +1,5 @@
 import { InlineCode } from './chunk-5CLW2CXT.js';
-import { ConfirmModal } from './chunk-FYINAYAJ.js';
+import { ConfirmModal } from './chunk-6AKG2VLR.js';
 import { Callout } from './chunk-SZZRIHGT.js';
 import './LinkInterstitial-ET4MSVSV.css';
 import { jsx, jsxs } from 'react/jsx-runtime';

package/dist/{chunk-ZI5G5RS7.js → chunk-EXRRTKWT.js}

@@ -1,9 +1,13 @@
+import { characterCountState, CharacterCount } from './chunk-XCUUI7E7.js';
 import { useHeadingLevel, headingTag, HeadingLevelProvider, nextHeadingLevel } from './chunk-PQADV6P6.js';
+import { announce } from './chunk-RSAQOKH3.js';
+import { isComposing } from './chunk-H5XTJ7GJ.js';
 import { IconButton } from './chunk-LACA4JGC.js';
 import { useFocusModality } from './chunk-NUZHC6MM.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Input-OQZBCRX5.css';
+import './Input-VDSV7VWJ.css';
+import './VisuallyHidden-L552H7OA.css';
 import { forwardRef, useRef, useState, useImperativeHandle, useEffect, useId } from 'react';
 import { XGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -81,7 +85,24 @@ function InputAffix({ text, id, sentence }) {
     /* @__PURE__ */ jsx(VisuallyHidden, { id, children: sentence ?? `Begins with ${text}` })
   ] });
 }
-var Textarea = forwardRef(function Textarea2({ error = false, autoResize = false, trailing, className = "", value, disabled, ...rest }, ref) {
+var LINE_BREAK = /[\r\n\v\f\u0085\u2028\u2029]/;
+var LINE_BREAKS = /[ \t]*(?:\r\n|[\r\n\v\f\u0085\u2028\u2029])+[ \t]*/g;
+function foldLineBreaks(text) {
+  return text.replace(LINE_BREAKS, " ");
+}
+var Textarea = forwardRef(function Textarea2({
+  error = false,
+  autoResize = false,
+  trailing,
+  singleLine = false,
+  foldedMessage = "Line breaks were replaced with spaces: this field holds one line.",
+  className = "",
+  value,
+  disabled,
+  onChange,
+  onKeyDown,
+  ...rest
+}, ref) {
   useFocusModality();
   const localRef = useRef(null);
   useImperativeHandle(ref, () => localRef.current);
@@ -104,6 +125,22 @@ var Textarea = forwardRef(function Textarea2({ error = false, autoResize = false
       resize?.disconnect();
     };
   }, [autoResize, value]);
+  const keys = (event) => {
+    onKeyDown?.(event);
+    if (!singleLine || event.defaultPrevented || event.key !== "Enter") return;
+    if (event.ctrlKey || event.metaKey || isComposing(event)) return;
+    event.preventDefault();
+  };
+  const change = (event) => {
+    const el = event.target;
+    if (singleLine && LINE_BREAK.test(el.value)) {
+      const caret = foldLineBreaks(el.value.slice(0, el.selectionStart ?? el.value.length)).length;
+      el.value = foldLineBreaks(el.value);
+      el.setSelectionRange(caret, caret);
+      announce(foldedMessage);
+    }
+    onChange?.(event);
+  };
   const control = /* @__PURE__ */ jsx(
     "textarea",
     {
@@ -118,7 +155,10 @@ var Textarea = forwardRef(function Textarea2({ error = false, autoResize = false
       value,
       disabled,
       "aria-invalid": error || void 0,
-      ...rest
+      "aria-multiline": singleLine ? false : void 0,
+      ...rest,
+      onChange: change,
+      onKeyDown: keys
     }
   );
   if (!trailing) return control;
@@ -167,7 +207,9 @@ var FormField = ({
   helper,
   helperOnFocus = false,
   error,
+  limit,
   labelAction,
+  hideLabel = false,
   as = "div",
   describedBy,
   htmlFor,
@@ -179,22 +221,29 @@ var FormField = ({
   const id = htmlFor ?? autoId;
   const helperId = helper ? `${id}-helper` : void 0;
   const errorId = error ? `${id}-error` : void 0;
+  const countId = limit ? `${id}-count` : void 0;
+  const over = limit !== void 0 && characterCountState(limit.length, limit.max) === "over";
   const extra = describedBy === void 0 ? [] : typeof describedBy === "string" ? [describedBy] : [...describedBy];
-  const described = [...extra, helperId, errorId].filter(Boolean).join(" ");
+  const described = [...extra, helperId, countId, errorId].filter(Boolean).join(" ");
+  const invalid = Boolean(error) || over;
   const field = {
     id,
     describedBy: described || void 0,
-    invalid: Boolean(error),
+    invalid,
     required
   };
+  const help = helper ? /* @__PURE__ */ jsx("div", { id: helperId, className: "crewlet-form-field__helper", children: helper }) : null;
   const body = /* @__PURE__ */ jsxs(Fragment, { children: [
     typeof children === "function" ? children(field) : children,
-    helper ? /* @__PURE__ */ jsx("div", { id: helperId, className: "crewlet-form-field__helper", children: helper }) : null,
+    limit ? /* @__PURE__ */ jsxs("div", { className: "crewlet-form-field__meta", children: [
+      help ?? /* @__PURE__ */ jsx("span", { className: "crewlet-form-field__meta-spacer" }),
+      /* @__PURE__ */ jsx(CharacterCount, { id: countId, length: limit.length, max: limit.max, labels: limit.labels })
+    ] }) : help,
     error ? /* @__PURE__ */ jsx("div", { id: errorId, className: "crewlet-form-field__error", role: "alert", children: error }) : null
   ] });
   const classes = cx(
     "crewlet-form-field",
-    Boolean(error) && "is-error",
+    invalid && "is-error",
     helperOnFocus && helper ? "crewlet-form-field--helper-on-focus" : null,
     className
   );
@@ -206,7 +255,7 @@ var FormField = ({
        * the group itself and read when a reader enters it.
        */
       /* @__PURE__ */ jsxs("fieldset", { ...rest, "aria-describedby": field.describedBy, className: classes, children: [
-        label !== void 0 ? /* @__PURE__ */ jsx("legend", { className: "crewlet-form-field__legend", children: /* @__PURE__ */ jsx(
+        label !== void 0 ? /* @__PURE__ */ jsx("legend", { className: cx("crewlet-form-field__legend", hideLabel && "crewlet-visually-hidden"), children: /* @__PURE__ */ jsx(
           Label,
           {
             as: "span",
@@ -230,6 +279,7 @@ var FormField = ({
         optional,
         requiredNews,
         action: labelAction,
+        className: hideLabel ? "crewlet-visually-hidden" : void 0,
         children: label
       }
     ) : null,
@@ -291,4 +341,4 @@ function ReadOnlyField({
   ] });
 }
 
-export { FormField, FormRow, FormSection, Input, InputAffix, Label, ReadOnlyField, Textarea };
+export { FormField, FormRow, FormSection, Input, InputAffix, Label, ReadOnlyField, Textarea, foldLineBreaks };

package/dist/{chunk-EY7LACIR.js → chunk-F57N6ZJG.js}

@@ -1,4 +1,4 @@
-import { FormField } from './chunk-ZI5G5RS7.js';
+import { FormField } from './chunk-EXRRTKWT.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Checkbox-ALWG3WV2.css';
 import { forwardRef, useId, useRef, useCallback, useEffect } from 'react';