@sesamehr/react-design-system 2.0.0-beta.5 → 2.0.0-beta.7

package/dist/Button/ActionItem/ActionItem.d.ts

@@ -0,0 +1,40 @@
+export interface ActionItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+    /**
+     * The chevron at the end. On by default: the row is drawn with one, and a
+     * row without it is the exception.
+     *
+     * A boolean is configuration, which the architecture rules push back on, and
+     * it earns the exception the same way `OxPopoverContent`'s `showArrow` does.
+     * The alternative is a slot prop with no default, which would make every call
+     * site write the chevron out — the common case paying for the rare one, and
+     * two call sites free to reach for a different glyph.
+     */
+    showChevron?: boolean;
+    dataTestid: string;
+}
+/**
+ * ActionItem — mirrors `@sesame/orxata-core` ActionItem.
+ *
+ * A full-width row that runs an action when pressed: a label that takes the
+ * width, and a chevron at the end saying there is something on the other side
+ * of the press.
+ *
+ * Not a `Button` variant, and not for the reason `IconButton` is not one —
+ * that one wears `.ox-button` for its colours and only redraws the box. This
+ * shares nothing with `Button`: the box is a block that fills its parent and
+ * grows with a label that wraps, where every `Button` is an inline-flex of a
+ * fixed height with `whitespace-nowrap`, and the fill is `brand-50` behind
+ * `brand-500` text, which is none of `Button`'s seven colours.
+ *
+ * **No `asChild`, and that is not an omission.** Both primitives' pass-through
+ * root is built for a component whose entire content is the caller's slot —
+ * `Button` and `Chip` are exactly that. This one owns the chevron, and that
+ * breaks both: Radix's `Slot` throws ("Expected a single React element child
+ * or `Slottable`"), and while `Slottable` answers that here, reka's `Slot` on
+ * the Vue side has no equivalent — it merges onto the first child of the
+ * component's own slot and leaves the chevron as a sibling of the caller's
+ * element. The two sides could not have been made to agree, and a prop that
+ * works on one and silently mis-renders on the other is worse than no prop.
+ * A row that navigates is an `onClick` and a `router.push`.
+ */
+export declare const ActionItem: import('react').ForwardRefExoticComponent<ActionItemProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/Button/ActionItem/index.d.ts

@@ -0,0 +1 @@
+export { ActionItem, type ActionItemProps } from './ActionItem.tsx';

package/dist/Button/IconButton/IconButton.d.ts

@@ -0,0 +1,32 @@
+import { ButtonVariants } from '../index.ts';
+import { IconButtonVariants } from './index.ts';
+export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * `Button`'s colours, by its own words — the design file calls the filled
+     * one `primary`, but `Button` has called it `default` since it shipped and a
+     * caller swapping one for the other should not relearn the one word that
+     * differs. No `link`: the design has no such icon button, and a link with no
+     * text has no accessible name by construction.
+     */
+    variant?: Exclude<ButtonVariants['variant'], 'link'>;
+    size?: IconButtonVariants['size'];
+    /**
+     * What a screen reader announces. Required — it narrows the optional
+     * `aria-label` this inherits from `ButtonHTMLAttributes` — because the glyph
+     * is the whole control, so there is no text for the browser to fall back to
+     * and an unlabelled one announces as "button" and nothing else. No default
+     * can describe what an icon a caller chose is for, so there is not one.
+     */
+    'aria-label': string;
+    /** Render as the child element instead of a `<button>` (Radix Slot). */
+    asChild?: boolean;
+}
+/**
+ * IconButton — mirrors `@sesame/orxata-core` IconButton.
+ *
+ * A button whose entire content is an icon, circular at every size. The icon
+ * comes from the caller as `children`; this sizes it and never picks it.
+ * `asChild` renders the child element instead of a `<button>`, via
+ * `@radix-ui/react-slot`.
+ */
+export declare const IconButton: import('react').ForwardRefExoticComponent<IconButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/Button/IconButton/index.d.ts

@@ -0,0 +1,27 @@
+import { VariantProps } from 'class-variance-authority';
+export { IconButton, type IconButtonProps } from './IconButton.tsx';
+/**
+ * The shape half only — the radius and the four square boxes. That is all this
+ * component adds.
+ *
+ * The colours are `Button`'s, and not a copy of them: `IconButton.tsx` calls
+ * `buttonVariants` for the variant and this for the size, so the six colour
+ * rules live in one file and a token changes in one place. Use both together if
+ * you are putting the classes on your own element:
+ *
+ * ```ts
+ * cn(buttonVariants({ variant, size: null }), iconButtonVariants({ size }))
+ * ```
+ *
+ * `size: null` is cva's opt-out, and it is load-bearing: `buttonVariants`
+ * defaults to `md`, which would bring `px-5`, `h-12` and `rounded-2xl` along
+ * and stop the box being a square circle.
+ *
+ * Class names, not utilities — see the long note in `../index.ts` for why a
+ * utility in a variant forces the package to publish `.size-12` into the
+ * consumer's cascade.
+ */
+export declare const iconButtonVariants: (props?: ({
+    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type IconButtonVariants = VariantProps<typeof iconButtonVariants>;

package/dist/Data/Table/Table.d.ts

@@ -37,7 +37,7 @@ export interface TableComponentProps<TData = unknown> {
     /** Center table content (default slot) — custom mode only. */
     children?: ReactNode;
 }
-export declare function Table<TData = unknown>({ enableDragToScroll, table, renderCell, renderHeader, detailRow: detailRowSlot, bulkHeader, bulkActions, pagination, empty, fixedLeft, fixedRight, children, }: TableComponentProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function Table<TData = unknown>({ loading, enableDragToScroll, table, renderCell, renderHeader, detailRow: detailRowSlot, bulkHeader, bulkActions, pagination, empty, fixedLeft, fixedRight, children, }: TableComponentProps<TData>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Table {
     var displayName: string;
 }

package/dist/Data/Table/TableScrollbar/TableScrollbar.d.ts

@@ -1,5 +1,5 @@
 /**
- * The scrollbar a virtualised table draws for itself.
+ * Where a virtualised table's overlay scrollbar goes.
  *
  * Every other table in the system hides its bar: they scroll sideways, the
  * shadows at the edges say there is more, and a bar would be chrome. A list of
@@ -10,8 +10,10 @@
  * the scrollport, and the scrollport has to contain the header, so it always
  * cuts across the column names. This one starts below them.
  *
- * It behaves the way an overlay bar does: out of the way until you scroll or
- * reach for the edge, and gone again shortly after.
+ * The bar itself is `Scrollbar`, which knows nothing about any of that. What is
+ * left here is the arithmetic that is only true of a table, handed over as the
+ * custom properties it reads: the header's height, and the offset between the
+ * scrollport and whichever ancestor the bar is actually positioned in.
  */
 export declare function TableScrollbar(): import("react/jsx-runtime").JSX.Element | null;
 export declare namespace TableScrollbar {

package/dist/Data/Table/index.d.ts

@@ -10,7 +10,6 @@ export { TableDragCell, type TableDragCellProps, } from './TableDragCell/TableDr
 export { TableBulkHeader, type TableBulkHeaderProps, } from './TableBulkHeader/TableBulkHeader.tsx';
 export { TablePagination, type TablePaginationProps, } from './TablePagination/TablePagination.tsx';
 export { TableEmpty, type TableEmptyProps } from './TableEmpty/TableEmpty.tsx';
-export { TableAvatar, type TableAvatarProps, } from './TableAvatar/TableAvatar.tsx';
 export { TableRowExpanded, type TableRowExpandedProps, } from './TableRowExpanded/TableRowExpanded.tsx';
 export { TableExpandCell, type TableExpandCellProps, } from './TableExpandCell/TableExpandCell.tsx';
 export { TableColumnVisibility, type TableColumnVisibilityProps, } from './TableColumnVisibility/TableColumnVisibility.tsx';

package/dist/Display/Avatar/AvatarSkeleton/AvatarSkeleton.d.ts

@@ -0,0 +1,30 @@
+import { AvatarSize } from '../index.ts';
+export interface AvatarSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Matches the avatar's size scale — the placeholder is the same box */
+    size?: AvatarSize;
+    /** Which avatar it stands in for. Only the radius differs. */
+    shape?: 'rounded' | 'square';
+    dataTestid: string;
+}
+/**
+ * An avatar-shaped placeholder, for while the avatar is still loading.
+ *
+ * It renders `OxSkeleton` and wears the *avatar's own* size class, which is why
+ * this is a component and not a documented pair of utilities. `size-12` is what
+ * `md` happens to be today; a caller who wrote that by hand would be holding a
+ * copy of our scale, and it would go quietly wrong the day the scale moved.
+ * Here the placeholder and the real avatar read the same rule in
+ * `../avatarSizes.css`, so they cannot drift.
+ *
+ * **One component, not two.** `AvatarRounded` and `AvatarSquare` are separate
+ * because they differ in substance — a ring, an image, a status bullet, an
+ * action and a label, and two different corner geometries. Strip all of that
+ * out and the only thing left that differs is the radius, so a second component
+ * would be a copy of this one with one class changed. That is the
+ * wrapper-with-no-behaviour that `.claude/rules/component-architecture.md` §11
+ * rejects.
+ *
+ * The pulse and the reduced-motion behaviour are not reimplemented here: they
+ * come from `Skeleton`, which is the only place they are declared.
+ */
+export declare const AvatarSkeleton: import('react').ForwardRefExoticComponent<AvatarSkeletonProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Display/Avatar/index.d.ts

@@ -1,6 +1,8 @@
 import { VariantProps } from 'class-variance-authority';
 export { AvatarRounded } from './AvatarRounded/AvatarRounded.tsx';
 export type { AvatarRoundedProps } from './AvatarRounded/AvatarRounded.tsx';
+export { AvatarSkeleton } from './AvatarSkeleton/AvatarSkeleton.tsx';
+export type { AvatarSkeletonProps } from './AvatarSkeleton/AvatarSkeleton.tsx';
 export { AvatarSquare } from './AvatarSquare/AvatarSquare.tsx';
 export type { AvatarSquareProps } from './AvatarSquare/AvatarSquare.tsx';
 export { useAvatarBullet } from './hooks/useAvatarBullet.ts';

package/dist/Display/AvatarDetails/AvatarDetails.d.ts

@@ -0,0 +1,31 @@
+/**
+ * An avatar with a name and an optional second line beside it.
+ *
+ * `name` and `subtitle` are props and not `children`, which reads as a
+ * violation of composition-over-configuration and is a deliberate exception.
+ * Sameness is the whole product here: this pattern appears on every list, table
+ * and picker we ship, and the point of having a component for it is that all of
+ * them render the same two lines at the same sizes and weights. Taking a node
+ * hands that decision back to the caller, and the first one to put a badge, a
+ * link or a third line in it is the moment the component stops guaranteeing
+ * anything. Callers who genuinely need arbitrary content next to an avatar
+ * should compose `AvatarSquare` themselves rather than widen this.
+ *
+ * The prop list is full at five plus `dataTestid`, which is the cap. Anything
+ * further has to replace one of these or be argued as a separate component —
+ * there is no room left to slip one in.
+ */
+export interface AvatarDetailsProps extends React.ComponentPropsWithoutRef<'div'> {
+    /** Image source URL */
+    src?: string;
+    /** Fallback initials (max 2 characters) */
+    initials?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Full name to display */
+    name: string;
+    /** Subtitle (department, role, etc.) */
+    subtitle?: string;
+    dataTestid: string;
+}
+export declare const AvatarDetails: import('react').ForwardRefExoticComponent<AvatarDetailsProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Display/AvatarDetails/index.d.ts

@@ -0,0 +1 @@
+export { AvatarDetails, type AvatarDetailsProps } from './AvatarDetails.tsx';

package/dist/Display/ChatBubble/ChatBubbleStatus/ChatBubbleStatus.d.ts

@@ -1,8 +1,8 @@
 import { ChatBubbleStatusVariants } from './index.ts';
-export interface ChatBubbleStatusProps extends React.SVGAttributes<SVGSVGElement> {
+export interface ChatBubbleStatusProps extends React.HTMLAttributes<HTMLElement> {
     /** How far along the message is */
     status?: NonNullable<ChatBubbleStatusVariants['status']>;
     dataTestid: string;
 }
 /** ChatBubbleStatus — mirrors `@sesame/orxata-core` ChatBubbleStatus. */
-export declare const ChatBubbleStatus: import('react').ForwardRefExoticComponent<ChatBubbleStatusProps & import('react').RefAttributes<SVGSVGElement>>;
+export declare const ChatBubbleStatus: import('react').ForwardRefExoticComponent<ChatBubbleStatusProps & import('react').RefAttributes<HTMLElement>>;

package/dist/Display/Chip/Chip.d.ts

@@ -12,7 +12,13 @@ export interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonEle
      * `:focus-visible`, and there is no `:dragging`.
      */
     dragged?: boolean;
+    /** Render as the child element instead of a `<button>` (Radix Slot). */
+    asChild?: boolean;
     dataTestid: string;
 }
-/** Chip — mirrors `@sesame/orxata-core` Chip. */
+/**
+ * Chip — mirrors `@sesame/orxata-core` Chip.
+ * `asChild` renders the child element instead of a `<button>`, via
+ * `@radix-ui/react-slot`. It is what the Vue side spells `as` / `as-child`.
+ */
 export declare const Chip: import('react').ForwardRefExoticComponent<ChipProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/Display/Chip/index.d.ts

@@ -2,10 +2,15 @@ import { VariantProps } from 'class-variance-authority';
 export { Chip } from './Chip.tsx';
 export type { ChipProps } from './Chip.tsx';
 /**
- * A chip is a control the user acts on — a value they picked and can drop, a
- * filter they can press. `Badge` is the system talking back: a status it
- * assigned, a count it worked out, nothing to click. That is the line between
- * them, and it is why this one is an outlined button and that one a solid fill.
+ * A chip is a value the user picked — one they can drop, a filter they can
+ * press. `Badge` is the system talking back: a status it assigned, a count it
+ * worked out. That is the line between them, and it is why this one is outlined
+ * and that one a solid fill.
+ *
+ * It renders a `<button>` by default because pressing one is the common case,
+ * but that is a default and not the component: `asChild` renders it as anything,
+ * and a chip that only shows a value should be a `<span>` rather than a control
+ * with nothing behind it.
  *
  * Class names, not utilities: the declarations live in `Chip.module.css` behind
  * `@apply`. See `Button/index.ts` for the full reasoning.

package/dist/Display/FileCard/FileCard.d.ts

@@ -0,0 +1,66 @@
+/**
+ * One attached file as a row. Mirrors `@sesame/orxata-core` FileCard.
+ *
+ * Built on `Card` rather than redrawing the shell. The radius, the border and
+ * the white surface are already a component, and the only reason this file has
+ * a stylesheet at all is the row inside it. `flat` is the card the design
+ * draws: border, no lift — `Card`'s `flat` keeps the outline and drops only the
+ * shadow and the glass.
+ *
+ * ### Why `name` and `meta` are props and the other two are nodes
+ *
+ * Sameness is the product for the text, exactly as in `AvatarDetails`: every
+ * file row we ship is two lines at the same sizes and weights, and a node is
+ * where that guarantee goes to die — the first caller to put a link, a badge or
+ * a third line in it ends the point of having the component. `meta` is
+ * deliberately not called `size`: what the second line says is the
+ * application's business ("1,56 MB", "PDF · yesterday", "Uploaded by Ana"), and
+ * naming it after one of those would be a lie the day someone passes another.
+ *
+ * The glyph and the action are the opposite case. Mapping an extension to an
+ * icon is application knowledge — there are hundreds of extensions and we know
+ * none of them — so `icon` takes a node and falls back to a generic file glyph,
+ * which is the one honest thing a design system can draw. And `action` takes a
+ * node because *which* action is not ours either: download, delete, share,
+ * retry, or nothing at all. It also settles the accessible name, which we
+ * cannot supply since the design system ships no strings — whatever the caller
+ * puts there brings its own, and `IconButton` refuses to render without one.
+ *
+ * ### What it deliberately does not do
+ *
+ * **It has no width.** The design pins 300px with `min-width`, `max-width` and
+ * `width`, and that figure belongs to the screen it was drawn on, not to the
+ * component: a card that hardcodes its own width cannot sit in a grid, a
+ * sidebar or a flexible column, and the parent owns external layout. It fills
+ * what it is given. The 72px height stays, because that one is internal — a
+ * list of these has to have rows of equal height, and long names truncate
+ * rather than growing the row.
+ *
+ * **The root is not a button.** It already contains an interactive control, and
+ * a button inside a button is invalid HTML; making the root activate would also
+ * mean inventing a focus and keyboard contract the design has nothing to say
+ * about. A caller who wants the whole row to do something wraps it, or puts a
+ * link in `action`.
+ */
+export interface FileCardProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'title'> {
+    /** The file's name. Truncates rather than wrapping — the row is a fixed height. */
+    name: string;
+    /**
+     * The second line: whatever the app knows about the file. Size in the
+     * design, but a type, a date or an author read just as well. Omit it and the
+     * row is one line.
+     */
+    meta?: string;
+    /**
+     * The glyph in the ring. Defaults to a generic file — mapping an extension to
+     * an icon is the application's knowledge, not ours.
+     */
+    icon?: React.ReactNode;
+    /**
+     * The one thing you can do to this file. Nothing by default; whatever you put
+     * here brings its own accessible name.
+     */
+    action?: React.ReactNode;
+    dataTestid: string;
+}
+export declare const FileCard: import('react').ForwardRefExoticComponent<FileCardProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Display/FileCard/index.d.ts

@@ -0,0 +1 @@
+export { FileCard, type FileCardProps } from './FileCard.tsx';

package/dist/Display/FilePreviewCard/FilePreviewCard.d.ts

@@ -0,0 +1,49 @@
+/**
+ * A file you can see: a square thumbnail with one line under it. Mirrors
+ * `@sesame/orxata-core` FilePreviewCard.
+ *
+ * The sibling of `FileCard`, and deliberately not a variant of it. They differ
+ * in axis, in padding, in how they take their width and in what they contain —
+ * and, decisively, this one has neither a title nor an action. A `variant` prop
+ * would have to flip the layout *and* switch off the title *and* switch off the
+ * action, which is three configuration props spent hiding the fact that these
+ * are two components. What they genuinely share is the shell, and both get it
+ * the same way: from `Card`.
+ *
+ * ### The image
+ *
+ * `src` and `alt` rather than a node, because there is nothing to compose — it
+ * is one `<img>`, and taking a node would only invite a second one. `alt` is
+ * required and has no default for the usual reason: the design system ships no
+ * strings, and only the caller knows what the picture is of. Pass `""` if it is
+ * genuinely decorative; that is a decision, and it should have to be made.
+ *
+ * Two failure modes, both handled without a state machine. **Not loaded yet**
+ * is a tinted square, so the card holds its shape and reads as a pending
+ * thumbnail instead of a white hole. **Failed to load** swaps the `<img>` for a
+ * generic picture glyph carrying the same `alt` through `role="img"` — the
+ * browser's broken-image icon is neither styleable nor meaningful, and dropping
+ * the `<img>` is the only way to be rid of it. A new `src` clears the flag, so
+ * one bad URL does not poison the ones after it.
+ *
+ * ### Size
+ *
+ * The thumbnail is 150px square from the design, exposed as
+ * `--ox-file-preview-card-size` rather than a prop — a dimension is a style
+ * concern and CSS variables are how this system inherits those. The card itself
+ * has no width at all: it hugs the thumbnail, which is why the design needed no
+ * width on it either.
+ */
+export interface FilePreviewCardProps extends React.ComponentPropsWithoutRef<'div'> {
+    /** The image to show. */
+    src: string;
+    /** What the image is of. Required — pass `""` only if it is decorative. */
+    alt: string;
+    /**
+     * The single line under the thumbnail: "JPG - 937 KB" in the design, but the
+     * app decides what is worth saying.
+     */
+    meta: string;
+    dataTestid: string;
+}
+export declare const FilePreviewCard: import('react').ForwardRefExoticComponent<FilePreviewCardProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Display/FilePreviewCard/index.d.ts

@@ -0,0 +1 @@
+export { FilePreviewCard, type FilePreviewCardProps, } from './FilePreviewCard.tsx';

package/dist/Feedback/Alert/AlertIcon.d.ts

@@ -1,5 +1,5 @@
 export interface AlertIconProps extends React.HTMLAttributes<HTMLDivElement> {
     dataTestid: string;
 }
-/** AlertIcon — renders the variant's default lucide icon, or `children` if provided. */
+/** AlertIcon — renders the variant's default icon, or `children` if provided. */
 export declare const AlertIcon: import('react').ForwardRefExoticComponent<AlertIconProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Feedback/Dialog/DialogBody.d.ts

@@ -0,0 +1,18 @@
+export interface DialogBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+    dataTestid: string;
+}
+/**
+ * DialogBody — mirrors `@sesame/orxata-core` DialogBody. The scrolling region
+ * of a dialog.
+ *
+ * Everything else in the panel — header, footer, steppers, alerts — stays put;
+ * only this scrolls once the panel reaches its `max-height`. It carries no
+ * styling of its own: the declarations that make it the flexible, scrolling
+ * item live on `DialogContent` next to the `max-height` they depend on, since
+ * a body is only a scroll region because the panel is capped and splitting
+ * that pair across two files is how one of them gets changed alone.
+ *
+ * `data-slot` rather than position, so it can sit anywhere among the panel's
+ * children.
+ */
+export declare const DialogBody: import('react').ForwardRefExoticComponent<DialogBodyProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Feedback/Dialog/index.d.ts

@@ -1,5 +1,6 @@
 export { Dialog, type DialogProps } from './Dialog.tsx';
 export { DialogContent, type DialogContentProps } from './DialogContent.tsx';
+export { DialogBody, type DialogBodyProps } from './DialogBody.tsx';
 export { DialogTitle, type DialogTitleProps } from './DialogTitle.tsx';
 export { DialogDescription, type DialogDescriptionProps, } from './DialogDescription.tsx';
 export { DialogOverlay, type DialogOverlayProps } from './DialogOverlay.tsx';

package/dist/Feedback/Loader/Loader.d.ts

@@ -0,0 +1,16 @@
+export interface LoaderProps extends React.HTMLAttributes<HTMLSpanElement> {
+    dataTestid: string;
+}
+/**
+ * The Sesame mark drawing itself, ported from the `HR-loading` After Effects
+ * composition the product ships as a Lottie.
+ *
+ * Nothing in that composition moves: all twelve layers have a static transform
+ * and the whole animation lives in trim paths, which is `stroke-dasharray` plus
+ * `stroke-dashoffset` under another name. So the port needs no player — the
+ * twelve layers collapse to two shapes drawn twice, and the trims become the
+ * `@keyframes` in the stylesheet. That is the reason there is no `lottie-web`
+ * here: 250 KB on every consumer to replay an animation the stylesheet can
+ * express itself.
+ */
+export declare const Loader: import('react').ForwardRefExoticComponent<LoaderProps & import('react').RefAttributes<HTMLSpanElement>>;

package/dist/Feedback/Loader/index.d.ts

@@ -0,0 +1,2 @@
+export { Loader } from './Loader.tsx';
+export type { LoaderProps } from './Loader.tsx';

package/dist/Feedback/Popover/PopoverContent.d.ts

@@ -3,5 +3,11 @@ export interface PopoverContentProps extends React.ComponentPropsWithoutRef<type
     showArrow?: boolean;
     dataTestid: string;
 }
-/** PopoverContent — portalled Radix popover content with optional arrow. */
+/**
+ * PopoverContent — portalled Radix popover content with optional arrow.
+ *
+ * `asChild` draws it on the shared `Surface`, which is what keeps a popover
+ * and a select open on the same screen from having different corners. Only the
+ * padding is a popover's own.
+ */
 export declare const PopoverContent: import('react').ForwardRefExoticComponent<PopoverContentProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Feedback/Progress/Progress.d.ts

@@ -1,7 +1,10 @@
+import { ProgressVariants } from './index.ts';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
 export interface ProgressProps extends Omit<React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>, 'value'> {
     /** How far along, 0 to 100 */
     value?: number;
+    /** What the bar is saying: still going, done, done with a caveat, or failed */
+    variant?: ProgressVariants['variant'];
     dataTestid: string;
 }
 /** Progress — mirrors `@sesame/orxata-core` Progress. */

package/dist/Feedback/Progress/index.d.ts

@@ -1,2 +1,19 @@
+import { VariantProps } from 'class-variance-authority';
 export { Progress } from './Progress.tsx';
 export type { ProgressProps } from './Progress.tsx';
+/**
+ * What the bar is saying, not how far along it is.
+ *
+ * `brand` is a bar still filling. The other three are a bar that has stopped
+ * and has something to report: a job that finished, one that finished with
+ * something to look at, one that failed. They are the same three the rest of
+ * the system uses for that, and they read the same here.
+ *
+ * A determinate bar at 100% is not automatically `success` — an upload that
+ * reached the end and then failed to process is at 100% and is not good news.
+ * The variant is the caller's to say.
+ */
+export declare const progressVariants: (props?: ({
+    variant?: "success" | "error" | "warning" | "brand" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type ProgressVariants = VariantProps<typeof progressVariants>;

package/dist/Feedback/Skeleton/Skeleton.d.ts

@@ -0,0 +1,20 @@
+export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+    dataTestid: string;
+}
+/**
+ * A block that pulses while the content it stands in for is still loading.
+ *
+ * It configures nothing. One surface, and the caller gives it its shape with
+ * ordinary classes — `h-4 w-48` is a line of text, `size-10 rounded-full` is an
+ * avatar, `h-32 w-full` is a block. A `shape` or `variant` prop would be three
+ * names for three combinations of width, height and radius that CSS already
+ * says better, and it would run out the moment somebody needed a fourth.
+ *
+ * `OxLoader` and `OxProgress` are the other two, and the three are not
+ * interchangeable — see the MDX for which is which.
+ *
+ * `aria-hidden` sits before the spread so a caller who genuinely needs one of
+ * these in the accessibility tree can override it. The region carrying
+ * `aria-busy` is the right level, and that is the caller's.
+ */
+export declare const Skeleton: import('react').ForwardRefExoticComponent<SkeletonProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Feedback/Skeleton/index.d.ts

@@ -0,0 +1,2 @@
+export { Skeleton } from './Skeleton.tsx';
+export type { SkeletonProps } from './Skeleton.tsx';

package/dist/Forms/Field/FieldGroup/FieldGroup.d.ts

@@ -1,4 +1,19 @@
+import { FieldVariant } from '../useFieldGroup.ts';
 export interface FieldGroupProps extends React.HTMLAttributes<HTMLDivElement> {
-    variant?: 'default' | 'error' | 'success' | 'warning';
+    variant?: FieldVariant;
 }
+/**
+ * A label, a control and a message, ordered and wired to each other.
+ *
+ * Two mechanisms, and they are not redundant. The custom properties in the
+ * stylesheet paint whatever is inside — including a consumer's own control,
+ * which never imported anything from here — with no prop drilling. The context
+ * in `useFieldGroup.ts` carries what a custom property cannot: the `id` the
+ * label points `htmlFor` at, the `aria-describedby` that reaches the message,
+ * and the `aria-invalid` that says the control is wrong.
+ *
+ * Ordering is done with direct-child selectors, so the label, the control and
+ * the message have to be direct children of this element. Anything a consumer
+ * wants to wrap around the field goes outside the group, not inside it.
+ */
 export declare const FieldGroup: import('react').ForwardRefExoticComponent<FieldGroupProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Forms/Field/FieldLabel/FieldLabel.d.ts

@@ -1,2 +1,18 @@
 export type FieldLabelProps = React.LabelHTMLAttributes<HTMLLabelElement>;
+/**
+ * The field's label.
+ *
+ * `htmlFor` comes from the surrounding `<OxFieldGroup>` and points at whichever
+ * control claimed the field's id — without it this is a bare `<label>` that
+ * neither wraps a control nor names one, so clicking it focuses nothing and a
+ * screen reader reaching the control announces no name. It is left off
+ * entirely when no control has claimed the id, since a `htmlFor` pointing at
+ * nothing is not an improvement on no `htmlFor`.
+ *
+ * `id` is always there so a composite control — one with several focusable
+ * children, where `htmlFor` has no single target — can name itself with
+ * `aria-labelledby`.
+ *
+ * A `htmlFor` written by the caller comes in `...props` and wins, as it should.
+ */
 export declare const FieldLabel: import('react').ForwardRefExoticComponent<FieldLabelProps & import('react').RefAttributes<HTMLLabelElement>>;

package/dist/Forms/Field/FieldMessage/FieldMessage.d.ts

@@ -1,5 +1,25 @@
+import { FieldVariant } from '../useFieldGroup.ts';
 export interface FieldMessageProps extends React.HTMLAttributes<HTMLDivElement> {
-    message?: string;
-    variant?: 'default' | 'error' | 'success' | 'warning';
+    /**
+     * Overrides the group's variant. Leave it out inside an `<OxFieldGroup>` and
+     * the group's own variant comes through the context, so `error` is written
+     * once instead of on both.
+     */
+    variant?: FieldVariant;
 }
+/**
+ * The field's feedback line.
+ *
+ * `id` comes from the surrounding `<OxFieldGroup>` so the control can point
+ * `aria-describedby` at it. Without one, the error was announced when it
+ * appeared and never again: tab back to a field that is already wrong and
+ * nothing described it.
+ *
+ * `role="alert"` and nothing else. The pair it used to carry — `role="alert"`
+ * with `aria-live="polite"` — contradicted itself, since `alert` already
+ * implies `assertive`. `alert` is the half worth keeping: it is what makes a
+ * message that appears after a submit interrupt, and the case it does not
+ * cover, a field that is *already* wrong when you reach it, is now covered by
+ * `aria-describedby` instead.
+ */
 export declare const FieldMessage: import('react').ForwardRefExoticComponent<FieldMessageProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Forms/Field/index.d.ts

@@ -1,3 +1,4 @@
 export { FieldGroup, type FieldGroupProps } from './FieldGroup/FieldGroup.tsx';
 export { FieldLabel, type FieldLabelProps } from './FieldLabel/FieldLabel.tsx';
 export { FieldMessage, type FieldMessageProps, } from './FieldMessage/FieldMessage.tsx';
+export { useFieldControl, useFieldControlGroup, type FieldControlAttrs, type FieldControlGroupAttrs, type FieldVariant, } from './useFieldGroup.ts';