@crewlethq/ui 0.81.2 → 0.83.0

package/dist/ChipField-D4CW6XFA.css

@@ -0,0 +1,108 @@
+/*
+ * ChipField: chosen items as chips inside the field, before a bare text box.
+ * The chips and the box wrap as one line of words; the box takes whatever
+ * width the last line leaves, and a line of its own when that is too little.
+ */
+.crewlet-chip-field {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-1);
+  box-sizing: border-box;
+  width: 100%;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  cursor: text;
+}
+
+/* A field like any other: the field's fill, boundary and corner. */
+.crewlet-chip-field--boxed {
+  min-height: var(--size-control-lg);
+  padding: var(--spacing-1) var(--spacing-2);
+  border: 1px solid var(--color-border-field);
+  border-radius: var(--radius-md);
+  background-color: var(--color-surface-subtle);
+}
+
+/*
+ * ONE RING, the one every field in this package draws: an outline over the
+ * boundary, on the field rather than on the box inside it, because the
+ * field is what the reader sees as the control. The selector names the box
+ * rather than asking :focus-within, so tabbing to a chip's Remove control
+ * rings that control alone, not the field round it as well.
+ */
+.crewlet-chip-field--boxed:has(.crewlet-chip-field__input:focus-visible) {
+  outline: 2px solid var(--color-focus);
+  outline-offset: -1px;
+}
+
+/* Narrowed and tinted for a pointer, as the text box's ring is. See Input.css. */
+:where(:root[data-crewlet-focus='pointer']) .crewlet-chip-field--boxed:has(.crewlet-chip-field__input:focus-visible) {
+  outline-width: 1px;
+  outline-color: var(--color-border-selected);
+}
+
+/*
+ * The address line at the top of a view: full width, a rule under it, and
+ * the view's own side inset (`--crewlet-chip-field-inset`, the chat's row
+ * inset by default). Its focus is a bar along the rule; the transparent
+ * outline is what forced colors, which drops the bar, draws instead.
+ */
+.crewlet-chip-field--bare {
+  gap: var(--spacing-2);
+  min-height: var(--size-shell-topbar);
+  padding: var(--spacing-2) var(--crewlet-chip-field-inset, var(--spacing-5));
+  border-bottom: 1px solid var(--color-border-default);
+}
+
+.crewlet-chip-field--bare:has(.crewlet-chip-field__input:focus-visible) {
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+  box-shadow: inset 0 -2px 0 var(--color-focus);
+}
+
+.crewlet-chip-field__prefix {
+  flex: none;
+  color: var(--color-text-secondary);
+}
+
+/* The list lends its chips to the field's own line (ChipField.tsx spells its
+   role out, which a contents box can lose). */
+.crewlet-chip-field__chips {
+  display: contents;
+  list-style: none;
+}
+
+.crewlet-chip-field__chip {
+  display: inline-flex;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.crewlet-chip-field__input {
+  flex: 1;
+  min-width: 120px;
+  height: var(--size-control-md);
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0 var(--spacing-1);
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  outline: none;
+}
+
+.crewlet-chip-field--bare .crewlet-chip-field__input {
+  padding-inline: 0;
+}
+
+.crewlet-chip-field__input::placeholder {
+  color: var(--color-text-tertiary);
+  opacity: 1;
+}
+
+.crewlet-chip-field.is-disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}

package/dist/ColorField/index.js

@@ -1,11 +1,11 @@
-export { ColorField } from '../chunk-T24HBEU6.js';
+export { ColorField } from '../chunk-OOOVL77Y.js';
 import '../chunk-7W3LYIOC.js';
-import '../chunk-FB3TCNQP.js';
+import '../chunk-O7N6W52M.js';
 import '../chunk-PGCLHYVP.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
+import '../chunk-UAUP6XGK.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
-import '../chunk-H5XTJ7GJ.js';
-import '../chunk-UAUP6XGK.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Combobox/index.js

@@ -1,12 +1,12 @@
-export { Combobox } from '../chunk-6EWNMSS4.js';
-import '../chunk-7KHM2FZH.js';
-import '../chunk-FB3TCNQP.js';
+export { Combobox } from '../chunk-NNZRTR5M.js';
+import '../chunk-YGRTX67J.js';
+import '../chunk-O7N6W52M.js';
 import '../chunk-PGCLHYVP.js';
-import '../chunk-PQADV6P6.js';
-import '../chunk-2G355KDJ.js';
 import '../chunk-2YTOOH3A.js';
-import '../chunk-H5XTJ7GJ.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-UAUP6XGK.js';
-import '../chunk-NUZHC6MM.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-2G355KDJ.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/CommandPalette/index.js

@@ -1,18 +1,19 @@
-export { CommandPalette } from '../chunk-5CEQ3HLH.js';
-import '../chunk-C667GCU7.js';
-import '../chunk-7KHM2FZH.js';
-import '../chunk-ANTAQAR4.js';
-import '../chunk-FB3TCNQP.js';
+export { CommandPalette } from '../chunk-YXKSUILG.js';
+import '../chunk-ZXXZESCD.js';
+import '../chunk-YGRTX67J.js';
+import '../chunk-L72URIHR.js';
+import '../chunk-O7N6W52M.js';
 import '../chunk-PGCLHYVP.js';
-import '../chunk-MLDTLZAO.js';
-import '../chunk-PQADV6P6.js';
-import '../chunk-2G355KDJ.js';
+import '../chunk-CMAZZY2I.js';
 import '../chunk-DGXZ635L.js';
+import '../chunk-XSPCITPN.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
-import '../chunk-XSPCITPN.js';
-import '../chunk-H5XTJ7GJ.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-UAUP6XGK.js';
-import '../chunk-NUZHC6MM.js';
+import '../chunk-D2GT3CR4.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-2G355KDJ.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/CommentThread/index.js

@@ -1,22 +1,22 @@
-export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-ADGNISEI.js';
-import '../chunk-N2BF272H.js';
+export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-IAP7APOX.js';
+import '../chunk-HF5L56YQ.js';
 import '../chunk-EJNJMHQG.js';
 import '../chunk-RE3FBGQQ.js';
-import '../chunk-BT3GB7HC.js';
-import '../chunk-KTIQSSME.js';
-import '../chunk-BXCL6P5Z.js';
-import '../chunk-E35HYQMK.js';
-import '../chunk-ANTAQAR4.js';
-import '../chunk-FB3TCNQP.js';
+import '../chunk-IRONPJB4.js';
+import '../chunk-XZY6S3UC.js';
+import '../chunk-I4PBFJGX.js';
+import '../chunk-EBVZHVPD.js';
+import '../chunk-O7N6W52M.js';
 import '../chunk-PGCLHYVP.js';
-import '../chunk-MLDTLZAO.js';
-import '../chunk-PQADV6P6.js';
-import '../chunk-2G355KDJ.js';
+import '../chunk-CMAZZY2I.js';
 import '../chunk-DGXZ635L.js';
-import '../chunk-OMV5W53A.js';
 import '../chunk-XSPCITPN.js';
-import '../chunk-H5XTJ7GJ.js';
+import '../chunk-OMV5W53A.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-UAUP6XGK.js';
-import '../chunk-NUZHC6MM.js';
+import '../chunk-D2GT3CR4.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-2G355KDJ.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/CompactNav/CompactNav.d.ts

@@ -0,0 +1,175 @@
+/**
+ * The rail folded to its marks: each destination is its glyph over its name,
+ * in one column, and a whole group can fold into one tile whose flyout lists
+ * its places beside the rail.
+ *
+ * IT IS THE SAME LIST AS `SidebarNav`, DRAWN NARROW. Every prop a place takes
+ * here has the type `SidebarNav.Item` gives it (`NavFigure` for a badge and a
+ * count, `NavLinkProps` for a router's link, a reason string for a lock), so
+ * an application keeps ONE list of its places and hands each to whichever of
+ * the two the shell is drawing (`useAppShell().rail`). Two lists would be two
+ * answers to "where can I go from here", and the first place added to one of
+ * them is the place the other forgets.
+ *
+ * THE HIGHLIGHT IS ON THE GLYPH'S TILE, not the whole entry: the name under it
+ * stays quiet, and the current place reads at a glance down a column of
+ * shapes. It is the full rail's own selected row (raised, a hairline, no hue),
+ * drawn on the tile and from `aria-current`, so the two shapes say "you are
+ * here" the same way.
+ *
+ * A FIGURE RIDES THE TILE'S CORNER, and is READ as part of the name ("Inbox,
+ * 5 unread"), exactly as a full row's figure is, so nothing a reader needs is
+ * hidden by the fold: a folded group's tile carries its places' badges added
+ * up, and says each of them.
+ */
+import { type MouseEventHandler, type ReactNode } from 'react';
+import { type PlacementRect } from '../Layer/index.js';
+import type { NavFigure, NavLinkProps } from '../SidebarNav/index.js';
+export interface CompactNavProps {
+    /** Names the navigation region, as `SidebarNav`'s label does. */
+    label: string;
+    className?: string | undefined;
+    children?: ReactNode;
+}
+/** The column of tiles: a navigation landmark holding one list. */
+export declare function CompactNav({ label, className, children }: CompactNavProps): import("react").JSX.Element;
+/** What a place in the compact rail takes, whether it is a tile or a link in a flyout. */
+interface CompactPlace {
+    /** The place's name. Drawn under the glyph on a tile, beside it in a flyout. */
+    label: string;
+    /** The place's glyph (a nav glyph, `size="sm"`). Decoration: the label is the name. */
+    icon: ReactNode;
+    /** Where it goes. Without it (and without `renderLink`) the tile is a button. */
+    href?: string | undefined;
+    /** Whether this is the screen the reader is on. */
+    current?: boolean | undefined;
+    /**
+     * How many things here are waiting on the reader: the accent figure on the
+     * tile's corner, as `SidebarNav.Item`'s badge.
+     */
+    badge?: NavFigure | undefined;
+    /** How many of something the place holds: the quiet figure, as `SidebarNav.Item`'s count. */
+    count?: NavFigure | undefined;
+    /**
+     * Closed to this reader, and why ("Needs Admin access"). The place stays a
+     * link, its name carries the key, and the reason is its title and is read
+     * after its name, as `SidebarNav.Item`'s `locked`.
+     */
+    locked?: string | undefined;
+    /** Called when the pointer reaches the place and when it takes focus, as `SidebarNav.Item`'s. */
+    onPrefetch?: (() => void) | undefined;
+}
+export interface CompactNavItemProps extends CompactPlace {
+    /**
+     * The pointer's title. Defaults to the name with its figure and its lock,
+     * because the name under a tile is the rail's narrowest line and ends in an
+     * ellipsis where it is long: the title is where it is read whole.
+     */
+    title?: string | undefined;
+    /** The tile's shortcut, in the syntax `aria-keyshortcuts` takes: the Search tile's `Meta+K Control+K`. */
+    keyshortcuts?: string | undefined;
+    onClick?: MouseEventHandler<HTMLElement> | undefined;
+    /** Draws the link element, for a router that owns navigation, as `SidebarNav.Item`'s. */
+    renderLink?: ((props: NavLinkProps) => ReactNode) | undefined;
+    className?: string | undefined;
+}
+/**
+ * One destination: its glyph on a tile, its name under it.
+ *
+ * A LINK WHERE IT GOES SOMEWHERE AND A BUTTON WHERE IT DOES SOMETHING. A place
+ * with an `href` is an anchor (a modified press opens a tab, as a full row
+ * does); one without is a button, which is what the compact rail's Search tile
+ * is, since it opens the palette rather than going anywhere.
+ */
+export declare function CompactNavItem({ label, icon, href, current, badge, count, locked, onPrefetch, title, keyshortcuts, onClick, renderLink, className, }: CompactNavItemProps): import("react").JSX.Element;
+export interface CompactNavSeparatorProps {
+    /**
+     * What the runs either side of it are, said rather than drawn: "Company and
+     * Workspace". A separator with no name parts the column for the eye alone.
+     */
+    label?: string | undefined;
+}
+/**
+ * A short rule between two runs of tiles: the full rail's group headings,
+ * which a 76px column has no room to print.
+ *
+ * A SEPARATOR INSIDE AN ENTRY of the list, so the list holds only entries (a
+ * list item in another role breaks the list for assistive technology) and the
+ * rule is named where it has a name.
+ */
+export declare function CompactNavSeparator({ label }: CompactNavSeparatorProps): import("react").JSX.Element;
+/** A place in a folded group's flyout. */
+export interface CompactNavLink extends CompactPlace {
+    /** Unique within the group. */
+    key: string;
+    onClick?: MouseEventHandler<HTMLElement> | undefined;
+}
+export interface CompactNavGroupProps {
+    /** The group's name: "Company". Drawn under the tile and at the head of its flyout. */
+    label: string;
+    /** The group's glyph, for its tile. */
+    icon: ReactNode;
+    /** The group's places, in the order the full rail lists them. */
+    links: readonly CompactNavLink[];
+    /** Draws each link's element, for a router that owns navigation. */
+    renderLink?: ((props: NavLinkProps) => ReactNode) | undefined;
+    className?: string | undefined;
+}
+/**
+ * What a folded group's tile carries: its places' badges, ADDED UP, so the
+ * fold never hides what is waiting on the reader. One badge is drawn as it
+ * is; several are summed, keeping a `+` where any of them stopped counting
+ * ("50+" and 3 are "53+"); a value that is not a count is drawn as the first
+ * badge's own value with a `+`, since there is more than it says.
+ *
+ * The quiet counts are not carried: a count says how much a place holds, and
+ * a sum of how much six places hold is a figure about nothing.
+ */
+export declare function groupBadge(links: readonly Pick<CompactNavLink, 'badge'>[]): (number | string) | undefined;
+/**
+ * Where a flyout stands: BESIDE the rail, not beside the tile, so every
+ * group's flyout opens on one line a gap off the rail's edge, with its head
+ * level with the tile it opened from and slid back inside the bounds where
+ * the tile is near the window's foot.
+ *
+ * Pure arithmetic, in whichever coordinate space the caller uses for all
+ * three, for the reason `placePopup` is: none of it can be observed in jsdom.
+ */
+export declare function placeFlyout(tile: PlacementRect, railEnd: number, size: {
+    width: number;
+    height: number;
+}, bounds: PlacementRect, 
+/** How far above the tile's top the flyout's top stands: its own edge and inset, so its head is level with the tile. */
+lift?: number): {
+    left: number;
+    top: number;
+};
+/**
+ * A group folded into one tile, and its flyout.
+ *
+ * THE FLYOUT IS A MENU OF LINKS BESIDE THE RAIL. Pointing at the tile opens it
+ * after a moment; a press, Enter, Space or Right opens it too, and the keys
+ * put focus on its first place. In the flyout Up and Down move (wrapping),
+ * Home and End jump, Escape or Left close it and hand focus back to the tile,
+ * and Tab closes it and moves on FROM THE TILE, as if the flyout sat right
+ * after it: the flyout is drawn in the layer host at the end of the document,
+ * so the browser's own Tab from inside it would have left the rail for
+ * whatever came next in the document.
+ *
+ * EVERY PLACE IS A REAL LINK, so a modified press opens a tab as it does in
+ * the full rail; choosing one closes the flyout and, where the keyboard chose
+ * it, hands focus back to the tile.
+ *
+ * WHAT OPENED IT DECIDES WHAT CLOSES IT. Opened by the pointer resting on the
+ * tile, it closes when the pointer leaves both; opened by a press or the keys,
+ * it stays until it is dismissed, so a reader who clicked does not lose it by
+ * moving the pointer toward it the long way round. It is on the shared layer
+ * stack, so a press outside closes it and Escape closes it before anything
+ * beneath it.
+ *
+ * THE TILE SAYS WHERE THE READER IS: it is current (`aria-current="true"`,
+ * since the tile is not itself the page) while one of its places is, so the
+ * fold never hides which part of the product the reader is in.
+ */
+export declare function CompactNavGroup({ label, icon, links, renderLink, className }: CompactNavGroupProps): import("react").JSX.Element;
+export {};

package/dist/CompactNav/index.d.ts

@@ -0,0 +1,4 @@
+import '../HitArea/HitArea.css';
+import './CompactNav.css';
+export { CompactNav, CompactNavGroup, CompactNavItem, CompactNavSeparator, groupBadge, placeFlyout } from './CompactNav.js';
+export type { CompactNavGroupProps, CompactNavItemProps, CompactNavLink, CompactNavProps, CompactNavSeparatorProps, } from './CompactNav.js';

package/dist/CompactNav/index.js

@@ -0,0 +1,9 @@
+export { CompactNav, CompactNavGroup, CompactNavItem, CompactNavSeparator, groupBadge, placeFlyout } from '../chunk-ICE3D63E.js';
+import '../chunk-TEV5REGB.js';
+import '../chunk-HTS5RJ7S.js';
+import '../chunk-OMV5W53A.js';
+import '../chunk-2YTOOH3A.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
+import '../chunk-UT6CW3C7.js';
+import '../chunk-ODEQTPFM.js';