@crewlethq/ui 0.2.0 → 0.3.0

package/dist/DateTimePicker-22VNXRWC.css

@@ -0,0 +1,199 @@
+/*
+ * DateTimePicker: a Select-shaped trigger over a calendar dialog.
+ *
+ * The trigger borrows the Select's geometry so a date box and a picker line
+ * up in the same toolbar; the panel holds the shared CalendarGrid, so the
+ * month looks and behaves the same here as in every other picker.
+ */
+
+.crewlet-datetime {
+  width: 100%;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-height: var(--size-control-md);
+  /* The side inset only: the control's own height is what makes the row, so a
+     date box, the select beside it and the button beside that are one
+     height. */
+  padding: 0 var(--spacing-2) 0 var(--spacing-3);
+  background: var(--color-surface-subtle);
+  border: 1px solid var(--color-border-control);
+  border-radius: var(--radius-md);
+  color: var(--color-text-primary);
+  font-family: inherit;
+  font-size: var(--font-size-compact);
+  text-align: left;
+  cursor: pointer;
+  transition: border-color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-datetime--sm {
+  min-height: var(--size-control-sm);
+  padding: 0 var(--spacing-2);
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-datetime:hover:not(:disabled) {
+  border-color: var(--color-border-hover);
+}
+
+/*
+ * Focus and open are drawn alike, and 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 most need one.
+ */
+.crewlet-datetime:focus-visible,
+.crewlet-datetime.is-open {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+  border-color: var(--color-focus);
+}
+
+.crewlet-datetime.is-disabled,
+.crewlet-datetime:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+/* Both glyphs are DECORATION and take the decoration step: the calendar says
+   a second time what the value beside it already reads as a date, and the
+   chevron what the control's own role already says. */
+svg.crewlet-datetime__icon,
+svg.crewlet-datetime__chevron {
+  color: var(--color-text-muted);
+  flex-shrink: 0;
+}
+
+.crewlet-datetime__label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-datetime__label.is-placeholder {
+  color: var(--color-text-tertiary);
+}
+
+/* ─── The panel ──────────────────────────────────────────────── */
+
+.crewlet-datetime__popover {
+  --crewlet-datetime-panel-min-width: 288px;
+
+  padding: 0;
+  /*
+   * The shared popover rule caps its height and scrolls what overflows, which
+   * put the time row under the fold. A calendar is one fixed-size thing: it is
+   * shown whole or it is not shown.
+   */
+  overflow: visible;
+  min-width: var(--crewlet-datetime-panel-min-width);
+  max-width: none;
+  max-height: none;
+}
+
+/*
+ * The width belongs to the PANEL, not to the overlay around it: drawn inline
+ * inside somebody else's popover (a filter chip's editor), the panel is the
+ * only element there is, and a calendar squeezed into a narrower host is a
+ * calendar with its weeks wrapped.
+ */
+.crewlet-datetime__panel {
+  --crewlet-datetime-panel-min-width: 288px;
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  padding: var(--spacing-3);
+  min-width: var(--crewlet-datetime-panel-min-width);
+}
+
+.crewlet-datetime__nav {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+}
+
+.crewlet-datetime__title {
+  flex: 1;
+  text-align: center;
+  font-size: var(--font-size-compact);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+}
+
+.crewlet-datetime__time {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  padding-top: var(--spacing-2);
+  border-top: 1px solid var(--color-border-default);
+}
+
+.crewlet-datetime__time-label {
+  flex: 1;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-datetime__time-sep {
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-datetime__time-input {
+  --crewlet-datetime-time-width: 44px;
+
+  width: var(--crewlet-datetime-time-width);
+  min-height: var(--size-control-sm);
+  padding: 0 var(--spacing-1);
+  text-align: center;
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-compact);
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text-primary);
+  background: var(--color-surface-subtle);
+  border: 1px solid var(--color-border-control);
+  /* A box is a box: the corner every field in the package wears. */
+  border-radius: var(--radius-md);
+  outline: none;
+  /* The native spinner is the platform's, not the theme's, and it halves the
+     room a two-digit value has. The arrow keys still step the value. */
+  appearance: textfield;
+  -moz-appearance: textfield;
+}
+
+.crewlet-datetime__time-input::-webkit-outer-spin-button,
+.crewlet-datetime__time-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.crewlet-datetime__time-input:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+  border-color: var(--color-focus);
+}
+
+.crewlet-datetime__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-2);
+  padding-top: var(--spacing-2);
+  border-top: 1px solid var(--color-border-default);
+}
+
+/* Now and Clear are both about the VALUE, so they sit together at the far end
+   from Done, which is about the panel. */
+.crewlet-datetime__shortcuts {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-datetime {
+    transition: none;
+  }
+}

package/dist/DescriptionList/DescriptionList.d.ts

@@ -0,0 +1,36 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+/** One pair, as a tuple: the term and what it is. */
+export type DescriptionListEntry = readonly [term: ReactNode, detail: ReactNode];
+export interface DescriptionListProps extends HTMLAttributes<HTMLDListElement> {
+    /** Tightens the rhythm for a panel that carries a dozen pairs. */
+    dense?: boolean | undefined;
+    /**
+     * The pairs. Given as tuples so a caller can build them from a record
+     * without inventing a key for each one; `DescriptionList.Item` children are
+     * the other form, for a pair whose detail is a component.
+     */
+    items?: readonly DescriptionListEntry[] | undefined;
+}
+/**
+ * Metadata: a term and what it is, several times over.
+ *
+ * NOT A LAYOUT. It is a `dl`, so a screen reader announces "3 items" and pairs
+ * each term with its own detail, and a reader can move between them as a list.
+ * That promise is the reason to reach for it, and the reason not to: a panel
+ * with two columns of unrelated content is a grid, not a description list, and
+ * spelling it as one tells a reader something untrue about what they are
+ * looking at.
+ *
+ * Each pair is wrapped in a `div`, which HTML allows inside a `dl` and which
+ * is what lets one pair be one grid row.
+ */
+export declare function DescriptionList({ dense, items, className, children, ...rest }: DescriptionListProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace DescriptionList {
+    var Item: typeof DescriptionListItem;
+}
+export interface DescriptionListItemProps extends HTMLAttributes<HTMLDivElement> {
+    /** What the value is called. */
+    term: ReactNode;
+}
+/** One term and its detail. */
+export declare function DescriptionListItem({ term, className, children, ...rest }: DescriptionListItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/DescriptionList/index.d.ts

@@ -0,0 +1,3 @@
+import './DescriptionList.css';
+export { DescriptionList, DescriptionListItem } from './DescriptionList.js';
+export type { DescriptionListProps, DescriptionListItemProps, DescriptionListEntry, } from './DescriptionList.js';

package/dist/DescriptionList/index.js

@@ -0,0 +1,2 @@
+export { DescriptionList, DescriptionListItem } from '../chunk-XN4JBAN3.js';
+import '../chunk-ODEQTPFM.js';

package/dist/DescriptionList-YYY3V3O6.css

@@ -0,0 +1,59 @@
+/*
+ * Metadata pairs on one grid.
+ *
+ * The term track is `minmax(120px, max-content)`: wide enough that short terms
+ * line up with each other, and free to grow for a long one rather than
+ * wrapping it into two lines beside a one-word value.
+ */
+
+.crewlet-description-list {
+  display: grid;
+  grid-template-columns: minmax(120px, max-content) 1fr;
+  gap: var(--spacing-2) var(--spacing-4);
+  margin: 0;
+  font-size: var(--font-size-compact);
+  align-items: baseline;
+}
+
+/*
+ * A pair is one grid row. `display: contents` is what puts the term and the
+ * detail on the list's OWN tracks: wrapped in a div that participates in the
+ * grid, every pair would be one cell and nothing would line up.
+ */
+.crewlet-description-list__pair {
+  display: contents;
+}
+
+.crewlet-description-list__term {
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-description-list__detail {
+  margin: 0;
+  min-width: 0;
+  color: var(--color-text-primary);
+  /* An id, a path or a URL is one unbreakable word to a line breaker, and this
+     is where those are shown. */
+  overflow-wrap: anywhere;
+}
+
+.crewlet-description-list--dense {
+  gap: var(--spacing-1) var(--spacing-3);
+}
+
+/*
+ * Narrow: the term over its detail. Two columns at this width leave a value
+ * column too narrow for the values it carries, which is worse than a taller
+ * list.
+ */
+@media (max-width: 480px) {
+  .crewlet-description-list {
+    grid-template-columns: 1fr;
+    gap: var(--spacing-1);
+  }
+
+  .crewlet-description-list__detail {
+    margin-bottom: var(--spacing-2);
+  }
+}

package/dist/DiffList/DiffList.d.ts

@@ -0,0 +1,47 @@
+import type { ReactNode } from 'react';
+/** What happened to one path between two documents. */
+export type DiffKind = 'added' | 'removed' | 'changed';
+export interface DiffRow {
+    kind: DiffKind;
+    /** Where in the document, such as `roles.planner.model`. */
+    path: ReactNode;
+    /** What was there. Read for a removal, and for the left half of a change. */
+    from?: ReactNode;
+    /** What is there now. Read for an addition, and for the right half. */
+    to?: ReactNode;
+}
+export interface DiffListLabels {
+    added: string;
+    removed: string;
+    changed: string;
+    /** Joins the two halves of a change, where the arrow is drawn. */
+    to: string;
+}
+export declare const DIFF_LIST_LABELS: DiffListLabels;
+export interface DiffListProps {
+    rows: DiffRow[];
+    /** What an empty diff says. Two identical documents are a fact, not a gap. */
+    emptyMessage?: ReactNode;
+    labels?: Partial<DiffListLabels>;
+    className?: string;
+}
+/**
+ * The difference between two documents, one path per row.
+ *
+ * COLOUR IS NEVER THE ONLY SIGNAL, and a diff is where that rule is easiest
+ * to break: green, red and amber rows read perfectly until somebody cannot
+ * tell them apart, which is one reader in twelve. Every row therefore carries
+ * its glyph AND its word, the word is in the accessibility tree rather than
+ * in a title, and the tint behind it is the third carrier rather than the
+ * first.
+ *
+ * AND THE ARROW IS NOT THE WORD EITHER. A change reads "from this to that";
+ * drawn, that is a glyph between two values, and a screen reader is given the
+ * word "to" in its place, because an arrow is announced as anything from
+ * "right arrow" to nothing at all.
+ *
+ * Monospace, because what a row holds is a path and two values out of a
+ * configuration document, where an aligned column of characters is the whole
+ * point and a proportional face makes two nearly-identical values look alike.
+ */
+export declare function DiffList({ rows, emptyMessage, labels: overrides, className }: DiffListProps): import("react/jsx-runtime").JSX.Element;

package/dist/DiffList/index.d.ts

@@ -0,0 +1,3 @@
+import './DiffList.css';
+export { DiffList, DIFF_LIST_LABELS } from './DiffList.js';
+export type { DiffKind, DiffListLabels, DiffListProps, DiffRow } from './DiffList.js';

package/dist/DiffList/index.js

@@ -0,0 +1,3 @@
+export { DIFF_LIST_LABELS, DiffList } from '../chunk-HQNHV7D6.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/DiffList-3EX64AAE.css

@@ -0,0 +1,94 @@
+/* DiffList: one path per row, with its mark, its word and its tint.
+
+   The tint is the soft step of the state the row is in and the text is the
+   matching ink step, which is the pairing the palette suite measures: a fill
+   is never text and an ink step is never a background. */
+/*
+ * HALF A STEP, between the rows and inside them. A diff row is a LINE OF A
+ * DOCUMENT rather than an item in a list: at the full 4px step a fifty-line
+ * diff gained two hundred pixels of nothing, and the tint that groups the
+ * added lines together stopped reading as a block. It is written as half the
+ * smallest step rather than as 2px so it still scales with the density
+ * setting, which is the whole reason the scale exists.
+ */
+.crewlet-diff-list {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--spacing-1) / 2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.crewlet-diff-list__row {
+  display: grid;
+  grid-template-columns: auto minmax(0, 200px) minmax(0, 1fr);
+  align-items: baseline;
+  gap: var(--spacing-2);
+  padding: calc(var(--spacing-1) / 2) var(--spacing-2);
+  border-radius: var(--radius-xs);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-2xs);
+}
+
+/* THE SERVER'S OWN WORDS: a change is added, removed or changed. The rules
+   this replaces read add, remove and replace, which no answer has ever
+   carried, so every diff row rendered untinted. */
+.crewlet-diff-list__row--added {
+  background: var(--color-feedback-success-soft);
+  color: var(--color-feedback-success-ink);
+}
+
+.crewlet-diff-list__row--removed {
+  background: var(--color-feedback-danger-soft);
+  color: var(--color-feedback-danger-ink);
+}
+
+.crewlet-diff-list__row--changed {
+  background: var(--color-feedback-warning-soft);
+  color: var(--color-feedback-warning-ink);
+}
+
+.crewlet-diff-list__mark {
+  display: inline-flex;
+  align-items: center;
+  /* The glyph carries the row's own ink, so the mark and its words read as
+     one thing rather than as a grey icon beside coloured text. */
+  color: inherit;
+}
+
+.crewlet-diff-list__path,
+.crewlet-diff-list__value {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-diff-list__value {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+/* THE OLD VALUE IS NOT DIMMED. It read at 0.75 opacity, which took the ink
+   this file pairs with its tint down to between 3.28:1 and 4.24:1 in light,
+   under the 4.5:1 the pairing exists to clear, and the value being replaced
+   is exactly the one a reader checks the new one against. The arrow, the word
+   "to" and the order are what say which half is which. */
+.crewlet-diff-list__from,
+.crewlet-diff-list__to {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-diff-list__arrow {
+  flex: none;
+}
+
+.crewlet-diff-list__empty {
+  margin: 0;
+  font-size: var(--font-size-compact);
+  color: var(--color-text-tertiary);
+}

package/dist/Disclosure/Disclosure.d.ts

@@ -0,0 +1,56 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type DisclosureHeadingLevel } from './anatomy.js';
+export type DisclosureVariant = 
+/** A section of the page that happens to be folded. */
+'default'
+/**
+ * An ASIDE: what was considered rather than what was decided. A rule down
+ * its edge lets a reader skip the whole block by its shape rather than by
+ * reading it.
+ */
+ | 'aside';
+export type DisclosureSize = 'default' | 'compact';
+export interface DisclosureProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'onToggle'> {
+    /** The always-visible words. */
+    title: ReactNode;
+    /** A fact inside the trigger: a duration, a model, a status word. */
+    meta?: ReactNode;
+    /** How many of something the section holds. */
+    count?: number | string | undefined;
+    /** Sets the title in the mono face. */
+    mono?: boolean | undefined;
+    /** Controls beside the trigger, outside the button. */
+    actions?: ReactNode;
+    /** Controlled open state. */
+    open?: boolean | undefined;
+    /** Uncontrolled initial state. */
+    defaultOpen?: boolean | undefined;
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    /**
+     * Mount the children only while open. For a section whose content is
+     * expensive: a syntax-highlighted record, a chart, a request nobody has
+     * asked for. Closed again, the children unmount and their state goes with
+     * them, which is the trade.
+     */
+    lazy?: boolean | undefined;
+    variant?: DisclosureVariant | undefined;
+    size?: DisclosureSize | undefined;
+    /**
+     * The heading the trigger is wrapped in. Defaults to the level the
+     * surrounding surface declares, so the same section is an `h3` on a page
+     * under an `h2` and an `h2` inside a dialog. `none` leaves the button
+     * unwrapped, for a disclosure that is not a section of anything.
+     */
+    headingLevel?: DisclosureHeadingLevel | undefined;
+    children?: ReactNode;
+}
+/**
+ * A labelled section the reader opens.
+ *
+ * NOT A BARE `details`. That element draws the platform's own marker instead
+ * of the chevron every other expander here uses, takes none of the hover,
+ * inset or type of this one, and cannot carry a count, a fact or a set of
+ * controls outside its summary. Two expanders that behave the same and look
+ * different is the specific thing a component library exists to stop.
+ */
+export declare function Disclosure({ title, meta, count, mono, actions, open: controlledOpen, defaultOpen, onOpenChange, lazy, variant, size, headingLevel, className, children, ...rest }: DisclosureProps): import("react/jsx-runtime").JSX.Element;

package/dist/Disclosure/anatomy.d.ts

@@ -0,0 +1,43 @@
+import type { KeyboardEventHandler, ReactNode } from 'react';
+import { type HeadingLevel } from '../utils/headingLevel.js';
+/** The level a disclosure's trigger is wrapped in, or no heading at all. */
+export type DisclosureHeadingLevel = HeadingLevel | 'none';
+export interface DisclosureAnatomyProps {
+    open: boolean;
+    onToggle: () => void;
+    /** The always-visible words. */
+    title: ReactNode;
+    /**
+     * A fact that belongs to the section, INSIDE the trigger: a duration, a
+     * model name. Text only, because it is part of the button's own name.
+     */
+    meta?: ReactNode;
+    /** How many of something the section holds. */
+    count?: number | string | undefined;
+    /** Sets the title in the mono face: a tool name, a config path. */
+    mono?: boolean | undefined;
+    /**
+     * Controls that belong to the section, rendered BESIDE the trigger and
+     * outside it. A button nested inside a button is not a thing, and pressing a
+     * copy control must not also collapse the thing it just copied.
+     */
+    actions?: ReactNode;
+    disabled?: boolean | undefined;
+    headingLevel: DisclosureHeadingLevel;
+    triggerId: string;
+    panelId: string;
+    /** The owning component's own class on the button, so its look can differ. */
+    triggerClassName?: string | undefined;
+    onKeyDown?: KeyboardEventHandler<HTMLButtonElement> | undefined;
+}
+/**
+ * The bar every disclosure in this package is built from: a chevron, the
+ * section's words, an optional fact and count inside the button, and the
+ * section's own controls outside it.
+ *
+ * ONE IMPLEMENTATION, because `Accordion.Item` and `Disclosure` are the same
+ * control with different state models: one belongs to a stack that opens one
+ * item at a time, the other stands alone. Written twice, the two came to
+ * disagree about where the actions go, which is the half that matters.
+ */
+export declare function DisclosureAnatomy({ open, onToggle, title, meta, count, mono, actions, disabled, headingLevel, triggerId, panelId, triggerClassName, onKeyDown, }: DisclosureAnatomyProps): import("react/jsx-runtime").JSX.Element;

package/dist/Disclosure/index.d.ts

@@ -0,0 +1,5 @@
+import './Disclosure.css';
+export { Disclosure } from './Disclosure.js';
+export type { DisclosureProps, DisclosureVariant, DisclosureSize } from './Disclosure.js';
+export { DisclosureAnatomy } from './anatomy.js';
+export type { DisclosureAnatomyProps, DisclosureHeadingLevel } from './anatomy.js';

package/dist/Disclosure/index.js

@@ -0,0 +1,6 @@
+export { Disclosure } from '../chunk-LWKJQTOM.js';
+export { DisclosureAnatomy } from '../chunk-5KPQ6D7N.js';
+import '../chunk-BHHIIK3M.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';