@coffic/cosy-ui 0.9.71 → 0.9.72

package/dist/index-astro.ts

@@ -47,6 +47,7 @@ export * from "./src-astro/loading-overlay";
 export * from "./src-astro/login";
 export * from "./src-astro/logout";
 export * from "./src-astro/mac-window";
+export * from "./src-astro/apple-phone";
 export * from "./src-astro/main";
 export * from "./src-astro/modal";
 export * from "./src-astro/module";

package/dist/src/components/apple-phone/applePhonePropsBase.ts

@@ -0,0 +1,36 @@
+import type { BackgroundColor } from "../../../src/common/backgrounds";
+
+/**
+ * ApplePhone 组件的基础属性接口（与框架无关）
+ */
+export interface IApplePhonePropsBase {
+	/**
+	 * 窗口高度选项
+	 * @default 'lg'
+	 */
+	height?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl";
+
+	/**
+	 * 窗口标题
+	 * @default ''
+	 */
+	title?: string;
+
+	/**
+	 * 是否显示阴影效果
+	 * @default true
+	 */
+	withShadow?: boolean;
+
+	/**
+	 * 是否显示 iPhone 边框
+	 * @default true
+	 */
+	showFrame?: boolean;
+
+	/**
+	 * 内容区域背景色
+	 * @default undefined
+	 */
+	backgroundColor?: BackgroundColor;
+}

package/dist/src/components/apple-phone/constants.ts

@@ -0,0 +1,48 @@
+/**
+ * ApplePhone 组件的常量定义
+ */
+
+// iPhone边框图片尺寸
+export const IPHONE_FRAME_WIDTH = 1339;
+export const IPHONE_FRAME_HEIGHT = 2716;
+
+// iPhone边框图片-状态栏离上边框的距离
+export const IPHONE_FRAME_STATUS_BAR_TOP = 115;
+
+// iPhone边框图片-状态栏高度
+export const IPHONE_FRAME_STATUS_BAR_HEIGHT = 110;
+
+// 比例计算
+export const MAIN_CONTENT_WIDTH_ASPECT_RATIO = 1179 / IPHONE_FRAME_WIDTH;
+export const MAIN_CONTENT_HEIGHT_ASPECT_RATIO = 2556 / IPHONE_FRAME_HEIGHT;
+export const IPHONE_FRAME_STATUS_BAR_HEIGHT_ASPECT_RATIO =
+	IPHONE_FRAME_STATUS_BAR_HEIGHT / IPHONE_FRAME_HEIGHT;
+export const IPHONE_FRAME_STATUS_BAR_TOP_ASPECT_RATIO =
+	IPHONE_FRAME_STATUS_BAR_TOP / IPHONE_FRAME_HEIGHT;
+
+// 预定义的高度选项
+export const HEIGHT_CLASSES = {
+	sm: "cosy:h-64", // 256px
+	md: "cosy:h-80", // 320px
+	lg: "cosy:h-96", // 384px
+	xl: "cosy:h-[480px]", // 480px
+	"2xl": "cosy:h-[560px]", // 560px
+	"3xl": "cosy:h-[640px]", // 640px
+	"4xl": "cosy:h-[720px]", // 720px
+	"5xl": "cosy:h-[800px]", // 800px
+} as const;
+
+// 高度值映射
+export const HEIGHT_VALUES = {
+	sm: 256,
+	md: 320,
+	lg: 384,
+	xl: 480,
+	"2xl": 560,
+	"3xl": 640,
+	"4xl": 720,
+	"5xl": 800,
+} as const;
+
+// 默认高度
+export const DEFAULT_HEIGHT: keyof typeof HEIGHT_VALUES = "lg";

package/dist/src-astro/apple-phone/ApplePhone.astro

@@ -0,0 +1,141 @@
+---
+/**
+ * @component ApplePhone
+ *
+ * @description
+ * ApplePhone 组件模拟 iPhone 设备的外观，包含状态栏、时间显示和设备边框。
+ * 适用于创建移动应用界面原型或展示移动端设计效果。
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <ApplePhone title="我的应用">
+ *   <div>应用内容</div>
+ * </ApplePhone>
+ * ```
+ *
+ * 自定义高度和背景色：
+ * ```astro
+ * <ApplePhone height="xl" backgroundColor="primary/10">
+ *   <div>应用内容</div>
+ * </ApplePhone>
+ * ```
+ *
+ * 不显示边框：
+ * ```astro
+ * <ApplePhone showFrame={false}>
+ *   <div>应用内容</div>
+ * </ApplePhone>
+ * ```
+ *
+ * @props
+ * @prop {'sm'|'md'|'lg'|'xl'|'2xl'|'3xl'|'4xl'|'5xl'} [height='lg'] - 窗口高度选项
+ * - sm: 256px (h-64)
+ * - md: 320px (h-80)
+ * - lg: 384px (h-96) - 默认值
+ * - xl: 480px
+ * - 2xl: 560px
+ * - 3xl: 640px
+ * - 4xl: 720px
+ * - 5xl: 800px
+ * @prop {String} [title=''] - 窗口标题
+ * @prop {Boolean} [withShadow=true] - 是否显示阴影效果
+ * @prop {Boolean} [showFrame=true] - 是否显示 iPhone 边框
+ * @prop {BackgroundColor} [backgroundColor=''] - 内容区域背景色，等同于为其内部的 Container 设置背景色
+ *
+ * @slots
+ * @slot default - 主要内容区域
+ */
+
+import "../../style";
+import { Container } from "../container";
+import { AlertDialog } from "../alert-dialog";
+import type { IApplePhonePropsBase } from "../../src/components/apple-phone/applePhonePropsBase";
+import StatusBarContent from "./StatusBarContent.astro";
+import PhoneFrame from "./PhoneFrame.astro";
+import {
+	IPHONE_FRAME_WIDTH,
+	IPHONE_FRAME_HEIGHT,
+	MAIN_CONTENT_WIDTH_ASPECT_RATIO,
+	MAIN_CONTENT_HEIGHT_ASPECT_RATIO,
+	IPHONE_FRAME_STATUS_BAR_HEIGHT_ASPECT_RATIO,
+	IPHONE_FRAME_STATUS_BAR_TOP_ASPECT_RATIO,
+	HEIGHT_CLASSES,
+	HEIGHT_VALUES,
+	DEFAULT_HEIGHT,
+} from "../../src/components/apple-phone/constants";
+
+// Props 定义 - 使用共享接口
+interface Props extends IApplePhonePropsBase {}
+
+const {
+	height = DEFAULT_HEIGHT,
+	title = "",
+	withShadow = true,
+	showFrame = true,
+	backgroundColor = undefined,
+} = Astro.props as Props;
+
+// 计算当前高度的缩放比例
+const currentHeight = HEIGHT_VALUES[height];
+const scaleRatio = currentHeight / 500;
+
+// 生成唯一的ID
+const uniqueId = `apple-phone-${Math.random().toString(36).substr(2, 9)}`;
+---
+
+<div
+    class={`cosy:relative not-prose cosy:mx-auto ${HEIGHT_CLASSES[height]}`}
+    style={`aspect-ratio: ${IPHONE_FRAME_WIDTH}/${IPHONE_FRAME_HEIGHT};`}
+    apple-phone>
+    <!-- iPhone 边框 -->
+    {showFrame && <PhoneFrame />}
+
+    <!-- 顶部状态栏 -->
+    <div
+        style={`position: absolute; top: ${IPHONE_FRAME_STATUS_BAR_TOP_ASPECT_RATIO * 100}%; height: ${IPHONE_FRAME_STATUS_BAR_HEIGHT_ASPECT_RATIO * 100}%; width: ${MAIN_CONTENT_WIDTH_ASPECT_RATIO * 100}%; left: 50%; transform: translate(-50%, 0); padding-left: 5%; padding-right: 5%; z-index: 50;`}>
+        <!-- StatusBarContent 组件 -->
+        <StatusBarContent scaleRatio={scaleRatio} />
+    </div>
+
+    <!-- 内容区域 -->
+    <div
+        class="cosy:inset-0 cosy:h-full cosy:flex cosy:flex-col"
+        style={`width: ${MAIN_CONTENT_WIDTH_ASPECT_RATIO * 100}%; height: ${MAIN_CONTENT_HEIGHT_ASPECT_RATIO * 100}%; left: 50%; top: 50%; transform: translate(-50%, -50%); position: absolute; z-index: 20;`}>
+        <Container
+            rounded="lg"
+            height="full"
+            background={backgroundColor || 'accent/90'}>
+            <div
+                class="cosy:h-full cosy:overflow-y-auto cosy:overscroll-y-contain">
+                <slot />
+            </div>
+        </Container>
+    </div>
+</div>
+
+<AlertDialog id={`${uniqueId}-alert`} message="" />
+
+<script>
+    // 全局函数，用于处理状态栏时间更新
+    function updateTime() {
+        const now = new Date();
+        const hours = now.getHours().toString().padStart(2, '0');
+        const minutes = now.getMinutes().toString().padStart(2, '0');
+        return `${hours}:${minutes}`;
+    }
+
+    // 更新时间显示
+    function updateStatusBarTime() {
+        const timeElements = document.querySelectorAll('.time-text');
+        timeElements.forEach((element) => {
+            (element as HTMLElement).textContent = updateTime();
+        });
+    }
+
+    // 初始化并设置定时器
+    document.addEventListener('DOMContentLoaded', () => {
+        updateStatusBarTime();
+        setInterval(updateStatusBarTime, 60000); // 每分钟更新一次
+    });
+</script>

package/dist/src-astro/apple-phone/PhoneFrame.astro

@@ -0,0 +1,21 @@
+---
+/**
+ * @component PhoneFrame
+ * @description ApplePhone 组件的内部边框组件，用于显示 iPhone 设备的边框
+ */
+
+import { Image } from "../image";
+import iphoneFrame from "../../src/components/apple-phone/assets/iPhone14ProDeepPurplePortrait.png";
+---
+
+<div
+    style="
+		max-width: 100%;
+		max-height: 100%;
+		position: absolute;
+		top: 0;
+		left: 0;
+		z-index: 100;
+	">
+    <Image src={iphoneFrame} alt="iPhone frame" />
+</div>

package/dist/src-astro/apple-phone/StatusBarContent.astro

@@ -0,0 +1,94 @@
+---
+/**
+ * @component StatusBarContent
+ *
+ * @description
+ * StatusBarContent 组件显示 iPhone 状态栏的内容，包括时间、信号、WiFi 和电池图标。
+ * 组件会自动更新时间显示，并支持根据设备大小进行缩放。
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <StatusBarContent />
+ * ```
+ *
+ * 带缩放比例：
+ * ```astro
+ * <StatusBarContent scaleRatio={1.5} />
+ * ```
+ *
+ * @props
+ * @prop {Number} [scaleRatio=1] - 缩放比例，用于根据设备大小调整文字和图标大小
+ *
+ * @slots
+ */
+
+import "../../style";
+import { IPhoneSignalIcon, IPhoneWifiIcon, IPhoneBatteryIcon } from "../icons";
+
+interface Props {
+	scaleRatio?: number;
+}
+
+const { scaleRatio = 1 } = Astro.props as Props;
+
+// 计算缩放后的字体大小
+const scaledFontSize = `${14 * scaleRatio}px`;
+
+// 计算缩放后的图标尺寸
+const scaledIconSize = `${15 * scaleRatio}px`;
+---
+
+<div class="cosy:flex cosy:items-center cosy:h-full cosy:justify-between">
+    <!-- 左侧时间 -->
+    <span
+        class="cosy:font-medium time-text"
+        style={`font-size: ${scaledFontSize}; line-height: 1; transition: font-size 0.2s ease;`}>
+        12:00
+    </span>
+
+    <!-- 右侧状态图标 -->
+    <div
+        class="cosy:flex cosy:flex-row cosy:items-center cosy:space-x-1 cosy:h-full">
+        <!-- 信号图标 -->
+        <div
+            class="cosy:flex cosy:items-center cosy:justify-center"
+            style={`width: ${scaledIconSize}; height: ${scaledIconSize}; min-width: 0; min-height: 0;`}>
+            <IPhoneSignalIcon class="status-icon" />
+        </div>
+
+        <!-- WiFi图标 -->
+        <div
+            class="cosy:flex cosy:items-center cosy:justify-center"
+            style={`width: ${scaledIconSize}; height: ${scaledIconSize}; min-width: 0; min-height: 0;`}>
+            <IPhoneWifiIcon class="status-icon" />
+        </div>
+
+        <!-- 电池图标 -->
+        <div
+            class="cosy:flex cosy:items-center cosy:justify-center"
+            style={`width: ${scaledIconSize}; height: ${scaledIconSize}; min-width: 0; min-height: 0;`}>
+            <IPhoneBatteryIcon class="battery-icon" />
+        </div>
+    </div>
+</div>
+
+<style>
+    /* 确保图标渲染更平滑 */
+    svg {
+        shape-rendering: geometricPrecision;
+    }
+
+    /* 状态图标通用样式 */
+    .status-icon,
+    .battery-icon {
+        color: #000000;
+        fill: currentColor;
+    }
+
+    .status-icon svg,
+    .battery-icon svg {
+        width: 100%;
+        height: 100%;
+    }
+</style>

package/dist/src-astro/apple-phone/index.ts

@@ -0,0 +1,5 @@
+// 导出主组件
+export { default as ApplePhone } from "./ApplePhone.astro";
+
+// 导出类型
+export type { IApplePhoneProps } from "./props";

package/dist/src-astro/apple-phone/props.ts

@@ -0,0 +1,6 @@
+import type { IApplePhonePropsBase } from "../../src/components/apple-phone/applePhonePropsBase";
+
+/**
+ * ApplePhone 组件的 Astro 版本属性接口（继承基础接口）
+ */
+export interface IApplePhoneProps extends IApplePhonePropsBase {}

package/dist/src-astro/env.d.ts

@@ -8,6 +8,12 @@ declare global {
 			[elemName: string]: any;
 		}
 	}
+
+	namespace JSX {
+		interface IntrinsicElements {
+			[elemName: string]: any;
+		}
+	}
 }
 
 declare module "*.vue?raw" {

package/dist/src-vue/apple-phone/ApplePhone.vue

@@ -1,139 +1,89 @@
 <script setup lang="ts">
-  import '../../style';
-  import { AlertDialog, Container } from '../../index-vue';
-  import { ref } from 'vue';
-  import type { BackgroundColor } from '../../src/common/backgrounds';
-  import iphoneFrame from './assets/iPhone 14 Pro - Deep Purple - Portrait.png';
-  import StatusBarContent from './StatusBarContent.vue';
+import "../../style";
+import { AlertDialog, Container } from "../../index-vue";
+import { ref } from "vue";
+import StatusBarContent from "./StatusBarContent.vue";
+import PhoneFrame from "./PhoneFrame.vue";
 
-  /**
-   * @component ApplePhone
-   * @description ApplePhone 组件模拟 iPhone 设备的外观，包含状态栏、时间显示和设备边框。
-   * 适用于创建移动应用界面原型或展示移动端设计效果。
-   * @props
-   * @prop {'sm'|'md'|'lg'|'xl'|'2xl'|'3xl'|'4xl'|'5xl'} [height='lg'] - 窗口高度选项
-   * - sm: 256px (h-64)
-   * - md: 320px (h-80)
-   * - lg: 384px (h-96) - 默认值
-   * - xl: 480px
-   * - 2xl: 560px
-   * - 3xl: 640px
-   * - 4xl: 720px
-   * - 5xl: 800px
-   * @prop {String} [title=''] - 窗口标题
-   * @prop {Boolean} [withShadow=true] - 是否显示阴影效果
-   * @prop {Boolean} [showFrame=true] - 是否显示 iPhone 边框
-   * @prop {BackgroundColor} [backgroundColor=''] - 内容区域背景色，等同于为其内部的 Container 设置背景色
-   * @slots
-   * @slot default - 主要内容区域
-   * @emits
-   */
+/**
+ * @component ApplePhone
+ * @description ApplePhone 组件模拟 iPhone 设备的外观，包含状态栏、时间显示和设备边框。
+ * 适用于创建移动应用界面原型或展示移动端设计效果。
+ * @props
+ * @prop {'sm'|'md'|'lg'|'xl'|'2xl'|'3xl'|'4xl'|'5xl'} [height='lg'] - 窗口高度选项
+ * - sm: 256px (h-64)
+ * - md: 320px (h-80)
+ * - lg: 384px (h-96) - 默认值
+ * - xl: 480px
+ * - 2xl: 560px
+ * - 3xl: 640px
+ * - 4xl: 720px
+ * - 5xl: 800px
+ * @prop {String} [title=''] - 窗口标题
+ * @prop {Boolean} [withShadow=true] - 是否显示阴影效果
+ * @prop {Boolean} [showFrame=true] - 是否显示 iPhone 边框
+ * @prop {BackgroundColor} [backgroundColor=''] - 内容区域背景色，等同于为其内部的 Container 设置背景色
+ * @slots
+ * @slot default - 主要内容区域
+ * @emits
+ */
 
-  // 类型定义
-  type HeightOption = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
+import type { IApplePhoneProps } from "./props";
 
-  interface Props {
-    height?: HeightOption;
-    title?: string;
-    withShadow?: boolean;
-    showFrame?: boolean;
-    backgroundColor?: BackgroundColor;
-  }
+// 类型定义
+type HeightOption = "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl";
 
-  // Props 定义
-  const props = withDefaults(defineProps<Props>(), {
-    height: 'lg',
-    title: '',
-    withShadow: true,
-    showFrame: true,
-    backgroundColor: undefined,
-  });
+interface Props extends IApplePhoneProps {}
 
-  // iPhone边框图片-宽度
-  const iphoneFrameWidth = 1339;
-  // iPhone边框图片-高度
-  const iphoneFrameHeight = 2716;
-  // iPhone边框图片-状态栏离上边框的距离
-  const iphoneFrameStatusBarTop = 115;
-  // iPhone边框图片-状态栏高度
-  const iphoneFrameStatusBarHeight = 110;
+// Props 定义
+const props = withDefaults(defineProps<Props>(), {
+	height: "lg",
+	title: "",
+	withShadow: true,
+	showFrame: true,
+	backgroundColor: undefined,
+});
 
-  // 比例-总宽度
-  const mainContentWidthAspectRatio = 1179 / iphoneFrameWidth;
-  // 比例-总高度
-  const mainContentHeightAspectRatio = 2556 / iphoneFrameHeight;
-  // 比例-状态栏高度
-  const iphoneFrameStatusBarHeightAspectRatio =
-    iphoneFrameStatusBarHeight / iphoneFrameHeight;
-  // 比例-状态栏离上边框的距离
-  const iphoneFrameStatusBarTopAspectRatio =
-    iphoneFrameStatusBarTop / iphoneFrameHeight;
+import {
+	IPHONE_FRAME_WIDTH,
+	IPHONE_FRAME_HEIGHT,
+	MAIN_CONTENT_WIDTH_ASPECT_RATIO,
+	MAIN_CONTENT_HEIGHT_ASPECT_RATIO,
+	IPHONE_FRAME_STATUS_BAR_HEIGHT_ASPECT_RATIO,
+	IPHONE_FRAME_STATUS_BAR_TOP_ASPECT_RATIO,
+	HEIGHT_CLASSES,
+	HEIGHT_VALUES,
+} from "../../src/components/apple-phone/constants";
 
-  // 预定义的高度选项
-  const heightClasses: Record<HeightOption, string> = {
-    sm: 'cosy:h-64', // 256px
-    md: 'cosy:h-80', // 320px
-    lg: 'cosy:h-96', // 384px
-    xl: 'cosy:h-[480px]', // 480px
-    '2xl': 'cosy:h-[560px]', // 560px
-    '3xl': 'cosy:h-[640px]', // 640px
-    '4xl': 'cosy:h-[720px]', // 720px
-    '5xl': 'cosy:h-[800px]', // 800px
-  };
+// 响应式数据
+const showAlertDialog = ref(false);
+const alertMessage = ref("");
 
-  // 响应式数据
-  const showAlertDialog = ref(false);
-  const alertMessage = ref('');
-
-  // 计算当前高度的缩放比例
-  const getScaleRatio = () => {
-    const heightValues = {
-      sm: 256,
-      md: 320,
-      lg: 384,
-      xl: 480,
-      '2xl': 560,
-      '3xl': 640,
-      '4xl': 720,
-      '5xl': 800,
-    };
-    const currentHeight = heightValues[props.height];
-    // 基于特定高度计算缩放比例
-    return currentHeight / 500;
-  };
-
-  // 计算属性
-  const iphoneFrameSrc = (iphoneFrame as any).src || iphoneFrame;
+// 计算当前高度的缩放比例
+const getScaleRatio = () => {
+	const currentHeight = HEIGHT_VALUES[props.height];
+	// 基于特定高度计算缩放比例
+	return currentHeight / 500;
+};
 </script>
 
 <template>
   <div
-    :class="['cosy:relative not-prose cosy:mx-auto', heightClasses[height]]"
+    :class="['cosy:relative not-prose cosy:mx-auto', HEIGHT_CLASSES[height]]"
     :style="{
-      aspectRatio: `${iphoneFrameWidth}/${iphoneFrameHeight}`,
+      aspectRatio: `${IPHONE_FRAME_WIDTH}/${IPHONE_FRAME_HEIGHT}`,
     }"
     apple-phone>
     <!-- iPhone 边框 -->
-    <img
-      v-if="showFrame"
-      style="
-        max-width: 100%;
-        max-height: 100%;
-        position: absolute;
-        top: 0;
-        left: 0;
-        z-index: 100;
-      "
-      :src="iphoneFrameSrc"
-      alt="iPhone frame" />
+    <PhoneFrame v-if="showFrame" />
 
     <!-- 顶部状态栏 -->
     <div
       :style="{
         position: 'absolute',
-        top: iphoneFrameStatusBarTopAspectRatio * 100 + '%',
-        height: iphoneFrameStatusBarHeightAspectRatio * 100 + '%',
-        width: mainContentWidthAspectRatio * 100 + '%',
+        top: IPHONE_FRAME_STATUS_BAR_TOP_ASPECT_RATIO * 100 + '%',
+        height: IPHONE_FRAME_STATUS_BAR_HEIGHT_ASPECT_RATIO * 100 + '%',
+        width: MAIN_CONTENT_WIDTH_ASPECT_RATIO * 100 + '%',
         left: '50%',
         transform: 'translate(-50%, 0)',
         paddingLeft: '5%',
@@ -145,10 +95,10 @@
 
     <!-- 内容区域 -->
     <div
-      class="cosy:inset-0 cosy:h-full"
+      class="cosy:inset-0 cosy:h-full cosy:flex cosy:flex-col"
       :style="{
-        width: mainContentWidthAspectRatio * 100 + '%',
-        height: mainContentHeightAspectRatio * 100 + '%',
+        width: MAIN_CONTENT_WIDTH_ASPECT_RATIO * 100 + '%',
+        height: MAIN_CONTENT_HEIGHT_ASPECT_RATIO * 100 + '%',
         // 水平居中
         left: '50%',
         // 垂直居中
@@ -159,9 +109,11 @@
       }">
       <Container
         rounded="lg"
-        style="height: 100%"
+        height="full"
         :background="backgroundColor || 'accent/90'">
-        <slot />
+        <div class="cosy:h-full cosy:overflow-y-auto cosy:overscroll-y-contain">
+          <slot />
+        </div>
       </Container>
     </div>
   </div>

package/dist/src-vue/apple-phone/PhoneFrame.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import iphoneFrame from "../../src/components/apple-phone/assets/iPhone14ProDeepPurplePortrait.png";
+
+const iphoneFrameSrc = (iphoneFrame as any).src || iphoneFrame;
+</script>
+
+<template>
+  <div
+    style="
+      max-width: 100%;
+      max-height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 100;
+    ">
+    <img :src="iphoneFrameSrc" alt="iPhone frame" />
+  </div>
+</template>

package/dist/src-vue/apple-phone/props.ts

@@ -0,0 +1,6 @@
+import type { IApplePhonePropsBase } from "../../src/components/apple-phone/applePhonePropsBase";
+
+/**
+ * ApplePhone 组件的 Vue 版本属性接口（继承基础接口）
+ */
+export interface IApplePhoneProps extends IApplePhonePropsBase {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coffic/cosy-ui",
-  "version": "0.9.71",
+  "version": "0.9.72",
   "description": "An astro component library",
   "author": {
     "name": "nookery",
@@ -69,7 +69,8 @@
     "@tailwindcss/vite": "^4.1.11",
     "@tsconfig/node22": "^22.0.2",
     "@types/fs-extra": "^11.0.4",
-    "@types/node": "^22.17.0",
+    "@types/node": "^24.8.1",
+    "astro": "^5.14.5",
     "daisyui": "^5.0.50",
     "globals": "^16.3.0",
     "rollup-plugin-copy": "^3.5.0",