@sesamehr/react-design-system 2.0.0-beta.2 → 2.0.0-beta.4

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/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,19 @@
+/**
+ * The scrollbar a virtualised table draws for itself.
+ *
+ * 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.
+ *
+ * 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.
+ */
+export declare function TableScrollbar(): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace TableScrollbar {
+    var displayName: string;
+}

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, { height: '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,61 @@
+import { RefObject } from 'react';
+export interface UseTableVirtualOptions {
+    /**
+     * How tall the table's scrollport is, as a CSS length.
+     *
+     * 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.
+     */
+    height?: 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,
+     * 48px, is the height `TableRow` gives itself with plain text in it. 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;
+    height: 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';
@@ -13,5 +14,5 @@ export { TableAvatar, type TableAvatarProps, } from './TableAvatar/TableAvatar.t
 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/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>;

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

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { ChatBubbleVariants } from './index.ts';
+export interface ChatBubbleProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Who said it: the reader, or someone else */
+    author?: ChatBubbleVariants['author'];
+    /** The line under the message — the timestamp, and a receipt if there is one */
+    meta?: ReactNode;
+    dataTestid: string;
+}
+/** ChatBubble — mirrors `@sesame/orxata-core` ChatBubble. */
+export declare const ChatBubble: import('react').ForwardRefExoticComponent<ChatBubbleProps & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,8 @@
+import { ChatBubbleStatusVariants } from './index.ts';
+export interface ChatBubbleStatusProps extends React.SVGAttributes<SVGSVGElement> {
+    /** 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>>;

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

@@ -0,0 +1,10 @@
+import { VariantProps } from 'class-variance-authority';
+export { ChatBubbleStatus, type ChatBubbleStatusProps, } from './ChatBubbleStatus.tsx';
+/**
+ * How far along a sent message is. Only the reader's own messages carry one —
+ * there is no receipt for what somebody else said.
+ */
+export declare const chatBubbleStatusVariants: (props?: ({
+    status?: "pending" | "sent" | "delivered" | "read" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type ChatBubbleStatusVariants = VariantProps<typeof chatBubbleStatusVariants>;

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

@@ -0,0 +1,13 @@
+import { VariantProps } from 'class-variance-authority';
+export { ChatBubble, type ChatBubbleProps } from './ChatBubble.tsx';
+/**
+ * Who said it, which is the only thing that varies.
+ *
+ * The design draws a `Hover` state too, and it holds exactly one thing: a
+ * circled chevron for the message's actions menu. That is out of scope here, so
+ * hover has nothing left to change and the component does not pretend it does.
+ */
+export declare const chatBubbleVariants: (props?: ({
+    author?: "other" | "user" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type ChatBubbleVariants = VariantProps<typeof chatBubbleVariants>;

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

@@ -1,8 +1,18 @@
 import { ChipVariants } from './index.ts';
-export interface ChipProps extends React.HTMLAttributes<HTMLSpanElement> {
-    /** Which semantic colour it is tinted with */
-    tone?: ChipVariants['tone'];
+export interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+    /** How tall it is, and whether it holds a label or a single icon */
+    size?: ChipVariants['size'];
+    /** How its corners are cut */
+    shape?: ChipVariants['shape'];
+    /**
+     * Whether it is being dragged.
+     *
+     * Of the four states the design draws, this is the only one the browser
+     * cannot tell us about on its own: rest, hover and focus are `:hover` and
+     * `:focus-visible`, and there is no `:dragging`.
+     */
+    dragged?: boolean;
     dataTestid: string;
 }
 /** Chip — mirrors `@sesame/orxata-core` Chip. */
-export declare const Chip: import('react').ForwardRefExoticComponent<ChipProps & import('react').RefAttributes<HTMLSpanElement>>;
+export declare const Chip: import('react').ForwardRefExoticComponent<ChipProps & import('react').RefAttributes<HTMLButtonElement>>;

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

@@ -2,18 +2,22 @@ import { VariantProps } from 'class-variance-authority';
 export { Chip } from './Chip.tsx';
 export type { ChipProps } from './Chip.tsx';
 /**
- * A chip is a piece of the user's own data — a value they picked, a label they
- * applied. `Badge` is the system talking back: a status it assigned, a count it
- * worked out. That is the line between the two, and it is why one is a soft
- * tint and the other a solid fill.
+ * 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.
  *
- * The tints are opacity over the semantic colour rather than a `-100` step,
- * because no such token exists for `warning` or `destructive` and inventing one
- * would put a colour in the theme that Figma has never seen. `Table` already
- * tints this way. The pair also cannot drift: background and text come off the
- * same token, so re-pointing `--success` moves both.
+ * Class names, not utilities: the declarations live in `Chip.module.css` behind
+ * `@apply`. See `Button/index.ts` for the full reasoning.
+ *
+ * The two axes are the design's own, with one renaming. Its `Form` is `shape`
+ * here because `form` on a `<button>` is a native attribute that associates the
+ * button with a form, and a prop of that name would quietly eat it. Its
+ * `Circle` is this `rounded`: an icon chip's box is already square, so the
+ * circle is the same radius as a text chip's pill and needs no value of its own.
  */
 export declare const chipVariants: (props?: ({
-    tone?: "success" | "warning" | "neutral" | "brand" | "error" | null | undefined;
+    size?: "sm" | "lg" | "icon-sm" | "icon-lg" | null | undefined;
+    shape?: "square" | "rounded" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type ChipVariants = VariantProps<typeof chipVariants>;

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

@@ -0,0 +1,9 @@
+export interface CounterProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** How much the field holds now */
+    value: number;
+    /** How much it is allowed to hold */
+    max: number;
+    dataTestid: string;
+}
+/** Counter — mirrors `@sesame/orxata-core` Counter. */
+export declare const Counter: import('react').ForwardRefExoticComponent<CounterProps & import('react').RefAttributes<HTMLSpanElement>>;

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

@@ -0,0 +1,13 @@
+import { VariantProps } from 'class-variance-authority';
+export { Counter, type CounterProps } from './Counter.tsx';
+/**
+ * Whether the field is still within its limit.
+ *
+ * Not a prop: the component has `value` and `max`, so asking a caller to also
+ * tell it which state that adds up to invites the two to disagree — a red
+ * counter reading 20/100, or a grey one reading 150/100.
+ */
+export declare const counterVariants: (props?: ({
+    state?: "over" | "within" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type CounterVariants = VariantProps<typeof counterVariants>;

package/dist/lib/cssModules.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Maps the class names a `cva()` returns through a CSS module's hashed names.
+ *
+ * The variant objects are copied verbatim between the two packages —
+ * `parity-variants` compares them as source text — so they have to hold the
+ * same literal strings on both sides: `'ox-button--default'`, not a
+ * `styles.oxButtonDefault` lookup that only exists here. The lookup happens
+ * afterwards, which is what this is.
+ *
+ * A name the module does not define passes through untouched, so a caller's own
+ * class survives being handed to it.
+ */
+export declare const moduleClasses: (styles: Record<string, string>, names: string | undefined) => string;

package/dist/main.d.ts

@@ -18,7 +18,8 @@ export { Badge as OxBadge, badgeVariants, type BadgeVariants, } from './Display/
 export { CalendarDate as OxCalendarDate, calendarDateVariants, type CalendarDateVariants, } from './Display/CalendarDate/index.ts';
 export { NumberFlow as OxNumberFlow, resolveNumberFlowPreset, NUMBER_FLOW_PRESETS, type NumberFlowConfig, type NumberFlowPreset, } from './Display/NumberFlow/index.ts';
 export { PaymentCard as OxPaymentCard, paymentCardVariants, type PaymentCardVariants, type BadgeType, type CardData, } from './Display/PaymentCard/index.ts';
-export { Tag as OxTag } from './Display/Tag/index.ts';
+export { ChatBubble as OxChatBubble, chatBubbleVariants, type ChatBubbleVariants, } from './Display/ChatBubble/index.ts';
+export { ChatBubbleStatus as OxChatBubbleStatus, chatBubbleStatusVariants, type ChatBubbleStatusVariants, } from './Display/ChatBubble/ChatBubbleStatus/index.ts';
 export { Chip as OxChip, chipVariants, type ChipVariants, } from './Display/Chip/index.ts';
 export { PointMarker as OxPointMarker, pointMarkerVariants, type PointMarkerVariants, } from './Display/PointMarker/index.ts';
 export { StatusBadge as OxStatusBadge, statusBadgeVariants, indicatorVariants, type StatusBadgeVariants, } from './Feedback/StatusBadge/index.ts';
@@ -32,7 +33,8 @@ export { Accordion as OxAccordion, AccordionItem as OxAccordionItem, AccordionTr
 export { ToggleTabs as OxToggleTabs, ToggleTabsList as OxToggleTabsList, ToggleTabsTrigger as OxToggleTabsTrigger, ToggleTabsContent as OxToggleTabsContent, } from './Navigation/ToggleTabs/index.ts';
 export { PageControl as OxPageControl, pageControlDots, PAGE_CONTROL_WINDOW, type PageControlDot, type PageControlDotSize, } from './Navigation/PageControl/index.ts';
 export { Breadcrumb as OxBreadcrumb, BreadcrumbList as OxBreadcrumbList, BreadcrumbItem as OxBreadcrumbItem, BreadcrumbLink as OxBreadcrumbLink, BreadcrumbPage as OxBreadcrumbPage, BreadcrumbSeparator as OxBreadcrumbSeparator, BreadcrumbEllipsis as OxBreadcrumbEllipsis, } from './Navigation/Breadcrumb/index.ts';
+export { Counter as OxCounter, counterVariants, type CounterVariants, } from './Forms/Field/Counter/index.ts';
 export { FieldGroup as OxFieldGroup, FieldLabel as OxFieldLabel, FieldMessage as OxFieldMessage, type FieldGroupProps, } from './Forms/Field/index.ts';
 export { InputGroup as OxInputGroup, InputText as OxInputText, InputNumber as OxInputNumber, InputNumberContent as OxInputNumberContent, InputNumberDecrement as OxInputNumberDecrement, InputNumberIncrement as OxInputNumberIncrement, InputNumberInput as OxInputNumberInput, InputPassword as OxInputPassword, InputPasswordInput as OxInputPasswordInput, InputPasswordToggle as OxInputPasswordToggle, useInputPassword, InputOtp as OxInputOtp, InputOtpGroup as OxInputOtpGroup, InputOtpSlot as OxInputOtpSlot, InputOtpSeparator as OxInputOtpSeparator, useInputOtp, Combobox as OxCombobox, ComboboxInput as OxComboboxInput, ComboboxChipsInput as OxComboboxChipsInput, ComboboxContent as OxComboboxContent, ComboboxItem as OxComboboxItem, ComboboxEmpty as OxComboboxEmpty, ComboboxGroup as OxComboboxGroup, ComboboxSeparator as OxComboboxSeparator, Select as OxSelect, SelectTrigger as OxSelectTrigger, SelectContent as OxSelectContent, SelectItem as OxSelectItem, SelectGroup as OxSelectGroup, SelectSeparator as OxSelectSeparator, Switch as OxSwitch, Checkbox as OxCheckbox, RadioButton as OxRadioButton, RadioGroup as OxRadioGroup, ToggleGroup as OxToggleGroup, ToggleLabel as OxToggleLabel, ToggleDescription as OxToggleDescription, SWITCH_SIZES, type InputNumberProps, type InputPasswordProps, type InputPasswordContext, type InputOtpProps, type InputOtpSlotProps, type InputOtpContext, type ComboboxProps, type SelectProps, type RadioGroupProps, type ToggleGroupProps, type ToggleLabelProps, type ToggleDescriptionProps, } from './Forms/Inputs/index.ts';
-export { Table as OxTable, TableHead as OxTableHead, TableBody as OxTableBody, TableRow as OxTableRow, TableCell as OxTableCell, TableHeaderCell as OxTableHeaderCell, TableSelectCell as OxTableSelectCell, TableDragCell as OxTableDragCell, TableBulkHeader as OxTableBulkHeader, TablePagination as OxTablePagination, TableEmpty as OxTableEmpty, TableAvatar as OxTableAvatar, TableRowExpanded as OxTableRowExpanded, TableExpandCell as OxTableExpandCell, TableColumnVisibility as OxTableColumnVisibility, useTable, useTableSelection, useTableSorting, useTablePagination, useTableDetailRow, useTablePinning, useTableColumns, useScrollShadow, useDragToScroll, useFixedColumns, } from './Data/Table/index.ts';
-export type { UseTableOptions, UseTableReturn, UseTableSelectionReturn, UseTableSortingReturn, UseTablePaginationOptions, UseTablePaginationReturn, DetailRowInstance, DetailRowOptions, DetailRowPluginDef, UseTablePinningOptions, UseTablePinningReturn, CellInfo, HeaderInfo, UseTableColumnsOptions, UseTableColumnsReturn, UseScrollShadowOptions, UseScrollShadowReturn, UseDragToScrollOptions, UseDragToScrollReturn, UseFixedColumnsOptions, TableProps, TableMode, ColumnDef, ColumnAlign, CellContext, SortingState, PaginationState, PaginationChangePayload, SortingChangePayload, SelectionChangePayload, FilterChangePayload, ColumnResizeMode, ColumnVisibilityState, ColumnOrderState, ExpandedState, ColumnVisibilityChangePayload, ColumnOrderChangePayload, RowExpandChangePayload, ColumnResizePayload, ColumnPinningState, } from './Data/Table/index.ts';
+export { Table as OxTable, TableVirtualized as OxTableVirtualized, TableHead as OxTableHead, TableBody as OxTableBody, TableRow as OxTableRow, TableCell as OxTableCell, TableHeaderCell as OxTableHeaderCell, TableSelectCell as OxTableSelectCell, TableDragCell as OxTableDragCell, TableBulkHeader as OxTableBulkHeader, TablePagination as OxTablePagination, TableEmpty as OxTableEmpty, TableAvatar as OxTableAvatar, TableRowExpanded as OxTableRowExpanded, TableExpandCell as OxTableExpandCell, TableColumnVisibility as OxTableColumnVisibility, useTable, useTableSelection, useTableSorting, useTablePagination, useTableDetailRow, useTablePinning, useTableColumns, useScrollShadow, useDragToScroll, useFixedColumns, useTableVirtual, } from './Data/Table/index.ts';
+export type { UseTableOptions, UseTableReturn, UseTableSelectionReturn, UseTableSortingReturn, UseTablePaginationOptions, UseTablePaginationReturn, DetailRowInstance, DetailRowOptions, DetailRowPluginDef, UseTablePinningOptions, UseTablePinningReturn, CellInfo, HeaderInfo, UseTableVirtualOptions, UseTableVirtualReturn, UseTableColumnsOptions, UseTableColumnsReturn, UseScrollShadowOptions, UseScrollShadowReturn, UseDragToScrollOptions, UseDragToScrollReturn, UseFixedColumnsOptions, TableProps, TableMode, ColumnDef, ColumnAlign, CellContext, SortingState, PaginationState, PaginationChangePayload, SortingChangePayload, SelectionChangePayload, FilterChangePayload, ColumnResizeMode, ColumnVisibilityState, ColumnOrderState, ExpandedState, ColumnVisibilityChangePayload, ColumnOrderChangePayload, RowExpandChangePayload, ColumnResizePayload, ColumnPinningState, } from './Data/Table/index.ts';