cynx-ui 1.2.38 → 1.2.40

package/components/Badge.jsx

@@ -41,8 +41,9 @@ function ensureStyles() {
 }
 
 const SIZE_MAP = {
+  xs: { padding: '1.5px 6px', fontSize: '9px' },
   sm: { padding: '2px 7px', fontSize: '10px' },
-  md: { padding: '3px 9px', fontSize: '10.5px' },
+  md: { padding: '3px 9px', fontSize: '11px' },
   lg: { padding: '4px 12px', fontSize: '12px' },
 };
 
@@ -53,9 +54,31 @@ const SHAPE_STYLE = {
   semicircle:(c) => ({ width: 7, height: 7, borderRadius: '50%', border: 'none', borderTop: '2px solid var(--bg,#fff)', background: c }),
 };
 
+const COLOR_MAP = {
+  green: '#10b981', passed: '#10b981', ok: '#10b981',
+  yellow: '#f97316', violation: '#f97316', warn: '#f97316', amber: '#f97316', orange: '#f97316',
+  red: '#ef4444', failed: '#ef4444', err: '#ef4444', danger: '#ef4444',
+  blue: '#3b82f6', conditional: '#3b82f6',
+  purple: '#8b5cf6',
+  indigo: '#6366f1',
+  cyan: '#06b6d4',
+  teal: '#14b8a6',
+  pink: '#ec4899',
+  grey: '#6b7280', gray: '#6b7280', dim: '#6b7280',
+};
+
+function resolveBadgeColor(cStr) {
+  if (!cStr) return null;
+  const c = cStr.toLowerCase();
+  if (COLOR_MAP[c]) return COLOR_MAP[c];
+  if (c.startsWith('#') || c.startsWith('rgb') || c.startsWith('hsl') || c.startsWith('var(')) return cStr;
+  return '#3b82f6';
+}
+
 export default function Badge({
   children,
   variant = 'dim',
+  color = null,
   size = 'md',
   dot = false,
   shape = null,
@@ -69,7 +92,14 @@ export default function Badge({
   const v = VARIANTS[variant] || VARIANTS.dim;
   const sz = SIZE_MAP[size] || SIZE_MAP.md;
   const shapeType = (shape === 'none' || shape === false) ? null : (shape || SHAPES[variant] || null);
-  const dotColor = v.dot || v.color;
+
+  const customHex = resolveBadgeColor(color);
+  const colorStyle = customHex ? {
+    color: customHex,
+    background: `${customHex}18`,
+    border: `1px solid ${customHex}33`,
+  } : {};
+  const dotColor = customHex || v.dot || v.color;
 
   return (
     <span
@@ -88,6 +118,7 @@ export default function Badge({
         whiteSpace: 'nowrap',
         transition: 'all .15s',
         cursor: onClick ? 'pointer' : undefined,
+        ...colorStyle,
         ...style,
       }}
       onClick={onClick}

package/components/DatePicker.jsx

@@ -42,7 +42,7 @@ 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, style }) {
+export function DatePicker({ value, onChange, 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());
@@ -51,6 +51,24 @@ export function DatePicker({ value, onChange, placeholder = 'Select date', badge
   const btnRef = useRef(null);
   const dropRef = useRef(null);
 
+  const changeDay = (delta) => {
+    if (disabled) return;
+    const current = toDate(value) || new Date();
+    const next = new Date(current.getFullYear(), current.getMonth(), current.getDate() + delta);
+
+    if (minDate && next < new Date(new Date(minDate).setHours(0, 0, 0, 0))) return;
+    if (maxDate && next > new Date(new Date(maxDate).setHours(23, 59, 59, 999))) return;
+
+    if (typeof value === 'string') {
+      const y = next.getFullYear();
+      const m = pad(next.getMonth() + 1);
+      const d = pad(next.getDate());
+      onChange?.(`${y}-${m}-${d}`);
+    } else {
+      onChange?.(next);
+    }
+  };
+
   // Close on outside click
   useEffect(() => {
     if (!open) return;
@@ -272,32 +290,89 @@ export function DatePicker({ value, onChange, placeholder = 'Select date', badge
     ? `${cursor.getFullYear()}`
     : `${Math.floor(cursor.getFullYear()/12)*12} – ${Math.floor(cursor.getFullYear()/12)*12+11}`;
 
-  return (
-    <div ref={ref} style={{ position: 'relative', display: 'inline-block', ...style }}>
-      {/* Trigger */}
-      <button ref={btnRef} type="button" onClick={toggleOpen} style={{
-        display: 'flex', alignItems: 'center', gap: 7,
-        padding: '5px 10px', borderRadius: 'var(--rads)',
+  const renderPrevBtn = () => (
+    <button
+      type="button"
+      disabled={disabled}
+      onClick={(e) => { e.stopPropagation(); changeDay(-1); }}
+      style={{
+        display: 'flex', alignItems: 'center', justifyContent: 'center',
+        width: 32, height: 32, borderRadius: 'var(--rads)',
+        border: '1px solid var(--border)', background: 'var(--surface)',
+        cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? 0.5 : 1,
+        color: 'var(--muted)', transition: 'all .15s', boxShadow: 'var(--shadow)',
+        flexShrink: 0
+      }}
+      title="Previous day (-1)"
+      onMouseEnter={e => { if (!disabled) { e.currentTarget.style.borderColor = 'var(--accent)'; e.currentTarget.style.color = 'var(--accent)'; } }}
+      onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border)'; e.currentTarget.style.color = 'var(--muted)'; }}
+    >
+      <ChevronLeft size={15} />
+    </button>
+  );
+
+  const renderNextBtn = () => (
+    <button
+      type="button"
+      disabled={disabled}
+      onClick={(e) => { e.stopPropagation(); changeDay(1); }}
+      style={{
+        display: 'flex', alignItems: 'center', justifyContent: 'center',
+        width: 32, height: 32, borderRadius: 'var(--rads)',
         border: '1px solid var(--border)', background: 'var(--surface)',
         cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? 0.5 : 1,
-        fontSize: '.8rem', color: formatted ? 'var(--primary-text)' : 'var(--muted)',
-        fontFamily: 'var(--sans)', transition: 'border-color .15s',
-        whiteSpace: 'nowrap', minWidth: 140, height: 32, boxShadow: 'var(--shadow)',
+        color: 'var(--muted)', transition: 'all .15s', boxShadow: 'var(--shadow)',
+        flexShrink: 0
       }}
-      onMouseEnter={e => { if (!disabled) e.currentTarget.style.borderColor = 'var(--accent)'; }}
-      onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border)'; }}>
-        <Calendar size={13} style={{ color: 'var(--muted)', flexShrink: 0 }} />
-        <span style={{ flex: 1, textAlign: 'left' }}>{formatted || placeholder}</span>
-        {value && (
-          <span
-            onClick={e => { e.stopPropagation(); onChange?.(null); }}
-            style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--muted)', cursor: 'pointer', flexShrink: 0, fontSize: 13, lineHeight: 1, padding: '0 2px' }}
-            onMouseEnter={e => { e.currentTarget.style.color = 'var(--danger)'; }}
-            onMouseLeave={e => { e.currentTarget.style.color = 'var(--muted)'; }}>
-            ✕
-          </span>
-        )}
-      </button>
+      title="Next day (+1)"
+      onMouseEnter={e => { if (!disabled) { e.currentTarget.style.borderColor = 'var(--accent)'; e.currentTarget.style.color = 'var(--accent)'; } }}
+      onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border)'; e.currentTarget.style.color = 'var(--muted)'; }}
+    >
+      <ChevronRight size={15} />
+    </button>
+  );
+
+  const renderTriggerBtn = () => (
+    <button ref={btnRef} type="button" onClick={toggleOpen} style={{
+      display: 'flex', alignItems: 'center', gap: 7,
+      padding: '5px 10px', borderRadius: 'var(--rads)',
+      border: '1px solid var(--border)', background: 'var(--surface)',
+      cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? 0.5 : 1,
+      fontSize: '.8rem', color: formatted ? 'var(--primary-text)' : 'var(--muted)',
+      fontFamily: 'var(--sans)', transition: 'border-color .15s',
+      whiteSpace: 'nowrap', minWidth: 140, height: 32, boxShadow: 'var(--shadow)',
+    }}
+    onMouseEnter={e => { if (!disabled) e.currentTarget.style.borderColor = 'var(--accent)'; }}
+    onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border)'; }}>
+      <Calendar size={13} style={{ color: 'var(--muted)', flexShrink: 0 }} />
+      <span style={{ flex: 1, textAlign: 'left' }}>{formatted || placeholder}</span>
+      {value && (
+        <span
+          onClick={e => { e.stopPropagation(); onChange?.(null); }}
+          style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--muted)', cursor: 'pointer', flexShrink: 0, fontSize: 13, lineHeight: 1, padding: '0 2px' }}
+          onMouseEnter={e => { e.currentTarget.style.color = 'var(--danger)'; }}
+          onMouseLeave={e => { e.currentTarget.style.color = 'var(--muted)'; }}>
+          ✕
+        </span>
+      )}
+    </button>
+  );
+
+  const posMode = stepperPosition === 'left' || stepperPosition === 'start' ? 'left'
+    : stepperPosition === 'right' || stepperPosition === '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()}
+
+      {renderTriggerBtn()}
+
+      {showStepper && posMode === 'around' && renderNextBtn()}
+      {showStepper && posMode === 'right' && renderPrevBtn()}
+      {showStepper && posMode === 'right' && renderNextBtn()}
 
       {/* Dropdown via portal */}
       {open && createPortal(

package/package.json

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