cynx-ui 1.2.32 → 1.2.33

package/components/DatePicker.jsx

@@ -18,13 +18,23 @@ const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', '
 
 function pad(n) { return String(n).padStart(2, '0'); }
 function toKey(y, m, d) { return `${y}-${pad(m+1)}-${pad(d)}`; }
-function isSameDay(a, b) { return a && b && a.getFullYear()===b.getFullYear() && a.getMonth()===b.getMonth() && a.getDate()===b.getDate(); }
+function toDate(val) {
+  if (!val) return null;
+  if (val instanceof Date) return isNaN(val.getTime()) ? null : val;
+  const d = new Date(val);
+  return isNaN(d.getTime()) ? null : d;
+}
+
+function isSameDay(a, b) {
+  const da = toDate(a), db = toDate(b);
+  return da && db && da.getFullYear()===db.getFullYear() && da.getMonth()===db.getMonth() && da.getDate()===db.getDate();
+}
 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 }) {
   const [open,    setOpen]    = useState(false);
   const [view,    setView]    = useState('day');    // 'day' | 'month' | 'year'
-  const [cursor,  setCursor]  = useState(() => value ? new Date(value) : new Date());
+  const [cursor,  setCursor]  = useState(() => toDate(value) || new Date());
   const [pos,     setPos]     = useState({ top: 0, left: 0, width: 0 });
   const ref = useRef(null);
   const btnRef = useRef(null);
@@ -43,7 +53,10 @@ export function DatePicker({ value, onChange, placeholder = 'Select date', badge
   }, [open]);
 
   // Sync cursor when value changes externally
-  useEffect(() => { if (value) setCursor(new Date(value)); }, [value]);
+  useEffect(() => {
+    const d = toDate(value);
+    if (d) setCursor(d);
+  }, [value]);
 
   // Compute button position when dropdown opens
   useEffect(() => {
@@ -61,7 +74,14 @@ export function DatePicker({ value, onChange, placeholder = 'Select date', badge
   }, [open]);
 
   function pick(date) {
-    onChange?.(date);
+    if (typeof value === 'string') {
+      const y = date.getFullYear();
+      const m = pad(date.getMonth() + 1);
+      const d = pad(date.getDate());
+      onChange?.(`${y}-${m}-${d}`);
+    } else {
+      onChange?.(date);
+    }
     setOpen(false);
     setView('day');
   }
@@ -78,9 +98,10 @@ export function DatePicker({ value, onChange, placeholder = 'Select date', badge
     setView(v => v === 'day' ? 'month' : v === 'month' ? 'year' : 'year');
   }
 
-  const formatted = value
-    ? `${MONTHS[value.getMonth()]} ${value.getDate()}, ${value.getFullYear()}`
-    : null;
+  const valDate = toDate(value);
+  const formatted = valDate
+    ? `${MONTHS[valDate.getMonth()]} ${valDate.getDate()}, ${valDate.getFullYear()}`
+    : (typeof value === 'string' ? value : null);
 
   // ── Day grid ─────────────────────────────────────────────────
   function renderDays() {

package/components/SearchableDropdown.jsx

@@ -14,7 +14,16 @@ export function SearchableDropdown({ value, onChange, options = [], placeholder
   const selected = options.find(o => o.value === value);
 
   const filtered = query
-    ? options.filter(o => o.label.toLowerCase().includes(query.toLowerCase()))
+    ? options.filter(o => {
+        const q = query.toLowerCase().trim();
+        for (const [key, val] of Object.entries(o)) {
+          if (key === 'displayLabel') continue;
+          if (val != null && typeof val !== 'function' && typeof val !== 'object') {
+            if (String(val).toLowerCase().includes(q)) return true;
+          }
+        }
+        return false;
+      })
     : options;
 
   useEffect(() => {
@@ -68,7 +77,7 @@ export function SearchableDropdown({ value, onChange, options = [], placeholder
       onMouseEnter={e => { if (!open) e.currentTarget.style.borderColor = 'var(--accent)'; }}
       onMouseLeave={e => { if (!open) e.currentTarget.style.borderColor = 'var(--border)'; }}>
         <span style={{ flex: 1, textAlign: 'left', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-          {selected?.label || placeholder}
+          {selected ? (selected.displayLabel || selected.label) : placeholder}
         </span>
         <ChevronDown size={13} style={{ color: 'var(--muted)', flexShrink: 0 }} />
       </button>
@@ -105,7 +114,7 @@ export function SearchableDropdown({ value, onChange, options = [], placeholder
               }}
               onMouseEnter={e => { if (o.value !== value) e.currentTarget.style.background = 'var(--grey-1)'; }}
               onMouseLeave={e => { if (o.value !== value) e.currentTarget.style.background = 'transparent'; }}>
-                <span>{o.label}</span>
+                <span>{o.displayLabel || o.label}</span>
                 {o.value === value && <Check size={12} />}
               </div>
             ))}

package/components/Select.jsx

@@ -66,8 +66,16 @@ export default function Select({
 
   const filtered = useMemo(() => {
     if (!query) return options;
-    const q = query.toLowerCase();
-    return options.filter(o => o.label.toLowerCase().includes(q));
+    const q = query.toLowerCase().trim();
+    return options.filter(o => {
+      for (const [key, val] of Object.entries(o)) {
+        if (key === 'displayLabel') continue;
+        if (val != null && typeof val !== 'function' && typeof val !== 'object') {
+          if (String(val).toLowerCase().includes(q)) return true;
+        }
+      }
+      return false;
+    });
   }, [options, query]);
 
   function handleOpen() {
@@ -101,7 +109,7 @@ export default function Select({
 
   function getLabel(optVal) {
     const opt = options.find(o => o.value === optVal);
-    return opt ? opt.label : optVal;
+    return opt ? (opt.displayLabel || opt.label) : optVal;
   }
 
   const selectedValues = multi ? (Array.isArray(value) ? value : []) : (value ? [value] : []);
@@ -286,7 +294,7 @@ export default function Select({
                     </span>
                   )}
                   <span style={{ flex: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
-                    {opt.label}
+                    {opt.displayLabel || opt.label}
                   </span>
                   {!multi && isSelected(opt.value) && (
                     <Check size={13} style={{ flexShrink: 0, color: 'var(--accent)' }} />

package/package.json

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