cynx-ui 1.3.8 → 1.3.10

package/components/DatePicker.jsx

@@ -42,32 +42,15 @@ 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, label, placeholder = 'Select date', badges = {}, minDate, maxDate, disabled, showStepper = true, stepperPosition, style }) {
+export function DatePicker({ value, onChange, label, placeholder = 'Select date', badges = {}, minDate, maxDate, disabled, showStepper = true, stepperPosition = 'around', 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();
@@ -385,8 +368,7 @@ export function DatePicker({ value, onChange, label, placeholder = 'Select date'
     </button>
   );
 
-  const savedPos = stepperPosState || (typeof window !== 'undefined' ? localStorage.getItem('datepicker_stepper_position') : null);
-  const actualPos = stepperPosition || savedPos || 'around';
+  const actualPos = stepperPosition || 'around';
   const showStepperEffective = showStepper && actualPos !== 'off';
   const posMode = actualPos === 'left' || actualPos === 'start' ? 'left'
     : actualPos === 'right' || actualPos === 'end' ? 'right'

package/components/Divider.jsx

@@ -0,0 +1,96 @@
+import React from 'react';
+
+const SIZE_CONFIG = {
+  xs: { hMargin: '8px 0', vMargin: '0 4px', vHeight: '14px', fontSize: '.7rem', padding: '0 8px' },
+  sm: { hMargin: '12px 0', vMargin: '0 8px', vHeight: '18px', fontSize: '.75rem', padding: '0 10px' },
+  md: { hMargin: '16px 0', vMargin: '0 12px', vHeight: '24px', fontSize: '.82rem', padding: '0 12px' },
+  lg: { hMargin: '24px 0', vMargin: '0 16px', vHeight: '32px', fontSize: '.9rem', padding: '0 16px' },
+  xl: { hMargin: '32px 0', vMargin: '0 24px', vHeight: '48px', fontSize: '1rem', padding: '0 20px' },
+};
+
+export default function Divider({
+  children,
+  label,
+  orientation = 'horizontal',
+  align = 'center',
+  size = 'md',
+  color = 'var(--border-light, #ebebf0)',
+  thickness = 1,
+  variant = 'solid',
+  style = {},
+  className = '',
+  ...props
+}) {
+  const content = children || label;
+  const cfg = SIZE_CONFIG[size] || SIZE_CONFIG.md;
+  const thickStr = typeof thickness === 'number' ? `${thickness}px` : thickness;
+  const lineStyle = `${thickStr} ${variant} ${color}`;
+
+  if (orientation === 'vertical') {
+    return (
+      <div
+        className={`cynx-divider cynx-divider-vertical ${className}`}
+        style={{
+          display: 'inline-block',
+          width: 0,
+          height: style.height || cfg.vHeight,
+          margin: style.margin || cfg.vMargin,
+          borderLeft: lineStyle,
+          verticalAlign: 'middle',
+          alignSelf: 'center',
+          flexShrink: 0,
+          ...style,
+        }}
+        {...props}
+      />
+    );
+  }
+
+  // Horizontal Divider
+  if (content) {
+    const leftFlex = align === 'left' ? '0 0 16px' : '1';
+    const rightFlex = align === 'right' ? '0 0 16px' : '1';
+
+    return (
+      <div
+        className={`cynx-divider cynx-divider-horizontal ${className}`}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          width: '100%',
+          margin: style.margin || cfg.hMargin,
+          ...style,
+        }}
+        {...props}
+      >
+        <div style={{ flex: leftFlex, borderBottom: lineStyle }} />
+        <span
+          style={{
+            padding: cfg.padding,
+            fontSize: cfg.fontSize,
+            color: 'var(--muted, #9b9daa)',
+            fontWeight: 500,
+            whiteSpace: 'nowrap',
+            lineHeight: 1,
+          }}
+        >
+          {content}
+        </span>
+        <div style={{ flex: rightFlex, borderBottom: lineStyle }} />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={`cynx-divider cynx-divider-horizontal ${className}`}
+      style={{
+        width: '100%',
+        margin: style.margin || cfg.hMargin,
+        borderBottom: lineStyle,
+        ...style,
+      }}
+      {...props}
+    />
+  );
+}

package/index.js

@@ -38,9 +38,11 @@ import { XTable as _XTable, XThead as _XThead, XTbody as _XTbody, XTr as _XTr, X
 import { PageShell as _PageShell, TableCard as _TableCard, TableCardFilters as _TableCardFilters, TableCardBody as _TableCardBody, TableCardFooter as _TableCardFooter, CardHdr as _CardHdr, StatCard as _StatCard, StatCardSkeleton as _StatCardSkeleton } from './components/Card.jsx';
 
 import { default as _FilePicker } from './components/FilePicker.jsx';
+import { default as _Divider } from './components/Divider.jsx';
 
 export const Button = _Button;
 export const FilePicker = _FilePicker;
+export const Divider = _Divider;
 export const Input = _Input;
 export const Toggle = _Toggle;
 export const Spinner = _Spinner || _SpinnerNamed;

package/package.json

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