@xsolla/xui-date-picker 0.117.0 → 0.118.0

package/README.md

@@ -1,6 +1,6 @@
 # Date Picker
 
-A cross-platform React date picker component with an input field that opens a calendar dropdown for date selection.
+A cross-platform React date picker component with an input field that opens a calendar dropdown for date selection. The calendar is provided by `@xsolla/xui-calendar`.
 
 ## Installation
 
@@ -10,6 +10,8 @@ npm install @xsolla/xui-date-picker
 yarn add @xsolla/xui-date-picker
 ```
 
+> The `Calendar`, `DualCalendar`, `CalendarChips`, and related components are available from `@xsolla/xui-calendar` and are re-exported from this package for backward compatibility. For standalone calendar usage (without the input), install `@xsolla/xui-calendar` directly.
+
 ## Demo
 
 ### Single Date Selection
@@ -56,150 +58,57 @@ export default function DateRange() {
 }
 ```
 
-### Different Sizes
-
-```tsx
-import * as React from 'react';
-import { DatePicker } from '@xsolla/xui-date-picker';
-
-export default function Sizes() {
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
-      <DatePicker size="sm" placeholder="Small" />
-      <DatePicker size="md" placeholder="Medium" />
-      <DatePicker size="lg" placeholder="Large" />
-    </div>
-  );
-}
-```
-
-## Anatomy
-
-```jsx
-import { DatePicker } from '@xsolla/xui-date-picker';
-
-<DatePicker
-  selectedDate={date}          // Selected date (single mode)
-  startDate={startDate}        // Start date (range mode)
-  endDate={endDate}            // End date (range mode)
-  selectsRange={false}         // Enable range selection
-  onChange={handleChange}      // Change callback
-  size="md"                     // Input size
-  locale="enUS"                // Date locale
-  placeholder="MM/DD/YYYY"     // Input placeholder
-  backgroundColor={color}      // Custom background
-/>
-```
-
-## Examples
-
-### With Initial Date
+### With Preset Chips
 
 ```tsx
 import * as React from 'react';
 import { DatePicker } from '@xsolla/xui-date-picker';
 
-export default function InitialDate() {
-  const [date, setDate] = React.useState<Date>(new Date(2024, 0, 15));
-
-  return (
-    <DatePicker
-      selectedDate={date}
-      onChange={(newDate) => setDate(newDate as Date)}
-    />
-  );
-}
-```
-
-### With Date Constraints
-
-```tsx
-import * as React from 'react';
-import { DatePicker } from '@xsolla/xui-date-picker';
+const chips = [
+  { label: 'Today', value: 'today' },
+  { label: 'Last 7 days', value: 'last7' },
+  { label: 'Last 30 days', value: 'last30' },
+];
 
-export default function DateConstraints() {
+export default function WithChips() {
   const [date, setDate] = React.useState<Date | null>(null);
-  const today = new Date();
-  const nextMonth = new Date(today.getFullYear(), today.getMonth() + 1, today.getDate());
+  const [activeChip, setActiveChip] = React.useState<string | null>('last30');
 
   return (
     <DatePicker
       selectedDate={date}
       onChange={(newDate) => setDate(newDate as Date)}
-      minDate={today}
-      maxDate={nextMonth}
-      placeholder="Select within next 30 days"
+      chips={chips}
+      activeChip={activeChip}
+      onChipSelect={setActiveChip}
     />
   );
 }
 ```
 
-### Booking Date Range
+### Different Sizes
 
 ```tsx
 import * as React from 'react';
 import { DatePicker } from '@xsolla/xui-date-picker';
 
-export default function BookingRange() {
-  const [startDate, setStartDate] = React.useState<Date | null>(null);
-  const [endDate, setEndDate] = React.useState<Date | null>(null);
-
-  const handleChange = (range: [Date | null, Date | null]) => {
-    const [start, end] = range;
-    setStartDate(start);
-    setEndDate(end);
-
-    if (start && end) {
-      const nights = Math.ceil((end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24));
-      console.log(`${nights} night(s) selected`);
-    }
-  };
-
+export default function Sizes() {
   return (
-    <div>
-      <DatePicker
-        selectsRange
-        startDate={startDate}
-        endDate={endDate}
-        onChange={handleChange}
-        placeholder="Check-in - Check-out"
-      />
-      {startDate && endDate && (
-        <p>
-          {startDate.toLocaleDateString()} to {endDate.toLocaleDateString()}
-        </p>
-      )}
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <DatePicker size="sm" placeholder="Small" />
+      <DatePicker size="md" placeholder="Medium" />
+      <DatePicker size="lg" placeholder="Large" />
     </div>
   );
 }
 ```
 
-### With Locale
+### Standalone Calendar
 
-```tsx
-import * as React from 'react';
-import { DatePicker } from '@xsolla/xui-date-picker';
+For standalone calendar usage, import from `@xsolla/xui-calendar`:
 
-export default function LocalizedPicker() {
-  const [date, setDate] = React.useState<Date | null>(null);
-
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
-      <DatePicker
-        selectedDate={date}
-        onChange={(d) => setDate(d as Date)}
-        locale="enUS"
-        placeholder="English (US)"
-      />
-      <DatePicker
-        selectedDate={date}
-        onChange={(d) => setDate(d as Date)}
-        locale="de"
-        placeholder="German"
-      />
-    </div>
-  );
-}
+```tsx
+import { Calendar, DualCalendar } from '@xsolla/xui-calendar';
 ```
 
 ## API Reference
@@ -221,6 +130,9 @@ export default function LocalizedPicker() {
 | minDate | `Date` | - | Minimum selectable date. |
 | maxDate | `Date` | - | Maximum selectable date. |
 | backgroundColor | `string` | - | Custom background color. |
+| chips | `CalendarChipOption[]` | - | Preset date range chips. |
+| activeChip | `string \| null` | - | Currently active chip value. |
+| onChipSelect | `(value: string) => void` | - | Chip selection callback. |
 | testID | `string` | - | Test identifier. |
 
 ## Date Format
@@ -240,6 +152,7 @@ The component displays dates in `MM/DD/YYYY` format:
 - **Selected state**: Selected date(s) have distinct styling
 - **Range highlighting**: Dates between start and end are highlighted
 - **Disabled dates**: Dates outside min/max range are disabled
+- **Preset chips**: Quick-select date ranges (Today, Last 7 days, etc.)
 
 ## Behavior
 

package/native/index.d.mts

@@ -1,71 +1,7 @@
+import { CalendarProps, CalendarLocaleType } from '@xsolla/xui-calendar';
+export { Calendar, CalendarChipOption, CalendarChips, CalendarChipsProps, CalendarGrid, CalendarGridProps, CalendarHeader, CalendarHeaderProps, CalendarLocaleType, CalendarProps, DualCalendar, DualCalendarProps } from '@xsolla/xui-calendar';
 import * as react from 'react';
-import { ReactNode } from 'react';
-import * as locales from 'date-fns/locale';
 
-type CalendarLocaleType = keyof typeof locales;
-interface CalendarProps {
-    locale?: CalendarLocaleType;
-    /**
-     * The day to use as first day of the week, starting from 0 (Sunday) to 6 (Saturday).
-     */
-    firstDayOfWeek?: number;
-    /**
-     * The month to display in the calendar at first render.
-     */
-    initialMonth?: Date;
-    /**
-     * The month to display in the calendar.
-     */
-    month?: Date;
-    /**
-     * Select in range mode for calendar
-     */
-    selectsRange?: boolean;
-    /**
-     * The minimum selectable date
-     */
-    minDate?: Date | null;
-    /**
-     * The maximum selectable date
-     */
-    maxDate?: Date | null;
-    /**
-     * For range mode. Start date in selected period
-     */
-    startDate?: Date | null;
-    /**
-     * For range mode. End date in selected period
-     */
-    endDate?: Date | null;
-    /**
-     * The selected date
-     */
-    selectedDate?: Date | null;
-    /**
-     * Property sets the maximum height of a context menus for selecting month and year.
-     */
-    contextMenuMaxHeight?: number;
-    /**
-     * Returns custom content to display above the calendar's date picker.
-     */
-    topContent?: (datePicker: {
-        close: () => void;
-    }) => ReactNode;
-    /**
-     * Returns custom content to display beneath the calendar's date picker.
-     */
-    bottomContent?: (datePicker: {
-        close: () => void;
-    }) => ReactNode;
-    /**
-     * Test ID for testing frameworks
-     */
-    testID?: string;
-    /**
-     * Callback fired when the date changes
-     */
-    onChange?: (date: Date | [Date | null, Date | null]) => void;
-}
 type DateRangeType = [Date | null, Date | null];
 interface DatePickerProps extends Omit<CalendarProps, "onChange"> {
     /**
@@ -92,9 +28,6 @@ interface DatePickerProps extends Omit<CalendarProps, "onChange"> {
 
 declare const DatePicker: react.ForwardRefExoticComponent<DatePickerProps & react.RefAttributes<any>>;
 
-declare const Calendar: react.ForwardRefExoticComponent<CalendarProps & react.RefAttributes<any>>;
-
 declare function formatDate(date: Date, formatStr: string, locale?: CalendarLocaleType): string;
-declare function getMonthInLocale(month: number, locale?: CalendarLocaleType): string;
 
-export { Calendar, type CalendarLocaleType, type CalendarProps, DatePicker, type DatePickerProps, type DateRangeType, formatDate, getMonthInLocale };
+export { DatePicker, type DatePickerProps, type DateRangeType, formatDate };

package/native/index.d.ts

@@ -1,71 +1,7 @@
+import { CalendarProps, CalendarLocaleType } from '@xsolla/xui-calendar';
+export { Calendar, CalendarChipOption, CalendarChips, CalendarChipsProps, CalendarGrid, CalendarGridProps, CalendarHeader, CalendarHeaderProps, CalendarLocaleType, CalendarProps, DualCalendar, DualCalendarProps } from '@xsolla/xui-calendar';
 import * as react from 'react';
-import { ReactNode } from 'react';
-import * as locales from 'date-fns/locale';
 
-type CalendarLocaleType = keyof typeof locales;
-interface CalendarProps {
-    locale?: CalendarLocaleType;
-    /**
-     * The day to use as first day of the week, starting from 0 (Sunday) to 6 (Saturday).
-     */
-    firstDayOfWeek?: number;
-    /**
-     * The month to display in the calendar at first render.
-     */
-    initialMonth?: Date;
-    /**
-     * The month to display in the calendar.
-     */
-    month?: Date;
-    /**
-     * Select in range mode for calendar
-     */
-    selectsRange?: boolean;
-    /**
-     * The minimum selectable date
-     */
-    minDate?: Date | null;
-    /**
-     * The maximum selectable date
-     */
-    maxDate?: Date | null;
-    /**
-     * For range mode. Start date in selected period
-     */
-    startDate?: Date | null;
-    /**
-     * For range mode. End date in selected period
-     */
-    endDate?: Date | null;
-    /**
-     * The selected date
-     */
-    selectedDate?: Date | null;
-    /**
-     * Property sets the maximum height of a context menus for selecting month and year.
-     */
-    contextMenuMaxHeight?: number;
-    /**
-     * Returns custom content to display above the calendar's date picker.
-     */
-    topContent?: (datePicker: {
-        close: () => void;
-    }) => ReactNode;
-    /**
-     * Returns custom content to display beneath the calendar's date picker.
-     */
-    bottomContent?: (datePicker: {
-        close: () => void;
-    }) => ReactNode;
-    /**
-     * Test ID for testing frameworks
-     */
-    testID?: string;
-    /**
-     * Callback fired when the date changes
-     */
-    onChange?: (date: Date | [Date | null, Date | null]) => void;
-}
 type DateRangeType = [Date | null, Date | null];
 interface DatePickerProps extends Omit<CalendarProps, "onChange"> {
     /**
@@ -92,9 +28,6 @@ interface DatePickerProps extends Omit<CalendarProps, "onChange"> {
 
 declare const DatePicker: react.ForwardRefExoticComponent<DatePickerProps & react.RefAttributes<any>>;
 
-declare const Calendar: react.ForwardRefExoticComponent<CalendarProps & react.RefAttributes<any>>;
-
 declare function formatDate(date: Date, formatStr: string, locale?: CalendarLocaleType): string;
-declare function getMonthInLocale(month: number, locale?: CalendarLocaleType): string;
 
-export { Calendar, type CalendarLocaleType, type CalendarProps, DatePicker, type DatePickerProps, type DateRangeType, formatDate, getMonthInLocale };
+export { DatePicker, type DatePickerProps, type DateRangeType, formatDate };