@50arms/ui 0.0.0-stage → 35.2.0

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

@@ -0,0 +1,580 @@
+import { type ReactNode, type Ref } from "react";
+import { type VariantProps } from "tailwind-variants";
+declare const bar: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            track: string;
+        };
+        md: {
+            track: string;
+        };
+        lg: {
+            track: string;
+        };
+    };
+    tone: {
+        accent: {
+            indicator: string;
+        };
+        brand: {
+            indicator: string;
+        };
+        success: {
+            indicator: string;
+        };
+        warning: {
+            indicator: string;
+        };
+        danger: {
+            indicator: string;
+        };
+        /**
+         * Neutral/gray — for a segment or bar that is neither good nor bad, just
+         * not-yet-decided (a "pending" quality gate, a step nobody has started).
+         * `--color-tertiary` is already the closest token to the old Vue app's
+         * pending-gate gray (`#64748b`): in the light theme it resolves to
+         * `--slate-500`, which IS `#64748b` (see tokens.css / contrast.css) —
+         * so this reuses an existing semantic slot instead of minting a new
+         * `--color-neutral` custom property for one tone.
+         */
+        neutral: {
+            indicator: string;
+        };
+        /**
+         * DX-3014 — a resolved-but-neither-pass-nor-fail state: a deliberately
+         * deferred/withdrawn checklist item, a skipped quality gate. Reuses the
+         * SAME `--color-info` token `Badge`/`Callout`/`Toast` already draw their
+         * own "info" tone from, so a segmented ring's info arc never invents a
+         * second blue that disagrees with the pill sitting next to it.
+         */
+        info: {
+            indicator: string;
+        };
+        /**
+         * DX-3662 — a CLOSED/inert state (a terminated card, a retired
+         * record): distinct from `neutral`'s "not yet decided" grey above —
+         * see `authored.css`'s own `--color-muted` comment for the full
+         * reasoning. DX-3696: the ring's own `RING_STATUS_ORDER` never draws
+         * `muted` (Cancelled is excluded from the ring), so the ring's OKLab
+         * adjacency test (`card-vocabulary.test.ts`, the app repo) never
+         * actually checks this pair — `muted-quieter-than-neutral.test.ts`,
+         * in THIS repo, is what pins the two greys apart (as a contrast-ranking
+         * floor, not an OKLab distance — muted must read strictly quieter
+         * than neutral, not merely far from it).
+         */
+        muted: {
+            indicator: string;
+        };
+    };
+}, {
+    root: string;
+    header: string;
+    label: string;
+    value: string;
+    track: string;
+    indicator: string[];
+}, undefined, {
+    size: {
+        sm: {
+            track: string;
+        };
+        md: {
+            track: string;
+        };
+        lg: {
+            track: string;
+        };
+    };
+    tone: {
+        accent: {
+            indicator: string;
+        };
+        brand: {
+            indicator: string;
+        };
+        success: {
+            indicator: string;
+        };
+        warning: {
+            indicator: string;
+        };
+        danger: {
+            indicator: string;
+        };
+        /**
+         * Neutral/gray — for a segment or bar that is neither good nor bad, just
+         * not-yet-decided (a "pending" quality gate, a step nobody has started).
+         * `--color-tertiary` is already the closest token to the old Vue app's
+         * pending-gate gray (`#64748b`): in the light theme it resolves to
+         * `--slate-500`, which IS `#64748b` (see tokens.css / contrast.css) —
+         * so this reuses an existing semantic slot instead of minting a new
+         * `--color-neutral` custom property for one tone.
+         */
+        neutral: {
+            indicator: string;
+        };
+        /**
+         * DX-3014 — a resolved-but-neither-pass-nor-fail state: a deliberately
+         * deferred/withdrawn checklist item, a skipped quality gate. Reuses the
+         * SAME `--color-info` token `Badge`/`Callout`/`Toast` already draw their
+         * own "info" tone from, so a segmented ring's info arc never invents a
+         * second blue that disagrees with the pill sitting next to it.
+         */
+        info: {
+            indicator: string;
+        };
+        /**
+         * DX-3662 — a CLOSED/inert state (a terminated card, a retired
+         * record): distinct from `neutral`'s "not yet decided" grey above —
+         * see `authored.css`'s own `--color-muted` comment for the full
+         * reasoning. DX-3696: the ring's own `RING_STATUS_ORDER` never draws
+         * `muted` (Cancelled is excluded from the ring), so the ring's OKLab
+         * adjacency test (`card-vocabulary.test.ts`, the app repo) never
+         * actually checks this pair — `muted-quieter-than-neutral.test.ts`,
+         * in THIS repo, is what pins the two greys apart (as a contrast-ranking
+         * floor, not an OKLab distance — muted must read strictly quieter
+         * than neutral, not merely far from it).
+         */
+        muted: {
+            indicator: string;
+        };
+    };
+}, {
+    root: string;
+    header: string;
+    label: string;
+    value: string;
+    track: string;
+    indicator: string[];
+}, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: {
+            track: string;
+        };
+        md: {
+            track: string;
+        };
+        lg: {
+            track: string;
+        };
+    };
+    tone: {
+        accent: {
+            indicator: string;
+        };
+        brand: {
+            indicator: string;
+        };
+        success: {
+            indicator: string;
+        };
+        warning: {
+            indicator: string;
+        };
+        danger: {
+            indicator: string;
+        };
+        /**
+         * Neutral/gray — for a segment or bar that is neither good nor bad, just
+         * not-yet-decided (a "pending" quality gate, a step nobody has started).
+         * `--color-tertiary` is already the closest token to the old Vue app's
+         * pending-gate gray (`#64748b`): in the light theme it resolves to
+         * `--slate-500`, which IS `#64748b` (see tokens.css / contrast.css) —
+         * so this reuses an existing semantic slot instead of minting a new
+         * `--color-neutral` custom property for one tone.
+         */
+        neutral: {
+            indicator: string;
+        };
+        /**
+         * DX-3014 — a resolved-but-neither-pass-nor-fail state: a deliberately
+         * deferred/withdrawn checklist item, a skipped quality gate. Reuses the
+         * SAME `--color-info` token `Badge`/`Callout`/`Toast` already draw their
+         * own "info" tone from, so a segmented ring's info arc never invents a
+         * second blue that disagrees with the pill sitting next to it.
+         */
+        info: {
+            indicator: string;
+        };
+        /**
+         * DX-3662 — a CLOSED/inert state (a terminated card, a retired
+         * record): distinct from `neutral`'s "not yet decided" grey above —
+         * see `authored.css`'s own `--color-muted` comment for the full
+         * reasoning. DX-3696: the ring's own `RING_STATUS_ORDER` never draws
+         * `muted` (Cancelled is excluded from the ring), so the ring's OKLab
+         * adjacency test (`card-vocabulary.test.ts`, the app repo) never
+         * actually checks this pair — `muted-quieter-than-neutral.test.ts`,
+         * in THIS repo, is what pins the two greys apart (as a contrast-ranking
+         * floor, not an OKLab distance — muted must read strictly quieter
+         * than neutral, not merely far from it).
+         */
+        muted: {
+            indicator: string;
+        };
+    };
+}, {
+    root: string;
+    header: string;
+    label: string;
+    value: string;
+    track: string;
+    indicator: string[];
+}>>;
+export interface ProgressProps extends VariantProps<typeof bar> {
+    /** 0–100, or `null` for work of unknown length. */
+    value: number | null;
+    label?: ReactNode;
+    /** Turn the number into what a person should read. */
+    format?: (value: number) => string;
+    showValue?: boolean;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function Progress({ value, label, format: formatProp, showValue, size, tone, className, ref, }: ProgressProps): import("react").JSX.Element;
+interface MeterBaseProps extends VariantProps<typeof bar> {
+    value: number;
+    min?: number;
+    max?: number;
+    label?: ReactNode;
+    format?: (value: number) => string;
+    showValue?: boolean;
+    /**
+     * DXUI-49 — how the track looks while the value sits at its start (0, or
+     * `min`). `"dashed"` draws it as a dashed grey outline with no fill, so an
+     * empty gauge reads as empty rather than as a nearly-empty bar. Above the
+     * start the normal filled track is drawn. Unset, the track is always filled.
+     * Applies to a Meter without a `marker`.
+     */
+    emptyTrack?: "dashed";
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * DX-5243 — a target on the gauge. `marker` is a value on the same scale as
+ * `value`; a thin tick is drawn there and `markerLabel` (required with it, so
+ * the tick is never silent) describes it to assistive tech. When `value`
+ * exceeds `marker` the track stretches to span `value`: the part up to the
+ * marker keeps `tone`, the part past it is `overflowTone`. `marker` 0 is a
+ * real target (start nothing): the tick sits at the start and everything
+ * running is overflow.
+ */
+export type MeterMarkerProps = {
+    marker?: undefined;
+    markerLabel?: never;
+    overflowTone?: never;
+} | {
+    marker: number;
+    markerLabel: string;
+    overflowTone?: ProgressTone;
+};
+export type MeterProps = MeterBaseProps & MeterMarkerProps;
+/** A gauge: how full something is right now. Never indeterminate. */
+export declare function Meter({ value, min, max, label, format, showValue, size, tone, marker, markerLabel, overflowTone, emptyTrack, className, ref, }: MeterProps): import("react").JSX.Element;
+declare const ring: import("tailwind-variants").TVReturnType<{
+    size: {
+        /**
+         * Icon-sized — a single arc beside a chevron or a percentage in a card
+         * row (24px), where even `sm` (40px) is taller than the row itself.
+         * Matches the private `ContextDial` this size replaces in
+         * `chat/ContextMeter.tsx` (`size-3.5`) pixel-for-pixel. Always pair with
+         * `showValue={false}`: two digits do not fit a 14px circle, and nothing
+         * clips or shrinks them automatically if you leave the number on.
+         */
+        xs: "size-3.5";
+        /**
+         * DX-4099 — the ring that fills exactly ONE text line (1rem, the line
+         * unit of a card face row, `leading-4`), with nothing around it. Built to
+         * carry an `xs` icon in its centre (`children`, `showValue={false}`): the
+         * ring is the indicator and the icon says what it indicates. `xs` (14px)
+         * is a hair short of a 16px line and leaves the ring floating in it. Its
+         * track is thinner than every other size's (`RING_GEOMETRY`), so the icon
+         * fits inside it. Like `xs`, always pair with `showValue={false}`: two
+         * digits do not fit a 16px circle, and nothing clips or shrinks them.
+         */
+        row: "size-4";
+        sm: "size-10";
+        md: "size-16";
+        lg: "size-24";
+        /**
+         * A big donut standing in as a stat's own visual (`BigDonut`, demands'
+         * Extracted-tab EXTRACTED/AUDITS/HUMAN VERIFIED/answer-key row) needs more
+         * room than `lg` for a "count/total" fraction than a bare percentage ever
+         * did — `lg` was sized for two digits, and a real fraction runs to eight
+         * or nine characters even compacted ("1.1K/1.5K"). `xl` is that room.
+         */
+        xl: "size-32";
+    };
+}, undefined, "relative grid shrink-0 place-items-center", {
+    size: {
+        /**
+         * Icon-sized — a single arc beside a chevron or a percentage in a card
+         * row (24px), where even `sm` (40px) is taller than the row itself.
+         * Matches the private `ContextDial` this size replaces in
+         * `chat/ContextMeter.tsx` (`size-3.5`) pixel-for-pixel. Always pair with
+         * `showValue={false}`: two digits do not fit a 14px circle, and nothing
+         * clips or shrinks them automatically if you leave the number on.
+         */
+        xs: "size-3.5";
+        /**
+         * DX-4099 — the ring that fills exactly ONE text line (1rem, the line
+         * unit of a card face row, `leading-4`), with nothing around it. Built to
+         * carry an `xs` icon in its centre (`children`, `showValue={false}`): the
+         * ring is the indicator and the icon says what it indicates. `xs` (14px)
+         * is a hair short of a 16px line and leaves the ring floating in it. Its
+         * track is thinner than every other size's (`RING_GEOMETRY`), so the icon
+         * fits inside it. Like `xs`, always pair with `showValue={false}`: two
+         * digits do not fit a 16px circle, and nothing clips or shrinks them.
+         */
+        row: "size-4";
+        sm: "size-10";
+        md: "size-16";
+        lg: "size-24";
+        /**
+         * A big donut standing in as a stat's own visual (`BigDonut`, demands'
+         * Extracted-tab EXTRACTED/AUDITS/HUMAN VERIFIED/answer-key row) needs more
+         * room than `lg` for a "count/total" fraction than a bare percentage ever
+         * did — `lg` was sized for two digits, and a real fraction runs to eight
+         * or nine characters even compacted ("1.1K/1.5K"). `xl` is that room.
+         */
+        xl: "size-32";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        /**
+         * Icon-sized — a single arc beside a chevron or a percentage in a card
+         * row (24px), where even `sm` (40px) is taller than the row itself.
+         * Matches the private `ContextDial` this size replaces in
+         * `chat/ContextMeter.tsx` (`size-3.5`) pixel-for-pixel. Always pair with
+         * `showValue={false}`: two digits do not fit a 14px circle, and nothing
+         * clips or shrinks them automatically if you leave the number on.
+         */
+        xs: "size-3.5";
+        /**
+         * DX-4099 — the ring that fills exactly ONE text line (1rem, the line
+         * unit of a card face row, `leading-4`), with nothing around it. Built to
+         * carry an `xs` icon in its centre (`children`, `showValue={false}`): the
+         * ring is the indicator and the icon says what it indicates. `xs` (14px)
+         * is a hair short of a 16px line and leaves the ring floating in it. Its
+         * track is thinner than every other size's (`RING_GEOMETRY`), so the icon
+         * fits inside it. Like `xs`, always pair with `showValue={false}`: two
+         * digits do not fit a 16px circle, and nothing clips or shrinks them.
+         */
+        row: "size-4";
+        sm: "size-10";
+        md: "size-16";
+        lg: "size-24";
+        /**
+         * A big donut standing in as a stat's own visual (`BigDonut`, demands'
+         * Extracted-tab EXTRACTED/AUDITS/HUMAN VERIFIED/answer-key row) needs more
+         * room than `lg` for a "count/total" fraction than a bare percentage ever
+         * did — `lg` was sized for two digits, and a real fraction runs to eight
+         * or nine characters even compacted ("1.1K/1.5K"). `xl` is that room.
+         */
+        xl: "size-32";
+    };
+}, undefined>>;
+/** The tones a bar, meter or ring arc can be drawn in. */
+export type ProgressTone = NonNullable<VariantProps<typeof bar>["tone"]>;
+/** One arc of a segmented ring: how much, in what tone, called what. */
+export interface ProgressRingSegment {
+    /**
+     * How much of `total` this arc covers, in the caller's own units — tokens,
+     * megabytes, jobs. Never a percentage of its own accord; the denominator is
+     * `total` and nothing else.
+     */
+    value: number;
+    tone: ProgressTone;
+    /**
+     * DXUI-30 — any CSS colour string. Set, it paints this arc in place of its
+     * `tone` (same prop name and meaning as `Badge`'s `color`); unset, the tone
+     * applies. Lets a consumer use a colour it owns without overriding theme tokens.
+     */
+    color?: string;
+    /**
+     * What this arc IS, in words.
+     *
+     * Not decorative and not optional: it is read out as part of the ring's
+     * description, and it is the only thing a legend beside the ring has to name
+     * a colour by. A segmented ring whose arcs had no names would encode its
+     * entire breakdown in hue alone.
+     */
+    label: string;
+}
+/**
+ * DX-4099 — what sits in the middle of the ring, as ONE union so the number,
+ * the done check and a caller's own glyph never compete. `children` is only
+ * accepted with `showValue={false}`: a glyph drawn over the percentage would be
+ * two things in one 14-16px circle, and a silent "which wins" rule is exactly
+ * what the `segments`/`value` union below exists to avoid. The glyph is
+ * decoration (`aria-hidden`); the ring's role, name and description are
+ * unchanged and carry the meaning.
+ */
+type ProgressRingCentre = {
+    /**
+     * Draw the number in the middle. On by default, which is the behaviour this
+     * component has always had.
+     *
+     * Worth turning off on a `sm` ring used as an affordance rather than a
+     * readout — two digits inside a 40px circle is a number nobody reads and a
+     * ring nobody can see past.
+     */
+    showValue?: true;
+    children?: never;
+} | {
+    showValue: false;
+    /** A decorative glyph centred over the ring, e.g. `<Icon name="file-code" size="xs" />`. */
+    children?: ReactNode;
+};
+interface ProgressRingBase extends VariantProps<typeof ring> {
+    /**
+     * REQUIRED, and a plain string.
+     *
+     * The ring draws a bare number in a circle, so unlike the bar it has no
+     * visible label to borrow a name from — without this it announces as
+     * "progress bar, 64" with no indication of 64 WHAT. Optional here would mean
+     * "forgotten most of the time", which the browser scan proved within minutes
+     * of this component existing.
+     */
+    label: string;
+    /**
+     * DX-4062 / DX-4257 — done state: at 100% or more the centre shows a green check
+     * (the library's `check` icon) instead of "100%". Below 100% nothing changes.
+     * On by default; pass `false` for a ring whose full value must still read as a
+     * number. It takes the place of the number, so it has no effect with
+     * `showValue={false}`.
+     */
+    checkWhenFull?: boolean;
+    className?: string;
+}
+/** A ring showing ONE number. `null` is "working, length unknown". */
+export type ProgressRingValueProps = ProgressRingBase & ProgressRingCentre & {
+    value: number | null;
+    tone?: ProgressTone;
+    segments?: never;
+    total?: never;
+    remainderLabel?: never;
+};
+/**
+ * A ring showing a BREAKDOWN: contiguous arcs around one circle.
+ *
+ * The two shapes are a union rather than two optional props, so passing both
+ * `value` and `segments` does not type-check. There is no precedence rule to
+ * learn and no silent winner.
+ */
+export type ProgressRingSegmentsProps = ProgressRingBase & ProgressRingCentre & {
+    /** Drawn in order, starting at twelve o'clock and running clockwise. */
+    segments: ProgressRingSegment[];
+    /**
+     * The whole the segments are parts OF, in the same units as their values.
+     *
+     * REQUIRED, with no default. A default of 100 would read as "the values are
+     * percentages" and quietly turn a ring of token counts into a ring that
+     * overflows on its first render — and the denominator is the one fact that
+     * makes a remainder arc mean anything.
+     *
+     * SEGMENTS SUMMING TO MORE THAN THIS ARE **CLAMPED, NOT NORMALISED** — see
+     * the note above `layoutRingSegments`.
+     */
+    total: number;
+    /**
+     * What the unfilled part of the ring IS, for the description: "Remaining",
+     * "Free", "Unallocated".
+     *
+     * The arc itself needs no drawing — it is the track showing through — but it
+     * still needs a name, because "72% used" and "28% free" are the same fact
+     * and readers act on different halves of it.
+     */
+    remainderLabel?: string;
+    /**
+     * Overrides the centre number — and `aria-valuenow` with it — instead of
+     * the library's own `percentOf(used, total)`.
+     *
+     * DX-3766: `percentOf(used, total)` answers "how much of what's DRAWN is
+     * used", which is the right fact only when the segments are a partial fill
+     * (a context window, a disk budget) with real room left on the track. A
+     * caller who draws every category that makes up the whole — a plan
+     * header's In Progress/Ready/Archive/Review/Done breakdown, where the
+     * segments ARE the total by construction — gets a permanent, useless 100%
+     * out of that formula, because `used` always equals `total`. There is no
+     * way to get a DIFFERENT number (e.g. "Done ÷ total") out of the segments
+     * without either lying about what's drawn or losing the multi-arc colour
+     * breakdown entirely.
+     *
+     * A plain number, read the same way the computed percent is: rounded for
+     * display, and separately clamped to [0, 100] for `aria-valuenow` (which
+     * `aria-valuemax` already declares as the ceiling) — the visible digit
+     * still shows the caller's real number even past 100, exactly as the
+     * computed percent does on an over-sum ring; only the announced value is
+     * bounded.
+     *
+     * The ring's description (`aria-describedby`) is NOT affected — it still
+     * names the true segment breakdown, because that fact doesn't change just
+     * because the centre is showing a different number.
+     */
+    centerValue?: number;
+    value?: never;
+    tone?: never;
+};
+export type ProgressRingProps = ProgressRingValueProps | ProgressRingSegmentsProps;
+export declare const RING_TONE: Record<string, string>;
+/** One arc, resolved to the two fractions an SVG dash actually needs. */
+export interface ProgressRingArc {
+    label: string;
+    tone: ProgressTone;
+    /** The segment's custom colour, when it has one (DXUI-30). */
+    color?: string;
+    /** The segment's own magnitude, in caller units, before any clamping. */
+    value: number;
+    /** Where the arc begins, as a fraction of the circumference. */
+    start: number;
+    /** How far it is drawn for, as a fraction, with its gap already taken off. */
+    length: number;
+}
+export interface ProgressRingLayout {
+    arcs: ProgressRingArc[];
+    /** Every segment added up, in caller units. NOT clamped — this is the fact. */
+    used: number;
+    /** How far `used` overshoots `total`. Zero when the segments fit. */
+    overflow: number;
+}
+export declare function layoutRingSegments(segments: ProgressRingSegment[], total: number): ProgressRingLayout;
+/**
+ * `16.9` → `16`, `99.9` → `99`. Percentages of the whole, for the description
+ * and the centre. FLOORED, never rounded (DX-4474): a ring that reads 97% must
+ * not be described as "Done 98%", and only a part covering the whole total may
+ * say 100%. Same rule as an app's "N% complete" label (505 of 507 is 99%).
+ * An empty total is 0%.
+ */
+export declare const percentOf: (part: number, total: number) => number;
+/**
+ * Circular progress, for when the number belongs INSIDE the indicator —
+ * a tile, a card corner, a stat.
+ *
+ * Two shapes, chosen by which prop is passed:
+ *
+ * ```tsx
+ * <ProgressRing value={62} label="Context used" />
+ * <ProgressRing
+ *   label="Context used"
+ *   total={200_000}
+ *   segments={[
+ *     { label: "System prompt", value: 12_000, tone: "brand" },
+ *     { label: "Conversation", value: 84_000, tone: "accent" },
+ *   ]}
+ *   remainderLabel="Free"
+ * />
+ * ```
+ *
+ * Uses `pathLength="1"` so the dash numbers are fractions rather than
+ * circumference maths: the same two values work at any radius, and it dodges
+ * the Safari bug where a zoomed SVG rescales absolute dash lengths.
+ *
+ * THE ROLE IS `progressbar` IN BOTH SHAPES, and stays that way even though a
+ * breakdown of a budget is arguably a gauge. The role is a property of the
+ * component a caller reached for, not of the data they handed it — a component
+ * that announced itself as a different thing depending on the shape of its
+ * props would be two components sharing one name. A caller whose fact is a
+ * gauge has `Meter`.
+ */
+export declare function ProgressRing(props: ProgressRingProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,30 @@
+export type RatingValue = 1 | 2 | 3 | 4 | 5;
+export type RatingScaleSize = "sm" | "md" | "lg";
+export interface RatingScaleProps {
+    /** The chosen face, 1 (very unhappy) to 5 (very happy), or `null` for no answer. */
+    value: RatingValue | null;
+    onChange: (value: RatingValue | null) => void;
+    /** The question: the group's accessible name, drawn above the faces unless `hideLabel`. */
+    label: string;
+    /** Keep `label` as the accessible name only. @default false */
+    hideLabel?: boolean;
+    /** Names and tooltips for the five faces, in order. @default the catalog's "Very unhappy" .. "Very happy" */
+    optionLabels?: readonly [string, string, string, string, string];
+    /** Pressing the selected face again clears it (`onChange(null)`). @default false */
+    clearable?: boolean;
+    /** @default "md" */
+    size?: RatingScaleSize;
+    disabled?: boolean;
+    className?: string;
+}
+export declare function RatingScale({ value, onChange, label, hideLabel, optionLabels, clearable, size, disabled, className, }: RatingScaleProps): import("react").JSX.Element;
+export interface RatingFaceProps {
+    value: RatingValue;
+    /** @default "md" */
+    size?: RatingScaleSize;
+    /** Overrides the face's name (the catalog's, e.g. "Happy"). */
+    label?: string;
+    className?: string;
+}
+/** The read-only form of one face, tone-coloured, for a table cell or a list row. */
+export declare function RatingFace({ value, size, label, className }: RatingFaceProps): import("react").JSX.Element;

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

@@ -0,0 +1,26 @@
+import { type ReactNode, type Ref } from "react";
+export interface ReadMoreProps {
+    /** Collapsed line count — how many rendered lines show before the fade strip. Must be a non-negative integer; anything else throws. `0` hides the content entirely behind the toggle (no fade strip). */
+    lines: number;
+    /** Typically rendered Markdown — paragraphs, headings, lists, code, images. See the module comment on why the clamp is a measured line boundary rather than a computed height. */
+    children: ReactNode;
+    /** Controlled expanded state. Omit to let the component hold its own (seeded by `defaultExpanded`). */
+    expanded?: boolean;
+    /** Uncontrolled initial state. Ignored once `expanded` is supplied. @default false */
+    defaultExpanded?: boolean;
+    /** Fires on every toggle, controlled or not. */
+    onExpandedChange?: (expanded: boolean) => void;
+    /** Absent, the built-in "Read more" word of the active `UiLocaleProvider`. */
+    moreLabel?: string;
+    /** Absent, the built-in "Show less" word of the active `UiLocaleProvider`. */
+    lessLabel?: string;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * Clamp block content to `lines` rendered lines behind a fade strip and a
+ * single "Read more" / "Show less" toggle. Renders neither the strip nor the
+ * toggle when the content already fits — see the module comment for how that
+ * is decided.
+ */
+export declare function ReadMore({ lines, children, expanded: expandedProp, defaultExpanded, onExpandedChange, moreLabel, lessLabel, className, ref, }: ReadMoreProps): import("react").JSX.Element;