cynx-lib 1.3.75 → 1.3.77

package/package.json

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

package/ui/components/Divider.jsx

@@ -14,7 +14,7 @@ export default function Divider({
   orientation = 'horizontal',
   align = 'center',
   size = 'md',
-  color = 'var(--border-light, #ebebf0)',
+  color = 'var(--border, #d7d8e0)',
   thickness = 1,
   variant = 'solid',
   style = {},

package/vue/components/Divider.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { computed, useSlots } from "vue";
+
+const SIZE_CONFIG: Record<string, any> = {
+  xs: { hMargin: "8px 0", vMargin: "0 4px", vHeight: "14px", fontSize: ".7rem", padding: "0 8px" },
+  sm: { hMargin: "12px 0", vMargin: "0 8px", vHeight: "18px", fontSize: ".75rem", padding: "0 10px" },
+  md: { hMargin: "16px 0", vMargin: "0 12px", vHeight: "24px", fontSize: ".82rem", padding: "0 12px" },
+  lg: { hMargin: "24px 0", vMargin: "0 16px", vHeight: "32px", fontSize: ".9rem", padding: "0 16px" },
+  xl: { hMargin: "32px 0", vMargin: "0 24px", vHeight: "48px", fontSize: "1rem", padding: "0 20px" },
+};
+
+const props = withDefaults(
+  defineProps<{
+    label?: string;
+    orientation?: "horizontal" | "vertical";
+    align?: "left" | "center" | "right";
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    color?: string;
+    thickness?: number | string;
+    variant?: string;
+  }>(),
+  {
+    orientation: "horizontal",
+    align: "center",
+    size: "md",
+    color: "var(--border, #d7d8e0)",
+    thickness: 1,
+    variant: "solid",
+  }
+);
+
+const slots = useSlots();
+const hasContent = computed(() => Boolean(props.label || slots.default));
+const cfg = computed(() => SIZE_CONFIG[props.size] || SIZE_CONFIG.md);
+const thickStr = computed(() =>
+  typeof props.thickness === "number" ? `${props.thickness}px` : props.thickness
+);
+const lineStyle = computed(() => `${thickStr.value} ${props.variant} ${props.color}`);
+const leftFlex = computed(() => (props.align === "left" ? "0 0 16px" : "1"));
+const rightFlex = computed(() => (props.align === "right" ? "0 0 16px" : "1"));
+</script>
+
+<template>
+  <div
+    v-if="orientation === 'vertical'"
+    class="cynx-divider cynx-divider-vertical"
+    :style="{
+      display: 'inline-block',
+      width: 0,
+      height: cfg.vHeight,
+      margin: cfg.vMargin,
+      borderLeft: lineStyle,
+      verticalAlign: 'middle',
+      alignSelf: 'center',
+      flexShrink: 0,
+    }"
+  />
+
+  <div
+    v-else-if="hasContent"
+    class="cynx-divider cynx-divider-horizontal"
+    :style="{
+      display: 'flex',
+      alignItems: 'center',
+      width: '100%',
+      margin: cfg.hMargin,
+    }"
+  >
+    <div :style="{ flex: leftFlex, borderBottom: lineStyle }" />
+    <span
+      :style="{
+        padding: cfg.padding,
+        fontSize: cfg.fontSize,
+        color: 'var(--muted, #9b9daa)',
+        fontWeight: 500,
+        whiteSpace: 'nowrap',
+        lineHeight: 1,
+      }"
+    >
+      <slot>{{ label }}</slot>
+    </span>
+    <div :style="{ flex: rightFlex, borderBottom: lineStyle }" />
+  </div>
+
+  <div
+    v-else
+    class="cynx-divider cynx-divider-horizontal"
+    :style="{
+      width: '100%',
+      margin: cfg.hMargin,
+      borderBottom: lineStyle,
+    }"
+  />
+</template>

package/vue/index.d.ts

@@ -58,6 +58,7 @@ export declare const LinearProgress: DefineComponent<any, any, any>;
 export declare const CircularProgress: DefineComponent<any, any, any>;
 export declare const StatusTag: DefineComponent<any, any, any>;
 export declare const InfoBadge: DefineComponent<any, any, any>;
+export declare const Divider: 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

@@ -19,6 +19,7 @@ import LinearProgress from "./components/LinearProgress.vue";
 import CircularProgress from "./components/CircularProgress.vue";
 import StatusTag from "./components/StatusTag.vue";
 import InfoBadge from "./components/InfoBadge.vue";
+import Divider from "./components/Divider.vue";
 import { XTable, XThead, XTbody, XTr, XTh, XTd } from "./components/XTable.vue";
 import { useAutoSkeletonRows } from "./composables/useAutoSkeletonRows";
 
@@ -43,6 +44,7 @@ export {
   CircularProgress,
   StatusTag,
   InfoBadge,
+  Divider,
   XTable,
   XThead,
   XTbody,
@@ -73,6 +75,7 @@ export default {
   CircularProgress,
   StatusTag,
   InfoBadge,
+  Divider,
   XTable,
   XThead,
   XTbody,