@50arms/ui 0.0.0-stage → 35.1.0

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

@@ -0,0 +1,127 @@
+import type { ReactNode, Ref } from "react";
+import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
+import { Switch as BaseSwitch } from "@base-ui/react/switch";
+import { Radio as BaseRadio } from "@base-ui/react/radio";
+import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
+import { type VariantProps } from "tailwind-variants";
+import { type FieldProps } from "./Field";
+declare const checkbox: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: "size-[1.125rem] rounded-[0.3125rem]";
+        md: "size-[1.375rem] rounded-sm";
+        lg: "size-[1.625rem] rounded-[0.4375rem]";
+    };
+}, undefined, string[], {
+    size: {
+        sm: "size-[1.125rem] rounded-[0.3125rem]";
+        md: "size-[1.375rem] rounded-sm";
+        lg: "size-[1.625rem] rounded-[0.4375rem]";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: "size-[1.125rem] rounded-[0.3125rem]";
+        md: "size-[1.375rem] rounded-sm";
+        lg: "size-[1.625rem] rounded-[0.4375rem]";
+    };
+}, undefined>>;
+export interface CheckboxProps extends Omit<BaseCheckbox.Root.Props, "className" | "render">, VariantProps<typeof checkbox> {
+    className?: string;
+    /**
+     * DX-6426 - the change this control sends is out and unanswered: the box shows a spinner and refuses interaction (no second request) until it is
+     * answered. Pass it from the pending state of the write; the checked state stays the saved one until the answer repaints.
+     */
+    loading?: boolean;
+    ref?: Ref<HTMLButtonElement>;
+}
+export declare function Checkbox({ size, className, loading, disabled, ref, ...props }: CheckboxProps): import("react").JSX.Element;
+declare const switchTrack: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: "h-(--switch-h) w-(--switch-w) [--switch-h:calc(1.25rem*var(--ui-scale))] [--switch-w:calc(2.25rem*var(--ui-scale))]";
+        md: "h-(--switch-h) w-(--switch-w) [--switch-h:calc(1.5rem*var(--ui-scale))] [--switch-w:calc(2.75rem*var(--ui-scale))]";
+        lg: "h-(--switch-h) w-(--switch-w) [--switch-h:calc(1.75rem*var(--ui-scale))] [--switch-w:calc(3.25rem*var(--ui-scale))]";
+    };
+}, undefined, string[], {
+    size: {
+        sm: "h-(--switch-h) w-(--switch-w) [--switch-h:calc(1.25rem*var(--ui-scale))] [--switch-w:calc(2.25rem*var(--ui-scale))]";
+        md: "h-(--switch-h) w-(--switch-w) [--switch-h:calc(1.5rem*var(--ui-scale))] [--switch-w:calc(2.75rem*var(--ui-scale))]";
+        lg: "h-(--switch-h) w-(--switch-w) [--switch-h:calc(1.75rem*var(--ui-scale))] [--switch-w:calc(3.25rem*var(--ui-scale))]";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: "h-(--switch-h) w-(--switch-w) [--switch-h:calc(1.25rem*var(--ui-scale))] [--switch-w:calc(2.25rem*var(--ui-scale))]";
+        md: "h-(--switch-h) w-(--switch-w) [--switch-h:calc(1.5rem*var(--ui-scale))] [--switch-w:calc(2.75rem*var(--ui-scale))]";
+        lg: "h-(--switch-h) w-(--switch-w) [--switch-h:calc(1.75rem*var(--ui-scale))] [--switch-w:calc(3.25rem*var(--ui-scale))]";
+    };
+}, undefined>>;
+export interface SwitchProps extends Omit<BaseSwitch.Root.Props, "className" | "render">, VariantProps<typeof switchTrack> {
+    className?: string;
+    /**
+     * DX-6426 - the change this switch sends is out and unanswered: the knob shows a spinner and the switch refuses interaction (no second request)
+     * until it is answered. Pass it from the pending state of the write; the position stays the saved one until the answer repaints.
+     */
+    loading?: boolean;
+    ref?: Ref<HTMLButtonElement>;
+}
+export declare function Switch({ size, className, loading, disabled, ref, ...props }: SwitchProps): import("react").JSX.Element;
+declare const radio: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: "size-[1.125rem]";
+        md: "size-[1.375rem]";
+        lg: "size-[1.625rem]";
+    };
+}, undefined, string[], {
+    size: {
+        sm: "size-[1.125rem]";
+        md: "size-[1.375rem]";
+        lg: "size-[1.625rem]";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: "size-[1.125rem]";
+        md: "size-[1.375rem]";
+        lg: "size-[1.625rem]";
+    };
+}, undefined>>;
+export interface RadioProps extends Omit<BaseRadio.Root.Props, "className" | "render">, VariantProps<typeof radio> {
+    className?: string;
+    ref?: Ref<HTMLButtonElement>;
+}
+export declare function Radio({ size, className, ref, ...props }: RadioProps): import("react").JSX.Element;
+export interface RadioGroupProps extends Omit<BaseRadioGroup.Props, "className" | "render"> {
+    className?: string;
+    /** Lay options out in a row instead of a column. */
+    orientation?: "vertical" | "horizontal";
+    /**
+     * DX-6426 - the choice this group sends is out and unanswered: every option is disabled and a veil with a spinner covers the set until it is
+     * answered. Pass it from the pending state of the write; the checked option stays the saved one until the answer repaints.
+     */
+    loading?: boolean;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function RadioGroup({ className, orientation, loading, disabled, children, ref, ...props }: RadioGroupProps): import("react").JSX.Element;
+type LabelledProps = Pick<FieldProps, "label" | "description" | "error" | "disabled" | "name">;
+export interface CheckboxFieldProps extends CheckboxProps, LabelledProps {
+    fieldClassName?: string;
+}
+export declare function CheckboxField({ label, description, error, name, disabled, fieldClassName, ...props }: CheckboxFieldProps): import("react").JSX.Element;
+export interface SwitchFieldProps extends SwitchProps, LabelledProps {
+    fieldClassName?: string;
+}
+export declare function SwitchField({ label, description, error, name, disabled, fieldClassName, ...props }: SwitchFieldProps): import("react").JSX.Element;
+export interface RadioFieldProps extends RadioProps, LabelledProps {
+    fieldClassName?: string;
+}
+export declare function RadioField({ label, description, error, name, disabled, fieldClassName, ...props }: RadioFieldProps): import("react").JSX.Element;
+export interface RadioCardProps extends RadioProps {
+    label: ReactNode;
+    description?: ReactNode;
+}
+/**
+ * A radio rendered as a full selectable card.
+ *
+ * The whole card is the hit target, which is the point: on touch, a 22px dot
+ * beside a paragraph of text is a target most people miss at least once, and
+ * the card turns the same choice into something you cannot miss.
+ */
+export declare function RadioCard({ label, description, className, size, ...props }: RadioCardProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,86 @@
+import { type ComponentPropsWithoutRef, type ReactNode, type Ref } from "react";
+import { type CodeEditorView } from "./code-editor/context";
+export type { CodeEditorView } from "./code-editor/context";
+export interface CodeEditorProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "title" | "onChange"> {
+    /** The text, when the consumer owns it. */
+    value?: string;
+    /** The starting text, when the component owns it. */
+    defaultValue?: string;
+    /** Called with the whole document after every edit. */
+    onValueChange?: (next: string) => void;
+    /**
+     * No textarea, no editing chrome — a viewer. Defaults to TRUE; see the banner
+     * for why that direction and not the other.
+     */
+    readOnly?: boolean;
+    /** Grammar to highlight with. Unknown or absent renders as plain text. */
+    language?: string;
+    /** Caption for the toolbar — a filename, usually. */
+    filename?: string;
+    /** Accessible name for the editable surface or the scrollable viewer. */
+    label?: string;
+    /**
+     * Number to print beside the FIRST line. Supplying one is what renders the
+     * gutter, so an excerpt lifted from the middle of a file numbers itself
+     * honestly and there is no second boolean to disagree with it.
+     */
+    startLine?: number;
+    /** Tallest the surface may grow, in lines, before it scrolls. */
+    maxLines?: number;
+    /**
+     * Start collapsed to this many lines, with a control to open it. Read-only
+     * only: collapsing a surface someone is typing into hides their own caret.
+     */
+    previewLines?: number;
+    /** Soft wrap, when the consumer owns it. */
+    wrap?: boolean;
+    /** Soft wrap at mount, when the component owns it. */
+    defaultWrap?: boolean;
+    onWrapChange?: (next: boolean) => void;
+    /** Presentation, when the consumer owns it. */
+    view?: CodeEditorView;
+    /** Presentation at mount, when the component owns it. */
+    defaultView?: CodeEditorView;
+    onViewChange?: (next: CodeEditorView) => void;
+    /** What Tab inserts and what auto-indent repeats. */
+    indent?: string;
+    /** Shown in an empty editable surface. */
+    placeholder?: string;
+    /**
+     * Replaces the default toolbar. Compose `CodeEditorCaption`,
+     * `CodeEditorViewSwitch`, `CodeEditorWrapToggle` and `CodeEditorCopyButton`
+     * inside a `CodeEditorToolbar` — they read the same context the default one
+     * does — or render anything else entirely.
+     */
+    toolbar?: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function CodeEditor({ value, defaultValue, onValueChange, readOnly, language, filename, label, startLine, maxLines, previewLines, wrap, defaultWrap, onWrapChange, view, defaultView, onViewChange, indent, placeholder, toolbar, className, ref, ...props }: CodeEditorProps): import("react").JSX.Element;
+export interface CodeEditorToolbarProps {
+    children: ReactNode;
+    className?: string;
+}
+/** The bar itself. WRAPS rather than scrolls — at 375px the caption drops onto
+    its own line instead of pushing the copy button off the screen. */
+export declare function CodeEditorToolbar({ children, className }: CodeEditorToolbarProps): import("react").JSX.Element;
+/** Filename, or the language when there is no filename — whichever names it. */
+export declare function CodeEditorCaption({ className }: {
+    className?: string;
+}): import("react").JSX.Element;
+export declare function CodeEditorCopyButton({ className }: {
+    className?: string;
+}): import("react").JSX.Element;
+export declare function CodeEditorWrapToggle({ className }: {
+    className?: string;
+}): import("react").JSX.Element;
+/**
+ * Source / Preview / Split.
+ *
+ * RENDERS NOTHING when the instance has only one view. A switch with a single
+ * position is a control that teaches people it does not work — and that is the
+ * configuration being the switch, not a `showViewSwitch` prop.
+ */
+export declare function CodeEditorViewSwitch({ className }: {
+    className?: string;
+}): import("react").JSX.Element | null;

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

@@ -0,0 +1,14 @@
+export interface ColorPickerProps {
+    /** The colour, `#rrggbb`. Anything else throws: a stored colour that is not a hex is a caller bug. */
+    value: string;
+    /** Told the committed colour, lowercase `#rrggbb`. Never told an unchanged colour. */
+    onChange: (hex: string) => void;
+    /** Swatches shown above the custom area; the one equal to `value` is marked. */
+    presets?: string[];
+    /** The accessible name of the picker and of its popover. Unset, the trigger is named by its colour. */
+    label?: string;
+    disabled?: boolean;
+    size?: "sm" | "md" | "lg";
+    className?: string;
+}
+export declare function ColorPicker({ value, onChange, presets, label, disabled, size, className }: ColorPickerProps): import("react").JSX.Element;

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

@@ -0,0 +1,43 @@
+import { type ReactNode, type Ref } from "react";
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+export interface ComboboxProps<Value> extends Omit<BaseCombobox.Root.Props<Value, boolean>, "children"> {
+    /** Omitted, the provider's `combobox.placeholder`. */
+    placeholder?: string;
+    /** Shown when the filter matches nothing. Omitted, the provider's `combobox.noMatch`. */
+    emptyMessage?: ReactNode;
+    /** Accessible name, when there is no visible label. */
+    "aria-label"?: string;
+    className?: string;
+    children: ReactNode;
+    /**
+     * DX-6426 - the choice this combobox sends is out and unanswered: the chevron becomes a spinner and the field refuses input (no second request)
+     * until it is answered. Pass it from the pending state of the write; the value stays the saved one until the answer repaints.
+     */
+    loading?: boolean;
+    ref?: Ref<HTMLInputElement>;
+}
+export declare function Combobox<Value>({ placeholder, emptyMessage, className, children, ref, "aria-label": ariaLabel, onOpenChange, loading, ...props }: ComboboxProps<Value>): import("react").JSX.Element;
+export interface ComboboxItemProps extends Omit<BaseCombobox.Item.Props, "className"> {
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function ComboboxItem({ className, children, ref, ...props }: ComboboxItemProps): import("react").JSX.Element;
+export interface ComboboxGroupProps {
+    /** Prop, not a child component, so a label cannot be placed outside a group. */
+    label?: ReactNode;
+    children: ReactNode;
+}
+export declare function ComboboxGroup({ label, children }: ComboboxGroupProps): import("react").JSX.Element;
+export interface MultiComboboxProps<Value> extends ComboboxProps<Value> {
+    /** How each selected value should read on its chip. */
+    renderChip?: (value: Value) => ReactNode;
+}
+/**
+ * Multi-select, where the input becomes a chip container.
+ *
+ * Chips sit INSIDE the field rather than under it. Below the field they push
+ * every following control down as selections accumulate, so a form visibly
+ * reflows while someone is still choosing — and the chips stop looking like
+ * part of the input they belong to.
+ */
+export declare function MultiCombobox<Value>({ placeholder, emptyMessage, renderChip, className, children, ref, "aria-label": ariaLabel, onOpenChange, ...props }: MultiComboboxProps<Value>): import("react").JSX.Element;

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

@@ -0,0 +1,35 @@
+import type { ReactNode } from "react";
+import { type IconName } from "./Icon";
+export type CommandItem = {
+    id: string;
+    label: string;
+    /** Extra words to match against that are not shown — synonyms, old names. */
+    keywords?: string;
+    description?: string;
+    icon?: IconName;
+    /** Displayed on the right — "⌘K", "G then D". */
+    shortcut?: string;
+    group?: string;
+    onSelect: () => void;
+};
+export interface CommandPaletteProps {
+    items: CommandItem[];
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Omitted, the provider's `commandPalette.placeholder`. */
+    placeholder?: string;
+    /** Omitted, the provider's `commandPalette.noMatch`. */
+    emptyMessage?: ReactNode;
+}
+export declare function CommandPalette({ items, open, onOpenChange, placeholder, emptyMessage, }: CommandPaletteProps): import("react").JSX.Element;
+/**
+ * Opens the palette on a keyboard shortcut.
+ *
+ * Bound to ⌘K / Ctrl-K, and deliberately NOT active while a text field has
+ * focus unless the modifier is held — a bare-key shortcut that fires mid-
+ * sentence is the fastest way to make people distrust an app.
+ */
+export declare function useCommandPalette(key?: string): {
+    open: boolean;
+    setOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+};

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

@@ -0,0 +1,61 @@
+import type { ReactNode, Ref } from "react";
+import { type VariantProps } from "tailwind-variants";
+import { type ProgressTone } from "./Progress";
+declare const ring: import("tailwind-variants").TVReturnType<{
+    size: {
+        /** 28px — sits in a tab or a row beside a 14px label; a two-digit count fits the centre. */
+        sm: "size-7";
+        md: "size-10";
+        lg: "size-16";
+    };
+}, undefined, "relative inline-grid shrink-0 place-items-center", {
+    size: {
+        /** 28px — sits in a tab or a row beside a 14px label; a two-digit count fits the centre. */
+        sm: "size-7";
+        md: "size-10";
+        lg: "size-16";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        /** 28px — sits in a tab or a row beside a 14px label; a two-digit count fits the centre. */
+        sm: "size-7";
+        md: "size-10";
+        lg: "size-16";
+    };
+}, undefined>>;
+/** One ring: how full it is (0-100, clamped) and the tone it is drawn in. */
+export interface ConcentricRingLevel {
+    value: number;
+    tone: ProgressTone;
+}
+export interface ConcentricRingProps extends VariantProps<typeof ring> {
+    /**
+     * REQUIRED, and the whole sentence — both fractions in words, with their
+     * numbers. See the banner: this is what keeps color from being the only
+     * carrier of "which ring is which".
+     */
+    label: string;
+    /** The larger, first-read ring. */
+    outer: ConcentricRingLevel;
+    /** The smaller ring inside it. */
+    inner: ConcentricRingLevel;
+    /** Centred in the disc inside the inner ring, e.g. the total. Hidden from assistive tech. */
+    children?: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLSpanElement>;
+}
+/**
+ * Two nested rings, each filled by its own 0-100 value, around a centre number.
+ *
+ * ```tsx
+ * <ConcentricRing
+ *   label="Goals: 5 of 6 signed off by a person, 1 of 6 verified by an agent"
+ *   outer={{ value: (5 / 6) * 100, tone: "success" }}
+ *   inner={{ value: (1 / 6) * 100, tone: "brand" }}
+ * >
+ *   6
+ * </ConcentricRing>
+ * ```
+ */
+export declare function ConcentricRing({ label, outer, inner, size, children, className, ref }: ConcentricRingProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,64 @@
+import type { ReactNode } from "react";
+import { type CardHeaderProps } from "./Card";
+export type ConnectionHealth = "healthy" | "degraded" | "broken" | "unknown";
+export interface ConnectionCardProps {
+    /**
+     * The service's brand mark. A consumer normally passes a real logo — an
+     * `<img>`, an inline SVG. Omit it and the card falls back to this library's
+     * own `Icon`, so a catalogue is never missing a media slot entirely just
+     * because one integration has no artwork yet.
+     */
+    logo?: ReactNode;
+    /** The service's name. Plain text — it is composed into the action button's
+     *  accessible name (see `actionLabel`), which a JSX tree cannot be. */
+    name: string;
+    /** What this connection is FOR, one line — "Email via Mailchimp
+     *  Transactional", not "Mailchimp integration". */
+    description?: ReactNode;
+    /** The four-state health model. See the file header for why not a boolean. */
+    status: ConnectionHealth;
+    /** A failure reason, a partial-failure explanation, or a last-checked
+     *  timestamp — whatever the status badge does not already say. Rendered
+     *  only when supplied; omitting it drops the line rather than reserving
+     *  empty space for it. */
+    detail?: ReactNode;
+    /**
+     * The primary action's visible label — typically "Connect" for `unknown`,
+     * "Manage" (or "Reconnect", "Fix") otherwise. Omitting it renders no action
+     * at all, for a read-only tile.
+     *
+     * The button's PROMINENCE follows `status`, not this label's wording: an
+     * `unknown` card gets the solid, high-contrast treatment because getting it
+     * connected is the one thing worth doing; every other state gets the
+     * quieter outline treatment, because the card's border and badge are
+     * already carrying the "look here" signal and a second loud button would
+     * just compete with them.
+     */
+    actionLabel?: string;
+    onAction?: () => void;
+    /**
+     * Present (and non-`undefined`) disables the action and explains why.
+     *
+     * This is `IconButton`'s `disabledReason` contract, carried over verbatim:
+     * `aria-disabled` rather than native `disabled`, so the control stays
+     * hoverable and focusable — a `disabled` button drops out of hit-testing
+     * entirely, and a control nobody can point at can never be asked why it
+     * won't fire. The reason is announced two ways at once, neither of them
+     * "only on hover": an always-present `sr-only` node wired through
+     * `aria-describedby` for a screen reader, and a visible `Tooltip` that opens
+     * on focus as well as on pointer hover, for a keyboard user who generates
+     * no hover event at all.
+     */
+    actionDisabledReason?: string;
+    /**
+     * The heading level the name renders as. See `CardHeader.titleAs` — the
+     * reasoning is identical: a card's correct heading level is a property of
+     * where it sits in the page outline, not of the card, so only the caller
+     * of a whole catalogue grid knows it.
+     *
+     * @default "h3"
+     */
+    titleAs?: CardHeaderProps["titleAs"];
+    className?: string;
+}
+export declare function ConnectionCard({ logo, name, description, status, detail, actionLabel, onAction, actionDisabledReason, titleAs, className, }: ConnectionCardProps): import("react").JSX.Element;

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

@@ -0,0 +1,35 @@
+import type { ReactNode } from "react";
+/** Where a piece of an agent's context came from. */
+export type ContextSource = "danxbot" | "repo" | "plugin";
+/** The badge tone of each source. */
+export declare const CONTEXT_SOURCE_TONE: {
+    readonly danxbot: "neutral";
+    readonly repo: "info";
+    readonly plugin: "success";
+};
+export interface ContextItemRowProps {
+    /** The `Accordion` item value; unique within the list. */
+    value: string;
+    /** The category, already in the reader's language ("Skill"). */
+    category: string;
+    source: ContextSource;
+    /** The Badge text for the source when it should differ from the id ("50 Arms" for "danxbot"); `source` still picks the tone. */
+    sourceLabel?: string;
+    /** The item's own name, shown in mono. */
+    id: string;
+    /** The size sentence ("9,600 bytes · ~2,400 tokens"), already formatted. */
+    sizeLabel: string;
+    /** The body shown when the row opens. */
+    children?: ReactNode;
+    className?: string;
+}
+export declare function ContextItemRow({ value, category, source, sourceLabel, id, sizeLabel, children, className }: ContextItemRowProps): import("react").JSX.Element;
+export interface ContextSummaryProps {
+    /** "5 items", already in the reader's language. */
+    countLabel: string;
+    /** "20,000 bytes · ~5,000 tokens total", already formatted. */
+    totalLabel: string;
+    className?: string;
+}
+/** The line above the list: how many items, and what they add up to. */
+export declare function ContextSummary({ countLabel, totalLabel, className }: ContextSummaryProps): import("react").JSX.Element;

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

@@ -0,0 +1,14 @@
+export interface CopyValueProps {
+    /** What is shown, in a monospace readout. */
+    value: string;
+    /** What lands on the clipboard. Defaults to `value`. */
+    copyValue?: string;
+    /** Names the copy action for assistive tech and the tooltip, e.g. "sign-up link" → "Copy sign-up link". Required: an icon-only control has no other name. */
+    label: string;
+    /** Fires after a successful copy, with the text that was copied. */
+    onCopied?: (copied: string) => void;
+    /** Fires when the browser refused the clipboard, with the underlying error. */
+    onCopyError?: (error: unknown) => void;
+    className?: string;
+}
+export declare function CopyValue({ value, copyValue, label, onCopied, onCopyError, className }: CopyValueProps): import("react").JSX.Element;

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

@@ -0,0 +1,14 @@
+/** `neutral` is the quiet gray of a count nothing waits on, `danger` the red of one that does. */
+export type CountBadgeTone = "neutral" | "danger";
+/**
+ * DX-6446 — a count as a small round badge on the top-right corner of its positioned parent (`relative`), the one look every comment count has:
+ * the comment button's, and the card face's comment mark. It is a SIBLING of the glyph's clipping control, never inside it: `Button` clips its content
+ * (`overflow-hidden`, for the ripple), which cut the badge and, once it was pulled inward, put it over the glyph.
+ * `outside` rides the badge on the corner of a bare glyph: it overlaps only a 5px square of the glyph's corner and is anchored by its left edge, so a wider count grows away from the glyph; the owner reserves the width to its right.
+ * The number is zero-inclusive (a count of nothing is still a count) and reads `99+` above 99. `aria-hidden`: the owner's label says the count.
+ */
+export declare function CountBadge({ count, tone, outside }: {
+    count: number;
+    tone: CountBadgeTone;
+    outside?: boolean;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,30 @@
+export declare const startOfDay: (d: Date) => Date;
+export type DateRange = {
+    from: Date | null;
+    to: Date | null;
+};
+/**
+ * The popover a calendar opens in — ONE size for every control that opens one (`DatePicker`,
+ * `DateField`), so they cannot drift apart.
+ *
+ * A touch day is floored to 44px (`dx-tap`), so seven of them need 308px, and a popover is capped
+ * at 90vw. With the old fixed 20.5rem frame plus 12px padding a 375px phone clipped the Sunday
+ * column, the next-month arrow and Clear (SG-906, measured). So on a coarse pointer the padding
+ * drops to 8px and the calendar fills the popover instead of fixing its own width: 308px of days +
+ * 16px of padding = 324px, which is 90vw of a 360px phone. On a mouse nothing changes size.
+ */
+export declare const CALENDAR_POPOVER_CLASS = "w-[19rem] p-3 pointer-coarse:w-[22rem] pointer-coarse:p-2";
+export interface DateCalendarProps {
+    /** A single date, or a range when `range` is set. */
+    value?: Date | DateRange | null;
+    onValueChange?: (value: Date | DateRange | null) => void;
+    range?: boolean;
+    min?: Date;
+    max?: Date;
+    /** Disable specific days — weekends, holidays, taken slots. */
+    isDateDisabled?: (date: Date) => boolean;
+    /** Draw the Clear button. `false` for a field that must always hold a date: no Clear button, and the calendar never emits an empty value. */
+    clearable?: boolean;
+    className?: string;
+}
+export declare function DateCalendar({ value, onValueChange, range, min, max, isDateDisabled, clearable, className, }: DateCalendarProps): import("react").JSX.Element;

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

@@ -0,0 +1,29 @@
+export interface DateFieldProps {
+    /** The stored ISO calendar date (`YYYY-MM-DD`), or null for none. */
+    value: string | null;
+    /** Reports the new ISO date, or null when the person cleared it. Only on commit. */
+    onValueChange: (value: string | null) => void;
+    /** Told when the box gains and loses focus — i.e. while the person's own text is on screen. */
+    onEditingChange?: (editing: boolean) => void;
+    /** The accessible name. Required: a date box with no name is a box nobody can find. */
+    "aria-label": string;
+    /** Omit for the built-in placeholder. A custom one is not translated for you: it must describe the locale's date shape (the order and separator `formatDate` prints for the provider locale). */
+    placeholder?: string;
+    disabled?: boolean;
+    /** The sentence shown for typed text that is not a date. Omit for the built-in one. */
+    invalidMessage?: string;
+    className?: string;
+}
+export declare function DateField({ value, onValueChange, onEditingChange, "aria-label": ariaLabel, placeholder, disabled, invalidMessage, className, }: DateFieldProps): import("react").JSX.Element;
+export interface DateTimeFieldProps {
+    /** The stored ISO instant, or null for none. */
+    value: string | null;
+    /** Reports the new ISO instant, or null when the date was cleared. Only on commit. */
+    onValueChange: (value: string | null) => void;
+    /** Told while either half has focus. */
+    onEditingChange?: (editing: boolean) => void;
+    "aria-label": string;
+    disabled?: boolean;
+    className?: string;
+}
+export declare function DateTimeField({ value, onValueChange, onEditingChange, "aria-label": ariaLabel, disabled, className, }: DateTimeFieldProps): import("react").JSX.Element;

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

@@ -0,0 +1,20 @@
+import { type DateRange } from "./DateCalendar";
+export type { DateRange };
+export interface DatePickerProps {
+    /** A single date, or a range when `range` is set. */
+    value?: Date | DateRange | null;
+    onValueChange?: (value: Date | DateRange | null) => void;
+    range?: boolean;
+    min?: Date;
+    max?: Date;
+    /** Disable specific days — weekends, holidays, taken slots. */
+    isDateDisabled?: (date: Date) => boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    /** How the chosen date reads in the trigger. */
+    format?: (date: Date) => string;
+    /** Draw the Clear button (default). `false` for a field that must always hold a date: no Clear button, and the picker never emits null. */
+    clearable?: boolean;
+    className?: string;
+}
+export declare function DatePicker({ value, onValueChange, range, min, max, isDateDisabled, placeholder, disabled, format, clearable, className, }: DatePickerProps): import("react").JSX.Element;

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

@@ -0,0 +1,9 @@
+/**
+ * The text `DateTimeText` draws. An unparseable string is returned unchanged, as `formatDateTime` does.
+ */
+export declare function useDateTimeText(at: string | number): string;
+export interface DateTimeTextProps {
+    /** The instant: an ISO string or epoch millis. An unparseable string is drawn as given. */
+    at: string | number;
+}
+export declare function DateTimeText({ at }: DateTimeTextProps): import("react").JSX.Element;

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

@@ -0,0 +1,40 @@
+import type { HTMLAttributes, ReactNode, Ref } from "react";
+export interface DescriptionListItemProps {
+    /** The label. Kept short — it truncates rather than wrapping. */
+    term: ReactNode;
+    /** The value. */
+    children: ReactNode;
+    /** Machine text (a raw key, a stored id) rather than prose written for a reader. */
+    mono?: boolean;
+    className?: string;
+}
+/** One term/description pair. Renders as a `<div>` — mount it inside a `DescriptionList` (or any `<dl>`) for real list semantics. */
+export declare function DescriptionListItem({ term, children, mono, className }: DescriptionListItemProps): import("react").JSX.Element;
+/** One entry of the data-driven form — see `DescriptionList`'s `entries` prop. */
+export interface DescriptionListEntry {
+    key: string;
+    term: ReactNode;
+    /** Rendered as-is. Pass a formatted string for a raw value — this does not stringify for you. */
+    value: ReactNode;
+    mono?: boolean;
+}
+export interface DescriptionListProps extends Omit<HTMLAttributes<HTMLDListElement>, "children"> {
+    /**
+     * Data-driven form — one `DescriptionListItem` per entry, in order. Use
+     * this for a bag of keys the caller does not know ahead of time (a
+     * diagnostic's context, an error payload) — the shape `FreeFormDetails`
+     * covered in the app. Omit `entries` and pass `children` instead to compose
+     * `DescriptionListItem`s directly, for a fixed, known set of fields.
+     */
+    entries?: readonly DescriptionListEntry[];
+    children?: ReactNode;
+    ref?: Ref<HTMLDListElement>;
+}
+/**
+ * The list itself — a `<dl>` wrapper, empty of layout beyond stacking its
+ * rows. `Card`'s own padding/`divide-y` and any other framing stay the
+ * caller's choice via `className`, the same way the app's own usage put
+ * `DefinitionRow`s inside a `Card` rendering as `<dl>` rather than folding
+ * that framing in here.
+ */
+export declare function DescriptionList({ entries, children, className, ref, ...props }: DescriptionListProps): import("react").JSX.Element;