@sesamehr/react-design-system 2.0.0-beta.1 → 2.0.0-beta.11

package/README.md

@@ -18,6 +18,10 @@ Import the stylesheet once at your app entry:
 import '@sesamehr/react-design-system/style.css';
 ```
 
+That stylesheet paints this package's components and nothing else. It carries no
+reset and no utility classes, so importing it cannot restyle the application
+around it — see [What the stylesheet does not do](#what-the-stylesheet-does-not-do).
+
 Every component is exported with the `Ox` prefix:
 
 ```tsx
@@ -64,6 +68,36 @@ from your own Tailwind setup:
 @import '@sesamehr/react-design-system/assets/styles/mainTheme.css';
 ```
 
+### What the stylesheet does not do
+
+`style.css` contains this package's component rules and its tokens. It
+deliberately does **not** contain:
+
+- **Preflight**, or any other global reset. The components assume one — they are
+  written against `box-sizing: border-box`, `button { font: inherit }` and the
+  rest — but installing it is the application's call, not a library's. If your
+  app has Tailwind, you already have it. If it does not:
+
+  ```ts
+  import '@sesamehr/react-design-system/preflight.css';
+  ```
+
+- **Utility classes.** No `.h-10`, no `.p-4`, no `.bg-brand`. Every component
+  carries its own `ox`-prefixed class and the declarations are compiled into it,
+  so nothing here can collide with the identically-named utilities your own
+  Tailwind build emits from your scale.
+
+Component rules ship inside `@layer components`, which is where a Tailwind app
+already sorts them: after `base`, before `utilities`. So a utility you pass in
+wins — `<Button className="w-full">` is full width — without needing
+`!important`.
+
+Tokens are published under an `--ox-` prefix: override `--ox-color-brand-500`
+to retheme, not `--color-brand-500`. Unprefixed, those are the names Tailwind
+itself uses, and declaring them at `:root` would change what every `rounded-2xl`
+in your application means.
+
+
 ## License
 
 MIT © Sesame HR

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/TableBody/TableBody.d.ts

@@ -16,5 +16,8 @@ export interface TableBodyProps extends React.ComponentPropsWithoutRef<'tbody'>
 /**
  * Styled `<tbody>`. When `draggable`, wraps rows in a dnd-kit sortable
  * context. Sortable item ids are derived from the index of each `items` entry.
+ *
+ * Virtualised, it also renders the two rows that stand in for the ones not
+ * rendered — see `Spacer` below — and refuses to be draggable at the same time.
  */
 export declare const TableBody: import('react').ForwardRefExoticComponent<TableBodyProps & import('react').RefAttributes<HTMLTableSectionElement>>;

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

@@ -1,3 +1,27 @@
 export type TableHeadProps = React.ComponentPropsWithoutRef<'thead'>;
-/** Styled `<thead>` wrapping its children in a header row. */
+/**
+ * Styled `<thead>`. Virtualised, it renders its row twice and keeps the copy on
+ * screen.
+ *
+ * A virtualised table is the one case where the table is certain to be taller
+ * than what you can see — that is what virtualising is for — and a header that
+ * scrolls away takes the column names and the select-all checkbox with it. At
+ * ten thousand rows, getting back to them means scrolling back through all of
+ * them.
+ *
+ * Neither obvious way works. `position: sticky` answers to the nearest
+ * scrolling ancestor and nothing above it, and with pinned columns that
+ * ancestor is the section that owns the horizontal scroll — a box that never
+ * moves vertically, so the header rides away with the rows. Moving the header
+ * from a scroll handler works but is always one frame behind what the
+ * compositor has already painted, which reads as the header dropping away and
+ * snapping back on every frame of a scroll.
+ *
+ * So the row is rendered twice. The one in the table stays and is hidden, still
+ * doing the two jobs only it can do: reserving the header's height and settling
+ * the column widths. The copy is positioned against an ancestor that does not
+ * scroll, so vertical scrolling does not move it and there is nothing to
+ * correct. It is the same elements rendered again rather than a cloned node, so
+ * sorting and select-all still work in the one you can see.
+ */
 export declare const TableHead: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & import('react').RefAttributes<HTMLTableSectionElement>>;

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

@@ -0,0 +1,21 @@
+/**
+ * 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
+ * ten thousand rows is the opposite case — without one there is nothing to read
+ * your position from, and no way to cross the list in one gesture.
+ *
+ * The browser's own bar cannot be that thing here. It runs the full height of
+ * the scrollport, and the scrollport has to contain the header, so it always
+ * cuts across the column names. This one starts below them.
+ *
+ * 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 {
+    var displayName: string;
+}

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

@@ -4,6 +4,14 @@ export interface TableSelectCellProps extends Omit<React.ComponentPropsWithoutRe
     /** Usually fixed to left */
     fixed?: boolean;
     fixedOffset?: string;
+    /**
+     * Whether this row can be selected at all.
+     *
+     * On the header cell it disables select-all, which is the right thing when
+     * nothing in the table can be selected — a checkbox that ticks and then
+     * selects nothing is worse than one that says so.
+     */
+    disabled?: boolean;
     onChange?: (checked: boolean) => void;
 }
 export declare const TableSelectCell: import('react').ForwardRefExoticComponent<TableSelectCellProps & import('react').RefAttributes<HTMLTableCellElement>>;

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

@@ -0,0 +1,45 @@
+import { TableComponentProps } from '../Table.tsx';
+import { UseTableVirtualReturn } from '../hooks/useTableVirtual/useTableVirtual.types.ts';
+export type TableVirtualizedProps<TData = unknown> = TableComponentProps<TData> & {
+    /**
+     * What `useTableVirtual()` returned.
+     *
+     * Not the rows — those you map yourself, the same as in any other table.
+     * This is the thing that works out which rows those are, and the table
+     * hands it the element they scroll inside.
+     */
+    virtualizer: UseTableVirtualReturn<never>;
+};
+/**
+ * A `Table` that renders only the rows on screen.
+ *
+ * Everything but `virtualizer` is a `Table` prop and is passed straight through.
+ * What goes inside is what goes inside a `Table`: this is the same component,
+ * told where its virtualiser is.
+ *
+ * ```tsx
+ * const virtual = useTableVirtual(employees, { height: '480px' });
+ *
+ * <TableVirtualized virtualizer={virtual}>
+ *   <TableBody>
+ *     {virtual.rows.map(row => <TableRow key={row.id}>…</TableRow>)}
+ *   </TableBody>
+ * </TableVirtualized>
+ * ```
+ *
+ * It is the one piece the Vue side does not have, and it exists because of how
+ * the two frameworks differ rather than because the tables do. There
+ * `useTableVirtual` runs in the caller's `setup`, which is already above the
+ * table, so it provides itself and `<Table>` is written exactly as it always
+ * was. A hook has nothing to provide to until something renders — so this
+ * renders.
+ *
+ * The alternative was a prop on `Table`, and it would not have stopped there:
+ * the spacers belong inside `TableBody`'s `<tbody>` and the pinned header is
+ * `TableHead`'s, so it would have had to be threaded to both of those by hand
+ * as well. A wrapper reaches all three and leaves `Table`'s own API alone.
+ */
+export declare function TableVirtualized<TData = unknown>({ virtualizer, ...props }: TableVirtualizedProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare namespace TableVirtualized {
+    var displayName: string;
+}

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

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

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

@@ -18,3 +18,6 @@ export { useDragToScroll } from './useDragToScroll/useDragToScroll.ts';
 export type { UseDragToScrollOptions, UseDragToScrollReturn, } from './useDragToScroll/useDragToScroll.ts';
 export { useFixedColumns } from './useFixedColumns.ts';
 export type { UseFixedColumnsOptions } from './useFixedColumns.ts';
+export { useTableVirtual } from './useTableVirtual/useTableVirtual.ts';
+export { TableVirtualContext, useTableVirtualContext, } from './useTableVirtual/context.ts';
+export type { UseTableVirtualOptions, UseTableVirtualReturn, } from './useTableVirtual/useTableVirtual.types.ts';

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

@@ -4,6 +4,15 @@ export interface UseDragToScrollOptions {
     enabled?: boolean | (() => boolean);
     /** Cursor to show while dragging */
     cursor?: string;
+    /**
+     * Selector for elements that own their own drag, where panning must keep out.
+     *
+     * A pan and a row reorder are the same gesture, and this hook calls
+     * `preventDefault()` on every `mousedown` it sees — which is exactly what
+     * stops dnd-kit from ever starting. Bowing out over the grip lets the two
+     * share the table: the handle reorders, everywhere else pans.
+     */
+    ignore?: string;
 }
 export interface UseDragToScrollReturn {
     /** Whether the user is currently dragging to scroll */
@@ -13,7 +22,8 @@ export interface UseDragToScrollReturn {
  * Hook for drag-to-scroll functionality.
  * Allows horizontal scrolling by dragging with the mouse.
  *
- * Note: If using row drag & drop, set enabled=false to avoid conflicts.
- * Use @dnd-kit for row reordering instead.
+ * Coexists with row drag & drop: panning keeps out of whatever `ignore`
+ * matches, which by default is the design system's drag grip. Both gestures can
+ * be live on the same table, so there is no need to turn one off.
  */
 export declare function useDragToScroll(elementRef: RefObject<HTMLElement | null>, options?: UseDragToScrollOptions): UseDragToScrollReturn;

package/dist/Data/Table/hooks/useTableVirtual/context.d.ts

@@ -0,0 +1,16 @@
+import { UseTableVirtualReturn } from './useTableVirtual.types.ts';
+/**
+ * How the virtualiser reaches the parts of the table that need it.
+ *
+ * The Vue side has no equivalent: `useTableVirtual` runs in the caller's
+ * `setup`, which is above the table, so it provides itself and nothing has to
+ * be passed anywhere. A hook cannot do that — nothing is above anything until
+ * something renders — which is what `TableVirtualized` is for.
+ *
+ * They do need reaching. The spacers standing in for the unrendered rows have
+ * to sit inside the `<tbody>`, which `TableBody` renders from the caller's own
+ * markup, and the floating header belongs to `TableHead`. Handing each of them
+ * a prop is the boilerplate this removes.
+ */
+export declare const TableVirtualContext: import('react').Context<UseTableVirtualReturn<unknown> | null>;
+export declare function useTableVirtualContext(): UseTableVirtualReturn<unknown> | null;

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

@@ -0,0 +1,3 @@
+export { TableVirtualContext, useTableVirtualContext } from './context.ts';
+export { useTableVirtual } from './useTableVirtual.ts';
+export type { UseTableVirtualOptions, UseTableVirtualReturn, } from './useTableVirtual.types.ts';

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

@@ -0,0 +1,36 @@
+import { UseTableVirtualOptions, UseTableVirtualReturn } from './useTableVirtual.types.ts';
+/**
+ * Renders only the rows that are on screen, however many the table is given.
+ *
+ * Hand it the whole list and map `rows` instead: at ten thousand rows that is
+ * about twenty in the DOM, and the browser stops doing the work of laying out
+ * the other nine thousand nine hundred and eighty.
+ *
+ * ```tsx
+ * const virtual = useTableVirtual(employees, { maxHeight: '480px' });
+ *
+ * <TableVirtualized virtualizer={virtual}>
+ *   <TableBody>
+ *     {virtual.rows.map(row => <TableRow key={row.id}>…</TableRow>)}
+ *   </TableBody>
+ * </TableVirtualized>
+ * ```
+ *
+ * `TableVirtualized` is the one piece the Vue side does not have. There the
+ * composable provides itself from the caller's `setup`; a hook has nothing to
+ * provide to until something renders, so the wrapper does it instead — and
+ * `Table` itself gains no prop on either side.
+ *
+ * **Not with row reordering.** `TableBody` throws if both are on. Where a row
+ * sits in the DOM is not where it sits in the list once only part of it is
+ * rendered, and dragging across ten thousand rows is not a gesture anyone can
+ * make. A reorderable table is a paged one.
+ *
+ * **Why spacers.** Rendering twenty rows would leave a table twenty rows tall,
+ * with no scrollbar and so nothing to scroll — the window could never move.
+ * Something has to stand in for the height of everything that is not rendered,
+ * and in a `<table>` that something is a pair of empty rows, one above the
+ * window and one below. They belong inside the `<tbody>`, so `TableBody` is
+ * what renders them. A caller never writes a spacer, and never should have to.
+ */
+export declare function useTableVirtual<TData>(items: TData[], options?: UseTableVirtualOptions): UseTableVirtualReturn<TData>;

package/dist/Data/Table/hooks/useTableVirtual/useTableVirtual.types.d.ts

@@ -0,0 +1,74 @@
+import { RefObject } from 'react';
+export interface UseTableVirtualOptions {
+    /**
+     * How tall the table's scrollport is allowed to get, as a CSS length.
+     *
+     * A ceiling rather than a measurement: given fewer rows than it has room
+     * for, the table shrinks to them instead of leaving empty space under the
+     * last one.
+     *
+     * Any length the browser understands: `'480px'`, `'30vh'`,
+     * `'calc(100vh - 12rem)'`. It is written straight onto the element and the
+     * window is worked out from what that element ends up measuring, so nothing
+     * here cares which unit you used. `'100%'` works too, as long as whatever
+     * contains the table has a height of its own — a percentage of `auto` is
+     * `auto`, and a table that grows to fit its rows is the one case this cannot
+     * work with.
+     *
+     * Virtualising needs one. A table that grows to fit its rows has no scrollbar
+     * of its own — the page scrolls instead — and with nothing scrolling there is
+     * no position to work a window out from.
+     */
+    maxHeight?: string;
+    /**
+     * How tall one row is, in pixels.
+     *
+     * This is what turns a scroll position into a row index, so it is worth
+     * getting right: the error is paid on every row crossed, which is nothing at
+     * one click of the wheel and hundreds of rows after a flick. The default,
+     * 52px, is `--table-row-height` on `.oxTableRoot` — the minimum a row's cells
+     * give it with plain text in them. (Not `TableRow`'s own CSS: `height` on a
+     * `<tr>` is ignored by the table layout algorithm.) Rows with an avatar or two
+     * lines of text are taller, and those tables should say so here.
+     *
+     * It is deliberately a number you give rather than one measured from the
+     * page. Measuring as you scroll means the total height changes as you scroll,
+     * and a table whose content grows and shrinks underneath the scrollbar throws
+     * you somewhere else every time it does.
+     */
+    estimateSize?: number;
+    /** How many rows to keep either side of the window, so scrolling stays smooth. */
+    overscan?: number;
+}
+export interface UseTableVirtualReturn<TData> {
+    /**
+     * The rows that belong on screen right now, as data rather than indices — a
+     * caller maps these exactly the way it would map the whole list.
+     */
+    rows: TData[];
+    /** How many rows there are in total, window or no window. */
+    total: number;
+    /** Where a windowed row sits in the full list, for callers that need to know. */
+    indexOf: (windowIndex: number) => number;
+    /**
+     * Everything below is how `Table` drives this, and no caller should have to
+     * touch it. The scrollport is the table's, the spacers are `TableBody`'s, and
+     * both reach it through `TableVirtualized` rather than by hand.
+     */
+    containerRef: RefObject<HTMLElement | null>;
+    /**
+     * How `Table` registers itself as the scrollport, and how a second one is
+     * stopped from taking it over.
+     */
+    claim: (element: HTMLElement | null) => void;
+    maxHeight: string | undefined;
+    /** The height of everything above the window, and of everything below it. */
+    padStart: number;
+    padEnd: number;
+    /**
+     * Measures a row that turned out taller than the estimate. Without it the
+     * scrollbar drifts: every row that wraps makes the list a little longer than
+     * the virtualiser thinks it is, and by the bottom the two disagree.
+     */
+    measure: (element: Element | null) => void;
+}

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

@@ -1,4 +1,5 @@
 export { Table, type TableComponentProps } from './Table.tsx';
+export { TableVirtualized, type TableVirtualizedProps, } from './TableVirtualized/TableVirtualized.tsx';
 export { TableHead, type TableHeadProps } from './TableHead/TableHead.tsx';
 export { TableBody, type TableBodyProps } from './TableBody/TableBody.tsx';
 export { TableRow, type TableRowProps } from './TableRow/TableRow.tsx';
@@ -9,9 +10,8 @@ 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';
-export { useTable, type UseTableOptions, type UseTableReturn, useTableSelection, type SelectionInstance as UseTableSelectionReturn, useTableSorting, type SortingInstance as UseTableSortingReturn, useTablePagination, type UseTablePaginationOptions, type UseTablePaginationReturn, useTableDetailRow, type DetailRowInstance, type DetailRowOptions, type DetailRowPluginDef, useTablePinning, type PinningOptions as UseTablePinningOptions, type PinningInstance as UseTablePinningReturn, type CellInfo, type HeaderInfo, useTableColumns, type ColumnsOptions as UseTableColumnsOptions, type ColumnsInstance as UseTableColumnsReturn, useScrollShadow, type UseScrollShadowOptions, type UseScrollShadowReturn, useDragToScroll, type UseDragToScrollOptions, type UseDragToScrollReturn, useFixedColumns, type UseFixedColumnsOptions, } from './hooks/index.ts';
+export { useTable, type UseTableOptions, type UseTableReturn, useTableSelection, type SelectionInstance as UseTableSelectionReturn, useTableSorting, type SortingInstance as UseTableSortingReturn, useTablePagination, type UseTablePaginationOptions, type UseTablePaginationReturn, useTableDetailRow, type DetailRowInstance, type DetailRowOptions, type DetailRowPluginDef, useTablePinning, type PinningOptions as UseTablePinningOptions, type PinningInstance as UseTablePinningReturn, type CellInfo, type HeaderInfo, useTableColumns, type ColumnsOptions as UseTableColumnsOptions, type ColumnsInstance as UseTableColumnsReturn, useScrollShadow, type UseScrollShadowOptions, type UseScrollShadowReturn, useDragToScroll, type UseDragToScrollOptions, type UseDragToScrollReturn, useFixedColumns, type UseFixedColumnsOptions, useTableVirtual, type UseTableVirtualOptions, type UseTableVirtualReturn, } from './hooks/index.ts';
 export type { TableProps, TableMode, ColumnDef, ColumnAlign, CellContext, SortingState, PaginationState, PaginationChangePayload, SortingChangePayload, SelectionChangePayload, FilterChangePayload, ColumnResizeMode, ColumnVisibilityState, ColumnOrderState, ExpandedState, ColumnVisibilityChangePayload, ColumnOrderChangePayload, RowExpandChangePayload, ColumnResizePayload, ColumnPinningState, } from './types';

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,68 @@
+import { AvatarSize } from '../Avatar/index.ts';
+/**
+ * What the avatar itself is: the picture, the fallback for when there is no
+ * picture, and how big the whole thing is drawn.
+ *
+ * One object rather than three props, the way `ChatInput` takes `actionLabels`
+ * and `ChatBubble` takes `delivery`. The prop budget is five and the text beside
+ * the avatar already spends three of them; folding the avatar's own settings
+ * into the one value they all describe buys back the room `size` needed, and
+ * leaves room for the next thing the avatar grows.
+ *
+ * `initials` is a field and not something derived from `name` on purpose. Real
+ * records carry initials separately precisely *because* the name arrives badly
+ * formatted — "GARCÍA LÓPEZ, M.ª José", a single word, an email address — so a
+ * derivation is a rule that works on every example anyone writes by hand and
+ * fails on the data.
+ */
+export interface AvatarDetailsAvatar {
+    /** Image source URL */
+    src?: string;
+    /** Fallback initials (max 2 characters), shown when there is no image */
+    initials?: string;
+    /** 24, 32, 48, 64 or 80px. Also sets the text scale beside it. */
+    size?: AvatarSize;
+}
+/**
+ * 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 text scales with the avatar, and the caller still cannot choose it
+ *
+ * The size spans 24px to 80px, and a name at one fixed size across that range is
+ * wrong at both ends. So the two lines step with the box — the pairs are in the
+ * stylesheet, keyed off `data-size`, and they are **derived**, never passed.
+ * There is no text-size prop and no CSS variable a caller pokes: every
+ * `AvatarDetails` at a given size still renders identically to every other one,
+ * which is the guarantee the paragraph above is about. What the fixed-size
+ * version guaranteed was narrower than it looked — it guaranteed sameness
+ * between a 32px row and a 32px row, and there were no other sizes.
+ *
+ * `xs` and `sm` deliberately share a pair: 14/12 is already the smallest
+ * readable step we have, so below 32px only the picture shrinks.
+ *
+ * The prop list is four plus `dataTestid`, against a cap of five. The one spare
+ * is not an invitation — anything that belongs to the avatar goes into
+ * `AvatarDetailsAvatar`, and anything that does not has to argue for itself.
+ */
+export interface AvatarDetailsProps extends React.ComponentPropsWithoutRef<'div'> {
+    /** The avatar itself: image, fallback initials and size */
+    avatar?: AvatarDetailsAvatar;
+    /** Full name to display */
+    name: string;
+    /** Subtitle (department, role, etc.) */
+    subtitle?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    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 AvatarDetailsAvatar, type AvatarDetailsProps, } from './AvatarDetails.tsx';

package/dist/Display/Badge/Badge.d.ts

@@ -1,7 +1,8 @@
 import { BadgeVariants } from './index.ts';
 export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
-    variant?: BadgeVariants['variant'];
+    /** How big the counter is. `sm` is the bare dot and takes no content. */
+    size?: BadgeVariants['size'];
     dataTestid: string;
 }
-/** Badge — mirrors `@sesame/orxata-core` Badge (cva-only). */
+/** Badge — mirrors `@sesame/orxata-core` Badge: a count, or a bare dot. */
 export declare const Badge: import('react').ForwardRefExoticComponent<BadgeProps & import('react').RefAttributes<HTMLSpanElement>>;

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

@@ -1,6 +1,15 @@
 import { VariantProps } from 'class-variance-authority';
 export { Badge, type BadgeProps } from './Badge.tsx';
+/**
+ * A count, or a bare dot. Not a labelled pill.
+ *
+ * Figma's `Badges` set varies on one axis — size — and nothing else: `sm` is a
+ * 6px dot with no content, `md` a 16px circle and `lg` a 22px one, all of them
+ * `error` red with white text. The five colour variants this used to carry came
+ * from shadcn's Badge and were never in the design; a labelled pill is `Chip`
+ * or `StatusBadge`, both of which Figma does draw.
+ */
 export declare const badgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | "brand" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type BadgeVariants = VariantProps<typeof badgeVariants>;