@sdata/web-vue 1.11.0 → 1.12.0

package/es/copy/index.js

@@ -0,0 +1,10 @@
+import { getComponentPrefix, setGlobalConfig } from "../_utils/global-config.js";
+import copy_default from "./copy.js";
+//#region components/copy/index.ts
+var Copy = Object.assign(copy_default, { install: (app, options) => {
+	setGlobalConfig(app, options);
+	const componentPrefix = getComponentPrefix(options);
+	app.component(componentPrefix + copy_default.name, copy_default);
+} });
+//#endregion
+export { Copy as default };

package/es/copy/style/css.js

@@ -0,0 +1,2 @@
+import "../../style/index.css";
+import "./index.css";

package/es/copy/style/index.css

@@ -0,0 +1,25 @@
+/******** borderSize *******/
+/******** borderStyle *******/
+/******** radius *******/
+/******** shadow distance *******/
+/******** size *******/
+/******** spacing *******/
+/******** shadow *******/
+/******** opacity *******/
+/******** fontSize *******/
+/******** fontWeight ********/
+/******** Primary *******/
+/******** success *******/
+/******** warning *******/
+/******** danger *******/
+/******** link *******/
+/******** radius *******/
+/********* icon hover *********/
+.sd-copy {
+  border-radius: 2px;
+}
+.sd-copy.sd-copy-inherit {
+  color: inherit;
+  font: inherit;
+  line-height: inherit;
+}

package/es/copy/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style/index.scss';
+import './index.scss';

package/es/copy/style/index.js

@@ -0,0 +1,2 @@
+import "../../style/index.scss";
+import "./index.scss";

package/es/copy/style/index.scss

@@ -0,0 +1,15 @@
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+@use '@components/copy/style/token.scss' as *;
+
+$copy-prefix-cls: string.unquote('#{theme.$prefix}-copy');
+
+.#{$copy-prefix-cls} {
+  border-radius: $copy-border-radius;
+
+  &#{&}-inherit {
+    color: inherit;
+    font: inherit;
+    line-height: inherit;
+  }
+}

package/es/copy/style/token.scss

@@ -0,0 +1,3 @@
+@use '@style/theme/index.scss' as global;
+
+$copy-border-radius: global.$border-radius-small;

package/es/copy/types.d.ts

@@ -0,0 +1,21 @@
+import type { Options as ClipboardOptions } from 'copy-to-clipboard';
+import type { ButtonProps } from '../button';
+import type { LinkProps } from '../link';
+import type { TooltipInstance } from '../tooltip';
+export type CopyComponentType = 'link' | 'button';
+type CopyBaseProps = {
+    content?: string;
+    tooltip?: string;
+    tooltipProps?: TooltipInstance['$props'];
+    clipboardProps?: ClipboardOptions;
+    textInherit?: boolean;
+    successMessage?: string;
+};
+export type CopyLinkProps = CopyBaseProps & LinkProps & {
+    component?: 'link';
+};
+export type CopyButtonProps = CopyBaseProps & ButtonProps & {
+    component: 'button';
+};
+export type CopyProps = CopyLinkProps | CopyButtonProps;
+export {};

package/es/cropper/cropper.js

@@ -0,0 +1,5 @@
+import cropper_vue_vue_type_script_setup_true_lang_default from "./cropper.vue_vue_type_script_setup_true_lang.js";
+//#region components/cropper/cropper.vue
+var cropper_default = cropper_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { cropper_default as default };

package/es/cropper/cropper.vue.d.ts

@@ -0,0 +1,45 @@
+import type { CropperCanvasProps, CropperExpose, CropperImageProps, CropperProps, CropperSelectionChangeDetail, CropperSelectionProps } from './interface';
+declare const __VLS_export: import("vue").DefineComponent<CropperProps, CropperExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "selection:change": (detail: CropperSelectionChangeDetail) => any;
+    "update:selectionX": (value: number) => any;
+    "update:selectionY": (value: number) => any;
+    "update:selectionWidth": (value: number) => any;
+    "update:selectionHeight": (value: number) => any;
+    "canvas:action": (detail: unknown) => any;
+    "canvas:actionstart": (detail: unknown) => any;
+    "canvas:actionmove": (detail: unknown) => any;
+    "canvas:actionend": (detail: unknown) => any;
+    "image:transform": (detail: {
+        matrix: number[];
+        oldMatrix: number[];
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<CropperProps> & Readonly<{
+    "onSelection:change"?: ((detail: CropperSelectionChangeDetail) => any) | undefined;
+    "onUpdate:selectionX"?: ((value: number) => any) | undefined;
+    "onUpdate:selectionY"?: ((value: number) => any) | undefined;
+    "onUpdate:selectionWidth"?: ((value: number) => any) | undefined;
+    "onUpdate:selectionHeight"?: ((value: number) => any) | undefined;
+    "onCanvas:action"?: ((detail: unknown) => any) | undefined;
+    "onCanvas:actionstart"?: ((detail: unknown) => any) | undefined;
+    "onCanvas:actionmove"?: ((detail: unknown) => any) | undefined;
+    "onCanvas:actionend"?: ((detail: unknown) => any) | undefined;
+    "onImage:transform"?: ((detail: {
+        matrix: number[];
+        oldMatrix: number[];
+    }) => any) | undefined;
+}>, {
+    template: string;
+    width: number | string;
+    height: number | string;
+    src: string;
+    canvasProps: CropperCanvasProps;
+    imageProps: CropperImageProps;
+    selectionProps: CropperSelectionProps;
+    selectionX: number;
+    selectionY: number;
+    selectionWidth: number;
+    selectionHeight: number;
+    fitSelectionToImage: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/es/cropper/cropper.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,266 @@
+import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/objectSpread2.js";
+import { getPrefixCls } from "../_utils/global-config.js";
+import { _asyncToGenerator } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/asyncToGenerator.js";
+import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, nextTick, normalizeClass, onBeforeUnmount, onMounted, openBlock, ref, unref, useAttrs, watch } from "vue";
+import { isNumber, isString } from "es-toolkit";
+//#region components/cropper/cropper.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["src"];
+var cropper_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent(_objectSpread2(_objectSpread2({}, {
+	name: "Cropper",
+	inheritAttrs: false
+}), {}, {
+	__name: "cropper",
+	props: {
+		src: { default: "" },
+		canvasProps: { default: () => ({}) },
+		imageProps: { default: () => ({}) },
+		selectionProps: { default: () => ({}) },
+		template: { default: void 0 },
+		selectionX: { default: void 0 },
+		selectionY: { default: void 0 },
+		selectionWidth: { default: void 0 },
+		selectionHeight: { default: void 0 },
+		width: { default: "100%" },
+		height: { default: "100%" },
+		fitSelectionToImage: {
+			type: Boolean,
+			default: true
+		}
+	},
+	emits: [
+		"selection:change",
+		"update:selectionX",
+		"update:selectionY",
+		"update:selectionWidth",
+		"update:selectionHeight",
+		"canvas:action",
+		"canvas:actionstart",
+		"canvas:actionmove",
+		"canvas:actionend",
+		"image:transform"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const attrs = useAttrs();
+		const prefixCls = getPrefixCls("cropper");
+		const imgRef = ref();
+		const trackedHandlers = [];
+		let cropperInstance = null;
+		let cropperConstructorPromise = null;
+		function loadCropperConstructor() {
+			if (!cropperConstructorPromise) cropperConstructorPromise = import("cropperjs").then((module) => module.default);
+			return cropperConstructorPromise;
+		}
+		const resolveSize = (value) => {
+			if (isNumber(value)) return `${value}px`;
+			if (isString(value)) return value;
+			return "100%";
+		};
+		const rootClass = computed(() => [prefixCls]);
+		const rootStyle = computed(() => ({
+			"--sd-cropper-width": resolveSize(props.width),
+			"--sd-cropper-height": resolveSize(props.height)
+		}));
+		function addTrackedListener(el, event, fn) {
+			el.addEventListener(event, fn);
+			trackedHandlers.push({
+				el,
+				event,
+				fn
+			});
+		}
+		function toKebabCase(key) {
+			return key.replace(/([A-Z])/g, "-$1").toLowerCase();
+		}
+		function syncPropsToElement(el, propsObject) {
+			if (!el) return;
+			for (const [key, value] of Object.entries(propsObject)) {
+				const attrName = toKebabCase(key);
+				if (value === void 0 || value === null || value === false) {
+					el.removeAttribute(attrName);
+					continue;
+				}
+				if (value === true) {
+					el.setAttribute(attrName, "");
+					continue;
+				}
+				el.setAttribute(attrName, String(value));
+			}
+		}
+		function getCropperCanvas() {
+			var _cropperInstance$getC;
+			return (_cropperInstance$getC = cropperInstance === null || cropperInstance === void 0 ? void 0 : cropperInstance.getCropperCanvas()) !== null && _cropperInstance$getC !== void 0 ? _cropperInstance$getC : null;
+		}
+		function getCropperImage() {
+			var _cropperInstance$getC2;
+			return (_cropperInstance$getC2 = cropperInstance === null || cropperInstance === void 0 ? void 0 : cropperInstance.getCropperImage()) !== null && _cropperInstance$getC2 !== void 0 ? _cropperInstance$getC2 : null;
+		}
+		function getCropperSelection() {
+			var _cropperInstance$getC3;
+			return (_cropperInstance$getC3 = cropperInstance === null || cropperInstance === void 0 ? void 0 : cropperInstance.getCropperSelection()) !== null && _cropperInstance$getC3 !== void 0 ? _cropperInstance$getC3 : null;
+		}
+		function getCropperSelections() {
+			var _cropperInstance$getC4;
+			return (_cropperInstance$getC4 = cropperInstance === null || cropperInstance === void 0 ? void 0 : cropperInstance.getCropperSelections()) !== null && _cropperInstance$getC4 !== void 0 ? _cropperInstance$getC4 : null;
+		}
+		function alignSelectionToImage() {
+			var _matrix$, _matrix$2;
+			const image = getCropperImage();
+			const selection = getCropperSelection();
+			const imageElement = imgRef.value;
+			if (!image || !selection || !imageElement) return;
+			const naturalWidth = imageElement.naturalWidth;
+			const naturalHeight = imageElement.naturalHeight;
+			if (!naturalWidth || !naturalHeight) return;
+			const matrix = image.$getTransform();
+			const scaleX = (_matrix$ = matrix[0]) !== null && _matrix$ !== void 0 ? _matrix$ : 0;
+			const scaleY = (_matrix$2 = matrix[3]) !== null && _matrix$2 !== void 0 ? _matrix$2 : 0;
+			if (!scaleX || !scaleY) return;
+			const renderedWidth = naturalWidth * scaleX;
+			const renderedHeight = naturalHeight * scaleY;
+			selection.$change(1, 1, (scaleX > 1 ? renderedWidth : image.clientWidth) - 2, (scaleY > 1 ? renderedHeight : image.clientHeight) - 2);
+		}
+		function bindCanvasEvents(canvas) {
+			for (const eventName of [
+				"action",
+				"actionstart",
+				"actionmove",
+				"actionend"
+			]) addTrackedListener(canvas, eventName, (event) => {
+				const detail = event.detail;
+				if (eventName === "action") emit("canvas:action", detail);
+				if (eventName === "actionstart") emit("canvas:actionstart", detail);
+				if (eventName === "actionmove") emit("canvas:actionmove", detail);
+				if (eventName === "actionend") emit("canvas:actionend", detail);
+			});
+		}
+		function bindSelectionEvents(selection) {
+			addTrackedListener(selection, "change", (event) => {
+				const detail = event.detail;
+				emit("selection:change", detail);
+				emit("update:selectionX", detail.x);
+				emit("update:selectionY", detail.y);
+				emit("update:selectionWidth", detail.width);
+				emit("update:selectionHeight", detail.height);
+			});
+		}
+		function bindImageEvents(image) {
+			addTrackedListener(image, "transform", (event) => {
+				emit("image:transform", event.detail);
+			});
+			if (!props.fitSelectionToImage) return;
+			const imageElement = imgRef.value;
+			if (!imageElement) return;
+			const align = () => nextTick(() => alignSelectionToImage());
+			if (imageElement.complete && imageElement.naturalWidth > 0) {
+				align();
+				return;
+			}
+			const onLoad = () => {
+				imageElement.removeEventListener("load", onLoad);
+				align();
+			};
+			imageElement.addEventListener("load", onLoad);
+		}
+		function syncChildProps() {
+			syncPropsToElement(getCropperCanvas(), props.canvasProps);
+			syncPropsToElement(getCropperImage(), props.imageProps);
+			syncPropsToElement(getCropperSelection(), props.selectionProps);
+		}
+		function destroy() {
+			for (const { el, event, fn } of trackedHandlers) el.removeEventListener(event, fn);
+			trackedHandlers.length = 0;
+			cropperInstance === null || cropperInstance === void 0 || cropperInstance.destroy();
+			cropperInstance = null;
+		}
+		onMounted(_asyncToGenerator(function* () {
+			if (!imgRef.value) return;
+			const CropperConstructor = yield loadCropperConstructor();
+			const options = {};
+			if (props.template !== void 0) options.template = props.template;
+			cropperInstance = new CropperConstructor(imgRef.value, options);
+			nextTick(() => {
+				syncChildProps();
+				const canvas = getCropperCanvas();
+				if (canvas) bindCanvasEvents(canvas);
+				const selection = getCropperSelection();
+				if (selection) bindSelectionEvents(selection);
+				const image = getCropperImage();
+				if (image) bindImageEvents(image);
+			});
+		}));
+		onBeforeUnmount(() => {
+			destroy();
+		});
+		watch(() => props.src, (value) => {
+			const cropperImage = getCropperImage();
+			if (cropperImage) {
+				cropperImage.src = value !== null && value !== void 0 ? value : "";
+				return;
+			}
+			if (imgRef.value) imgRef.value.src = value !== null && value !== void 0 ? value : "";
+		});
+		watch(() => props.canvasProps, () => {
+			nextTick(() => {
+				syncPropsToElement(getCropperCanvas(), props.canvasProps);
+			});
+		}, { deep: true });
+		watch(() => props.imageProps, () => {
+			nextTick(() => {
+				syncPropsToElement(getCropperImage(), props.imageProps);
+			});
+		}, { deep: true });
+		watch(() => props.selectionProps, () => {
+			nextTick(() => {
+				syncPropsToElement(getCropperSelection(), props.selectionProps);
+			});
+		}, { deep: true });
+		watch([
+			() => props.selectionX,
+			() => props.selectionY,
+			() => props.selectionWidth,
+			() => props.selectionHeight
+		], ([x, y, width, height]) => {
+			if (x === void 0 && y === void 0 && width === void 0 && height === void 0) return;
+			const selection = getCropperSelection();
+			if (!selection) return;
+			nextTick(() => {
+				const nextX = x !== null && x !== void 0 ? x : selection.x;
+				const nextY = y !== null && y !== void 0 ? y : selection.y;
+				const nextWidth = width !== null && width !== void 0 ? width : selection.width;
+				const nextHeight = height !== null && height !== void 0 ? height : selection.height;
+				if (typeof selection.$change !== "function") {
+					selection.x = nextX;
+					selection.y = nextY;
+					selection.width = nextWidth;
+					selection.height = nextHeight;
+					return;
+				}
+				selection.$change(nextX, nextY, nextWidth, nextHeight);
+			});
+		});
+		__expose({
+			getInstance: () => cropperInstance,
+			getCropperCanvas,
+			getCropperImage,
+			getCropperSelection,
+			getCropperSelections,
+			destroy
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps({
+				class: rootClass.value,
+				style: rootStyle.value
+			}, unref(attrs)), [createElementVNode("img", {
+				ref_key: "imgRef",
+				ref: imgRef,
+				src: props.src,
+				alt: "",
+				class: normalizeClass(`${unref(prefixCls)}-source-image`)
+			}, null, 10, _hoisted_1)], 16);
+		};
+	}
+}));
+//#endregion
+export { cropper_vue_vue_type_script_setup_true_lang_default as default };

package/es/cropper/index.d.ts

@@ -0,0 +1,130 @@
+import type { App } from 'vue';
+import type { SDOptions } from '../_utils/types';
+import _Cropper from './cropper.vue';
+declare const Cropper: {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("./interface").CropperProps> & Readonly<{
+        "onSelection:change"?: ((detail: import("./interface").CropperSelectionChangeDetail) => any) | undefined;
+        "onUpdate:selectionX"?: ((value: number) => any) | undefined;
+        "onUpdate:selectionY"?: ((value: number) => any) | undefined;
+        "onUpdate:selectionWidth"?: ((value: number) => any) | undefined;
+        "onUpdate:selectionHeight"?: ((value: number) => any) | undefined;
+        "onCanvas:action"?: ((detail: unknown) => any) | undefined;
+        "onCanvas:actionstart"?: ((detail: unknown) => any) | undefined;
+        "onCanvas:actionmove"?: ((detail: unknown) => any) | undefined;
+        "onCanvas:actionend"?: ((detail: unknown) => any) | undefined;
+        "onImage:transform"?: ((detail: {
+            matrix: number[];
+            oldMatrix: number[];
+        }) => any) | undefined;
+    }>, import("./interface").CropperExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        "selection:change": (detail: import("./interface").CropperSelectionChangeDetail) => any;
+        "update:selectionX": (value: number) => any;
+        "update:selectionY": (value: number) => any;
+        "update:selectionWidth": (value: number) => any;
+        "update:selectionHeight": (value: number) => any;
+        "canvas:action": (detail: unknown) => any;
+        "canvas:actionstart": (detail: unknown) => any;
+        "canvas:actionmove": (detail: unknown) => any;
+        "canvas:actionend": (detail: unknown) => any;
+        "image:transform": (detail: {
+            matrix: number[];
+            oldMatrix: number[];
+        }) => any;
+    }, import("vue").PublicProps, {
+        template: string;
+        width: number | string;
+        height: number | string;
+        src: string;
+        canvasProps: import("./interface").CropperCanvasProps;
+        imageProps: import("./interface").CropperImageProps;
+        selectionProps: import("./interface").CropperSelectionProps;
+        selectionX: number;
+        selectionY: number;
+        selectionWidth: number;
+        selectionHeight: number;
+        fitSelectionToImage: boolean;
+    }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("./interface").CropperProps> & Readonly<{
+        "onSelection:change"?: ((detail: import("./interface").CropperSelectionChangeDetail) => any) | undefined;
+        "onUpdate:selectionX"?: ((value: number) => any) | undefined;
+        "onUpdate:selectionY"?: ((value: number) => any) | undefined;
+        "onUpdate:selectionWidth"?: ((value: number) => any) | undefined;
+        "onUpdate:selectionHeight"?: ((value: number) => any) | undefined;
+        "onCanvas:action"?: ((detail: unknown) => any) | undefined;
+        "onCanvas:actionstart"?: ((detail: unknown) => any) | undefined;
+        "onCanvas:actionmove"?: ((detail: unknown) => any) | undefined;
+        "onCanvas:actionend"?: ((detail: unknown) => any) | undefined;
+        "onImage:transform"?: ((detail: {
+            matrix: number[];
+            oldMatrix: number[];
+        }) => any) | undefined;
+    }>, import("./interface").CropperExpose, {}, {}, {}, {
+        template: string;
+        width: number | string;
+        height: number | string;
+        src: string;
+        canvasProps: import("./interface").CropperCanvasProps;
+        imageProps: import("./interface").CropperImageProps;
+        selectionProps: import("./interface").CropperSelectionProps;
+        selectionX: number;
+        selectionY: number;
+        selectionWidth: number;
+        selectionHeight: number;
+        fitSelectionToImage: boolean;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("./interface").CropperProps> & Readonly<{
+    "onSelection:change"?: ((detail: import("./interface").CropperSelectionChangeDetail) => any) | undefined;
+    "onUpdate:selectionX"?: ((value: number) => any) | undefined;
+    "onUpdate:selectionY"?: ((value: number) => any) | undefined;
+    "onUpdate:selectionWidth"?: ((value: number) => any) | undefined;
+    "onUpdate:selectionHeight"?: ((value: number) => any) | undefined;
+    "onCanvas:action"?: ((detail: unknown) => any) | undefined;
+    "onCanvas:actionstart"?: ((detail: unknown) => any) | undefined;
+    "onCanvas:actionmove"?: ((detail: unknown) => any) | undefined;
+    "onCanvas:actionend"?: ((detail: unknown) => any) | undefined;
+    "onImage:transform"?: ((detail: {
+        matrix: number[];
+        oldMatrix: number[];
+    }) => any) | undefined;
+}>, import("./interface").CropperExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "selection:change": (detail: import("./interface").CropperSelectionChangeDetail) => any;
+    "update:selectionX": (value: number) => any;
+    "update:selectionY": (value: number) => any;
+    "update:selectionWidth": (value: number) => any;
+    "update:selectionHeight": (value: number) => any;
+    "canvas:action": (detail: unknown) => any;
+    "canvas:actionstart": (detail: unknown) => any;
+    "canvas:actionmove": (detail: unknown) => any;
+    "canvas:actionend": (detail: unknown) => any;
+    "image:transform": (detail: {
+        matrix: number[];
+        oldMatrix: number[];
+    }) => any;
+}, string, {
+    template: string;
+    width: number | string;
+    height: number | string;
+    src: string;
+    canvasProps: import("./interface").CropperCanvasProps;
+    imageProps: import("./interface").CropperImageProps;
+    selectionProps: import("./interface").CropperSelectionProps;
+    selectionX: number;
+    selectionY: number;
+    selectionWidth: number;
+    selectionHeight: number;
+    fitSelectionToImage: boolean;
+}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
+    install: (app: App, options?: SDOptions) => void;
+};
+export type CropperInstance = InstanceType<typeof _Cropper>;
+export type { CropperCanvasProps, CropperExpose, CropperImageProps, CropperImageTransformDetail, CropperProps, CropperSelectionChangeDetail, CropperSelectionProps, } from './interface';
+export default Cropper;

package/es/cropper/index.js

@@ -0,0 +1,10 @@
+import { getComponentPrefix, setGlobalConfig } from "../_utils/global-config.js";
+import cropper_default from "./cropper.js";
+//#region components/cropper/index.ts
+var Cropper = Object.assign(cropper_default, { install: (app, options) => {
+	setGlobalConfig(app, options);
+	const componentPrefix = getComponentPrefix(options);
+	app.component(componentPrefix + cropper_default.name, cropper_default);
+} });
+//#endregion
+export { Cropper as default };

package/es/cropper/interface.d.ts

@@ -0,0 +1,59 @@
+import type Cropper from 'cropperjs';
+import type { CropperCanvas, CropperImage, CropperSelection } from 'cropperjs';
+export interface CropperCanvasProps {
+    background?: boolean;
+    disabled?: boolean;
+    scaleStep?: number;
+    themeColor?: string;
+}
+export interface CropperImageProps {
+    initialCenterSize?: 'contain' | 'cover';
+    rotatable?: boolean;
+    scalable?: boolean;
+    skewable?: boolean;
+    translatable?: boolean;
+}
+export interface CropperSelectionProps {
+    aspectRatio?: number;
+    initialAspectRatio?: number;
+    initialCoverage?: number;
+    dynamic?: boolean;
+    movable?: boolean;
+    resizable?: boolean;
+    zoomable?: boolean;
+    keyboard?: boolean;
+    outlined?: boolean;
+    precise?: boolean;
+}
+export interface CropperSelectionChangeDetail {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface CropperImageTransformDetail {
+    matrix: number[];
+    oldMatrix: number[];
+}
+export interface CropperProps {
+    src?: string;
+    canvasProps?: CropperCanvasProps;
+    imageProps?: CropperImageProps;
+    selectionProps?: CropperSelectionProps;
+    template?: string;
+    selectionX?: number;
+    selectionY?: number;
+    selectionWidth?: number;
+    selectionHeight?: number;
+    width?: number | string;
+    height?: number | string;
+    fitSelectionToImage?: boolean;
+}
+export interface CropperExpose {
+    getInstance(): Cropper | null;
+    getCropperCanvas(): CropperCanvas | null;
+    getCropperImage(): CropperImage | null;
+    getCropperSelection(): CropperSelection | null;
+    getCropperSelections(): ReturnType<Cropper['getCropperSelections']> | null;
+    destroy(): void;
+}

package/es/cropper/style/css.js

@@ -0,0 +1,2 @@
+import "../../style/index.css";
+import "./index.css";

package/es/cropper/style/index.css

@@ -0,0 +1,51 @@
+/******** borderSize *******/
+/******** borderStyle *******/
+/******** radius *******/
+/******** shadow distance *******/
+/******** size *******/
+/******** spacing *******/
+/******** shadow *******/
+/******** opacity *******/
+/******** fontSize *******/
+/******** fontWeight ********/
+/******** Primary *******/
+/******** success *******/
+/******** warning *******/
+/******** danger *******/
+/******** link *******/
+/******** radius *******/
+/********* icon hover *********/
+.sd-cropper {
+  position: relative;
+  display: block;
+  width: var(--sd-cropper-width, 100%);
+  min-width: 200px;
+  height: var(--sd-cropper-height, 100%);
+  min-height: 120px;
+  overflow: hidden;
+  background-color: var(--color-neutral-2);
+  border: 1px solid var(--color-neutral-3);
+  border-radius: 4px;
+}
+.sd-cropper-source-image {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  height: auto;
+  opacity: 0;
+  pointer-events: none;
+}
+.sd-cropper cropper-canvas {
+  width: var(--sd-cropper-width, 100%);
+  height: var(--sd-cropper-height, 100%);
+  background-color: var(--color-neutral-2);
+}
+.sd-cropper cropper-image,
+.sd-cropper cropper-selection,
+.sd-cropper cropper-handle,
+.sd-cropper cropper-grid,
+.sd-cropper cropper-shade,
+.sd-cropper cropper-viewer,
+.sd-cropper cropper-crosshair {
+  color: rgb(var(--primary-6));
+}

package/es/cropper/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style/index.scss';
+import './index.scss';

package/es/cropper/style/index.js

@@ -0,0 +1,2 @@
+import "../../style/index.scss";
+import "./index.scss";