@crewlethq/ui 0.10.0 → 0.12.0

package/dist/FactList/FactList.d.ts

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+/** One read-only fact: what it is, its value, and why it cannot be changed here. */
+export interface FactListItem {
+    /** Stable identity within the list. */
+    key: string;
+    /** What the fact is: "Handle", "Placement". */
+    label: ReactNode;
+    /** Its value, as text or a short node (a link, a tag). */
+    value: ReactNode;
+    /**
+     * Why it cannot be changed here, in one sentence. Shown as a tooltip when
+     * the pointer rests on the row, and read by a screen reader after the value;
+     * with one, the row is drawn with a lock.
+     */
+    reason?: string | undefined;
+}
+export interface FactListProps {
+    items: readonly FactListItem[];
+    /** Names the list for a screen reader, where nothing above it does. */
+    label?: string | undefined;
+    className?: string | undefined;
+}
+/**
+ * Facts a form shows and does not edit, as rows in one bordered box: the label
+ * on the left, the value on the right, 32px a row.
+ *
+ * ONE LINE A FACT. A read-only value used to be drawn as a label, the value
+ * and a sentence under it, three lines each, so a form's locked facts
+ * outweighed its fields. The sentence is the row's tooltip now, and the lock
+ * says there is one. It is a description list, so a screen reader reads each
+ * label with its value.
+ */
+export declare function FactList({ items, label, className }: FactListProps): import("react").JSX.Element;

package/dist/FactList/index.d.ts

@@ -0,0 +1,3 @@
+import './FactList.css';
+export { FactList } from './FactList.js';
+export type { FactListItem, FactListProps } from './FactList.js';

package/dist/FactList/index.js

@@ -0,0 +1,6 @@
+export { FactList } from '../chunk-URYDN2KA.js';
+import '../chunk-CQY5NTRS.js';
+import '../chunk-7RPGY3JE.js';
+import '../chunk-R25RGPUB.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/FactList-G2H73NFR.css

@@ -0,0 +1,57 @@
+/*
+ * Read-only facts in one bordered box, a 32px row each: label and lock on the
+ * left, the value on the right. The rows share the box's hairline between
+ * them, so a list of six reads as one object rather than six cards.
+ */
+.crewlet-fact-list {
+  display: grid;
+  margin: 0;
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+.crewlet-fact-list__row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-height: 32px;
+  padding: var(--spacing-1) var(--spacing-3);
+  font-size: var(--font-size-compact);
+}
+
+.crewlet-fact-list__row + .crewlet-fact-list__row {
+  border-top: 1px solid var(--color-border-default);
+}
+
+.crewlet-fact-list__row.is-locked {
+  cursor: help;
+}
+
+.crewlet-fact-list__label {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  gap: var(--spacing-1);
+  min-width: 0;
+  margin: 0;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-fact-list__lock {
+  flex: none;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-fact-list__value {
+  display: flex;
+  flex: 0 1 auto;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-2);
+  min-width: 0;
+  margin: 0;
+  color: var(--color-text-secondary);
+  text-align: right;
+  overflow-wrap: anywhere;
+}

package/dist/HuePicker/index.js

@@ -1,7 +1,8 @@
-export { HuePicker } from '../chunk-26TXVHN2.js';
+import '../chunk-EXHQ2QVW.js';
+export { HuePicker } from '../chunk-K5Q2DK3P.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-LPHHDCN3.js';
-import '../chunk-HEOVQZL7.js';
+import '../chunk-EBBAAQDY.js';
+import '../chunk-JHQUT4WJ.js';
 import '../chunk-CBOICT64.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';

package/dist/Input/FormField.d.ts

@@ -19,6 +19,13 @@ export interface FormFieldProps extends Omit<HTMLAttributes<HTMLElement>, 'child
     requiredNews?: boolean | undefined;
     /** Where the value comes from, or what shape it takes. */
     helper?: ReactNode;
+    /**
+     * Show the helper only while the field has focus. For a dense form whose
+     * every field carries a sentence: at rest the form is labels and values,
+     * and the sentence appears under the field the reader is in. It stays in
+     * `aria-describedby` either way, so a screen reader hears it on entry.
+     */
+    helperOnFocus?: boolean | undefined;
     /** Why the last value was refused. */
     error?: ReactNode;
     /** A control rendered beside the label, such as an Add button. */
@@ -58,4 +65,4 @@ export interface FormFieldProps extends Omit<HTMLAttributes<HTMLElement>, 'child
  * instant, the only line that said what right looks like disappeared. Both
  * lines are joined into `aria-describedby` in reading order, help first.
  */
-export declare const FormField: ({ label, required, optional, requiredNews, helper, error, labelAction, as, describedBy, htmlFor, className, children, ...rest }: FormFieldProps) => import("react").JSX.Element;
+export declare const FormField: ({ label, required, optional, requiredNews, helper, helperOnFocus, error, labelAction, as, describedBy, htmlFor, className, children, ...rest }: FormFieldProps) => import("react").JSX.Element;

package/dist/Input/index.js

@@ -1,4 +1,4 @@
-export { FormField, FormRow, FormSection, Input, InputAffix, Label, ReadOnlyField, Textarea } from '../chunk-ZGX2DP7F.js';
+export { FormField, FormRow, FormSection, Input, InputAffix, Label, ReadOnlyField, Textarea } from '../chunk-FTEJPHBI.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';

package/dist/{Input-DRFNI26F.css → Input-RAKNQJCV.css}

@@ -502,6 +502,13 @@
   color: var(--color-text-tertiary);
 }
 
+/* SHOWN ONLY WHILE THE FIELD HAS FOCUS (`helperOnFocus`): a dense form reads as
+   labels and values at rest, and the sentence appears under the field the
+   reader is in. Still described, so a screen reader hears it on entry. */
+.crewlet-form-field--helper-on-focus:not(:focus-within) .crewlet-form-field__helper {
+  display: none;
+}
+
 /*
  * The error line, on the danger INK. It stays BESIDE the help rather than
  * replacing it: a reader told they are wrong needs the line that says what

package/dist/ListInput/ListInput.d.ts

@@ -10,6 +10,8 @@ export interface ListInputProps {
     multiline?: boolean | undefined;
     /** Where the values come from, or what shape they take. */
     helper?: ReactNode | undefined;
+    /** Show the helper only while the list has focus, as `FormField`'s `helperOnFocus`. */
+    helperOnFocus?: boolean | undefined;
     /** Why the last value was refused. */
     error?: ReactNode | undefined;
     /** Shown in the new-item box. */
@@ -65,4 +67,4 @@ export interface ListInputProps {
  *
  * Ported from the engine dashboard's `ui/ListField.tsx`.
  */
-export declare function ListInput({ label, itemName, value, onChange, multiline, helper, error, placeholder, disabled, optional, enterHint, addLabel, itemLabel, newItemLabel, moveUpLabel, moveDownLabel, removeLabel, addedMessage, removedMessage, movedMessage, }: ListInputProps): import("react").JSX.Element;
+export declare function ListInput({ label, itemName, value, onChange, multiline, helper, helperOnFocus, error, placeholder, disabled, optional, enterHint, addLabel, itemLabel, newItemLabel, moveUpLabel, moveDownLabel, removeLabel, addedMessage, removedMessage, movedMessage, }: ListInputProps): import("react").JSX.Element;

package/dist/ListInput/index.js

@@ -1,10 +1,10 @@
-export { ListInput } from '../chunk-6HXH57BL.js';
+export { ListInput } from '../chunk-GARACZAH.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-ZGX2DP7F.js';
+import '../chunk-FTEJPHBI.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Menu/index.js

@@ -1,7 +1,7 @@
-export { Menu } from '../chunk-LSB3EHBW.js';
+export { Menu } from '../chunk-TFH6SYWB.js';
+import '../chunk-OG6CL3EB.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-4FQT6ZAY.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Modal/index.js

@@ -1,8 +1,8 @@
-export { ConfirmModal, Modal } from '../chunk-BTHX2FS3.js';
+export { ConfirmModal, Modal } from '../chunk-TEEJSTFG.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-4FQT6ZAY.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/OrgTable/index.js

@@ -1,13 +1,13 @@
-export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from '../chunk-7FFDJQ23.js';
-import '../chunk-SX2DFTQV.js';
+export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from '../chunk-ZMJHK7DR.js';
+import '../chunk-MCPKHYMC.js';
 import '../chunk-S3BCVWTU.js';
 import '../chunk-6OF2DBKY.js';
 import '../chunk-53DVJCVW.js';
 import '../chunk-74WGARJE.js';
-import '../chunk-7RPGY3JE.js';
-import '../chunk-R25RGPUB.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-3UK4VFSK.js';
-import '../chunk-HI6Q2UXQ.js';
+import '../chunk-7RPGY3JE.js';
+import '../chunk-R25RGPUB.js';
 import '../chunk-BZFWDIV6.js';
+import '../chunk-HI6Q2UXQ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/SegmentedControl/index.js

@@ -1,6 +1,6 @@
-import '../chunk-UI6HWAWE.js';
-export { SegmentedControl } from '../chunk-LPHHDCN3.js';
-import '../chunk-HEOVQZL7.js';
+import '../chunk-UAQIUSSK.js';
+export { SegmentedControl } from '../chunk-EBBAAQDY.js';
+import '../chunk-JHQUT4WJ.js';
 import '../chunk-CBOICT64.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';

package/dist/Tabs/Tabs.d.ts

@@ -10,10 +10,28 @@ export interface TabsItem {
     icon?: ReactNode;
     /** How many things are behind this tab. Drawn as a Count beside the label. */
     count?: number | null;
+    /**
+     * What needs the reader behind this tab, drawn after the label: problems
+     * as a danger count, a warning or an unsaved change as a 6px dot. It
+     * replaces the count while it is set. `label` is what a screen reader hears.
+     */
+    marker?: TabsMarker | undefined;
     disabled?: boolean;
     /** Any extra props the consumer's renderItem needs to read. */
     [key: string]: unknown;
 }
+/**
+ * A tab's marker. ONE PER TAB, the most urgent: a problem, then a warning,
+ * then a change, so a row of tabs reads as "where is something wrong" first.
+ */
+export type TabsMarker = {
+    tone: 'danger';
+    count: number;
+    label: string;
+} | {
+    tone: 'warning' | 'changed';
+    label: string;
+};
 export interface TabsRenderItemProps {
     item: TabsItem;
     /**

package/dist/Tabs/index.d.ts

@@ -1,3 +1,3 @@
 import './Tabs.css';
 export { TabPanel, Tabs, tabId } from './Tabs.js';
-export type { TabPanelProps, TabsItem, TabsProps, TabsRenderItemProps, TabsSize, TabsVariant, } from './Tabs.js';
+export type { TabPanelProps, TabsItem, TabsMarker, TabsProps, TabsRenderItemProps, TabsSize, TabsVariant, } from './Tabs.js';

package/dist/Tabs/index.js

@@ -1,4 +1,4 @@
-export { TabPanel, Tabs, tabId } from '../chunk-HEOVQZL7.js';
+export { TabPanel, Tabs, tabId } from '../chunk-JHQUT4WJ.js';
 import '../chunk-CBOICT64.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';

package/dist/{Tabs-BWFQSWY3.css → Tabs-5I5Q5KKM.css}

@@ -337,3 +337,36 @@
     transition: none;
   }
 }
+
+/* ── markers ──────────────────────────────────────────────────────────────
+   What needs the reader behind a tab: a danger count for problems, a 6px
+   dot for a warning or an unsaved change. One per tab, the most urgent. */
+.crewlet-tabs__marker {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+}
+.crewlet-tabs__marker--danger {
+  min-width: 16px;
+  height: 16px;
+  padding: 0 var(--spacing-1);
+  border-radius: var(--radius-circle);
+  background: var(--color-feedback-danger-soft);
+  color: var(--color-feedback-danger-ink);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-2xs);
+  line-height: 1;
+}
+.crewlet-tabs__marker--warning,
+.crewlet-tabs__marker--changed {
+  width: 6px;
+  height: 6px;
+  border-radius: var(--radius-circle);
+}
+.crewlet-tabs__marker--warning {
+  background: var(--color-feedback-warning);
+}
+.crewlet-tabs__marker--changed {
+  background: var(--color-brand-accent);
+}

package/dist/TagsInput/index.js

@@ -1,10 +1,10 @@
-export { TagsInput } from '../chunk-MPXI6FM6.js';
+export { TagsInput } from '../chunk-ZHOM65MI.js';
 import '../chunk-LOECRMHA.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-6MU7HNB4.js';
 import '../chunk-RSAQOKH3.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ThemeSwitcher/index.js

@@ -1,8 +1,8 @@
-export { DensitySwitcher, ThemeSwitcher } from '../chunk-X6K6OZ47.js';
+export { DensitySwitcher, ThemeSwitcher } from '../chunk-WEIINZPA.js';
 export { applyDensity, applyStoredPreferences, applyTheme, resolveTheme, useDensityPreference, useSystemTheme, useThemePreference } from '../chunk-K3OWD7BJ.js';
-import '../chunk-UI6HWAWE.js';
-import '../chunk-LPHHDCN3.js';
-import '../chunk-HEOVQZL7.js';
+import '../chunk-UAQIUSSK.js';
+import '../chunk-EBBAAQDY.js';
+import '../chunk-JHQUT4WJ.js';
 import '../chunk-CBOICT64.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.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-IZHN5I3H.js';
+export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-HLBRPES3.js';
 import '../chunk-SEFMO2EV.js';
 import '../chunk-6MU7HNB4.js';
-import '../chunk-ZGX2DP7F.js';
-import '../chunk-PDUZO35I.js';
+import '../chunk-FTEJPHBI.js';
 import '../chunk-GXQ3B46I.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-4FQT6ZAY.js';
+import '../chunk-PDUZO35I.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-4FQT6ZAY.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/TreeCanvas/index.js

@@ -1,10 +1,10 @@
-export { TreeCanvas } from '../chunk-L7THQMFB.js';
+export { TreeCanvas } from '../chunk-5WEVLIB6.js';
 import '../chunk-S3BCVWTU.js';
-import '../chunk-VE6LD3KM.js';
+import '../chunk-2PZBIHRV.js';
 import '../chunk-53DVJCVW.js';
+import '../chunk-OG6CL3EB.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-4FQT6ZAY.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/TreeGrid/index.js

@@ -1,8 +1,8 @@
-export { TreeGrid } from '../chunk-SX2DFTQV.js';
+export { TreeGrid } from '../chunk-MCPKHYMC.js';
 import '../chunk-S3BCVWTU.js';
 import '../chunk-53DVJCVW.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/chunk-3L5NHASN.js

@@ -0,0 +1 @@
+import './CharacterPicker-ZEYIKUNQ.css';

package/dist/{chunk-L7THQMFB.js → chunk-5WEVLIB6.js}

@@ -1,5 +1,5 @@
 import { useTreeState, useMeasuredSizes, layoutForest, treeAncestors, useLayoutAnchor, treeExpandable, layoutConnectors, treeItemAction, treeStep, treePosInSet, treeSetSize, treeLevel, placeGroups } from './chunk-S3BCVWTU.js';
-import { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, Canvas } from './chunk-VE6LD3KM.js';
+import { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, Canvas } from './chunk-2PZBIHRV.js';
 import { focusables } from './chunk-R25RGPUB.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './TreeCanvas-L2XYONWL.css';

package/dist/{chunk-LPHHDCN3.js → chunk-EBBAAQDY.js}

@@ -1,4 +1,4 @@
-import { tabId } from './chunk-HEOVQZL7.js';
+import { tabId } from './chunk-JHQUT4WJ.js';
 import { useRoving, tabStop } from './chunk-CBOICT64.js';
 import { Count } from './chunk-BHHIIK3M.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';

package/dist/chunk-EXHQ2QVW.js

@@ -0,0 +1 @@
+import './HuePicker-5QIUR6L7.css';

package/dist/{chunk-ZGX2DP7F.js → chunk-FTEJPHBI.js}

@@ -2,7 +2,7 @@ import { useHeadingLevel, headingTag, HeadingLevelProvider, nextHeadingLevel } f
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Input-DRFNI26F.css';
+import './Input-RAKNQJCV.css';
 import { forwardRef, useRef, useState, useImperativeHandle, useEffect, useId } from 'react';
 import { XGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -162,6 +162,7 @@ var FormField = ({
   optional,
   requiredNews,
   helper,
+  helperOnFocus = false,
   error,
   labelAction,
   as = "div",
@@ -188,7 +189,12 @@ var FormField = ({
     helper ? /* @__PURE__ */ jsx("div", { id: helperId, className: "crewlet-form-field__helper", children: helper }) : null,
     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", className);
+  const classes = cx(
+    "crewlet-form-field",
+    Boolean(error) && "is-error",
+    helperOnFocus && helper ? "crewlet-form-field--helper-on-focus" : null,
+    className
+  );
   if (as === "fieldset") {
     return (
       /*

package/dist/{chunk-RIAZM6L3.js → chunk-G2AVKPSL.js}

@@ -1,4 +1,4 @@
-import { DisclosureAnatomy } from './chunk-FZVJDJFN.js';
+import { DisclosureAnatomy } from './chunk-ENJUPIND.js';
 import { useHeadingLevel } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Disclosure-VKBJJIZ7.css';

package/dist/{chunk-6HXH57BL.js → chunk-GARACZAH.js}

@@ -1,8 +1,8 @@
 import { Kbd } from './chunk-SMBKXWML.js';
-import { FormField, Textarea, Input } from './chunk-ZGX2DP7F.js';
+import { FormField, Textarea, Input } from './chunk-FTEJPHBI.js';
 import { announce } from './chunk-RSAQOKH3.js';
-import { isComposing } from './chunk-R25RGPUB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
+import { isComposing } from './chunk-R25RGPUB.js';
 import './ListInput-O7LJKOIG.css';
 import { useState, useRef, useLayoutEffect } from 'react';
 import { ArrowUpGlyph, ArrowDownGlyph, XGlyph, PlusGlyph } from '@crewlethq/icons/glyphs';
@@ -18,6 +18,7 @@ function ListInput({
   onChange,
   multiline = false,
   helper,
+  helperOnFocus,
   error,
   placeholder,
   disabled = false,
@@ -155,6 +156,7 @@ function ListInput({
       label,
       optional,
       helper,
+      helperOnFocus,
       error,
       className: "crewlet-list-input",
       labelAction: /* @__PURE__ */ jsx(

package/dist/{chunk-CVB7O3SZ.js → chunk-GOUKOXJK.js}

@@ -1,11 +1,11 @@
-import { Menu } from './chunk-LSB3EHBW.js';
-import { EmptyValue } from './chunk-EUCC37WY.js';
-import { Modal } from './chunk-BTHX2FS3.js';
 import { useCardHeaderSlot } from './chunk-AV2DXAEL.js';
-import { Checkbox } from './chunk-YCTMKKRA.js';
+import { Menu } from './chunk-TFH6SYWB.js';
+import { EmptyValue } from './chunk-EUCC37WY.js';
+import { Modal } from './chunk-TEEJSTFG.js';
 import { useClipboard } from './chunk-5VNUYO76.js';
-import { IconButton } from './chunk-4FQT6ZAY.js';
 import { Button } from './chunk-OG6CL3EB.js';
+import { Checkbox } from './chunk-YCTMKKRA.js';
+import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './DataTable-WZK3V62B.css';

package/dist/{chunk-UYK72NOS.js → chunk-GXYNEDNA.js}

@@ -1,5 +1,5 @@
 import { useListbox } from './chunk-6MU7HNB4.js';
-import { Input } from './chunk-ZGX2DP7F.js';
+import { Input } from './chunk-FTEJPHBI.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Combobox-4FUVYIE7.css';
 import { forwardRef, useId, useMemo, useRef, useCallback } from 'react';

package/dist/{chunk-IZHN5I3H.js → chunk-HLBRPES3.js}

@@ -1,10 +1,10 @@
 import { Select } from './chunk-SEFMO2EV.js';
-import { Input } from './chunk-ZGX2DP7F.js';
-import { Popover } from './chunk-PDUZO35I.js';
+import { Input } from './chunk-FTEJPHBI.js';
 import { today, shiftMonth, CalendarGrid, compareDays } from './chunk-GXQ3B46I.js';
-import { isComposing } from './chunk-R25RGPUB.js';
-import { IconButton } from './chunk-4FQT6ZAY.js';
 import { Button } from './chunk-OG6CL3EB.js';
+import { IconButton } from './chunk-4FQT6ZAY.js';
+import { Popover } from './chunk-PDUZO35I.js';
+import { isComposing } from './chunk-R25RGPUB.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './TimeWindowPicker-GBF4JDFI.css';
 import { useMemo, useState, useRef, useId, useEffect } from 'react';

package/dist/chunk-HV6IZFBK.js

@@ -0,0 +1,64 @@
+import { HuePicker } from './chunk-K5Q2DK3P.js';
+import { NODE_HUE_NAMES } from './chunk-AYKXMIOR.js';
+import { Popover } from './chunk-PDUZO35I.js';
+import { CharacterPicker } from './chunk-YXMCUKFI.js';
+import { Avatar } from './chunk-HI6Q2UXQ.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './AvatarPicker-PREY36MG.css';
+import { CREWLET_CHARACTER_GEOMETRY, CREWLET_CHARACTERS } from '@crewlethq/icons/characters';
+import { PencilGlyph } from '@crewlethq/icons/glyphs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function AvatarPicker({
+  value,
+  onChange,
+  name,
+  size = "lg",
+  characters = CREWLET_CHARACTERS,
+  disabled = false,
+  className
+}) {
+  const badge = /* @__PURE__ */ jsx(Avatar, { kind: "agent", name, character: value.character, hue: value.hue, size, decorative: true });
+  if (disabled) return /* @__PURE__ */ jsx("span", { className: cx("crewlet-avatar-picker", className), children: badge });
+  const now = `${CREWLET_CHARACTER_GEOMETRY[value.character].name} in ${NODE_HUE_NAMES[value.hue]}`;
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      label: "Profile icon",
+      align: "start",
+      className: "crewlet-avatar-picker__panel",
+      trigger: (open, toggle) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: cx("crewlet-avatar-picker", className),
+          "aria-label": `Change ${name}'s profile icon, now ${now}`,
+          "aria-expanded": open,
+          "aria-haspopup": "dialog",
+          onClick: toggle,
+          children: [
+            badge,
+            /* @__PURE__ */ jsx("span", { className: "crewlet-avatar-picker__pip", "aria-hidden": "true", children: /* @__PURE__ */ jsx(PencilGlyph, { size: 9 }) })
+          ]
+        }
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "crewlet-avatar-picker__body", children: [
+        /* @__PURE__ */ jsx("span", { className: "crewlet-avatar-picker__label", children: "Character" }),
+        /* @__PURE__ */ jsx(
+          CharacterPicker,
+          {
+            label: "Character",
+            value: value.character,
+            hue: value.hue,
+            characters,
+            onValueChange: (character) => onChange({ ...value, character })
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "crewlet-avatar-picker__label", children: "Color" }),
+        /* @__PURE__ */ jsx(HuePicker, { label: "Color", size: "sm", value: value.hue, onValueChange: (hue) => onChange({ ...value, hue }) })
+      ] })
+    }
+  );
+}
+
+export { AvatarPicker };

package/dist/{chunk-EUT7VBQG.js → chunk-IINFVK3W.js}

@@ -1,16 +1,16 @@
 import { Toolbar } from './chunk-PGRPNDWM.js';
-import { RelativeTime } from './chunk-3CZ7XAVY.js';
 import { PageHeader } from './chunk-HOXGBLEY.js';
-import { Kbd } from './chunk-SMBKXWML.js';
+import { RelativeTime } from './chunk-3CZ7XAVY.js';
+import { DateTimePicker } from './chunk-JCNUQ3US.js';
 import { useListbox, useOptionKeys } from './chunk-6MU7HNB4.js';
-import { Input } from './chunk-ZGX2DP7F.js';
-import { DataTable } from './chunk-CVB7O3SZ.js';
-import { Menu } from './chunk-LSB3EHBW.js';
-import { DateTimePicker } from './chunk-5I56UXBJ.js';
+import { Kbd } from './chunk-SMBKXWML.js';
+import { Input } from './chunk-FTEJPHBI.js';
+import { DataTable } from './chunk-GOUKOXJK.js';
+import { Menu } from './chunk-TFH6SYWB.js';
+import { Button } from './chunk-OG6CL3EB.js';
+import { IconButton } from './chunk-4FQT6ZAY.js';
 import { Popover } from './chunk-PDUZO35I.js';
 import { Count } from './chunk-BHHIIK3M.js';
-import { IconButton } from './chunk-4FQT6ZAY.js';
-import { Button } from './chunk-OG6CL3EB.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './DataView-N6JX464S.css';