@atawi/react-date-picker 1.0.0 → 2.0.1

package/CHANGELOG.md

@@ -0,0 +1,23 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+## [Unreleased]
+
+### Breaking Changes
+
+- Consumers must explicitly import the package stylesheet:
+
+```ts
+import "@atawi/react-date-picker/style.css";
+```
+
+- The stylesheet is now exported via the package subpath `@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

@@ -1,10 +1,12 @@
 # React Date Picker
 
-A beautiful, customizable date and time picker component for React with comprehensive built-in styling, multiple themes and localization support.
+![](https://github.com/AhmedAlatawi/react-date-picker/actions/workflows/ci.yml/badge.svg)
+![npm version](https://img.shields.io/npm/v/@atawi/react-date-picker)
+![license](https://img.shields.io/npm/l/@atawi/react-date-picker)
+![bundle size](https://img.shields.io/bundlephobia/minzip/@atawi/react-date-picker)
+[![codecov](https://codecov.io/github/ahmedalatawi/react-date-picker/graph/badge.svg?token=141KSD7U2J)](https://codecov.io/github/ahmedalatawi/react-date-picker)
 
-![npm version](https://img.shields.io/npm/v/@ahmedalatawi/react-date-picker)
-![license](https://img.shields.io/npm/l/@ahmedalatawi/react-date-picker)
-![bundle size](https://img.shields.io/bundlephobia/minzip/@ahmedalatawi/react-date-picker)
+A beautiful, customizable date and time picker component for React with comprehensive built-in styling, multiple themes and localization support.
 
 ## Features
 
@@ -32,11 +34,13 @@ npm install @atawi/react-date-picker
 
 ## Setup
 
-The library works out of the box with comprehensive built-in styles. Simply import the component and start using it:
+Import the package stylesheet once in your app entry, then import components:
 
 ```tsx
 import { DateTimePicker } from "@atawi/react-date-picker";
 
+import "@atawi/react-date-picker/style.css";
+
 function App() {
   const [date, setDate] = useState(new Date());
 
@@ -58,6 +62,8 @@ The library includes comprehensive built-in styles that provide:
 ```tsx
 import { DateTimePicker } from "@atawi/react-date-picker";
 
+import "@atawi/react-date-picker/style.css";
+
 function App() {
   const [date, setDate] = useState(new Date());
 
@@ -65,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
@@ -189,6 +214,8 @@ const [isOpen, setIsOpen] = useState(false);
 ```tsx
 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';