cynx-lib 1.3.66 → 1.3.67

package/package.json

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

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/Drawer.vue

@@ -0,0 +1,243 @@
+<script setup lang="ts">
+import { ref, watch, onUnmounted, computed } from "vue";
+import { X } from "lucide-vue-next";
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: boolean;
+    open?: boolean;
+    title?: string;
+    description?: string;
+    width?: number | string;
+    maxWidth?: number | string;
+    side?: "right" | "left";
+    showClose?: boolean;
+    bodyStyle?: Record<string, any>;
+    style?: Record<string, any>;
+  }>(),
+  {
+    modelValue: false,
+    open: false,
+    title: "",
+    description: "",
+    width: 560,
+    maxWidth: "100vw",
+    side: "right",
+    showClose: true,
+    bodyStyle: () => ({}),
+    style: () => ({}),
+  }
+);
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: boolean): void;
+  (e: "update:open", value: boolean): void;
+  (e: "close"): void;
+}>();
+
+const isOpen = computed(() => props.modelValue || props.open);
+const closing = ref(false);
+
+const 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 _id = "cynx-drawer-styles";
+function ensureStyles() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(_id)) return;
+  const tag = document.createElement("style");
+  tag.id = _id;
+  tag.textContent = STYLES;
+  document.head.appendChild(tag);
+}
+
+if (typeof document !== "undefined") ensureStyles();
+
+function close() {
+  if (closing.value) return;
+  closing.value = true;
+  setTimeout(() => {
+    closing.value = false;
+    emit("update:modelValue", false);
+    emit("update:open", false);
+    emit("close");
+  }, 260);
+}
+
+function handleKeydown(e: KeyboardEvent) {
+  if (e.key === "Escape" && isOpen.value) {
+    close();
+  }
+}
+
+watch(
+  isOpen,
+  (val) => {
+    if (typeof document === "undefined") return;
+    if (val) {
+      document.body.style.overflow = "hidden";
+      window.addEventListener("keydown", handleKeydown);
+    } else {
+      document.body.style.overflow = "";
+      window.removeEventListener("keydown", handleKeydown);
+    }
+  },
+  { immediate: true }
+);
+
+onUnmounted(() => {
+  if (typeof document !== "undefined") {
+    document.body.style.overflow = "";
+    window.removeEventListener("keydown", handleKeydown);
+  }
+});
+
+const resolvedWidth = computed(() => {
+  if (typeof props.width === "number") return `${props.width}px`;
+  return props.width;
+});
+
+const slideInAnim = computed(() =>
+  props.side === "left" ? "cynxDrawerSlideInLeft" : "cynxDrawerSlideInRight"
+);
+const slideOutAnim = computed(() =>
+  props.side === "left" ? "cynxDrawerSlideOutLeft" : "cynxDrawerSlideOutRight"
+);
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="isOpen || closing"
+      class="cynx-drawer-backdrop"
+      :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`,
+      }"
+      @mousedown.self="close"
+    >
+      <div
+        class="cynx-drawer-panel"
+        :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,
+        }"
+        @mousedown.stop
+      >
+        <!-- Header -->
+        <div
+          class="cynx-drawer-hdr"
+          :style="{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            padding: '16px 20px',
+            borderBottom: '1px solid var(--border-light, #ebebf0)',
+            flexShrink: 0,
+          }"
+        >
+          <slot name="header">
+            <div style="display: flex; flex-direction: column; gap: 2px;">
+              <span
+                class="cynx-drawer-title"
+                :style="{
+                  fontSize: '1rem',
+                  fontWeight: 700,
+                  letterSpacing: '-.01em',
+                  color: 'var(--t, var(--primary-text, #0f111c))',
+                }"
+              >
+                {{ title }}
+              </span>
+              <span
+                v-if="description"
+                class="cynx-drawer-desc"
+                :style="{
+                  fontSize: '.75rem',
+                  color: 'var(--muted, #797b8d)',
+                }"
+              >
+                {{ description }}
+              </span>
+            </div>
+          </slot>
+
+          <button
+            v-if="showClose"
+            type="button"
+            class="cynx-drawer-close"
+            :style="{
+              background: 'none',
+              border: 'none',
+              cursor: 'pointer',
+              padding: '6px',
+              borderRadius: '6px',
+              color: 'var(--muted, #797b8d)',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              transition: 'all .14s',
+            }"
+            @click="close"
+          >
+            <X :size="18" />
+          </button>
+        </div>
+
+        <!-- Body -->
+        <div
+          class="cynx-drawer-body custom-scrollbar"
+          :style="{
+            padding: '20px',
+            overflowX: 'hidden',
+            overflowY: 'auto',
+            flex: '1 1 auto',
+            minHeight: 0,
+            color: 'var(--t, var(--primary-text, #0f111c))',
+            ...bodyStyle,
+          }"
+        >
+          <slot />
+        </div>
+
+        <!-- Footer -->
+        <div
+          v-if="$slots.footer"
+          class="cynx-drawer-footer"
+          :style="{
+            display: 'flex',
+            justifyContent: 'flex-end',
+            gap: '8px',
+            padding: '14px 20px',
+            borderTop: '1px solid var(--border-light, #ebebf0)',
+            background: 'var(--grey-1, #f5f5f8)',
+            flexShrink: 0,
+          }"
+        >
+          <slot name="footer" />
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>

package/vue/components/Select.vue

@@ -64,6 +64,7 @@ const props = withDefaults(
     placeholder?: string;
     disabled?: boolean;
     multi?: boolean;
+    multiple?: boolean;
     searchable?: boolean;
     clearable?: boolean;
     size?: "xs" | "sm" | "md" | "lg";
@@ -82,6 +83,7 @@ const props = withDefaults(
     placeholder: "Select...",
     disabled: false,
     multi: false,
+    multiple: false,
     searchable: false,
     clearable: false,
     size: "md",
@@ -118,9 +120,11 @@ const currentVal = computed(() => {
   return props.modelValue !== undefined ? props.modelValue : props.value;
 });
 
+const isMulti = computed(() => Boolean(props.multi || props.multiple));
+
 const selectedValues = computed<any[]>(() => {
   const v = currentVal.value;
-  if (props.multi) {
+  if (isMulti.value) {
     return Array.isArray(v) ? v : [];
   }
   return v !== undefined && v !== null && v !== "" ? [v] : [];
@@ -133,7 +137,7 @@ function getLabel(optVal: any) {
 
 function isSelected(optVal: any) {
   const v = currentVal.value;
-  return props.multi ? (Array.isArray(v) && v.includes(optVal)) : v === optVal;
+  return isMulti.value ? (Array.isArray(v) && v.includes(optVal)) : v === optVal;
 }
 
 const radiusVal = computed(() => {
@@ -279,7 +283,7 @@ function handleOpen() {
 }
 
 function toggleOption(optVal: any) {
-  if (props.multi) {
+  if (isMulti.value) {
     const arr = Array.isArray(currentVal.value) ? currentVal.value : [];
     const next = arr.includes(optVal)
       ? arr.filter((v: any) => v !== optVal)
@@ -304,7 +308,7 @@ function removeTag(e: MouseEvent, valToRemove: any) {
 
 function handleClear(e: MouseEvent) {
   e.stopPropagation();
-  const next = props.multi ? [] : "";
+  const next = isMulti.value ? [] : "";
   emit("update:modelValue", next);
   emit("change", next);
   emit("clear");
@@ -385,10 +389,10 @@ function handleInputKeyDown(e: KeyboardEvent) {
         <slot
           v-if="slots.label && selectedValues.length > 0"
           name="label"
-          :value="multi ? selectedValues : selectedValues[0]"
+          :value="isMulti ? selectedValues : selectedValues[0]"
         />
 
-        <template v-else-if="multi && selectedValues.length > 0">
+        <template v-else-if="isMulti && selectedValues.length > 0">
           <span
             v-if="showCount"
             style="

package/vue/index.js

@@ -11,6 +11,7 @@ import Table from "./components/Table.vue";
 import Pagination from "./components/Pagination.vue";
 import Skeleton from "./components/Skeleton.vue";
 import Modal from "./components/Modal.vue";
+import Drawer from "./components/Drawer.vue";
 import Toggle from "./components/Toggle.vue";
 import { XTable, XThead, XTbody, XTr, XTh, XTd } from "./components/XTable.vue";
 import { useAutoSkeletonRows } from "./composables/useAutoSkeletonRows";
@@ -28,6 +29,7 @@ export {
   Pagination,
   Skeleton,
   Modal,
+  Drawer,
   Toggle,
   XTable,
   XThead,
@@ -51,6 +53,7 @@ export default {
   Pagination,
   Skeleton,
   Modal,
+  Drawer,
   Toggle,
   XTable,
   XThead,