sard 1.0.0 → 1.0.2

package/components/color-picker-input/index.d.ts

@@ -0,0 +1,5 @@
+import { type EnhancedComponent } from '../../utils';
+import _ColorPickerInput from './color-picker-input.vue';
+export declare const ColorPickerInput: EnhancedComponent<typeof _ColorPickerInput>;
+export default ColorPickerInput;
+export type { ColorPickerInputProps, ColorPickerInputSlots, ColorPickerInputEmits, ColorPickerInputExpose, } from './common';

package/components/color-picker-input/index.js

@@ -0,0 +1,6 @@
+import { enhanceComponent } from "../../utils/component.js";
+import color_picker_input_default from "./color-picker-input.js";
+//#region packages/sard/components/color-picker-input/index.ts
+const ColorPickerInput = enhanceComponent(color_picker_input_default);
+//#endregion
+export { ColorPickerInput, ColorPickerInput as default };

package/components/color-picker-popout/color-picker-popout.d.ts

@@ -0,0 +1,53 @@
+import { type ColorPickerPopoutProps, type ColorPickerPopoutSlots, type ColorPickerPopoutExpose } from './common';
+type __VLS_Slots = ColorPickerPopoutSlots;
+declare const __VLS_base: import("vue").DefineComponent<ColorPickerPopoutProps, ColorPickerPopoutExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    change: (value: string) => any;
+    "before-enter": (el: Element) => any;
+    enter: (el: Element) => any;
+    "after-enter": (el: Element) => any;
+    "enter-cancelled": (el: Element) => any;
+    "before-leave": (el: Element) => any;
+    leave: (el: Element) => any;
+    "after-leave": (el: Element) => any;
+    "leave-cancelled": (el: Element) => any;
+    "visible-hook": (name: import("../index.ts").MotionHookName, el: Element) => any;
+    "update:visible": (visible: boolean) => any;
+    "update:modelValue": (value: string) => any;
+    confirm: () => any;
+}, string, import("vue").PublicProps, Readonly<ColorPickerPopoutProps> & Readonly<{
+    onChange?: ((value: string) => any) | undefined;
+    "onBefore-enter"?: ((el: Element) => any) | undefined;
+    onEnter?: ((el: Element) => any) | undefined;
+    "onAfter-enter"?: ((el: Element) => any) | undefined;
+    "onEnter-cancelled"?: ((el: Element) => any) | undefined;
+    "onBefore-leave"?: ((el: Element) => any) | undefined;
+    onLeave?: ((el: Element) => any) | undefined;
+    "onAfter-leave"?: ((el: Element) => any) | undefined;
+    "onLeave-cancelled"?: ((el: Element) => any) | undefined;
+    "onVisible-hook"?: ((name: import("../index.ts").MotionHookName, el: Element) => any) | undefined;
+    "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onConfirm?: (() => any) | undefined;
+}>, {
+    title: string;
+    format: import("../index.ts").ColorFormat;
+    readonly: boolean;
+    visible: boolean;
+    disabled: boolean;
+    modelValue: string;
+    showConfirm: boolean;
+    validateEvent: boolean;
+    resettable: boolean;
+    showAlpha: boolean;
+    showFormat: boolean;
+    presets: string[];
+    showPresets: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/color-picker-popout/color-picker-popout.js

@@ -0,0 +1,116 @@
+import { createBem } from "../../utils/bem.js";
+import { isEmptyBinding } from "../../utils/utils.js";
+import { defaultColorPickerValue } from "../../utils/color.js";
+import popout_default from "../popout/popout.js";
+import { omitFormPopoutProps, useFormPopout } from "../popout/useFormPopout.js";
+import color_picker_default from "../color-picker/color-picker.js";
+import { defaultColorPickerPopoutProps } from "./common.js";
+import { createBlock, createElementVNode, createVNode, defineComponent, isRef, mergeDefaults, mergeProps, normalizeClass, openBlock, unref, withCtx } from "vue";
+//#region packages/sard/components/color-picker-popout/color-picker-popout.vue
+var color_picker_popout_default = /*@__PURE__*/ defineComponent({
+	__name: "color-picker-popout",
+	props: /*@__PURE__*/ mergeDefaults({
+		visible: {
+			type: Boolean,
+			required: false
+		},
+		title: {
+			type: String,
+			required: false
+		},
+		resettable: {
+			type: Boolean,
+			required: false
+		},
+		validateEvent: {
+			type: Boolean,
+			required: false
+		},
+		showConfirm: {
+			type: Boolean,
+			required: false
+		},
+		modelValue: {
+			type: String,
+			required: false
+		},
+		showAlpha: {
+			type: Boolean,
+			required: false
+		},
+		format: {
+			type: String,
+			required: false
+		},
+		showFormat: {
+			type: Boolean,
+			required: false
+		},
+		presets: {
+			type: Array,
+			required: false
+		},
+		showPresets: {
+			type: Boolean,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		readonly: {
+			type: Boolean,
+			required: false
+		}
+	}, defaultColorPickerPopoutProps),
+	emits: [
+		"update:visible",
+		"update:modelValue",
+		"change",
+		"confirm",
+		"before-enter",
+		"enter",
+		"after-enter",
+		"enter-cancelled",
+		"before-leave",
+		"leave",
+		"after-leave",
+		"leave-cancelled",
+		"visible-hook"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const bem = createBem("color-picker-popout");
+		const omittedProps = omitFormPopoutProps(props);
+		const { innerVisible, draftValue, onChange, onConfirm, onVisibleHook } = useFormPopout(props, emit, { onConfirmBefore() {
+			if (isEmptyBinding(draftValue.value)) draftValue.value = defaultColorPickerValue;
+		} });
+		__expose({});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(popout_default, {
+				visible: unref(innerVisible),
+				"onUpdate:visible": _cache[0] || (_cache[0] = ($event) => isRef(innerVisible) ? innerVisible.value = $event : null),
+				title: __props.title,
+				"show-confirm": __props.showConfirm,
+				onConfirm: unref(onConfirm),
+				onVisibleHook: unref(onVisibleHook)
+			}, {
+				default: withCtx(() => [createElementVNode("div", { class: normalizeClass(unref(bem).e("content")) }, [createVNode(color_picker_default, mergeProps(unref(omittedProps), {
+					"validate-event": false,
+					"model-value": unref(draftValue),
+					onChange: unref(onChange)
+				}), null, 16, ["model-value", "onChange"])], 2)]),
+				_: 1
+			}, 8, [
+				"visible",
+				"title",
+				"show-confirm",
+				"onConfirm",
+				"onVisibleHook"
+			]);
+		};
+	}
+});
+//#endregion
+export { color_picker_popout_default as default };

package/components/color-picker-popout/common.d.ts

@@ -0,0 +1,19 @@
+import { type DefaultProps } from '../config';
+import { type FormPopoutProps } from '../popout/useFormPopout';
+import { type ColorPickerProps } from '../color-picker/common';
+import type { MotionEmits } from '../motion';
+export interface ColorPickerPopoutProps extends FormPopoutProps, ColorPickerProps {
+}
+export declare const defaultColorPickerPopoutProps: DefaultProps<ColorPickerPopoutProps>;
+export interface ColorPickerPopoutSlots {
+    title?(props: Record<string, never>): any;
+    'title-prepend'?(props: Record<string, never>): any;
+}
+export interface ColorPickerPopoutEmits extends MotionEmits {
+    (e: 'update:visible', visible: boolean): void;
+    (e: 'update:modelValue', value: string): void;
+    (e: 'change', value: string): void;
+    (e: 'confirm'): void;
+}
+export interface ColorPickerPopoutExpose {
+}

package/components/color-picker-popout/common.js

@@ -0,0 +1,9 @@
+import { defaultColorPickerProps } from "../color-picker/common.js";
+//#region packages/sard/components/color-picker-popout/common.ts
+const defaultColorPickerPopoutProps = {
+	...defaultColorPickerProps,
+	showConfirm: true,
+	validateEvent: true
+};
+//#endregion
+export { defaultColorPickerPopoutProps };

package/components/color-picker-popout/index.css

@@ -0,0 +1 @@
+:root{--s-color-picker-popout-padding:0 var(--s-content-padding-x) var(--s-content-padding-y)}.s-color-picker-popout__content{padding:var(--s-color-picker-popout-padding)}

package/components/color-picker-popout/index.d.ts

@@ -0,0 +1,5 @@
+import { type EnhancedComponent } from '../../utils';
+import _ColorPickerPopout from './color-picker-popout.vue';
+export declare const ColorPickerPopout: EnhancedComponent<typeof _ColorPickerPopout>;
+export default ColorPickerPopout;
+export type { ColorPickerPopoutProps, ColorPickerPopoutSlots, ColorPickerPopoutEmits, ColorPickerPopoutExpose, } from './common';

package/components/color-picker-popout/index.js

@@ -0,0 +1,6 @@
+import { enhanceComponent } from "../../utils/component.js";
+import color_picker_popout_default from "./color-picker-popout.js";
+//#region packages/sard/components/color-picker-popout/index.ts
+const ColorPickerPopout = enhanceComponent(color_picker_popout_default);
+//#endregion
+export { ColorPickerPopout, ColorPickerPopout as default };

package/components/compact/common.d.ts

@@ -0,0 +1,22 @@
+import type { InjectionKey } from 'vue';
+import { type DefaultProps } from '../config';
+export interface CompactProps {
+    block?: boolean;
+    direction?: 'horizontal' | 'vertical';
+}
+export declare const defaultCompactProps: DefaultProps<CompactProps>;
+export interface CompactSlots {
+    default?(props: Record<string, never>): any;
+}
+export interface CompactEmits {
+}
+export interface CompactExpose {
+}
+export interface CompactContext {
+    items: any[];
+    block: boolean;
+    direction: 'horizontal' | 'vertical';
+    addItem: (item: any) => void;
+    removeItem: (item: any) => void;
+}
+export declare const compactContextKey: InjectionKey<CompactContext>;

package/components/compact/common.js

@@ -0,0 +1,5 @@
+//#region packages/sard/components/compact/common.ts
+const defaultCompactProps = { direction: "horizontal" };
+const compactContextKey = Symbol("compactContext");
+//#endregion
+export { compactContextKey, defaultCompactProps };

package/components/compact/compact.d.ts

@@ -0,0 +1,14 @@
+import { type CompactProps, type CompactSlots, type CompactExpose } from './common';
+type __VLS_Slots = CompactSlots;
+declare const __VLS_base: import("vue").DefineComponent<CompactProps, CompactExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CompactProps> & Readonly<{}>, {
+    direction: "horizontal" | "vertical";
+    block: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/compact/compact.js

@@ -0,0 +1,49 @@
+import { createBem } from "../../utils/bem.js";
+import { compactContextKey, defaultCompactProps } from "./common.js";
+import { computed, createElementBlock, defineComponent, mergeDefaults, normalizeClass, openBlock, provide, reactive, renderSlot, shallowRef, toRef } from "vue";
+//#region packages/sard/components/compact/compact.vue
+var compact_default = /*@__PURE__*/ defineComponent({
+	__name: "compact",
+	props: /*@__PURE__*/ mergeDefaults({
+		block: {
+			type: Boolean,
+			required: false
+		},
+		direction: {
+			type: String,
+			required: false
+		}
+	}, defaultCompactProps),
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const bem = createBem("compact");
+		const items = shallowRef([]);
+		const addItem = (item) => {
+			items.value = [...items.value, item];
+		};
+		const removeItem = (item) => {
+			const index = items.value.indexOf(item);
+			if (index !== -1) items.value = [...items.value.slice(0, index), ...items.value.slice(index + 1)];
+		};
+		provide(compactContextKey, reactive({
+			block: toRef(() => props.block),
+			direction: toRef(() => props.direction),
+			items,
+			addItem,
+			removeItem
+		}));
+		__expose({});
+		const compactClass = computed(() => {
+			return [
+				bem.b(),
+				bem.m("block", props.block),
+				bem.m(props.direction)
+			];
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(compactClass.value) }, [renderSlot(_ctx.$slots, "default")], 2);
+		};
+	}
+});
+//#endregion
+export { compact_default as default };

package/components/compact/index.css

@@ -0,0 +1 @@
+.s-compact{display:inline-flex;flex-wrap:nowrap}.s-compact--vertical{flex-direction:column}.s-compact--block{display:flex}

package/components/compact/index.d.ts

@@ -0,0 +1,5 @@
+import { type EnhancedComponent } from '../../utils';
+import _Compact from './compact.vue';
+export declare const Compact: EnhancedComponent<typeof _Compact>;
+export default Compact;
+export type { CompactProps, CompactSlots, CompactEmits, CompactExpose } from './common';

package/components/compact/index.js

@@ -0,0 +1,6 @@
+import { enhanceComponent } from "../../utils/component.js";
+import compact_default from "./compact.js";
+//#region packages/sard/components/compact/index.ts
+const Compact = enhanceComponent(compact_default);
+//#endregion
+export { Compact, Compact as default };

package/components/config/index.d.ts

@@ -0,0 +1,10 @@
+export * from './windowInfo';
+type NativeType = null | number | string | boolean | symbol | ((...args: any[]) => any);
+type InferDefault<P, T> = ((props: P) => T & {}) | (T extends NativeType ? T : never);
+type InferDefaults<T> = {
+    [K in keyof T]?: InferDefault<T, T[K]>;
+};
+type LooseRequired<T> = {
+    [P in keyof (T & Required<T>)]: T[P];
+};
+export type DefaultProps<T> = InferDefaults<LooseRequired<T>>;

package/components/config/index.js

@@ -0,0 +1,2 @@
+import { safeAreaInsets, windowInfo } from "./windowInfo.js";
+export { safeAreaInsets, windowInfo };

package/components/config/windowInfo.d.ts

@@ -0,0 +1,16 @@
+export declare const windowInfo: {
+    pixelRatio: number;
+    screenWidth: number;
+    screenHeight: number;
+    windowWidth: number;
+    windowHeight: number;
+    statusBarHeight: number;
+    navBarHeight: number;
+    tabBarHeight: number;
+};
+export declare const safeAreaInsets: {
+    top: number;
+    left: number;
+    right: number;
+    bottom: number;
+};

package/components/config/windowInfo.js

@@ -0,0 +1,20 @@
+import { computed, reactive } from "vue";
+//#region packages/sard/components/config/windowInfo.ts
+const windowInfo = reactive({
+	pixelRatio: window.devicePixelRatio,
+	screenWidth: window.screen.width,
+	screenHeight: window.screen.height,
+	windowWidth: window.innerWidth,
+	windowHeight: window.innerHeight,
+	statusBarHeight: 0,
+	navBarHeight: 0,
+	tabBarHeight: 0
+});
+const safeAreaInsets = reactive({
+	top: computed(() => windowInfo.statusBarHeight + windowInfo.navBarHeight),
+	left: 0,
+	right: 0,
+	bottom: computed(() => windowInfo.tabBarHeight)
+});
+//#endregion
+export { safeAreaInsets, windowInfo };

package/components/cool-icon/common.d.ts

@@ -0,0 +1,17 @@
+import { type DefaultProps } from '../config';
+export interface CoolIconProps {
+    shape?: 'circle' | 'square' | 'oval' | 'triangle' | 'flower';
+    size?: string;
+    iconSize?: string;
+    color?: string;
+    background?: string;
+}
+export declare const defaultCoolIconProps: DefaultProps<CoolIconProps>;
+export interface CoolIconSlots {
+    default?(props: Record<string, never>): any;
+}
+export interface CoolIconEmits {
+    (e: 'click', event: MouseEvent): void;
+}
+export interface CoolIconExpose {
+}

package/components/cool-icon/common.js

@@ -0,0 +1,4 @@
+//#region packages/sard/components/cool-icon/common.ts
+const defaultCoolIconProps = { shape: "oval" };
+//#endregion
+export { defaultCoolIconProps };

package/components/cool-icon/cool-icon.d.ts

@@ -0,0 +1,21 @@
+import { type CoolIconProps, type CoolIconSlots, type CoolIconExpose } from './common';
+type __VLS_Slots = CoolIconSlots;
+declare const __VLS_base: import("vue").DefineComponent<CoolIconProps, CoolIconExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: (event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<CoolIconProps> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+}>, {
+    background: string;
+    size: string;
+    color: string;
+    shape: "circle" | "square" | "oval" | "triangle" | "flower";
+    iconSize: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/cool-icon/cool-icon.js

@@ -0,0 +1,70 @@
+import { createBem } from "../../utils/bem.js";
+import { defaultCoolIconProps } from "./common.js";
+import { Fragment, computed, createElementBlock, createElementVNode, defineComponent, mergeDefaults, normalizeClass, normalizeStyle, openBlock, renderList, renderSlot, unref } from "vue";
+//#region packages/sard/components/cool-icon/cool-icon.vue
+var cool_icon_default = /*@__PURE__*/ defineComponent({
+	__name: "cool-icon",
+	props: /*@__PURE__*/ mergeDefaults({
+		shape: {
+			type: String,
+			required: false
+		},
+		size: {
+			type: String,
+			required: false
+		},
+		iconSize: {
+			type: String,
+			required: false
+		},
+		color: {
+			type: String,
+			required: false
+		},
+		background: {
+			type: String,
+			required: false
+		}
+	}, defaultCoolIconProps),
+	emits: ["click"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const bem = createBem("cool-icon");
+		const onClick = (event) => {
+			emit("click", event);
+		};
+		__expose({});
+		const coolIconClass = computed(() => {
+			return [bem.b(), bem.m(props.shape)];
+		});
+		const coolIconStyle = computed(() => {
+			return {
+				width: props.size,
+				height: props.size,
+				fontSize: props.iconSize,
+				color: props.color
+			};
+		});
+		const bgStyle = computed(() => {
+			return { background: props.background };
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(coolIconClass.value),
+				style: normalizeStyle(coolIconStyle.value),
+				onClick
+			}, [createElementVNode("div", {
+				class: normalizeClass(unref(bem).e("bg")),
+				style: normalizeStyle(bgStyle.value)
+			}, [createElementVNode("div", { class: normalizeClass(unref(bem).e("adorns")) }, [(openBlock(), createElementBlock(Fragment, null, renderList(6, (i) => {
+				return createElementVNode("div", {
+					key: i,
+					class: normalizeClass(unref(bem).e("adorn"))
+				}, null, 2);
+			}), 64))], 2)], 6), createElementVNode("div", { class: normalizeClass(unref(bem).e("icon")) }, [renderSlot(_ctx.$slots, "default")], 2)], 6);
+		};
+	}
+});
+//#endregion
+export { cool_icon_default as default };

package/components/cool-icon/index.css

@@ -0,0 +1 @@
+:root{--s-cool-icon-size:50px;--s-cool-icon-icon-size:30px;--s-cool-icon-oval-radius:43% 57%/57% 43%;--s-cool-icon-square-radius:25%;--s-cool-icon-triangle-radius:68% 32% 40% 60%/44% 34% 66% 56%;--s-cool-icon-shadow-opacity:.4;--s-cool-icon-adorn-bg:hsla(0,0%,100%,.2)}.s-cool-icon{position:relative;display:inline-block;width:var(--s-cool-icon-size);height:var(--s-cool-icon-size);font-size:var(--s-cool-icon-icon-size)}.s-cool-icon--square{border-radius:var(--s-cool-icon-square-radius)}.s-cool-icon--oval{border-radius:var(--s-cool-icon-oval-radius)}.s-cool-icon--oval .s-cool-icon__bg{transform:rotate(-19deg)}.s-cool-icon--triangle{border-radius:var(--s-cool-icon-triangle-radius)}.s-cool-icon--circle{border-radius:50%}.s-cool-icon--square .s-cool-icon__bg::before,.s-cool-icon--oval .s-cool-icon__bg::before,.s-cool-icon--triangle .s-cool-icon__bg::before,.s-cool-icon--circle .s-cool-icon__bg::before{content:"";display:block;background:inherit;filter:blur(5px);position:absolute;width:100%;height:100%;top:5px;inset-inline-start:5px;z-index:-1;opacity:var(--s-cool-icon-shadow-opacity);transform-origin:0 0;border-radius:inherit;transform:scale(1)}.s-cool-icon--flower{border-radius:var(--s-cool-icon-oval-radius)}.s-cool-icon--flower .s-cool-icon__bg{width:62.5%;margin:auto;border-radius:var(--s-border-radius-full)}.s-cool-icon--flower .s-cool-icon__bg::before,.s-cool-icon--flower .s-cool-icon__bg::after{content:"";position:absolute;left:0;right:0;top:0;bottom:0;width:100%;height:100%;background:inherit;border-radius:inherit;transform-origin:center center;opacity:.8}.s-cool-icon--flower .s-cool-icon__bg::before{transform:rotate(60deg)}.s-cool-icon--flower .s-cool-icon__bg::after{transform:rotate(-60deg)}.s-cool-icon--flower .s-cool-icon__bg .s-cool-icon__adorns{display:none}.s-cool-icon__bg{position:absolute;left:0;right:0;top:0;bottom:0;width:100%;height:100%;border-radius:inherit;z-index:1}.s-cool-icon__icon{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:inherit;line-height:1;z-index:2;border-radius:inherit}.s-cool-icon__adorns{position:absolute;left:0;right:0;top:0;z-index:1;bottom:0;width:100%;height:100%;border-radius:inherit;overflow:hidden}.s-cool-icon__adorn{position:absolute;border-radius:50%;background:var(--s-cool-icon-adorn-bg)}.s-cool-icon__adorn:nth-child(1){top:-13.33%;inset-inline-start:-9.46%;width:45.33%;height:45.33%}.s-cool-icon__adorn:nth-child(2){top:8.66%;inset-inline-start:66.66%;width:10%;height:10%}.s-cool-icon__adorn:nth-child(3){top:79.33%;inset-inline-start:18%;width:6.66%;height:6.66%}.s-cool-icon__adorn:nth-child(4){top:86%;inset-inline-start:26.66%;width:4%;height:4%}.s-cool-icon__adorn:nth-child(5){top:72%;inset-inline-start:44.66%;width:47.33%;height:38.66%}.s-cool-icon__adorn:nth-child(6){top:42%;inset-inline-start:58.66%;width:72.66%;height:66.66%}

package/components/cool-icon/index.d.ts

@@ -0,0 +1,5 @@
+import { type EnhancedComponent } from '../../utils';
+import _CoolIcon from './cool-icon.vue';
+export declare const CoolIcon: EnhancedComponent<typeof _CoolIcon>;
+export default CoolIcon;
+export type { CoolIconProps, CoolIconSlots, CoolIconEmits, CoolIconExpose } from './common';

package/components/cool-icon/index.js

@@ -0,0 +1,6 @@
+import { enhanceComponent } from "../../utils/component.js";
+import cool_icon_default from "./cool-icon.js";
+//#region packages/sard/components/cool-icon/index.ts
+const CoolIcon = enhanceComponent(cool_icon_default);
+//#endregion
+export { CoolIcon, CoolIcon as default };

package/components/count-down/common.d.ts

@@ -0,0 +1,23 @@
+import { type DefaultProps } from '../config';
+import type { CountDownCurrentTime } from './useCountDown';
+export interface CountDownProps {
+    time?: number;
+    autoStart?: boolean;
+    format?: string;
+    millisecond?: boolean;
+}
+export declare const defaultCountDownProps: DefaultProps<CountDownProps>;
+export interface CountDownSlots {
+    default?(props: {
+        time: CountDownCurrentTime;
+    }): any;
+}
+export interface CountDownEmits {
+    (e: 'change', time: CountDownCurrentTime): void;
+    (e: 'finish'): void;
+}
+export interface CountDownExpose {
+    start: () => void;
+    pause: () => void;
+    reset: () => void;
+}

package/components/count-down/common.js

@@ -0,0 +1,8 @@
+//#region packages/sard/components/count-down/common.ts
+const defaultCountDownProps = {
+	time: 0,
+	autoStart: true,
+	format: "HH:mm:ss"
+};
+//#endregion
+export { defaultCountDownProps };

package/components/count-down/count-down.d.ts

@@ -0,0 +1,22 @@
+import { type CountDownProps, type CountDownSlots, type CountDownExpose } from './common';
+type __VLS_Slots = CountDownSlots;
+declare const __VLS_base: import("vue").DefineComponent<CountDownProps, CountDownExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    change: (time: import("./useCountDown").CountDownCurrentTime) => any;
+    finish: () => any;
+}, string, import("vue").PublicProps, Readonly<CountDownProps> & Readonly<{
+    onChange?: ((time: import("./useCountDown").CountDownCurrentTime) => any) | undefined;
+    onFinish?: (() => any) | undefined;
+}>, {
+    time: number;
+    format: string;
+    autoStart: boolean;
+    millisecond: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/count-down/count-down.js

@@ -0,0 +1,51 @@
+import { defaultCountDownProps } from "./common.js";
+import { formatTime, useCountDown } from "./useCountDown.js";
+import { createElementBlock, createTextVNode, defineComponent, mergeDefaults, openBlock, renderSlot, toDisplayString, toRef, unref, watch } from "vue";
+//#region packages/sard/components/count-down/count-down.vue
+var count_down_default = /*@__PURE__*/ defineComponent({
+	__name: "count-down",
+	props: /*@__PURE__*/ mergeDefaults({
+		time: {
+			type: Number,
+			required: false
+		},
+		autoStart: {
+			type: Boolean,
+			required: false
+		},
+		format: {
+			type: String,
+			required: false
+		},
+		millisecond: {
+			type: Boolean,
+			required: false
+		}
+	}, defaultCountDownProps),
+	emits: ["change", "finish"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { currentTime, start, pause, reset } = useCountDown({
+			time: toRef(() => props.time),
+			millisecond: toRef(() => props.millisecond),
+			autoStart: props.autoStart,
+			onFinish: () => {
+				emit("finish");
+			}
+		});
+		watch(currentTime, () => {
+			emit("change", currentTime.value);
+		});
+		__expose({
+			start,
+			pause,
+			reset
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", null, [renderSlot(_ctx.$slots, "default", { time: unref(currentTime) }, () => [createTextVNode(toDisplayString(unref(formatTime)(__props.format, unref(currentTime))), 1)])]);
+		};
+	}
+});
+//#endregion
+export { count_down_default as default };