@dododog/ui 0.1.0 → 0.1.1

package/dist/{chunk-7LJS5LNR.js → chunk-NWLJ7VQF.js}

@@ -158,6 +158,7 @@ var DateRangePicker = React__namespace.forwardRef(
     const [calendarMonth, setCalendarMonth] = React__namespace.useState(() => checkIn || /* @__PURE__ */ new Date());
     const [activeDateField, setActiveDateField] = React__namespace.useState("arrival");
     const [isMobile, setIsMobile] = React__namespace.useState(false);
+    const [isNarrow, setIsNarrow] = React__namespace.useState(false);
     const internalRef = React__namespace.useRef(null);
     const setRefs = React__namespace.useCallback(
       (node) => {
@@ -174,6 +175,12 @@ var DateRangePicker = React__namespace.forwardRef(
       mq.addEventListener("change", handler);
       return () => mq.removeEventListener("change", handler);
     }, []);
+    React__namespace.useEffect(() => {
+      const checkNarrow = () => setIsNarrow(window.innerWidth < minWidth + 64);
+      checkNarrow();
+      window.addEventListener("resize", checkNarrow);
+      return () => window.removeEventListener("resize", checkNarrow);
+    }, [minWidth]);
     React__namespace.useEffect(() => {
       if (isOpen) {
         setActiveDateField("arrival");
@@ -335,6 +342,7 @@ var DateRangePicker = React__namespace.forwardRef(
       center: "left-1/2 -translate-x-1/2",
       right: "right-0"
     };
+    const singleMonth = isNarrow;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -343,15 +351,16 @@ var DateRangePicker = React__namespace.forwardRef(
           "absolute top-full mt-2 bg-white rounded-3xl shadow-2xl border z-[60] p-8 pb-10",
           positionClasses[position]
         ),
-        style: { minWidth: `${minWidth}px` },
+        style: singleMonth ? { width: "100%", maxWidth: "400px" } : { minWidth: `${minWidth}px` },
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-4", children: [
             /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => setCalendarMonth(addMonths(calendarMonth, -1)), className: "p-2 hover:bg-gray-100 rounded-full transition-colors", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "text-gray-600", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m15 18-6-6 6-6" }) }) }),
+            singleMonth && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold text-lg text-primary capitalize", children: formatMonthYear(calendarMonth) }),
             /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => setCalendarMonth(addMonths(calendarMonth, 1)), className: "p-2 hover:bg-gray-100 rounded-full transition-colors", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "text-gray-600", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m9 18 6-6-6-6" }) }) })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-12", children: [
-            renderMonth(calendarMonth),
-            renderMonth(addMonths(calendarMonth, 1))
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: singleMonth ? "" : "flex gap-12", children: [
+            renderMonth(calendarMonth, singleMonth),
+            !singleMonth && renderMonth(addMonths(calendarMonth, 1))
           ] }),
           (checkIn || checkOut) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right mt-4 pt-4 border-t border-gray-100", children: /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: clearDates, className: "text-sm text-primary underline hover:text-secondary transition-colors", children: "Effacer les dates" }) })
         ]

package/dist/{chunk-CNWUOKCY.mjs → chunk-RQGC6RPI.mjs}

@@ -136,6 +136,7 @@ var DateRangePicker = React.forwardRef(
     const [calendarMonth, setCalendarMonth] = React.useState(() => checkIn || /* @__PURE__ */ new Date());
     const [activeDateField, setActiveDateField] = React.useState("arrival");
     const [isMobile, setIsMobile] = React.useState(false);
+    const [isNarrow, setIsNarrow] = React.useState(false);
     const internalRef = React.useRef(null);
     const setRefs = React.useCallback(
       (node) => {
@@ -152,6 +153,12 @@ var DateRangePicker = React.forwardRef(
       mq.addEventListener("change", handler);
       return () => mq.removeEventListener("change", handler);
     }, []);
+    React.useEffect(() => {
+      const checkNarrow = () => setIsNarrow(window.innerWidth < minWidth + 64);
+      checkNarrow();
+      window.addEventListener("resize", checkNarrow);
+      return () => window.removeEventListener("resize", checkNarrow);
+    }, [minWidth]);
     React.useEffect(() => {
       if (isOpen) {
         setActiveDateField("arrival");
@@ -313,6 +320,7 @@ var DateRangePicker = React.forwardRef(
       center: "left-1/2 -translate-x-1/2",
       right: "right-0"
     };
+    const singleMonth = isNarrow;
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -321,15 +329,16 @@ var DateRangePicker = React.forwardRef(
           "absolute top-full mt-2 bg-white rounded-3xl shadow-2xl border z-[60] p-8 pb-10",
           positionClasses[position]
         ),
-        style: { minWidth: `${minWidth}px` },
+        style: singleMonth ? { width: "100%", maxWidth: "400px" } : { minWidth: `${minWidth}px` },
         children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
             /* @__PURE__ */ jsx("button", { onClick: () => setCalendarMonth(addMonths(calendarMonth, -1)), className: "p-2 hover:bg-gray-100 rounded-full transition-colors", children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "text-gray-600", children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" }) }) }),
+            singleMonth && /* @__PURE__ */ jsx("h3", { className: "font-semibold text-lg text-primary capitalize", children: formatMonthYear(calendarMonth) }),
             /* @__PURE__ */ jsx("button", { onClick: () => setCalendarMonth(addMonths(calendarMonth, 1)), className: "p-2 hover:bg-gray-100 rounded-full transition-colors", children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "text-gray-600", children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" }) }) })
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex gap-12", children: [
-            renderMonth(calendarMonth),
-            renderMonth(addMonths(calendarMonth, 1))
+          /* @__PURE__ */ jsxs("div", { className: singleMonth ? "" : "flex gap-12", children: [
+            renderMonth(calendarMonth, singleMonth),
+            !singleMonth && renderMonth(addMonths(calendarMonth, 1))
           ] }),
           (checkIn || checkOut) && /* @__PURE__ */ jsx("div", { className: "text-right mt-4 pt-4 border-t border-gray-100", children: /* @__PURE__ */ jsx("button", { onClick: clearDates, className: "text-sm text-primary underline hover:text-secondary transition-colors", children: "Effacer les dates" }) })
         ]

package/dist/components/DateRangePicker/index.js

@@ -1,15 +1,15 @@
 'use strict';
 
-var chunk7LJS5LNR_js = require('../../chunk-7LJS5LNR.js');
+var chunkNWLJ7VQF_js = require('../../chunk-NWLJ7VQF.js');
 require('../../chunk-ADIDI7AJ.js');
 
 
 
 Object.defineProperty(exports, "DatePickerInput", {
   enumerable: true,
-  get: function () { return chunk7LJS5LNR_js.DatePickerInput; }
+  get: function () { return chunkNWLJ7VQF_js.DatePickerInput; }
 });
 Object.defineProperty(exports, "DateRangePicker", {
   enumerable: true,
-  get: function () { return chunk7LJS5LNR_js.DateRangePicker; }
+  get: function () { return chunkNWLJ7VQF_js.DateRangePicker; }
 });

package/dist/components/DateRangePicker/index.mjs

@@ -1,2 +1,2 @@
-export { DatePickerInput, DateRangePicker } from '../../chunk-CNWUOKCY.mjs';
+export { DatePickerInput, DateRangePicker } from '../../chunk-RQGC6RPI.mjs';
 import '../../chunk-IMKLN273.mjs';

package/dist/index.js

@@ -42,7 +42,7 @@ var chunkIRKM5UF4_js = require('./chunk-IRKM5UF4.js');
 var chunkODUY7NXD_js = require('./chunk-ODUY7NXD.js');
 var chunkIJIUUBFT_js = require('./chunk-IJIUUBFT.js');
 var chunk3BPC4LNH_js = require('./chunk-3BPC4LNH.js');
-var chunk7LJS5LNR_js = require('./chunk-7LJS5LNR.js');
+var chunkNWLJ7VQF_js = require('./chunk-NWLJ7VQF.js');
 var chunkYSJAEDMG_js = require('./chunk-YSJAEDMG.js');
 var chunkXXC2YD3D_js = require('./chunk-XXC2YD3D.js');
 var chunkVWFY24XF_js = require('./chunk-VWFY24XF.js');
@@ -58,8 +58,8 @@ var chunkMY6BYO5F_js = require('./chunk-MY6BYO5F.js');
 var chunkP7GAKOCX_js = require('./chunk-P7GAKOCX.js');
 var chunkMCF3EQTV_js = require('./chunk-MCF3EQTV.js');
 var chunkWBRVUWGC_js = require('./chunk-WBRVUWGC.js');
-var chunkEY4ZIR3P_js = require('./chunk-EY4ZIR3P.js');
 var chunkNHB2TI2B_js = require('./chunk-NHB2TI2B.js');
+var chunkEY4ZIR3P_js = require('./chunk-EY4ZIR3P.js');
 var chunkADIDI7AJ_js = require('./chunk-ADIDI7AJ.js');
 
 
@@ -294,11 +294,11 @@ Object.defineProperty(exports, "Counter", {
 });
 Object.defineProperty(exports, "DatePickerInput", {
   enumerable: true,
-  get: function () { return chunk7LJS5LNR_js.DatePickerInput; }
+  get: function () { return chunkNWLJ7VQF_js.DatePickerInput; }
 });
 Object.defineProperty(exports, "DateRangePicker", {
   enumerable: true,
-  get: function () { return chunk7LJS5LNR_js.DateRangePicker; }
+  get: function () { return chunkNWLJ7VQF_js.DateRangePicker; }
 });
 Object.defineProperty(exports, "DetailList", {
   enumerable: true,
@@ -400,10 +400,6 @@ Object.defineProperty(exports, "Alert", {
   enumerable: true,
   get: function () { return chunkWBRVUWGC_js.Alert; }
 });
-Object.defineProperty(exports, "Avatar", {
-  enumerable: true,
-  get: function () { return chunkEY4ZIR3P_js.Avatar; }
-});
 Object.defineProperty(exports, "Autocomplete", {
   enumerable: true,
   get: function () { return chunkNHB2TI2B_js.Autocomplete; }
@@ -412,6 +408,10 @@ Object.defineProperty(exports, "autocompleteInputVariants", {
   enumerable: true,
   get: function () { return chunkNHB2TI2B_js.autocompleteInputVariants; }
 });
+Object.defineProperty(exports, "Avatar", {
+  enumerable: true,
+  get: function () { return chunkEY4ZIR3P_js.Avatar; }
+});
 Object.defineProperty(exports, "cn", {
   enumerable: true,
   get: function () { return chunkADIDI7AJ_js.cn; }

package/dist/index.mjs

@@ -40,7 +40,7 @@ export { Header } from './chunk-PPDKQ3FF.mjs';
 export { HotelCard } from './chunk-PXHZ4CXG.mjs';
 export { Checkbox } from './chunk-EEIPCJQ2.mjs';
 export { Counter } from './chunk-TNGW36OC.mjs';
-export { DatePickerInput, DateRangePicker } from './chunk-CNWUOKCY.mjs';
+export { DatePickerInput, DateRangePicker } from './chunk-RQGC6RPI.mjs';
 export { DetailList } from './chunk-76DZXGKJ.mjs';
 export { Divider } from './chunk-E4B6LXK7.mjs';
 export { Drawer } from './chunk-ZLF7IL3Y.mjs';
@@ -56,6 +56,6 @@ export { CardList } from './chunk-RJWHPHHX.mjs';
 export { Carousel } from './chunk-OOPP4ES2.mjs';
 export { Accordion } from './chunk-NZ7GF6RF.mjs';
 export { Alert } from './chunk-BQWVWK74.mjs';
-export { Avatar } from './chunk-2POGTS27.mjs';
 export { Autocomplete, autocompleteInputVariants } from './chunk-B47HQHX3.mjs';
+export { Avatar } from './chunk-2POGTS27.mjs';
 export { cn } from './chunk-IMKLN273.mjs';

package/package.json

@@ -1,15 +1,10 @@
 {
   "name": "@dododog/ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "React UI component library for DodoDog — pet-friendly travel platform",
   "sideEffects": false,
   "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/DodoDog-Voyage/Website.git",
-    "directory": "packages/ui"
-  },
-  "homepage": "https://github.com/DodoDog-Voyage/Website/tree/main/packages/ui#readme",
+  "homepage": "https://storybook.dododog.voyage",
   "keywords": [
     "react",
     "ui",