cynx-lib 1.3.66 → 1.3.68

package/package.json

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

package/ui/components/DatePicker.jsx

@@ -1,6 +1,7 @@
 import { useState, useRef, useEffect, useLayoutEffect, useCallback } from 'react';
 import { createPortal } from 'react-dom';
-import { ChevronLeft, ChevronRight, Calendar } from 'lucide-react';
+import { ChevronLeft, ChevronRight, Calendar, Clock } from 'lucide-react';
+import { TimePicker } from './TimePicker.jsx';
 
 // DatePicker — reusable date picker component
 // Props:
@@ -12,9 +13,28 @@ import { ChevronLeft, ChevronRight, Calendar } from 'lucide-react';
 //   maxDate      – Date object, days after this are disabled
 //   disabled     – boolean
 //   style        – container style overrides
-
-const DAYS = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
-const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+//   showTime     – boolean, enables integrated TimePicker in dropdown
+//   timeValue    – string, time string e.g. "14:30"
+//   onTimeChange – function(timeString)
+//   timeFormat   – "24h" | "12h"
+//   showSeconds  – boolean
+
+const LOCALES = {
+  en: {
+    days: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
+    months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    today: 'Today',
+    time: 'Time:',
+    ok: 'OK',
+  },
+  ru: {
+    days: ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'],
+    months: ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'],
+    today: 'Сегодня',
+    time: 'Время:',
+    ok: 'OK',
+  },
+};
 
 function pad(n) { return String(n).padStart(2, '0'); }
 function toKey(y, m, d) { return `${y}-${pad(m+1)}-${pad(d)}`; }
@@ -42,7 +62,40 @@ 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 = 'around', style }) {
+const SIZES = {
+  xs: { height: 24, fontSize: 11, paddingH: 6, iconSize: 11, btnSize: 24, closeSize: 11 },
+  sm: { height: 28, fontSize: 11.5, paddingH: 8, iconSize: 12, btnSize: 28, closeSize: 12 },
+  md: { height: 32, fontSize: 13, paddingH: 10, iconSize: 13, btnSize: 32, closeSize: 13 },
+  lg: { height: 36, fontSize: 14, paddingH: 12, iconSize: 14, btnSize: 36, closeSize: 14 },
+};
+
+export function DatePicker({
+  value,
+  onChange,
+  label,
+  placeholder = 'Select date',
+  badges = {},
+  minDate,
+  maxDate,
+  disabled,
+  size = 'md',
+  showStepper = false,
+  stepperPosition = 'off',
+  locale = 'en',
+  style,
+  fullWidth = false,
+  showTime = false,
+  timeValue,
+  onTimeChange,
+  timeFormat = '24h',
+  showSeconds = false,
+  timePlaceholder = '00:00',
+  timeProps = {},
+}) {
+  const loc = typeof locale === 'object' && locale !== null ? locale : (LOCALES[locale] || LOCALES.en);
+  const DAYS = loc.days;
+  const MONTHS = loc.months;
+  const s = SIZES[size] || SIZES.md;
   const [open,    setOpen]    = useState(false);
   const [view,    setView]    = useState('day');    // 'day' | 'month' | 'year'
   const [cursor,  setCursor]  = useState(() => toDate(value) || new Date());
@@ -77,10 +130,24 @@ export function DatePicker({ value, onChange, label, placeholder = 'Select date'
     function close(e) {
       if (ref.current?.contains(e.target)) return;
       if (dropRef.current?.contains(e.target)) return;
+      if (e.target?.closest?.('.cynx-timepicker-drop') || e.target?.closest?.('.cynx-timepicker-cell')) return;
+      if (document.querySelector('.cynx-timepicker-drop')) return;
+      if (typeof window !== 'undefined') window.__cynx_last_portal_closed_at = Date.now();
       setOpen(false); setView('day');
     }
+    function onKey(e) {
+      if (e.key === 'Escape') {
+        if (document.querySelector('.cynx-timepicker-drop')) return;
+        if (typeof window !== 'undefined') window.__cynx_last_portal_closed_at = Date.now();
+        setOpen(false); setView('day');
+      }
+    }
     document.addEventListener('mousedown', close, true);
-    return () => document.removeEventListener('mousedown', close, true);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('mousedown', close, true);
+      document.removeEventListener('keydown', onKey);
+    };
   }, [open]);
 
   const [stepperPosState, setStepperPosState] = useState(() => typeof window !== 'undefined' ? localStorage.getItem('datepicker_stepper_position') : null);
@@ -153,8 +220,10 @@ export function DatePicker({ value, onChange, label, placeholder = 'Select date'
     } else {
       onChange?.(date);
     }
-    setOpen(false);
-    setView('day');
+    if (!showTime) {
+      setOpen(false);
+      setView('day');
+    }
   }
 
   const isNavNextDisabled = () => {
@@ -212,9 +281,10 @@ export function DatePicker({ value, onChange, label, placeholder = 'Select date'
   }
 
   const valDate = toDate(value);
+  const formattedTime = showTime && timeValue ? ` ${timeValue}` : '';
   const formatted = valDate
-    ? `${MONTHS[valDate.getMonth()]} ${valDate.getDate()}, ${valDate.getFullYear()}`
-    : (typeof value === 'string' ? value : null);
+    ? `${MONTHS[valDate.getMonth()]} ${valDate.getDate()}, ${valDate.getFullYear()}${formattedTime}`
+    : (typeof value === 'string' && value ? `${value}${formattedTime}` : null);
 
   // ── Day grid ─────────────────────────────────────────────────
   function renderDays() {
@@ -450,7 +520,7 @@ export function DatePicker({ value, onChange, label, placeholder = 'Select date'
         onClick={(e) => { e.stopPropagation(); changeDay(-1); }}
         style={{
           display: 'flex', alignItems: 'center', justifyContent: 'center',
-          width: 32, height: 32, borderRadius: 'var(--rads, 8px)',
+          width: s.btnSize, height: s.btnSize, borderRadius: 'var(--rads, 8px)',
           border: '1px solid var(--border, #e2e8f0)', background: 'var(--surface, #ffffff)',
           cursor: dis ? 'not-allowed' : 'pointer', opacity: dis ? 0.35 : 1,
           color: 'var(--muted, #797b8d)', transition: 'all .15s', boxShadow: 'var(--shadow, 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06))',
@@ -460,7 +530,7 @@ export function DatePicker({ value, onChange, label, placeholder = 'Select date'
         onMouseEnter={e => { if (!dis) { e.currentTarget.style.borderColor = 'var(--accent, #f99e2c)'; e.currentTarget.style.color = 'var(--accent, #f99e2c)'; } }}
         onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border, #e2e8f0)'; e.currentTarget.style.color = 'var(--muted, #797b8d)'; }}
       >
-        <ChevronLeft size={15} />
+        <ChevronLeft size={s.iconSize + 2} />
       </button>
     );
   };
@@ -474,7 +544,7 @@ export function DatePicker({ value, onChange, label, placeholder = 'Select date'
         onClick={(e) => { e.stopPropagation(); changeDay(1); }}
         style={{
           display: 'flex', alignItems: 'center', justifyContent: 'center',
-          width: 32, height: 32, borderRadius: 'var(--rads, 8px)',
+          width: s.btnSize, height: s.btnSize, borderRadius: 'var(--rads, 8px)',
           border: '1px solid var(--border, #e2e8f0)', background: 'var(--surface, #ffffff)',
           cursor: dis ? 'not-allowed' : 'pointer', opacity: dis ? 0.35 : 1,
           color: 'var(--muted, #797b8d)', transition: 'all .15s', boxShadow: 'var(--shadow, 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06))',
@@ -484,7 +554,7 @@ export function DatePicker({ value, onChange, label, placeholder = 'Select date'
         onMouseEnter={e => { if (!dis) { e.currentTarget.style.borderColor = 'var(--accent, #f99e2c)'; e.currentTarget.style.color = 'var(--accent, #f99e2c)'; } }}
         onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border, #e2e8f0)'; e.currentTarget.style.color = 'var(--muted, #797b8d)'; }}
       >
-        <ChevronRight size={15} />
+        <ChevronRight size={s.iconSize + 2} />
       </button>
     );
   };
@@ -492,21 +562,24 @@ export function DatePicker({ value, onChange, label, placeholder = 'Select date'
   const renderTriggerBtn = () => (
     <button ref={btnRef} type="button" onClick={toggleOpen} style={{
       display: 'flex', alignItems: 'center', gap: 7,
-      padding: '5px 10px', borderRadius: 'var(--rads, 8px)',
+      padding: `0 ${s.paddingH}px`, borderRadius: 'var(--rads, 8px)',
       border: '1px solid var(--border, #e2e8f0)', background: 'var(--surface, #ffffff)',
       cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? 0.5 : 1,
-      fontSize: '.8rem', color: formatted ? 'var(--primary-text, #0f172a)' : 'var(--muted, #797b8d)',
+      fontSize: s.fontSize, color: formatted ? 'var(--primary-text, #0f172a)' : 'var(--muted, #797b8d)',
       fontFamily: 'var(--sans, inherit)', transition: 'border-color .15s',
-      whiteSpace: 'nowrap', minWidth: 140, height: 32, boxShadow: 'var(--shadow, 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06))',
+      whiteSpace: 'nowrap', minWidth: 0, flex: 1, height: s.height, boxShadow: 'var(--shadow, 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06))',
+      overflow: 'hidden'
     }}
     onMouseEnter={e => { if (!disabled) e.currentTarget.style.borderColor = 'var(--accent, #f99e2c)'; }}
     onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border, #e2e8f0)'; }}>
-      <Calendar size={13} style={{ color: 'var(--muted, #797b8d)', flexShrink: 0 }} />
-      <span style={{ flex: 1, textAlign: 'left' }}>{formatted || placeholder}</span>
+      <Calendar size={s.iconSize} style={{ color: 'var(--muted, #797b8d)', flexShrink: 0 }} />
+      <span style={{ flex: 1, textAlign: 'left', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', minWidth: 0 }}>
+        {formatted || placeholder}
+      </span>
       {value && (
         <span
           onClick={e => { e.stopPropagation(); onChange?.(null); }}
-          style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--muted, #797b8d)', cursor: 'pointer', flexShrink: 0, fontSize: 13, lineHeight: 1, padding: '0 2px' }}
+          style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--muted, #797b8d)', cursor: 'pointer', flexShrink: 0, fontSize: s.closeSize, lineHeight: 1, padding: '0 2px' }}
           onMouseEnter={e => { e.currentTarget.style.color = 'var(--danger, #f64747)'; }}
           onMouseLeave={e => { e.currentTarget.style.color = 'var(--muted, #797b8d)'; }}>
           ✕
@@ -522,13 +595,30 @@ export function DatePicker({ value, onChange, label, placeholder = 'Select date'
     : 'around';
 
   return (
-    <div style={{ display: 'inline-flex', flexDirection: 'column', position: 'relative', width: style?.width || 'auto', boxSizing: 'border-box', minWidth: 0, ...style }}>
+    <div style={{
+      display: fullWidth || style?.display === 'flex' ? 'flex' : 'inline-flex',
+      flexDirection: 'column',
+      position: 'relative',
+      width: style?.width || (fullWidth ? '100%' : 'auto'),
+      maxWidth: style?.maxWidth || (fullWidth ? '100%' : 320),
+      boxSizing: 'border-box',
+      minWidth: 0,
+      ...style,
+    }}>
       {label && (
         <label style={{ fontSize: 11, fontWeight: 600, color: 'var(--t2, var(--muted, #797b8d))', textTransform: 'uppercase', letterSpacing: '.08em', display: 'block', marginBottom: 4 }}>
           {label}
         </label>
       )}
-      <div ref={ref} style={{ position: 'relative', display: 'inline-flex', alignItems: 'center', gap: 4, width: '100%' }}>
+      <div ref={ref} style={{
+        position: 'relative',
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 4,
+        width: '100%',
+        maxWidth: '100%',
+        minWidth: 0,
+      }}>
         {showStepperEffective && posMode === 'around' && renderPrevBtn()}
         {showStepperEffective && posMode === 'left' && renderPrevBtn()}
         {showStepperEffective && posMode === 'left' && renderNextBtn()}
@@ -542,7 +632,7 @@ export function DatePicker({ value, onChange, label, placeholder = 'Select date'
 
       {/* Dropdown via portal */}
       {open && createPortal(
-        <div ref={dropRef} style={{
+        <div ref={dropRef} className="cynx-datepicker-drop" style={{
           position: 'fixed', top: pos.top, left: pos.left, width: pos.width, zIndex: 9000,
           background: 'var(--surface, #ffffff)', border: '1px solid var(--border, #e2e8f0)',
           borderRadius: 'var(--rad, 10px)', boxShadow: 'var(--shadow-lg, 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.06))',
@@ -595,6 +685,56 @@ export function DatePicker({ value, onChange, label, placeholder = 'Select date'
           {view === 'month' && renderMonths()}
           {view === 'year'  && renderYears()}
 
+          {/* Integrated Time Picker footer */}
+          {showTime && (
+            <div
+              style={{
+                borderTop: '1px solid var(--border-light, #ebebf0)',
+                marginTop: 8,
+                paddingTop: 8,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                gap: 8,
+              }}
+            >
+              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: '.76rem', color: 'var(--muted, #797b8d)', fontWeight: 600 }}>
+                <Clock size={13} style={{ opacity: 0.85 }} />
+                <span>{loc.time || 'Time:'}</span>
+              </div>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                <TimePicker
+                  value={timeValue || ''}
+                  onChange={(t) => onTimeChange?.(t)}
+                  format={timeFormat}
+                  showSeconds={showSeconds}
+                  placeholder={timePlaceholder}
+                  size={timeProps.size || size || 'md'}
+                  {...timeProps}
+                />
+                <button
+                  type="button"
+                  onClick={() => { setOpen(false); setView('day'); }}
+                  style={{
+                    padding: '4px 10px',
+                    borderRadius: 'var(--radxs, 6px)',
+                    background: 'var(--accent, #f99e2c)',
+                    color: 'var(--def-btn-text, #ffffff)',
+                    border: 'none',
+                    fontSize: '11.5px',
+                    fontWeight: 600,
+                    cursor: 'pointer',
+                    transition: 'opacity 0.15s ease',
+                  }}
+                  onMouseEnter={(e) => { e.currentTarget.style.opacity = '0.9'; }}
+                  onMouseLeave={(e) => { e.currentTarget.style.opacity = '1'; }}
+                >
+                  {loc.ok || 'OK'}
+                </button>
+              </div>
+            </div>
+          )}
+
         </div>,
         document.body
       )}

package/ui/components/Drawer.jsx

@@ -0,0 +1,208 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { X } from 'lucide-react';
+
+const DRAWER_STYLES = `
+@keyframes cynxDrawerFadeIn { from { opacity: 0; } to { opacity: 1; } }
+@keyframes cynxDrawerFadeOut { from { opacity: 1; } to { opacity: 0; } }
+@keyframes cynxDrawerSlideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
+@keyframes cynxDrawerSlideOutRight { from { transform: translateX(0); } to { transform: translateX(100%); } }
+@keyframes cynxDrawerSlideInLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } }
+@keyframes cynxDrawerSlideOutLeft { from { transform: translateX(0); } to { transform: translateX(-100%); } }
+`;
+
+let _drawer_id = 'cynx-drawer-styles';
+function ensureDrawerStyles() {
+  if (typeof document === 'undefined') return;
+  if (document.getElementById(_drawer_id)) return;
+  const tag = document.createElement('style');
+  tag.id = _drawer_id;
+  tag.textContent = DRAWER_STYLES;
+  document.head.appendChild(tag);
+}
+
+export function Drawer({
+  open = false,
+  onClose,
+  title = '',
+  description = '',
+  width = 560,
+  side = 'right',
+  showClose = true,
+  children,
+  footer,
+  header,
+  style = {},
+  bodyStyle = {},
+}) {
+  const [closing, setClosing] = useState(false);
+
+  useEffect(() => {
+    ensureDrawerStyles();
+  }, []);
+
+  const handleClose = () => {
+    if (closing) return;
+    setClosing(true);
+    setTimeout(() => {
+      setClosing(false);
+      onClose?.();
+    }, 260);
+  };
+
+  useEffect(() => {
+    if (typeof document === 'undefined') return;
+    const handleKeydown = (e) => {
+      if (e.key === 'Escape' && open) handleClose();
+    };
+    if (open) {
+      document.body.style.overflow = 'hidden';
+      window.addEventListener('keydown', handleKeydown);
+    } else {
+      document.body.style.overflow = '';
+      window.removeEventListener('keydown', handleKeydown);
+    }
+    return () => {
+      document.body.style.overflow = '';
+      window.removeEventListener('keydown', handleKeydown);
+    };
+  }, [open]);
+
+  if (!open && !closing) return null;
+  if (typeof document === 'undefined') return null;
+
+  const resolvedWidth = typeof width === 'number' ? `${width}px` : width;
+  const slideInAnim = side === 'left' ? 'cynxDrawerSlideInLeft' : 'cynxDrawerSlideInRight';
+  const slideOutAnim = side === 'left' ? 'cynxDrawerSlideOutLeft' : 'cynxDrawerSlideOutRight';
+
+  return createPortal(
+    <div
+      style={{
+        position: 'fixed',
+        inset: 0,
+        background: 'rgba(20, 22, 41, .45)',
+        zIndex: 8500,
+        display: 'flex',
+        justifyContent: side === 'left' ? 'flex-start' : 'flex-end',
+        animation: `${closing ? 'cynxDrawerFadeOut' : 'cynxDrawerFadeIn'} .26s ease forwards`,
+      }}
+      onMouseDown={(e) => {
+        if (e.target === e.currentTarget) handleClose();
+      }}
+    >
+      <div
+        style={{
+          background: 'var(--surface, #ffffff)',
+          borderLeft: side === 'right' ? '1px solid var(--border, var(--bd, #e2e8f0))' : 'none',
+          borderRight: side === 'left' ? '1px solid var(--border, var(--bd, #e2e8f0))' : 'none',
+          width: resolvedWidth,
+          maxWidth: '100vw',
+          height: '100%',
+          boxShadow: 'var(--shadow-lg, 0 20px 60px rgba(0, 0, 0, .25))',
+          display: 'flex',
+          flexDirection: 'column',
+          overflow: 'hidden',
+          animation: `${closing ? slideOutAnim : slideInAnim} .26s cubic-bezier(.16, 1, .3, 1) forwards`,
+          ...style,
+        }}
+        onMouseDown={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            padding: '16px 20px',
+            borderBottom: '1px solid var(--border-light, #ebebf0)',
+            flexShrink: 0,
+          }}
+        >
+          {header ? (
+            header
+          ) : (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+              <span
+                style={{
+                  fontSize: '1rem',
+                  fontWeight: 700,
+                  letterSpacing: '-.01em',
+                  color: 'var(--t, var(--primary-text, #0f111c))',
+                }}
+              >
+                {{ title }}
+              </span>
+              {description && (
+                <span
+                  style={{
+                    fontSize: '.75rem',
+                    color: 'var(--muted, #797b8d)',
+                  }}
+                >
+                  {description}
+                </span>
+              )}
+            </div>
+          )}
+
+          {showClose && (
+            <button
+              type="button"
+              style={{
+                background: 'none',
+                border: 'none',
+                cursor: 'pointer',
+                padding: '6px',
+                borderRadius: '6px',
+                color: 'var(--muted, #797b8d)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                transition: 'all .14s',
+              }}
+              onClick={handleClose}
+            >
+              <X size={18} />
+            </button>
+          )}
+        </div>
+
+        {/* Body */}
+        <div
+          className="custom-scrollbar"
+          style={{
+            padding: '20px',
+            overflowX: 'hidden',
+            overflowY: 'auto',
+            flex: '1 1 auto',
+            minHeight: 0,
+            color: 'var(--t, var(--primary-text, #0f111c))',
+            ...bodyStyle,
+          }}
+        >
+          {children}
+        </div>
+
+        {/* Footer */}
+        {footer && (
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'flex-end',
+              gap: 8,
+              padding: '14px 20px',
+              borderTop: '1px solid var(--border-light, #ebebf0)',
+              background: 'var(--grey-1, #f5f5f8)',
+              flexShrink: 0,
+            }}
+          >
+            {footer}
+          </div>
+        )}
+      </div>
+    </div>,
+    document.body
+  );
+}
+
+export default Drawer;

package/ui/index.cjs

@@ -41,6 +41,7 @@ __export(index_exports, {
   ConfirmRoot: () => ConfirmRoot,
   DatePicker: () => DatePicker,
   Divider: () => Divider,
+  Drawer: () => Drawer,
   Dropzone: () => Dropzone,
   FilePicker: () => FilePicker,
   HoverCard: () => HoverCard,
@@ -111,6 +112,7 @@ var import_PulseDot = __toESM(require("./components/PulseDot.jsx"), 1);
 var import_CircularProgress = __toESM(require("./components/CircularProgress.jsx"), 1);
 var import_Skeleton = __toESM(require("./components/Skeleton.jsx"), 1);
 var import_Modal = require("./components/Modal.jsx");
+var import_Drawer = require("./components/Drawer.jsx");
 var import_Toast = require("./components/Toast.jsx");
 var import_Confirm = require("./components/Confirm.jsx");
 var import_Pagination = require("./components/Pagination.jsx");
@@ -157,6 +159,7 @@ const PulseDot = import_PulseDot.default;
 const CircularProgress = import_CircularProgress.default;
 const Skeleton = import_Skeleton.default;
 const Modal = import_Modal.Modal;
+const Drawer = import_Drawer.Drawer;
 const Confirm = import_Modal.Confirm;
 const toast = import_Toast.toast;
 const useToast = import_Toast.useToast;

package/ui/index.js

@@ -21,6 +21,7 @@ import { default as _PulseDot } from './components/PulseDot.jsx';
 import { default as _CircularProgress } from './components/CircularProgress.jsx';
 import { default as _Skeleton } from './components/Skeleton.jsx';
 import { Modal as _Modal, Confirm as _Confirm } from './components/Modal.jsx';
+import { Drawer as _Drawer } from './components/Drawer.jsx';
 import { toast as _toast, useToast as _useToast, Toast as _Toast } from './components/Toast.jsx';
 import { ConfirmRoot as _ConfirmRoot, confirm as _confirm } from './components/Confirm.jsx';
 import { Pagination as _Pagination } from './components/Pagination.jsx';
@@ -69,6 +70,7 @@ export const PulseDot = _PulseDot;
 export const CircularProgress = _CircularProgress;
 export const Skeleton = _Skeleton;
 export const Modal = _Modal;
+export const Drawer = _Drawer;
 export const Confirm = _Confirm;
 export const toast = _toast;
 export const useToast = _useToast;

package/vue/components/Badge.vue

@@ -3,11 +3,19 @@ import { computed } from "vue";
 
 const VARIANTS: Record<string, any> = {
   ok: { bg: "var(--success-bg, rgba(39,174,96,.1))", color: "var(--success, #16a34a)", border: "var(--sd, rgba(39,174,96,.2))", dot: "var(--success, #16a34a)" },
+  success: { bg: "var(--success-bg, rgba(39,174,96,.1))", color: "var(--success, #16a34a)", border: "var(--sd, rgba(39,174,96,.2))", dot: "var(--success, #16a34a)" },
   err: { bg: "var(--danger-bg, rgba(246,71,71,.1))", color: "var(--danger, #ef4444)", border: "var(--dd, rgba(246,71,71,.2))", dot: "var(--danger, #ef4444)" },
+  danger: { bg: "var(--danger-bg, rgba(246,71,71,.1))", color: "var(--danger, #ef4444)", border: "var(--dd, rgba(246,71,71,.2))", dot: "var(--danger, #ef4444)" },
+  error: { bg: "var(--danger-bg, rgba(246,71,71,.1))", color: "var(--danger, #ef4444)", border: "var(--dd, rgba(246,71,71,.2))", dot: "var(--danger, #ef4444)" },
   warn: { bg: "var(--accent-bg, rgba(249,158,44,.1))", color: "var(--accent, #f59e0b)", border: "var(--accent-border, rgba(249,158,44,.25))", dot: "var(--accent, #f59e0b)" },
+  warning: { bg: "var(--accent-bg, rgba(249,158,44,.1))", color: "var(--accent, #f59e0b)", border: "var(--accent-border, rgba(249,158,44,.25))", dot: "var(--accent, #f59e0b)" },
   blue: { bg: "var(--blue-bg, rgba(39,130,228,.1))", color: "var(--blue, #2563eb)", border: "var(--infd, rgba(39,130,228,.2))", dot: "var(--blue, #2563eb)" },
+  info: { bg: "var(--blue-bg, rgba(39,130,228,.1))", color: "var(--blue, #2563eb)", border: "var(--infd, rgba(39,130,228,.2))", dot: "var(--blue, #2563eb)" },
   teal: { bg: "rgba(18,103,93,.1)", color: "var(--accent, #12675D)", border: "rgba(18,103,93,.25)", dot: "var(--accent, #12675D)" },
+  primary: { bg: "rgba(18,103,93,.1)", color: "var(--accent, #12675D)", border: "rgba(18,103,93,.25)", dot: "var(--accent, #12675D)" },
   dim: { bg: "var(--grey-1, #f5f5f8)", color: "var(--grey-4, #64748b)", border: "var(--border, #e2e8f0)", dot: "var(--grey-4, #64748b)" },
+  neutral: { bg: "var(--grey-1, #f5f5f8)", color: "var(--grey-4, #64748b)", border: "var(--border, #e2e8f0)", dot: "var(--grey-4, #64748b)" },
+  secondary: { bg: "var(--grey-1, #f5f5f8)", color: "var(--grey-4, #64748b)", border: "var(--border, #e2e8f0)", dot: "var(--grey-4, #64748b)" },
   ghost: { bg: "transparent", color: "var(--t2, #64748b)", border: "var(--bd, #e2e8f0)", dot: "var(--t3, #94a3b8)" },
 };