best-react-datepicker 0.2.2 → 0.2.4

package/README.md

@@ -2,6 +2,11 @@
 
 The most customizable, accessible, zero-dependency React date picker.
 
+<p align="center">
+  <img src="./assets/datepicker.png" alt="DatePicker" width="380"/>
+  <img src="./assets/dark-mode.png" alt="Dark mode" width="380"/>
+</p>
+
 - **7 picker components** — DatePicker, RangePicker, TimePicker, DateTimePicker, MonthPicker, YearPicker, WeekPicker
 - **Zero dependencies** — only React as a peer dependency
 - **Fully accessible** — keyboard navigation, ARIA labels, screen reader announcements
@@ -42,6 +47,8 @@ function App() {
 
 ### DatePicker
 
+<img src="./assets/datepicker.png" alt="DatePicker" width="380"/>
+
 Single date selection with optional constraints.
 
 ```tsx
@@ -59,6 +66,8 @@ Single date selection with optional constraints.
 
 ### RangePicker
 
+<img src="./assets/rangepicker.png" alt="RangePicker" width="720"/>
+
 Date range selection with optional presets.
 
 ```tsx
@@ -77,6 +86,8 @@ const presets = createPresets();
 
 **Compact mode** — single calendar with presets below:
 
+<img src="./assets/rangepicker-compact.png" alt="RangePicker compact" width="380"/>
+
 ```tsx
 <RangePicker
   value={range}
@@ -90,6 +101,8 @@ const presets = createPresets();
 
 ### TimePicker
 
+<img src="./assets/timepicker.png" alt="TimePicker" width="300"/>
+
 ```tsx
 <TimePicker
   value={time}
@@ -101,6 +114,8 @@ const presets = createPresets();
 
 ### DateTimePicker
 
+<img src="./assets/datetimepicker.png" alt="DateTimePicker" width="380"/>
+
 Combined date and time selection with tabbed interface.
 
 ```tsx
@@ -113,6 +128,8 @@ Combined date and time selection with tabbed interface.
 
 ### MonthPicker
 
+<img src="./assets/monthpicker.png" alt="MonthPicker" width="300"/>
+
 ```tsx
 <MonthPicker
   value={monthDate}
@@ -123,6 +140,8 @@ Combined date and time selection with tabbed interface.
 
 ### YearPicker
 
+<img src="./assets/yearpicker.png" alt="YearPicker" width="300"/>
+
 ```tsx
 <YearPicker
   value={year}
@@ -133,6 +152,8 @@ Combined date and time selection with tabbed interface.
 
 ### WeekPicker
 
+<img src="./assets/weekpicker.png" alt="WeekPicker" width="380"/>
+
 ```tsx
 <WeekPicker
   onChange={(start, end, weekNumber) => {
@@ -143,6 +164,8 @@ Combined date and time selection with tabbed interface.
 
 ## Size Variants
 
+<img src="./assets/sizes.png" alt="Size variants" width="640"/>
+
 All pickers accept a `size` prop: `"sm"`, `"md"` (default), or `"lg"`.
 
 ```tsx
@@ -182,6 +205,8 @@ Built-in preset keys: `today`, `yesterday`, `last7`, `last30`, `thisMonth`, `las
 
 ## Theming
 
+<img src="./assets/theming.png" alt="Theming" width="640"/>
+
 Override CSS variables to match your brand:
 
 ```tsx
@@ -196,6 +221,8 @@ Override CSS variables to match your brand:
 
 ### Dark Mode
 
+<img src="./assets/dark-mode.png" alt="Dark mode" width="380"/>
+
 ```tsx
 <div className="brdp-dark">
   <DatePicker placeholder="Dark mode" />

package/dist/index.cjs

@@ -663,12 +663,16 @@ var DatePicker = react.forwardRef(
     );
   }
 );
+function SwapArrow() {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", className: "brdp-unified__arrow-icon", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 8H12M12 8L9.5 5.5M12 8L9.5 10.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
 function RangePicker(props) {
   const {
     className,
     style,
     size,
     compact = false,
+    variant = "default",
     showPresets = false,
     presetsPosition = "left",
     renderDay,
@@ -715,6 +719,40 @@ function RangePicker(props) {
     },
     i
   )) });
+  const isUnified = variant === "unified";
+  const inputSection = isUnified ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `brdp-unified ${picker.isOpen ? "brdp-unified--focused" : ""}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ...startInputProps,
+        className: "brdp-unified__input"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "brdp-unified__separator", children: /* @__PURE__ */ jsxRuntime.jsx(SwapArrow, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ...endInputProps,
+        className: "brdp-unified__input"
+      }
+    )
+  ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "brdp-range-input", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ...startInputProps,
+        className: "brdp-input brdp-range-input__start"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "brdp-range-input__separator", children: picker.separator }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ...endInputProps,
+        className: "brdp-input brdp-range-input__end"
+      }
+    )
+  ] });
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -723,23 +761,7 @@ function RangePicker(props) {
       style: { ...sizeStyles, ...style },
       dir: dir ?? picker.locale.dir,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "brdp-range-input", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              ...startInputProps,
-              className: "brdp-input brdp-range-input__start"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "brdp-range-input__separator", children: picker.separator }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              ...endInputProps,
-              className: "brdp-input brdp-range-input__end"
-            }
-          )
-        ] }),
+        inputSection,
         /* @__PURE__ */ jsxRuntime.jsx(
           Popover,
           {