Skip to main content

@kalyx/react

Public React API. All names below are importable directly from @kalyx/react.

import {
  DatePicker, RangePicker, TimePicker, DateTimePicker,
  MonthPicker, YearPicker, WeekPicker,
} from '@kalyx/react';

Components​

NameReference
DatePickerComponent docs
RangePickerComponent docs
TimePickerComponent docs
DateTimePickerComponent docs
MonthPickerComponent docs
YearPickerComponent docs
WeekPickerComponent docs

Hooks​

NameReference
useDatePickerHook docs
useRangePickerHook docs
useTimePickerHook docs

Four more hooks ship on the @kalyx/react/headless entry only, which keeps them out of the default entry's byte budget:

NameReference
useMonthPickerHook docs
useYearPickerHook docs
useWeekPickerHook docs
useDateTimePickerHook docs
import { useMonthPicker } from '@kalyx/react/headless';

Adapters​

DateFnsAdapter is re-exported from @kalyx/react for convenience (it's the default the main entry already installs):

import { DateFnsAdapter } from '@kalyx/react';

Two more prebuilt adapters ship as separate packages, for use with the @kalyx/react/headless entry:

import { DayjsAdapter } from '@kalyx/adapter-dayjs';
import { LuxonAdapter } from '@kalyx/adapter-luxon';

All three implement the same DateAdapter contract, run in UTC, and are validated against @kalyx/core/test-helpers. See the adapters guide.

Types​

DatePicker types​

import type {
  DatePickerRootProps,
  DatePickerInputProps,
  DatePickerTriggerProps,
  DatePickerPopoverProps,
  DatePickerCalendarProps,
  DatePickerCalendarClassNames,
  DatePickerMonthGridProps,
  DatePickerMonthGridClassNames,
  DatePickerYearGridProps,
  DatePickerYearGridClassNames,
  DatePickerPresetsProps,
  DatePickerPresetsClassNames,
  DatePickerPresetProps,
  DatePickerPresetKey,
} from '@kalyx/react';

RangePicker types​

import type {
  RangePickerRootProps,
  RangePickerInputProps,
  RangeInputPart,            // 'start' | 'end'
  RangePickerPopoverProps,
  RangePickerCalendarProps,
  RangePickerCalendarClassNames,
  RangePickerPresetsProps,
  RangePickerPresetsClassNames,
  RangePickerPresetProps,
  PresetKey,
} from '@kalyx/react';

TimePicker types​

import type {
  TimePickerRootProps,
  TimePickerInputProps,
  TimePickerHourListProps,
  TimePickerHourListClassNames,
  TimePickerMinuteListProps,
  TimePickerMinuteListClassNames,
  TimePickerAmPmToggleProps,
  TimePickerAmPmToggleClassNames,
} from '@kalyx/react';

DateTimePicker types​

import type {
  DateTimePickerRootProps,
  DateTimePickerInputProps,
} from '@kalyx/react';

Sub-component types are re-exported from DatePicker and TimePicker.

MonthPicker types​

import type {
  MonthPickerRootProps,
  MonthPickerInputProps,
  MonthPickerTriggerProps,
  MonthPickerPopoverProps,
  MonthPickerGridProps,
  MonthPickerGridClassNames,
} from '@kalyx/react';

YearPicker types​

import type {
  YearPickerRootProps,
  YearPickerInputProps,
  YearPickerTriggerProps,
  YearPickerPopoverProps,
  YearPickerGridProps,
  YearPickerGridClassNames,
} from '@kalyx/react';

WeekPicker types​

import type {
  WeekPickerRootProps,
  WeekPickerInputProps,
  WeekPickerPopoverProps,
  WeekPickerCalendarProps,
  WeekPickerCalendarClassNames,
} from '@kalyx/react';

Hook types​

import type {
  UseDatePickerOptions,
  UseDatePickerReturn,
  UseRangePickerOptions,
  UseRangePickerReturn,
  UseTimePickerOptions,
  UseTimePickerReturn,
} from '@kalyx/react';

Re-exports from @kalyx/core​

import type {
  ISODateString,
  DateRange,
  DisabledRule,
  DateAdapter,
  CalendarDay,
  TimeValue,
} from '@kalyx/react';

Runtime dependencies​

  • @kalyx/core (workspace)
  • @kalyx/adapter-date-fns (workspace — bundles date-fns for the default entry)
  • @floating-ui/react ^0.27.0

Peer dependencies: react ^19.0.0, react-dom ^19.0.0.

Optional adapter packages (install only if you use the /headless entry with a non-default backend): @kalyx/adapter-dayjs, @kalyx/adapter-luxon.

Bundle size​

Gzipped default-entry artifact: ~18.5 KB (7 components, CI ceiling 20 KB). The headless ESM and CJS artifacts have their own CI gate at 22 KB — that entry ships the same components plus all seven hooks and DateTimePicker.Presets, so it is budgeted separately rather than sharing the default entry's number.

That figure measures the artifact with its dependencies external. What your application ships is larger, because the bundler also resolves @kalyx/core, @kalyx/adapter-date-fns, and @floating-ui/react — the repository's consumer harness measures ~24 KB gzipped. sideEffects: false is declared and the dot-notation exports are pure-annotated, so pickers you don't import are eliminated — TimePicker alone measures ~16.2 KB, the heaviest single picker ~19.9 KB, against ~25.0 KB for all seven plus the hooks. The pickers share a large base, so the saving is real but well short of linear. Measure your production bundle for your exact imports, and see Troubleshooting → bundle size for the full reconciliation.

See also​