@crewlethq/ui 0.2.0 → 0.4.0

package/dist/Tabs/Tabs.d.ts

@@ -0,0 +1,97 @@
+import { type ReactNode } from 'react';
+export type TabsVariant = 'pill' | 'underline';
+export type TabsSize = 'sm' | 'md';
+export interface TabsItem {
+    /** Stable identity: the value reported, and half of the tab's id. */
+    value: string;
+    /** Visible label text or node. */
+    label: ReactNode;
+    /** A glyph drawn before the label. A component, not a name. */
+    icon?: ReactNode;
+    /** How many things are behind this tab. Drawn as a Count beside the label. */
+    count?: number | null;
+    disabled?: boolean;
+    /** Any extra props the consumer's renderItem needs to read. */
+    [key: string]: unknown;
+}
+export interface TabsRenderItemProps {
+    item: TabsItem;
+    /**
+     * Base and state-modifier class for the tab. Apply it to the element you
+     * render so the variant chrome stays consistent. In router mode the
+     * consumer appends its own active modifier, because the URL is the source
+     * of truth and the slider is measured from whichever child carries it.
+     */
+    className: string;
+    /** True when `value === item.value`. */
+    isActive: boolean;
+    /** Calls onValueChange?.(item.value) when invoked. */
+    onSelect: () => void;
+    /** Pre-rendered icon, label and count nodes for the tab body. */
+    children: ReactNode;
+}
+export interface TabsProps {
+    items: TabsItem[];
+    variant?: TabsVariant;
+    size?: TabsSize;
+    /** Names the row. A tab row with no name is announced as "tab list" alone. */
+    ariaLabel?: string;
+    className?: string;
+    /** Currently active item value. */
+    value?: string;
+    /** Fires when a tab is chosen. */
+    onValueChange?: (value: string) => void;
+    /**
+     * The id of the [TabPanel] this row controls. With it every tab carries a
+     * stable id and `aria-controls`, which is what lets a screen reader move
+     * from a tab to the section it opens.
+     */
+    panelId?: string;
+    /**
+     * Render each item yourself, for a row of ROUTER LINKS. The root becomes a
+     * `nav` and nothing carries a tab role: a link that navigates is not a tab,
+     * and a screen reader told otherwise looks for a panel that never arrives.
+     */
+    renderItem?: (props: TabsRenderItemProps) => ReactNode;
+}
+/**
+ * The id of the tab that labels a tab panel, so a panel and the row that
+ * controls it agree on it without passing ids between them.
+ */
+export declare function tabId(panelId: string, value: string): string;
+/**
+ * The in-page sections a screen owns, as the ARIA tabs pattern with MANUAL
+ * activation.
+ *
+ * WHAT CHANGED. Every tab was a tab stop and no arrow key did anything, so a
+ * keyboard user walked an eight-tab row with eight presses of Tab and a
+ * screen reader was told a list of eight independent buttons. It is one stop
+ * now: the arrows, Home and End move focus along the row and Enter or Space
+ * selects, which a real button already turns into its own click.
+ *
+ * SELECTION DOES NOT FOLLOW FOCUS. A tab is a section, and in this product a
+ * section pushes a history entry: a row that selected on every arrow press
+ * left one entry per keystroke for Back to walk through.
+ *
+ * AND NO `aria-current`. A tab says which one is chosen with
+ * `aria-selected`; `aria-current="page"` on top of it told a screen reader
+ * the tab was the page the reader was on, which is what a navigation link
+ * says. In router mode that IS what the items are, so the root becomes a
+ * `nav`, the tab roles go, and the consumer's own link carries the state.
+ */
+export declare function Tabs({ items, variant, size, ariaLabel, className, value, onValueChange, panelId, renderItem, }: TabsProps): import("react/jsx-runtime").JSX.Element;
+export interface TabPanelProps {
+    /** The same id the row was given as `panelId`. */
+    id: string;
+    /** The selected tab's value, which is what labels the panel. */
+    value: string;
+    children?: ReactNode;
+    className?: string;
+}
+/**
+ * The region a tab row controls, labelled by whichever tab is selected.
+ *
+ * It keeps the layout it sits in, so wrapping a screen's sections in one
+ * changes nothing a reader can see and everything a screen reader hears.
+ */
+export declare function TabPanel({ id, value, children, className }: TabPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/Tabs/index.d.ts

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

package/dist/Tabs/index.js

@@ -0,0 +1,4 @@
+export { TabPanel, Tabs, tabId } from '../chunk-QEUY3A5P.js';
+import '../chunk-BHHIIK3M.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/Tabs/roving.d.ts

@@ -0,0 +1,67 @@
+import { type KeyboardEvent } from 'react';
+/**
+ * Which item in a row holds its ONE TAB STOP.
+ *
+ * The selected one, unless it is disabled: a browser refuses a disabled
+ * button focus, so a row whose chosen option is disabled (a tab for a section
+ * a plan does not include, a lens with nothing to draw) had its only stop on
+ * an element Tab skips, and the keyboard could not enter the row at all. It
+ * falls back to the first option that can take focus, and to none where every
+ * option is disabled, which is a row with nothing to reach.
+ *
+ * `selected` is where the stop BELONGS rather than what is chosen: under
+ * manual activation that is where focus last was, which is not the chosen
+ * option (see [RovingOptions.followFocus]).
+ */
+export declare function tabStop(items: readonly {
+    disabled?: boolean | undefined;
+}[], selected: number): number;
+/**
+ * How a row places its ONE TAB STOP while focus moves inside it.
+ */
+export interface RovingOptions {
+    /**
+     * Whether the stop FOLLOWS FOCUS rather than staying on the selection.
+     *
+     * Off by default, which is the only honest answer for a row that SELECTS AS
+     * FOCUS MOVES: there the two are the same element, so the stop needs no
+     * state of its own and an arrow key costs the render it was going to cost
+     * anyway.
+     *
+     * On is what a row whose arrows do NOT select has to have. With the stop
+     * left on the selection, a reader who arrows three options along without
+     * committing, Tabs out of the row and Tabs back is dropped on the option
+     * they started from rather than the one they left, and every move they made
+     * is gone with nothing said about it. It is half of manual activation, not
+     * a refinement of it.
+     */
+    followFocus?: boolean | undefined;
+}
+/**
+ * Roving focus over a row of buttons: ONE TAB STOP for the row, the arrows to
+ * move inside it.
+ *
+ * WHY ONE STOP. A row of eight lenses is one control, not eight: Tab should
+ * pass it, not walk it. That is the ARIA pattern for a tablist, a radio group
+ * and a toolbar alike, and it is what makes the arrows mean anything.
+ *
+ * `select` is called on a move only where the row SELECTS AS FOCUS MOVES (a
+ * radio group, whose choice is a setting). A tab row leaves selection to
+ * Enter and Space, which a real button already turns into its own click: a
+ * tab is a section that pushes a history entry, and a row that selected on
+ * every arrow press left one entry per keystroke for Back to walk through.
+ *
+ * THE TWO ARGUMENTS GO TOGETHER. A caller that passes no `select` is a row
+ * under manual activation and wants `followFocus`, because the stop and the
+ * selection have come apart; a caller that passes one wants neither.
+ *
+ * A DISABLED BUTTON IS STEPPED OVER rather than focused: a browser refuses it
+ * focus, so a move that lands on one drops focus on the page body and the
+ * next arrow press does nothing at all.
+ */
+export declare function useRoving(count: number, select: ((index: number) => void) | null, { followFocus }?: RovingOptions): {
+    buttons: import("react").RefObject<(HTMLButtonElement | null)[]>;
+    onKeyDown: (event: KeyboardEvent<HTMLElement>, vertical: boolean) => void;
+    onFocusAt: (index: number) => void;
+    focused: number | null;
+};

package/dist/Tabs-VLICJFVB.css

@@ -0,0 +1,275 @@
+/*
+ * The pill register: Tabs and SegmentedControl.
+ *
+ * One item layout under two chromes. `underline` is a flat strip on a
+ * baseline with a sliding accent bar, for the sections of a screen;
+ * `pill` is a segmented chip row inside a tinted container, for a lens,
+ * a setting or a compact switch. SegmentedControl draws with the same
+ * classes, because a row of choices should not look like two different
+ * controls depending on which component a screen reached for.
+ *
+ * Every step comes from a token, the active chip included: the shadow it used
+ * to lift with was a black literal, invisible on a dark panel and a smudge on
+ * a light one.
+ */
+
+.crewlet-tabs {
+  display: inline-flex;
+  align-items: center;
+  font-family: inherit;
+}
+
+/* ─── Underline (sliding accent bar) ──────────────────────────── */
+/*
+ * THE ROW SCROLLS RATHER THAN OVERFLOWING THE PAGE. A section can own more
+ * tabs than a narrow window has room for, and a row that does not scroll
+ * pushes the whole screen sideways instead. The scrollbar itself is hidden:
+ * it would sit on the baseline the tabs and their bar are drawn on, and the
+ * row is reachable by the arrow keys either way.
+ */
+.crewlet-tabs--underline {
+  display: flex;
+  gap: var(--spacing-2);
+  border-bottom: 1px solid var(--color-border-default);
+  position: relative;
+  width: 100%;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.crewlet-tabs--underline::-webkit-scrollbar {
+  display: none;
+}
+
+.crewlet-tabs--underline::after {
+  /*
+   * The sliding bar, positioned against the row from two custom properties
+   * the component writes after measuring the active tab. A width of 0 keeps
+   * it invisible until the first measurement lands, so nothing needs an
+   * opacity flag.
+   */
+  content: '';
+  position: absolute;
+  bottom: -1px;
+  /*
+   * Under the LABEL, not under the tab's box: the measurement is the button,
+   * which carries the small side pad an inset focus ring needs, and a bar
+   * that ran the width of that pad read as a wider word than the one above
+   * it.
+   */
+  left: calc(var(--crewlet-tabs-slider-left, 0px) + var(--spacing-1));
+  width: max(0px, calc(var(--crewlet-tabs-slider-width, 0px) - var(--spacing-1) * 2));
+  height: 2px;
+  background: var(--color-brand-accent);
+  border-radius: var(--radius-pill) var(--radius-pill) 0 0;
+  transition:
+    left var(--motion-duration-base) var(--motion-easing-default),
+    width var(--motion-duration-base) var(--motion-easing-default);
+  pointer-events: none;
+}
+
+/* ─── Pill (segmented control) ────────────────────────────────── */
+/*
+ * A WELL WITH CHIPS IN IT, not a panel with buttons in it. The container is
+ * the inset surface and carries no boundary of its own: the chip that is on
+ * is what the reader looks for, and it is found by being the one thing lifted
+ * off the well rather than by a border around the whole set.
+ *
+ * The inset is 2px, which is smaller than the scale's first step on purpose:
+ * it is the gap a chip needs to read as sitting IN the well, and a 4px one
+ * makes the row a control step taller than the button beside it.
+ */
+.crewlet-tabs--pill {
+  --crewlet-tabs-pill-inset: 2px;
+
+  gap: var(--crewlet-tabs-pill-inset);
+  padding: var(--crewlet-tabs-pill-inset);
+  background: var(--color-surface-inset);
+  border-radius: var(--radius-md);
+  width: fit-content;
+}
+
+/* ─── Tab item (shared) ───────────────────────────────────────── */
+/*
+ * A TARGET IS TWO DIMENSIONS. The height has been floored since this row was
+ * first drawn and the width was floored by nothing at all: a tab is side
+ * padding around whatever it holds, so a one-character mark or a bare glyph
+ * made a target as narrow as its own content. Measured on the engine's rail,
+ * the density row's chips stood 23.1px, 26px and 22.2px wide at the reader's
+ * default density and 20.2px, 23.1px and 19.3px at the compact one, where the
+ * floor a finger needs is 24px in BOTH directions.
+ *
+ * It is on the shared item rather than on the segmented option, because the
+ * underline chrome is the same padding around the same content and has the
+ * same hole. A tab whose label is wider than the floor is untouched.
+ */
+.crewlet-tabs__tab {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-1);
+  /* Never under the 24px target floor, at any density. */
+  min-height: var(--size-control-sm);
+  min-width: var(--size-target-min);
+  background: transparent;
+  border: 0;
+  color: var(--color-text-tertiary);
+  font: inherit;
+  font-size: var(--font-size-compact);
+  font-weight: var(--font-weight-medium);
+  text-decoration: none;
+  cursor: pointer;
+  white-space: nowrap;
+  transition:
+    background-color var(--motion-duration-fast) var(--motion-easing-default),
+    color var(--motion-duration-fast) var(--motion-easing-default),
+    box-shadow var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+/*
+ * Underline tabs sit flush on the baseline and the slider is the indicator,
+ * so the label carries no chrome of its own: its only side pad is the room
+ * the focus ring is drawn in, and the labels stand one scale step apart.
+ */
+.crewlet-tabs--underline .crewlet-tabs__tab {
+  gap: var(--spacing-2);
+  padding: var(--spacing-2) var(--spacing-1);
+  font-size: var(--font-size-compact);
+  position: relative;
+}
+
+.crewlet-tabs--underline.crewlet-tabs--sm .crewlet-tabs__tab {
+  font-size: var(--font-size-xs);
+}
+
+/*
+ * THE RING IS DRAWN INSIDE THE TAB. The row is a scroller, so an outset ring
+ * on any tab in it is clipped by the row's own box, top and bottom, and on
+ * the first and last tabs at the ends as well. This is what
+ * --size-focus-ring-inset-offset exists for.
+ */
+.crewlet-tabs--underline .crewlet-tabs__tab:focus-visible {
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+/*
+ * A CHIP STANDS SHORTER THAN THE CONTROL IT SITS BESIDE, and it is the row
+ * that has to match: the well adds its inset above and below every chip, so a
+ * chip at a full control step makes the whole segmented row taller than the
+ * button next to it. Six pixels off the md step and four off the sm one is
+ * what the engine's own segmented row has always drawn.
+ *
+ * AND THE FLOOR IS TAKEN AGAIN AFTER THE SUBTRACTION. --size-control-sm
+ * carries a 24px floor of its own, but subtracting from a step subtracts from
+ * its floor too: at compact density `calc(var(--size-control-sm) - 4px)` is
+ * 20px, under the target a finger can hit. max() against --size-target-min
+ * leaves the value exactly 24px at density 1 and reachable at every other.
+ *
+ * The corner is one hairline tighter than the well around it rather than a
+ * step of its own, which is what reads as a chip sitting IN the well.
+ *
+ * AND THE CONTENT IS CENTRED IN THE CHIP. It was aligned to the start, for a
+ * chip stretched on a grid track, which is a case the pill chrome's own
+ * `width: fit-content` container cannot produce: the row is sized to its
+ * chips, so no chip is ever wider than its content except by the target floor
+ * above. Under that floor start alignment is a visible defect rather than an
+ * invisible preference: a 12px glyph in a 24px chip sat 4px from one edge and
+ * 8px from the other, and a one-letter mark sat further off still. The
+ * stretched row that wanted a common inner edge is the segmented CARD row,
+ * and that mode aligns its own options to the start.
+ */
+.crewlet-tabs--pill .crewlet-tabs__tab {
+  min-height: max(var(--size-target-min), calc(var(--size-control-md) - 6px));
+  padding: 0 var(--spacing-3);
+  border-radius: var(--radius-chip);
+  font-size: var(--font-size-xs);
+}
+
+/*
+ * THE SMALL CHIP IS THE QUIET ONE. It is the register the rail's foot wears,
+ * where a theme row and a density row sit beside a status pill and are read
+ * past rather than read, so its side pad is the scale's first step rather
+ * than its second and its glyph is the step under the label register's.
+ *
+ * The height does not follow: at the reader's default density this chip is
+ * already exactly --size-target-min, so a shorter one would be a target a
+ * finger misses. The whole reduction comes out of the width, where the pad is
+ * spent, and the floor above catches what is left.
+ */
+.crewlet-tabs--pill.crewlet-tabs--sm .crewlet-tabs__tab {
+  min-height: max(var(--size-target-min), calc(var(--size-control-sm) - 4px));
+  padding: 0 var(--spacing-1);
+  font-size: var(--font-size-2xs);
+}
+
+.crewlet-tabs--pill.crewlet-tabs--sm .crewlet-tabs__icon {
+  font-size: var(--font-size-xs);
+}
+
+/*
+ * A HOVER IS A BRIGHTENING, NOT A FILL, in both chromes. The fill is what the
+ * chip that is on wears, and a hovered neighbour wearing a lighter version of
+ * it is a second answer that looks half-chosen; on the underline row the
+ * whole indicator is the bar, so a tinted box under a hovered label is a
+ * second indicator saying something else.
+ */
+.crewlet-tabs__tab:hover:not(.is-disabled):not(.is-active) {
+  color: var(--color-text-primary);
+}
+
+.crewlet-tabs__tab.is-active {
+  color: var(--color-text-primary);
+}
+
+.crewlet-tabs--pill .crewlet-tabs__tab.is-active {
+  background: var(--color-surface-subtle);
+  box-shadow: var(--shadow-xs);
+}
+
+/*
+ * THE RING IS AN OUTLINE. Forced-colors mode drops every box-shadow and keeps
+ * outlines, so a ring drawn as a shadow disappears for exactly the readers who
+ * need one most.
+ */
+.crewlet-tabs__tab:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}
+
+.crewlet-tabs__tab.is-disabled,
+.crewlet-tabs__tab:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+/* A glyph beside a label is the label's own size, so the two sit on one line
+   rather than the mark outweighing the word. */
+.crewlet-tabs__icon {
+  display: inline-flex;
+  font-size: var(--font-size-sm);
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.crewlet-tabs__label {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+}
+
+/* The panel a row controls keeps the layout it sits in. */
+.crewlet-tab-panel {
+  display: contents;
+}
+
+/*
+ * The slider ARRIVES rather than travels, and a chip changes without a fade.
+ * The indicator still moves; what stops is the animation between the two
+ * places it can be.
+ */
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-tabs--underline::after,
+  .crewlet-tabs__tab {
+    transition: none;
+  }
+}

package/dist/Tag/Tag.d.ts

@@ -0,0 +1,107 @@
+import type { HTMLAttributes, MouseEvent, ReactNode } from 'react';
+import type { PhaseTone, Tone } from '../utils/tone.js';
+/**
+ * Which vocabulary a tag speaks: a state, or a phase. Both, because the same
+ * pill draws "failed" on the Model screen and "execute" on the turn beside it,
+ * and a second component for the second vocabulary would be one recipe spelled
+ * twice.
+ */
+export type TagVariant = Tone | PhaseTone;
+/**
+ * How much room the pill takes. The engine draws ONE badge and spends its
+ * variation on tone, so these are three heights of that badge rather than
+ * three different marks: `sm` is the engine's own geometry and the default,
+ * `xs` a denser mark for a packed row, `md` a small control's height for a
+ * toolbar.
+ */
+export type TagSize = 'xs' | 'sm' | 'md';
+/**
+ * The sizes a tag that ACTS may take.
+ *
+ * `xs` is an 18px pill, and a pointer target under 24px fails WCAG 2.2, so the
+ * interactive form starts at `sm`. It is refused by the type rather than
+ * documented, because a filter toggle that is 6px too short is a defect
+ * nothing else in the build would ever report.
+ */
+export type InteractiveTagSize = Exclude<TagSize, 'xs'>;
+export type TagAppearance = 'soft' | 'outline';
+interface TagLook {
+    /** The state or the phase this tag names. Neutral by default. */
+    variant?: TagVariant | undefined;
+    /** A tinted fill, or a boundary over the surface beneath. */
+    appearance?: TagAppearance | undefined;
+    /** Drawn before the label. A glyph component, not a name. */
+    leadingIcon?: ReactNode;
+    /**
+     * Draws the variant's mark before the label. For a list where several tags
+     * of different states sit in one column and the mark is what a reader scans.
+     */
+    dot?: boolean | undefined;
+    /** A number after the label, in the tag's own ink. */
+    count?: number | string | undefined;
+    /** A machine value: an id, a CIDR range, a revision. */
+    monospace?: boolean | undefined;
+    /**
+     * Fade the tag in on mount.
+     *
+     * OFF BY DEFAULT, which is the change from 0.2.0. Tags mount in their
+     * hundreds on a data push, and a list that animates every arrival is a list
+     * nobody can read while it is arriving. Guarded by reduced motion either way.
+     */
+    animateIn?: boolean | undefined;
+}
+/** A tag that only labels: it takes no press and nothing removes it. */
+export interface StaticTagProps extends TagLook, Omit<HTMLAttributes<HTMLSpanElement>, 'onClick'> {
+    size?: TagSize | undefined;
+    onClick?: undefined;
+    onRemove?: undefined;
+    pressed?: undefined;
+}
+/**
+ * A tag that acts: a filter that toggles, a chip somebody can take off, or
+ * both.
+ *
+ * WITH BOTH, IT IS TWO CONTROLS. The press and the remove are siblings inside
+ * the pill rather than one nested in the other: a `<button>` inside a
+ * `<button>` is invalid markup, and what a browser and a screen reader make of
+ * it is one control the inner half is unreachable from.
+ */
+export interface InteractiveTagProps extends TagLook, Omit<HTMLAttributes<HTMLElement>, 'onClick'> {
+    size?: InteractiveTagSize | undefined;
+    /** Makes the tag a real button, announced with its pressed state. */
+    onClick?: ((event: MouseEvent<HTMLButtonElement>) => void) | undefined;
+    /** For a tag that toggles a filter, whether that filter is on. */
+    pressed?: boolean | undefined;
+    /** Renders a remove control that fires this. */
+    onRemove?: (() => void) | undefined;
+    /** Names the remove control. */
+    removeAriaLabel?: string | undefined;
+}
+export type TagProps = StaticTagProps | InteractiveTagProps;
+/**
+ * A small pill that names a state, a phase or a value.
+ *
+ * COLOUR IS NEVER THE ONLY CARRIER. Every tag renders its label, in every
+ * variant, so a reader who cannot separate the warning hue from the danger one
+ * still reads two different words. `dot` adds the shape half for a column
+ * where the mark is what gets scanned; the word stays either way.
+ *
+ * THE FILL AND THE INK ARE DIFFERENT STEPS. A tag is the tone's `soft` tint
+ * under the tone's `ink`, never the solid fill with a label on it: the fill
+ * step is measured as a MARK, at 3:1, and putting text on it would put that
+ * text under the 4.5:1 it has to clear. 0.2.0 spelled five dark-theme literals
+ * here instead, which measured between 1.14:1 and 1.58:1 on a light page.
+ *
+ * ITS LINE BOX IS FIXED. The height comes from the size step rather than from
+ * the content, so a cell that holds a tag on one row and nothing on the next
+ * is the same height on both and a table does not ripple as states arrive.
+ *
+ * A TAG THAT ACTS IS FOUR PIXELS TALLER THAN ONE THAT LABELS, and that is the
+ * one place this pill departs from the engine's badge. The engine draws its
+ * actionable badge at the inert one's 20px, which is a pointer target under
+ * the 24px WCAG 2.2 accepts; everything else about the two, the tint, the ink,
+ * the radius, the type and the padding, is identical, so a row still reads as
+ * one set.
+ */
+export declare function Tag(props: TagProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Tag/index.d.ts

@@ -0,0 +1,3 @@
+import './Tag.css';
+export { Tag } from './Tag.js';
+export type { InteractiveTagProps, InteractiveTagSize, StaticTagProps, TagAppearance, TagProps, TagSize, TagVariant, } from './Tag.js';

package/dist/Tag/index.js

@@ -0,0 +1,3 @@
+export { Tag } from '../chunk-S2XHHEW4.js';
+import '../chunk-PZSWF74H.js';
+import '../chunk-ODEQTPFM.js';