cynx-lib 1.3.54 → 1.3.56

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cynx-lib",
-  "version": "1.3.54",
+  "version": "1.3.56",
   "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/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/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,