@xenterprises/nuxt-x-marketing 0.0.23 → 1.0.0

package/app/components/X/Mark/SocialProof/Toast.vue

@@ -0,0 +1,136 @@
+<template>
+  <Transition
+    enter-active-class="transition-all duration-500 ease-out"
+    :enter-from-class="enterFromClass"
+    leave-active-class="transition-all duration-300 ease-in"
+    :leave-to-class="leaveToClass"
+  >
+    <aside
+      v-if="currentNotification"
+      class="fixed z-40"
+      :class="placementClasses"
+    >
+      <div class="bg-white dark:bg-gray-900 rounded-xl shadow-lg border border-gray-200 dark:border-gray-800 p-4 flex items-center gap-3">
+        <!-- Avatar -->
+        <img
+          v-if="currentNotification.avatar"
+          :src="currentNotification.avatar"
+          :alt="currentNotification.name"
+          class="w-10 h-10 rounded-full object-cover"
+        />
+        <div
+          v-else
+          class="w-10 h-10 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center"
+        >
+          <span class="text-primary-600 dark:text-primary-400 font-medium">
+            {{ currentNotification.name.charAt(0) }}
+          </span>
+        </div>
+
+        <!-- Content -->
+        <div>
+          <p class="text-sm text-gray-900 dark:text-white">
+            <span class="font-medium">{{ currentNotification.name }}</span>
+            {{ currentNotification.action }}
+          </p>
+          <p class="text-xs text-gray-500 mt-0.5">
+            {{ currentNotification.time }}
+          </p>
+        </div>
+
+        <!-- Verified badge -->
+        <UIcon
+          name="i-lucide-badge-check"
+          class="w-5 h-5 text-green-500 flex-shrink-0"
+        />
+      </div>
+    </aside>
+  </Transition>
+</template>
+
+<script setup>
+const props = defineProps({
+  /** List of notifications to cycle through */
+  notifications: {
+    type: Array,
+    required: true,
+    validator: (arr) => arr.every((n) => n.name && n.action && n.time),
+  },
+  /** Time between notifications (ms) */
+  interval: {
+    type: Number,
+    default: 4000,
+  },
+  /** Delay before first notification (ms) */
+  initialDelay: {
+    type: Number,
+    default: 5000,
+  },
+  /** How long each notification shows (ms) */
+  displayDuration: {
+    type: Number,
+    default: 3000,
+  },
+  /** Toast placement */
+  placement: {
+    type: String,
+    default: 'topRight',
+    validator: (v) => ['topLeft', 'topRight', 'bottomLeft', 'bottomRight'].includes(v),
+  },
+});
+
+const placementClasses = computed(() => {
+  const placements = {
+    topLeft: 'top-6 left-6',
+    topRight: 'top-6 right-6',
+    bottomLeft: 'bottom-6 left-6',
+    bottomRight: 'bottom-6 right-6',
+  };
+  return placements[props.placement];
+});
+
+const enterFromClass = computed(() => {
+  if (props.placement.includes('Left')) {
+    return '-translate-x-full opacity-0';
+  }
+  return 'translate-x-full opacity-0';
+});
+
+const leaveToClass = computed(() => {
+  if (props.placement.includes('Left')) {
+    return '-translate-x-full opacity-0';
+  }
+  return 'translate-x-full opacity-0';
+});
+
+const currentNotification = ref(null);
+const currentIndex = ref(0);
+let showTimeout = null;
+let hideTimeout = null;
+let cycleTimeout = null;
+
+const showNext = () => {
+  if (props.notifications.length === 0) return;
+
+  currentNotification.value = props.notifications[currentIndex.value];
+  currentIndex.value = (currentIndex.value + 1) % props.notifications.length;
+
+  hideTimeout = setTimeout(() => {
+    currentNotification.value = null;
+
+    cycleTimeout = setTimeout(showNext, props.interval - props.displayDuration);
+  }, props.displayDuration);
+};
+
+onMounted(() => {
+  if (process.client && props.notifications.length > 0) {
+    showTimeout = setTimeout(showNext, props.initialDelay);
+  }
+});
+
+onUnmounted(() => {
+  if (showTimeout) clearTimeout(showTimeout);
+  if (hideTimeout) clearTimeout(hideTimeout);
+  if (cycleTimeout) clearTimeout(cycleTimeout);
+});
+</script>

package/app/components/X/Mark/_archive/Pattern/Background.vue

@@ -0,0 +1,83 @@
+<template>
+  <div
+    class="absolute inset-0 pointer-events-none"
+    :style="{
+      opacity: opacity,
+      backgroundImage: `url('${patternSvg}')`,
+      backgroundSize: size
+    }"
+  />
+</template>
+
+<script setup>
+const props = defineProps({
+  /** Pattern type */
+  pattern: {
+    type: String,
+    default: 'dots',
+    validator: (v) => ['dots', 'grid', 'diagonal', 'topography', 'circuit', 'waves'].includes(v),
+  },
+  /** Pattern opacity (0-1) */
+  opacity: {
+    type: Number,
+    default: 0.05,
+  },
+  /** Background size */
+  size: {
+    type: String,
+    default: 'auto',
+  },
+  /** Pattern color */
+  color: {
+    type: String,
+    default: 'currentColor',
+  },
+});
+
+const patterns = {
+  dots: (color) => `data:image/svg+xml,${encodeURIComponent(`
+    <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="2" cy="2" r="1" fill="${color}"/>
+    </svg>
+  `)}`,
+
+  grid: (color) => `data:image/svg+xml,${encodeURIComponent(`
+    <svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+      <path d="M0 0h40v40H0z" fill="none" stroke="${color}" stroke-width="0.5"/>
+    </svg>
+  `)}`,
+
+  diagonal: (color) => `data:image/svg+xml,${encodeURIComponent(`
+    <svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+      <path d="M0 40L40 0" stroke="${color}" stroke-width="0.5"/>
+    </svg>
+  `)}`,
+
+  topography: (color) => `data:image/svg+xml,${encodeURIComponent(`
+    <svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+      <path d="M0 50 Q25 30 50 50 T100 50" stroke="${color}" fill="none" stroke-width="0.5"/>
+      <path d="M0 70 Q25 50 50 70 T100 70" stroke="${color}" fill="none" stroke-width="0.5"/>
+      <path d="M0 30 Q25 10 50 30 T100 30" stroke="${color}" fill="none" stroke-width="0.5"/>
+    </svg>
+  `)}`,
+
+  circuit: (color) => `data:image/svg+xml,${encodeURIComponent(`
+    <svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
+      <path d="M30 0v20M30 40v20M0 30h20M40 30h20" stroke="${color}" stroke-width="0.5" fill="none"/>
+      <circle cx="30" cy="30" r="3" stroke="${color}" fill="none" stroke-width="0.5"/>
+    </svg>
+  `)}`,
+
+  waves: (color) => `data:image/svg+xml,${encodeURIComponent(`
+    <svg width="100" height="20" viewBox="0 0 100 20" xmlns="http://www.w3.org/2000/svg">
+      <path d="M0 10 Q25 0 50 10 T100 10" stroke="${color}" fill="none" stroke-width="0.5"/>
+    </svg>
+  `)}`,
+};
+
+const patternSvg = computed(() => {
+  // Use fully opaque color - opacity is controlled by the wrapper element
+  const colorValue = props.color === 'currentColor' ? 'rgb(0,0,0)' : props.color;
+  return patterns[props.pattern]?.(colorValue) || patterns.dots(colorValue);
+});
+</script>

package/app/components/X/Mark/_archive/Pattern/CheckBg.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="absolute inset-0 pointer-events-none overflow-hidden">
+    <div
+      class="absolute inset-0 transition-transform duration-100 xParallax"
+      data-parallax-speed="0.4"
+      :style="{
+        opacity: opacity,
+        backgroundImage: patternSvg
+      }"
+    />
+    <div class="absolute top-0 left-0 right-0 h-32 bg-gradient-to-b from-[#0a0a0a] to-transparent z-10" />
+    <div class="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-[#0a0a0a] to-transparent z-10" />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  /** Pattern opacity (0-1) */
+  opacity: {
+    type: Number,
+    default: 0.5,
+  },
+  /** Pattern color */
+  color: {
+    type: String,
+    default: '#164e63',
+  },
+})
+
+const patternSvg = computed(() => {
+  const encodedColor = encodeURIComponent(props.color)
+  return `url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cpattern id="diag" x="0" y="0" width="60" height="60" patternUnits="userSpaceOnUse"%3E%3Cline x1="0" y1="60" x2="60" y2="0" stroke="${encodedColor}" stroke-width="1" opacity="0.4"/%3E%3C/pattern%3E%3Crect width="60" height="60" fill="url(%23diag)"/%3E%3C/svg%3E')`
+})
+</script>
+

package/app/components/X/Mark/_archive/Pattern/CircuitBg.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="absolute inset-0 pointer-events-none overflow-hidden">
+    <div
+      class="absolute inset-0 transition-transform duration-100 xParallax"
+      data-parallax-speed="0.4"
+      :style="{
+        opacity: opacity,
+        backgroundImage: patternSvg
+      }"
+    />
+    <div class="absolute top-0 left-0 right-0 h-32 bg-gradient-to-b from-[#0a0a0a] to-transparent z-10" />
+    <div class="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-[#0a0a0a] to-transparent z-10" />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  /** Pattern opacity (0-1) */
+  opacity: {
+    type: Number,
+    default: 0.35,
+  },
+  /** Primary pattern color */
+  color: {
+    type: String,
+    default: '#164e63',
+  },
+  /** Secondary pattern color */
+  colorSecondary: {
+    type: String,
+    default: '#1e3a8a',
+  },
+})
+
+const patternSvg = computed(() => {
+  const encodedColor = encodeURIComponent(props.color)
+  const encodedColorSecondary = encodeURIComponent(props.colorSecondary)
+  return `url('data:image/svg+xml,%3Csvg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"%3E%3Cpattern id="circuit" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse"%3E%3Cpath d="M0 50 H30 V20 H50" fill="none" stroke="${encodedColor}" stroke-width="1"/%3E%3Cpath d="M50 80 V50 H80 V30" fill="none" stroke="${encodedColorSecondary}" stroke-width="1"/%3E%3Ccircle cx="30" cy="50" r="3" fill="${encodedColor}"/%3E%3Ccircle cx="50" cy="20" r="3" fill="${encodedColor}"/%3E%3Ccircle cx="50" cy="80" r="3" fill="${encodedColorSecondary}"/%3E%3Ccircle cx="80" cy="30" r="3" fill="${encodedColorSecondary}"/%3E%3C/pattern%3E%3Crect width="100" height="100" fill="url(%23circuit)"/%3E%3C/svg%3E')`
+})
+</script>
+

package/app/components/X/Mark/_archive/Pattern/DotsBg.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="absolute inset-0 pointer-events-none overflow-hidden">
+    <div
+      class="absolute inset-0 transition-transform duration-100 xParallax"
+      data-parallax-speed="0.4"
+      :style="{
+        opacity: opacity,
+        backgroundImage: patternSvg
+      }"
+    />
+    <div class="absolute top-0 left-0 right-0 h-32 bg-gradient-to-b from-[#0a0a0a] to-transparent z-10" />
+    <div class="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-[#0a0a0a] to-transparent z-10" />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  /** Pattern opacity (0-1) */
+  opacity: {
+    type: Number,
+    default: 0.5,
+  },
+  /** Pattern color */
+  color: {
+    type: String,
+    default: '#164e63',
+  },
+})
+
+const patternSvg = computed(() => {
+  const encodedColor = encodeURIComponent(props.color)
+  return `url('data:image/svg+xml,%3Csvg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"%3E%3Cpattern id="dots" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse"%3E%3Ccircle cx="20" cy="20" r="2" fill="${encodedColor}" opacity="0.6"/%3E%3C/pattern%3E%3Crect width="40" height="40" fill="url(%23dots)"/%3E%3C/svg%3E')`
+})
+</script>
+

package/app/components/X/Mark/_archive/Pattern/GlowDivider.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="relative h-px" :class="spacingClasses">
+    <div
+      class="absolute inset-0 bg-gradient-to-r from-transparent to-transparent"
+      :class="lineClasses"
+    />
+    <div
+      v-if="glow"
+      class="absolute inset-0 bg-gradient-to-r from-transparent to-transparent blur-sm"
+      :class="glowClasses"
+    />
+    <div
+      v-if="glow && intensity === 'strong'"
+      class="absolute -inset-1 bg-gradient-to-r from-transparent to-transparent blur-xl"
+      :class="glowXlClasses"
+    />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  /** Show glow effect */
+  glow: {
+    type: Boolean,
+    default: true,
+  },
+  /** Glow color preset */
+  color: {
+    type: String,
+    default: 'primary',
+    validator: (v) => ['primary', 'secondary', 'neutral', 'cyan', 'blue', 'purple', 'white'].includes(v),
+  },
+  /** Glow strength */
+  intensity: {
+    type: String,
+    default: 'medium',
+    validator: (v) => ['subtle', 'medium', 'strong'].includes(v),
+  },
+  /** Vertical margin */
+  spacing: {
+    type: String,
+    default: 'my-16',
+  },
+})
+
+const spacingClasses = computed(() => props.spacing)
+
+const lineClasses = computed(() => {
+  const colors = {
+    primary: 'via-primary-500/50',
+    secondary: 'via-secondary-500/50',
+    neutral: 'via-neutral-500/30',
+    cyan: 'via-cyan-500/50',
+    blue: 'via-blue-500/50',
+    purple: 'via-purple-500/50',
+    white: 'via-white/30',
+  }
+  return colors[props.color]
+})
+
+const glowClasses = computed(() => {
+  const colors = {
+    primary: 'via-primary-400',
+    secondary: 'via-secondary-400',
+    neutral: 'via-neutral-400',
+    cyan: 'via-cyan-400',
+    blue: 'via-blue-400',
+    purple: 'via-purple-400',
+    white: 'via-white',
+  }
+  return colors[props.color]
+})
+
+const glowXlClasses = computed(() => {
+  const colors = {
+    primary: 'via-primary-500/20',
+    secondary: 'via-secondary-500/20',
+    neutral: 'via-neutral-500/20',
+    cyan: 'via-cyan-500/20',
+    blue: 'via-blue-500/20',
+    purple: 'via-purple-500/20',
+    white: 'via-white/20',
+  }
+  return colors[props.color]
+})
+</script>

package/app/components/X/Mark/_archive/Pattern/HexBg.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="absolute inset-0 pointer-events-none overflow-hidden">
+    <div
+      class="absolute inset-0 transition-transform duration-100 xParallax"
+      data-parallax-speed="0.4"
+      :style="{
+        opacity: opacity,
+        backgroundImage: patternSvg
+      }"
+    />
+    <div class="absolute top-0 left-0 right-0 h-32 bg-gradient-to-b from-[#0a0a0a] to-transparent z-10" />
+    <div class="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-[#0a0a0a] to-transparent z-10" />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  /** Pattern opacity (0-1) */
+  opacity: {
+    type: Number,
+    default: 0.4,
+  },
+  /** Pattern color */
+  color: {
+    type: String,
+    default: '#164e63',
+  },
+})
+
+const patternSvg = computed(() => {
+  const encodedColor = encodeURIComponent(props.color)
+  return `url('data:image/svg+xml,%3Csvg width="60" height="52" viewBox="0 0 60 52" xmlns="http://www.w3.org/2000/svg"%3E%3Cpattern id="hex" x="0" y="0" width="60" height="52" patternUnits="userSpaceOnUse"%3E%3Cpath d="M30 0 L45 13 L45 39 L30 52 L15 39 L15 13 Z" fill="none" stroke="${encodedColor}" stroke-width="1" opacity="0.5"/%3E%3C/pattern%3E%3Crect width="60" height="52" fill="url(%23hex)"/%3E%3C/svg%3E')`
+})
+</script>
+

package/app/components/X/Mark/_archive/Pattern/PlaidBg.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="absolute inset-0 pointer-events-none overflow-hidden">
+    <div
+      class="absolute inset-0 transition-transform duration-100 xParallax"
+      data-parallax-speed="0.4"
+      :style="{
+        opacity: opacity,
+        backgroundImage: patternSvg
+      }"
+    />
+    <div class="absolute top-0 left-0 right-0 h-32 bg-gradient-to-b from-[#0a0a0a] to-transparent z-10" />
+    <div class="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-[#0a0a0a] to-transparent z-10" />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  /** Pattern opacity (0-1) */
+  opacity: {
+    type: Number,
+    default: 0.6,
+  },
+  /** Primary pattern color */
+  color: {
+    type: String,
+    default: '#164e63',
+  },
+  /** Secondary pattern color */
+  colorSecondary: {
+    type: String,
+    default: '#1e3a8a',
+  },
+  /** Background color */
+  bgColor: {
+    type: String,
+    default: '#0a0a0a',
+  },
+})
+
+const patternSvg = computed(() => {
+  const encodedColor = encodeURIComponent(props.color)
+  const encodedColorSecondary = encodeURIComponent(props.colorSecondary)
+  const encodedBgColor = encodeURIComponent(props.bgColor)
+  return `url('data:image/svg+xml,%3Csvg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cdefs%3E%3Cpattern id="plaid" x="0" y="0" width="200" height="200" patternUnits="userSpaceOnUse"%3E%3Crect width="200" height="200" fill="${encodedBgColor}"/%3E%3Cline x1="0" y1="0" x2="200" y2="200" stroke="${encodedColor}" stroke-width="4" opacity="0.7"/%3E%3Cline x1="80" y1="0" x2="280" y2="200" stroke="${encodedColorSecondary}" stroke-width="4" opacity="0.6"/%3E%3Cline x1="160" y1="0" x2="360" y2="200" stroke="${encodedColor}" stroke-width="4" opacity="0.7"/%3E%3Cline x1="-80" y1="0" x2="120" y2="200" stroke="${encodedColorSecondary}" stroke-width="4" opacity="0.6"/%3E%3Cline x1="200" y1="0" x2="0" y2="200" stroke="${encodedColor}" stroke-width="4" opacity="0.65"/%3E%3Cline x1="280" y1="0" x2="80" y2="200" stroke="${encodedColorSecondary}" stroke-width="4" opacity="0.55"/%3E%3Cline x1="120" y1="0" x2="-80" y2="200" stroke="${encodedColor}" stroke-width="4" opacity="0.65"/%3E%3Cline x1="40" y1="0" x2="-160" y2="200" stroke="${encodedColorSecondary}" stroke-width="4" opacity="0.55"/%3E%3C/pattern%3E%3C/defs%3E%3Crect width="200" height="200" fill="url(%23plaid)"/%3E%3C/svg%3E')`
+})
+</script>
+

package/app/components/X/Mark/_archive/Pattern/SectionStitch.vue

@@ -0,0 +1,168 @@
+<template>
+	<div
+		:class="[
+			'relative w-full overflow-hidden',
+			heightClasses
+		]"
+	>
+		<!-- Angled Divider -->
+		<svg
+			v-if="variant === 'angle'"
+			class="absolute inset-0 w-full h-full"
+			preserveAspectRatio="none"
+			viewBox="0 0 100 100"
+		>
+			<polygon
+				:fill="topColor"
+				:points="anglePoints.top"
+			/>
+			<polygon
+				:fill="bottomColor"
+				:points="anglePoints.bottom"
+			/>
+		</svg>
+
+		<!-- Wave Divider -->
+		<svg
+			v-else-if="variant === 'wave'"
+			class="absolute inset-0 w-full h-full"
+			preserveAspectRatio="none"
+			viewBox="0 0 1200 120"
+		>
+			<path
+				:fill="topColor"
+				d="M0,0 L1200,0 L1200,40 Q900,120 600,60 Q300,0 0,60 L0,0 Z"
+			/>
+			<path
+				:fill="bottomColor"
+				d="M0,120 L1200,120 L1200,40 Q900,120 600,60 Q300,0 0,60 L0,120 Z"
+			/>
+		</svg>
+
+		<!-- Curve Divider -->
+		<svg
+			v-else-if="variant === 'curve'"
+			class="absolute inset-0 w-full h-full"
+			preserveAspectRatio="none"
+			viewBox="0 0 100 100"
+		>
+			<path
+				:fill="topColor"
+				d="M0,0 L100,0 L100,50 Q50,100 0,50 Z"
+			/>
+			<path
+				:fill="bottomColor"
+				d="M0,100 L100,100 L100,50 Q50,100 0,50 Z"
+			/>
+		</svg>
+
+		<!-- Triangle Divider -->
+		<svg
+			v-else-if="variant === 'triangle'"
+			class="absolute inset-0 w-full h-full"
+			preserveAspectRatio="none"
+			viewBox="0 0 100 100"
+		>
+			<polygon
+				:fill="topColor"
+				points="0,0 100,0 100,100 50,60 0,100"
+			/>
+			<polygon
+				:fill="bottomColor"
+				points="0,100 50,60 100,100"
+			/>
+		</svg>
+
+		<!-- Zigzag Divider -->
+		<svg
+			v-else-if="variant === 'zigzag'"
+			class="absolute inset-0 w-full h-full"
+			preserveAspectRatio="none"
+			viewBox="0 0 100 20"
+		>
+			<polygon
+				:fill="topColor"
+				points="0,0 100,0 100,10 90,20 80,10 70,20 60,10 50,20 40,10 30,20 20,10 10,20 0,10"
+			/>
+			<polygon
+				:fill="bottomColor"
+				points="0,20 10,20 20,10 30,20 40,10 50,20 60,10 70,20 80,10 90,20 100,10 100,20"
+			/>
+		</svg>
+
+		<!-- Glow line overlay -->
+		<div
+			v-if="glow"
+			class="absolute inset-x-0 top-1/2 -translate-y-1/2 h-px"
+			:style="{
+				background: `linear-gradient(90deg, transparent 0%, ${glowColor} 50%, transparent 100%)`,
+				boxShadow: `0 0 20px ${glowColor}`
+			}"
+		/>
+	</div>
+</template>
+
+<script setup>
+const props = defineProps({
+	/** Stitch variant */
+	variant: {
+		type: String,
+		default: 'angle',
+		validator: (v) => ['angle', 'wave', 'curve', 'triangle', 'zigzag'].includes(v),
+	},
+	/** Top section color (CSS color) */
+	topColor: {
+		type: String,
+		default: 'var(--color-neutral-100)',
+	},
+	/** Bottom section color (CSS color) */
+	bottomColor: {
+		type: String,
+		default: 'var(--color-neutral-50)',
+	},
+	/** Height preset */
+	height: {
+		type: String,
+		default: 'md',
+		validator: (v) => ['sm', 'md', 'lg', 'xl'].includes(v),
+	},
+	/** Flip the direction */
+	flip: {
+		type: Boolean,
+		default: false,
+	},
+	/** Add glow line at center */
+	glow: {
+		type: Boolean,
+		default: false,
+	},
+	/** Glow line color */
+	glowColor: {
+		type: String,
+		default: 'var(--x-glow-primary)',
+	},
+});
+
+const heightClasses = computed(() => {
+	const heights = {
+		sm: 'h-12 md:h-16',
+		md: 'h-16 md:h-24',
+		lg: 'h-24 md:h-32',
+		xl: 'h-32 md:h-48',
+	};
+	return heights[props.height];
+});
+
+const anglePoints = computed(() => {
+	if (props.flip) {
+		return {
+			top: '0,0 100,0 100,100 0,0',
+			bottom: '0,0 100,100 0,100',
+		};
+	}
+	return {
+		top: '0,0 100,0 0,100',
+		bottom: '0,100 100,0 100,100',
+	};
+});
+</script>