cekat-ui 1.3.16 → 1.3.17

package/dist/index.d.mts

@@ -1,11 +1,18 @@
 import { ButtonProps as ButtonProps_2 } from 'react-aria-components';
 import { ButtonRenderProps } from 'react-aria-components';
+import { CalendarCellProps as CalendarCellProps_2 } from 'react-aria-components';
+import { CalendarDate } from '@internationalized/date';
+import { CalendarGridProps as CalendarGridProps_2 } from 'react-aria-components';
+import { CalendarProps as CalendarProps_2 } from 'react-aria-components';
 import { CellProps as CellProps_2 } from 'react-aria-components';
 import { ClassValue } from 'clsx';
 import { ColumnProps as ColumnProps_2 } from 'react-aria-components';
 import { ColumnResizerProps as ColumnResizerProps_2 } from 'react-aria-components';
 import { ComboBoxProps as ComboBoxProps_2 } from 'react-aria-components';
 import { CountryCode } from 'libphonenumber-js/min';
+import { DateDuration } from '@internationalized/date';
+import { DateFieldProps as DateFieldProps_2 } from 'react-aria-components';
+import { DateValue } from 'react-aria-components';
 import { default as default_2 } from 'react';
 import { DialogProps } from 'react-aria-components';
 import { GroupProps } from 'react-aria-components';
@@ -23,6 +30,7 @@ import { MenuTrigger } from 'react-aria-components';
 import { ModalOverlayProps } from 'react-aria-components';
 import { PopoverProps as PopoverProps_2 } from 'react-aria-components';
 import { PressEvent } from 'react-aria-components';
+import { RangeCalendarProps as RangeCalendarProps_2 } from 'react-aria-components';
 import * as React_2 from 'react';
 import { ReactNode } from 'react';
 import { ResizableTableContainerProps } from 'react-aria-components';
@@ -280,7 +288,7 @@ export declare interface BaseInputProps extends Omit<React_2.InputHTMLAttributes
     label?: string;
     required?: boolean;
     hint?: string;
-    size?: InputSize;
+    size?: DateFieldSize;
     error?: boolean;
     disabled?: boolean;
     /** Tighter padding/height/radius and a smaller semibold label, independent of `size`'s font scale. Opt-in, mirrors `Input`'s `compact`. */
@@ -395,6 +403,204 @@ export declare type ButtonTone = 'primary' | 'destructive';
 
 export declare type ButtonVariant = 'solid' | 'outline' | 'outline-primary' | 'ghost' | 'ghost-primary' | 'plain' | 'plain-black';
 
+/**
+ * Single-date calendar.
+ *
+ * Week start is locale-derived by default (`id-ID`/`en-US` Sunday-first, `en-GB` Monday-first
+ * per CLDR); pass `firstDayOfWeek="mon"` to force Figma's grid regardless of locale. See RFC
+ * Decision #7.
+ */
+export declare function Calendar<T extends DateValue>({ size, hasActivity, className, children, ...props }: CalendarProps<T>): JSX_2.Element;
+
+/**
+ * A single day cell.
+ *
+ * `Type=Today's date` (Figma `_Calendar cell` 2646:30128) maps to RAC's own `data-today`
+ * attribute — confirmed against the installed runtime, `dist/private/Calendar.mjs`, whose
+ * cell `dataAttrs` map ends with `'data-today': istoday || undefined`, and typed as `isToday`
+ * on `CalendarCellRenderProps`. No manual `isSameDay(date, today(...))` comparison is needed.
+ * (An earlier revision of the RFC claimed this prop was absent; that was a bad grep.)
+ *
+ * Figma's `Active dot` axis is driven by the parent's `hasActivity` predicate. Because RAC's
+ * `CalendarCell` takes a render function, the dot is rendered as a sibling of the date number
+ * rather than requiring a new slot — `formattedDate` still comes from RAC so locale-specific
+ * numerals are preserved.
+ */
+export declare function CalendarCell({ date, size, className, ...props }: CalendarCellProps): JSX_2.Element;
+
+export declare interface CalendarCellProps extends Omit<CalendarCellProps_2, 'className'> {
+    /** @default 'md' — inherited from the parent `Calendar` when omitted. */
+    size?: CalendarSize;
+    className?: ClassValue;
+}
+
+/**
+ * Weekday header row. RAC's `CalendarGridHeader` takes a render function receiving each day,
+ * and emits real `<th scope="col">` elements — Figma's flat `Dates` frame has no equivalent
+ * node (the weekday labels are drawn as ordinary cell instances), so this is a structure we
+ * add rather than reproduce.
+ */
+export declare function CalendarGrid({ size, className, ...props }: CalendarGridProps): JSX_2.Element;
+
+export declare interface CalendarGridProps extends Omit<CalendarGridProps_2, 'className' | 'style'> {
+    /** @default 'md' — inherited from the parent `Calendar` when omitted. */
+    size?: CalendarSize;
+    className?: ClassValue;
+}
+
+/**
+ * Month label plus previous/next buttons — Figma's `Month` frame (280×36), present in all eight
+ * panel variants.
+ *
+ * `slot="previous"`/`slot="next"` is how RAC wires these to the calendar's own paging state;
+ * they must not be given `onPress` handlers of their own.
+ *
+ * The labels are required props rather than defaulted strings. Figma renders these icon-only
+ * with no text, which is an accessibility defect we have to fix on our side, and a hardcoded
+ * English default would be wrong the moment the surrounding app runs in Indonesian — which,
+ * per RFC Decision #7, is the locale we tell consumers to set.
+ */
+export declare function CalendarHeader({ previousLabel, nextLabel, withPickers, visibleYears, offset, className, }: CalendarHeaderProps): JSX_2.Element;
+
+/**
+ * Header row: month label plus previous/next buttons. Figma `Month` frame (280×36) in
+ * every panel variant.
+ */
+export declare interface CalendarHeaderProps {
+    /**
+     * Accessible name for the previous-month button. Figma renders it icon-only with no
+     * label, so this is required rather than defaulted — an unnamed icon button is an
+     * a11y defect, and a silent English default would be wrong under a non-English locale.
+     */
+    previousLabel: string;
+    /** Accessible name for the next-month button. Required for the same reason. */
+    nextLabel: string;
+    /**
+     * Replaces the static month/year heading with month and year dropdowns, so a user can jump
+     * straight to a distant month instead of paging through it. Off by default: the Figma spec
+     * draws a plain heading, and a picker is a different (larger) header.
+     */
+    withPickers?: boolean;
+    /** Forwarded to `CalendarYearSelect` when `withPickers`. @default 20 */
+    visibleYears?: number;
+    /**
+     * Same `offset` semantics as `CalendarGrid`'s — required when this header sits above a grid
+     * that is not the calendar's first visible month (the right-hand panel of a two-month range,
+     * offset={{months: 1}}). Without it, `withPickers` would show and drive the SAME focused
+     * month as the left header, because RAC's month/year pickers read `state.focusedDate`
+     * directly with no offset of their own — see `CalendarMonthSelect`'s docstring.
+     */
+    offset?: DateDuration;
+    className?: ClassValue;
+}
+
+/**
+ * Month dropdown for the calendar header.
+ *
+ * RAC's `CalendarMonthPicker` is headless: it hands back `items` (each with an `id`, a
+ * `CalendarDate`, and a locale-`formatted` label), the current `value`, an `onChange`, and an
+ * `aria-label` — and expects us to render the control. That is what makes it composable with
+ * this library's own `Select` instead of forcing a second, differently-styled dropdown into
+ * the design system.
+ *
+ * `size="sm"` is the default rather than `md`: the header row is 36px (Figma's `Month` frame),
+ * and an `md` trigger is 44px, which would push the header taller than the spec.
+ *
+ * `offset` is required for the right-hand panel of a two-month range — see
+ * `useOffsetCalendarState`'s docstring for why RAC cannot do this on its own.
+ *
+ * Only valid inside a `Calendar`/`RangeCalendar` — it reads calendar state from context. This
+ * is bypassed by calling `useCalendarMonthPicker` ourselves against the (possibly offset) state
+ * rather than rendering RAC's `CalendarMonthPicker`, because that component always reads the
+ * un-offset context state directly and offers no way to substitute it.
+ */
+export declare function CalendarMonthSelect({ format, size, offset, className, }: CalendarMonthSelectProps): JSX_2.Element;
+
+export declare interface CalendarMonthSelectProps {
+    /**
+     * Month name format, forwarded to RAC's `useCalendarMonthPicker`.
+     * @default 'long'
+     */
+    format?: 'numeric' | '2-digit' | 'long' | 'short' | 'narrow';
+    /** @default 'sm' — the header is 36px tall, so `md` (44px) would not fit. */
+    size?: SelectSize;
+    /** See `CalendarHeaderProps.offset`. */
+    offset?: DateDuration;
+    className?: ClassValue;
+}
+
+/**
+ * `firstDayOfWeek` IS available in RAC 1.20.0 and is inherited from `RACCalendarProps` — it is
+ * deliberately not re-declared below.
+ *
+ * An earlier revision of this file and of the RFC claimed the prop was absent, and concluded
+ * that Figma's Monday-first grid was unreachable. That was wrong: the grep looked in
+ * `dist/types/` and `@react-types/`, but the prop is declared in
+ * `react-stately/dist/types/src/calendar/types.d.ts` (`CalendarPropsBase`) and consumed in
+ * `react-aria-components/dist/private/Calendar.mjs`, which reads
+ * `calenderProps?.firstDayOfWeek ?? rangeCalenderProps?.firstDayOfWeek` off context and passes
+ * it to `useCalendarGrid`.
+ *
+ * Omit it and week start follows the locale (`id-ID` and `en-US` are Sunday-first per CLDR;
+ * `en-GB` and `de-DE` are Monday-first). Pass `firstDayOfWeek="mon"` for Figma's grid
+ * regardless of locale.
+ */
+export declare interface CalendarProps<T extends DateValue> extends Omit<CalendarProps_2<T>, 'className' | 'style' | 'children'> {
+    /** @default 'md' */
+    size?: CalendarSize;
+    /**
+     * Months rendered at once. Figma's desktop dual-date panel (2646:30221) shows two;
+     * mobile (2646:30490) shows one. That difference is this prop, not a variant axis —
+     * see RFC Out-table, "`Breakpoint` variant axis".
+     * @default { months: 1 }
+     */
+    visibleDuration?: DateDuration;
+    /**
+     * Figma's `Active dot` axis — marks a day as having activity with a dot under the number.
+     * Called for every rendered cell, including days from adjacent months.
+     *
+     * A predicate rather than a date array: the library must not own an
+     * "is this date in that list" comparison, since `CalendarDate` equality is not `===` and the
+     * consumer already knows how its own data is keyed.
+     */
+    hasActivity?: (date: CalendarDate) => boolean;
+    className?: ClassValue;
+    style?: React_2.CSSProperties;
+    children?: React_2.ReactNode;
+}
+
+/**
+ * Grid density. `Input`'s scale is `'xs' | 'sm' | 'md'`, but a calendar has no meaningful
+ * `xs`: Figma draws every cell at a fixed 40×40 (`_Calendar cell` 2646:30128) and the grid
+ * at 280px (7 × 40) in all eight panel variants. `sm` is an inferred densification for
+ * table-cell contexts (`DateCell`), not a Figma-confirmed size — see `calendar.styles.ts`.
+ */
+export declare type CalendarSize = 'sm' | 'md';
+
+/**
+ * Year dropdown for the calendar header. Same headless shape and same offset handling as
+ * `CalendarMonthSelect` — see its docstring.
+ *
+ * `visibleYears` is a window centred on the currently visible year, not an absolute range — RAC
+ * recentres it as the user navigates. Constrain the actual selectable span with the calendar's
+ * own `minValue`/`maxValue` instead; those are what the grid enforces anyway, so driving it
+ * from here would let the two disagree.
+ */
+export declare function CalendarYearSelect({ visibleYears, size, offset, className, }: CalendarYearSelectProps): JSX_2.Element;
+
+export declare interface CalendarYearSelectProps {
+    /**
+     * How many years the dropdown offers, centred on the visible year.
+     * @default 20
+     */
+    visibleYears?: number;
+    /** @default 'sm' */
+    size?: SelectSize;
+    /** See `CalendarHeaderProps.offset`. */
+    offset?: DateDuration;
+    className?: ClassValue;
+}
+
 export declare type CardBrand = 'visa' | 'mastercard' | 'amex' | 'discover' | 'jcb' | 'diners' | 'unionpay';
 
 /**
@@ -626,6 +832,43 @@ export declare interface CurrencyOption {
     locale?: string;
 }
 
+/**
+ * Segmented date entry — day, month and year are separate `spinbutton`s, not one free-text
+ * input. Typing `0`,`5` in the day segment advances to month automatically; arrow keys
+ * increment; the whole field is one tab stop.
+ *
+ * There is deliberately no `displayFormat` prop (RFC Decision #4). Segment order and the
+ * separator come from the locale RAC reads via `useLocale()` — `id-ID` yields `DD/MM/YYYY`,
+ * which is 13 of the 25 formats used across cekat-dashboard. The consumer sets this once with
+ * `<I18nProvider locale="id-ID">`; the same provider is what fixes the calendar's week start
+ * (RFC Decision #7), so one piece of setup covers both.
+ *
+ * Known limitation, carried from the RFC: `MMM DD, YYYY` (3 call sites in cekat-dashboard)
+ * cannot be produced by a segmented editable field at all — a segment renders a number, not
+ * "Aug". Those sites display read-only dates, so they should render formatted text via
+ * `DateFormatter` rather than mount a `DateField`.
+ *
+ * `Group` wraps the segments so the leading `icon` and `trailing` slot are siblings of the
+ * input rather than inside it — the same shape `ComboBoxTrigger` uses.
+ */
+export declare function DateField<T extends DateValue>({ size, icon, trailing, className, style, ...props }: DateFieldProps<T>): JSX_2.Element;
+
+export declare interface DateFieldProps<T extends DateValue> extends Omit<DateFieldProps_2<T>, 'className' | 'style' | 'children'> {
+    /** Shares `Input`'s scale so the two line up when composed side by side. @default 'md' */
+    size?: DateFieldSize;
+    /** Leading ornament — icon or status dot. Mirrors `ComboBoxTrigger`'s `icon`. */
+    icon?: React_2.ReactNode;
+    /**
+     * Rendered at the end of the field, inside the border. Phase 2's `DatePicker` puts its
+     * calendar toggle button here; on its own a `DateField` has no trailing affordance.
+     */
+    trailing?: React_2.ReactNode;
+    className?: ClassValue;
+    style?: React_2.CSSProperties;
+}
+
+export declare type DateFieldSize = 'xs' | 'sm' | 'md';
+
 export declare const Dot: {
     ({ size, outline, className }: DotProps): JSX_2.Element;
     displayName: string;
@@ -754,7 +997,7 @@ declare const Input_2: default_2.ForwardRefExoticComponent<InputProps & default_
 export declare function InputCardNumber({ size, label, required, hint, error, disabled, placeholder, value, leftSlot, onChange, className, wrapperClassName, }: InputCardNumberProps): JSX_2.Element;
 
 export declare interface InputCardNumberProps {
-    size?: InputSize;
+    size?: DateFieldSize;
     label?: string;
     required?: boolean;
     hint?: string;
@@ -888,7 +1131,7 @@ export declare type InputDropdownType = 'default' | 'search' | 'tags';
 export declare function InputPhone({ size, label, required, hint, error, disabled, placeholder, value, defaultCountry, countries, onChange, className, wrapperClassName, }: InputPhoneProps): JSX_2.Element;
 
 export declare interface InputPhoneProps {
-    size?: InputSize;
+    size?: DateFieldSize;
     label?: string;
     required?: boolean;
     hint?: string;
@@ -938,7 +1181,7 @@ declare function InputPrefix({ children }: {
 export declare function InputPrice({ size, label, required, hint, error, disabled, placeholder, value, currency, currencies, onCurrencyChange, onChange, className, wrapperClassName, }: InputPriceProps): JSX_2.Element;
 
 export declare interface InputPriceProps {
-    size?: InputSize;
+    size?: DateFieldSize;
     label?: string;
     required?: boolean;
     hint?: string;
@@ -967,7 +1210,7 @@ declare interface InputProps extends Omit<React_2.InputHTMLAttributes<HTMLInputE
     required?: boolean;
     hint?: string;
     rightIcon?: React_2.ReactNode;
-    size?: InputSize;
+    size?: DateFieldSize;
     error?: boolean;
     /** Tighter padding/height/radius and a smaller semibold label, independent of `size`'s font scale. Opt-in, does not affect default styling. */
     compact?: boolean;
@@ -988,8 +1231,6 @@ declare interface InputProps extends Omit<React_2.InputHTMLAttributes<HTMLInputE
     wrapperClassName?: ClassValue;
 }
 
-declare type InputSize = 'xs' | 'sm' | 'md';
-
 declare function InputSuffix({ children }: {
     children: ReactNode;
 }): JSX_2.Element;
@@ -1378,6 +1619,40 @@ declare type RadioSize = 'sm' | 'md'
 /** @deprecated `lg` is no longer a distinct size — it now renders identically to `md` and will be removed in a future major version. Migrate to `md`. */
 | 'lg';
 
+/**
+ * Contiguous date-range calendar.
+ *
+ * `visibleDuration={{ months: 2 }}` reproduces Figma's desktop dual-date panel (2646:30221);
+ * the default single month matches mobile (2646:30490). That is a prop, not a variant axis —
+ * the `Breakpoint` axis in Figma was shown to be an authoring artifact (identical sizes and
+ * byte-identical token maps between the Desktop and Mobile single-date variants), see the RFC
+ * Out-table.
+ *
+ * Rendering two months requires two `CalendarGrid`s, the second offset — RAC does not fan a
+ * single grid out across the visible duration:
+ *
+ *   <RangeCalendar visibleDuration={{ months: 2 }}>
+ *     <CalendarHeader previousLabel="…" nextLabel="…" />
+ *     <div className="flex gap-6">
+ *       <CalendarGrid />
+ *       <CalendarGrid offset={{ months: 1 }} />
+ *     </div>
+ *   </RangeCalendar>
+ */
+export declare function RangeCalendar<T extends DateValue>({ size, hasActivity, className, children, ...props }: RangeCalendarProps<T>): JSX_2.Element;
+
+export declare interface RangeCalendarProps<T extends DateValue> extends Omit<RangeCalendarProps_2<T>, 'className' | 'style' | 'children'> {
+    /** @default 'md' */
+    size?: CalendarSize;
+    /** @default { months: 1 } */
+    visibleDuration?: DateDuration;
+    /** See `CalendarProps.hasActivity`. */
+    hasActivity?: (date: CalendarDate) => boolean;
+    className?: ClassValue;
+    style?: React_2.CSSProperties;
+    children?: React_2.ReactNode;
+}
+
 export declare const Row: <T extends object>(props: RowProps<T> & {
     ref?: React_2.Ref<HTMLTableRowElement>;
 }) => React_2.ReactElement;