@sesamehr/react-design-system 2.0.0-beta.6 → 2.0.0-beta.8

package/dist/Forms/Inputs/Calendar/date.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Mirrors `@sesame/orxata-core`'s `date.ts`. Internal — none of this is
+ * exported from the package.
+ *
+ * The Vue half also converts between the `Date` a caller speaks and the
+ * `CalendarDate` reka needs; `react-day-picker` speaks `Date` throughout, so
+ * only the part both sides need lives here.
+ */
+/**
+ * Whether `day` only appears in `month`'s grid as padding, while the month it
+ * actually belongs to has a grid of its own on screen.
+ *
+ * Every grid pads its first and last weeks with days of the neighbouring
+ * months, so with `months: 2` the 4th of April is drawn twice: once in April's
+ * grid, which owns it, and once in the tail of March's. Both copies read the
+ * same selection, so a range ending on the 4th was painted as ending in two
+ * places at once.
+ *
+ * The rule is contextual, not per-grid — "a day another visible grid owns" —
+ * which is why the visible months have to be passed in rather than inferred
+ * from `month` alone. March's *leading* days from February stay drawn when
+ * February is not on screen, and disappear when it is.
+ *
+ * With a single grid nothing else is visible to own the day, so this is always
+ * `false` and every outside day is drawn exactly as before. That is the whole
+ * reason the behaviour needs no prop: it follows from how many months are up.
+ */
+export declare function isDrawnByAnotherMonth(day: Date, month: Date, visible: readonly Date[]): boolean;

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

@@ -3,6 +3,7 @@ export { Calendar, type CalendarProps } from './Calendar.tsx';
 export { CalendarRange, type CalendarRangeProps, type CalendarDateRange, } from './CalendarRange.tsx';
 export { CalendarDay, type CalendarDayProps, type CalendarDayState, } from './CalendarDay.tsx';
 export type { CalendarConstraints } from './constraints.ts';
+export type { CalendarNav } from './nav.ts';
 /**
  * Only the range position varies here. The other five states — selected,
  * today, disabled, focused, outside — are `data-*` attributes rather than

package/dist/Forms/Inputs/Calendar/nav.d.ts

@@ -0,0 +1,34 @@
+/**
+ * What a calendar hands to whoever draws its header.
+ *
+ * `Calendar` and `CalendarRange` render no header of their own, so this is the
+ * whole of what a header can be built from — a type rather than an inline
+ * literal because `DatePickerHeader` takes it as one prop, and a header that
+ * cannot name its own argument is one every caller has to retype.
+ */
+export interface CalendarNav {
+    /** The first month on screen. */
+    month: Date;
+    /**
+     * How many month grids are on screen, which is what a step moves by. A header
+     * that names only `month` names one of several and is wrong about the rest.
+     */
+    months: number;
+    /** Page one screenful back, or forward. A screenful is `months` months. */
+    goToPrev: () => void;
+    goToNext: () => void;
+    canGoPrev: boolean;
+    canGoNext: boolean;
+    /**
+     * Jump to the month a `Date` falls in, however far away it is.
+     *
+     * Stepping cannot express "the same month next year" — twelve calls to
+     * `goToNext` only land there when `months` divides twelve, and in React they
+     * do not compound at all, since each one is computed from the month of the
+     * render that produced them. Anything that moves by more than a page needs
+     * this: `OxDatePickerMonthSelect` and `OxDatePickerYearSelect`, and any month
+     * or year list a caller builds instead. It outlived the header's year arrows,
+     * which were the first thing to need it.
+     */
+    goTo: (month: Date) => void;
+}

package/dist/Forms/Inputs/Calendar/testids.d.ts

@@ -15,11 +15,14 @@ export declare const monthTestid: (root: string, month: Date) => string;
  * `undefined` for a day borrowed from the neighbouring month, which is why the
  * `outside` argument is not optional — the caller has to have answered it.
  *
- * Such a day is drawn in a grid it does not belong to, and with `months: 2` it
- * is drawn twice: the 1st of April sits in April's grid and again in the tail
- * of March's. Giving both the same id would hand `getByTestId` two elements and
- * fail the query; giving them different ids would mean an id that does not say
- * which grid it came from. Neither is worth it for a day that is decoration —
- * a test that wants the 1st of April pins April.
+ * Such a day is drawn in a grid it does not belong to, purely as padding.
+ * Giving it an id would either collide with the id of the grid that owns it, or
+ * mean an id that does not say which grid it came from. Neither is worth it for
+ * a day that is decoration — a test that wants the 1st of April pins April.
+ *
+ * It is only drawn at all while the month that owns it has no grid on screen:
+ * see `isDrawnByAnotherMonth`. So the `outside` argument stays required, and
+ * stays the caller's to answer — the id is about which grid a day belongs to,
+ * which is a different question from whether the day is drawn.
  */
 export declare const dayTestid: (monthId: string, day: Date, outside: boolean) => string | undefined;

package/dist/Forms/Inputs/Calendar/useCalendarLocale.d.ts

@@ -6,6 +6,24 @@ export type WeekStart = 0 | 1 | 2 | 3 | 4 | 5 | 6;
  * the locale already carries the answer for every region ICU knows.
  */
 export declare const weekStartsOnFor: (locale: string) => WeekStart;
+/**
+ * How a weekday is abbreviated above its column.
+ *
+ * The design draws two letters — `Su Mo Tu` — and `Intl` has no two-letter
+ * weekday: `narrow` is one character, `short` is the locale's own abbreviation
+ * (`Sun`, `dom`, `Mo.`), `long` is the whole word. `short` is the nearest of
+ * the three and the only one that is still the locale's, so it is what both
+ * packages ask for. Trimming `short` to two characters would match the English
+ * mock and produce nonsense everywhere the abbreviation is not built that way,
+ * which is most places — and it would be this package inventing a format rather
+ * than reading one, which is the line the no-strings rule draws.
+ *
+ * Named here rather than written at each call site because reka takes it as a
+ * `weekdayFormat` prop and `react-day-picker` takes it as a formatter we write
+ * ourselves: two spellings of one decision, which is exactly the kind of thing
+ * that drifts.
+ */
+export declare const WEEKDAY_FORMAT = "short";
 /**
  * The locale the calendar formats in, and the week start that follows from it.
  *

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

@@ -0,0 +1,68 @@
+import { ReactNode } from 'react';
+import { ChatInputActionLabels, ChatInputState } from './index.ts';
+export interface ChatInputProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'defaultValue' | 'rows' | 'children' | 'onSubmit'> {
+    /**
+     * What a screen reader announces for the three default action buttons.
+     * Required, and required for the same reason `IconButton`'s `aria-label` is:
+     * a glyph is the whole control, so an unlabelled one announces as "button"
+     * and nothing else — and no default the design system could ship would be in
+     * the reader's language. One object rather than three props so that naming
+     * the buttons costs one line, not three.
+     */
+    actionLabels: ChatInputActionLabels;
+    /**
+     * How tall the surface may grow before it starts to scroll, counted in
+     * lines of text.
+     */
+    maxRows?: number;
+    /** Controlled message. Pair with `onValueChange`; omit for uncontrolled. */
+    value?: string;
+    /** Starting message when uncontrolled. */
+    defaultValue?: string;
+    /** Called on every keystroke with the next message. */
+    onValueChange?: (value: string) => void;
+    /** Enter, or the send button. Never called for an empty or whitespace value. */
+    onSubmit?: (value: string) => void;
+    /** The default add-attachment button was pressed. */
+    onAttach?: () => void;
+    /** The default microphone button was pressed. */
+    onRecord?: () => void;
+    /** The text surface. Falls back to an auto-growing textarea. */
+    children?: ReactNode | ((state: ChatInputState) => ReactNode);
+    /** A full-width band above the text surface. Renders nothing when omitted. */
+    toolbar?: ReactNode | ((state: ChatInputState) => ReactNode);
+    /** Bottom-left corner. Falls back to the add-attachment button. */
+    actionsStart?: ReactNode | ((state: ChatInputState) => ReactNode);
+    /** Bottom-right corner. Falls back to the microphone and send buttons. */
+    actionsEnd?: ReactNode | ((state: ChatInputState) => ReactNode);
+    dataTestid: string;
+}
+/**
+ * The frame around a chat composer: the box, the growth, the keyboard
+ * contract and the two action corners. Deliberately *not* an editor.
+ * Mirrors `@sesame/orxata-core` ChatInput.
+ *
+ * The text surface is `children`, and what it renders by default is a plain
+ * auto-growing `<textarea>` — so `value` is a string, and a consumer who
+ * later needs mentions or rich paste drops their own editor in without the
+ * design system taking a dependency on one. The alternative — building on a
+ * rich-text library — would put ProseMirror in front of every consumer of the
+ * package, turn `value` into HTML, and leave two different integrations to
+ * keep in step across React and Vue, for a design that has no formatting
+ * controls in it.
+ *
+ * `children`, `toolbar`, `actionsStart` and `actionsEnd` each take a node or a
+ * render prop called with `{ empty, submit }`, because the frame is the only
+ * part that knows whether the field is empty. A caller who replaces the send
+ * button keeps the empty-state refusal for free instead of re-deriving it,
+ * which is the way the two can never disagree.
+ *
+ * `className` lands on the root, which is the box; everything else a native
+ * `<textarea>` takes — `placeholder`, `name`, `disabled`, `aria-label` — falls
+ * through to the surface. That is also how every human-readable string
+ * arrives: the design system ships none of its own. Replace `children` and the
+ * fallthrough has nowhere to go — a caller supplying their own surface labels
+ * their own surface. The `ref` is the root, for the same reason `className`
+ * is.
+ */
+export declare const ChatInput: import('react').ForwardRefExoticComponent<ChatInputProps & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,46 @@
+import { ReactNode } from 'react';
+export { ChatInput } from './ChatInput.tsx';
+export type { ChatInputProps } from './ChatInput.tsx';
+/**
+ * The accessible names for the three default action buttons.
+ *
+ * A separate type rather than an inline literal so the Vue original can hold
+ * the identical shape, and so a caller can keep their copy in one place.
+ *
+ * There is no `cva` here on purpose. `ChatInput` has no variants — the design
+ * draws one box — and an empty variant map would be a thing to keep in step
+ * across two packages in exchange for nothing.
+ */
+export interface ChatInputActionLabels {
+    /** The `+` button that starts an attachment. */
+    attach: string;
+    /** The microphone button. */
+    record: string;
+    /** The send button. */
+    send: string;
+}
+/**
+ * What every slot is handed. The frame is the only part that knows whether
+ * the field is empty, so it passes that down rather than making each caller
+ * re-derive it.
+ */
+export interface ChatInputState {
+    /** The value is blank or nothing but whitespace. */
+    empty: boolean;
+    /**
+     * The whole composer is disabled. Handed over so a replaced action button
+     * goes down with the rest of it instead of staying live beside a field
+     * nobody can type in.
+     */
+    disabled: boolean;
+    /**
+     * Submits, unless `empty` or `disabled`. The same refusal the Enter key and
+     * the send button follow.
+     */
+    submit: () => void;
+}
+/**
+ * A slot: a node, or a render prop — the React translation of Vue's scoped
+ * slot.
+ */
+export type ChatInputSlot = ReactNode | ((state: ChatInputState) => ReactNode);

package/dist/Forms/Inputs/Combobox/ComboboxContent.d.ts

@@ -9,5 +9,10 @@ export interface ComboboxContentProps extends Omit<React.ComponentPropsWithoutRe
  * `@radix-ui/react-popover` provides the portal + positioning; `cmdk`'s `Command`
  * provides item filtering. A visually-hidden `CommandInput` receives the shared
  * search string so typing in the anchored input filters the list.
+ *
+ * `asChild` puts the shared `Surface` where the popover content element would
+ * be, and the shared viewport where cmdk's list would be, so a combobox and a
+ * select are the same card with the same padding by construction rather than
+ * by two stylesheets agreeing.
  */
 export declare const ComboboxContent: import('react').ForwardRefExoticComponent<ComboboxContentProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Forms/Inputs/Combobox/ComboboxGroup.d.ts

@@ -1,7 +1,11 @@
 import { CommandGroup } from 'cmdk';
 export interface ComboboxGroupProps extends React.ComponentPropsWithoutRef<typeof CommandGroup> {
-    /** Optional group heading. */
-    label?: string;
+    /**
+     * The group heading. A node rather than a string: it is the caller's word
+     * for their own category, and taking it as text would decide for them that
+     * it can only ever be text.
+     */
+    label?: React.ReactNode;
 }
 /** ComboboxGroup — a labelled set of items. */
 export declare const ComboboxGroup: import('react').ForwardRefExoticComponent<ComboboxGroupProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Forms/Inputs/Combobox/ComboboxInput.d.ts

@@ -3,7 +3,12 @@ export interface ComboboxInputProps extends Omit<React.InputHTMLAttributes<HTMLI
     placeholder?: string;
     disabled?: boolean;
     size?: InputSize;
-    /** Formats the selected value shown in the input when not actively searching. */
+    /**
+     * Overrides the text shown for the current selection. The default resolves
+     * the option's own label, so pass this only when the label is not the text:
+     * a name that comes from a server, or an option whose content is an avatar
+     * and two lines where none of them is the useful one.
+     */
     displayValue?: (value: unknown) => string;
     /** Custom trigger content (defaults to a chevron icon). */
     trigger?: React.ReactNode;

package/dist/Forms/Inputs/Combobox/ComboboxItem.d.ts

@@ -6,5 +6,9 @@ export interface ComboboxItemProps extends Omit<React.ComponentPropsWithoutRef<t
 /**
  * ComboboxItem — a selectable option, with its own check indicator.
  * Selecting commits the value through the shared context (toggles for multiple).
+ *
+ * See `SelectItem` for why the row is shared and the primitive wrapping it is
+ * not. The indicator is always passed, even while unchecked, so the space it
+ * needs is reserved once rather than appearing the moment the row is picked.
  */
 export declare const ComboboxItem: import('react').ForwardRefExoticComponent<ComboboxItemProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Forms/Inputs/Combobox/context.d.ts

@@ -21,6 +21,13 @@ export interface ComboboxContextValue {
     /** Search string driving cmdk filtering. */
     search: string;
     setSearch: (search: string) => void;
+    /**
+     * The text each option renders, keyed by the value it selects, so the field
+     * can show `Barcelona` rather than `barcelona`. See `useComboboxLabels` for
+     * why it never forgets an entry.
+     */
+    registerLabel: (value: string, label: string) => void;
+    labelFor: (value: string) => string | undefined;
 }
 export declare const ComboboxContext: import('react').Context<ComboboxContextValue | null>;
 export declare function useComboboxContext(): ComboboxContextValue;

package/dist/Forms/Inputs/Combobox/useComboboxLabels.d.ts

@@ -0,0 +1,21 @@
+export interface ComboboxLabels {
+    /** Record the text an option renders, keyed by the value it selects. */
+    register: (value: string, label: string) => void;
+    /** The recorded text for a value, or `undefined` if no option ever had it. */
+    labelFor: (value: string) => string | undefined;
+}
+/**
+ * What lets the field show `Barcelona` where the caller wrote
+ * `<OxComboboxItem value="barcelona">Barcelona</OxComboboxItem>`. Port of
+ * `core/src/Forms/Inputs/Combobox/useComboboxLabels`, where Vue's
+ * `provide`/`inject` does what this hook plus `ComboboxContext` do here.
+ *
+ * **It never forgets.** That is the whole design decision, and it is not
+ * laziness: cmdk unmounts an option that does not match the search, so typing
+ * over a selection removes the very option the field is naming. A registry that
+ * dropped a label on unmount would blank the field mid-search, which is the
+ * common case, not the edge case. The cost is a label that outlives its option,
+ * which is the best answer available and strictly better than the raw value.
+ * Entries are per-root and die with it.
+ */
+export declare function useComboboxLabels(): ComboboxLabels;

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

@@ -0,0 +1,51 @@
+import { CalendarDayState } from '../Calendar/CalendarDay.tsx';
+import { CalendarConstraints } from '../Calendar/constraints.ts';
+/**
+ * A field that shows the chosen day and opens a calendar to change it. Mirrors
+ * `@sesame/orxata-core` DatePicker.
+ *
+ * This is `OxCalendar` plus the three things a calendar deliberately refuses to
+ * own: a control to hang off, a popover to live in, and the opinionated header
+ * — the month and an arrow at each end — that an embedded calendar would have to
+ * strip. Nothing here reimplements any of them; `OxPopover`, `OxCalendar` and
+ * `OxDatePickerTrigger` do the work.
+ *
+ * Same date contract as the calendar: a `Date` at the boundary means the
+ * calendar day formed by its local year, month and day. The time is ignored on
+ * the way in and is local midnight on the way out.
+ *
+ * It ships no strings. The trigger shows the day formatted by `Intl` in the
+ * locale `LocaleProvider` publishes, and shows nothing at all until one is
+ * picked — a placeholder is words, so it is `children`'s to supply.
+ */
+export interface DatePickerProps extends Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className'> {
+    /** The chosen day, or `undefined` for none. Controlled. */
+    value?: Date;
+    /** The initially chosen day, for the uncontrolled case. */
+    defaultValue?: Date;
+    onValueChange?: (value: Date | undefined) => void;
+    /** How many month grids the popover shows. */
+    months?: number;
+    /** What can be picked, and where navigation stops. Passed straight through. */
+    constraints?: CalendarConstraints;
+    disabled?: boolean;
+    /**
+     * What the trigger shows. Falls back to the day 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;
+    /** One day in the grid. Handed to `OxCalendar` untouched. */
+    day?: (props: {
+        date: Date;
+        state: CalendarDayState;
+    }) => React.ReactNode;
+    dataTestid: string;
+}
+export declare const DatePicker: {
+    ({ className, value, defaultValue, onValueChange, months, constraints, disabled, children, icon, day, dataTestid, }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

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

@@ -0,0 +1,65 @@
+import { CalendarConstraints } from '../Calendar/constraints.ts';
+import { CalendarNav } from '../Calendar/nav.ts';
+export interface DatePickerHeaderProps {
+    /** Everything the calendar's `header` render prop hands over, passed in. */
+    nav: CalendarNav;
+    /**
+     * The same object the calendar was given. Published to `children` rather than
+     * read here: the year selector offers the years `from` and `to` allow, which
+     * `canGoPrev` and `canGoNext` cannot answer for.
+     */
+    constraints?: CalendarConstraints;
+    /**
+     * What sits between the arrows. Falls back to the months on screen, named by
+     * `Intl`. Fill it with the two selectors to get the design's month-and-year
+     * variant, or with anything else that should be centred there.
+     */
+    children?: React.ReactNode;
+    dataTestid: string;
+}
+/**
+ * The header `Calendar` deliberately does not draw: one arrow at each end, and
+ * whatever names the months between them. Mirrors `@sesame/orxata-core`
+ * DatePickerHeader.
+ *
+ * It exists as its own component because the two pickers share it and because
+ * an embedded `OxCalendar` can wear it too —
+ *
+ * ```tsx
+ * <OxCalendar
+ *   header={nav => <OxDatePickerHeader nav={nav} dataTestid="calendar-header" />}
+ * />
+ * ```
+ *
+ * **Two arrows, not four.** There used to be a year jump at each end as well,
+ * because stepping a month at a time is no way to reach a birth year. The
+ * design answers that with a pair of dropdowns instead, which is both a shorter
+ * journey and one that says where it is going — so the outer arrows are gone
+ * and `OxDatePickerMonthSelect` / `OxDatePickerYearSelect` go in `children`:
+ *
+ * ```tsx
+ * <OxDatePickerHeader nav={nav} constraints={constraints} dataTestid="head">
+ *   <OxDatePickerMonthSelect dataTestid="head-month" />
+ *   <OxDatePickerYearSelect dataTestid="head-year" />
+ * </OxDatePickerHeader>
+ * ```
+ *
+ * `nav.goTo` survives the loss of the year arrows and is now what the selectors
+ * run on: stepping cannot express "the same month in 1974", and in React it
+ * cannot even accumulate — each `goToNext` is computed from the month of the
+ * render that produced it.
+ *
+ * **An arrow is absent, not disabled, when there is nothing that way.** The
+ * design has two independent show/hide axes for them and draws no disabled
+ * state, and `canGoPrev` / `canGoNext` already say exactly when a step is
+ * possible — so they drive presence rather than a second boolean the caller
+ * would have to keep in step with `constraints`.
+ *
+ * It ships no strings. The title is `Intl`'s, and each arrow announces the
+ * month it would move to, which is a date the locale formats rather than a
+ * phrase we would have to translate.
+ */
+export declare const DatePickerHeader: {
+    ({ nav, constraints, children, dataTestid, }: DatePickerHeaderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

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

@@ -0,0 +1,27 @@
+export interface DatePickerMonthSelectProps {
+    dataTestid: string;
+}
+/**
+ * The month half of the design's "Month and Year Selector" header. Goes in
+ * `OxDatePickerHeader`'s `children`, beside `OxDatePickerYearSelect`. Mirrors
+ * `@sesame/orxata-core` DatePickerMonthSelect.
+ *
+ * It reads the visible month and the bounds out of the header's context rather
+ * than taking them as props: they are the header's already, and a part that
+ * asked for them again would put `nav` on the public API of every piece of a
+ * header a caller assembles.
+ *
+ * Twelve options, named by `Intl` in the locale `LocaleProvider` publishes —
+ * this ships no month names of its own. A month the bounds put out of reach is
+ * offered and disabled rather than dropped, so the list is the same twelve rows
+ * in the same order whatever the constraints say.
+ *
+ * The trigger carries no `aria-label`, and that is the no-strings rule rather
+ * than an oversight: the only honest label would be the word "month" in the
+ * user's language, which this package does not have. What it announces is its
+ * role and its value, and its value is the month it is showing.
+ */
+export declare const DatePickerMonthSelect: {
+    ({ dataTestid, }: DatePickerMonthSelectProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

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

@@ -0,0 +1,29 @@
+export interface DatePickerTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Nothing chosen yet. Dims the content and marks the button
+     * `data-placeholder`, the flag `OxSelectTrigger` already uses for the same
+     * state — so the styling is a boolean and not a second slot.
+     */
+    empty?: boolean;
+    /** The trailing glyph. Falls back to a calendar. */
+    icon?: React.ReactNode;
+    dataTestid: string;
+}
+/**
+ * The closed control both pickers hang off: what is chosen on one side, a
+ * calendar glyph on the other. Mirrors `@sesame/orxata-core` DatePickerTrigger.
+ *
+ * It is one component and not two copies because the alternative is two
+ * stylesheets describing the same control. That is exactly how `OxSelect` and
+ * `OxCombobox` came to disagree about a radius, a border and a background, and
+ * the fix cost more than the component.
+ *
+ * It takes no size prop: height and radius come from the `--controller-*`
+ * variables every input in the package reads, so `inputSizeClass[size]` on any
+ * ancestor sizes it. Its declarations are `OxSelectTrigger`'s, so the two sit
+ * level in one form.
+ *
+ * It shows what it is given and formats nothing. A date is a date in a locale,
+ * and the picker above it is the one holding the locale.
+ */
+export declare const DatePickerTrigger: import('react').ForwardRefExoticComponent<DatePickerTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,25 @@
+export interface DatePickerYearSelectProps {
+    dataTestid: string;
+}
+/**
+ * The year half of the design's "Month and Year Selector" header. Goes in
+ * `OxDatePickerHeader`'s `children`, beside `OxDatePickerMonthSelect`. Mirrors
+ * `@sesame/orxata-core` DatePickerYearSelect.
+ *
+ * This is what replaced the header's year arrows. Stepping a year at a time is
+ * no way to reach a birth year, and it was the arrows' only justification; a
+ * list says where it is going and gets there in one move.
+ *
+ * **Which years it offers.** Exactly the ones `constraints` allows, when there
+ * are constraints — that is the only statement about reachable dates this
+ * package will believe. With none, there is no bound to read and any window is
+ * a guess, so it takes the documented default in `month.ts`: deep enough behind
+ * the visible year to hold a date of birth, shallow enough ahead to stay a
+ * list. A caller who wants another window passes `constraints`.
+ *
+ * No `aria-label`, for the reason `OxDatePickerMonthSelect` gives.
+ */
+export declare const DatePickerYearSelect: {
+    ({ dataTestid, }: DatePickerYearSelectProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

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

@@ -0,0 +1,61 @@
+import { CalendarDayState } from '../Calendar/CalendarDay.tsx';
+import { CalendarDateRange } from '../Calendar/CalendarRange.tsx';
+import { CalendarConstraints } from '../Calendar/constraints.ts';
+/**
+ * A field that shows the chosen span and opens a range calendar to change it.
+ * Mirrors `@sesame/orxata-core` DateRangePicker.
+ *
+ * A sibling of `OxDatePicker` with its own API, the same way `OxCalendarRange`
+ * is a sibling of `OxCalendar` — not a mode of it.
+ *
+ * Two months by default, because a span usually crosses one. The trigger shows
+ * the span collapsed the way the locale collapses one (`12–15 mar 2026`), from
+ * `Intl.DateTimeFormat.formatRange` where the runtime has it.
+ *
+ * There is an `aside` render prop beside the grids and nothing in it. Presets
+ * are the obvious thing to put there, and they are entirely the caller's: the
+ * design system ships no list, no exported constant of one, and no function
+ * that knows what "this week" means. It lays the column out and hands over
+ * `select`, which sets the span and closes the popover — whether the column
+ * holds shortcuts, a legend or a summary is not this component's business.
+ */
+export interface DateRangePickerProps extends Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className'> {
+    /** The chosen span. Either end may be absent while one is being picked. */
+    value?: CalendarDateRange;
+    /** The initially chosen span, for the uncontrolled case. */
+    defaultValue?: CalendarDateRange;
+    onValueChange?: (value: CalendarDateRange) => void;
+    /** How many month grids the popover shows. */
+    months?: number;
+    /** What can be picked, and where navigation stops. Passed straight through. */
+    constraints?: CalendarConstraints;
+    disabled?: boolean;
+    /**
+     * What the trigger shows. Falls back to the span from `Intl`, and to nothing
+     * while neither end is chosen — pass one to put a placeholder there.
+     */
+    children?: (state: {
+        value: CalendarDateRange | undefined;
+    }) => React.ReactNode;
+    /** The trailing glyph. Falls back to a calendar. */
+    icon?: React.ReactNode;
+    /**
+     * A column beside the grids. Receives `select`, which sets the span and
+     * closes the popover in one call — so whatever goes in here behaves like a
+     * second click. Not called until you pass one, and the column is not drawn at
+     * all until then.
+     */
+    aside?: (state: {
+        select: (value: CalendarDateRange) => void;
+    }) => React.ReactNode;
+    /** One day in the grid. Handed to `OxCalendarRange` untouched. */
+    day?: (props: {
+        date: Date;
+        state: CalendarDayState;
+    }) => React.ReactNode;
+    dataTestid: string;
+}
+export declare const DateRangePicker: {
+    ({ className, value, defaultValue, onValueChange, months, constraints, disabled, children, icon, aside, day, dataTestid, }: DateRangePickerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

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

@@ -0,0 +1,44 @@
+/**
+ * How a picker writes a date down.
+ *
+ * Everything here goes through `Intl` and the tag `LocaleProvider` publishes,
+ * so the design system ships no strings: the only characters it contributes are
+ * the separator a runtime too old for `formatRange` never gets from CLDR.
+ * Internal — none of it is exported from the package, because a caller who
+ * wants a different format fills the trigger slot with their own.
+ */
+/** One day, in the locale's medium form — `12 mar 2026`, `Mar 12, 2026`. */
+export declare const formatDay: (locale: string, date: Date) => string;
+/**
+ * A span, collapsed the way the locale collapses one: `12–15 mar 2026` rather
+ * than the two ends spelled out in full.
+ *
+ * A half-made span is the start alone. It is not an error state — it is the
+ * moment between the two clicks, and `CalendarDateRange` makes both ends
+ * optional precisely so it can be shown.
+ */
+export declare const formatDayRange: (locale: string, start: Date | undefined, end: Date | undefined) => string;
+/**
+ * The month a header names, and what its navigation announces.
+ *
+ * Capitalisation is left to CSS: `Intl` lowercases the month in Spanish and
+ * capitalises it in English, and uppercasing it here would be the design system
+ * overruling the locale in the one place it has no business doing so.
+ */
+export declare const formatMonthYear: (locale: string, month: Date) => string;
+/**
+ * The months on screen when there is more than one of them — `March – April
+ * 2026`, with the year said once where the locale says it once.
+ */
+export declare const formatMonthYearRange: (locale: string, first: Date, last: Date) => string;
+/** The year alone, for the year selector's options and its current value. */
+export declare const formatYear: (locale: string, month: Date) => string;
+/**
+ * The month alone and abbreviated — `Jan`, `ene`, `1月` — which is what the
+ * month selector shows and what the design draws in it.
+ *
+ * `Intl` and not a table of our own, for the reason `Calendar` spells out: the
+ * names belong to the runtime's locale, not to a translation this package would
+ * have to carry.
+ */
+export declare const formatMonthShort: (locale: string, month: Date) => string;

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

@@ -0,0 +1,6 @@
+export { DatePicker, type DatePickerProps } from './DatePicker.tsx';
+export { DateRangePicker, type DateRangePickerProps, } from './DateRangePicker.tsx';
+export { DatePickerTrigger, type DatePickerTriggerProps, } from './DatePickerTrigger.tsx';
+export { DatePickerHeader, type DatePickerHeaderProps, } from './DatePickerHeader.tsx';
+export { DatePickerMonthSelect, type DatePickerMonthSelectProps, } from './DatePickerMonthSelect.tsx';
+export { DatePickerYearSelect, type DatePickerYearSelectProps, } from './DatePickerYearSelect.tsx';