cynx-lib 1.3.76 → 1.3.78

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cynx-lib",
-  "version": "1.3.76",
+  "version": "1.3.78",
   "type": "module",
   "main": "./index.cjs",
   "module": "./index.js",

package/ui/components/DatePicker.jsx

@@ -97,8 +97,7 @@ export function DatePicker({
   maxDate,
   disabled,
   size = 'md',
-  showStepper = false,
-  stepperPosition = 'off',
+  stepper = 'off',
   locale = 'en',
   style,
   fullWidth = false,
@@ -833,12 +832,6 @@ export function DatePicker({
     </button>
   );
 
-  const actualPos = stepperPosition || 'around';
-  const showStepperEffective = showStepper && actualPos !== 'off';
-  const posMode = actualPos === 'left' || actualPos === 'start' ? 'left'
-    : actualPos === 'right' || actualPos === 'end' ? 'right'
-    : 'around';
-
   return (
     <div style={{
       display: fullWidth || style?.display === 'flex' ? 'flex' : 'inline-flex',
@@ -864,15 +857,23 @@ export function DatePicker({
         maxWidth: '100%',
         minWidth: 0,
       }}>
-        {showStepperEffective && posMode === 'around' && renderPrevBtn()}
-        {showStepperEffective && posMode === 'left' && renderPrevBtn()}
-        {showStepperEffective && posMode === 'left' && renderNextBtn()}
+        {stepper === 'around' && renderPrevBtn()}
+        {stepper === 'left' && (
+          <>
+            {renderPrevBtn()}
+            {renderNextBtn()}
+          </>
+        )}
 
         {renderTriggerBtn()}
 
-        {showStepperEffective && posMode === 'around' && renderNextBtn()}
-        {showStepperEffective && posMode === 'right' && renderPrevBtn()}
-        {showStepperEffective && posMode === 'right' && renderNextBtn()}
+        {stepper === 'around' && renderNextBtn()}
+        {stepper === 'right' && (
+          <>
+            {renderPrevBtn()}
+            {renderNextBtn()}
+          </>
+        )}
       </div>
 
       {/* Dropdown via portal */}

package/ui/components/Divider.jsx

@@ -14,7 +14,7 @@ export default function Divider({
   orientation = 'horizontal',
   align = 'center',
   size = 'md',
-  color = 'var(--border-light, #ebebf0)',
+  color = 'var(--border, #d7d8e0)',
   thickness = 1,
   variant = 'solid',
   style = {},

package/vue/components/DatePicker.vue

@@ -151,8 +151,7 @@ const props = withDefaults(
     maxDate?: any;
     disabled?: boolean;
     size?: "xs" | "sm" | "md" | "lg";
-    showStepper?: boolean;
-    stepperPosition?: "off" | "around" | "left" | "right" | "start" | "end";
+    stepper?: "off" | "around" | "left" | "right";
     locale?: "en" | "ru" | DatePickerLocale | string;
     clearable?: boolean;
     fullWidth?: boolean;
@@ -174,8 +173,7 @@ const props = withDefaults(
     maxDate: undefined,
     disabled: false,
     size: "md",
-    showStepper: false,
-    stepperPosition: "off",
+    stepper: "off",
     locale: "en",
     clearable: true,
     fullWidth: false,
@@ -644,15 +642,6 @@ const isYearDisabled = (yr: number) => {
   return Boolean(disMin || disMax);
 };
 
-const showStepperEffective = computed(
-  () => props.showStepper && props.stepperPosition !== "off"
-);
-const posMode = computed(() => {
-  const p = props.stepperPosition;
-  if (p === "left" || p === "start") return "left";
-  if (p === "right" || p === "end") return "right";
-  return "around";
-});
 </script>
 
 <template>
@@ -698,7 +687,7 @@ const posMode = computed(() => {
     >
       <!-- Left stepper buttons -->
       <button
-        v-if="showStepperEffective && (posMode === 'around' || posMode === 'left')"
+        v-if="props.stepper === 'around' || props.stepper === 'left'"
         type="button"
         :disabled="disabled || isCellDisabled(new Date(new Date(valDate || new Date()).setDate((valDate || new Date()).getDate() - 1)))"
         style="
@@ -725,6 +714,34 @@ const posMode = computed(() => {
         <ChevronLeft :size="s.iconSize + 2" />
       </button>
 
+      <button
+        v-if="props.stepper === 'left'"
+        type="button"
+        :disabled="disabled || isCellDisabled(new Date(new Date(valDate || new Date()).setDate((valDate || new Date()).getDate() + 1)))"
+        style="
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: var(--rads, 8px);
+          border: 1px solid var(--border, #e2e8f0);
+          background: var(--surface, #ffffff);
+          color: var(--muted, #797b8d);
+          box-shadow: var(--shadow, 0 1px 3px rgba(0,0,0,.08));
+          flex-shrink: 0;
+          cursor: pointer;
+          transition: all .15s;
+        "
+        :style="{
+          width: `${s.btnSize}px`,
+          height: `${s.btnSize}px`,
+          opacity: disabled ? 0.35 : 1,
+        }"
+        title="Next day (+1)"
+        @click.stop="changeDay(1)"
+      >
+        <ChevronRight :size="s.iconSize + 2" />
+      </button>
+
       <!-- Trigger button -->
       <button
         ref="btnRef"
@@ -794,7 +811,35 @@ const posMode = computed(() => {
 
       <!-- Right stepper buttons -->
       <button
-        v-if="showStepperEffective && (posMode === 'around' || posMode === 'right')"
+        v-if="props.stepper === 'right'"
+        type="button"
+        :disabled="disabled || isCellDisabled(new Date(new Date(valDate || new Date()).setDate((valDate || new Date()).getDate() - 1)))"
+        style="
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: var(--rads, 8px);
+          border: 1px solid var(--border, #e2e8f0);
+          background: var(--surface, #ffffff);
+          color: var(--muted, #797b8d);
+          box-shadow: var(--shadow, 0 1px 3px rgba(0,0,0,.08));
+          flex-shrink: 0;
+          cursor: pointer;
+          transition: all .15s;
+        "
+        :style="{
+          width: `${s.btnSize}px`,
+          height: `${s.btnSize}px`,
+          opacity: disabled ? 0.35 : 1,
+        }"
+        title="Previous day (-1)"
+        @click.stop="changeDay(-1)"
+      >
+        <ChevronLeft :size="s.iconSize + 2" />
+      </button>
+
+      <button
+        v-if="props.stepper === 'around' || props.stepper === 'right'"
         type="button"
         :disabled="disabled || isCellDisabled(new Date(new Date(valDate || new Date()).setDate((valDate || new Date()).getDate() + 1)))"
         style="

package/vue/components/Divider.vue

@@ -23,7 +23,7 @@ const props = withDefaults(
     orientation: "horizontal",
     align: "center",
     size: "md",
-    color: "var(--border-light, #ebebf0)",
+    color: "var(--border, #d7d8e0)",
     thickness: 1,
     variant: "solid",
   }