@xsolla/xui-date-picker 0.148.0 → 0.148.1

package/README.md

@@ -0,0 +1,170 @@
+# Date Picker
+
+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
+
+```bash
+npm install @xsolla/xui-date-picker
+# or
+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
+
+```tsx
+import * as React from 'react';
+import { DatePicker } from '@xsolla/xui-date-picker';
+
+export default function SingleDate() {
+  const [date, setDate] = React.useState<Date | null>(null);
+
+  return (
+    <DatePicker
+      selectedDate={date}
+      onChange={(newDate) => setDate(newDate as Date)}
+      placeholder="Select a date"
+    />
+  );
+}
+```
+
+### Date Range Selection
+
+```tsx
+import * as React from 'react';
+import { DatePicker } from '@xsolla/xui-date-picker';
+
+export default function DateRange() {
+  const [startDate, setStartDate] = React.useState<Date | null>(null);
+  const [endDate, setEndDate] = React.useState<Date | null>(null);
+
+  return (
+    <DatePicker
+      selectsRange
+      startDate={startDate}
+      endDate={endDate}
+      onChange={(range) => {
+        const [start, end] = range as [Date | null, Date | null];
+        setStartDate(start);
+        setEndDate(end);
+      }}
+    />
+  );
+}
+```
+
+### With Preset Chips
+
+```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 WithChips() {
+  const [date, setDate] = React.useState<Date | null>(null);
+  const [activeChip, setActiveChip] = React.useState<string | null>('last30');
+
+  return (
+    <DatePicker
+      selectedDate={date}
+      onChange={(newDate) => setDate(newDate as Date)}
+      chips={chips}
+      activeChip={activeChip}
+      onChipSelect={setActiveChip}
+    />
+  );
+}
+```
+
+### 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>
+  );
+}
+```
+
+### Standalone Calendar
+
+For standalone calendar usage, import from `@xsolla/xui-calendar`:
+
+```tsx
+import { Calendar, DualCalendar } from '@xsolla/xui-calendar';
+```
+
+## API Reference
+
+### DatePicker
+
+**DatePickerProps:**
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :------ | :---------- |
+| selectedDate | `Date` | - | Selected date for single mode. |
+| startDate | `Date` | - | Start date for range mode. |
+| endDate | `Date` | - | End date for range mode. |
+| selectsRange | `boolean` | `false` | Enable date range selection. |
+| onChange | `(date: Date \| [Date, Date]) => void` | - | Date change callback. |
+| size | `"xs" \| "sm" \| "md" \| "lg" \| "xl"` | `"md"` | Input size variant. |
+| locale | `string` | `"enUS"` | Date-fns locale identifier. |
+| placeholder | `string` | `"MM/DD/YYYY"` | Input placeholder text. |
+| 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
+
+The component displays dates in `MM/DD/YYYY` format:
+
+| Mode | Display Format |
+| :--- | :------------- |
+| Single | `01/15/2024` |
+| Range | `01/15/2024 - 01/20/2024` |
+
+## Calendar Features
+
+- **Month navigation**: Previous/next month buttons
+- **Year navigation**: Year selection dropdown
+- **Today indicator**: Current date is highlighted
+- **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
+
+- Calendar opens on input focus
+- Calendar closes when a date is selected (single mode)
+- Calendar closes when both dates are selected (range mode)
+- Clicking outside closes the calendar
+- Input value updates immediately on selection
+
+## Accessibility
+
+- Input is keyboard accessible
+- Calendar dates are navigable via keyboard
+- Selected dates are announced to screen readers
+- Focus is managed when calendar opens/closes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-date-picker",
-  "version": "0.148.0",
+  "version": "0.148.1",
   "main": "./web/index.js",
   "module": "./web/index.mjs",
   "types": "./web/index.d.ts",
@@ -13,10 +13,10 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@xsolla/xui-calendar": "0.148.0",
-    "@xsolla/xui-core": "0.148.0",
-    "@xsolla/xui-input": "0.148.0",
-    "@xsolla/xui-primitives-core": "0.148.0",
+    "@xsolla/xui-calendar": "0.148.1",
+    "@xsolla/xui-core": "0.148.1",
+    "@xsolla/xui-input": "0.148.1",
+    "@xsolla/xui-primitives-core": "0.148.1",
     "date-fns": "^3.0.0"
   },
   "peerDependencies": {