@50arms/ui 0.0.0-stage → 35.2.0

package/dist/types/components/RecordCard.d.ts

@@ -0,0 +1,413 @@
+import type { ReactNode, Ref } from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { type VariantProps } from "tailwind-variants";
+declare const record: import("tailwind-variants").TVReturnType<{
+    emphasis: {
+        none: {
+            root: string;
+        };
+        accent: {
+            root: string;
+        };
+        warning: {
+            root: string;
+        };
+        danger: {
+            root: string;
+        };
+    };
+    interactive: {
+        true: {
+            root: string[];
+        };
+        false: {};
+    };
+    selected: {
+        true: {
+            root: string;
+        };
+        false: {};
+    };
+}, {
+    root: string[];
+    top: string;
+    identifier: string;
+    title: string;
+    subtitle: string;
+    badges: string[];
+    metrics: string;
+    metricLabel: string;
+    metricValue: string;
+    footer: string;
+}, undefined, {
+    emphasis: {
+        none: {
+            root: string;
+        };
+        accent: {
+            root: string;
+        };
+        warning: {
+            root: string;
+        };
+        danger: {
+            root: string;
+        };
+    };
+    interactive: {
+        true: {
+            root: string[];
+        };
+        false: {};
+    };
+    selected: {
+        true: {
+            root: string;
+        };
+        false: {};
+    };
+}, {
+    root: string[];
+    top: string;
+    identifier: string;
+    title: string;
+    subtitle: string;
+    badges: string[];
+    metrics: string;
+    metricLabel: string;
+    metricValue: string;
+    footer: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    emphasis: {
+        none: {
+            root: string;
+        };
+        accent: {
+            root: string;
+        };
+        warning: {
+            root: string;
+        };
+        danger: {
+            root: string;
+        };
+    };
+    interactive: {
+        true: {
+            root: string[];
+        };
+        false: {};
+    };
+    selected: {
+        true: {
+            root: string;
+        };
+        false: {};
+    };
+}, {
+    root: string[];
+    top: string;
+    identifier: string;
+    title: string;
+    subtitle: string;
+    badges: string[];
+    metrics: string;
+    metricLabel: string;
+    metricValue: string;
+    footer: string;
+}>>;
+declare const recordCard: import("tailwind-variants").TVReturnType<{
+    /**
+     * Layout, not content. `corner` is the assignee-avatar shape (small,
+     * square, sits beside the title); `cover` is the banner-image shape (full
+     * width, wide aspect). Same slot, same DOM position — only the geometry
+     * changes, which is the whole argument for not splitting this into two
+     * props.
+     */
+    placement: {
+        corner: {
+            media: string;
+        };
+        cover: {
+            media: string;
+        };
+    };
+    /**
+     * DX-3621 — `RecordCardTitle`'s own text size, independent of `as` (the
+     * heading LEVEL). Before this variant the title carried no explicit
+     * `text-*` class at all, so its rendered size was whatever the browser's
+     * UA default for the chosen heading level happened to be — a kanban board
+     * lane of `h4` titles rendering at UA default size, not a deliberate one.
+     * `md` (default) pins that same visual size explicitly rather than
+     * changing it out from under existing consumers; `sm` is for a dense
+     * listing (a kanban lane, a compact picker row) where several of these
+     * stack in view together.
+     */
+    size: {
+        sm: {
+            title: string;
+        };
+        md: {
+            title: string;
+        };
+    };
+    /**
+     * DX-4031 — whether `RecordCardTitle` is held to two lines. A variant on the slot rather than a conditional
+     * class, so the default output keeps `line-clamp-2` and `clamp={false}` swaps it for `line-clamp-none`.
+     */
+    clamp: {
+        true: {
+            title: string;
+        };
+        false: {
+            title: string;
+        };
+    };
+}, {
+    handle: string;
+    eyebrow: string;
+    title: string;
+    badges: string[];
+    media: string;
+    meta: string;
+}, undefined, {
+    /**
+     * Layout, not content. `corner` is the assignee-avatar shape (small,
+     * square, sits beside the title); `cover` is the banner-image shape (full
+     * width, wide aspect). Same slot, same DOM position — only the geometry
+     * changes, which is the whole argument for not splitting this into two
+     * props.
+     */
+    placement: {
+        corner: {
+            media: string;
+        };
+        cover: {
+            media: string;
+        };
+    };
+    /**
+     * DX-3621 — `RecordCardTitle`'s own text size, independent of `as` (the
+     * heading LEVEL). Before this variant the title carried no explicit
+     * `text-*` class at all, so its rendered size was whatever the browser's
+     * UA default for the chosen heading level happened to be — a kanban board
+     * lane of `h4` titles rendering at UA default size, not a deliberate one.
+     * `md` (default) pins that same visual size explicitly rather than
+     * changing it out from under existing consumers; `sm` is for a dense
+     * listing (a kanban lane, a compact picker row) where several of these
+     * stack in view together.
+     */
+    size: {
+        sm: {
+            title: string;
+        };
+        md: {
+            title: string;
+        };
+    };
+    /**
+     * DX-4031 — whether `RecordCardTitle` is held to two lines. A variant on the slot rather than a conditional
+     * class, so the default output keeps `line-clamp-2` and `clamp={false}` swaps it for `line-clamp-none`.
+     */
+    clamp: {
+        true: {
+            title: string;
+        };
+        false: {
+            title: string;
+        };
+    };
+}, {
+    handle: string;
+    eyebrow: string;
+    title: string;
+    badges: string[];
+    media: string;
+    meta: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    /**
+     * Layout, not content. `corner` is the assignee-avatar shape (small,
+     * square, sits beside the title); `cover` is the banner-image shape (full
+     * width, wide aspect). Same slot, same DOM position — only the geometry
+     * changes, which is the whole argument for not splitting this into two
+     * props.
+     */
+    placement: {
+        corner: {
+            media: string;
+        };
+        cover: {
+            media: string;
+        };
+    };
+    /**
+     * DX-3621 — `RecordCardTitle`'s own text size, independent of `as` (the
+     * heading LEVEL). Before this variant the title carried no explicit
+     * `text-*` class at all, so its rendered size was whatever the browser's
+     * UA default for the chosen heading level happened to be — a kanban board
+     * lane of `h4` titles rendering at UA default size, not a deliberate one.
+     * `md` (default) pins that same visual size explicitly rather than
+     * changing it out from under existing consumers; `sm` is for a dense
+     * listing (a kanban lane, a compact picker row) where several of these
+     * stack in view together.
+     */
+    size: {
+        sm: {
+            title: string;
+        };
+        md: {
+            title: string;
+        };
+    };
+    /**
+     * DX-4031 — whether `RecordCardTitle` is held to two lines. A variant on the slot rather than a conditional
+     * class, so the default output keeps `line-clamp-2` and `clamp={false}` swaps it for `line-clamp-none`.
+     */
+    clamp: {
+        true: {
+            title: string;
+        };
+        false: {
+            title: string;
+        };
+    };
+}, {
+    handle: string;
+    eyebrow: string;
+    title: string;
+    badges: string[];
+    media: string;
+    meta: string;
+}>>;
+export interface RecordCardMetric {
+    label: ReactNode;
+    value: ReactNode;
+}
+export interface RecordCardProps extends VariantProps<typeof record> {
+    /** The record's own id — rendered mono, above the title. */
+    identifier?: ReactNode;
+    /**
+     * Optional ONLY so a caller can compose the parts instead (see the header).
+     * For prop-driven use it is effectively required — a record card with no
+     * title is not a record card — and omitting it drops the whole top row
+     * rather than rendering an empty one.
+     */
+    title?: ReactNode;
+    /** What kind of record this is, or who it belongs to. One line. */
+    subtitle?: ReactNode;
+    /** State chips. A slot, so their tones and behaviour stay the consumer's. */
+    badges?: ReactNode;
+    /** The numbers worth seeing without opening the record. */
+    metrics?: readonly RecordCardMetric[];
+    /** Leading — an icon, an avatar, or a drag handle. */
+    media?: ReactNode;
+    /** Trailing, top-aligned — a menu. */
+    action?: ReactNode;
+    /** A last line under a rule: an assignee, a timestamp, a count. */
+    footer?: ReactNode;
+    /**
+     * Render as something else — an `<a>` for a card that navigates.
+     *
+     * Prefer this over `onClick` when the card leads somewhere: a link can be
+     * opened in a new tab, copied, and read out as a link, and a button that
+     * calls `navigate` can do none of those.
+     */
+    render?: useRender.RenderProp;
+    className?: string;
+    children?: ReactNode;
+    ref?: Ref<HTMLElement>;
+    onClick?: (event: React.MouseEvent) => void;
+}
+export declare function RecordCard({ identifier, title, subtitle, badges, metrics, media, action, footer, emphasis, interactive, selected, render, className, children, ref, ...props }: RecordCardProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export interface RecordCardHandleProps {
+    className?: string;
+    /** Whatever the board wants reachable here — a drag handle, a menu trigger,
+     *  a dual-purpose control combining both. This component owns none of that
+     *  behaviour; it only reserves the shape (shrink-resistant, stretches to
+     *  match a flex-row sibling) so the board's control does not have to fight
+     *  the record's own layout for space. */
+    children: ReactNode;
+    ref?: Ref<HTMLSpanElement>;
+}
+/** The region a board can slot a drag handle into. Absent entirely when a
+ *  card is rendered outside any board — nothing here assumes one exists. */
+export declare function RecordCardHandle({ className, children, ref }: RecordCardHandleProps): import("react").JSX.Element;
+export interface RecordCardEyebrowProps {
+    className?: string;
+    children: ReactNode;
+    ref?: Ref<HTMLSpanElement>;
+}
+/** The identifier line — an id, a code, a short kicker. Answers WHICH record
+ *  this is, which is a different question from the one `Title` answers. */
+export declare function RecordCardEyebrow({ className, children, ref }: RecordCardEyebrowProps): import("react").JSX.Element;
+export interface RecordCardTitleProps {
+    /**
+     * The heading level this title renders as.
+     *
+     * See `CardHeader.titleAs` — the reasoning is identical and does not bear
+     * repeating differently: only the caller knows what sits above this card in
+     * the page outline.
+     *
+     * @default "h3"
+     */
+    as?: "h2" | "h3" | "h4" | "h5" | "h6";
+    /**
+     * The title's own text size — independent of `as` (the heading LEVEL, an
+     * accessibility/outline concern). `sm` is for a dense listing where several
+     * record cards stack in view together (a kanban lane, a compact picker
+     * row); `md` is the ordinary size for a single card or a short list.
+     *
+     * @default "md"
+     */
+    size?: "sm" | "md";
+    /**
+     * DX-4031 — `true` (default) clamps the title to two lines; `false` shows it in full, for a card whose title
+     * (up to 250 characters) is the thing being read.
+     *
+     * @default true
+     */
+    clamp?: boolean;
+    className?: string;
+    children: ReactNode;
+    ref?: Ref<HTMLHeadingElement>;
+}
+/** Clamped to two lines by default — a collapsed record has a fixed budget of
+ *  vertical space, and a title that runs on pushes the meta row an
+ *  unpredictable distance down the column instead of wrapping in place. */
+export declare function RecordCardTitle({ as: Title, size, clamp, className, children, ref }: RecordCardTitleProps): import("react").JSX.Element;
+export interface RecordCardBadgesProps {
+    className?: string;
+    children: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+}
+/** A wrapping row for a SMALL set of status/priority badges — `Badge` from
+ *  this same library, composed by the consumer. This component supplies only
+ *  the row layout; it has no opinion on how many badges is too many.
+ *
+ *  IT DOES HAVE AN OPINION ON HOW WIDE. The row can never exceed its card, and
+ *  a single badge can never exceed the row — the containment is the row's job
+ *  because the consumer's badge cannot do it from inside. `BADGE_ROW` above
+ *  carries the measurements and the one limitation (it clips; it does not
+ *  ellipsize). A caller's `className` still wins over everything here, including
+ *  `shrink-0`, which is exactly the class that made the reported card leak. */
+export declare function RecordCardBadges({ className, children, ref }: RecordCardBadgesProps): import("react").JSX.Element;
+export interface RecordCardMediaProps extends VariantProps<typeof recordCard> {
+    className?: string;
+    children: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+}
+/** The media/cover region — an assignee avatar (`placement="corner"`, the
+ *  default) or a banner image (`placement="cover"`). See the file header for
+ *  why these are one slot rather than two. */
+export declare function RecordCardMedia({ placement, className, children, ref }: RecordCardMediaProps): import("react").JSX.Element;
+export interface RecordCardMetaProps {
+    className?: string;
+    children: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+}
+/** The one compact secondary-metadata row — comment count, dependency count,
+ *  a due date. Full description, comment threads and history are explicitly
+ *  not this component's problem; they live behind a click, on whatever detail
+ *  surface the consumer opens from here. */
+export declare function RecordCardMeta({ className, children, ref }: RecordCardMetaProps): import("react").JSX.Element;
+export {};

package/dist/types/components/RelativeTime.d.ts

@@ -0,0 +1,17 @@
+import { type ReactNode } from "react";
+import { type RelativeFormat } from "../lib/time/relativeClock";
+export interface RelativeTimeProps {
+    /** The moment: an ISO string, epoch millis or a `Date`. */
+    at: string | number | Date;
+    /** Words for the moment as of `now`. Default: `relativeAge` in the provider's words and locale. A pure function of `(at, now)`, and a STABLE one (memoize it; a new `format` re-reads when the text next changes). */
+    format?: RelativeFormat;
+    /** The tooltip content. Default: the absolute moment, in the provider's locale. `false` for none (the caller wraps its own). */
+    tooltip?: ReactNode | false;
+    className?: string;
+}
+/**
+ * The text of a moment, re-read whenever it changes: what `RelativeTime` draws, for a caller that needs the words themselves
+ * (a sentence built around them, a layout key that must move when the shown age does). Same `format` rules as `RelativeTimeProps`.
+ */
+export declare function useRelativeText(at: string | number | Date, format?: RelativeFormat): string;
+export declare function RelativeTime({ at, format, tooltip, className }: RelativeTimeProps): import("react").JSX.Element;

package/dist/types/components/SandboxedFrame.d.ts

@@ -0,0 +1,37 @@
+export type SandboxedFrameFit = "fill" | "content" | {
+    scaleToWidth: number;
+};
+/**
+ * DXUI-6: true when a height report is the page answering the host's own resize rather than a change to the
+ * page. A page's height changes together with its viewport height only when it is laid out against that
+ * viewport (`min-height: 100vh` plus a margin, `110vh`, `calc(100vh + 2%)`, a shrinking one), and following it
+ * resizes the frame, which changes the viewport, which changes the height again, without end. A real content
+ * change arrives with the viewport unchanged. So: the viewport moved since the last report (any report, applied
+ * or not; the first report has nothing to compare with and always applies) and the height is not the one the
+ * frame already has.
+ */
+export declare function followsOwnViewport(message: {
+    height: number;
+    viewport: number;
+}, lastViewport: number | null, currentHeight: number): boolean;
+export interface SandboxedFrameProps {
+    /** A complete HTML document. Empty or non-string throws, and so does a document the policy cannot be proven first in. */
+    html: string;
+    /** The accessible name of the frame. */
+    title: string;
+    /**
+     * `"fill"` fills its box. `"content"` is as tall as the document reports itself (the page's `<html>` element), so
+     * the frame grows and shrinks with the page and the surrounding layout scrolls; a page whose root is `100vh` stays at
+     * the frame's own height. `{ scaleToWidth }` is a thumbnail: the document lays out at that viewport width and is
+     * scaled by a CSS transform to fit the box; it is not interactive, not focusable and hidden from assistive tech.
+     */
+    fit: SandboxedFrameFit;
+    /** Fill and content modes: lay the document out at this device width (px), centred in the box. */
+    viewportWidth?: number;
+    /** The framed document has mounted. */
+    onReady?: () => void;
+    /** The framed document reported a failure. The message is capped at 500 characters and is text, never markup. */
+    onError?: (message: string) => void;
+    className?: string;
+}
+export declare function SandboxedFrame({ html, title, fit, viewportWidth, onReady, onError, className, }: SandboxedFrameProps): import("react").JSX.Element;

package/dist/types/components/SearchInput.d.ts

@@ -0,0 +1,6 @@
+import { type InputProps } from "./Input";
+export interface SearchInputProps extends Omit<InputProps, "type" | "leading" | "trailing" | "value" | "defaultValue" | "onChange"> {
+    value: string;
+    onValueChange: (value: string) => void;
+}
+export declare function SearchInput({ value, onValueChange, ref, ...props }: SearchInputProps): import("react").JSX.Element;

package/dist/types/components/SecretField.d.ts

@@ -0,0 +1,90 @@
+import type { Ref } from "react";
+import { type FieldProps } from "./Field";
+import { type InputProps } from "./Input";
+export type SecretValue = {
+    kind: "unchanged";
+} | {
+    kind: "set";
+    value: string;
+} | {
+    kind: "cleared";
+};
+/**
+ * The result of testing the stored secret, supplied by the caller from a server answer. Never inferred
+ * from the value being filled: only `verified` is green.
+ */
+export type SecretStatus = 
+/** The provider accepted it. `checkedAt` is when. */
+{
+    kind: "verified";
+    checkedAt?: string | Date;
+}
+/** The provider refused it or could not be reached; `reason` is its words, printed as text. Never empty. */
+ | {
+    kind: "failed";
+    reason: string;
+    checkedAt?: string | Date;
+}
+/** Nothing can test this secret (an OAuth client secret); `message` is the caller's words saying so. Never empty. */
+ | {
+    kind: "unverifiable";
+    message: string;
+}
+/** Never tested. What an absent `status` reads as. */
+ | {
+    kind: "unchecked";
+}
+/** A test is running. */
+ | {
+    kind: "checking";
+};
+/** How Clear acts: `staged` waits for the surrounding form's Save; `immediate` is a row the caller deletes at once. */
+export type SecretClearMode = "staged" | "immediate";
+export interface SecretFieldProps extends Pick<FieldProps, "label" | "description" | "error" | "required" | "disabled" | "name" | "className">, Pick<InputProps, "size" | "placeholder"> {
+    /** The pending edit. See the module doc comment for why this is not a `string`. */
+    value: SecretValue;
+    onChange: (value: SecretValue) => void;
+    /**
+     * Whether a secret is CURRENTLY stored server-side, independent of `value`.
+     * While one is (and it is not marked cleared) the component draws the stored
+     * face and NO input; Clear is offered only then.
+     */
+    configured: boolean;
+    /**
+     * A partial, already-safe rendering of the stored value — e.g. `{ prefix:
+     * "sk-ab", suffix: "9f4c" }` for a key the consuming app's own API already
+     * truncates before it ever reaches the client. This is NOT the secret; it
+     * is a frame of reference ("is this the key I think it is?"). Absent, the
+     * stored face shows dots only.
+     */
+    hint?: {
+        prefix: string;
+        suffix: string;
+    };
+    /**
+     * The result of the last test of the stored secret, from the server. Absent
+     * reads "Not checked" — a value being filled is never "Verified".
+     */
+    status?: SecretStatus;
+    /**
+     * Tests the stored secret again. Absent, or `status` is `unverifiable`, the
+     * Re-verify button is not drawn. While `status` is `checking` it is busy.
+     */
+    onVerify?: () => void;
+    /** `staged` (default): Clear waits for the form's Save and offers Undo. `immediate`: a row that saves by itself. */
+    clear?: SecretClearMode;
+    /** When the stored value was last written, for the same frame of reference as `hint`. */
+    updatedAt?: string | Date;
+    /** Who wrote it, if the caller's system tracks that. */
+    updatedBy?: string;
+    /**
+     * Offers a show/hide toggle for text the operator just TYPED. Default true.
+     * Never offered for the stored value — see the module doc comment — and
+     * never rendered while there is no typed text to reveal.
+     */
+    revealable?: boolean;
+    /** Label on the destructive confirm button. Absent, the built-in "Clear" word of the active `UiLocaleProvider`. */
+    clearConfirmLabel?: string;
+    ref?: Ref<HTMLInputElement>;
+}
+export declare function SecretField({ value, onChange, configured, hint, status, onVerify, clear, updatedAt, updatedBy, revealable, clearConfirmLabel, label, description, error, required, disabled, name, placeholder, size, className, ref, }: SecretFieldProps): import("react").JSX.Element;

package/dist/types/components/SectionNav.d.ts

@@ -0,0 +1,15 @@
+import type { NavSection } from "./AppShell";
+export interface SectionNavProps {
+    /** The AppShell data model, reused: a group `label` is optional per section. */
+    sections: NavSection[];
+    /** The `id` of the current item. Matches nothing → nothing is marked current. */
+    activeId?: string;
+    /**
+     * Names the `<nav>` landmark, the collapsed popup, and is the collapsed
+     * control's text while `activeId` matches no item. Make it say what the list
+     * is ("Settings"), not that it is a list.
+     */
+    label: string;
+    className?: string;
+}
+export declare function SectionNav({ sections, activeId, label, className }: SectionNavProps): import("react").JSX.Element | null;

package/dist/types/components/Select.d.ts

@@ -0,0 +1,53 @@
+import { type ReactNode, type Ref } from "react";
+import { Select as BaseSelect } from "@base-ui/react/select";
+import { type VariantProps } from "tailwind-variants";
+declare const trigger: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: "h-control-sm rounded-md px-3 text-xs";
+        md: "h-control-md rounded-md px-3.5 text-sm";
+        lg: "h-control-lg rounded-lg px-4 text-md";
+    };
+}, undefined, string[], {
+    size: {
+        sm: "h-control-sm rounded-md px-3 text-xs";
+        md: "h-control-md rounded-md px-3.5 text-sm";
+        lg: "h-control-lg rounded-lg px-4 text-md";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: "h-control-sm rounded-md px-3 text-xs";
+        md: "h-control-md rounded-md px-3.5 text-sm";
+        lg: "h-control-lg rounded-lg px-4 text-md";
+    };
+}, undefined>>;
+export interface SelectProps<Value> extends Omit<BaseSelect.Root.Props<Value, boolean>, "children">, VariantProps<typeof trigger> {
+    placeholder?: string;
+    className?: string;
+    /** Accessible name for the trigger when no visible label is present. */
+    "aria-label"?: string;
+    children: ReactNode;
+    ref?: Ref<HTMLButtonElement>;
+}
+export declare function Select<Value>({ size, placeholder, className, children, ref, items, "aria-label": ariaLabel, ...props }: SelectProps<Value>): import("react").JSX.Element;
+export interface SelectItemProps extends Omit<BaseSelect.Item.Props, "className"> {
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function SelectItem({ className, children, ref, ...props }: SelectItemProps): import("react").JSX.Element;
+export interface SelectGroupProps {
+    /**
+     * The group's heading.
+     *
+     * A prop rather than a `<SelectGroupLabel>` child, because the label is only
+     * valid INSIDE a group — as a separate exported component it can be placed
+     * anywhere and throws at render. Making it a prop makes the misuse
+     * unrepresentable, which is how a blank page happened here once.
+     */
+    label?: ReactNode;
+    children: ReactNode;
+}
+export declare function SelectGroup({ label, children }: SelectGroupProps): import("react").JSX.Element;
+export declare function SelectSeparator({ className }: {
+    className?: string;
+}): import("react").JSX.Element;
+export {};

package/dist/types/components/SequenceDiagram.d.ts

@@ -0,0 +1,15 @@
+export interface SequenceStep {
+    actor: string;
+    action: string;
+    target?: string;
+    notes?: string;
+}
+export interface SequenceDiagramProps {
+    /** Accessible name for the whole step list — see `NodeCanvas`'s own `label` for why this is required, not optional. */
+    label: string;
+    steps: readonly SequenceStep[];
+    selectedIndex: number;
+    onSelectIndex: (index: number) => void;
+    className?: string;
+}
+export declare function SequenceDiagram({ label, steps, selectedIndex, onSelectIndex, className }: SequenceDiagramProps): import("react").JSX.Element;