sard 1.0.0 → 1.0.2

package/components/popout-input/usePopoutInput.d.ts

@@ -0,0 +1,25 @@
+import { type FormPopoutProps } from '../popout/useFormPopout';
+import { type PopoutInputProps } from './common';
+import type { MotionEmits, MotionHookName } from '../motion/common';
+export type UsePopoutInputProps = Omit<PopoutInputProps, 'modelValue'> & FormPopoutProps & {
+    modelValue?: any;
+};
+export interface UsePopoutInputEmits extends MotionEmits {
+    (e: 'update:visible', visible: boolean): void;
+    (e: 'update:modelValue', ...args: any[]): void;
+    (e: 'change', ...args: any[]): void;
+}
+export declare function partitionPopoutInputProps<T extends Omit<PopoutInputProps, 'modelValue'> & FormPopoutProps>(props: T): import("vue").ComputedRef<(Pick<T, "readonly" | "loading" | "disabled" | "placeholder" | "clearable" | "multiline" | "inputProps" | "valueOnClear"> | (Omit<T, "readonly" | "loading" | "disabled" | "placeholder" | "clearable" | "multiline" | "inputProps" | "valueOnClear"> & {
+    title: T["placeholder"] | NonNullable<T["title"]> | undefined;
+}))[]>;
+export declare function usePopoutInput<T extends UsePopoutInputProps>(props: T, emit: UsePopoutInputEmits, options?: {
+    onClear?: (value: any) => void;
+}): {
+    innerVisible: import("vue").ModelRef<T["visible"], PropertyKey, T["visible"], T["visible"]>;
+    innerValue: import("vue").Ref<any, any>;
+    inputValue: import("vue").Ref<string, string>;
+    show: () => void;
+    onChange: (...args: any[]) => void;
+    onClear: () => void;
+    onVisibleHook: (name: MotionHookName, el: Element) => void;
+};

package/components/popout-input/usePopoutInput.js

@@ -0,0 +1,63 @@
+import { partition } from "../../utils/object.js";
+import { computed, ref, useModel, watch } from "vue";
+//#region packages/sard/components/popout-input/usePopoutInput.ts
+const popoutInputKeys = [
+	"placeholder",
+	"readonly",
+	"disabled",
+	"clearable",
+	"loading",
+	"multiline",
+	"inputProps",
+	"valueOnClear"
+];
+function partitionPopoutInputProps(props) {
+	return computed(() => {
+		const [picked, rest] = partition(props, popoutInputKeys);
+		return [picked, {
+			...rest,
+			title: rest.title ?? picked.placeholder
+		}];
+	});
+}
+const defaultValueOnClear = () => void 0;
+function usePopoutInput(props, emit, options = {}) {
+	const innerVisible = useModel(props, "visible");
+	const show = () => {
+		innerVisible.value = true;
+	};
+	const onVisibleHook = (name, el) => {
+		emit("visible-hook", name, el);
+		emit(name, el);
+	};
+	const innerValue = ref(props.modelValue);
+	const getValueOnClear = () => (props.valueOnClear || defaultValueOnClear)();
+	watch(() => props.modelValue, () => {
+		innerValue.value = props.modelValue;
+	});
+	const onChange = (...args) => {
+		emit("update:modelValue", ...args);
+		emit("change", ...args);
+	};
+	const onClear = () => {
+		inputValue.value = "";
+		innerValue.value = getValueOnClear();
+		if (options.onClear) options.onClear(innerValue.value);
+		else {
+			emit("update:modelValue", innerValue.value);
+			emit("change", innerValue.value);
+		}
+	};
+	const inputValue = ref("");
+	return {
+		innerVisible,
+		innerValue,
+		inputValue,
+		show,
+		onChange,
+		onClear,
+		onVisibleHook
+	};
+}
+//#endregion
+export { partitionPopoutInputProps, usePopoutInput };

package/components/popover/common.d.ts

@@ -0,0 +1,21 @@
+import type { PopperPosition, PopperTarget } from '../../use';
+import { type DefaultProps } from '../config';
+export interface PopoverProps {
+    visible?: boolean;
+    position?: PopperPosition;
+    theme?: 'dark' | 'light';
+    refGap?: number;
+    viewportGap?: number;
+    reference?: PopperTarget | Element | null;
+    outsideClosable?: boolean;
+}
+export declare const defaultPopoverProps: DefaultProps<PopoverProps>;
+export interface PopoverSlots {
+    default?(props: Record<string, never>): any;
+    reference?(props: Record<string, never>): any;
+}
+export interface PopoverEmits {
+    (e: 'update:visible', visible: boolean): void;
+}
+export interface ReferenceExpose {
+}

package/components/popover/common.js

@@ -0,0 +1,10 @@
+//#region packages/sard/components/popover/common.ts
+const defaultPopoverProps = {
+	position: "bottom",
+	theme: "light",
+	refGap: 10,
+	viewportGap: 10,
+	outsideClosable: true
+};
+//#endregion
+export { defaultPopoverProps };

package/components/popover/index.css

@@ -0,0 +1 @@
+:root{--s-popover-bg:var(--s-bg-color-elevated);--s-popover-box-shadow:var(--s-box-shadow-secondary);--s-popover-min-width:80px;--s-popover-border-radius:var(--s-border-radius);--s-popover-bg-dark:var(--s-gray-800);--s-popover-color-dark:var(--s-white);--s-popover-arrow-size:10px}.s-popover{position:fixed;top:auto;right:auto;bottom:auto;left:auto;overflow:visible;border-radius:var(--s-popover-border-radius);background:var(--s-popover-bg);box-shadow:var(--s-popover-box-shadow);touch-action:none}.s-popover__content{position:relative;z-index:1}.s-popover--vertical .s-popover__content{min-width:var(--s-popover-min-width)}.s-popover__arrow{position:absolute;width:var(--s-popover-arrow-size);height:var(--s-popover-arrow-size);margin-inline-start:calc(var(--s-popover-arrow-size)/2*-1);margin-top:calc(var(--s-popover-arrow-size)/2*-1);transform:rotate(45deg);background-color:inherit}.s-popover--light{background:var(--s-popover-bg)}.s-popover--dark{color:var(--s-popover-color-dark);background:var(--s-popover-bg-dark)}

package/components/popover/index.d.ts

@@ -0,0 +1,7 @@
+import type { PopperPosition } from '../../use';
+import { type EnhancedComponent } from '../../utils';
+import _Popover from './popover.vue';
+export declare const Popover: EnhancedComponent<typeof _Popover>;
+export default Popover;
+export type { PopoverProps, PopoverSlots, PopoverEmits, ReferenceExpose } from './common';
+export type PopoverPosition = PopperPosition;

package/components/popover/index.js

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

package/components/popover/popover.d.ts

@@ -0,0 +1,23 @@
+import { type PopoverProps, type PopoverSlots } from './common';
+type __VLS_Slots = PopoverSlots;
+declare const __VLS_base: import("vue").DefineComponent<PopoverProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:visible": (visible: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<PopoverProps> & Readonly<{
+    "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
+}>, {
+    position: import("../../use").PopperPosition;
+    visible: boolean;
+    refGap: number;
+    viewportGap: number;
+    reference: import("../../use").PopperTarget | Element | null;
+    theme: "dark" | "light";
+    outsideClosable: 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/popover/popover.js

@@ -0,0 +1,118 @@
+import { createBem } from "../../utils/bem.js";
+import { OnlyChild } from "../../utils/vnode.js";
+import { useZIndex } from "../../use/useZIndex.js";
+import { usePopper } from "../../use/usePopper.js";
+import { useClickOutside } from "../../use/useClickOutside.js";
+import motion_default from "../motion/motion.js";
+import { defaultPopoverProps } from "./common.js";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeDefaults, mergeProps, normalizeClass, normalizeStyle, openBlock, renderSlot, shallowRef, unref, useAttrs, useModel, useSlots, useTemplateRef, vShow, watch, withCtx, withDirectives } from "vue";
+//#region packages/sard/components/popover/popover.vue
+var popover_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "popover",
+	props: /*@__PURE__*/ mergeDefaults({
+		visible: {
+			type: Boolean,
+			required: false
+		},
+		position: {
+			type: String,
+			required: false
+		},
+		theme: {
+			type: String,
+			required: false
+		},
+		refGap: {
+			type: Number,
+			required: false
+		},
+		viewportGap: {
+			type: Number,
+			required: false
+		},
+		reference: {
+			type: null,
+			required: false
+		},
+		outsideClosable: {
+			type: Boolean,
+			required: false
+		}
+	}, defaultPopoverProps),
+	emits: ["update:visible"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const attrs = useAttrs();
+		const slots = useSlots();
+		const bem = createBem("popover");
+		const elRef = shallowRef(null);
+		const onUpdate = (el) => {
+			elRef.value = el;
+		};
+		const mergedRef = computed(() => {
+			return props.reference || elRef.value;
+		});
+		const onReferenceClick = () => {
+			innerVisible.value = true;
+		};
+		const innerVisible = useModel(props, "visible");
+		const popperRef = useTemplateRef("popper");
+		useClickOutside(popperRef, () => {
+			innerVisible.value = false;
+		}, computed(() => innerVisible.value && props.outsideClosable));
+		const [popperPos, arrowPos] = usePopper(mergedRef, popperRef, innerVisible, {
+			position: () => props.position,
+			refGap: () => props.refGap,
+			viewportGap: () => props.viewportGap,
+			arrowSize: 15
+		});
+		const popperStyle = computed(() => {
+			return {
+				top: popperPos.top + "px",
+				left: popperPos.left + "px"
+			};
+		});
+		const arrowStyle = computed(() => {
+			return {
+				top: arrowPos.top + "px",
+				insetInlineStart: arrowPos.left + "px"
+			};
+		});
+		const [zIndex, increaseZIndex] = useZIndex();
+		watch(innerVisible, () => {
+			if (innerVisible.value) increaseZIndex();
+		});
+		const popoverClass = computed(() => {
+			return [bem.b(), bem.m(props.theme)];
+		});
+		const popoverStyle = computed(() => {
+			return [{
+				zIndex: zIndex.value,
+				transformOrigin: `${arrowStyle.value.insetInlineStart} ${arrowStyle.value.top}`
+			}, popperStyle.value];
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [slots.reference ? (openBlock(), createBlock(unref(OnlyChild), {
+				key: 0,
+				onUpdate,
+				onClick: onReferenceClick
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "reference")]),
+				_: 3
+			})) : createCommentVNode("v-if", true), (openBlock(), createBlock(Teleport, { to: "body" }, [createVNode(motion_default, { name: "wide-zoom" }, {
+				default: withCtx(() => [withDirectives(createElementVNode("div", mergeProps({
+					ref: "popper",
+					class: popoverClass.value,
+					style: popoverStyle.value
+				}, unref(attrs)), [createElementVNode("div", { class: normalizeClass(unref(bem).e("content")) }, [renderSlot(_ctx.$slots, "default")], 2), createElementVNode("div", {
+					class: normalizeClass(unref(bem).e("arrow")),
+					style: normalizeStyle(arrowStyle.value)
+				}, null, 6)], 16), [[vShow, unref(innerVisible)]])]),
+				_: 3
+			})]))], 64);
+		};
+	}
+});
+//#endregion
+export { popover_default as default };

package/components/popup/common.d.ts

@@ -0,0 +1,48 @@
+import { type InjectionKey, type ClassValue, type StyleValue } from 'vue';
+import { type DefaultProps } from '../config';
+import type { MotionEmits, MotionHookName, MotionName } from '../motion/common';
+export type PopupEffect = 'slide-top' | 'slide-right' | 'slide-bottom' | 'slide-left' | 'zoom' | 'fade' | 'full-fade';
+export interface PopupProps {
+    visible?: boolean;
+    effect?: PopupEffect;
+    overlay?: boolean;
+    overlayClass?: ClassValue;
+    overlayStyle?: StyleValue;
+    background?: string;
+    transparent?: boolean;
+    overlayClosable?: boolean;
+    lockScroll?: boolean;
+    destroyOnClose?: boolean;
+    lazy?: boolean;
+}
+export declare const mapEffectMotion: Record<PopupEffect, MotionName>;
+export declare const defaultPopupProps: DefaultProps<PopupProps>;
+export interface PopupSlots {
+    default?(props: Record<string, never>): any;
+}
+export interface TransitionHookCallbacks {
+    onVisibleHook?: (name: MotionHookName) => void;
+    onBeforeEnter?: () => void;
+    onEnter?: () => void;
+    onAfterEnter?: () => void;
+    onEnterCancelled?: () => void;
+    onBeforeLeave?: () => void;
+    onLeave?: () => void;
+    onAfterLeave?: () => void;
+    onLeaveCancelled?: () => void;
+}
+export interface PopupEmits extends MotionEmits {
+    (e: 'overlay-click', event: any): void;
+    (e: 'update:visible', visible: boolean): void;
+}
+export interface PopupExpose {
+}
+export interface PopupContext {
+    visibleState: MotionHookName | undefined;
+}
+export declare const popupContextKey: InjectionKey<PopupContext>;
+export declare function usePopupVisibleHookProvide(): (name: MotionHookName) => void;
+export declare function usePopupEnter(callback: () => void): {
+    context: PopupContext | null;
+};
+export declare function useInPopup(): boolean;

package/components/popup/common.js

@@ -0,0 +1,39 @@
+import { inject, provide, reactive, ref, watch } from "vue";
+//#region packages/sard/components/popup/common.ts
+const mapEffectMotion = {
+	"slide-top": "slide-top",
+	"slide-right": "slide-right",
+	"slide-bottom": "slide-bottom",
+	"slide-left": "slide-left",
+	zoom: "zoom",
+	fade: "fade",
+	"full-fade": "fade"
+};
+const defaultPopupProps = {
+	effect: "fade",
+	overlay: true,
+	overlayClosable: true,
+	lockScroll: true,
+	lazy: true
+};
+const popupContextKey = Symbol("popupContext");
+function usePopupVisibleHookProvide() {
+	const visibleState = ref();
+	provide(popupContextKey, reactive({ visibleState }));
+	function callVisibleHook(name) {
+		visibleState.value = name;
+	}
+	return callVisibleHook;
+}
+function usePopupEnter(callback) {
+	const context = inject(popupContextKey, null);
+	if (context) watch(() => context.visibleState, () => {
+		if (context.visibleState === "enter") callback?.();
+	});
+	return { context };
+}
+function useInPopup() {
+	return !!inject(popupContextKey, null);
+}
+//#endregion
+export { defaultPopupProps, mapEffectMotion, popupContextKey, useInPopup, usePopupEnter, usePopupVisibleHookProvide };

package/components/popup/index.css

@@ -0,0 +1 @@
+.s-lock-scroll{overflow:hidden}.s-popup{position:fixed}.s-popup--slide-top{top:0;left:0;width:100%}.s-popup--slide-right{top:0;right:0;height:100%}.s-popup--slide-bottom{left:0;bottom:0;width:100%}.s-popup--slide-left{top:0;left:0;height:100%}.s-popup--fade,.s-popup--zoom{top:0;left:0;right:0;bottom:5%;margin:auto;width:fit-content;height:fit-content}.s-popup--full-fade{left:0;top:0;width:100%;height:100%}

package/components/popup/index.d.ts

@@ -0,0 +1,5 @@
+import { type EnhancedComponent } from '../../utils';
+import _Popup from './popup.vue';
+export declare const Popup: EnhancedComponent<typeof _Popup>;
+export default Popup;
+export { type PopupProps, type PopupSlots, type PopupEmits, type PopupExpose, type PopupContext, usePopupVisibleHookProvide, usePopupEnter, useInPopup, } from './common';

package/components/popup/index.js

@@ -0,0 +1,7 @@
+import { enhanceComponent } from "../../utils/component.js";
+import { useInPopup, usePopupEnter, usePopupVisibleHookProvide } from "./common.js";
+import popup_default from "./popup.js";
+//#region packages/sard/components/popup/index.ts
+const Popup = enhanceComponent(popup_default);
+//#endregion
+export { Popup, Popup as default, useInPopup, usePopupEnter, usePopupVisibleHookProvide };

package/components/popup/popup.d.ts

@@ -0,0 +1,48 @@
+import { type PopupProps, type PopupSlots } from './common';
+import type { MotionHookName } from '../motion/common';
+type __VLS_Slots = PopupSlots;
+declare const __VLS_base: import("vue").DefineComponent<PopupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "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: MotionHookName, el: Element) => any;
+    "overlay-click": (event: any) => any;
+    "update:visible": (visible: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<PopupProps> & Readonly<{
+    "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: MotionHookName, el: Element) => any) | undefined;
+    "onOverlay-click"?: ((event: any) => any) | undefined;
+    "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
+}>, {
+    background: string;
+    visible: boolean;
+    effect: import("./common").PopupEffect;
+    overlay: boolean;
+    overlayClass: string | false | Record<string, any> | import("vue").ClassValue[] | null;
+    overlayStyle: string | false | import("vue").CSSProperties | import("vue").StyleValue[] | null;
+    transparent: boolean;
+    overlayClosable: boolean;
+    lockScroll: boolean;
+    destroyOnClose: boolean;
+    lazy: 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/popup/popup.js

@@ -0,0 +1,148 @@
+import { createBem } from "../../utils/bem.js";
+import { useZIndex } from "../../use/useZIndex.js";
+import { defaultPopupProps, mapEffectMotion, usePopupVisibleHookProvide } from "./common.js";
+import { useLockScroll } from "../../use/useLockScroll.js";
+import motion_default from "../motion/motion.js";
+import overlay_default from "../overlay/overlay.js";
+import { Teleport, computed, createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, mergeDefaults, mergeProps, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, unref, vShow, withCtx, withDirectives } from "vue";
+//#region packages/sard/components/popup/popup.vue
+var popup_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "popup",
+	props: /*@__PURE__*/ mergeDefaults({
+		visible: {
+			type: Boolean,
+			required: false
+		},
+		effect: {
+			type: String,
+			required: false
+		},
+		overlay: {
+			type: Boolean,
+			required: false
+		},
+		overlayClass: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			required: false,
+			skipCheck: true
+		},
+		overlayStyle: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			required: false,
+			skipCheck: true
+		},
+		background: {
+			type: String,
+			required: false
+		},
+		transparent: {
+			type: Boolean,
+			required: false
+		},
+		overlayClosable: {
+			type: Boolean,
+			required: false
+		},
+		lockScroll: {
+			type: Boolean,
+			required: false
+		},
+		destroyOnClose: {
+			type: Boolean,
+			required: false
+		},
+		lazy: {
+			type: Boolean,
+			required: false
+		}
+	}, defaultPopupProps),
+	emits: [
+		"overlay-click",
+		"update:visible",
+		"before-enter",
+		"enter",
+		"after-enter",
+		"enter-cancelled",
+		"before-leave",
+		"leave",
+		"after-leave",
+		"leave-cancelled",
+		"visible-hook"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const bem = createBem("popup");
+		const motionName = computed(() => {
+			return mapEffectMotion[props.effect];
+		});
+		const [zIndex, increaseZIndex] = useZIndex();
+		const rendered = ref(props.visible || !props.lazy);
+		const callVisibleHook = usePopupVisibleHookProvide();
+		const onVisibleHook = (name, el) => {
+			if (name === "before-enter") {
+				increaseZIndex();
+				rendered.value = true;
+			} else if (name === "after-leave") {
+				if (props.destroyOnClose) rendered.value = false;
+			}
+			callVisibleHook(name);
+			emit("visible-hook", name, el);
+			emit(name, el);
+		};
+		const onOverlayClick = (event) => {
+			emit("overlay-click", event);
+			if (props.overlayClosable) emit("update:visible", false);
+		};
+		useLockScroll(() => props.visible, props.lockScroll);
+		const popupClass = computed(() => {
+			return [bem.b(), bem.m(props.effect)];
+		});
+		const popupStyle = computed(() => {
+			return { zIndex: zIndex.value };
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(Teleport, { to: "body" }, [__props.overlay ? (openBlock(), createBlock(overlay_default, {
+				key: 0,
+				visible: __props.visible,
+				"z-index": unref(zIndex),
+				background: __props.background,
+				transparent: __props.transparent,
+				style: normalizeStyle(__props.overlayStyle),
+				class: normalizeClass(__props.overlayClass),
+				onClick: onOverlayClick
+			}, null, 8, [
+				"visible",
+				"z-index",
+				"background",
+				"transparent",
+				"style",
+				"class"
+			])) : createCommentVNode("v-if", true), createVNode(motion_default, {
+				name: motionName.value,
+				onVisibleHook
+			}, {
+				default: withCtx(() => [withDirectives(createElementVNode("div", mergeProps(_ctx.$attrs, {
+					class: popupClass.value,
+					style: popupStyle.value
+				}), [rendered.value ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("v-if", true)], 16), [[vShow, __props.visible]])]),
+				_: 3
+			}, 8, ["name"])]);
+		};
+	}
+});
+//#endregion
+export { popup_default as default };

package/components/preview-image/common.d.ts

@@ -0,0 +1,28 @@
+import type { InjectionKey } from 'vue';
+import { type DefaultProps } from '../config';
+import type { MotionEmits } from '../motion';
+export interface PreviewImageProps {
+    visible?: boolean;
+    current?: number;
+    urls?: string[];
+}
+export declare const defaultPreviewImageProps: DefaultProps<PreviewImageProps>;
+export interface PreviewImageSlots {
+    default?(props: Record<string, never>): any;
+}
+export interface PreviewImageEmits extends MotionEmits {
+    (e: 'update:visible', visible: boolean): void;
+    (e: 'update:current', current: number): void;
+}
+export interface PreviewImageExpose {
+}
+export interface PreviewImageItemProps {
+    url: string;
+}
+export interface PreviewImageContext {
+    visibleSwitching: boolean;
+    immersive: boolean;
+    sceneType: 'dragPinch' | 'swipe' | null;
+    close: () => void;
+}
+export declare const previewImageContextKey: InjectionKey<PreviewImageContext>;

package/components/preview-image/common.js

@@ -0,0 +1,8 @@
+//#region packages/sard/components/preview-image/common.ts
+const defaultPreviewImageProps = {
+	current: 0,
+	urls: () => []
+};
+const previewImageContextKey = Symbol("previewImageContext");
+//#endregion
+export { defaultPreviewImageProps, previewImageContextKey };

package/components/preview-image/imperative.d.ts

@@ -0,0 +1,10 @@
+import { type PreviewImageProps } from './common';
+export type PreviewImageOptions = Omit<PreviewImageProps, 'urls'> & Required<Pick<PreviewImageProps, 'urls'>>;
+export interface PreviewImageShowFunction {
+    (options?: PreviewImageOptions): void;
+}
+export type PreviewImageFunction = PreviewImageShowFunction & {
+    hide: () => void;
+};
+export declare function createPreviewImage(defaultOptions?: PreviewImageOptions): PreviewImageFunction;
+export declare const previewImage: PreviewImageFunction;

package/components/preview-image/imperative.js

@@ -0,0 +1,20 @@
+import { createImperativeComponent } from "../../utils/createImperativeComponent.js";
+import preview_image_default from "./preview-image.js";
+//#region packages/sard/components/preview-image/imperative.ts
+function createPreviewImage(defaultOptions) {
+	const imperative = createImperativeComponent(preview_image_default, defaultOptions);
+	const show = (options) => {
+		imperative.show(options);
+	};
+	const hide = () => {
+		imperative.hide();
+	};
+	const previewImage = (options) => {
+		show(options);
+	};
+	previewImage.hide = hide;
+	return previewImage;
+}
+const previewImage = createPreviewImage();
+//#endregion
+export { createPreviewImage, previewImage };

package/components/preview-image/index.css

@@ -0,0 +1 @@
+.s-preview-image{position:relative;width:100%;height:100%;touch-action:none}.s-preview-image__overlay:is(.is-preview-image){background:var(--s-overlay-illegible)}.s-preview-image__overlay:is(.is-preview-image):is(.is-immersive){background:var(--s-black)}.s-preview-image__swiper:is(.is-preview-image){width:100%;height:100%}.s-preview-image__item{position:relative;display:flex;width:100%;height:100%;-webkit-user-select:none;user-select:none}.s-preview-image__puppet{position:absolute;top:0;left:0;transform-origin:top left;transition:transform var(--s-duration-fast);pointer-events:none;background-size:contain}.s-preview-image__toolbar{position:absolute;top:calc(var(--s-status-bar-height) + 16px);display:flex;justify-content:center;align-items:center;width:100%;pointer-events:none}.s-preview-image__indicator{font-size:var(--s-font-size);color:var(--s-white);text-shadow:1px 1px var(--s-black);transition:opacity var(--s-duration-fast)}.s-preview-image:is(.is-immersive) .s-preview-image__indicator{opacity:0}