@pushwoosh/dumb-components 1.1.148 → 1.1.150

package/Calendar/helpers.js

@@ -32,12 +32,14 @@ export const formatStruct = (ds, template) => {
     return value !== undefined ? formatTwoDigitNumber(value) : match;
   });
 };
+/** Returns a new struct with `value` units of `period` added (negative to subtract); rolls over correctly. */
 export const addPeriod = (ds, period, value) => {
   const date = createUTCDate(ds.year, ds.month, ds.day, ds.hour, ds.minute, ds.second);
   const method = periodMethodMap[period];
   date[`setUTC${method}`](date[`getUTC${method}`]() + value);
   return utcDateToStruct(date);
 };
+/** Narrows a {@link DateTimeStruct} to a date-only {@link DateStruct} (drops the time fields). */
 export const pickDateStruct = date => {
   return {
     year: date.year,
@@ -80,6 +82,7 @@ export const isSamePeriod = (ds1, ds2, period) => {
   }
   return true;
 };
+/** Compares two structs chronologically: `-1` if `ds1 < ds2`, `0` if equal, `1` if `ds1 > ds2`. */
 export const compareStructs = (ds1, ds2) => {
   const date1 = createUTCDate(ds1.year, ds1.month, ds1.day, ds1.hour, ds1.minute, ds1.second);
   const date2 = createUTCDate(ds2.year, ds2.month, ds2.day, ds2.hour, ds2.minute, ds2.second);
@@ -108,12 +111,14 @@ export const getLastDayOfMonth = date => {
   d.setUTCDate(0);
   return utcDateToStruct(d);
 };
+/** Returns the start of the given `period` containing `date` (e.g. first instant of the month). */
 export const getPeriodStart = (date, period) => {
   const idx = allPeriods.indexOf(period);
   const values = allPeriods.slice(0, idx + 1).map(period => date[period] || 0);
   const dateObj = createUTCDate(...values);
   return utcDateToStruct(dateObj);
 };
+/** Returns the last instant of the given `period` containing `date` (e.g. 23:59:59.999 of the day). */
 export const getPeriodEnd = (date, period) => {
   const idx = allPeriods.indexOf(period);
   const values = allPeriods.slice(0, idx + 1).map(period => date[period] || 0);
@@ -123,10 +128,12 @@ export const getPeriodEnd = (date, period) => {
   dateObj.setMilliseconds(-1);
   return utcDateToStruct(dateObj);
 };
+/** Converts a `Date` to a {@link DateTimeStruct} shifted by `tzOffsetMinutes` (minutes east of UTC). */
 export const dateToStruct = (date, tzOffsetMinutes) => {
   const localTime = new Date(date.getTime() + tzOffsetMinutes * 60_000);
   return utcDateToStruct(localTime);
 };
+/** Converts a struct back to a `Date`, interpreting it as a wall-clock time `tzOffsetMinutes` east of UTC. */
 export const structToDate = (ds, tzOffsetMinutes) => {
   const hour = ds.hour ?? 0;
   const minute = ds.minute ?? 0;
@@ -135,6 +142,7 @@ export const structToDate = (ds, tzOffsetMinutes) => {
   const utcTime = Date.UTC(ds.year, ds.month - 1, ds.day, hour, minute, second, millisecond);
   return new Date(utcTime - tzOffsetMinutes * 60_000);
 };
+/** Returns the offset in minutes (east of UTC) for an IANA `timezoneName` at the given instant `at`. */
 export function getTimezoneOffset(timezoneName, at = new Date()) {
   var _parts$find, _parts$find2, _parts$find3, _parts$find4, _parts$find5, _parts$find6;
   const dtf = new Intl.DateTimeFormat('en-US', {
@@ -157,10 +165,12 @@ export function getTimezoneOffset(timezoneName, at = new Date()) {
   const asUTC = Date.UTC(y, mo, d, h, mi, s);
   return Math.round((asUTC - at.getTime()) / 60000);
 }
+/** Like {@link dateToStruct} but resolves the offset from an IANA `tzName` (handles DST). */
 export const dateToStructTz = (date, tzName) => {
   const tzOffsetMinutes = getTimezoneOffset(tzName, date);
   return dateToStruct(date, tzOffsetMinutes);
 };
+/** Like {@link structToDate} but resolves the offset from an IANA `tzName` (handles DST). */
 export const structToDateTz = (ds, tzName) => {
   const hour = ds.hour ?? 0;
   const minute = ds.minute ?? 0;

package/Calendar/types.d.ts

@@ -1,19 +1,34 @@
+/** A calendar granularity unit, from `year` down to `millisecond`. */
 export type Period = 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second' | 'millisecond';
+/** Calendar-agnostic date (1-based `month`), used across the Calendar helpers and components. */
 export type DateStruct = {
+    /** Full year, e.g. 2026. */
     year: number;
+    /** Month, 1–12 (1-based, unlike the native `Date`). */
     month: number;
+    /** Day of month, 1–31. */
     day: number;
 };
+/** {@link DateStruct} extended with a time-of-day down to milliseconds. */
 export type DateTimeStruct = {
+    /** Full year, e.g. 2026. */
     year: number;
+    /** Month, 1–12 (1-based). */
     month: number;
+    /** Day of month, 1–31. */
     day: number;
+    /** Hour, 0–23. */
     hour: number;
+    /** Minute, 0–59. */
     minute: number;
+    /** Second, 0–59. */
     second: number;
+    /** Millisecond, 0–999. */
     millisecond: number;
 };
+/** A single selected value of type `T`. */
 export type SingleValue<T> = T;
+/** A range selection: `[from, to]`, a partial `[from]`, or empty `[]`. */
 export type RangeValue<T> = [from: T, to: T] | [from: T] | [];
-/** Тип для значения часового пояса (IANA-название). */
+/** A timezone value as an IANA name (e.g. `"Europe/Berlin"`). */
 export type TzValue = string;

package/CardMetric/CardMetric.d.ts

@@ -1,3 +1,10 @@
 import { type ReactElement } from 'react';
 import type { CardMetricProps } from './types';
+/**
+ * Dashboard metric card with a title, primary/secondary values, optional tooltip,
+ * loading state and collapsible body.
+ *
+ * @example
+ * <CardMetric title="Sent" metric={1280} extraMetric="+12%" tooltip="Last 24h" />
+ */
 export declare function CardMetric({ view, focus, title, tooltip, description, loading, collapse, metric, extraMetric, extraMetricColor, headerExtra, children, ...otherProps }: CardMetricProps): ReactElement;

package/CardMetric/CardMetric.js

@@ -6,6 +6,13 @@ import { Spinner } from '../Spinner';
 import { Tooltip } from '../Tooltip';
 import { CardChildren } from './CardChildren';
 import { CardContainer, CardHeader, CardTitle, CardInfo, CardMetricValue, CardExtraMetric, CardDescription, CardHeaderLeft } from './styles';
+/**
+ * Dashboard metric card with a title, primary/secondary values, optional tooltip,
+ * loading state and collapsible body.
+ *
+ * @example
+ * <CardMetric title="Sent" metric={1280} extraMetric="+12%" tooltip="Last 24h" />
+ */
 export function CardMetric({
   view = 'rounded',
   focus = false,

package/CardMetric/types.d.ts

@@ -1,18 +1,31 @@
 import type { ReactElement, ReactNode } from 'react';
+/** Props of {@link CardMetric}. */
 export type CardMetricProps = {
+    /** Visual style: `rounded` (default) or `stacking`. */
     view?: 'rounded' | 'stacking';
+    /** Apply the focused (highlighted) styling. */
     focus?: boolean;
+    /** Card title. */
     title?: string | ReactElement;
+    /** Help text shown via an info tooltip next to the title. */
     tooltip?: string;
+    /** Show a spinner in place of the metric value. */
     loading?: boolean;
+    /** Enable collapsing; `isCollapsed` sets the initial collapsed state. */
     collapse?: {
         isCollapsed: boolean;
     };
+    /** Footer description text. */
     description?: string;
+    /** Primary metric value. */
     metric?: string | number;
+    /** Secondary metric shown next to the primary one. */
     extraMetric?: string | number;
+    /** Color of the secondary metric. */
     extraMetricColor?: string;
+    /** Extra content on the right of the header. */
     headerExtra?: ReactElement;
+    /** Additional props forwarded to the card container. */
     [key: string]: any;
 };
 export type CardContainerProps = {

package/Checkbox/Checkbox.d.ts

@@ -1,3 +1,9 @@
 import { type ReactElement } from 'react';
 import type { CheckboxProps } from './types';
+/**
+ * Labelled checkbox with error and indeterminate states and an optional help tooltip.
+ *
+ * @example
+ * <Checkbox label="I agree" isChecked={agreed} onChange={setAgreed} />
+ */
 export declare function Checkbox(props: CheckboxProps): ReactElement;

package/Checkbox/Checkbox.js

@@ -5,6 +5,12 @@ import { Horizontal } from '@pushwoosh/kit-helpers';
 import { NativeLabel, NativeCheckbox } from './styles';
 import { TooltipTrigger } from '../Tooltip';
 let counter = 0;
+/**
+ * Labelled checkbox with error and indeterminate states and an optional help tooltip.
+ *
+ * @example
+ * <Checkbox label="I agree" isChecked={agreed} onChange={setAgreed} />
+ */
 export function Checkbox(props) {
   const {
     label,

package/Checkbox/types.d.ts

@@ -1,15 +1,28 @@
 import type { ReactNode } from 'react';
+/** Visual state of a {@link Checkbox}: `normal` or `error` (red). */
 export type CheckboxType = 'normal' | 'error';
+/** Props of {@link Checkbox}. */
 export type CheckboxProps = {
+    /** Label rendered next to the box. */
     label?: ReactNode;
+    /** Explicit element id; auto-generated when omitted. */
     id?: string;
+    /** Form field name. */
     name?: string;
+    /** Form field value submitted when checked. */
     value?: string | number;
+    /** Visual state: `normal` (default) or `error`. */
     type?: CheckboxType;
+    /** Checked state (controlled). */
     isChecked?: boolean;
+    /** Disable interaction and render the disabled state. */
     isDisabled?: boolean;
+    /** Render the indeterminate (partial) state — visual only, doesn't affect `isChecked`. */
     isIndeterminate?: boolean;
+    /** Help text shown via a question-mark tooltip next to the checkbox. */
     tooltip?: string;
+    /** CSS color override for the checked box. */
     activeCheckboxColor?: string;
+    /** Fires with the new checked state on toggle. */
     onChange?: (checked: boolean) => void;
 };

package/Chip/Chip.d.ts

@@ -1,3 +1,10 @@
+/**
+ * Compact tag/filter pill with color variants, an optional leading icon, a close
+ * button or a help tooltip, and ellipsis truncation via `$maxWidth`.
+ *
+ * @example
+ * <Chip $variant="primary" $onClose={() => remove(tag)}>{tag}</Chip>
+ */
 export declare const Chip: import("react").ForwardRefExoticComponent<{
     $variant?: import("./Chip.types").ChipVariant;
     $selected?: boolean;

package/Chip/Chip.js

@@ -2,6 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { TooltipTrigger } from '../Tooltip';
 import { ChipCloseIcon, ChipLabel, ChipSlotIcon, ChipStyled } from './styles';
+/**
+ * Compact tag/filter pill with color variants, an optional leading icon, a close
+ * button or a help tooltip, and ellipsis truncation via `$maxWidth`.
+ *
+ * @example
+ * <Chip $variant="primary" $onClose={() => remove(tag)}>{tag}</Chip>
+ */
 export const Chip = forwardRef(({
   $variant = 'primary',
   $selected,

package/Chip/Chip.types.d.ts

@@ -1,13 +1,22 @@
 import { type HTMLAttributes, type PropsWithChildren, type ReactNode } from 'react';
+/** Color variant of a {@link Chip}. */
 export type ChipVariant = 'primary' | 'danger' | 'warning';
+/** Props of {@link Chip} — all `<div>` attributes plus the chip-specific ones. */
 export type ChipProps = PropsWithChildren<{
+    /** Color variant (default `primary`). */
     $variant?: ChipVariant;
+    /** Render the selected (highlighted) state. */
     $selected?: boolean;
+    /** When set (and not `$readOnly`), shows a close (✕) button; called on its click. */
     $onClose?: HTMLAttributes<HTMLDivElement>['onClick'];
+    /** Read-only chip — disables the close button (`$onClose` is ignored). */
     $readOnly?: boolean;
     /** CSS max-width value, e.g. "120px", "50%", "10rem". Enables label truncation with ellipsis. */
     $maxWidth?: string;
+    /** Leading icon. */
     $icon?: ReactNode;
+    /** Help tooltip shown via a trailing question-mark icon (only when not closeable). */
     $tooltip?: ReactNode;
+    /** Render as a different element/tag. */
     as?: string;
 }> & HTMLAttributes<HTMLDivElement>;

package/CodeEditor/CodeEditor.d.ts

@@ -1,2 +1,9 @@
 import { type CodeEditorProps } from './types';
+/**
+ * CodeMirror-based code editor with theming, read-only and error states.
+ * Provide a language through `extensions` (see the exported `html`, `liquid`, `json` helpers).
+ *
+ * @example
+ * <CodeEditor value={code} extensions={json} onChange={setCode} height="200px" />
+ */
 export declare const CodeEditor: ({ value, onChange, readOnly, width, height, onBlur, extensions, themeOptions, hasError, placeholder, }: CodeEditorProps) => import("react/jsx-runtime").JSX.Element;

package/CodeEditor/CodeEditor.js

@@ -2,6 +2,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import createTheme from '@uiw/codemirror-themes';
 import { defaultTheme } from './constants';
 import { CodeMirrorStyled } from './styles';
+/**
+ * CodeMirror-based code editor with theming, read-only and error states.
+ * Provide a language through `extensions` (see the exported `html`, `liquid`, `json` helpers).
+ *
+ * @example
+ * <CodeEditor value={code} extensions={json} onChange={setCode} height="200px" />
+ */
 export const CodeEditor = ({
   value,
   onChange,

package/CodeEditor/languages/html.d.ts

@@ -1 +1,2 @@
+/** CodeMirror extension enabling HTML syntax in {@link CodeEditor} — pass as `extensions={html}`. */
 export declare const html: import("@codemirror/language").LanguageSupport[];

package/CodeEditor/languages/html.js

@@ -1,2 +1,3 @@
 import { html as createHtml } from '@codemirror/lang-html';
+/** CodeMirror extension enabling HTML syntax in {@link CodeEditor} — pass as `extensions={html}`. */
 export const html = [createHtml()];

package/CodeEditor/languages/json.d.ts

@@ -1 +1,2 @@
+/** CodeMirror extension enabling JSON syntax in {@link CodeEditor} — pass as `extensions={json}`. */
 export declare const json: import("@codemirror/language").LanguageSupport[];

package/CodeEditor/languages/json.js

@@ -1,2 +1,3 @@
 import { json as createJson } from '@codemirror/lang-json';
+/** CodeMirror extension enabling JSON syntax in {@link CodeEditor} — pass as `extensions={json}`. */
 export const json = [createJson()];

package/CodeEditor/languages/liquid.d.ts

@@ -1 +1,2 @@
+/** CodeMirror extension enabling Liquid syntax in {@link CodeEditor} — pass as `extensions={liquid}`. */
 export declare const liquid: import("@codemirror/language").LanguageSupport[];

package/CodeEditor/languages/liquid.js

@@ -1,2 +1,3 @@
 import { liquid as createLiquid } from '@codemirror/lang-liquid';
+/** CodeMirror extension enabling Liquid syntax in {@link CodeEditor} — pass as `extensions={liquid}`. */
 export const liquid = [createLiquid()];

package/CodeEditor/types.d.ts

@@ -1,14 +1,25 @@
 import { type CreateThemeOptions } from '@uiw/codemirror-themes';
 import { type ViewUpdate, type Extension } from '@uiw/react-codemirror';
+/** Props of {@link CodeEditor}. */
 export type CodeEditorProps = {
+    /** Editor content (controlled). */
     value: string;
+    /** Render read-only (no editing). */
     readOnly?: boolean;
+    /** CSS width of the editor. */
     width?: string;
+    /** CSS height of the editor. */
     height?: string;
+    /** Render the error (red) state. */
     hasError?: boolean;
+    /** CodeMirror extensions — pass a language (e.g. `html`, `liquid`, `json`) and any addons. */
     extensions: Extension[];
+    /** Placeholder shown when empty. */
     placeholder?: string;
+    /** Theme overrides; defaults to the built-in theme when omitted. */
     themeOptions?: CreateThemeOptions;
+    /** Fires with the new content and the CodeMirror `ViewUpdate` on every edit. */
     onChange?: (value: string, viewUpdate: ViewUpdate) => void;
+    /** Fires when the editor loses focus. */
     onBlur?: () => void;
 };

package/CrashScreen/CrashScreen.d.ts

@@ -1,2 +1,6 @@
 import { type ReactElement } from 'react';
+/**
+ * Full-page fallback shown when the app crashes (e.g. from an error boundary), with
+ * a warning icon and localized title/description.
+ */
 export declare function CrashScreen(): ReactElement;

package/CrashScreen/CrashScreen.js

@@ -3,6 +3,10 @@ import { Color } from '@pushwoosh/kit-constants';
 import { WarningRoundIcon } from '@pushwoosh/kit-icons';
 import { Lang } from './polyglot';
 import { RootBox, IconBox, TitleBox, DescriptionBox } from './styles';
+/**
+ * Full-page fallback shown when the app crashes (e.g. from an error boundary), with
+ * a warning icon and localized title/description.
+ */
 export function CrashScreen() {
   return _jsxs(RootBox, {
     children: [_jsx(IconBox, {

package/DateTimePicker/components/DatePicker/DatePicker.d.ts

@@ -1,3 +1,8 @@
 import { type ReactElement } from 'react';
 import type { DatePickerProps } from './types';
+/**
+ * Inline calendar with month/year/decade views for picking a date.
+ *
+ * @deprecated Use `CalendarDropdown` or `CalendarSuperForm` from Calendar instead.
+ */
 export declare function DatePicker(props: DatePickerProps): ReactElement;

package/DateTimePicker/components/DatePicker/DatePicker.js

@@ -6,6 +6,11 @@ import { CalendarBox } from '../../styles';
 import { DecadeView } from '../DecadeView';
 import { MonthView } from '../MonthView';
 import { YearView } from '../YearView';
+/**
+ * Inline calendar with month/year/decade views for picking a date.
+ *
+ * @deprecated Use `CalendarDropdown` or `CalendarSuperForm` from Calendar instead.
+ */
 export function DatePicker(props) {
   const {
     value,

package/DateTimePicker/components/DatePicker/types.d.ts

@@ -1,11 +1,20 @@
 import type { ReactNode } from 'react';
+/** Props of {@link DatePicker}. */
 export interface DatePickerProps {
+    /** Currently selected date string. */
     value?: string;
+    /** Externally driven day that resets the visible month and view. */
     userInputDay?: string;
+    /** Earliest selectable date. */
     minDate?: Date | string;
+    /** Latest selectable date. */
     maxDate?: Date | string;
+    /** Disable selection. */
     isDisabled?: boolean;
+    /** Render extra content under the month grid (e.g. time inputs). */
     slotAfterMonth?: () => ReactNode | null;
+    /** Fires with the picked day string. */
     onChange: (day: string) => void;
 }
+/** Calendar view level: day grid, month grid or decade grid. */
 export type ViewType = 'month' | 'year' | 'decade';

package/DateTimePicker/components/DatePickerField/DatePickerField.d.ts

@@ -1,3 +1,8 @@
 import { type ReactElement } from 'react';
 import type { DatePickerFieldProps } from './types';
+/**
+ * Read-only field showing the selected date that opens a {@link DatePicker} popover on click.
+ *
+ * @deprecated Use `CalendarDropdown` or `CalendarSuperForm` from Calendar instead.
+ */
 export declare function DatePickerField(props: DatePickerFieldProps): ReactElement;

package/DateTimePicker/components/DatePickerField/DatePickerField.js

@@ -6,6 +6,11 @@ import { format, monthName, get } from '../../helpers';
 import { Lang } from '../../polyglot';
 import { InputFrame } from '../../styles';
 import { DatePicker } from '../DatePicker';
+/**
+ * Read-only field showing the selected date that opens a {@link DatePicker} popover on click.
+ *
+ * @deprecated Use `CalendarDropdown` or `CalendarSuperForm` from Calendar instead.
+ */
 export function DatePickerField(props) {
   const {
     value,

package/DateTimePicker/components/DatePickerField/types.d.ts

@@ -1,11 +1,20 @@
 import type { Placement } from '@floating-ui/react-dom';
+/** Props of {@link DatePickerField}. */
 export interface DatePickerFieldProps {
+    /** Currently selected date string. */
     value: string;
+    /** Earliest selectable date. */
     minDate?: Date | string;
+    /** Latest selectable date. */
     maxDate?: Date | string;
+    /** Render the field in the error state. */
     error?: boolean;
+    /** Allowed floating placements for the popover (default bottom/top start/end). */
     allowedPlacements?: Placement[];
+    /** Popover z-index (default `1000`). */
     zIndex?: number;
+    /** Close the popover when a date is picked (default `false`). */
     closeOnSelect?: boolean;
+    /** Fires with the picked day string. */
     onChange: (day: string) => void;
 }

package/DateTimePicker/components/DateTimePicker/DateTimePicker.d.ts

@@ -1,3 +1,8 @@
 import { type ReactElement } from 'react';
 import type { DateTimePickerProps } from './types';
+/**
+ * Inline {@link DatePicker} with hour/minute/second number inputs for picking a date and time (UTC).
+ *
+ * @deprecated Use `CalendarDropdown` or `CalendarSuperForm` from Calendar instead.
+ */
 export declare function DateTimePicker(props: DateTimePickerProps): ReactElement;

package/DateTimePicker/components/DateTimePicker/DateTimePicker.js

@@ -3,6 +3,11 @@ import { Collapse, Horizontal } from '@pushwoosh/kit-helpers';
 import { format, createUTCDate } from '../../helpers';
 import { DatePicker } from '../DatePicker';
 import { NumberPicker } from '../NumberPicker';
+/**
+ * Inline {@link DatePicker} with hour/minute/second number inputs for picking a date and time (UTC).
+ *
+ * @deprecated Use `CalendarDropdown` or `CalendarSuperForm` from Calendar instead.
+ */
 export function DateTimePicker(props) {
   const {
     value,

package/DateTimePicker/components/DateTimePicker/types.d.ts

@@ -1,7 +1,13 @@
+/** Props of {@link DateTimePicker}. */
 export interface DateTimePickerProps {
+    /** Currently selected date-time string. */
     value: string;
+    /** Earliest selectable date. */
     minDate?: Date | string;
+    /** Latest selectable date. */
     maxDate?: Date | string;
+    /** Externally driven day that resets the visible month and view. */
     userInputDay?: string;
+    /** Fires with the picked date-time as a UTC string. */
     onChange: (day: string) => void;
 }

package/DateTimePicker/components/DateTimePickerField/DateTimePickerField.d.ts

@@ -1,3 +1,8 @@
 import { type ReactElement } from 'react';
 import type { DateTimePickerFieldProps } from './types';
+/**
+ * Read-only field showing the selected date-time that opens a {@link DateTimePicker} popover on click.
+ *
+ * @deprecated Use `CalendarDropdown` or `CalendarSuperForm` from Calendar instead.
+ */
 export declare function DateTimePickerField(props: DateTimePickerFieldProps): ReactElement;

package/DateTimePicker/components/DateTimePickerField/DateTimePickerField.js

@@ -6,6 +6,11 @@ import { useUTCDate } from './helpers';
 import { Lang } from '../../polyglot';
 import { InputFrame } from '../../styles';
 import { DateTimePicker } from '../DateTimePicker';
+/**
+ * Read-only field showing the selected date-time that opens a {@link DateTimePicker} popover on click.
+ *
+ * @deprecated Use `CalendarDropdown` or `CalendarSuperForm` from Calendar instead.
+ */
 export function DateTimePickerField(props) {
   const {
     value,

package/DateTimePicker/components/DateTimePickerField/types.d.ts

@@ -1,11 +1,20 @@
 import type { Placement } from '@floating-ui/react-dom';
+/** Props of {@link DateTimePickerField}. */
 export interface DateTimePickerFieldProps {
+    /** Currently selected date-time string. */
     value: string;
+    /** Earliest selectable date. */
     minDate?: Date | string;
+    /** Latest selectable date. */
     maxDate?: Date | string;
+    /** Render the field in the error state. */
     error?: boolean;
+    /** Allowed floating placements for the popover (default bottom/top start/end). */
     allowedPlacements?: Placement[];
+    /** Popover z-index (default `1000`). */
     zIndex?: number;
+    /** Close the popover when a value is picked (default `false`). */
     closeOnSelect?: boolean;
+    /** Fires with the picked date-time string. */
     onChange: (day: string) => void;
 }

package/DateTimePicker/types.d.ts

@@ -1,6 +1,11 @@
+/** Granularity unit used by the (deprecated) date/time picker internals. */
 export type Period = 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second';
+/** A value with optional min/max bounds for the (deprecated) date/time picker internals. */
 export type RangeOptions = {
+    /** The current date value. */
     value: Date;
+    /** Earliest selectable date. */
     minDate?: Date | string;
+    /** Latest selectable date. */
     maxDate?: Date | string;
 };

package/Drawer/components/Drawer/Drawer.d.ts

@@ -1,3 +1,14 @@
 import { type ReactElement } from 'react';
 import type { DrawerProps } from './types';
+/**
+ * Side panel that slides in from the edge, rendered in a portal, with size presets,
+ * layered z-index and optional backdrop-click close. Compose with {@link DrawerHeader},
+ * {@link DrawerTitle} and {@link DrawerBody}.
+ *
+ * @example
+ * <Drawer size="medium" isOpen={open} onClose={close}>
+ *   <DrawerHeader><DrawerTitle>Title</DrawerTitle></DrawerHeader>
+ *   <DrawerBody>Content</DrawerBody>
+ * </Drawer>
+ */
 export declare function Drawer({ size, isOpen, zIndex, onClose, children, padding, withoutLockScreen, closeOnClickOutside, }: DrawerProps): ReactElement;

package/Drawer/components/Drawer/Drawer.js

@@ -7,6 +7,17 @@ import { useLayer } from '../../../hooks';
 function createDivElement() {
   return document.createElement('div');
 }
+/**
+ * Side panel that slides in from the edge, rendered in a portal, with size presets,
+ * layered z-index and optional backdrop-click close. Compose with {@link DrawerHeader},
+ * {@link DrawerTitle} and {@link DrawerBody}.
+ *
+ * @example
+ * <Drawer size="medium" isOpen={open} onClose={close}>
+ *   <DrawerHeader><DrawerTitle>Title</DrawerTitle></DrawerHeader>
+ *   <DrawerBody>Content</DrawerBody>
+ * </Drawer>
+ */
 export function Drawer({
   size,
   isOpen,
@@ -52,7 +63,7 @@ export function Drawer({
         onMouseDown: handleClickOutside,
         "$padding": padding,
         children: _jsx(DrawerContainer, {
-          "$width": drawerSizes[size],
+          "$width": size in drawerSizes ? drawerSizes[size] : size,
           onClick: handleClose,
           children: children
         })

package/Drawer/components/Drawer/types.d.ts

@@ -1,18 +1,27 @@
 import type { MutableRefObject, PropsWithChildren } from 'react';
 import type { drawerSizes } from './maps';
+/** Per-side CSS padding overrides for the {@link Drawer} content area. */
 export type ContentPadding = {
     top?: string;
     right?: string;
     bottom?: string;
     left?: string;
 };
+/** Props of {@link Drawer}. */
 export type DrawerProps = PropsWithChildren<{
-    readonly size: keyof typeof drawerSizes;
+    /** Width: a predefined preset, or an explicit CSS length (`${number}px` / `${number}%`). */
+    readonly size: keyof typeof drawerSizes | `${number}px` | `${number}%`;
+    /** Whether the drawer is open. */
     readonly isOpen: boolean;
+    /** Stacking z-index; auto-layered when omitted. */
     readonly zIndex?: number;
+    /** Fires on backdrop click (if enabled) or layer close. */
     readonly onClose?: () => any;
+    /** Don't lock/scrim the page behind the drawer. */
     readonly withoutLockScreen?: boolean;
+    /** Close on backdrop click (default `true`). */
     readonly closeOnClickOutside?: boolean;
+    /** Per-side padding overrides for the content area. */
     readonly padding?: ContentPadding;
 }>;
 export type DrawerBoxBaseProps = PropsWithChildren<{

package/Drawer/components/DrawerContent/styles.d.ts

@@ -1,3 +1,6 @@
+/** Top section of a {@link Drawer}; typically wraps a {@link DrawerTitle}. */
 export declare const DrawerHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+/** Heading row of a {@link Drawer} (an `<h2>`); place inside {@link DrawerHeader}. */
 export declare const DrawerTitle: import("styled-components").StyledComponent<"h2", any, {}, never>;
+/** Scrollable main content area of a {@link Drawer}. */
 export declare const DrawerBody: import("styled-components").StyledComponent<"div", any, {}, never>;