rupoui 1.3.6 → 1.3.8

package/README.md

@@ -248,6 +248,61 @@ import { DatePicker } from "rupoui";
   - `size`: `sm`, `md`, `lg`.
   - `radius`: `sm`, `md`, `lg`, `full`.
 
+### DateRangePicker
+
+A component for selecting a start and end date with calendar range selection, hover preview, and text/segmented input modes.
+
+```tsx
+import { DateRangePicker } from "rupoui";
+import { useState } from "react";
+
+const Example = () => {
+  const [range, setRange] = useState<{ start: Date | null; end: Date | null }>({
+    start: null,
+    end: null,
+  });
+
+  return (
+    <>
+      <DateRangePicker
+        label="Travel Dates"
+        value={range}
+        onChange={setRange}
+      />
+
+      <DateRangePicker
+        label="Range (Two Inputs)"
+        rangeInput="two"
+        value={range}
+        onChange={setRange}
+      />
+
+      <DateRangePicker
+        label="Range (Segmented)"
+        inputMode="segmented"
+        value={range}
+        onChange={setRange}
+      />
+    </>
+  );
+};
+```
+
+**Props:**
+
+- **Field Props**: `label`, `description`, `errorMessage`, `fullWidth`.
+- **State**: `value`, `defaultValue`, `onChange`.
+- **Validation**: `isInvalid`, `isDisabled`, `isReadOnly`, `minDate`, `maxDate`, `disabledDates`.
+- **Range Input**:
+  - `rangeInput`: `single` (default) or `two`.
+  - `separator`: separator string between start/end (default: ` – `).
+  - `inputMode`: `text` (default) or `segmented`.
+- **Style Variants**:
+  - `variant`: `solid` (default), `bordered`, `flat`, `ghost`.
+  - `color`: `primary`, `secondary`, `success`, `warning`, `danger`.
+  - `size`: `sm`, `md`, `lg`.
+  - `radius`: `sm`, `md`, `lg`, `full`.
+
 ### Calendar
 
 A pure renderer component for displaying a calendar grid with full keyboard navigation and accessibility support. It uses an external engine for state management, giving you complete control over the calendar's behavior.

package/dist/components/datepicker/SegmentedDatePickerInput.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
+import { FieldProps } from '../field/field.types';
 import { datePicker } from './datepicker.styles';
 import { DatePickerConfig, DatePickerState } from './datepicker.types';
-import { FieldProps } from '../field/field.types';
 
 interface SegmentedDatePickerInputProps extends Partial<FieldProps> {
     state: DatePickerState;

package/dist/components/daterangepicker/DateRangePicker.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { DateRangePickerProps } from './daterangepicker.types';
+
+export declare const DateRangePicker: React.FC<DateRangePickerProps>;

package/dist/components/daterangepicker/DateRangePickerCalendar.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { datePicker } from '../datepicker/datepicker.styles';
+import { DateRangePickerConfig, DateRangePickerState } from './daterangepicker.types';
+
+interface DateRangePickerCalendarProps {
+    state: DateRangePickerState;
+    config: DateRangePickerConfig;
+    onUpdate: (newState: DateRangePickerState) => void;
+    styles: ReturnType<typeof datePicker>;
+}
+export declare const DateRangePickerCalendar: React.FC<DateRangePickerCalendarProps>;
+export {};

package/dist/components/daterangepicker/DateRangePickerDay.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+import { CalendarCell } from '../calendar/calendar.types';
+import { datePicker } from '../datepicker/datepicker.styles';
+import { DateRangePickerConfig, DateRangePickerState } from './daterangepicker.types';
+
+interface DateRangePickerDayProps {
+    cell: CalendarCell;
+    state: DateRangePickerState;
+    config: DateRangePickerConfig;
+    onUpdate: (newState: DateRangePickerState) => void;
+    styles: ReturnType<typeof datePicker>;
+    isStart: boolean;
+    isEnd: boolean;
+    isInRange: boolean;
+    isInPreviewRange: boolean;
+}
+export declare const DateRangePickerDay: React.FC<DateRangePickerDayProps>;
+export {};

package/dist/components/daterangepicker/SegmentedDateRangePickerInput.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+import { datePicker } from '../datepicker/datepicker.styles';
+import { DateRangePickerState } from './daterangepicker.types';
+
+interface SegmentedDateRangePickerInputProps {
+    state: DateRangePickerState;
+    onUpdate: (newState: DateRangePickerState) => void;
+    styles: ReturnType<typeof datePicker>;
+    separator?: string;
+    className?: string;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+}
+export declare const SegmentedDateRangePickerInput: React.FC<SegmentedDateRangePickerInputProps>;
+export {};

package/dist/components/daterangepicker/daterangepicker.controller.d.ts

@@ -0,0 +1,12 @@
+import { DateRangePickerConfig, DateRangePickerState, DateRangeValue } from './daterangepicker.types';
+
+export declare function openPicker(state: DateRangePickerState, shouldFocus?: boolean): DateRangePickerState;
+export declare function closePicker(state: DateRangePickerState): DateRangePickerState;
+export declare function togglePicker(state: DateRangePickerState): DateRangePickerState;
+export declare function goToNextMonth(state: DateRangePickerState): DateRangePickerState;
+export declare function goToPreviousMonth(state: DateRangePickerState): DateRangePickerState;
+export declare function goToMonth(state: DateRangePickerState, date: Date): DateRangePickerState;
+export declare function setFocusedDate(state: DateRangePickerState, date: Date): DateRangePickerState;
+export declare function setHoverDate(state: DateRangePickerState, date: Date | null): DateRangePickerState;
+export declare function selectRangeDate(state: DateRangePickerState, date: Date, config?: DateRangePickerConfig): DateRangePickerState;
+export declare function normalizeAndSortRange(range: DateRangeValue): DateRangeValue;

package/dist/components/daterangepicker/daterangepicker.state.d.ts

@@ -0,0 +1,4 @@
+import { DateRangePickerConfig, DateRangePickerState, DateRangeValue } from './daterangepicker.types';
+
+export declare function createDateRangePickerState(config?: DateRangePickerConfig): DateRangePickerState;
+export declare function normalizeDateRangeValue(range?: DateRangeValue): DateRangeValue;

package/dist/components/daterangepicker/daterangepicker.types.d.ts

@@ -0,0 +1,35 @@
+import { FieldProps } from '../field/field.types';
+
+export type DateRangeValue = {
+    start: Date | null;
+    end: Date | null;
+};
+export type DateRangePickerConfig = {
+    value?: DateRangeValue;
+    defaultValue?: DateRangeValue;
+    minDate?: Date;
+    maxDate?: Date;
+    weekStartsOn?: 0 | 1;
+    disabledDates?: Date[] | ((date: Date) => boolean);
+    closeOnSelect?: boolean;
+    inputMode?: "text" | "segmented";
+};
+export type DateRangePickerState = {
+    isOpen: boolean;
+    viewDate: Date;
+    focusedDate: Date | null;
+    autoFocus: boolean;
+    range: DateRangeValue;
+    hoverDate: Date | null;
+};
+export interface DateRangePickerProps extends FieldProps, Omit<DateRangePickerConfig, "value"> {
+    value?: DateRangeValue;
+    onChange?: (value: DateRangeValue) => void;
+    separator?: string;
+    rangeInput?: "single" | "two";
+    inputMode?: "text" | "segmented";
+    className?: string;
+    placeholder?: string;
+    startPlaceholder?: string;
+    endPlaceholder?: string;
+}

package/dist/components/daterangepicker/index.d.ts

@@ -0,0 +1,2 @@
+export * from './daterangepicker.types';
+export * from './DateRangePicker';