@crewlethq/ui 0.2.0 → 0.3.0

package/dist/RelativeTime/RelativeTime.d.ts

@@ -0,0 +1,31 @@
+import type { TimeHTMLAttributes } from 'react';
+import { type TimeValue } from './format.js';
+export type RelativeTimeMode = 
+/** "4m ago", "in 30m", "just now", "due". When something happened. */
+'relative'
+/** "4m 20s". How long something has been going. */
+ | 'elapsed';
+export interface RelativeTimeProps extends Omit<TimeHTMLAttributes<HTMLTimeElement>, 'dateTime'> {
+    value: TimeValue;
+    mode?: RelativeTimeMode | undefined;
+    /**
+     * Overrides the shared clock, for a story or a suite. Left alone, every
+     * relative time in the document advances together on one ticker.
+     */
+    now?: number | undefined;
+    /** What an unparseable or absent value means. */
+    emptyLabel?: string | undefined;
+}
+/**
+ * When something happened, kept current.
+ *
+ * A REAL `time` ELEMENT, carrying the exact instant in `dateTime` and in its
+ * title. The words a reader sees are approximate on purpose, and the moment
+ * they need the real one, hovering gives it to them and a machine reading the
+ * page has had it all along.
+ *
+ * It subscribes to the shared clock, so the words advance on their own rather
+ * than freezing at whatever they were when an unrelated push last happened to
+ * re-render the row.
+ */
+export declare function RelativeTime({ value, mode, now, emptyLabel, className, ...rest }: RelativeTimeProps): import("react/jsx-runtime").JSX.Element;

package/dist/RelativeTime/clock.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The shared instant, in epoch ms, re-rendering the caller once a second.
+ *
+ * Pass the value DOWN rather than calling this again deeper: two components
+ * reading their own clock is the disagreement it exists to prevent.
+ */
+export declare function useNow(): number;
+/** The current instant without subscribing, for an event handler or an effect. */
+export declare function currentNow(): number;

package/dist/RelativeTime/format.d.ts

@@ -0,0 +1,38 @@
+/** Anything a caller has a time in. */
+export type TimeValue = Date | number | string | null | undefined;
+/**
+ * The instant a value names, or null when it names none.
+ *
+ * A NAIVE STAMP IS READ AS UTC. Servers emit both the aware form
+ * (`2026-01-01T00:00:00Z`) and the naive one, often for the same instant, and
+ * `new Date()` reads the naive one as LOCAL time: a reader in Berlin would see
+ * every naive stamp an hour out, and the two encodings of one instant would
+ * render as two different times on the same screen.
+ */
+export declare function toInstant(value: TimeValue): number | null;
+/**
+ * "4m ago", "2h ago", "just now", "in 30m", "due".
+ *
+ * `now` is a REQUIRED argument rather than a call to a clock inside. Every
+ * relative time on a screen has to agree with every other, and a function that
+ * read the clock itself would answer differently for two rows rendered in the
+ * same frame. `useNow` is the one ticker that supplies it.
+ *
+ * Null for a value that names no instant, so a caller decides what an absence
+ * looks like. A dash chosen here would be the one absence in a product that
+ * says nothing about what is missing.
+ */
+export declare function formatRelative(value: TimeValue, now: number): string | null;
+/** The same rules, forward: "in 4m", and "due" once it has arrived. */
+export declare function formatUntil(value: TimeValue, now: number): string | null;
+/**
+ * How long, as a running duration: "12s", "4m 20s", "1h 5m".
+ *
+ * Different from the relative form on purpose. Beside something that is still
+ * happening, "4m ago" claims it is over; this says how long it has been going.
+ */
+export declare function formatElapsed(value: TimeValue, now: number): string | null;
+/** The full instant, for the title a reader hovers to see exactly when. */
+export declare function formatExact(value: TimeValue): string | null;
+/** The machine-readable form a `time` element carries. */
+export declare function toISO(value: TimeValue): string | null;

package/dist/RelativeTime/index.d.ts

@@ -0,0 +1,6 @@
+import './RelativeTime.css';
+export { RelativeTime } from './RelativeTime.js';
+export type { RelativeTimeProps, RelativeTimeMode } from './RelativeTime.js';
+export { useNow, currentNow } from './clock.js';
+export { formatElapsed, formatExact, formatRelative, formatUntil, toISO, toInstant, } from './format.js';
+export type { TimeValue } from './format.js';

package/dist/RelativeTime/index.js

@@ -0,0 +1,4 @@
+export { RelativeTime, currentNow, formatElapsed, formatExact, formatRelative, formatUntil, toISO, toInstant, useNow } from '../chunk-3CZ7XAVY.js';
+import '../chunk-EUCC37WY.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/RelativeTime-EBAQPGO2.css

@@ -0,0 +1,10 @@
+/*
+ * A relative time is text, so it takes the register around it. Its one rule is
+ * tabular figures: the words change once a second, and proportional digits
+ * would move whatever sits beside them on every tick.
+ */
+
+.crewlet-relative-time {
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}

package/dist/SearchTrigger/SearchTrigger.d.ts

@@ -0,0 +1,29 @@
+import { type ButtonHTMLAttributes, type ReactNode } from 'react';
+export interface SearchTriggerProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'aria-label'> {
+    /** What it is called, drawn inside the box and used as its name. */
+    label?: string | undefined;
+    /** The shortcut hint, as a Kbd with `keys`. */
+    shortcut?: ReactNode;
+    /**
+     * The shortcut in the syntax `aria-keyshortcuts` takes, such as
+     * `"Control+K Meta+K /"`. A screen reader reads it with the control, which
+     * is the only place a reader who cannot see the keycaps learns the shortcut
+     * exists.
+     */
+    keyshortcuts?: string | undefined;
+    /** The leading glyph. A magnifier by default. */
+    icon?: ReactNode;
+}
+/**
+ * The control that opens search, drawn as the field it is standing in for.
+ *
+ * IT IS A BUTTON, not an input. What it opens is a palette with its own field,
+ * and a box that takes focus and then throws the first keystroke away is worse
+ * than one that never looked like a field at all.
+ *
+ * ITS NAME IS ON THE BUTTON, not in its text. The narrow layout hides the
+ * label and the hint and leaves the glyph, and content under `display: none`
+ * names nothing: the dashboard this comes from had a search button that a
+ * screen reader announced as "button" at every width under the breakpoint.
+ */
+export declare const SearchTrigger: import("react").ForwardRefExoticComponent<SearchTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/SearchTrigger/index.d.ts

@@ -0,0 +1,3 @@
+import './SearchTrigger.css';
+export { SearchTrigger } from './SearchTrigger.js';
+export type { SearchTriggerProps } from './SearchTrigger.js';

package/dist/SearchTrigger/index.js

@@ -0,0 +1,2 @@
+export { SearchTrigger } from '../chunk-Q4ZPPART.js';
+import '../chunk-ODEQTPFM.js';

package/dist/SearchTrigger-QXOYAUUY.css

@@ -0,0 +1,79 @@
+/*
+ * A button drawn as the field it stands in for.
+ *
+ * Below the shell breakpoint it keeps the glyph and drops the label and the
+ * hint, which is why the name lives on the button rather than in its text.
+ */
+
+.crewlet-search-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  /* The resting width of the box. A topbar with less room sets it. */
+  --crewlet-search-trigger-width: 220px;
+  min-width: var(--crewlet-search-trigger-width);
+  height: var(--size-control-md);
+  padding: 0 var(--spacing-2) 0 var(--spacing-3);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-subtle);
+  color: var(--color-text-tertiary);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-compact);
+  cursor: pointer;
+  transition:
+    border-color var(--motion-duration-fast) var(--motion-easing-default),
+    color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-search-trigger:hover {
+  border-color: var(--color-border-hover);
+  color: var(--color-text-primary);
+}
+
+.crewlet-search-trigger:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}
+
+.crewlet-search-trigger__icon {
+  display: inline-flex;
+  flex: none;
+}
+
+/* The glyph is quieter than the word beside it, on the decoration step, which
+   is the one thing that step is for. */
+.crewlet-search-trigger__icon svg {
+  color: var(--color-text-muted);
+}
+
+.crewlet-search-trigger__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* The hint as a whole, so its keys stay together at the end of the box. */
+.crewlet-search-trigger__shortcut {
+  display: inline-flex;
+  align-items: center;
+  margin-left: auto;
+  flex: none;
+}
+
+@media (max-width: 900px) {
+  .crewlet-search-trigger {
+    min-width: 0;
+  }
+
+  .crewlet-search-trigger__label,
+  .crewlet-search-trigger__shortcut {
+    display: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-search-trigger {
+    transition: none;
+  }
+}

package/dist/Section/Section.d.ts

@@ -0,0 +1,41 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type HeadingLevel } from '../utils/headingLevel.js';
+export type SectionSpacing = 
+/** No band padding at all, and no gap under the header either. */
+'none'
+/**
+ * THE DEFAULT: a console band, no vertical padding and one gap between the
+ * header and what it introduces. A screen is a stack of these, and a
+ * marketing band between each pair of panels puts one panel per viewport.
+ */
+ | 'compact'
+/** A marketing band. State one: a page of them is a deliberate page. */
+ | 'sm' | 'md' | 'lg';
+export type SectionElement = 'section' | 'div' | 'header' | 'footer' | 'article';
+export interface SectionProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    as?: SectionElement | undefined;
+    /** Vertical rhythm. Defaults to `compact`, the console band. */
+    spacing?: SectionSpacing | undefined;
+    /**
+     * The section's heading. With one, the element is named by it and everything
+     * inside is a heading level deeper.
+     */
+    title?: ReactNode;
+    /** Overrides the level the heading is rendered at. */
+    headingLevel?: HeadingLevel | undefined;
+    /** A sentence beside the title saying what the section is for. */
+    description?: ReactNode;
+    /** The section's own controls, at the end of the heading row. */
+    actions?: ReactNode;
+}
+/**
+ * A band with its own rhythm, and optionally its own heading.
+ *
+ * WHY THE HEADER BELONGS HERE. A screen is a stack of named sections, and each
+ * one used to be hand-built out of a row, a type utility and a spacer. Built
+ * by hand, the heading level was whatever the author typed, so a document
+ * outline had levels missing; here the level comes from where the section
+ * actually sits, and its contents are one level deeper without anybody
+ * counting.
+ */
+export declare const Section: ({ as: As, spacing, title, headingLevel, description, actions, className, children, ...rest }: SectionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Section/index.d.ts

@@ -0,0 +1,3 @@
+import './Section.css';
+export { Section } from './Section.js';
+export type { SectionProps, SectionSpacing, SectionElement } from './Section.js';

package/dist/Section/index.js

@@ -0,0 +1,3 @@
+export { Section } from '../chunk-A2UXBCLO.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/Section-QRUPRIQ2.css

@@ -0,0 +1,127 @@
+/*
+ * Section, the vertical rhythm band. One spacing scale keeps the cadence
+ * between page sections consistent, and collapses on small viewports.
+ */
+
+.crewlet-section {
+  position: relative;
+}
+
+.crewlet-section--none {
+  padding-block: 0;
+}
+
+/*
+ * The console preset: no band padding, one gap between the heading and what it
+ * introduces. A screen is a stack of these, and a marketing band between each
+ * pair would put one panel per viewport.
+ */
+.crewlet-section--compact {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  padding-block: 0;
+}
+
+.crewlet-section--sm {
+  padding-block: var(--spacing-9);
+}
+
+.crewlet-section--md {
+  padding-block: var(--spacing-11);
+}
+
+/*
+ * The largest band is a multiple of the largest spacing step rather than a
+ * number of its own: the scale stops at 80px, this band has always been 120,
+ * and written as a literal it would be the one measure on the page a density
+ * setting could not reach.
+ */
+.crewlet-section--lg {
+  padding-block: calc(var(--spacing-11) * 1.5);
+}
+
+.crewlet-section__header {
+  display: flex;
+  align-items: baseline;
+  gap: var(--spacing-3);
+  min-width: 0;
+}
+
+/*
+ * The page's leading, not the baseline's heading leading. A band title sits on
+ * one line beside its own sentence, and the tight step every heading element
+ * inherits puts the two on different rhythms within one row.
+ */
+.crewlet-section__title {
+  margin: 0;
+  font-family: var(--font-family-display);
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--font-line-height-normal);
+  letter-spacing: var(--font-letter-spacing-tight);
+  color: var(--color-text-primary);
+  min-width: 0;
+}
+
+/*
+ * Beside the title, not under it, and it gives up its tail first: the heading
+ * is what a reader scans for and the sentence is what they read once they have
+ * found it.
+ */
+.crewlet-section__description {
+  margin: 0;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  /* THE CAPTION REGISTER. It is one line beside a heading, truncated before
+     the heading gives up a character, so it is glanced at rather than read:
+     the compact step it used to take made it the same weight of text as a
+     table cell and it competed with the title it qualifies. */
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+  max-width: var(--size-measure);
+}
+
+.crewlet-section__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  flex: none;
+  margin-inline-start: auto;
+}
+
+/* A titled band lays its header and its content out as a column. */
+.crewlet-section--titled {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+}
+
+@media (max-width: 768px) {
+  .crewlet-section--sm {
+    padding-block: var(--spacing-7);
+  }
+
+  .crewlet-section--md {
+    padding-block: var(--spacing-9);
+  }
+
+  .crewlet-section--lg {
+    padding-block: var(--spacing-10);
+  }
+
+  /*
+   * Narrow: the sentence moves under the heading rather than competing with it
+   * for a line that has room for neither.
+   */
+  .crewlet-section__header {
+    flex-wrap: wrap;
+  }
+
+  .crewlet-section__description {
+    white-space: normal;
+    flex-basis: 100%;
+  }
+}

package/dist/SegmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,68 @@
+import type { ReactNode } from 'react';
+export type SegmentedSize = 'sm' | 'md';
+export interface SegmentedOption<T extends string = string> {
+    value: T;
+    /** What is drawn. An empty label makes the option icon-only. */
+    label?: ReactNode;
+    /**
+     * What an icon-only option is CALLED. A `title` is a tooltip and a screen
+     * reader is not shown one, so an option drawn as a glyph alone takes its
+     * name from here, or from `title` where the two say the same thing.
+     */
+    srLabel?: string;
+    icon?: ReactNode;
+    title?: string;
+    count?: number | null;
+    disabled?: boolean;
+    /**
+     * A second line under the label. With one, the options are drawn as card
+     * rows rather than chips, for a choice a reader has to read before making.
+     */
+    description?: ReactNode;
+}
+interface SegmentedShared<T extends string> {
+    /** Names the group. A row of choices with no name is announced as a row of buttons. */
+    label: string;
+    options: readonly SegmentedOption<T>[];
+    value: T;
+    onValueChange: (value: T) => void;
+    size?: SegmentedSize | undefined;
+    className?: string | undefined;
+}
+/**
+ * What the row IS, which decides both its roles and when it reports a change.
+ *
+ * `radio` is a SETTING or a filter (the theme, the density, a lens with no
+ * panel): announced as a radio group, and the arrows select as they move,
+ * because a choice that is not in the URL costs nothing to change on every
+ * keypress.
+ *
+ * `tabs` is a row of SECTIONS, and in this product a section pushes a history
+ * entry: the arrows move focus and Enter or Space selects, so walking the row
+ * with the keyboard does not leave an entry per keypress for Back to walk
+ * back through. `panelId` names the [TabPanel] it controls.
+ */
+type SegmentedSemantics = {
+    semantics: 'tabs';
+    panelId: string;
+} | {
+    semantics: 'radio';
+    panelId?: undefined;
+};
+export type SegmentedControlProps<T extends string = string> = SegmentedShared<T> & SegmentedSemantics;
+/**
+ * A row of mutually exclusive choices.
+ *
+ * WHY IT IS NOT JUST TABS. The two rows look alike and are not alike: one is
+ * a setting and one is a place. The engine drew its theme and density
+ * controls as tabs, so a screen reader announced them as tabs, went looking
+ * for the panels each one opened, and found none; and it drew its lens rows
+ * as radios that selected on every arrow press, so walking a row with the
+ * keyboard pushed a history entry per keystroke.
+ *
+ * It draws with the Tabs pill classes, because a row of choices should not
+ * look like two different controls depending on which component a screen
+ * reached for.
+ */
+export declare function SegmentedControl<T extends string = string>({ label, options, value, onValueChange, size, className, semantics, panelId, }: SegmentedControlProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/SegmentedControl/index.d.ts

@@ -0,0 +1,4 @@
+import '../Tabs/Tabs.css';
+import './SegmentedControl.css';
+export { SegmentedControl } from './SegmentedControl.js';
+export type { SegmentedControlProps, SegmentedOption, SegmentedSize } from './SegmentedControl.js';

package/dist/SegmentedControl/index.js

@@ -0,0 +1,5 @@
+export { SegmentedControl } from '../chunk-ARMRX2YV.js';
+import '../chunk-YMWONFSI.js';
+import '../chunk-BHHIIK3M.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/SegmentedControl-X3BI3XU4.css

@@ -0,0 +1,68 @@
+/*
+ * SegmentedControl: the pill row, drawn with the Tabs classes.
+ *
+ * Only what is its own lives here. The chrome, the sizes and the active chip
+ * come from Tabs.css, so a lens row and a setting row look the same whichever
+ * component a screen reached for.
+ */
+
+.crewlet-segmented__text {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1px;
+  min-width: 0;
+}
+
+/*
+ * A choice a reader has to READ before making it is a card row, not a chip:
+ * a template with a sentence under its name does not fit in a pill, and
+ * squeezing it there is how the sentence ends up truncated to nothing.
+ */
+/*
+ * TWO CLASSES, so this wins whatever order the stylesheets are bundled in.
+ * `.crewlet-tabs` sets the row's own display and alignment, and a rule of
+ * equal weight in a file that happens to come later takes them back.
+ */
+.crewlet-tabs.crewlet-segmented--cards {
+  display: grid;
+  gap: var(--spacing-2);
+  width: 100%;
+  align-items: stretch;
+}
+
+/*
+ * The same frame a framed Checkbox draws, because it is the same row: a
+ * boundary on the body it sits in, and no surface of its own. A choice with a
+ * surface inside a panel of the same surface reads as a second panel.
+ */
+.crewlet-segmented--cards .crewlet-segmented__option {
+  justify-content: flex-start;
+  text-align: left;
+  /* A sentence under a name is a sentence: it wraps rather than being cut. */
+  white-space: normal;
+  padding: var(--spacing-3);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  font-size: var(--font-size-compact);
+}
+
+/* The one card that is chosen takes the accent, which is what "here, this
+   one" means everywhere else in the product. */
+.crewlet-segmented--cards .crewlet-segmented__option.is-active {
+  border-color: var(--color-brand-accent);
+  background: var(--color-brand-accent-soft);
+  color: var(--color-brand-accent-ink);
+}
+
+.crewlet-segmented__description {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--font-line-height-normal);
+  color: var(--color-text-tertiary);
+  white-space: normal;
+}
+
+.crewlet-segmented--cards .crewlet-segmented__option.is-active .crewlet-segmented__description {
+  color: var(--color-brand-accent-ink);
+}