@crewlethq/ui 0.18.0 → 0.20.0

package/dist/TableCells/TableCells.d.ts

@@ -0,0 +1,153 @@
+import type { ReactNode } from 'react';
+import { type AvatarKind, type AvatarSizeStep } from '../Avatar/index.js';
+import { type TimeValue } from '../RelativeTime/index.js';
+import type { Tone } from '../utils/tone.js';
+export interface TableKeyCellProps {
+    /** The identifier: a key, a handle, an id. Its whole value is the cell's title. */
+    value: string | null | undefined;
+    /** What the cell prints where that is shorter than the value: an id cut to its head. */
+    text?: string | undefined;
+    /** Where the identifier goes. Without it the cell is plain text. */
+    href?: string | undefined;
+    /** What an absent identifier means, read in place of the dash. */
+    emptyLabel?: string | undefined;
+}
+/**
+ * An identifier, monospaced, on ONE line, cut with its whole value on the
+ * title. An identifier is one token with no space to break at, so wrapping it
+ * at whatever character the column ran out on stood the row two lines tall and
+ * printed a key nobody could search for.
+ */
+export declare function TableKeyCell({ value, text, href, emptyLabel }: TableKeyCellProps): import("react").JSX.Element;
+export interface TableNumberCellProps {
+    value: number | null | undefined;
+    /**
+     * How the figure is spelled. The host's own formatter, so a cell never
+     * spells a figure differently from the rest of the screen. Defaults to the
+     * locale's grouping.
+     */
+    format?: ((value: number) => string) | undefined;
+    /** Printed after the figure: " ms", "%". */
+    suffix?: string | undefined;
+    title?: string | undefined;
+    /** What an absent figure means. Absent is not zero. */
+    emptyLabel?: string | undefined;
+}
+/**
+ * A figure, tabular, and a marked absence when there is none.
+ *
+ * ABSENT IS NOT ZERO, which is the whole reason the cell exists: "nothing is
+ * recorded" and "nothing was spent" are different facts, and a column that
+ * draws both as `0` makes the first invisible. A duration or a token count is
+ * this cell with the host's formatter.
+ */
+export declare function TableNumberCell({ value, format, suffix, title, emptyLabel, }: TableNumberCellProps): import("react").JSX.Element;
+export interface TableDateCellProps {
+    value: TimeValue | null | undefined;
+    /** Overrides the shared clock, for a story or a suite. */
+    now?: number | undefined;
+    /** What an absent instant means: "Never", "Not scheduled". */
+    emptyLabel?: string | undefined;
+}
+/**
+ * An instant, relative in the cell and exact on hover: a table scanned for
+ * "what moved today" is read in relative time, and the exact instant is what
+ * somebody needs once they have found the row. It is [RelativeTime], kept on
+ * one line in the quiet ink a date column takes.
+ */
+export declare function TableDateCell({ value, now, emptyLabel }: TableDateCellProps): import("react").JSX.Element;
+export interface TableEntityCellProps {
+    /** Who or what the row names. Absent, the cell is a marked absence. */
+    name: string | null | undefined;
+    /** Drawn as `Avatar` draws it: a squircle for an agent, a circle for a person. */
+    kind?: AvatarKind | undefined;
+    /**
+     * A badge of the host's own in place of the initials badge, such as a
+     * `PrincipalAvatar` carrying an agent's character. It is drawn as
+     * decoration, because the name is printed beside it.
+     */
+    badge?: ReactNode;
+    /**
+     * Where the name goes. Leave it out inside a row that is itself a link: an
+     * anchor inside an anchor is markup no browser agrees about.
+     */
+    href?: string | undefined;
+    /** The hover text, where the name is not the whole story. */
+    title?: string | undefined;
+    size?: AvatarSizeStep | undefined;
+    emptyLabel?: string | undefined;
+}
+/**
+ * A seat, a person or a team: the identity badge and the name, optionally a
+ * link to its page.
+ *
+ * ONE BADGE FOR ONE IDENTITY, the kit's `Avatar`, so the same person reads the
+ * same in every table. The badge is decorative, because the name is printed
+ * beside it: without that the row reads "Ada Lovelace avatar, Ada Lovelace".
+ */
+export declare function TableEntityCell({ name, kind, badge, href, title, size, emptyLabel, }: TableEntityCellProps): import("react").JSX.Element;
+export interface TableStatusCellProps {
+    /** The state's word, always printed: a glyph is never the only carrier. */
+    label: string;
+    /**
+     * The state's mark: a character such as a filled or a hollow circle, or a
+     * glyph. Hidden from assistive technology, since the word says it.
+     */
+    glyph: ReactNode;
+    tone?: Tone | undefined;
+    title?: string | undefined;
+}
+/**
+ * A state's mark with its word, never colour alone.
+ *
+ * THE MARK IS THE CALLER'S, which is what sets it apart from `StatusDot`: half
+ * of what a status column says is a HOLLOW counterpart (filled against hollow
+ * for "running the active revision" against "nothing reported"), and a filled
+ * dot has no unfilled state. The tone colours the mark and never the word.
+ */
+export declare function TableStatusCell({ label, glyph, tone, title }: TableStatusCellProps): import("react").JSX.Element;
+export interface TableTagsCellLabels {
+    /** The count of tags past `max`, read in full: "2 more tags". */
+    more: (count: number) => string;
+}
+export declare const TABLE_TAGS_CELL_LABELS: TableTagsCellLabels;
+export interface TableTagsCellProps {
+    tags: readonly string[] | null | undefined;
+    /** How many tags are drawn before the rest are counted. Three by default. */
+    max?: number | undefined;
+    emptyLabel?: string | undefined;
+    labels?: Partial<TableTagsCellLabels> | undefined;
+}
+/**
+ * Tags, capped with a count rather than wrapping a row to three lines. Neutral
+ * and outlined: a tag names a thing, and identity takes no colour. The tags
+ * past the cap are named on the count's title and counted in words for a
+ * screen reader.
+ */
+export declare function TableTagsCell({ tags, max, emptyLabel, labels: overrides }: TableTagsCellProps): import("react").JSX.Element;
+export type TableTextCellProps = {
+    children: ReactNode;
+} & ({
+    /**
+     * A mark every row of the column wears, such as the column's own glyph.
+     * The header carries the meaning, so it is drawn as decoration.
+     */
+    icon?: ReactNode;
+    mark?: never;
+} | {
+    icon?: never;
+    /**
+     * A mark that varies per row and states a fact of its own (a bug, an
+     * epic), so it brings its own accessible name and is read.
+     */
+    mark: ReactNode;
+});
+/**
+ * Plain text with an optional leading mark, cut on one line.
+ *
+ * TWO SPELLINGS OF ONE SLOT, because a column's mark and a row's mark are
+ * different facts: `icon` is the column's and is hidden, `mark` is the row's
+ * and is read. Exactly one of the two, enforced by the type: a cell given both
+ * would draw the column's answer over the row's.
+ */
+export declare function TableTextCell({ children, icon, mark }: TableTextCellProps): import("react").JSX.Element;

package/dist/TableCells/index.d.ts

@@ -0,0 +1,3 @@
+import './TableCells.css';
+export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell, } from './TableCells.js';
+export type { TableDateCellProps, TableEntityCellProps, TableKeyCellProps, TableNumberCellProps, TableStatusCellProps, TableTagsCellLabels, TableTagsCellProps, TableTextCellProps, } from './TableCells.js';

package/dist/TableCells/index.js

@@ -0,0 +1,10 @@
+export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell } from '../chunk-MUGM7SEG.js';
+import '../chunk-GFV4LJHH.js';
+import '../chunk-WIATRXEJ.js';
+import '../chunk-FBSEJO2C.js';
+import '../chunk-3CZ7XAVY.js';
+import '../chunk-EUCC37WY.js';
+import '../chunk-UAN5NE7M.js';
+import '../chunk-5OM447RW.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/TableCells-3VN5N2M3.css

@@ -0,0 +1,104 @@
+/* The read-only table cells. Each one holds a single line and shrinks inside
+   its column (`min-width: 0`), so a long value is cut with an ellipsis and
+   its whole text on the title rather than standing the row two lines tall. */
+
+.crewlet-table-cell__truncate {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* AN IDENTIFIER IS ONE LINE, cut with its value on the title rather than
+   broken at whichever character the column ran out on. Named with the link's
+   class as well, so a linked identifier keeps the block box whatever order
+   the two stylesheets load in. */
+.crewlet-table-cell__key,
+.crewlet-link.crewlet-table-cell__key {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--font-family-mono);
+}
+
+.crewlet-table-cell__number {
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.crewlet-table-cell__date {
+  color: var(--color-text-tertiary);
+  white-space: nowrap;
+}
+
+.crewlet-table-cell__entity,
+.crewlet-link.crewlet-table-cell__entity,
+.crewlet-table-cell__status,
+.crewlet-table-cell__text {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+  max-width: 100%;
+}
+
+.crewlet-table-cell__status,
+.crewlet-table-cell__text {
+  gap: calc(var(--spacing-1) * 1.5);
+}
+
+.crewlet-table-cell__badge,
+.crewlet-table-cell__icon {
+  display: inline-flex;
+  flex: none;
+}
+
+.crewlet-table-cell__icon {
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-table-cell__glyph {
+  display: inline-flex;
+  flex: none;
+  font-size: var(--font-size-xs);
+  line-height: 1;
+  /* The quiet state is still a mark, so it takes the tertiary step: the
+     decoration step does not clear 3:1 on every ground. */
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-table-cell__status--info .crewlet-table-cell__glyph {
+  color: var(--color-feedback-info);
+}
+
+.crewlet-table-cell__status--success .crewlet-table-cell__glyph {
+  color: var(--color-feedback-success);
+}
+
+.crewlet-table-cell__status--warning .crewlet-table-cell__glyph {
+  color: var(--color-feedback-warning);
+}
+
+.crewlet-table-cell__status--danger .crewlet-table-cell__glyph {
+  color: var(--color-feedback-danger);
+}
+
+.crewlet-table-cell__status--brand .crewlet-table-cell__glyph {
+  color: var(--color-brand-accent);
+}
+
+.crewlet-table-cell__tags {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-table-cell__more {
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+  font-variant-numeric: tabular-nums;
+}

package/dist/TagsInput/index.js

@@ -1,10 +1,10 @@
-export { TagsInput } from '../chunk-AQCV62K6.js';
+export { TagsInput } from '../chunk-7ZNKEPLN.js';
 import '../chunk-GFV4LJHH.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-F73MC7EZ.js';
-import '../chunk-RSAQOKH3.js';
-import '../chunk-4FQT6ZAY.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
+import '../chunk-RSAQOKH3.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/TimeWindowPicker/index.js

@@ -1,13 +1,13 @@
-export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-ERV5BUS3.js';
+export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-EIGEIT4O.js';
 import '../chunk-FC4YTTFJ.js';
 import '../chunk-F73MC7EZ.js';
-import '../chunk-4GB57WIT.js';
-import '../chunk-BWRGFKJP.js';
 import '../chunk-GXQ3B46I.js';
 import '../chunk-OG6CL3EB.js';
-import '../chunk-4FQT6ZAY.js';
+import '../chunk-Q55TXPA3.js';
+import '../chunk-BWRGFKJP.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-PQADV6P6.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/TreeCanvas/index.js

@@ -1,10 +1,10 @@
-export { TreeCanvas } from '../chunk-2OLCUNG7.js';
+export { TreeCanvas } from '../chunk-TBIZSQHB.js';
 import '../chunk-MY374UUD.js';
-import '../chunk-AMH67MLM.js';
+import '../chunk-TXAFKH2A.js';
 import '../chunk-VYOKRN2I.js';
 import '../chunk-OG6CL3EB.js';
-import '../chunk-4FQT6ZAY.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/TreeGrid/index.js

@@ -1,8 +1,8 @@
-export { TreeGrid } from '../chunk-B2Z2CDM5.js';
+export { TreeGrid } from '../chunk-T5TFZ2JB.js';
 import '../chunk-MY374UUD.js';
 import '../chunk-VYOKRN2I.js';
-import '../chunk-4FQT6ZAY.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/VersionCompare/VersionCompare.d.ts

@@ -0,0 +1,70 @@
+import { type ReactNode } from 'react';
+/** How two versions are compared: what changed between them, or the versions themselves. */
+export type VersionCompareLens = 'changes' | 'versions';
+export declare const VERSION_COMPARE_LENSES: readonly ["changes", "versions"];
+export interface VersionCompareLabels {
+    /** The heading when the host gives no title: "Version 3 and version 5". */
+    title: (from: string, to: string) => string;
+    /** Names the lens switch. */
+    lens: string;
+    changes: string;
+    versions: string;
+    /** The changes region's accessible name. */
+    region: (from: string, to: string) => string;
+    identicalTitle: string;
+    identicalDescription: string;
+}
+export declare const VERSION_COMPARE_LABELS: VersionCompareLabels;
+export interface VersionCompareProps {
+    /** The older version, named the way the reader knows it: "Version 3", "rev 12". */
+    fromLabel: string;
+    /** The newer version. */
+    toLabel: string;
+    /** The heading. Defaults to naming both versions. */
+    title?: ReactNode;
+    /** A sentence beside the heading: "What changed between them". */
+    description?: ReactNode;
+    /** The lens on show. A lens with nothing to draw falls back to the other. */
+    lens: VersionCompareLens;
+    /** Switches the lens. Without it, or with only one lens to draw, no switch is drawn. */
+    onLensChange?: ((lens: VersionCompareLens) => void) | undefined;
+    /**
+     * The older text, compared line by line with `after` for the changes lens.
+     * Leave both out and pass `changes` for a comparison the host draws itself,
+     * such as a list of changed files.
+     */
+    before?: string | undefined;
+    after?: string | undefined;
+    /** The changes lens, drawn by the host in place of the line diff of `before` and `after`. */
+    changes?: ReactNode;
+    /** Unchanged lines kept either side of a change in the line diff. Three by default. */
+    context?: number | undefined;
+    /** The older version, drawn for the versions lens. */
+    from?: ReactNode;
+    /** The newer version, drawn for the versions lens. With `from` left out it is drawn alone. */
+    to?: ReactNode;
+    /** A sentence over the versions lens: "Both versions show today's data." */
+    note?: ReactNode;
+    /** Controls at the end of the head, after the lens switch: "Back to the page". */
+    actions?: ReactNode;
+    labels?: Partial<VersionCompareLabels> | undefined;
+    className?: string | undefined;
+}
+/**
+ * Two versions of a document, compared: what changed between them, or the two
+ * drawn side by side.
+ *
+ * THE OLDER VERSION IS ALWAYS THE "FROM" SIDE and the left pane, whichever the
+ * reader picked first, so a comparison reads forward in time. The host orders
+ * the two before it hands them over.
+ *
+ * THE CHANGES LENS IS A [DiffView] when the host hands over two texts, with
+ * the [DiffSummary] above it; two identical texts are said in words ("Nothing
+ * changed") rather than drawn as a pane of unmarked lines that reads as one
+ * that failed to load. A comparison that is not two texts, such as the files
+ * of two releases, is drawn by the host in `changes`.
+ *
+ * A LENS THAT CANNOT BE DRAWN IS ABSENT, not offered and then empty: a first
+ * version has nothing to compare with, and a sheet has no side by side.
+ */
+export declare function VersionCompare({ fromLabel, toLabel, title, description, lens, onLensChange, before, after, changes, context, from, to, note, actions, labels: overrides, className, }: VersionCompareProps): import("react").JSX.Element;

package/dist/VersionCompare/index.d.ts

@@ -0,0 +1,3 @@
+import './VersionCompare.css';
+export { VersionCompare, VERSION_COMPARE_LABELS, VERSION_COMPARE_LENSES } from './VersionCompare.js';
+export type { VersionCompareLabels, VersionCompareLens, VersionCompareProps } from './VersionCompare.js';

package/dist/VersionCompare/index.js

@@ -0,0 +1,11 @@
+export { VERSION_COMPARE_LABELS, VERSION_COMPARE_LENSES, VersionCompare } from '../chunk-73QBUUYX.js';
+import '../chunk-VYY56AMX.js';
+import '../chunk-BVWSLXTY.js';
+import '../chunk-26PEPONN.js';
+import '../chunk-4LDTQWS7.js';
+import '../chunk-CBOICT64.js';
+import '../chunk-RA2ULG6H.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-BHHIIK3M.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/VersionCompare-UUZOPTQO.css

@@ -0,0 +1,68 @@
+/* VersionCompare: a head naming the two versions with the lens switch at its
+   end, then the changes or the two versions. */
+.crewlet-version-compare {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  min-width: 0;
+}
+
+.crewlet-version-compare__head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-2) var(--spacing-3);
+}
+
+.crewlet-version-compare__titles {
+  display: flex;
+  flex: 1 1 16rem;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-version-compare__title {
+  margin: 0;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+}
+
+.crewlet-version-compare__description,
+.crewlet-version-compare__note {
+  margin: 0;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-compact);
+}
+
+.crewlet-version-compare__changes,
+.crewlet-version-compare__versions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  min-width: 0;
+}
+
+/* SIDE BY SIDE where there is room for two readable columns, and one above
+   the other where there is not, decided by the width the panes are given
+   rather than by the viewport, so a comparison in a side pane stacks too. */
+.crewlet-version-compare__panes {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
+  gap: var(--spacing-4);
+}
+
+.crewlet-version-compare__pane {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+.crewlet-version-compare__pane-title {
+  margin: 0;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+}

package/dist/chunk-35XVR5JQ.js

@@ -0,0 +1,81 @@
+import { Count } from './chunk-BHHIIK3M.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './ArrangeGroup-SHFHA7BE.css';
+import { useId } from 'react';
+import { ChevronDownGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var PLACEHOLDER = "Name this group";
+function ArrangeGroup({
+  title,
+  tone = "none",
+  collapsed,
+  onCollapsedChange,
+  count,
+  onTitleChange,
+  bodyProps,
+  empty,
+  columns = 12,
+  actions,
+  className,
+  children,
+  ...rest
+}) {
+  const bodyId = `${useId()}-body`;
+  const { className: bodyClass, style: bodyStyle, ...body } = bodyProps ?? {};
+  const hasChildren = Array.isArray(children) ? children.some(Boolean) : Boolean(children);
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: cx("crewlet-arrange-group", `crewlet-arrange-group--${tone}`, collapsed && "is-collapsed", className),
+      "aria-label": title || "Untitled group",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "crewlet-arrange-group__head", children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: cx("crewlet-arrange-group__toggle", onTitleChange && "is-icon"),
+              "aria-expanded": !collapsed,
+              "aria-controls": bodyId,
+              "aria-label": onTitleChange ? `${collapsed ? "Expand" : "Collapse"} ${title || "group"}` : void 0,
+              onClick: () => onCollapsedChange(!collapsed),
+              children: [
+                /* @__PURE__ */ jsx(ChevronDownGlyph, { size: "sm", className: "crewlet-arrange-group__chevron" }),
+                onTitleChange ? null : /* @__PURE__ */ jsx("span", { className: "crewlet-arrange-group__title", children: title || "Untitled group" })
+              ]
+            }
+          ),
+          onTitleChange ? /* @__PURE__ */ jsx(
+            "input",
+            {
+              className: "crewlet-arrange-group__title-field",
+              "aria-label": "Group name",
+              value: title,
+              maxLength: 60,
+              placeholder: PLACEHOLDER,
+              size: Math.max(3, (title || PLACEHOLDER).length),
+              onChange: (e) => onTitleChange(e.target.value)
+            }
+          ) : null,
+          count !== void 0 ? /* @__PURE__ */ jsx(Count, { value: count, className: "crewlet-arrange-group__count" }) : null,
+          actions ? /* @__PURE__ */ jsx("span", { className: "crewlet-arrange-group__actions", children: actions }) : null
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: bodyId,
+            className: cx("crewlet-arrange-group__body", bodyClass),
+            style: { ...bodyStyle, ["--crewlet-arrange-columns"]: columns },
+            hidden: collapsed,
+            ...body,
+            children: hasChildren ? children : empty ? /* @__PURE__ */ jsx("div", { className: "crewlet-arrange-group__empty", children: empty }) : null
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { ArrangeGroup };

package/dist/chunk-63WJLRB2.js

@@ -0,0 +1,24 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './Note-RT4L6VUT.css';
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var Note = forwardRef(function Note2({ tone = "amber", align = "start", size = "md", className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cx(
+        "crewlet-note",
+        `crewlet-note--${tone}`,
+        align === "center" && "crewlet-note--center",
+        size === "lg" && "crewlet-note--lg",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+});
+
+export { Note };

package/dist/{chunk-L4ZLXYPO.js → chunk-6A7P6II6.js}

@@ -1,4 +1,4 @@
-import { TreeGrid } from './chunk-B2Z2CDM5.js';
+import { TreeGrid } from './chunk-T5TFZ2JB.js';
 import { createTreeModel, treeParent } from './chunk-MY374UUD.js';
 import { OrgLabel } from './chunk-AKEZ3G5V.js';
 import { AddPill } from './chunk-TROLVEZY.js';

package/dist/chunk-6KWNXIDE.js

@@ -0,0 +1,18 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './Divider-3Z77ZAJH.css';
+import { jsx } from 'react/jsx-runtime';
+
+function Divider({ label, align = "start", className, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "separator",
+      "aria-label": label || void 0,
+      className: cx("crewlet-divider", label && "crewlet-divider--labelled", label && align === "center" && "crewlet-divider--center", className),
+      ...rest,
+      children: label ? /* @__PURE__ */ jsx("span", { className: "crewlet-divider__label", children: label }) : null
+    }
+  );
+}
+
+export { Divider };