@coffic/cosy-ui 0.7.2 → 0.7.4

package/dist/confirm-dialog-vue/ConfirmDialog.vue

@@ -0,0 +1,134 @@
+<!--
+@component ConfirmDialog
+
+@description
+ConfirmDialog 组件用于显示确认对话框，带有标题、消息内容和两个按钮（确认和取消），支持自定义按钮文本，并带有淡入淡出动画效果。
+
+@usage
+基本用法：
+```vue
+<ConfirmDialog v-model="showDialog" title="确认操作" message="您确定要执行此操作吗？" @confirm="handleConfirm" />
+```
+
+自定义按钮文本：
+```vue
+<ConfirmDialog 
+  v-model="showDialog" 
+  title="删除确认" 
+  message="您确定要删除此项目吗？此操作无法撤销。" 
+  cancel-text="取消" 
+  confirm-text="删除" 
+  @confirm="handleDelete" 
+/>
+```
+
+组合使用：
+```vue
+<template>
+  <button @click="showDialog = true">删除项目</button>
+  <ConfirmDialog v-model="showDialog" title="删除确认" message="此操作无法撤销" @confirm="handleDelete" />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ConfirmDialog } from 'cosy-ui';
+
+const showDialog = ref(false);
+const handleDelete = () => {
+  // 处理确认删除逻辑
+};
+</script>
+```
+
+@props
+@prop {boolean} modelValue - 控制对话框显示状态，支持v-model双向绑定
+@prop {string} [title='Confirm'] - 对话框标题
+@prop {string} [message='Are you sure you want to confirm this action?'] - 对话框显示的消息内容
+@prop {string} [cancel-text='取消'] - 取消按钮的文本
+@prop {string} [confirm-text='确认'] - 确认按钮的文本
+
+@emits
+@emit {update:modelValue} - 当对话框关闭时触发，用于更新v-model绑定值
+@emit {confirm} - 当用户点击确认按钮时触发
+-->
+
+<template>
+    <Transition name="fade" class="cosy:transition-opacity cosy:duration-200 cosy:ease-in-out">
+        <div v-if="modelValue"
+            class="cosy:fixed cosy:inset-0 cosy:z-50 cosy:flex cosy:items-center cosy:justify-center">
+            <!-- 背景遮罩 -->
+            <div class="cosy:absolute cosy:inset-0 cosy:bg-base-200/80 cosy:backdrop-blur-sm"
+                @click="$emit('update:modelValue', false)" />
+
+            <!-- 对话框 -->
+            <div
+                class="cosy:relative cosy:bg-base-100 cosy:rounded-xl cosy:shadow-xl cosy:w-[400px] cosy:transform cosy:transition-all">
+                <!-- 内容区域 -->
+                <div class="cosy:p-6">
+                    <h3 class="cosy:text-lg cosy:font-medium cosy:text-base-content cosy:mb-2">
+                        {{ title }}
+                    </h3>
+                    <p class="cosy:text-base-content/80">
+                        {{ message }}
+                    </p>
+                </div>
+
+                <!-- 按钮区域 -->
+                <div class="cosy:flex cosy:border-t cosy:border-base-300">
+                    <button class="cosy:flex-1 cosy:btn cosy:btn-ghost cosy:rounded-none cosy:rounded-bl-xl"
+                        @click="$emit('update:modelValue', false)">
+                        {{ cancelText }}
+                    </button>
+                    <button
+                        class="cosy:flex-1 cosy:btn cosy:btn-ghost cosy:text-primary cosy:rounded-none cosy:rounded-br-xl cosy:border-l cosy:border-base-300"
+                        @click="handleConfirm">
+                        {{ confirmText }}
+                    </button>
+                </div>
+            </div>
+        </div>
+    </Transition>
+</template>
+
+<script setup lang="ts">
+import '../../style'
+
+defineProps({
+    modelValue: Boolean,
+    title: {
+        type: String,
+        default: 'Confirm'
+    },
+    message: {
+        type: String,
+        default: 'Are you sure you want to confirm this action?'
+    },
+    cancelText: {
+        type: String,
+        default: '取消'
+    },
+    confirmText: {
+        type: String,
+        default: '确认'
+    }
+})
+
+const emit = defineEmits(['update:modelValue', 'confirm'])
+
+const handleConfirm = () => {
+    emit('update:modelValue', false)
+    emit('confirm')
+}
+</script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+}
+</style>

package/dist/confirm-dialog-vue/CustomButtons.vue

@@ -0,0 +1,69 @@
+<!--
+@component ConfirmDialog.CustomButtons
+
+@description
+展示如何自定义 ConfirmDialog 组件的按钮文本。
+
+@usage
+```vue
+<ConfirmDialogExamples.CustomButtons />
+```
+-->
+
+<script lang="ts">
+import '../../app.css'
+import { ref, defineComponent } from 'vue'
+import ConfirmDialog from './ConfirmDialog.vue'
+
+export default defineComponent({
+    name: 'ConfirmDialogCustomButtonsExample',
+    components: {
+        ConfirmDialog
+    },
+    setup() {
+        const isShowDelete = ref(false)
+        const isShowSave = ref(false)
+        const result = ref('')
+
+        const handleConfirm = (action: string) => {
+            result.value = `用户已${action}`
+
+            // 3秒后清除结果
+            setTimeout(() => {
+                result.value = ''
+            }, 3000)
+        }
+
+        return {
+            isShowDelete,
+            isShowSave,
+            result,
+            handleConfirm
+        }
+    }
+})
+</script>
+
+<template>
+    <div class="cosy:flex cosy:flex-col cosy:gap-4">
+        <div class="cosy:flex cosy:gap-4">
+            <button @click="isShowDelete = true" class="cosy:btn cosy:btn-error">
+                删除文件
+            </button>
+
+            <button @click="isShowSave = true" class="cosy:btn cosy:btn-success">
+                保存更改
+            </button>
+        </div>
+
+        <div v-if="result" class="cosy:alert cosy:alert-info cosy:shadow-lg">
+            <span>{{ result }}</span>
+        </div>
+    </div>
+
+    <ConfirmDialog v-model="isShowDelete" title="警告" message="您确定要删除这个文件吗？此操作无法撤销。" cancel-text="取消" confirm-text="删除"
+        @confirm="handleConfirm('删除了文件')" />
+
+    <ConfirmDialog v-model="isShowSave" title="保存更改" message="您的更改尚未保存，确定要保存吗？" cancel-text="稍后再说" confirm-text="保存"
+        @confirm="handleConfirm('保存了更改')" />
+</template>

package/dist/confirm-dialog-vue/index.ts

@@ -0,0 +1,20 @@
+import Basic from './Basic.vue';
+import CustomButtons from './CustomButtons.vue';
+import BasicSource from './Basic.vue?raw';
+import CustomButtonsSource from './CustomButtons.vue?raw';
+import { extractSimpleExample } from '../../utils/component';
+
+// 导出主组件
+export { default as ConfirmDialog } from './ConfirmDialog.vue';
+
+// 导出示例组件
+export const ConfirmDialogExamples = {
+	Basic,
+	CustomButtons,
+};
+
+// 导出示例源代码
+export const ConfirmDialogExampleCodes = {
+	Basic: extractSimpleExample(BasicSource, 'ConfirmDialog'),
+	CustomButtons: extractSimpleExample(CustomButtonsSource, 'ConfirmDialog'),
+};

package/dist/contact/Contact.astro

@@ -0,0 +1,279 @@
+---
+/**
+ * @component Contact
+ *
+ * @description
+ * Contact 组件用于展示企业或个人的联系信息，支持多种联系方式（邮件、电话、地址）和社交媒体链接。
+ * 组件设计简洁专业，适合在企业网站的联系页面、页脚或关于我们页面中使用。
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <Contact
+ *   email="contact@company.com"
+ *   phone="+1 (555) 123-4567"
+ *   address="123 Business St, City, State 12345"
+ * />
+ * ```
+ *
+ * 带社交媒体链接：
+ * ```astro
+ * <Contact
+ *   email="contact@company.com"
+ *   phone="+1 (555) 123-4567"
+ *   address="123 Business St, City, State 12345"
+ *   github="https://github.com/company"
+ *   twitter="https://twitter.com/company"
+ *   facebook="https://facebook.com/company"
+ * />
+ * ```
+ *
+ * 带标题和描述：
+ * ```astro
+ * <Contact
+ *   title="联系我们"
+ *   description="欢迎随时与我们取得联系"
+ *   email="contact@company.com"
+ *   phone="+1 (555) 123-4567"
+ * />
+ * ```
+ *
+ * 紧凑模式：
+ * ```astro
+ * <Contact
+ *   email="contact@company.com"
+ *   phone="+1 (555) 123-4567"
+ *   compact
+ * />
+ * ```
+ *
+ * @props
+ * @prop {string} [title] - 联系信息标题
+ * @prop {string} [description] - 联系信息描述
+ * @prop {string} [email] - 电子邮件地址
+ * @prop {string} [phone] - 电话号码
+ * @prop {string} [address] - 地址信息
+ * @prop {string} [website] - 网站链接
+ * @prop {string} [github] - GitHub链接
+ * @prop {string} [twitter] - Twitter链接
+ * @prop {string} [facebook] - Facebook链接
+ * @prop {string} [linkedin] - LinkedIn链接
+ * @prop {boolean} [compact] - 是否使用紧凑模式
+ * @prop {string} [class] - 自定义CSS类，可用于覆盖默认样式
+ *
+ * @slots
+ * @slot default - 额外的联系信息内容
+ */
+
+import '../style.ts';
+
+interface Props {
+	title?: string;
+	description?: string;
+	email?: string;
+	phone?: string;
+	address?: string;
+	website?: string;
+	github?: string;
+	twitter?: string;
+	facebook?: string;
+	linkedin?: string;
+	compact?: boolean;
+	class?: string;
+}
+
+const {
+	title,
+	description,
+	email,
+	phone,
+	address,
+	website,
+	github,
+	twitter,
+	facebook,
+	linkedin,
+	compact,
+	class: className = '',
+} = Astro.props;
+
+// 构建联系信息容器样式
+const contactClasses = [
+	'cosy:card',
+	'cosy:w-full',
+	'cosy:bg-base-100',
+	'cosy:shadow-lg',
+	compact ? 'cosy:card-compact' : '',
+	className,
+]
+	.filter(Boolean)
+	.join(' ');
+
+// 内容区域的padding
+const contentPadding = compact ? 'cosy:p-4' : 'cosy:p-6';
+
+// 联系信息项的样式
+const contactItemClass = 'cosy:flex cosy:items-center cosy:gap-3 cosy:mb-4 last:cosy:mb-0';
+const iconClass = 'cosy:w-5 cosy:h-5 cosy:text-primary cosy:flex-shrink-0';
+const linkClass =
+	'cosy:link cosy:link-hover cosy:text-base-content cosy:no-underline hover:cosy:text-primary cosy:transition-colors';
+
+// 社交媒体链接样式
+const socialLinksClass =
+	'cosy:flex cosy:gap-4 cosy:mt-6 cosy:pt-4 cosy:border-t cosy:border-base-300';
+const socialLinkClass =
+	'cosy:btn cosy:btn-ghost cosy:btn-circle cosy:btn-sm cosy:text-base-content hover:cosy:text-primary hover:cosy:bg-primary/10';
+---
+
+<div class={contactClasses}>
+	<div class={`cosy:card-body ${contentPadding}`}>
+		{title && <h2 class="cosy:card-title cosy:text-2xl cosy:font-bold cosy:mb-2">{title}</h2>}
+
+		{description && <p class="cosy:text-base-content/70 cosy:mb-6">{description}</p>}
+
+		<div class="cosy:space-y-0">
+			{
+				email && (
+					<div class={contactItemClass}>
+						<svg class={iconClass} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+							/>
+						</svg>
+						<a href={`mailto:${email}`} class={linkClass}>
+							{email}
+						</a>
+					</div>
+				)
+			}
+
+			{
+				phone && (
+					<div class={contactItemClass}>
+						<svg class={iconClass} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
+							/>
+						</svg>
+						<a href={`tel:${phone}`} class={linkClass}>
+							{phone}
+						</a>
+					</div>
+				)
+			}
+
+			{
+				address && (
+					<div class={contactItemClass}>
+						<svg class={iconClass} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
+							/>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
+							/>
+						</svg>
+						<span class="cosy:text-base-content">{address}</span>
+					</div>
+				)
+			}
+
+			{
+				website && (
+					<div class={contactItemClass}>
+						<svg class={iconClass} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"
+							/>
+						</svg>
+						<a href={website} target="_blank" rel="noopener noreferrer" class={linkClass}>
+							{website.replace(/^https?:\/\//, '')}
+						</a>
+					</div>
+				)
+			}
+		</div>
+
+		{
+			Astro.slots.has('default') && (
+				<div class="cosy:mt-4">
+					<slot />
+				</div>
+			)
+		}
+
+		{
+			(github || twitter || facebook || linkedin) && (
+				<div class={socialLinksClass}>
+					{github && (
+						<a
+							href={github}
+							target="_blank"
+							rel="noopener noreferrer"
+							class={socialLinkClass}
+							title="GitHub">
+							<svg class="cosy:w-5 cosy:h-5" fill="currentColor" viewBox="0 0 24 24">
+								<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+							</svg>
+						</a>
+					)}
+
+					{twitter && (
+						<a
+							href={twitter}
+							target="_blank"
+							rel="noopener noreferrer"
+							class={socialLinkClass}
+							title="Twitter">
+							<svg class="cosy:w-5 cosy:h-5" fill="currentColor" viewBox="0 0 24 24">
+								<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z" />
+							</svg>
+						</a>
+					)}
+
+					{facebook && (
+						<a
+							href={facebook}
+							target="_blank"
+							rel="noopener noreferrer"
+							class={socialLinkClass}
+							title="Facebook">
+							<svg class="cosy:w-5 cosy:h-5" fill="currentColor" viewBox="0 0 24 24">
+								<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
+							</svg>
+						</a>
+					)}
+
+					{linkedin && (
+						<a
+							href={linkedin}
+							target="_blank"
+							rel="noopener noreferrer"
+							class={socialLinkClass}
+							title="LinkedIn">
+							<svg class="cosy:w-5 cosy:h-5" fill="currentColor" viewBox="0 0 24 24">
+								<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
+							</svg>
+						</a>
+					)}
+				</div>
+			)
+		}
+	</div>
+</div>
+

package/dist/contact/EContactBasic.astro

@@ -0,0 +1,15 @@
+---
+/**
+ * @component Contact.Basic
+ *
+ * @description
+ * 基础Contact组件示例，展示最简单的联系信息用法。
+ */
+import Contact from './Contact.astro';
+---
+
+<Contact
+	email="contact@company.com"
+	phone="+1 (555) 123-4567"
+	address="123 Business St, City, State 12345"
+/>

package/dist/contact/EContactBasicContainer.astro

@@ -0,0 +1,12 @@
+---
+import { CodeContainer } from '../index';
+import ContactBasic from './EContactBasic.astro';
+import ContactBasicSourceCode from './EContactBasic.astro?raw';
+---
+
+<CodeContainer codes={[ContactBasicSourceCode]}>
+	<div id="tab-1">
+		<ContactBasic />
+	</div>
+</CodeContainer>
+

package/dist/contact/EContactCompact.astro

@@ -0,0 +1,12 @@
+---
+/**
+ * @component Contact.Compact
+ *
+ * @description
+ * 紧凑模式的Contact组件示例。
+ */
+import Contact from './Contact.astro';
+---
+
+<Contact email="contact@company.com" phone="+1 (555) 123-4567" compact />
+

package/dist/contact/EContactCompactContainer.astro

@@ -0,0 +1,12 @@
+---
+import { CodeContainer } from '../index';
+import ContactCompact from './EContactCompact.astro';
+import ContactCompactSourceCode from './EContactCompact.astro?raw';
+---
+
+<CodeContainer codes={[ContactCompactSourceCode]}>
+	<div id="tab-1">
+		<ContactCompact />
+	</div>
+</CodeContainer>
+

package/dist/contact/EContactCustomStyle.astro

@@ -0,0 +1,22 @@
+---
+/**
+ * @component Contact.CustomStyle
+ *
+ * @description
+ * 展示如何使用class属性自定义Contact组件的样式。
+ */
+import '../style.ts';
+import Contact from './Contact.astro';
+---
+
+<Contact
+	title="联系我们"
+	description="自定义样式的联系信息卡片"
+	email="contact@company.com"
+	phone="+1 (555) 123-4567"
+	address="123 Business St, City, State 12345"
+	github="https://github.com/company"
+	twitter="https://twitter.com/company"
+	class="cosy:bg-gradient-to-br cosy:from-blue-50 cosy:to-purple-50 cosy:border-2 cosy:border-blue-200 cosy:shadow-2xl"
+/>
+

package/dist/contact/EContactCustomStyleContainer.astro

@@ -0,0 +1,12 @@
+---
+import { CodeContainer } from '../index';
+import ContactCustomStyle from './EContactCustomStyle.astro';
+import ContactCustomStyleSourceCode from './EContactCustomStyle.astro?raw';
+---
+
+<CodeContainer codes={[ContactCustomStyleSourceCode]}>
+	<div id="tab-1">
+		<ContactCustomStyle />
+	</div>
+</CodeContainer>
+

package/dist/contact/EContactSocial.astro

@@ -0,0 +1,21 @@
+---
+/**
+ * @component Contact.Social
+ *
+ * @description
+ * 带社交媒体链接的Contact组件示例。
+ */
+import Contact from './Contact.astro';
+---
+
+<Contact
+	title="联系我们"
+	email="contact@company.com"
+	phone="+1 (555) 123-4567"
+	website="https://www.company.com"
+	github="https://github.com/company"
+	twitter="https://twitter.com/company"
+	facebook="https://facebook.com/company"
+	linkedin="https://linkedin.com/company/company"
+/>
+

package/dist/contact/EContactSocialContainer.astro

@@ -0,0 +1,12 @@
+---
+import { CodeContainer } from '../index';
+import ContactSocial from './EContactSocial.astro';
+import ContactSocialSourceCode from './EContactSocial.astro?raw';
+---
+
+<CodeContainer codes={[ContactSocialSourceCode]}>
+	<div id="tab-1">
+		<ContactSocial />
+	</div>
+</CodeContainer>
+

package/dist/contact/EContactWithTitle.astro

@@ -0,0 +1,18 @@
+---
+/**
+ * @component Contact.WithTitle
+ *
+ * @description
+ * 带标题和描述的Contact组件示例。
+ */
+import Contact from './Contact.astro';
+---
+
+<Contact
+	title="联系我们"
+	description="欢迎随时与我们取得联系，我们将尽快回复您"
+	email="contact@company.com"
+	phone="+1 (555) 123-4567"
+	address="123 Business St, City, State 12345"
+/>
+

package/dist/contact/EContactWithTitleContainer.astro

@@ -0,0 +1,12 @@
+---
+import { CodeContainer } from '../index';
+import ContactWithTitle from './EContactWithTitle.astro';
+import ContactWithTitleSourceCode from './EContactWithTitle.astro?raw';
+---
+
+<CodeContainer codes={[ContactWithTitleSourceCode]}>
+	<div id="tab-1">
+		<ContactWithTitle />
+	</div>
+</CodeContainer>
+

package/dist/contact/index.ts

@@ -0,0 +1,21 @@
+import Contact from './Contact.astro';
+
+// Container components
+import ContactBasicContainer from './EContactBasicContainer.astro';
+import ContactWithTitleContainer from './EContactWithTitleContainer.astro';
+import ContactSocialContainer from './EContactSocialContainer.astro';
+import ContactCompactContainer from './EContactCompactContainer.astro';
+import ContactCustomStyleContainer from './EContactCustomStyleContainer.astro';
+
+export { Contact };
+
+export const ContactPackage = {
+    Contact,
+    ContactContainers: {
+        Basic: ContactBasicContainer,
+        WithTitle: ContactWithTitleContainer,
+        Social: ContactSocialContainer,
+        Compact: ContactCompactContainer,
+        CustomStyle: ContactCustomStyleContainer,
+    },
+};