@atawi/react-date-picker 2.0.0 → 2.0.1

package/CHANGELOG.md

@@ -17,3 +17,7 @@ import "@atawi/react-date-picker/style.css";
 ### Documentation
 
 - Added "Required CSS Import" guidance to API, Getting Started, Installation, Examples, and README.
+
+### Fixed
+
+- Fixed declaration packaging so `dist/index.d.ts` includes the public named exports such as `DateTimePicker` and `TimePicker`.

package/README.md

@@ -37,9 +37,10 @@ npm install @atawi/react-date-picker
 Import the package stylesheet once in your app entry, then import components:
 
 ```tsx
-import "@atawi/react-date-picker/style.css";
 import { DateTimePicker } from "@atawi/react-date-picker";
 
+import "@atawi/react-date-picker/style.css";
+
 function App() {
   const [date, setDate] = useState(new Date());
 
@@ -59,9 +60,10 @@ The library includes comprehensive built-in styles that provide:
 ## Basic Usage
 
 ```tsx
-import "@atawi/react-date-picker/style.css";
 import { DateTimePicker } from "@atawi/react-date-picker";
 
+import "@atawi/react-date-picker/style.css";
+
 function App() {
   const [date, setDate] = useState(new Date());
 
@@ -69,6 +71,25 @@ function App() {
 }
 ```
 
+### Locale Example (date-fns)
+
+Use a locale from `date-fns/locale` and pass it through the `locale` prop:
+
+```tsx
+import { useState } from "react";
+import { DateTimePicker } from "@atawi/react-date-picker";
+import { fr } from "date-fns/locale";
+import "@atawi/react-date-picker/style.css";
+
+function App() {
+  const [date, setDate] = useState(new Date());
+
+  return (
+    <DateTimePicker value={date} onChange={setDate} showTime locale={fr} />
+  );
+}
+```
+
 ## Examples
 
 ### Single Date Selection
@@ -191,9 +212,10 @@ const [isOpen, setIsOpen] = useState(false);
 ### Standalone Time Picker
 
 ```tsx
-import "@atawi/react-date-picker/style.css";
 import { TimePicker } from "@atawi/react-date-picker";
 
+import "@atawi/react-date-picker/style.css";
+
 const [time, setTime] = useState(new Date());
 
 <TimePicker value={time} onChange={setTime} use24Hour={false} />;

package/dist/App.d.ts

@@ -0,0 +1,2 @@
+declare function App(): import("react/jsx-runtime").JSX.Element;
+export default App;

package/dist/components/DateTimePicker/Calendar.d.ts

@@ -0,0 +1,24 @@
+import { FC } from 'react';
+import { Locale } from 'date-fns';
+import { DateNoteType } from '../../types/dates';
+import { StyleProps } from './types';
+interface CalendarProps {
+    currentDate: Date;
+    selectedDate?: Date;
+    selectedRange?: [Date | null, Date | null];
+    hoverDate?: Date | null;
+    mode: "single" | "range" | "week";
+    disabledDates: Date[];
+    locale?: Locale;
+    onDateClick: (date: Date) => void;
+    onDateHover?: (date: Date | null) => void;
+    onPrevMonth: () => void;
+    onNextMonth: () => void;
+    onMonthSelect: (month: number) => void;
+    onYearSelect: (year: number) => void;
+    styles?: StyleProps;
+    notes?: DateNoteType[];
+    darkMode?: boolean;
+}
+export declare const Calendar: FC<CalendarProps>;
+export {};

package/dist/components/DateTimePicker/ConfirmButton.d.ts

@@ -0,0 +1,9 @@
+import { FC, ReactNode } from 'react';
+interface ConfirmButtonProps {
+    onConfirm: () => void;
+    className?: string;
+    children?: ReactNode;
+    darkMode?: boolean;
+}
+export declare const ConfirmButton: FC<ConfirmButtonProps>;
+export {};

package/dist/components/DateTimePicker/DateNote.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { DateNoteProps } from '../../types/dates';
+export declare const DateNote: FC<DateNoteProps>;

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

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { DateTimePickerProps } from './types';
+export declare const DateTimePicker: FC<DateTimePickerProps>;

package/dist/components/DateTimePicker/Popover.d.ts

@@ -0,0 +1,9 @@
+import { FC, ReactNode } from 'react';
+interface PopoverProps {
+    isOpen: boolean;
+    onClose: () => void;
+    children: ReactNode;
+    content: ReactNode;
+}
+export declare const Popover: FC<PopoverProps>;
+export {};

package/dist/components/DateTimePicker/TimePicker.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { Locale } from 'date-fns';
+interface TimePickerProps {
+    value: Date;
+    onChange: (date: Date) => void;
+    use24Hour?: boolean;
+    locale?: Locale;
+    className?: string;
+    darkMode?: boolean;
+}
+export declare const TimePicker: FC<TimePickerProps>;
+export {};

package/dist/components/DateTimePicker/Tooltip.d.ts

@@ -0,0 +1,7 @@
+import { FC, ReactNode } from 'react';
+interface TooltipProps {
+    content: ReactNode;
+    className?: string;
+}
+export declare const Tooltip: FC<TooltipProps>;
+export {};

package/dist/components/DateTimePicker/__tests__/Calendar.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/DateTimePicker/__tests__/ConfirmButton.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/DateTimePicker/__tests__/DateNote.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/DateTimePicker/__tests__/DateTimePicker.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/DateTimePicker/__tests__/Popover.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/DateTimePicker/__tests__/TimePicker.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/DateTimePicker/__tests__/Tooltip.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,31 @@
+import { Locale } from 'date-fns';
+import { ReactNode } from 'react';
+import { DateNoteType } from '../../types/dates';
+export interface StyleProps {
+    containerClassName?: string;
+    triggerClassName?: string;
+    calendarClassName?: string;
+    timePickerClassName?: string;
+    dayClassName?: string;
+    selectedDayClassName?: string;
+    rangeClassName?: string;
+    disabledClassName?: string;
+}
+export interface DateTimePickerProps {
+    value?: Date | [Date, Date];
+    onChange: (date: Date | [Date, Date]) => void;
+    mode?: "single" | "range" | "week";
+    showTime?: boolean;
+    use24Hour?: boolean;
+    disabled?: boolean;
+    disabledDates?: Date[];
+    styles?: StyleProps;
+    locale?: Locale;
+    notes?: DateNoteType[];
+    onDateHover?: (date: Date | null) => void;
+    isOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+    footer?: ReactNode;
+    className?: string;
+    darkMode?: boolean;
+}

package/dist/components/TimePicker/TimePicker.d.ts

@@ -0,0 +1,17 @@
+import { FC } from 'react';
+import { Locale } from 'date-fns';
+export interface TimePickerProps {
+    value: Date;
+    onChange: (date: Date) => void;
+    use24Hour?: boolean;
+    locale?: Locale;
+    disabled?: boolean;
+    className?: string;
+    darkMode?: boolean;
+    styles?: {
+        containerClassName?: string;
+        triggerClassName?: string;
+        popoverClassName?: string;
+    };
+}
+export declare const TimePicker: FC<TimePickerProps>;

package/dist/components/TimePicker/__tests__/TimePicker.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/examples/CleanRangeExample.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const CleanRangeExample: FC;

package/dist/components/examples/ConfirmationExample.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const ConfirmationExample: FC;

package/dist/components/examples/HotelBookingExample.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const HotelBookingExample: FC;

package/dist/components/examples/MaterialExample.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const MaterialExample: FC;

package/dist/components/examples/NotesExample.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const NotesExample: FC;

package/dist/components/examples/RangeNotesExample.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const RangeNotesExample: FC;

package/dist/components/examples/TimePickerExample.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const TimePickerExample: FC;

package/dist/components/examples/WeekRangeExample.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const WeekRangeExample: FC;

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

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+interface IconProps {
+    size?: number;
+    className?: string;
+}
+export declare const ChevronLeftIcon: FC<IconProps>;
+export declare const ChevronRightIcon: FC<IconProps>;
+export declare const ClockIcon: FC<IconProps>;
+export {};

package/dist/hooks/__tests__/useA11y.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/hooks/__tests__/useKeyboardNavigation.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/hooks/useA11y.d.ts

@@ -0,0 +1,5 @@
+export declare const useA11y: (isOpen: boolean, onClose: () => void, triggerRef: React.RefObject<HTMLElement>, contentRef: React.RefObject<HTMLElement>) => {
+    role: string;
+    "aria-modal": boolean;
+    "aria-label": string;
+};

package/dist/hooks/useKeyboardNavigation.d.ts

@@ -0,0 +1 @@
+export declare const useKeyboardNavigation: (currentDate: Date, onDateSelect: (date: Date) => void, onMonthChange: (date: Date) => void) => (event: React.KeyboardEvent) => void;

package/dist/index.d.ts

@@ -1 +1,15 @@
-export {}
+export { DateTimePicker } from './components/DateTimePicker/DateTimePicker';
+export { TimePicker } from './components/TimePicker/TimePicker';
+export { Calendar } from './components/DateTimePicker/Calendar';
+export { ConfirmButton } from './components/DateTimePicker/ConfirmButton';
+export { Popover } from './components/DateTimePicker/Popover';
+export { DateNote } from './components/DateTimePicker/DateNote';
+export { Tooltip } from './components/DateTimePicker/Tooltip';
+export type { DateTimePickerProps } from './components/DateTimePicker/types';
+export type { TimePickerProps } from './components/TimePicker/TimePicker';
+export type { StyleProps } from './components/DateTimePicker/types';
+export type { DateNoteType } from './types/dates';
+export { generateDisabledDates, isDateDisabled, getWeekRange, isDateInWeek, getWeekDays, } from './utils/dates';
+export { findNoteForDate, hasNote } from './utils/notes';
+export { useA11y } from './hooks/useA11y';
+export { useKeyboardNavigation } from './hooks/useKeyboardNavigation';

package/dist/types/dates.d.ts

@@ -0,0 +1,17 @@
+export interface DateNote {
+    date: Date;
+    note: string;
+}
+export interface DateRangeNote {
+    startDate: Date;
+    endDate: Date;
+    note: string;
+}
+export type DateNoteType = DateNote | DateRangeNote;
+export interface DateNoteProps {
+    notes: DateNoteType[];
+    hoveredDate?: Date | null;
+    selectedDate?: Date;
+    selectedRange?: [Date | null, Date | null];
+    darkMode?: boolean;
+}

package/dist/utils/dates.d.ts

@@ -0,0 +1,6 @@
+export declare const generateDisabledDates: (bookedRanges: [Date, Date][], blockedDays?: number) => Date[];
+export declare const isDateDisabled: (date: Date, disabledDates: Date[]) => boolean;
+export declare const getBookedRanges: () => [Date, Date][];
+export declare const getWeekRange: (date: Date) => [Date, Date];
+export declare const isDateInWeek: (date: Date, weekDate: Date) => boolean;
+export declare const getWeekDays: (date: Date) => Date[];

package/dist/utils/dates.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/notes.d.ts

@@ -0,0 +1,3 @@
+import { DateNoteType } from '../types/dates';
+export declare const findNoteForDate: (date: Date, notes: DateNoteType[]) => string | null;
+export declare const hasNote: (date: Date, notes: DateNoteType[]) => boolean;

package/dist/utils/notes.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atawi/react-date-picker",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "A beautiful, customizable date and time picker component for React with multiple themes and localization support",
   "private": false,
   "type": "module",