cynx-ui 1.3.13 → 1.3.14

package/components/DatePicker.jsx

@@ -139,6 +139,12 @@ export function DatePicker({ value, onChange, label, placeholder = 'Select date'
   };
 
   function pick(date) {
+    if (!date) return;
+    const minD = toDate(minDate);
+    const maxD = toDate(maxDate);
+    if (minD && date < new Date(new Date(minD).setHours(0, 0, 0, 0))) return;
+    if (maxD && date > new Date(new Date(maxD).setHours(23, 59, 59, 999))) return;
+
     if (typeof value === 'string') {
       const y = date.getFullYear();
       const m = pad(date.getMonth() + 1);
@@ -151,7 +157,49 @@ export function DatePicker({ value, onChange, label, placeholder = 'Select date'
     setView('day');
   }
 
+  const isNavNextDisabled = () => {
+    const maxD = toDate(maxDate);
+    if (!maxD) return false;
+    const y = cursor.getFullYear(), m = cursor.getMonth();
+    if (view === 'day') {
+      const nextMonthStart = new Date(y, m + 1, 1);
+      return nextMonthStart > new Date(new Date(maxD).setHours(23, 59, 59, 999));
+    }
+    if (view === 'month') {
+      const nextYearStart = new Date(y + 1, 0, 1);
+      return nextYearStart > new Date(new Date(maxD).setHours(23, 59, 59, 999));
+    }
+    if (view === 'year') {
+      const base = Math.floor(y / 12) * 12;
+      const nextBlockStart = new Date(base + 12, 0, 1);
+      return nextBlockStart > new Date(new Date(maxD).setHours(23, 59, 59, 999));
+    }
+    return false;
+  };
+
+  const isNavPrevDisabled = () => {
+    const minD = toDate(minDate);
+    if (!minD) return false;
+    const y = cursor.getFullYear(), m = cursor.getMonth();
+    if (view === 'day') {
+      const prevMonthEnd = new Date(y, m, 0, 23, 59, 59, 999);
+      return prevMonthEnd < new Date(new Date(minD).setHours(0, 0, 0, 0));
+    }
+    if (view === 'month') {
+      const prevYearEnd = new Date(y - 1, 11, 31, 23, 59, 59, 999);
+      return prevYearEnd < new Date(new Date(minD).setHours(0, 0, 0, 0));
+    }
+    if (view === 'year') {
+      const base = Math.floor(y / 12) * 12;
+      const prevBlockEnd = new Date(base - 1, 11, 31, 23, 59, 59, 999);
+      return prevBlockEnd < new Date(new Date(minD).setHours(0, 0, 0, 0));
+    }
+    return false;
+  };
+
   function nav(dir) {
+    if (dir > 0 && isNavNextDisabled()) return;
+    if (dir < 0 && isNavPrevDisabled()) return;
     const c = new Date(cursor);
     if (view === 'day')   { c.setMonth(c.getMonth() + dir); }
     if (view === 'month') { c.setFullYear(c.getFullYear() + dir); }
@@ -190,6 +238,9 @@ export function DatePicker({ value, onChange, label, placeholder = 'Select date'
     for (let d = 1; d <= remaining; d++)
       cells.push({ day: d, cur: false, next: true });
 
+    const minD = toDate(minDate);
+    const maxD = toDate(maxDate);
+
     return (
       <div>
         {/* Weekday headers */}
@@ -206,11 +257,26 @@ export function DatePicker({ value, onChange, label, placeholder = 'Select date'
               const date = isPrev
                 ? new Date(y, m - 1, c.day)
                 : new Date(y, m + 1, c.day);
+              const disMin = minD && date < new Date(new Date(minD).setHours(0,0,0,0));
+              const disMax = maxD && date > new Date(new Date(maxD).setHours(23,59,59,999));
+              const dis    = disMin || disMax;
               return (
-                <div key={i} onClick={() => { pick(date); }}
-                  style={{ textAlign: 'center', padding: '6px 2px', fontSize: '.78rem', color: 'var(--muted)', cursor: 'pointer', borderRadius: 'var(--radxs, 6px)', transition: 'background .12s' }}
-                  onMouseEnter={e => e.currentTarget.style.background = 'var(--grey-1)'}
-                  onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
+                <div
+                  key={i}
+                  onClick={() => { if (!dis) pick(date); }}
+                  style={{
+                    textAlign: 'center',
+                    padding: '6px 2px',
+                    fontSize: '.78rem',
+                    color: dis ? 'var(--border, #e5e7eb)' : 'var(--muted)',
+                    cursor: dis ? 'not-allowed' : 'pointer',
+                    borderRadius: 'var(--radxs, 6px)',
+                    transition: 'background .12s',
+                    opacity: dis ? 0.35 : 0.7,
+                  }}
+                  onMouseEnter={e => { if (!dis) e.currentTarget.style.background = 'var(--grey-1)'; }}
+                  onMouseLeave={e => { if (!dis) e.currentTarget.style.background = 'transparent'; }}
+                >
                   {c.day}
                 </div>
               );
@@ -220,8 +286,6 @@ export function DatePicker({ value, onChange, label, placeholder = 'Select date'
             const badge  = badges[key];
             const sel    = isSameDay(date, value);
             const today  = isToday(y, m, c.day);
-            const minD   = toDate(minDate);
-            const maxD   = toDate(maxDate);
             const disMin = minD && date < new Date(new Date(minD).setHours(0,0,0,0));
             const disMax = maxD && date > new Date(new Date(maxD).setHours(23,59,59,999));
             const dis    = disMin || disMax;
@@ -234,6 +298,7 @@ export function DatePicker({ value, onChange, label, placeholder = 'Select date'
                 color: sel ? 'var(--def-btn-text,#fff)' : dis ? 'var(--border)' : today ? 'var(--accent)' : 'var(--primary-text)',
                 border: today && !sel ? '1.5px solid var(--accent)' : '1.5px solid transparent',
                 transition: 'background .12s, color .12s',
+                opacity: dis ? 0.35 : 1,
               }}
               onMouseEnter={e => { if (!sel && !dis) e.currentTarget.style.background = 'var(--grey-1)'; }}
               onMouseLeave={e => { if (!sel && !dis) e.currentTarget.style.background = 'transparent'; }}>
@@ -256,17 +321,44 @@ export function DatePicker({ value, onChange, label, placeholder = 'Select date'
   // ── Month grid ───────────────────────────────────────────────
   function renderMonths() {
     const y = cursor.getFullYear();
+    const minD = toDate(minDate);
+    const maxD = toDate(maxDate);
+
     return (
       <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 4, padding: '4px 0' }}>
         {MONTHS.map((name, i) => {
           const sel = value && value.getFullYear() === y && value.getMonth() === i;
+          const monthStart = new Date(y, i, 1);
+          const monthEnd   = new Date(y, i + 1, 0, 23, 59, 59, 999);
+          const disMin = minD && monthEnd < new Date(new Date(minD).setHours(0, 0, 0, 0));
+          const disMax = maxD && monthStart > new Date(new Date(maxD).setHours(23, 59, 59, 999));
+          const dis = disMin || disMax;
+
           return (
-            <div key={i} onClick={() => { const c = new Date(cursor); c.setMonth(i); setCursor(c); setView('day'); }}
-              style={{ textAlign: 'center', padding: '10px 4px', borderRadius: 'var(--radxs, 6px)', fontSize: '.82rem', fontWeight: 600, cursor: 'pointer',
-                background: sel ? 'var(--accent)' : 'transparent', color: sel ? 'var(--def-btn-text,#fff)' : 'var(--primary-text)',
-                transition: 'background .12s', }}
-              onMouseEnter={e => { if (!sel) e.currentTarget.style.background = 'var(--grey-1)'; }}
-              onMouseLeave={e => { if (!sel) e.currentTarget.style.background = 'transparent'; }}>
+            <div
+              key={i}
+              onClick={() => {
+                if (dis) return;
+                const c = new Date(cursor);
+                c.setMonth(i);
+                setCursor(c);
+                setView('day');
+              }}
+              style={{
+                textAlign: 'center',
+                padding: '10px 4px',
+                borderRadius: 'var(--radxs, 6px)',
+                fontSize: '.82rem',
+                fontWeight: 600,
+                cursor: dis ? 'not-allowed' : 'pointer',
+                opacity: dis ? 0.35 : 1,
+                background: sel ? 'var(--accent)' : 'transparent',
+                color: sel ? 'var(--def-btn-text,#fff)' : dis ? 'var(--border)' : 'var(--primary-text)',
+                transition: 'background .12s',
+              }}
+              onMouseEnter={e => { if (!sel && !dis) e.currentTarget.style.background = 'var(--grey-1)'; }}
+              onMouseLeave={e => { if (!sel && !dis) e.currentTarget.style.background = 'transparent'; }}
+            >
               {name}
             </div>
           );
@@ -279,17 +371,44 @@ export function DatePicker({ value, onChange, label, placeholder = 'Select date'
   function renderYears() {
     const base = Math.floor(cursor.getFullYear() / 12) * 12;
     const years = Array.from({ length: 12 }, (_, i) => base + i);
+    const minD = toDate(minDate);
+    const maxD = toDate(maxDate);
+
     return (
       <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 4, padding: '4px 0' }}>
         {years.map(yr => {
           const sel = value && value.getFullYear() === yr;
+          const yrStart = new Date(yr, 0, 1);
+          const yrEnd   = new Date(yr, 11, 31, 23, 59, 59, 999);
+          const disMin = minD && yrEnd < new Date(new Date(minD).setHours(0, 0, 0, 0));
+          const disMax = maxD && yrStart > new Date(new Date(maxD).setHours(23, 59, 59, 999));
+          const dis = disMin || disMax;
+
           return (
-            <div key={yr} onClick={() => { const c = new Date(cursor); c.setFullYear(yr); setCursor(c); setView('month'); }}
-              style={{ textAlign: 'center', padding: '10px 4px', borderRadius: 'var(--radxs, 6px)', fontSize: '.82rem', fontWeight: 600, cursor: 'pointer',
-                background: sel ? 'var(--accent)' : 'transparent', color: sel ? 'var(--def-btn-text,#fff)' : 'var(--primary-text)',
-                transition: 'background .12s', }}
-              onMouseEnter={e => { if (!sel) e.currentTarget.style.background = 'var(--grey-1)'; }}
-              onMouseLeave={e => { if (!sel) e.currentTarget.style.background = 'transparent'; }}>
+            <div
+              key={yr}
+              onClick={() => {
+                if (dis) return;
+                const c = new Date(cursor);
+                c.setFullYear(yr);
+                setCursor(c);
+                setView('month');
+              }}
+              style={{
+                textAlign: 'center',
+                padding: '10px 4px',
+                borderRadius: 'var(--radxs, 6px)',
+                fontSize: '.82rem',
+                fontWeight: 600,
+                cursor: dis ? 'not-allowed' : 'pointer',
+                opacity: dis ? 0.35 : 1,
+                background: sel ? 'var(--accent)' : 'transparent',
+                color: sel ? 'var(--def-btn-text,#fff)' : dis ? 'var(--border)' : 'var(--primary-text)',
+                transition: 'background .12s',
+              }}
+              onMouseEnter={e => { if (!sel && !dis) e.currentTarget.style.background = 'var(--grey-1)'; }}
+              onMouseLeave={e => { if (!sel && !dis) e.currentTarget.style.background = 'transparent'; }}
+            >
               {yr}
             </div>
           );
@@ -304,47 +423,71 @@ export function DatePicker({ value, onChange, label, placeholder = 'Select date'
     ? `${cursor.getFullYear()}`
     : `${Math.floor(cursor.getFullYear()/12)*12} – ${Math.floor(cursor.getFullYear()/12)*12+11}`;
 
-  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 isNextDisabled = () => {
+    if (disabled) return true;
+    const maxD = toDate(maxDate);
+    if (!maxD) return false;
+    const current = toDate(value) || new Date();
+    const next = new Date(current.getFullYear(), current.getMonth(), current.getDate() + 1);
+    return next > new Date(new Date(maxD).setHours(23, 59, 59, 999));
+  };
 
-  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,
-        color: 'var(--muted)', transition: 'all .15s', boxShadow: 'var(--shadow)',
-        flexShrink: 0
-      }}
-      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 isPrevDisabled = () => {
+    if (disabled) return true;
+    const minD = toDate(minDate);
+    if (!minD) return false;
+    const current = toDate(value) || new Date();
+    const prev = new Date(current.getFullYear(), current.getMonth(), current.getDate() - 1);
+    return prev < new Date(new Date(minD).setHours(0, 0, 0, 0));
+  };
+
+  const renderPrevBtn = () => {
+    const dis = isPrevDisabled();
+    return (
+      <button
+        type="button"
+        disabled={dis}
+        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: dis ? 'not-allowed' : 'pointer', opacity: dis ? 0.35 : 1,
+          color: 'var(--muted)', transition: 'all .15s', boxShadow: 'var(--shadow)',
+          flexShrink: 0
+        }}
+        title="Previous day (-1)"
+        onMouseEnter={e => { if (!dis) { 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 = () => {
+    const dis = isNextDisabled();
+    return (
+      <button
+        type="button"
+        disabled={dis}
+        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: dis ? 'not-allowed' : 'pointer', opacity: dis ? 0.35 : 1,
+          color: 'var(--muted)', transition: 'all .15s', boxShadow: 'var(--shadow)',
+          flexShrink: 0
+        }}
+        title="Next day (+1)"
+        onMouseEnter={e => { if (!dis) { 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={{
@@ -408,9 +551,20 @@ export function DatePicker({ value, onChange, label, placeholder = 'Select date'
         }}>
           {/* Calendar header */}
           <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
-            <button type="button" onClick={() => nav(-1)} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 4, borderRadius: 'var(--radxs, 6px)', color: 'var(--muted)', display: 'flex', alignItems: 'center' }}
-              onMouseEnter={e => e.currentTarget.style.background = 'var(--grey-1)'}
-              onMouseLeave={e => e.currentTarget.style.background = 'none'}>
+            <button
+              type="button"
+              disabled={isNavPrevDisabled()}
+              onClick={() => nav(-1)}
+              style={{
+                background: 'none', border: 'none',
+                cursor: isNavPrevDisabled() ? 'not-allowed' : 'pointer',
+                opacity: isNavPrevDisabled() ? 0.35 : 1,
+                padding: 4, borderRadius: 'var(--radxs, 6px)',
+                color: 'var(--muted)', display: 'flex', alignItems: 'center'
+              }}
+              onMouseEnter={e => { if (!isNavPrevDisabled()) e.currentTarget.style.background = 'var(--grey-1)'; }}
+              onMouseLeave={e => e.currentTarget.style.background = 'none'}
+            >
               <ChevronLeft size={15} />
             </button>
             <button type="button" onClick={cycleView} style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: '.82rem', fontWeight: 700, color: 'var(--primary-text)', padding: '4px 8px', borderRadius: 'var(--radxs, 6px)', fontFamily: 'var(--sans)' }}
@@ -418,9 +572,20 @@ export function DatePicker({ value, onChange, label, placeholder = 'Select date'
               onMouseLeave={e => e.currentTarget.style.background = 'none'}>
               {headerLabel}
             </button>
-            <button type="button" onClick={() => nav(1)} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 4, borderRadius: 'var(--radxs, 6px)', color: 'var(--muted)', display: 'flex', alignItems: 'center' }}
-              onMouseEnter={e => e.currentTarget.style.background = 'var(--grey-1)'}
-              onMouseLeave={e => e.currentTarget.style.background = 'none'}>
+            <button
+              type="button"
+              disabled={isNavNextDisabled()}
+              onClick={() => nav(1)}
+              style={{
+                background: 'none', border: 'none',
+                cursor: isNavNextDisabled() ? 'not-allowed' : 'pointer',
+                opacity: isNavNextDisabled() ? 0.35 : 1,
+                padding: 4, borderRadius: 'var(--radxs, 6px)',
+                color: 'var(--muted)', display: 'flex', alignItems: 'center'
+              }}
+              onMouseEnter={e => { if (!isNavNextDisabled()) e.currentTarget.style.background = 'var(--grey-1)'; }}
+              onMouseLeave={e => e.currentTarget.style.background = 'none'}
+            >
               <ChevronRight size={15} />
             </button>
           </div>

package/components/TabBar.jsx

@@ -123,11 +123,12 @@ export default function TabBar({ tabs, active, onChange, capitalize = false, pad
       >
         {tabs.map(t => {
           const hasItems = Array.isArray(t.items) && t.items.length > 0;
-          const activeSubItem = hasItems ? t.items.find(item => item.id === active) : null;
-          const isActive = active === t.id || !!activeSubItem;
+          const activeSubItem = hasItems ? t.items.find(item => String(item.id) === String(active)) : null;
+          const isActive = (active != null && t.id != null && String(active) === String(t.id)) || !!activeSubItem;
           const isOpen = openDropdownId === t.id;
 
           const handleTabClick = () => {
+            if (t.disabled) return;
             if (hasItems) {
               setOpenDropdownId(isOpen ? null : t.id);
             } else {
@@ -142,6 +143,7 @@ export default function TabBar({ tabs, active, onChange, capitalize = false, pad
                 type="button"
                 data-tabid={t.id}
                 data-active={isActive}
+                disabled={t.disabled}
                 onClick={handleTabClick}
                 style={{
                   display: 'flex', alignItems: 'center', gap: 5,
@@ -150,10 +152,11 @@ export default function TabBar({ tabs, active, onChange, capitalize = false, pad
                   border: 'none',
                   borderRadius: 'var(--radxs, 6px)',
                   background: isActive ? 'var(--surface,#fff)' : isOpen ? 'var(--grey-2, #e5e7eb)' : 'transparent',
-                  boxShadow: isActive ? 'var(--shadow, 0 1px 3px rgba(0,0,0,.08))' : 'none',
+                  boxShadow: isActive ? '0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06)' : 'none',
                   fontSize: '.75rem', fontWeight: isActive ? 600 : 500,
                   color: isActive ? 'var(--primary-text, #0f111c)' : 'var(--muted, #9b9daa)',
-                  cursor: 'pointer',
+                  cursor: t.disabled ? 'not-allowed' : 'pointer',
+                  opacity: t.disabled ? 0.38 : 1,
                   transition: 'all .18s ease',
                   fontFamily: 'inherit',
                   whiteSpace: 'nowrap',
@@ -266,11 +269,12 @@ export default function TabBar({ tabs, active, onChange, capitalize = false, pad
 
       {tabs.map(t => {
         const hasItems = Array.isArray(t.items) && t.items.length > 0;
-        const activeSubItem = hasItems ? t.items.find(item => item.id === active) : null;
-        const isActive = active === t.id || !!activeSubItem;
+        const activeSubItem = hasItems ? t.items.find(item => String(item.id) === String(active)) : null;
+        const isActive = (active != null && t.id != null && String(active) === String(t.id)) || !!activeSubItem;
         const isOpen = openDropdownId === t.id;
 
         const handleTabClick = () => {
+          if (t.disabled) return;
           if (hasItems) {
             setOpenDropdownId(isOpen ? null : t.id);
           } else {
@@ -285,6 +289,7 @@ export default function TabBar({ tabs, active, onChange, capitalize = false, pad
               type="button"
               data-tabid={t.id}
               data-active={isActive}
+              disabled={t.disabled}
               onClick={handleTabClick}
               style={{
                 display:'flex', alignItems:'center', gap:6,
@@ -292,7 +297,8 @@ export default function TabBar({ tabs, active, onChange, capitalize = false, pad
                 border:'none', background:'none',
                 fontSize:'.82rem', fontWeight:500,
                 color: isActive ? 'var(--accent)' : 'var(--muted)',
-                cursor:'pointer',
+                cursor: t.disabled ? 'not-allowed' : 'pointer',
+                opacity: t.disabled ? 0.38 : 1,
                 transition:'color .18s',
                 marginBottom:'-1px',
                 position:'relative', zIndex:1,

package/package.json

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