@crewlethq/ui 0.2.0 → 0.3.0

package/dist/InlineCode/InlineCode.d.ts

@@ -0,0 +1,37 @@
+import type { HTMLAttributes } from 'react';
+export type InlineCodeVariant = 
+/** An identifier, a path, a config key, a header name. */
+'default'
+/**
+ * A `${NAME}` pointing at a secret or an environment variable. Ligatures are
+ * off everywhere in this component, and this variant also holds the braces
+ * on one line: a reference torn across a line break names nothing.
+ */
+ | 'reference';
+export type InlineCodeTone = 
+/** The component's own quiet ink on the inset surface. */
+'default'
+/**
+ * Whatever the surrounding text is set in. A chip inside a Callout or a
+ * field error has to carry that message's ink, or it reads as a separate,
+ * calmer sentence inside an alarming one.
+ */
+ | 'inherit';
+export interface InlineCodeProps extends HTMLAttributes<HTMLElement> {
+    variant?: InlineCodeVariant | undefined;
+    tone?: InlineCodeTone | undefined;
+    /** One line, cut with an ellipsis, for a chip inside a dense row. */
+    truncate?: boolean | undefined;
+}
+/**
+ * One identifier inside a sentence.
+ *
+ * IT WRAPS ANYWHERE, and that is the whole reason it is a component rather
+ * than a `code` element with a class. These chips carry public base URLs and
+ * config paths, and a URL is ONE UNBREAKABLE WORD to a line breaker: without
+ * an explicit break opportunity the chip is pushed whole onto its own line and
+ * the sentence around it is torn into fragments.
+ *
+ * For a block of code, several lines of it, use `CodeBlock`.
+ */
+export declare function InlineCode({ variant, tone, truncate, className, children, ...rest }: InlineCodeProps): import("react/jsx-runtime").JSX.Element;

package/dist/InlineCode/index.d.ts

@@ -0,0 +1,3 @@
+import './InlineCode.css';
+export { InlineCode } from './InlineCode.js';
+export type { InlineCodeProps, InlineCodeVariant, InlineCodeTone } from './InlineCode.js';

package/dist/InlineCode/index.js

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

package/dist/InlineCode-6WSR5COL.css

@@ -0,0 +1,65 @@
+/*
+ * One identifier inside a sentence: a mono chip on the inset surface.
+ *
+ * The size is relative (0.92em) rather than a step off the scale, because the
+ * chip has to sit inside whatever register its sentence is set in. A fixed
+ * size makes it either a shout inside a caption or a whisper inside a lead.
+ */
+
+.crewlet-inline-code {
+  /*
+   * RELATIVE, so it is deliberately not a step off the type scale: the chip
+   * sits inside whatever register its sentence is set in, and an absolute size
+   * makes it a shout inside a caption or a whisper inside a lead. The mono
+   * face also runs larger than the sans at the same nominal size, which is
+   * what the reduction corrects.
+   */
+  --crewlet-inline-code-size: 0.92em;
+  font-family: var(--font-family-mono);
+  /* An identifier is read character by character; a ligature joins two of them
+     into a drawing of something nobody typed. */
+  font-variant-ligatures: none;
+  font-size: var(--crewlet-inline-code-size);
+  background: var(--color-surface-inset);
+  border-radius: var(--radius-xs);
+  padding: 1px var(--spacing-1);
+  color: var(--color-text-secondary);
+  /* A URL IS ONE UNBREAKABLE WORD to a line breaker. Without this the chip is
+     pushed whole onto its own line and the sentence around it is torn up. */
+  overflow-wrap: anywhere;
+}
+
+/*
+ * A `${NAME}` pointer. It is one token a reader copies, so it keeps its braces
+ * together. THE SAME INK AS ANY OTHER CHIP: a pointer is the name of a sealed
+ * entry, and drawn a step quieter than the identifiers around it, it read as
+ * decoration rather than as the thing an operator has to type back.
+ */
+.crewlet-inline-code--reference {
+  overflow-wrap: normal;
+  white-space: nowrap;
+}
+
+/*
+ * Inside a Callout or a field error the chip carries that message's ink, or a
+ * calm grey identifier sits in the middle of an alarming sentence.
+ *
+ * ONLY THE INK. The chip keeps its own ground and its own inset, because they
+ * are what says "this is a string you type", and a bare run of monospace
+ * inside a sentence is not that. The composite the message's ink then lands on
+ * is measured: @crewlethq/tokens' palette suite holds every status ink to
+ * 4.5:1 on the inset well drawn over its own callout tint, and the tightest
+ * pair is 4.61:1.
+ */
+.crewlet-inline-code--inherit {
+  color: inherit;
+}
+
+.crewlet-inline-code--truncate {
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: bottom;
+}

package/dist/Input/FormField.d.ts

@@ -0,0 +1,61 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+/** What a field's control needs to know about the row it sits in. */
+export interface FormFieldRender {
+    /** The id the label points at. Put it on the control. */
+    id: string;
+    /** Every sentence about this field, joined. Put it on the control's `aria-describedby`. */
+    describedBy: string | undefined;
+    /** Whether the last value was refused. Put it on the control's `aria-invalid`. */
+    invalid: boolean;
+    /** Whether an answer is required. Put it on the control's `aria-required`. */
+    required: boolean;
+}
+export interface FormFieldProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    label?: ReactNode;
+    required?: boolean | undefined;
+    /** Says "(optional)" beside the label. */
+    optional?: boolean | undefined;
+    /** Says "(required)" beside the label, where requiredness is news. See [Label]. */
+    requiredNews?: boolean | undefined;
+    /** Where the value comes from, or what shape it takes. */
+    helper?: ReactNode;
+    /** Why the last value was refused. */
+    error?: ReactNode;
+    /** A control rendered beside the label, such as an Add button. */
+    labelAction?: ReactNode;
+    /**
+     * A fieldset with a legend rather than a div with a label, for a field
+     * whose control is SEVERAL controls: a list of items, a row of radios. A
+     * `for` attribute names one element, and a group is not one.
+     *
+     * In this mode the GROUP carries `aria-describedby`, so a caller taking the
+     * render function does NOT put `describedBy` on a control inside it: the
+     * help and the error would then be read once on entering the group and
+     * again on every control in it.
+     */
+    as?: 'div' | 'fieldset' | undefined;
+    /**
+     * Ids of sentences the caller renders itself, joined ahead of the help and
+     * the error. The affix sentence inside a url field is the one this exists
+     * for: it is part of the value, and the reader has to hear it.
+     */
+    describedBy?: string | readonly string[] | undefined;
+    /**
+     * The control. As a function it is handed the ids and the state to wire,
+     * which is what stops each form hand-pairing a label with an input and
+     * getting one of the two wrong.
+     */
+    children: ((field: FormFieldRender) => ReactNode) | ReactNode;
+    htmlFor?: string | undefined;
+}
+/**
+ * A labelled control, with the help line and the error line beside it.
+ *
+ * HELP AND ERROR BOTH RENDER, and this is the change worth naming. The help
+ * line used to be replaced by the error, so a field that said "The workspace
+ * subdomain, not the whole address" lost that sentence at the exact moment
+ * the value was refused: the reader was told they were wrong and, in the same
+ * 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-runtime").JSX.Element;

package/dist/Input/FormRow.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'react';
+export interface FormRowProps extends HTMLAttributes<HTMLDivElement> {
+    /** Number of columns at desktop width. Collapses to 1 on small screens. */
+    columns?: 1 | 2 | 3;
+}
+export declare const FormRow: ({ columns, className, children, ...rest }: FormRowProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Input/FormSection.d.ts

@@ -0,0 +1,28 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export interface FormSectionProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** The section's heading. It names the section, so it is never left out. */
+    title: ReactNode;
+    /** One line under the heading saying what the fields below are for. */
+    hint?: ReactNode;
+    /** Controls rendered on the heading row, such as an Add button. */
+    actions?: ReactNode;
+    /** Draws the rule above the heading, which is the rhythm a long form keeps. */
+    divided?: boolean;
+    children?: ReactNode;
+}
+/**
+ * A titled group of fields, named by its own heading.
+ *
+ * THE HEADING LEVEL IS NOT A PROP, and that is the whole of it. The same
+ * section is an `h3` on a page under a screen title and an `h2` inside a
+ * dialog, whose title is the top of everything beneath it. Hard-coded, it is
+ * right in one of those places and wrong in the other, and a reader
+ * navigating by heading meets an outline with a level missing. The level
+ * comes from the surface around it (a Modal or a sheet provides one) and
+ * steps down for anything nested inside, clamped at `h6`.
+ *
+ * It is a `section` rather than a `div` because it is named: a named region
+ * is one a screen reader can jump to and announce, which is the difference
+ * between "Schedule" as a picture and "Schedule" as a place.
+ */
+export declare function FormSection({ title, hint, actions, divided, className, children, ...rest }: FormSectionProps): import("react/jsx-runtime").JSX.Element;

package/dist/Input/Input.d.ts

@@ -0,0 +1,98 @@
+import { type InputHTMLAttributes, type ReactNode } from 'react';
+export type InputSize = 'sm' | 'md';
+/**
+ * How wide the field is.
+ *
+ * A filter box is not a form field and a form field is not a page, and every
+ * screen that needed a narrow one wrote its own `style={{ maxWidth: 180 }}`:
+ * five call sites, five numbers, none of them the same. The steps are named
+ * for what they hold rather than for a number, so a search box and a filter
+ * box beside each other are the same width without either one saying so.
+ */
+export type InputWidth = 'full' | 'xs' | 'sm' | 'md' | 'lg';
+/**
+ * How the field is drawn, which is a different question from what it holds.
+ *
+ * `default` is a field on a form. `reference` is a field holding a name
+ * something else resolves (a secret reference, a key, a path): monospace, in
+ * the secondary ink, because it is a value to be read exactly rather than
+ * prose. `command` is the search field of a command palette: borderless and
+ * large, because the surface around it IS the field and a boundary inside a
+ * dialog whose whole body is one input is a boundary around nothing.
+ */
+export type InputAppearance = 'default' | 'reference' | 'command';
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'width'> {
+    inputSize?: InputSize | undefined;
+    appearance?: InputAppearance | undefined;
+    width?: InputWidth | undefined;
+    /** Marks the value as refused. Sets `aria-invalid`, which is what a screen reader reads. */
+    error?: boolean | undefined;
+    containerClassName?: string | undefined;
+    /**
+     * Content drawn inside the field at its leading edge: a search glyph, or an
+     * [InputAffix] standing in for a scheme the value is refused without.
+     *
+     * It does not take the pointer, so a press on it still lands in the field.
+     * A control belongs beside the field rather than inside it: a target inside
+     * a text box is one a pointer reaches by missing the box.
+     */
+    leading?: ReactNode;
+    /**
+     * Content drawn inside the field at its trailing edge, such as a keycap
+     * hinting that Enter adds the value. It does not take the pointer either.
+     */
+    trailing?: ReactNode;
+    /**
+     * Draws a real clear control at the trailing edge, and empties the field.
+     *
+     * THE ONE CONTROL THAT BELONGS INSIDE A TEXT BOX, and only in a search box,
+     * where a reader looks for it inside the field because that is where every
+     * search box has ever put it. What it replaces is the platform's own:
+     * `::-webkit-search-cancel-button` exists in one browser family, is drawn by
+     * nobody else, and is reachable by no keyboard anywhere, so a styled version
+     * of it was a control half the readers did not have. This one is a button,
+     * with a name, in the tab order, and it hands focus back to the field it
+     * emptied so the next keystroke lands where the reader is looking.
+     *
+     * It is drawn only while the field holds something. A controlled field is
+     * read from `value`; an uncontrolled one is emptied here as well as
+     * reported, since nobody else holds its value.
+     */
+    onClear?: (() => void) | undefined;
+    /** What the clear control is called. */
+    clearLabel?: string | undefined;
+}
+/**
+ * A text field.
+ *
+ * THE PLACEHOLDER IS NOT A LABEL and is not decoration either. It sits on the
+ * tertiary ink, which is measured to 4.5:1, because a reader has to make out
+ * the example it gives; the decoration step it used to take measured 2.22:1.
+ */
+export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
+export interface InputAffixProps {
+    /** The text drawn inside the field, such as `https://`. */
+    text: string;
+    /**
+     * The id the field's own `aria-describedby` points at. Pass the same id to
+     * [FormField]'s `describedBy`, which joins it to the help and error lines.
+     */
+    id: string;
+    /**
+     * What a screen reader hears instead of the characters. Read once as a
+     * sentence rather than spelled out as punctuation before the value.
+     */
+    sentence?: string | undefined;
+}
+/**
+ * A text affix inside a field's leading slot.
+ *
+ * WHY IT IS A COMPONENT. A url field is refused without a scheme, so a person
+ * typing their site the way they say it out loud had a form that took the
+ * value and a Save that failed validation. The affix makes the requirement
+ * visible and satisfies it, and it is two things at once: a picture for a
+ * sighted reader and part of the value for everybody else. Drawn as text
+ * alone it is read as punctuation before the box; hidden entirely, the reader
+ * is told nothing about a requirement the form enforces.
+ */
+export declare function InputAffix({ text, id, sentence }: InputAffixProps): import("react/jsx-runtime").JSX.Element;

package/dist/Input/Label.d.ts

@@ -0,0 +1,31 @@
+import type { LabelHTMLAttributes, ReactNode } from 'react';
+export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+    /**
+     * The element the text is drawn in. A `label` by default; a `span` inside a
+     * legend, where `for` names one element and the group has several.
+     */
+    as?: 'label' | 'span' | undefined;
+    /**
+     * Draws the asterisk. DECORATION ONLY: the control itself carries
+     * `aria-required`, which is what a screen reader reads, so the mark is
+     * `aria-hidden` and never the only statement of the rule.
+     */
+    required?: boolean | undefined;
+    /** Says "(optional)" beside the label, for a field that may be left empty. */
+    optional?: boolean | undefined;
+    /**
+     * Says "(required)" beside the label.
+     *
+     * ONLY WHERE REQUIREDNESS IS NEWS: a field that appeared because of an
+     * answer above it. Required is the unmarked default on a form, so marking
+     * every required field is noise that teaches a reader to skip the note.
+     */
+    requiredNews?: boolean | undefined;
+    /** A control rendered beside the label text, such as an Add button. */
+    action?: ReactNode;
+    /** The word for a field that may be left empty. */
+    optionalLabel?: string | undefined;
+    /** The word for a field whose requiredness is news. */
+    requiredLabel?: string | undefined;
+}
+export declare const Label: ({ as: Tag, required, optional, requiredNews, action, optionalLabel, requiredLabel, className, children, ...rest }: LabelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Input/ReadOnlyField.d.ts

@@ -0,0 +1,30 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface ReadOnlyFieldProps extends HTMLAttributes<HTMLDivElement> {
+    /** What the value is, in the same register as a field's label. */
+    label: ReactNode;
+    /** The value itself. */
+    value: ReactNode;
+    /**
+     * Why it cannot be edited here, and where it is edited instead.
+     *
+     * ON THE SECONDARY INK, never the decoration step: this is the sentence
+     * that stops a reader hunting for a control that is not on this screen, so
+     * it is a fact rather than a flourish.
+     */
+    reason?: ReactNode;
+    /** A link to where the value IS edited. */
+    action?: ReactNode;
+    /** Draws the value in the mono face, for an id, a handle or a path. */
+    mono?: boolean;
+}
+/**
+ * A fact a form shows and does not collect.
+ *
+ * WHY IT IS NOT A DISABLED FIELD. A disabled input says "not now" and invites
+ * a reader to look for what would turn it on; half of these values are not
+ * editable anywhere, and the other half are edited on another screen. A
+ * disabled box also drops out of the tab order, so the sentence explaining
+ * where to go is unreachable by exactly the reader who cannot see it beside
+ * the box. This is text, in the same grid as the fields around it.
+ */
+export declare function ReadOnlyField({ label, value, reason, action, mono, className, ...rest }: ReadOnlyFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/Input/Textarea.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode, type TextareaHTMLAttributes } from 'react';
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /** Marks the value as refused. Sets `aria-invalid`. */
+    error?: boolean;
+    /**
+     * When true, the textarea height tracks its content. The element's
+     * `overflow` is hidden and the `rows` attribute is ignored.
+     */
+    autoResize?: boolean;
+    /**
+     * Content drawn inside the field at its top right, such as a keycap
+     * hinting that Enter adds the value. It does not take the pointer.
+     */
+    trailing?: ReactNode;
+}
+export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/Input/index.d.ts

@@ -0,0 +1,15 @@
+import './Input.css';
+export { Input, InputAffix } from './Input.js';
+export type { InputAffixProps, InputAppearance, InputProps, InputSize, InputWidth } from './Input.js';
+export { Textarea } from './Textarea.js';
+export type { TextareaProps } from './Textarea.js';
+export { Label } from './Label.js';
+export type { LabelProps } from './Label.js';
+export { FormField } from './FormField.js';
+export type { FormFieldProps, FormFieldRender } from './FormField.js';
+export { FormRow } from './FormRow.js';
+export type { FormRowProps } from './FormRow.js';
+export { FormSection } from './FormSection.js';
+export type { FormSectionProps } from './FormSection.js';
+export { ReadOnlyField } from './ReadOnlyField.js';
+export type { ReadOnlyFieldProps } from './ReadOnlyField.js';

package/dist/Input/index.js

@@ -0,0 +1,5 @@
+export { FormField, FormRow, FormSection, Input, InputAffix, Label, ReadOnlyField, Textarea } from '../chunk-O6232G37.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-F27EPQ7D.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';