cynx-ui 1.2.40 → 1.2.42

package/components/DatePicker.jsx

@@ -42,15 +42,32 @@ function isSameDay(a, b) {
 }
 function isToday(y, m, d) { const t = new Date(); return t.getFullYear()===y && t.getMonth()===m && t.getDate()===d; }
 
-export function DatePicker({ value, onChange, placeholder = 'Select date', badges = {}, minDate, maxDate, disabled, showStepper = true, stepperPosition = 'around', style }) {
+export function DatePicker({ value, onChange, placeholder = 'Select date', badges = {}, minDate, maxDate, disabled, showStepper = true, stepperPosition, style }) {
   const [open,    setOpen]    = useState(false);
   const [view,    setView]    = useState('day');    // 'day' | 'month' | 'year'
   const [cursor,  setCursor]  = useState(() => toDate(value) || new Date());
   const [pos,     setPos]     = useState({ top: 0, left: 0, width: 0 });
+  const [localStepperPos, setLocalStepperPos] = useState(() => {
+    return typeof window !== 'undefined' ? (localStorage.getItem('datepicker_stepper_position') || 'around') : 'around';
+  });
   const ref = useRef(null);
   const btnRef = useRef(null);
   const dropRef = useRef(null);
 
+  useEffect(() => {
+    function syncPos() {
+      if (typeof window !== 'undefined') {
+        setLocalStepperPos(localStorage.getItem('datepicker_stepper_position') || 'around');
+      }
+    }
+    window.addEventListener('storage', syncPos);
+    window.addEventListener('datepicker-pos-changed', syncPos);
+    return () => {
+      window.removeEventListener('storage', syncPos);
+      window.removeEventListener('datepicker-pos-changed', syncPos);
+    };
+  }, []);
+
   const changeDay = (delta) => {
     if (disabled) return;
     const current = toDate(value) || new Date();
@@ -358,21 +375,23 @@ export function DatePicker({ value, onChange, placeholder = 'Select date', badge
     </button>
   );
 
-  const posMode = stepperPosition === 'left' || stepperPosition === 'start' ? 'left'
-    : stepperPosition === 'right' || stepperPosition === 'end' ? 'right'
+  const actualPos = stepperPosition || localStepperPos || 'around';
+  const showStepperEffective = showStepper && actualPos !== 'off';
+  const posMode = actualPos === 'left' || actualPos === 'start' ? 'left'
+    : actualPos === 'right' || actualPos === 'end' ? 'right'
     : 'around';
 
   return (
     <div ref={ref} style={{ position: 'relative', display: 'inline-flex', alignItems: 'center', gap: 4, ...style }}>
-      {showStepper && posMode === 'around' && renderPrevBtn()}
-      {showStepper && posMode === 'left' && renderPrevBtn()}
-      {showStepper && posMode === 'left' && renderNextBtn()}
+      {showStepperEffective && posMode === 'around' && renderPrevBtn()}
+      {showStepperEffective && posMode === 'left' && renderPrevBtn()}
+      {showStepperEffective && posMode === 'left' && renderNextBtn()}
 
       {renderTriggerBtn()}
 
-      {showStepper && posMode === 'around' && renderNextBtn()}
-      {showStepper && posMode === 'right' && renderPrevBtn()}
-      {showStepper && posMode === 'right' && renderNextBtn()}
+      {showStepperEffective && posMode === 'around' && renderNextBtn()}
+      {showStepperEffective && posMode === 'right' && renderPrevBtn()}
+      {showStepperEffective && posMode === 'right' && renderNextBtn()}
 
       {/* Dropdown via portal */}
       {open && createPortal(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cynx-ui",
-  "version": "1.2.40",
+  "version": "1.2.42",
   "type": "module",
   "exports": {
     ".": "./index.js"