cynx-lib 1.3.55 → 1.3.57

package/package.json

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

package/vue/components/Badge.vue

@@ -2,19 +2,20 @@
 import { computed } from "vue";
 
 const VARIANTS: Record<string, any> = {
-  ok: { bg: "rgba(39,174,96,.1)", color: "#16a34a", border: "rgba(39,174,96,.2)", dot: "#16a34a" },
-  err: { bg: "rgba(246,71,71,.1)", color: "#ef4444", border: "rgba(246,71,71,.2)", dot: "#ef4444" },
-  warn: { bg: "rgba(249,158,44,.1)", color: "#f59e0b", border: "rgba(249,158,44,.25)", dot: "#f59e0b" },
-  blue: { bg: "rgba(39,130,228,.1)", color: "#2563eb", border: "rgba(39,130,228,.2)", dot: "#2563eb" },
-  teal: { bg: "rgba(18,103,93,.1)", color: "#12675D", border: "rgba(18,103,93,.25)", dot: "#12675D" },
-  dim: { bg: "#f1f5f9", color: "#64748b", border: "#e2e8f0", dot: "#64748b" },
+  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)" },
+  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)" },
+  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)" },
+  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)" },
+  teal: { 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)" },
+  ghost: { bg: "transparent", color: "var(--t2, #64748b)", border: "var(--bd, #e2e8f0)", dot: "var(--t3, #94a3b8)" },
 };
 
 const SIZE_MAP: Record<string, any> = {
-  xs: { padding: "1.5px 6px", fontSize: "9.5px", dotSize: 5 },
-  sm: { padding: "2px 8px", fontSize: "11px", dotSize: 6 },
-  md: { padding: "3px 9px", fontSize: "12px", dotSize: 6.5 },
-  lg: { padding: "4px 12px", fontSize: "13px", dotSize: 8 },
+  xs: { padding: "1.5px 6px", plainPadding: "1px 0", fontSize: "9.5px", dotSize: 5 },
+  sm: { padding: "2px 8px", plainPadding: "2px 0", fontSize: "11px", dotSize: 6 },
+  md: { padding: "3px 9px", plainPadding: "2px 0", fontSize: "12px", dotSize: 6.5 },
+  lg: { padding: "4px 12px", plainPadding: "3px 0", fontSize: "13px", dotSize: 8 },
 };
 
 const props = withDefaults(
@@ -23,30 +24,36 @@ const props = withDefaults(
     size?: "xs" | "sm" | "md" | "lg";
     dot?: boolean;
     pill?: boolean;
+    plain?: boolean;
+    minimal?: boolean;
   }>(),
   {
     variant: "dim",
     size: "sm",
     dot: false,
     pill: true,
+    plain: false,
+    minimal: false,
   }
 );
 
 const v = computed(() => VARIANTS[props.variant] || VARIANTS.dim);
 const s = computed(() => SIZE_MAP[props.size] || SIZE_MAP.sm);
+const isPlain = computed(() => props.plain || props.minimal);
 </script>
 
 <template>
   <span
     :class="[
-      'inline-flex items-center gap-1.5 font-bold leading-none select-none',
-      pill ? 'rounded-full' : 'rounded-md'
+      'inline-flex items-center gap-1.5 select-none',
+      isPlain ? 'font-semibold' : 'font-bold leading-none',
+      isPlain ? '' : (pill ? 'rounded-full' : 'rounded-md')
     ]"
     :style="{
-      background: v.bg,
+      background: isPlain ? 'transparent' : v.bg,
       color: v.color,
-      border: `1px solid ${v.border}`,
-      padding: s.padding,
+      border: isPlain ? 'none' : `1px solid ${v.border}`,
+      padding: isPlain ? s.plainPadding : s.padding,
       fontSize: s.fontSize,
     }"
   >

package/vue/components/Button.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, useSlots } from "vue";
 import Spinner from "./Spinner.vue";
 
 const VARIANTS: Record<string, any> = {
@@ -60,12 +60,22 @@ const VARIANTS: Record<string, any> = {
     hoverShadow: "0 2px 8px rgba(249,158,44,.25)",
   },
   ghost: {
-    background: "var(--surface, #ffffff)",
+    background: "transparent",
     color: "var(--t2, #797b8d)",
-    border: "1px solid var(--bd, #d7d8e0)",
+    border: "1px solid transparent",
     hoverColor: "var(--t1, #1a1a2e)",
     hoverBg: "var(--grey-1, #f5f5f8)",
-    hoverBorder: "var(--grey-2, #ebebee)",
+    hoverBorder: "transparent",
+    boxShadow: "none",
+  },
+  icon: {
+    background: "transparent",
+    color: "var(--t2, #797b8d)",
+    border: "1px solid transparent",
+    hoverColor: "var(--t1, #1a1a2e)",
+    hoverBg: "var(--grey-1, #f5f5f8)",
+    hoverBorder: "transparent",
+    boxShadow: "none",
   },
   outline: {
     background: "transparent",
@@ -120,9 +130,10 @@ const emit = defineEmits<{
   (e: "click", event: MouseEvent): void;
 }>();
 
+const slots = useSlots();
 const v = computed(() => VARIANTS[props.variant] || VARIANTS.default);
 const s = computed(() => SIZES[props.size] || SIZES.md);
-const isIconOnly = computed(() => props.variant === "icon");
+const isIconOnly = computed(() => props.variant === "icon" || (!slots.default && (Boolean(slots.icon) || Boolean(slots.iconRight))));
 </script>
 
 <template>
@@ -137,7 +148,7 @@ const isIconOnly = computed(() => props.variant === "icon");
       whiteSpace: 'nowrap',
       letterSpacing: '-.01em',
       outline: 'none',
-      boxShadow: 'var(--shadow, 0 1px 3px rgba(20,22,41,.1))',
+      boxShadow: v.boxShadow !== undefined ? v.boxShadow : 'var(--shadow, 0 1px 3px rgba(20,22,41,.1))',
       opacity: disabled ? 0.45 : 1,
       pointerEvents: disabled ? 'none' : undefined,
       background: v.background,
@@ -147,9 +158,9 @@ const isIconOnly = computed(() => props.variant === "icon");
       fontSize: `${s.fontSize}px`,
       height: `${s.height}px`,
       width: isIconOnly ? `${s.height}px` : undefined,
+      minWidth: isIconOnly ? `${s.height}px` : undefined,
       ...(v.paddingLeft !== undefined && { paddingLeft: v.paddingLeft }),
       ...(v.paddingRight !== undefined && { paddingRight: v.paddingRight }),
-      ...(v.boxShadow !== undefined && { boxShadow: v.boxShadow }),
     }"
     @click="emit('click', $event)"
   >

package/vue/components/Modal.vue

@@ -0,0 +1,226 @@
+<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;
+    maxWidth?: number | string;
+    maxHeight?: number | string;
+    showClose?: boolean;
+    bodyStyle?: Record<string, any>;
+    style?: Record<string, any>;
+  }>(),
+  {
+    modelValue: false,
+    open: false,
+    title: "",
+    maxWidth: 520,
+    showClose: true,
+    bodyStyle: () => ({}),
+    style: () => ({}),
+  }
+);
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: boolean): void;
+  (e: "close"): void;
+}>();
+
+const isOpen = computed(() => props.modelValue || props.open);
+const closing = ref(false);
+
+const STYLES = `
+@keyframes cynxModalFadeIn { from { opacity: 0; } to { opacity: 1; } }
+@keyframes cynxModalFadeOut { from { opacity: 1; } to { opacity: 0; } }
+@keyframes cynxModalCardIn { from { opacity: 0; transform: scale(.96) translateY(-8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
+@keyframes cynxModalCardOut { from { opacity: 1; transform: scale(1) translateY(0); } to { opacity: 0; transform: scale(.96) translateY(-8px); } }
+`;
+
+let _id = "cynx-modal-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("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 resolvedMaxWidth = computed(() => {
+  if (typeof props.maxWidth === "number") return `${props.maxWidth}px`;
+  return props.maxWidth;
+});
+
+const resolvedMaxHeight = computed(() => {
+  if (props.maxHeight) {
+    return typeof props.maxHeight === "number" ? `${props.maxHeight}px` : props.maxHeight;
+  }
+  return "85vh";
+});
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="isOpen || closing"
+      class="cynx-modal-backdrop"
+      :style="{
+        position: 'fixed',
+        inset: 0,
+        background: 'rgba(20, 22, 41, .45)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 8000,
+        padding: '20px',
+        animation: `${closing ? 'cynxModalFadeOut' : 'cynxModalFadeIn'} .26s ease forwards`,
+      }"
+      @mousedown.self="close"
+    >
+      <div
+        class="cynx-modal-card"
+        :style="{
+          background: 'var(--surface, #ffffff)',
+          border: '1px solid var(--border, #e2e8f0)',
+          borderRadius: '14px',
+          width: '100%',
+          maxWidth: resolvedMaxWidth,
+          maxHeight: resolvedMaxHeight,
+          boxShadow: 'var(--shadow-lg, 0 20px 60px rgba(0, 0, 0, .25))',
+          overflow: 'hidden',
+          display: 'flex',
+          flexDirection: 'column',
+          animation: `${closing ? 'cynxModalCardOut' : 'cynxModalCardIn'} .26s cubic-bezier(.4, 0, .2, 1) forwards`,
+          ...style,
+        }"
+        @mousedown.stop
+      >
+        <!-- Modal Header -->
+        <div
+          class="cynx-modal-hdr"
+          :style="{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            padding: '15px 20px',
+            borderBottom: '1px solid var(--border-light, #ebebf0)',
+            borderRadius: '14px 14px 0 0',
+            flexShrink: 0,
+          }"
+        >
+          <slot name="header">
+            <span
+              class="cynx-modal-title"
+              :style="{
+                fontSize: '.95rem',
+                fontWeight: 700,
+                letterSpacing: '-.01em',
+                color: 'var(--t, var(--primary-text, #0f111c))',
+              }"
+            >
+              {{ title }}
+            </span>
+          </slot>
+
+          <button
+            v-if="showClose"
+            type="button"
+            class="cynx-modal-close"
+            :style="{
+              background: 'none',
+              border: 'none',
+              cursor: 'pointer',
+              padding: '4px',
+              borderRadius: '6px',
+              color: 'var(--muted, #797b8d)',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              transition: 'all .14s',
+            }"
+            @click="close"
+          >
+            <X :size="16" />
+          </button>
+        </div>
+
+        <!-- Modal Body -->
+        <div
+          class="cynx-modal-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>
+
+        <!-- Modal Footer -->
+        <div
+          v-if="$slots.footer"
+          class="cynx-modal-footer"
+          :style="{
+            display: 'flex',
+            justifyContent: 'flex-end',
+            gap: '8px',
+            padding: '13px 20px',
+            borderTop: '1px solid var(--border-light, #ebebf0)',
+            background: 'var(--grey-1, #f5f5f8)',
+            borderRadius: '0 0 14px 14px',
+            flexShrink: 0,
+          }"
+        >
+          <slot name="footer" />
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>

package/vue/components/Spinner.vue

@@ -1,6 +1,20 @@
 <script setup lang="ts">
 import { computed } from "vue";
 
+const STYLES = `.spin{animation:cx-spin .7s linear infinite}@keyframes cx-spin{to{transform:rotate(360deg)}}.v-progress-circular--indeterminate>svg{animation:progress-circular-rotate .8s linear infinite;transform-origin:center center;transition:all .2s ease-in-out}.v-progress-circular>svg{width:100%;height:100%;margin:auto;position:absolute;inset:0;z-index:0}@keyframes progress-circular-rotate{100%{transform:rotate(270deg)}}@keyframes progress-circular-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}.v-progress-circular--indeterminate .v-progress-circular__overlay{animation:progress-circular-dash 1.4s ease-in-out infinite;stroke-linecap:round}`;
+
+const _id = "cynx-spinner-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();
+
 const props = withDefaults(
   defineProps<{
     size?: number;
@@ -10,7 +24,7 @@ const props = withDefaults(
     variant?: "default" | "classic";
   }>(),
   {
-    size: 20,
+    size: undefined,
     inline: false,
     color: "currentColor",
     fullPage: false,
@@ -18,56 +32,61 @@ const props = withDefaults(
   }
 );
 
-const s = computed(() => (props.inline ? 14 : props.size));
+ensureStyles();
+
+const s = computed(() => {
+  if (props.size !== undefined && props.size !== null) {
+    return props.size;
+  }
+  return props.inline ? 14 : 20;
+});
 </script>
 
 <template>
-  <!-- Fullpage Loading Container -->
-  <div
-    v-if="fullPage"
-    class="fixed inset-0 bg-[var(--bg,#f8fafc)] flex flex-col items-center justify-center gap-4 z-[9999]"
-  >
+  <!-- Classic Variant -->
+  <template v-if="variant === 'classic'">
     <div
-      class="v-progress-circular v-progress-circular--indeterminate relative"
-      :style="{ width: `${s}px`, height: `${s}px` }"
+      v-if="fullPage"
+      :style="{
+        position: 'fixed',
+        inset: 0,
+        background: 'var(--bg, #f8fafc)',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: '16px',
+        zIndex: 9999,
+      }"
     >
       <svg
-        viewBox="0 0 42.42 42.42"
-        class="w-full h-full absolute inset-0 -rotate-90"
+        class="spin"
+        :width="s"
+        :height="s"
+        viewBox="0 0 24 24"
+        fill="none"
+        :stroke="color"
+        stroke-width="2.5"
+        stroke-linecap="round"
       >
-        <circle
-          fill="transparent"
-          cx="50%"
-          cy="50%"
-          r="20"
-          stroke="var(--grey-2,#e0e0e0)"
-          stroke-width="2.42"
-          stroke-dasharray="125.66"
-          stroke-dashoffset="0"
-        />
-        <circle
-          fill="transparent"
-          cx="50%"
-          cy="50%"
-          r="20"
-          :stroke="color === 'currentColor' ? 'var(--accent,#12675D)' : color"
-          stroke-width="2.42"
-          class="v-progress-circular__overlay"
+        <path
+          d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"
         />
       </svg>
+      <div
+        :style="{
+          fontSize: '.75rem',
+          fontFamily: 'var(--mono, ui-monospace, monospace)',
+          color: 'var(--muted, #797b8d)',
+        }"
+      >
+        Loading...
+      </div>
     </div>
-    <div class="text-xs font-mono text-[var(--muted,#797b8d)]">Loading...</div>
-  </div>
 
-  <!-- Inline / Normal Spinner -->
-  <div
-    v-else
-    :class="[inline ? 'inline-flex items-center' : 'flex items-center justify-center py-12']"
-  >
-    <!-- Classic spinner variant -->
     <svg
-      v-if="variant === 'classic'"
-      class="animate-spin"
+      v-else-if="inline"
+      class="spin"
       :width="s"
       :height="s"
       viewBox="0 0 24 24"
@@ -81,66 +100,164 @@ const s = computed(() => (props.inline ? 14 : props.size));
       />
     </svg>
 
-    <!-- Circular spinner variant (default) -->
     <div
       v-else
-      class="v-progress-circular v-progress-circular--indeterminate relative"
-      :style="{ width: `${s}px`, height: `${s}px` }"
+      :style="{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: '48px 0',
+      }"
+    >
+      <svg
+        class="spin"
+        :width="s"
+        :height="s"
+        viewBox="0 0 24 24"
+        fill="none"
+        :stroke="color"
+        stroke-width="2.5"
+        stroke-linecap="round"
+      >
+        <path
+          d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"
+        />
+      </svg>
+    </div>
+  </template>
+
+  <!-- Circular Variant (Default) -->
+  <template v-else>
+    <!-- FullPage Mode -->
+    <div
+      v-if="fullPage"
+      :style="{
+        position: 'fixed',
+        inset: 0,
+        background: 'var(--bg, #f8fafc)',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: '16px',
+        zIndex: 9999,
+      }"
+    >
+      <div
+        class="v-progress-circular v-progress-circular--indeterminate"
+        :style="{ width: `${s}px`, height: `${s}px` }"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 42.42 42.42"
+          :style="{ width: `${s}px`, height: `${s}px`, transform: 'rotate(-90deg)' }"
+        >
+          <circle
+            fill="transparent"
+            cx="50%"
+            cy="50%"
+            r="20"
+            stroke="var(--grey-2, #e0e0e0)"
+            stroke-width="2.42"
+            stroke-dasharray="125.66"
+            stroke-dashoffset="0"
+          />
+          <circle
+            class="v-progress-circular__overlay"
+            fill="transparent"
+            cx="50%"
+            cy="50%"
+            r="20"
+            :stroke="color"
+            stroke-width="2.42"
+            stroke-dasharray="125.66"
+            stroke-dashoffset="125.66"
+          />
+        </svg>
+      </div>
+      <div
+        :style="{
+          fontSize: '.75rem',
+          fontFamily: 'var(--mono, ui-monospace, monospace)',
+          color: 'var(--muted, #797b8d)',
+        }"
+      >
+        Loading...
+      </div>
+    </div>
+
+    <!-- Inline Mode -->
+    <div
+      v-else-if="inline"
+      class="v-progress-circular v-progress-circular--indeterminate"
+      :style="{
+        width: `${s}px`,
+        height: `${s}px`,
+        position: 'relative',
+        display: 'inline-flex',
+        flexShrink: 0,
+      }"
     >
       <svg
         viewBox="0 0 42.42 42.42"
-        class="w-full h-full absolute inset-0 -rotate-90"
+        :style="{ width: '100%', height: '100%', transform: 'rotate(-90deg)' }"
       >
         <circle
+          class="v-progress-circular__overlay"
           fill="transparent"
           cx="50%"
           cy="50%"
           r="20"
-          stroke="var(--grey-2,#e0e0e0)"
+          :stroke="color"
           stroke-width="2.42"
           stroke-dasharray="125.66"
-          stroke-dashoffset="0"
-        />
-        <circle
-          fill="transparent"
-          cx="50%"
-          cy="50%"
-          r="20"
-          :stroke="color === 'currentColor' ? 'var(--accent,#12675D)' : color"
-          stroke-width="2.42"
-          class="v-progress-circular__overlay"
+          stroke-dashoffset="125.66"
         />
       </svg>
     </div>
-  </div>
-</template>
 
-<style scoped>
-.v-progress-circular--indeterminate > svg {
-  animation: progress-circular-rotate 0.8s linear infinite;
-  transform-origin: center center;
-}
-@keyframes progress-circular-rotate {
-  100% {
-    transform: rotate(270deg);
-  }
-}
-@keyframes progress-circular-dash {
-  0% {
-    stroke-dasharray: 1, 200;
-    stroke-dashoffset: 0;
-  }
-  50% {
-    stroke-dasharray: 89, 200;
-    stroke-dashoffset: -35px;
-  }
-  100% {
-    stroke-dasharray: 89, 200;
-    stroke-dashoffset: -124px;
-  }
-}
-.v-progress-circular--indeterminate .v-progress-circular__overlay {
-  animation: progress-circular-dash 1.4s ease-in-out infinite;
-  stroke-linecap: round;
-}
-</style>
+    <!-- Normal Centered Mode -->
+    <div
+      v-else
+      :style="{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: '48px 0',
+      }"
+    >
+      <div
+        class="v-progress-circular v-progress-circular--indeterminate"
+        :style="{ width: `${s}px`, height: `${s}px` }"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 42.42 42.42"
+          :style="{ width: `${s}px`, height: `${s}px`, transform: 'rotate(-90deg)' }"
+        >
+          <circle
+            fill="transparent"
+            cx="50%"
+            cy="50%"
+            r="20"
+            stroke="var(--grey-2, #e0e0e0)"
+            stroke-width="2.42"
+            stroke-dasharray="125.66"
+            stroke-dashoffset="0"
+          />
+          <circle
+            class="v-progress-circular__overlay"
+            fill="transparent"
+            cx="50%"
+            cy="50%"
+            r="20"
+            :stroke="color"
+            stroke-width="2.42"
+            stroke-dasharray="125.66"
+            stroke-dashoffset="125.66"
+          />
+        </svg>
+      </div>
+    </div>
+  </template>
+</template>

package/vue/components/Table.vue

@@ -52,7 +52,7 @@ const props = withDefaults(
     bordered: true,
     skeletonRows: undefined,
     autoSkeleton: true,
-    rowHeight: 51,
+    rowHeight: 40,
   }
 );
 
@@ -62,18 +62,11 @@ const emit = defineEmits<{
 }>();
 
 const rootRef = ref<HTMLElement | null>(null);
-const headerScrollRef = ref<HTMLElement | null>(null);
 const bodyScrollRef = ref<HTMLElement | null>(null);
 
-const handleBodyScroll = () => {
-  if (headerScrollRef.value && bodyScrollRef.value) {
-    headerScrollRef.value.scrollLeft = bodyScrollRef.value.scrollLeft;
-  }
-};
-
 const { rows: autoRows } = useAutoSkeletonRows(rootRef, {
   rowHeight: props.rowHeight,
-  bottomBuffer: 72,
+  bottomBuffer: 50,
 });
 
 const skeletonCount = computed(() => {
@@ -133,23 +126,23 @@ const getSkeletonWidth = (rIdx: number, cIdx: number, key: string) => {
     ]"
     :style="height ? { height: formatWidth(height) } : undefined"
   >
-    <!-- Separate Dedicated Fixed Header Container -->
+    <!-- Scrollable Single Unified Table Container (100% Column Alignment) -->
     <div
-      ref="headerScrollRef"
-      class="w-full overflow-hidden flex-shrink-0 border-b border-slate-200 dark:border-slate-800 bg-[#f8fafc] dark:bg-[#16192e]"
+      ref="bodyScrollRef"
+      class="w-full overflow-x-auto overflow-y-auto custom-scrollbar flex-1 relative"
     >
       <table class="w-full border-collapse text-left text-xs table-fixed">
         <colgroup>
           <col
             v-for="col in columns"
-            :key="`h-col-${col.key}`"
+            :key="`col-${col.key}`"
             :style="{
               width: formatWidth(col.width),
               minWidth: formatWidth(col.minWidth || col.width || 100),
             }"
           />
         </colgroup>
-        <thead>
+        <thead class="sticky top-0 z-10 bg-[#f8fafc] dark:bg-[#16192e] border-b border-slate-200 dark:border-slate-800 shadow-[0_1px_0_0_rgba(226,232,240,1)] dark:shadow-[0_1px_0_0_rgba(30,41,59,1)]">
           <tr>
             <th
               v-for="col in columns"
@@ -160,7 +153,7 @@ const getSkeletonWidth = (rIdx: number, cIdx: number, key: string) => {
                 textAlign: col.align || 'left',
               }"
               :class="[
-                'px-4 py-3 font-semibold text-[11px] uppercase tracking-wider text-slate-500 dark:text-slate-400 select-none transition-colors',
+                'px-3.5 py-2.5 font-semibold text-[11px] uppercase tracking-wider text-slate-500 dark:text-slate-400 select-none transition-colors bg-[#f8fafc] dark:bg-[#16192e]',
                 col.sortable ? 'cursor-pointer hover:text-slate-900 dark:hover:text-white' : '',
                 col.headerClass || ''
               ]"
@@ -200,28 +193,8 @@ const getSkeletonWidth = (rIdx: number, cIdx: number, key: string) => {
             </th>
           </tr>
         </thead>
-      </table>
-    </div>
-
-    <!-- Scrollable Body Container -->
-    <div
-      ref="bodyScrollRef"
-      class="w-full overflow-x-auto overflow-y-auto custom-scrollbar flex-1 relative"
-      @scroll="handleBodyScroll"
-    >
-      <table class="w-full border-collapse text-left text-xs table-fixed">
-        <colgroup>
-          <col
-            v-for="col in columns"
-            :key="`b-col-${col.key}`"
-            :style="{
-              width: formatWidth(col.width),
-              minWidth: formatWidth(col.minWidth || col.width || 100),
-            }"
-          />
-        </colgroup>
         <tbody class="divide-y divide-slate-100 dark:divide-slate-800/80">
-          <!-- Loading State (Content-Aware Professional Shimmer) -->
+          <!-- Loading State (Real matching heights and paddings) -->
           <template v-if="loading">
             <tr
               v-for="i in skeletonCount"
@@ -235,7 +208,7 @@ const getSkeletonWidth = (rIdx: number, cIdx: number, key: string) => {
                   textAlign: col.align || 'left',
                   height: `${rowHeight}px`,
                 }"
-                class="px-4 py-3 align-middle"
+                class="px-3.5 py-2 align-middle"
               >
                 <!-- Action button skeleton -->
                 <div v-if="col.key === 'actions'" class="flex items-center justify-center">
@@ -251,7 +224,7 @@ const getSkeletonWidth = (rIdx: number, cIdx: number, key: string) => {
                 <Skeleton
                   v-else
                   :width="getSkeletonWidth(i, cIdx, col.key)"
-                  :height="col.key === 'title' || cIdx === 0 ? 16 : 14"
+                  :height="14"
                   :radius="4"
                 />
               </td>
@@ -291,7 +264,7 @@ const getSkeletonWidth = (rIdx: number, cIdx: number, key: string) => {
                   height: `${rowHeight}px`,
                 }"
                 :class="[
-                  'px-4 py-3 text-slate-700 dark:text-slate-200 text-xs font-normal align-middle',
+                  'px-3.5 py-2 text-slate-700 dark:text-slate-200 text-xs font-normal align-middle',
                   col.cellClass || ''
                 ]"
               >

package/vue/components/Toggle.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+const SIZES: Record<string, { w: number; h: number; r: number; dot: number; off: number; on: number }> = {
+  sm: { w: 28, h: 16, r: 8, dot: 12, off: 2, on: 14 },
+  md: { w: 34, h: 18, r: 9, dot: 14, off: 2, on: 18 },
+  lg: { w: 44, h: 24, r: 12, dot: 18, off: 3, on: 23 },
+};
+
+const COLORS: Record<string, string> = {
+  primary: "var(--accent, #12675D)",
+  success: "var(--success, var(--s, #27ae60))",
+  warning: "var(--warning, var(--w, #f59e0b))",
+  danger: "var(--danger, var(--d, #f64747))",
+};
+
+const OFF_COLOR = "var(--border, var(--bd, #d7d8e0))";
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: boolean;
+    checked?: boolean;
+    disabled?: boolean;
+    size?: "sm" | "md" | "lg";
+    color?: "primary" | "success" | "warning" | "danger";
+    label?: string;
+    labelStyle?: Record<string, any>;
+    className?: string;
+    style?: Record<string, any>;
+  }>(),
+  {
+    modelValue: false,
+    checked: false,
+    disabled: false,
+    size: "md",
+    color: "primary",
+    label: "",
+    labelStyle: () => ({}),
+    className: "",
+    style: () => ({}),
+  }
+);
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: boolean): void;
+  (e: "change", value: boolean): void;
+}>();
+
+const isChecked = computed(() => (props.modelValue !== undefined ? props.modelValue : props.checked));
+const s = computed(() => SIZES[props.size] || SIZES.md);
+const trackBg = computed(() => (isChecked.value ? (COLORS[props.color] || COLORS.primary) : OFF_COLOR));
+
+const toggle = () => {
+  if (props.disabled) return;
+  const next = !isChecked.value;
+  emit("update:modelValue", next);
+  emit("change", next);
+};
+</script>
+
+<template>
+  <label
+    :class="['cynx-toggle-label', className]"
+    :style="{
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: '8px',
+      cursor: disabled ? 'not-allowed' : 'pointer',
+      userSelect: 'none',
+      opacity: disabled ? 0.4 : 1,
+      ...style,
+    }"
+    @click.prevent="toggle"
+  >
+    <input
+      type="checkbox"
+      :checked="isChecked"
+      :disabled="disabled"
+      style="position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;"
+    />
+    <span
+      class="cynx-toggle-track"
+      :style="{
+        position: 'relative',
+        width: `${s.w}px`,
+        height: `${s.h}px`,
+        borderRadius: `${s.r}px`,
+        background: trackBg,
+        flexShrink: 0,
+        transition: 'background .25s ease',
+        boxShadow: 'var(--shadow-sm, 0 1px 3px rgba(20,22,41,.1))',
+      }"
+    >
+      <span
+        class="cynx-toggle-dot"
+        :style="{
+          position: 'absolute',
+          top: '50%',
+          transform: 'translateY(-50%)',
+          left: `${isChecked ? s.on : s.off}px`,
+          width: `${s.dot}px`,
+          height: `${s.dot}px`,
+          background: 'var(--surface, #ffffff)',
+          borderRadius: '50%',
+          boxShadow: '0 1px 3px rgba(0,0,0,.25)',
+          transition: 'left .3s cubic-bezier(.34,1.56,.64,1), transform .2s ease',
+          willChange: 'left',
+        }"
+      />
+    </span>
+    <span v-if="label || $slots.default" :style="labelStyle" class="cynx-toggle-text">
+      <slot>{{ label }}</slot>
+    </span>
+  </label>
+</template>

package/vue/index.d.ts

@@ -50,6 +50,8 @@ export declare const Sidebar: DefineComponent<any, any, any>;
 export declare const Table: DefineComponent<any, any, any>;
 export declare const Pagination: DefineComponent<any, any, any>;
 export declare const Skeleton: DefineComponent<any, any, any>;
+export declare const Modal: DefineComponent<any, any, any>;
+export declare const Toggle: DefineComponent<any, any, any>;
 export declare const XTable: DefineComponent<any, any, any>;
 export declare const XThead: DefineComponent<any, any, any>;
 export declare const XTbody: DefineComponent<any, any, any>;

package/vue/index.js

@@ -10,6 +10,8 @@ import Sidebar from "./components/Sidebar.vue";
 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 Toggle from "./components/Toggle.vue";
 import { XTable, XThead, XTbody, XTr, XTh, XTd } from "./components/XTable.vue";
 import { useAutoSkeletonRows } from "./composables/useAutoSkeletonRows";
 
@@ -25,6 +27,8 @@ export {
   Table,
   Pagination,
   Skeleton,
+  Modal,
+  Toggle,
   XTable,
   XThead,
   XTbody,
@@ -46,6 +50,8 @@ export default {
   Table,
   Pagination,
   Skeleton,
+  Modal,
+  Toggle,
   XTable,
   XThead,
   XTbody,