@sesamehr/react-design-system 3.8.0 → 3.10.0

package/README.md

@@ -2,7 +2,9 @@
 
 React components and design tokens for the Sesame HR design system.
 
-📖 **[Component documentation](https://reactds.sesametime.com)**
+📖 **[Component documentation](https://storybook.sesametime.com)** — this package's
+Storybook. The Vue source of truth has its own at
+[vue-storybook.sesametime.com](https://vue-storybook.sesametime.com).
 
 ## Install
 
@@ -97,7 +99,6 @@ 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/Display/Avatar/AvatarRounded/AvatarRounded.d.ts

@@ -15,6 +15,12 @@ export interface AvatarRoundedProps extends React.HTMLAttributes<HTMLSpanElement
     action?: React.ReactNode;
     /** Rendered centred on the bottom edge */
     label?: React.ReactNode;
+    /**
+     * Who the avatar is, shown in a tooltip on hover and on focus. Passing it
+     * is what turns the tooltip on, which keeps the switch out of the prop
+     * budget and lets the tooltip carry more than a name.
+     */
+    tooltip?: React.ReactNode;
     dataTestid: string;
 }
 /**

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

@@ -15,6 +15,12 @@ export interface AvatarSquareProps extends React.HTMLAttributes<HTMLSpanElement>
     action?: React.ReactNode;
     /** Rendered centred on the bottom edge */
     label?: React.ReactNode;
+    /**
+     * Who the avatar is, shown in a tooltip on hover and on focus. Passing it
+     * is what turns the tooltip on, which keeps the switch out of the prop
+     * budget and lets the tooltip carry more than a name.
+     */
+    tooltip?: React.ReactNode;
     dataTestid: string;
 }
 /**

package/dist/Display/AvatarGroup/AvatarGroup.d.ts

@@ -16,6 +16,20 @@ export interface AvatarGroupProps extends Omit<React.ButtonHTMLAttributes<HTMLBu
     avatars: AvatarItem[];
     /** Maximum number of avatars to show before collapsing */
     max?: number;
+    /**
+     * How many people the stack stands for, when that is not the length of
+     * `avatars`. Three faces and a `total` of 25 draw three avatars and `+22`,
+     * so a caller holding one page of a long list no longer has to pad it with
+     * empty items to make the counter read right.
+     *
+     * The counter is `total` minus what is *shown*, never minus `max`: the two
+     * differ whenever there are fewer faces than `max`, and `shown + counter`
+     * has to come to `total` for the number to mean anything. A `total` under
+     * the number of faces is an ordinary race — the list refreshed and the
+     * count did not — so it drops the counter and never a face; `max` stays the
+     * only thing that caps the pile.
+     */
+    total?: number;
     /** Whether the group is interactive (clickable) */
     interactive?: boolean;
     /** The size every avatar in the stack is drawn at. */

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

@@ -2,8 +2,12 @@ import { ChipVariants } from './index.ts';
 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 the one that is picked. Presentational only: the caller holds
+     * the selection and announces it — `aria-pressed` on a chip that toggles,
+     * `aria-selected` on one inside a listbox.
+     */
+    selected?: boolean;
     /**
      * Whether it is being dragged.
      *

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

@@ -15,14 +15,12 @@ export type { ChipProps } from './Chip.tsx';
  * 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.
+ * Size is the only axis, because it is the only one the design has: set `905:703`
+ * is `State` × `Size` and exposes no corner property. The `shape` prop that used
+ * to sit here let a caller draw a chip the board never draws, and its `square`
+ * default is why a combobox's chips had 8px corners.
  */
 export declare const chipVariants: (props?: ({
     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/Feedback/Alert/AlertLink.d.ts

@@ -0,0 +1,7 @@
+export type AlertLinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement>;
+/**
+ * AlertLink — the action link the board sits to the right of the text, before
+ * the close. A `link` prop on `Alert` would carry the text and the destination
+ * as configuration; `href` and the rest arrive here as native attributes.
+ */
+export declare const AlertLink: import('react').ForwardRefExoticComponent<AlertLinkProps & import('react').RefAttributes<HTMLAnchorElement>>;

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

@@ -2,6 +2,7 @@ export { Alert, type AlertProps } from './Alert.tsx';
 export { AlertClose, type AlertCloseProps } from './AlertClose.tsx';
 export { AlertDescription, type AlertDescriptionProps, } from './AlertDescription.tsx';
 export { AlertIcon, type AlertIconProps } from './AlertIcon.tsx';
+export { AlertLink, type AlertLinkProps } from './AlertLink.tsx';
 export { AlertTitle, type AlertTitleProps } from './AlertTitle.tsx';
 export { AlertToggle, type AlertToggleProps } from './AlertToggle.tsx';
 export { type AlertVariant } from './alert-context.ts';

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

@@ -0,0 +1,18 @@
+export interface DialogScrollbarProps {
+    dataTestid: string;
+}
+/**
+ * Where a dialog's overlay scrollbar goes. Mirrors `@sesame/orxata-core`
+ * DialogScrollbar: `Scrollbar` plus the placement that is only true of a
+ * dialog. Nothing to configure — the scrollport is resolved with the same query
+ * the panel's `:has()` runs, so it is the body when one is declared and the
+ * region itself when not.
+ *
+ * The bar hangs off a zero-height sticky rail and not off the panel: with no
+ * body the panel *is* the scrollport, and an absolutely positioned child of it
+ * scrolls away with the content, as the close button does.
+ */
+export declare function DialogScrollbar({ dataTestid }: DialogScrollbarProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace DialogScrollbar {
+    var displayName: string;
+}

package/dist/Feedback/Toast/ToastAction.d.ts

@@ -1,5 +1,8 @@
+import { ToastActionVariant } from './useToast.ts';
 import * as ToastPrimitive from '@radix-ui/react-toast';
 export interface ToastActionProps extends React.ComponentPropsWithoutRef<typeof ToastPrimitive.Action> {
+    /** `primary` is the filled one and goes first; the board allows one of each. */
+    variant?: ToastActionVariant;
     dataTestid?: string;
 }
 /**
@@ -8,5 +11,9 @@ export interface ToastActionProps extends React.ComponentPropsWithoutRef<typeof
  * `altText` is what a screen reader is told instead of the button, which is
  * gone before anyone can reach it — so it must describe a route that outlives
  * the toast.
+ *
+ * `default` is Orxata's name for the filled button the board calls Primary, and
+ * `2xs` is the 24px step — the board's Button `xs` measures 24 (node
+ * `1692:2585`), and the two scales are offset by one name.
  */
 export declare const ToastAction: import('react').ForwardRefExoticComponent<ToastActionProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/Feedback/Toast/ToastActions.d.ts

@@ -0,0 +1,11 @@
+export interface ToastActionsProps extends React.HTMLAttributes<HTMLDivElement> {
+    dataTestid?: string;
+}
+/**
+ * ToastActions — mirrors `orxata-core` ToastActions.
+ *
+ * A part rather than two loose buttons: the toast is a grid, and two children
+ * sharing a `grid-column` land on separate rows. This is the board's own
+ * `Show actions`, and it exists even when only one button is in it.
+ */
+export declare const ToastActions: import('react').ForwardRefExoticComponent<ToastActionsProps & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -1,12 +1,13 @@
 import { VariantProps } from 'class-variance-authority';
 export { Toast, type ToastProps } from './Toast.tsx';
 export { ToastAction, type ToastActionProps } from './ToastAction.tsx';
+export { ToastActions, type ToastActionsProps } from './ToastActions.tsx';
 export { ToastClose, type ToastCloseProps } from './ToastClose.tsx';
 export { ToastDescription, type ToastDescriptionProps, } from './ToastDescription.tsx';
 export { ToastIcon, type ToastIconProps } from './ToastIcon.tsx';
 export { ToastTitle, type ToastTitleProps } from './ToastTitle.tsx';
 export { Toaster, type ToasterProps } from './Toaster.tsx';
-export { type ToastActionDescriptor, type ToastEntry, type ToastOptions, type ToastType, type UseToastReturn, dismissAllToasts, dismissToast, toast, useToast, } from './useToast.ts';
+export { type ToastActionDescriptor, type ToastActionVariant, type ToastActionSet, type ToastEntry, type ToastOptions, type ToastType, type UseToastReturn, dismissAllToasts, dismissToast, resolveToastActions, toast, useToast, } from './useToast.ts';
 /** The six corners the stack can be anchored to. */
 export declare const TOAST_POSITIONS: readonly ["top-left", "top-center", "top-right", "bottom-left", "bottom-center", "bottom-right"];
 export type ToastPosition = (typeof TOAST_POSITIONS)[number];

package/dist/Feedback/Toast/useToast.d.ts

@@ -9,14 +9,39 @@ export interface ToastActionDescriptor {
      */
     altText?: string;
 }
+/**
+ * Up to two buttons. A record and not an ordered array because the two are not
+ * interchangeable — each has its own fill — and either may be absent on its
+ * own, which an array could only say with a hole in it.
+ */
+export interface ToastActionSet {
+    /** `Button default`, first in the row. */
+    primary?: ToastActionDescriptor;
+    /** `Button outline`. */
+    secondary?: ToastActionDescriptor;
+}
+export type ToastActionVariant = 'primary' | 'secondary';
 export interface ToastOptions {
     title: string;
     description?: string;
     type?: ToastType;
+    /**
+     * Shorthand for `actions.secondary`. The board's own single-action example
+     * (`1443:42780`) is the outline button alone, which is what this has always
+     * rendered.
+     */
     action?: ToastActionDescriptor;
+    actions?: ToastActionSet;
     /** Overrides the `duration` `OxToaster` was mounted with. */
     duration?: number;
 }
+/**
+ * The row's contents, primary first — the board caps it at two and fixes that
+ * order (node `1443:21`, §7).
+ */
+export declare function resolveToastActions(options: Pick<ToastOptions, 'action' | 'actions'>): Array<ToastActionDescriptor & {
+    variant: ToastActionVariant;
+}>;
 export interface ToastEntry extends ToastOptions {
     id: string;
     type: ToastType;

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

@@ -22,7 +22,7 @@
  */
 export type FieldVariant = 'default' | 'error' | 'success' | 'warning';
 /** The parts of the group that announce themselves so an IDREF never dangles. */
-type FieldPart = 'label' | 'message';
+type FieldPart = 'label' | 'description' | 'message';
 export interface FieldGroupContextValue {
     /**
      * Id on the `<label>`. A composite control — one with several focusable
@@ -30,12 +30,18 @@ export interface FieldGroupContextValue {
      * `aria-labelledby` here.
      */
     labelId: string;
+    /**
+     * Id on the supporting text. Separate from `messageId` because the two
+     * coexist: an invalid toggle row has both, and a reader should get both.
+     */
+    descriptionId: string;
     /** Id on the message, and what a control points `aria-describedby` at. */
     messageId: string;
     /** What `<label htmlFor>` points at, once a control has claimed it. */
     controlId: string | undefined;
     variant: FieldVariant;
     hasLabel: boolean;
+    hasDescription: boolean;
     hasMessage: boolean;
     /** Announce a part as mounted. Returns the call that takes it back. */
     register: (_part: FieldPart) => () => void;
@@ -59,6 +65,9 @@ export interface FieldLabelAttrs {
     id?: string;
     htmlFor?: string;
 }
+export interface FieldDescriptionAttrs {
+    id?: string;
+}
 export declare const FieldGroupContext: import('react').Context<FieldGroupContextValue | null>;
 /**
  * The surrounding field, or `undefined` when there is none.
@@ -92,6 +101,11 @@ export declare function useFieldControl(id?: string): FieldControlAttrs;
 export declare function useFieldControlGroup(): FieldControlGroupAttrs;
 /** Wiring for a `<label>` inside the group: its own id, and what it names. */
 export declare function useFieldLabel(): FieldLabelAttrs;
+/**
+ * Wiring for the supporting text: the id the control adds to its
+ * `aria-describedby`. A `<span>` next to a control is not attached to it.
+ */
+export declare function useFieldDescription(): FieldDescriptionAttrs;
 /**
  * Wiring for the message: the id a control describes itself with, and the
  * group's variant so it does not have to be written on both.
@@ -105,4 +119,14 @@ export declare function useFieldMessage(): {
  * the bookkeeping live next to the hooks that read them.
  */
 export declare function useProvideFieldGroup(variant: FieldVariant): FieldGroupContextValue;
+/**
+ * For a group that pairs its own label with its own control while still
+ * answering to the field around it — `<OxToggleGroup>`.
+ *
+ * Own label, control and description; variant and message delegated outward.
+ * Letting the outer field through instead would have every toggle row in it
+ * claim the same `controlId`; shadowing it would drop the error's
+ * `aria-invalid` and `aria-describedby`.
+ */
+export declare function useProvideNestedFieldGroup(): FieldGroupContextValue;
 export {};

package/dist/Forms/Inputs/DatePicker/format.d.ts

@@ -42,3 +42,14 @@ export declare const formatYear: (locale: string, month: Date) => string;
  * have to carry.
  */
 export declare const formatMonthShort: (locale: string, month: Date) => string;
+/**
+ * A month and its year, abbreviated — `oct 2026`, `Oct 2026`.
+ *
+ * What `OxMonthPicker`'s trigger shows, and deliberately not `formatMonthYear`:
+ * the board writes the chosen month the same length as `OxDatePicker` writes a
+ * day (`12 mar 2026`), so two pickers in one form read as one family rather
+ * than one of them spelling `octubre de 2026` out in full.
+ */
+export declare const formatMonthYearShort: (locale: string, month: Date) => string;
+/** The span a year page covers — `2020 – 2031` — for the panel's own header. */
+export declare const formatYearRange: (locale: string, first: Date, last: Date) => string;

package/dist/Forms/Inputs/InputText/InputText.d.ts

@@ -1,6 +1,11 @@
 import { InputSize } from '../inputSize.ts';
 export interface InputTextProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
     size?: InputSize;
+    /**
+     * `ghost` keeps every metric `default` has — height, side padding, corner —
+     * and drops the box, so a focused field is the only one drawing a border.
+     */
+    variant?: 'default' | 'ghost';
     /** Controlled value. Pair with `onFieldChange`; omit for uncontrolled. */
     field?: string;
     /** Called on every input with the next value. */

package/dist/Forms/Inputs/MonthPicker/MonthPicker.d.ts

@@ -0,0 +1,61 @@
+import { CalendarConstraints } from '../Calendar/constraints.ts';
+export interface MonthPickerProps extends Pick<React.HTMLAttributes<HTMLDivElement>, 'className'> {
+    /** The chosen month, or `undefined` for none. Controlled. */
+    value?: Date;
+    /** The initially chosen month, for the uncontrolled case. */
+    defaultValue?: Date;
+    onValueChange?: (value: Date | undefined) => void;
+    /**
+     * The year the panel shows, to follow or drive the view from outside. Left
+     * unbound it is the chosen month's year, or the current one, re-read each
+     * time the panel opens.
+     */
+    visibleYear?: number;
+    onVisibleYearChange?: (year: number) => void;
+    /** What can be picked, and where paging stops. Passed straight through. */
+    constraints?: CalendarConstraints;
+    /**
+     * The board's `Show arrows`: a ‹ › pair outside the field that steps the
+     * chosen month without opening the panel, for a report header or a monthly
+     * view. Off by default.
+     */
+    showArrows?: boolean;
+    disabled?: boolean;
+    /**
+     * What the trigger shows. Falls back to the month from `Intl`, and to nothing
+     * while none is chosen — pass one to put a placeholder there.
+     */
+    children?: (state: {
+        value: Date | undefined;
+    }) => React.ReactNode;
+    /** The trailing glyph. Falls back to a calendar. */
+    icon?: React.ReactNode;
+    dataTestid: string;
+}
+/**
+ * A field that shows the chosen month and opens a grid of them to change it.
+ * Mirrors `@sesame/orxata-core` MonthPicker.
+ *
+ * `OxDatePicker` one unit up, and built from the same parts: `OxPopover` for
+ * the surface, `OxDatePickerTrigger` for the closed control — the same trigger,
+ * not a copy of it, so two pickers in one form cannot disagree about a radius —
+ * and `OxMonthPickerPanel` for the board's `Calendar / Months`.
+ *
+ * A `Date` at the boundary means a calendar month, the way `OxCalendar`'s means
+ * a day.
+ *
+ * **Four of the board's ten properties are not props here.** `Show label`,
+ * `Label`, `Show helper` and `Helper` are an `OxFieldGroup` with an
+ * `OxFieldLabel` and an `OxFieldMessage` composed around this, which is how
+ * every field in the package is labelled; `State` is hover, focus and open in
+ * CSS, `disabled` natively, and error from the field context. `Size` is the
+ * `inputSizeClass[size]` class on any ancestor, which is how every control in
+ * the package is sized.
+ *
+ * It ships no strings: the trigger is `Intl` in the locale `LocaleProvider`
+ * publishes, and a placeholder is words, so it is `children`'s to supply.
+ */
+export declare const MonthPicker: {
+    ({ className, value, defaultValue, onValueChange, visibleYear, onVisibleYearChange, constraints, showArrows, disabled, children, icon, dataTestid, }: MonthPickerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/Forms/Inputs/MonthPicker/MonthPickerPanel.d.ts

@@ -0,0 +1,39 @@
+import { CalendarConstraints } from '../Calendar/constraints.ts';
+export interface MonthPickerPanelProps extends Pick<React.HTMLAttributes<HTMLDivElement>, 'className'> {
+    /** The year on screen. The months grid shows it; the years grid shows its page. */
+    visibleYear: number;
+    /** The year on screen, whenever paging or the cursor leaves the one before. */
+    onVisibleYearChange?: (year: number) => void;
+    /**
+     * The chosen month, as a `Date` on its first day at local midnight —
+     * `OxCalendar`'s contract for a day, one unit up. Controlled.
+     */
+    value?: Date;
+    /** The initially chosen month, for the uncontrolled case. */
+    defaultValue?: Date;
+    onValueChange?: (value: Date | undefined) => void;
+    /** What can be picked, and where paging stops. */
+    constraints?: CalendarConstraints;
+    dataTestid: string;
+}
+/**
+ * The board's `Calendar / Months` (node `2397:3065`): a 3×4 grid of months,
+ * and the same grid of years behind the header. Mirrors `@sesame/orxata-core`
+ * MonthPickerPanel.
+ *
+ * It is `OxCalendar`'s opposite number one step up — a month is the unit here,
+ * so there is no week, no weekday row and nothing for Radix's calendar
+ * primitives to do. It shares the vocabulary: the same `CalendarConstraints`,
+ * the same `Intl`-only formatting.
+ *
+ * Like `OxCalendar` it draws no surface of its own — the fill, the border, the
+ * radius and the shadow belong to whatever it is portalled into, which for
+ * `OxMonthPicker` is `OxPopoverContent`'s `Surface`.
+ *
+ * It ships no strings: the cells, the header and the arrows' names are `Intl`'s
+ * rather than a phrase we would have to translate.
+ */
+export declare const MonthPickerPanel: {
+    ({ className, visibleYear, onVisibleYearChange, value, defaultValue, onValueChange, constraints, dataTestid, }: MonthPickerPanelProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/Forms/Inputs/MonthPicker/index.d.ts

@@ -0,0 +1,2 @@
+export { MonthPicker, type MonthPickerProps } from './MonthPicker.tsx';
+export { MonthPickerPanel, type MonthPickerPanelProps, } from './MonthPickerPanel.tsx';

package/dist/Forms/Inputs/MonthPicker/monthGrid.d.ts

@@ -0,0 +1,45 @@
+import { CalendarConstraints } from '../Calendar/constraints.ts';
+/**
+ * The arithmetic behind the month panel: which cells a page holds, which of
+ * them can be picked, and where a key moves the cursor. Mirrors
+ * `@sesame/orxata-core` `MonthPicker/monthGrid.ts`.
+ *
+ * Framework-free and duplicated verbatim, the way `month.ts` and `format.ts`
+ * already are — the panel is a grid in both packages, and a keyboard that
+ * disagrees across the port is the drift the parity rules cannot see.
+ */
+/** Three columns by four rows, which is how the board draws both views. */
+export declare const GRID_COLUMNS = 3;
+export declare const MONTHS_IN_YEAR = 12;
+export declare const YEARS_IN_PAGE = 12;
+/**
+ * A page is the decade the year falls in, drawn twelve cells long (node
+ * `2397:3027`). Decade-anchored and not tiled by twelve: tiling makes the page
+ * depend on how the year was arrived at, and the two cells of overlap it costs
+ * are cheaper than a year with two possible grids.
+ */
+export declare const YEAR_PAGE_STEP = 10;
+export declare const yearPageStart: (year: number) => number;
+export declare const monthsOfYear: (year: number) => Date[];
+export declare const yearsOfPage: (year: number) => Date[];
+/**
+ * Bounds are read by month, the way `Calendar` reads them.
+ *
+ * The predicate is documented as per-day because that is what a calendar
+ * needs; there is no per-month one to add without growing
+ * `CalendarConstraints` a field only this component would read.
+ */
+export declare const isMonthDisabled: (month: Date, constraints?: CalendarConstraints) => boolean;
+export declare const isYearDisabled: (year: Date, constraints?: CalendarConstraints) => boolean;
+/**
+ * Where a key puts the cursor, as an index.
+ *
+ * Unclamped on purpose: the caller turns the index back into a date with
+ * `new Date(year, index, 1)`, so the wrap past either end is free rather than
+ * an edge case written down twice. `pageStep` is what PageUp/PageDown move by,
+ * which is not `cells`.
+ */
+export declare const moveWithin: (key: string, index: number, { cells, pageStep }: {
+    cells: number;
+    pageStep: number;
+}) => number | null;

package/dist/Forms/Inputs/Toggle/Checkbox/Checkbox.d.ts

@@ -1,6 +1,7 @@
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 export interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {
     variant?: 'default' | 'rounded';
+    size?: 'sm' | 'md' | 'lg';
 }
 /**
  * Checkbox — built on `@radix-ui/react-checkbox`. `checked` is

package/dist/Forms/Inputs/Toggle/ToggleDescription/ToggleDescription.d.ts

@@ -1,5 +1,9 @@
 export interface ToggleDescriptionProps extends React.HTMLAttributes<HTMLSpanElement> {
     size?: 'xs' | 'sm' | 'base';
 }
-/** ToggleDescription — mirrors `@sesame/orxata-core` ToggleDescription. */
+/**
+ * ToggleDescription — mirrors `@sesame/orxata-core` ToggleDescription. `id`
+ * comes from the surrounding group so the toggle can point `aria-describedby`
+ * at it; without one, only a sighted user ever got this sentence.
+ */
 export declare const ToggleDescription: import('react').ForwardRefExoticComponent<ToggleDescriptionProps & import('react').RefAttributes<HTMLSpanElement>>;

package/dist/Forms/Inputs/Toggle/ToggleGroup/ToggleGroup.d.ts

@@ -2,6 +2,14 @@ export interface ToggleGroupProps extends React.ComponentPropsWithoutRef<'div'>
     align?: 'start' | 'center';
     gap?: 'sm' | 'md' | 'lg';
 }
-/** ToggleGroup — mirrors `@sesame/orxata-core` ToggleGroup. Grid wrapper that lays
- * out a controller, its label and description. */
+/**
+ * ToggleGroup — mirrors `@sesame/orxata-core` ToggleGroup. A toggle, its label
+ * and its supporting text on one grid row, wired to each other: it provides
+ * the field context `OxToggleLabel` reads its `htmlFor` from and
+ * `OxToggleDescription` its `id`.
+ *
+ * No `data-slot` of its own. It used to say `controller` — a lie, the control
+ * is the checkbox inside it — purely so `OxFieldGroup` would order it second,
+ * which that stylesheet's catch-all child selector already does.
+ */
 export declare const ToggleGroup: import('react').ForwardRefExoticComponent<ToggleGroupProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Forms/Inputs/Toggle/ToggleLabel/ToggleLabel.d.ts

@@ -4,11 +4,8 @@ export interface ToggleLabelProps extends React.LabelHTMLAttributes<HTMLLabelEle
 /**
  * ToggleLabel — mirrors `@sesame/orxata-core` ToggleLabel.
  *
- * `htmlFor` falls back to whichever control claimed the surrounding
- * `<OxFieldGroup>`'s id, because the commonest checkbox layout in the system —
- * a field wrapping an `<OxToggleGroup>` wrapping a toggle and this — would
- * otherwise leave the toggle's own label naming nothing. It does not take the
- * group's `labelId`: `OxFieldLabel` already carries that, and two elements
- * cannot share an id.
+ * `htmlFor` falls back to whichever control claimed the surrounding group's
+ * id, normally the `<OxToggleGroup>` above it. It does not take the group's
+ * `labelId`: `OxFieldLabel` carries that, and an id cannot be on both.
  */
 export declare const ToggleLabel: import('react').ForwardRefExoticComponent<ToggleLabelProps & import('react').RefAttributes<HTMLLabelElement>>;

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

@@ -9,6 +9,7 @@ export * from './ChatInput/index.ts';
 export * from './ColorPicker/index.ts';
 export * from './IconPicker/index.ts';
 export * from './DatePicker/index.ts';
+export * from './MonthPicker/index.ts';
 export * from './RichTextEditor/index.ts';
 export * from './SearchBar/index.ts';
 export * from './SearchPanel/index.ts';

package/dist/Navigation/ToggleTabs/ToggleTabsList.d.ts

@@ -1,3 +1,21 @@
 import * as TabsPrimitive from '@radix-ui/react-tabs';
-export type ToggleTabsListProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>;
-export declare const ToggleTabsList: import('react').ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export type ToggleTabsListProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {
+    /**
+     * Track height: `sm` is the 40px default, `xs` the compact 32px step.
+     *
+     * Figma's `Toggle view` set names its variants `sm` and `xs` where its own
+     * description reads "Default/Small": the binding wins, and 32px is already
+     * `xs` on the control height ladder in `inputSizes.css`.
+     */
+    size?: 'sm' | 'xs';
+};
+export declare const ToggleTabsList: import('react').ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
+    /**
+     * Track height: `sm` is the 40px default, `xs` the compact 32px step.
+     *
+     * Figma's `Toggle view` set names its variants `sm` and `xs` where its own
+     * description reads "Default/Small": the binding wins, and 32px is already
+     * `xs` on the control height ladder in `inputSizes.css`.
+     */
+    size?: "sm" | "xs";
+} & import('react').RefAttributes<HTMLDivElement>>;

package/dist/main.d.ts

@@ -58,12 +58,12 @@ export { EmptyStateOption as OxEmptyStateOption } from './Feedback/EmptyState/Em
 export { Loader as OxLoader } from './Feedback/Loader/index.ts';
 export { Progress as OxProgress } from './Feedback/Progress/index.ts';
 export { Skeleton as OxSkeleton } from './Feedback/Skeleton/index.ts';
-export { Alert as OxAlert, AlertClose as OxAlertClose, AlertDescription as OxAlertDescription, AlertIcon as OxAlertIcon, AlertTitle as OxAlertTitle, AlertToggle as OxAlertToggle, } from './Feedback/Alert/index.ts';
+export { Alert as OxAlert, AlertClose as OxAlertClose, AlertDescription as OxAlertDescription, AlertIcon as OxAlertIcon, AlertLink as OxAlertLink, AlertTitle as OxAlertTitle, AlertToggle as OxAlertToggle, } from './Feedback/Alert/index.ts';
 export { Dialog as OxDialog, DialogContent as OxDialogContent, DialogBody as OxDialogBody, DialogTitle as OxDialogTitle, DialogDescription as OxDialogDescription, DialogOverlay as OxDialogOverlay, DialogTwoPanelContent as OxDialogTwoPanelContent, DialogFullScreenContent as OxDialogFullScreenContent, DialogTrigger as OxDialogTrigger, DialogClose as OxDialogClose, } from './Feedback/Dialog/index.ts';
 export { Drawer as OxDrawer, DrawerContent as OxDrawerContent, DrawerBody as OxDrawerBody, DrawerTitle as OxDrawerTitle, DrawerDescription as OxDrawerDescription, DrawerExpand as OxDrawerExpand, DrawerTrigger as OxDrawerTrigger, DrawerClose as OxDrawerClose, } from './Feedback/Drawer/index.ts';
 export { Tooltip as OxTooltip, TooltipContent as OxTooltipContent, } from './Feedback/Tooltip/index.ts';
 export { Popover as OxPopover, PopoverContent as OxPopoverContent, PopoverClose as OxPopoverClose, } from './Feedback/Popover/index.ts';
-export { Toaster as OxToaster, Toast as OxToast, ToastIcon as OxToastIcon, ToastTitle as OxToastTitle, ToastDescription as OxToastDescription, ToastAction as OxToastAction, ToastClose as OxToastClose, TOAST_POSITIONS, type ToastPosition, type ToastType, type ToastOptions, type ToastEntry, type ToastActionDescriptor, type UseToastReturn, type ToastVariants, type ToastViewportVariants, toastVariants, toastViewportVariants, toastSwipeDirection, dismissAllToasts, dismissToast, toast, useToast, } from './Feedback/Toast/index.ts';
+export { Toaster as OxToaster, Toast as OxToast, ToastIcon as OxToastIcon, ToastTitle as OxToastTitle, ToastDescription as OxToastDescription, ToastAction as OxToastAction, ToastActions as OxToastActions, ToastClose as OxToastClose, TOAST_POSITIONS, type ToastPosition, type ToastType, type ToastOptions, type ToastEntry, type ToastActionDescriptor, type ToastActionVariant, type ToastActionSet, type UseToastReturn, type ToastVariants, type ToastViewportVariants, toastVariants, toastViewportVariants, toastSwipeDirection, dismissAllToasts, dismissToast, resolveToastActions, toast, useToast, } from './Feedback/Toast/index.ts';
 export { Accordion as OxAccordion, AccordionItem as OxAccordionItem, AccordionTrigger as OxAccordionTrigger, AccordionContent as OxAccordionContent, } from './Navigation/Accordion/index.ts';
 export { Tabs as OxTabs, TabsList as OxTabsList, TabsTrigger as OxTabsTrigger, TabsContent as OxTabsContent, } from './Navigation/Tabs/index.ts';
 export { ToggleTabs as OxToggleTabs, ToggleTabsList as OxToggleTabsList, ToggleTabsTrigger as OxToggleTabsTrigger, ToggleTabsContent as OxToggleTabsContent, } from './Navigation/ToggleTabs/index.ts';
@@ -74,7 +74,7 @@ export { Breadcrumb as OxBreadcrumb, BreadcrumbList as OxBreadcrumbList, Breadcr
 export { Counter as OxCounter, counterVariants, type CounterVariants, } from './Forms/Field/Counter/index.ts';
 export { FieldGroup as OxFieldGroup, FieldLabel as OxFieldLabel, FieldMessage as OxFieldMessage, useFieldControl, useFieldControlGroup, type FieldControlAttrs, type FieldControlGroupAttrs, type FieldGroupProps, type FieldVariant, } from './Forms/Field/index.ts';
 export { AiSearch as OxAiSearch, AiSearchAsk as OxAiSearchAsk, AiSearchPanel as OxAiSearchPanel, AiSearchSend as OxAiSearchSend, AiSearchShortcut as OxAiSearchShortcut, AiSearchSuggestion as OxAiSearchSuggestion, } from './Forms/Inputs/AiSearch/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, Calendar as OxCalendar, CalendarRange as OxCalendarRange, CalendarDay as OxCalendarDay, calendarDayVariants, Combobox as OxCombobox, ComboboxCancel as OxComboboxCancel, ComboboxInput as OxComboboxInput, ComboboxChipsInput as OxComboboxChipsInput, ComboboxContent as OxComboboxContent, ComboboxItem as OxComboboxItem, ComboboxItemEdit as OxComboboxItemEdit, ComboboxEmpty as OxComboboxEmpty, ComboboxGroup as OxComboboxGroup, ComboboxSeparator as OxComboboxSeparator, ChatInput as OxChatInput, ColorPicker as OxColorPicker, ColorPickerTrigger as OxColorPickerTrigger, ColorPickerContent as OxColorPickerContent, ColorPickerSwatch as OxColorPickerSwatch, useColorPicker, IconPicker as OxIconPicker, IconPickerTrigger as OxIconPickerTrigger, IconPickerContent as OxIconPickerContent, IconPickerItem as OxIconPickerItem, useIconPicker, DatePicker as OxDatePicker, DateRangePicker as OxDateRangePicker, DatePickerTrigger as OxDatePickerTrigger, DatePickerHeader as OxDatePickerHeader, DatePickerMonthSelect as OxDatePickerMonthSelect, DatePickerYearSelect as OxDatePickerYearSelect, SearchBar as OxSearchBar, searchBarVariants, SearchPanel as OxSearchPanel, SearchPanelInput as OxSearchPanelInput, SearchPanelList as OxSearchPanelList, SearchPanelGroup as OxSearchPanelGroup, SearchPanelItem as OxSearchPanelItem, SearchPanelEmpty as OxSearchPanelEmpty, Select as OxSelect, SelectTrigger as OxSelectTrigger, SelectContent as OxSelectContent, SelectItem as OxSelectItem, SelectGroup as OxSelectGroup, SelectSeparator as OxSelectSeparator, TimePicker as OxTimePicker, TimePickerField as OxTimePickerField, TimePickerList as OxTimePickerList, TimePickerWheel as OxTimePickerWheel, TimePickerWheelColumn as OxTimePickerWheelColumn, Textarea as OxTextarea, RichTextEditor as OxRichTextEditor, RichTextToolbar as OxRichTextToolbar, RichTextToolbarButton as OxRichTextToolbarButton, RICH_TEXT_COMMANDS, RICH_TEXT_COMMAND_NAMES, isRichTextAdapter, oxRichTextExtensions, useRichTextAdapter, useRichTextToolbar, type RichTextAdapter, type RichTextCommand, type RichTextCommandSpec, type RichTextExtras, type RichTextSource, 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 CalendarProps, type CalendarRangeProps, type CalendarDateRange, type CalendarDayProps, type CalendarDayState, type CalendarDayVariants, type CalendarConstraints, type CalendarNav, type ComboboxProps, type ChatInputActionLabels, type ChatInputState, type ColorPickerProps, type ColorPickerContext, type IconPickerProps, type IconPickerContext, type DatePickerProps, type DateRangePickerProps, type DatePickerTriggerProps, type DatePickerHeaderProps, type DatePickerMonthSelectProps, type DatePickerYearSelectProps, type SearchBarVariants, type SelectProps, type TimePickerProps, type TimeFormat, type TimePart, type TextareaCounterState, type RadioGroupProps, type ToggleGroupProps, type ToggleLabelProps, type ToggleDescriptionProps, } from './Forms/Inputs/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, Calendar as OxCalendar, CalendarRange as OxCalendarRange, CalendarDay as OxCalendarDay, calendarDayVariants, Combobox as OxCombobox, ComboboxCancel as OxComboboxCancel, ComboboxInput as OxComboboxInput, ComboboxChipsInput as OxComboboxChipsInput, ComboboxContent as OxComboboxContent, ComboboxItem as OxComboboxItem, ComboboxItemEdit as OxComboboxItemEdit, ComboboxEmpty as OxComboboxEmpty, ComboboxGroup as OxComboboxGroup, ComboboxSeparator as OxComboboxSeparator, ChatInput as OxChatInput, ColorPicker as OxColorPicker, ColorPickerTrigger as OxColorPickerTrigger, ColorPickerContent as OxColorPickerContent, ColorPickerSwatch as OxColorPickerSwatch, useColorPicker, IconPicker as OxIconPicker, IconPickerTrigger as OxIconPickerTrigger, IconPickerContent as OxIconPickerContent, IconPickerItem as OxIconPickerItem, useIconPicker, DatePicker as OxDatePicker, DateRangePicker as OxDateRangePicker, DatePickerTrigger as OxDatePickerTrigger, DatePickerHeader as OxDatePickerHeader, DatePickerMonthSelect as OxDatePickerMonthSelect, DatePickerYearSelect as OxDatePickerYearSelect, MonthPicker as OxMonthPicker, MonthPickerPanel as OxMonthPickerPanel, SearchBar as OxSearchBar, searchBarVariants, SearchPanel as OxSearchPanel, SearchPanelInput as OxSearchPanelInput, SearchPanelList as OxSearchPanelList, SearchPanelGroup as OxSearchPanelGroup, SearchPanelItem as OxSearchPanelItem, SearchPanelEmpty as OxSearchPanelEmpty, Select as OxSelect, SelectTrigger as OxSelectTrigger, SelectContent as OxSelectContent, SelectItem as OxSelectItem, SelectGroup as OxSelectGroup, SelectSeparator as OxSelectSeparator, TimePicker as OxTimePicker, TimePickerField as OxTimePickerField, TimePickerList as OxTimePickerList, TimePickerWheel as OxTimePickerWheel, TimePickerWheelColumn as OxTimePickerWheelColumn, Textarea as OxTextarea, RichTextEditor as OxRichTextEditor, RichTextToolbar as OxRichTextToolbar, RichTextToolbarButton as OxRichTextToolbarButton, RICH_TEXT_COMMANDS, RICH_TEXT_COMMAND_NAMES, isRichTextAdapter, oxRichTextExtensions, useRichTextAdapter, useRichTextToolbar, type RichTextAdapter, type RichTextCommand, type RichTextCommandSpec, type RichTextExtras, type RichTextSource, 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 CalendarProps, type CalendarRangeProps, type CalendarDateRange, type CalendarDayProps, type CalendarDayState, type CalendarDayVariants, type CalendarConstraints, type CalendarNav, type ComboboxProps, type ChatInputActionLabels, type ChatInputState, type ColorPickerProps, type ColorPickerContext, type IconPickerProps, type IconPickerContext, type DatePickerProps, type DateRangePickerProps, type DatePickerTriggerProps, type DatePickerHeaderProps, type DatePickerMonthSelectProps, type DatePickerYearSelectProps, type MonthPickerProps, type MonthPickerPanelProps, type SearchBarVariants, type SelectProps, type TimePickerProps, type TimeFormat, type TimePart, type TextareaCounterState, type RadioGroupProps, type ToggleGroupProps, type ToggleLabelProps, type ToggleDescriptionProps, } from './Forms/Inputs/index.ts';
 export { KpiCard as OxKpiCard, kpiCardVariants, type KpiCardVariants, } from './Data/KpiCard/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, 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';