@crewlethq/ui 0.43.0 → 0.45.0

package/dist/SheetGrid/index.js

@@ -1,24 +1,24 @@
-export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from '../chunk-OVHJTOKW.js';
+export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from '../chunk-OWIGEE2Y.js';
 import '../chunk-O2EGEONV.js';
 import '../chunk-CENOOTAV.js';
+import '../chunk-KYIAFNU7.js';
 import '../chunk-3BYIWOTV.js';
 import '../chunk-I6POAB4V.js';
-import '../chunk-KYIAFNU7.js';
 import '../chunk-66X5WDKE.js';
 import '../chunk-LFSIKGRQ.js';
 import '../chunk-Z7JYG5TF.js';
 import '../chunk-KHJIEPZV.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-5AQBPHZD.js';
-import '../chunk-PZKHBB7D.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-I33UIUZD.js';
+import '../chunk-5AQBPHZD.js';
+import '../chunk-PZKHBB7D.js';
+import '../chunk-RSAQOKH3.js';
 import '../chunk-PCI7ZJ6Z.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-H5XTJ7GJ.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-NUZHC6MM.js';
-import '../chunk-RSAQOKH3.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/SlideFilmstrip/index.js

@@ -2,12 +2,12 @@ export { SlideFilmstrip } from '../chunk-MCOC3KQA.js';
 import '../chunk-RMEBFYL7.js';
 import '../chunk-XJ2QEBMM.js';
 import '../chunk-SMBKXWML.js';
+import '../chunk-RSAQOKH3.js';
 import '../chunk-PCI7ZJ6Z.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-H5XTJ7GJ.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-NUZHC6MM.js';
-import '../chunk-RSAQOKH3.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Statement/Statement.d.ts

@@ -0,0 +1,45 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type HeadingLevel } from '../utils/headingLevel.js';
+/** What a statement says while nobody has written it, with the way to write it. */
+export interface StatementEmpty {
+    /** "No mission yet". */
+    title: ReactNode;
+    /** What the statement is for, so the reader knows why to write it. */
+    description: ReactNode;
+    /** The one control that writes it: "Add a mission". */
+    action?: ReactNode;
+}
+export interface StatementProps extends Omit<HTMLAttributes<HTMLElement>, 'title' | 'children'> {
+    /** What the statement is: "Mission", "Vision". Its heading. */
+    label: ReactNode;
+    /**
+     * The statement itself. TEXT is set as the statement, a step over the body
+     * at the reading measure with its author's line breaks kept; a BLOCK (a
+     * numbered list of policies, a card) is drawn as given under the same
+     * label, so every statement on a page heads the same way. Absent, null or
+     * an empty string is a statement nobody has written, and `empty` is said in
+     * its place.
+     */
+    children?: ReactNode;
+    /**
+     * REQUIRED: an unwritten statement is said as one, never drawn as a grey
+     * value standing where the statement would.
+     */
+    empty: StatementEmpty;
+    /** The heading's level. Taken from where the statement sits by default. */
+    headingLevel?: HeadingLevel | undefined;
+}
+/**
+ * One statement a company or a team makes about itself: its mission, its
+ * vision, a goal. A label over the words, set larger than the body at a
+ * reading measure, because these are the sentences a page exists to say.
+ *
+ * NOT A KEY AND A VALUE. In a description list a mission weighs what a time
+ * zone weighs; a statement is read, not looked up. And an unwritten one is an
+ * inline empty state with its own way to write it, rather than placeholder
+ * text in the value's place that reads as if somebody wrote it.
+ *
+ * A REGION NAMED BY ITS LABEL, so a reader moving by landmark or heading
+ * hears "Mission" and then the mission.
+ */
+export declare function Statement({ label, children, empty, headingLevel, className, ...rest }: StatementProps): import("react").JSX.Element;

package/dist/Statement/index.d.ts

@@ -0,0 +1,3 @@
+import './Statement.css';
+export { Statement } from './Statement.js';
+export type { StatementEmpty, StatementProps } from './Statement.js';

package/dist/Statement/index.js

@@ -0,0 +1,4 @@
+export { Statement } from '../chunk-MZJKPTA5.js';
+import '../chunk-PPUR46MK.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/Statement-M4QDXIMO.css

@@ -0,0 +1,53 @@
+/*
+ * Statement: a label over the words a page exists to say (Statement.tsx).
+ *
+ * THE LABEL IS THE MICRO REGISTER and the words are a step over the body, at
+ * the reading measure, so the statement outweighs everything around it and a
+ * line of it is one an eye can follow back.
+ */
+
+.crewlet-statement {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  margin: 0;
+  min-width: 0;
+}
+
+.crewlet-statement__label {
+  margin: 0;
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--font-letter-spacing-wide);
+  line-height: var(--font-line-height-snug);
+  text-transform: uppercase;
+  color: var(--color-text-tertiary);
+}
+
+/* THE AUTHOR'S OWN LINE BREAKS are kept, and no word stands alone on the last
+   line. A long word (an address, a product name) breaks rather than widening
+   the column. */
+.crewlet-statement__text {
+  margin: 0;
+  max-width: var(--size-measure);
+  font-size: var(--font-size-lg);
+  line-height: var(--font-line-height-relaxed);
+  color: var(--color-text-primary);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  text-wrap: pretty;
+}
+
+/* A BLOCK under the label is drawn as given: its own register, the column's
+   width. */
+.crewlet-statement__body {
+  min-width: 0;
+}
+
+/* ON A PHONE the words step down to the body's own step over it, so a
+   mission is a paragraph rather than a poster. */
+@media (width < 640px) {
+  .crewlet-statement__text {
+    font-size: var(--font-size-md);
+  }
+}

package/dist/Switcher/index.js

@@ -1,4 +1,4 @@
-export { Switcher } from '../chunk-524GGA67.js';
+export { Switcher } from '../chunk-NF6SWHQI.js';
 import '../chunk-FYINAYAJ.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-KHJIEPZV.js';
@@ -6,12 +6,12 @@ import '../chunk-FYTIJM2T.js';
 import '../chunk-TEUQWOWZ.js';
 import '../chunk-ZI5G5RS7.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-RSAQOKH3.js';
 import '../chunk-RTPQDNW3.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-H5XTJ7GJ.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-NUZHC6MM.js';
-import '../chunk-RSAQOKH3.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/TableCells/index.js

@@ -1,10 +1,10 @@
 export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell } from '../chunk-4BJK7FE5.js';
 import '../chunk-FBSEJO2C.js';
 import '../chunk-KYIAFNU7.js';
+import '../chunk-WIATRXEJ.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';
-import '../chunk-WIATRXEJ.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/TagsInput/index.js

@@ -1,11 +1,11 @@
-export { TagsInput } from '../chunk-IVAR7NRW.js';
+export { TagsInput } from '../chunk-SXBJMBSV.js';
 import '../chunk-KYIAFNU7.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-WIATRXEJ.js';
+import '../chunk-RSAQOKH3.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-H5XTJ7GJ.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-NUZHC6MM.js';
-import '../chunk-RSAQOKH3.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/VersionCompare/index.js

@@ -1,11 +1,11 @@
-export { VERSION_COMPARE_LABELS, VERSION_COMPARE_LENSES, VersionCompare } from '../chunk-IUQQGIHL.js';
+export { VERSION_COMPARE_LABELS, VERSION_COMPARE_LENSES, VersionCompare } from '../chunk-U44WGRFW.js';
 import '../chunk-BVWSLXTY.js';
 import '../chunk-OOC7Q67K.js';
 import '../chunk-BF5WV7NM.js';
 import '../chunk-KA75QPFM.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-EGMQURBR.js';
-import '../chunk-RA2ULG6H.js';
+import '../chunk-PPUR46MK.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-PCI7ZJ6Z.js';

package/dist/{chunk-XIDD7PJO.js → chunk-2MYSESZF.js}

@@ -1,4 +1,4 @@
-import { EmptyState } from './chunk-RA2ULG6H.js';
+import { EmptyState } from './chunk-PPUR46MK.js';
 import { useMediaMatch } from './chunk-RTPQDNW3.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';

package/dist/{chunk-SJ6DMG4R.js → chunk-4AA6WPQU.js}

@@ -1,6 +1,6 @@
 import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './DirectoryList-EESYMH2U.css';
+import './DirectoryList-7OXXN47X.css';
 import { useId } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-PCT47E7O.js → chunk-5GNA4RKP.js}

@@ -1,6 +1,6 @@
 import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './CatalogTile-XL4XLFUH.css';
+import './CatalogTile-VPSLCKJE.css';
 import { useId } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -14,6 +14,7 @@ function CatalogTile({
   meta,
   action,
   quiet = false,
+  density = "comfortable",
   className,
   ...rest
 }) {
@@ -21,6 +22,40 @@ function CatalogTile({
   const Heading = headingTag(headingLevel ?? level);
   const titleId = useId();
   const foot = meta !== void 0 || action !== void 0;
+  if (density === "compact") {
+    return /* @__PURE__ */ jsxs(
+      Element,
+      {
+        "aria-labelledby": Element === "article" ? titleId : void 0,
+        ...rest,
+        className: cx(
+          "crewlet-catalog-tile",
+          "crewlet-catalog-tile--compact",
+          quiet && "crewlet-catalog-tile--quiet",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "crewlet-catalog-tile__head", children: [
+            /* @__PURE__ */ jsx("span", { className: "crewlet-catalog-tile__mark", "aria-hidden": "true", children: mark }),
+            /* @__PURE__ */ jsxs("span", { className: "crewlet-catalog-tile__title", children: [
+              /* @__PURE__ */ jsx(Heading, { id: titleId, className: "crewlet-catalog-tile__name", children: title }),
+              status === void 0 || status === null ? null : /* @__PURE__ */ jsx("span", { className: "crewlet-catalog-tile__status", children: status }),
+              meta === void 0 || meta === null ? null : /* @__PURE__ */ jsx("span", { className: "crewlet-catalog-tile__meta", children: meta })
+            ] }),
+            action === void 0 ? null : /* @__PURE__ */ jsx("span", { className: "crewlet-catalog-tile__action", children: action })
+          ] }),
+          description === void 0 ? null : /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "crewlet-catalog-tile__description",
+              title: typeof description === "string" ? description : void 0,
+              children: description
+            }
+          )
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs(
     Element,
     {

package/dist/{chunk-3TFDQLW3.js → chunk-JQ7IFSF6.js}

@@ -1,6 +1,6 @@
 import { useHeadingLevel, headingTag, HeadingLevelProvider, nextHeadingLevel } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Section-O5AHGSOG.css';
+import './Section-M7SG6NP2.css';
 import { useId } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/chunk-KY65C4XS.js

@@ -0,0 +1,12 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './AsideLayout-TH5SQZNK.css';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function AsideLayout({ children, aside, asideLabel, className, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { ...rest, className: cx("crewlet-aside-layout", className), children: /* @__PURE__ */ jsxs("div", { className: "crewlet-aside-layout__columns", children: [
+    /* @__PURE__ */ jsx("div", { className: "crewlet-aside-layout__main", children }),
+    /* @__PURE__ */ jsx("aside", { className: "crewlet-aside-layout__aside", "aria-label": asideLabel, children: aside })
+  ] }) });
+}
+
+export { AsideLayout };

package/dist/chunk-MZJKPTA5.js

@@ -0,0 +1,36 @@
+import { EmptyState } from './chunk-PPUR46MK.js';
+import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './Statement-M4QDXIMO.css';
+import { useId } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function Statement({ label, children, empty, headingLevel, className, ...rest }) {
+  const contextLevel = useHeadingLevel();
+  const Heading = headingTag(headingLevel ?? contextLevel);
+  const id = useId();
+  const written = !(children === void 0 || children === null || children === "" || children === false);
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-labelledby": id,
+      ...rest,
+      className: cx("crewlet-statement", !written && "crewlet-statement--empty", className),
+      children: [
+        /* @__PURE__ */ jsx(Heading, { id, className: "crewlet-statement__label", children: label }),
+        written ? typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx("div", { className: "crewlet-statement__text", children }) : /* @__PURE__ */ jsx("div", { className: "crewlet-statement__body", children }) : /* @__PURE__ */ jsx(
+          EmptyState,
+          {
+            size: "inline",
+            headingLevel: "none",
+            title: empty.title,
+            description: empty.description,
+            action: empty.action
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { Statement };

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

@@ -1,5 +1,5 @@
 import { Timeline } from './chunk-AUQPBL4O.js';
-import { Section } from './chunk-3TFDQLW3.js';
+import { Section } from './chunk-JQ7IFSF6.js';
 import { Disclosure } from './chunk-OGXHZHRX.js';
 import { Composer } from './chunk-7CXGSS7D.js';
 import { ArtifactPanel } from './chunk-NBDN5JZV.js';

package/dist/{chunk-RA2ULG6H.js → chunk-PPUR46MK.js}

@@ -1,6 +1,6 @@
 import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './EmptyState-C6HRBGT7.css';
+import './EmptyState-7L4UAQBX.css';
 import { InboxGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -18,6 +18,15 @@ function EmptyState({
   const contextLevel = useHeadingLevel();
   const level = headingLevel ?? contextLevel;
   const Heading = level === "none" ? "div" : headingTag(level);
+  if (size === "inline") {
+    return /* @__PURE__ */ jsxs("div", { ...rest, className: cx("crewlet-empty-state", "crewlet-empty-state--inline", className), children: [
+      /* @__PURE__ */ jsxs("div", { className: "crewlet-empty-state__text", children: [
+        /* @__PURE__ */ jsx(Heading, { className: "crewlet-empty-state__title", children: title }),
+        /* @__PURE__ */ jsx("p", { className: "crewlet-empty-state__description", children: description })
+      ] }),
+      action ? /* @__PURE__ */ jsx("div", { className: "crewlet-empty-state__action", children: action }) : null
+    ] });
+  }
   return /* @__PURE__ */ jsxs("div", { ...rest, className: cx("crewlet-empty-state", `crewlet-empty-state--${size}`, className), children: [
     /* @__PURE__ */ jsx("span", { className: "crewlet-empty-state__mark", "aria-hidden": true, children: illustration ?? icon ?? /* @__PURE__ */ jsx(InboxGlyph, { size: size === "compact" ? "xl" : 32 }) }),
     /* @__PURE__ */ jsx(Heading, { className: "crewlet-empty-state__title", children: title }),

package/dist/{chunk-PLLYOPS4.js → chunk-Q7HLZH32.js}

@@ -1,7 +1,7 @@
 import { HuePicker } from './chunk-QOP7QYUW.js';
 import { Popover } from './chunk-KHJIEPZV.js';
 import { NODE_HUE_NAMES } from './chunk-AYKXMIOR.js';
-import { CharacterPicker } from './chunk-VZICPYGR.js';
+import { CharacterPicker } from './chunk-SNQRGH4A.js';
 import { Avatar } from './chunk-PZKHBB7D.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './AvatarPicker-PREY36MG.css';

package/dist/{chunk-KV3ODJXH.js → chunk-QTMUKRTN.js}

@@ -1,4 +1,4 @@
-import { EmptyState } from './chunk-RA2ULG6H.js';
+import { EmptyState } from './chunk-PPUR46MK.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './AccessDeniedCard-QVNDMT46.css';
 import { ShieldGlyph, LockGlyph, EyeOffGlyph } from '@crewlethq/icons/glyphs';

package/dist/{chunk-IUQQGIHL.js → chunk-U44WGRFW.js}

@@ -1,6 +1,6 @@
 import { diffLines, diffStat, collapseDiff, DiffSummary, DiffView } from './chunk-BVWSLXTY.js';
 import { SegmentedControl } from './chunk-BF5WV7NM.js';
-import { EmptyState } from './chunk-RA2ULG6H.js';
+import { EmptyState } from './chunk-PPUR46MK.js';
 import { useHeadingLevel, headingTag, nextHeadingLevel, HeadingLevelProvider } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './VersionCompare-UUZOPTQO.css';

package/dist/generated/index.d.ts

@@ -19,6 +19,7 @@ export * from '../ArtifactKindIllustration/index.js';
 export * from '../ArtifactMakeRow/index.js';
 export * from '../ArtifactNameCell/index.js';
 export * from '../ArtifactPanel/index.js';
+export * from '../AsideLayout/index.js';
 export * from '../AuthLayout/index.js';
 export * from '../Avatar/index.js';
 export * from '../AvatarPicker/index.js';
@@ -158,6 +159,7 @@ export * from '../SlideStage/index.js';
 export * from '../SourceEditor/index.js';
 export * from '../StatCard/index.js';
 export * from '../StatGroup/index.js';
+export * from '../Statement/index.js';
 export * from '../StatusDot/index.js';
 export * from '../Stepper/index.js';
 export * from '../Switch/index.js';