sard 1.0.0 → 1.0.2

package/components/slider/slider.js

@@ -0,0 +1,334 @@
+import { createBem } from "../../utils/bem.js";
+import { clamp, mround } from "../../utils/number.js";
+import { arrayEqual, toArray } from "../../utils/array.js";
+import { usePointerDown } from "../../use/usePointerDown.js";
+import { useRtl } from "../../use/useRtl.js";
+import { useFormContext, useFormItemContext } from "../form/common.js";
+import { defaultSliderProps } from "./common.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeDefaults, normalizeClass, normalizeStyle, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useTemplateRef, watch, withModifiers } from "vue";
+//#region packages/sard/components/slider/slider.vue
+var slider_default = /*@__PURE__*/ defineComponent({
+	__name: "slider",
+	props: /*@__PURE__*/ mergeDefaults({
+		range: {
+			type: Boolean,
+			required: false
+		},
+		modelValue: {
+			type: [Number, Array],
+			required: false
+		},
+		min: {
+			type: Number,
+			required: false
+		},
+		max: {
+			type: Number,
+			required: false
+		},
+		step: {
+			type: Number,
+			required: false
+		},
+		vertical: {
+			type: Boolean,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		readonly: {
+			type: Boolean,
+			required: false
+		},
+		color: {
+			type: String,
+			required: false
+		},
+		trackColor: {
+			type: String,
+			required: false
+		},
+		trackSize: {
+			type: String,
+			required: false
+		},
+		thumbColor: {
+			type: String,
+			required: false
+		},
+		thumbSize: {
+			type: String,
+			required: false
+		},
+		showValue: {
+			type: Boolean,
+			required: false
+		},
+		valuePosition: {
+			type: String,
+			required: false
+		},
+		valueBackground: {
+			type: String,
+			required: false
+		},
+		valueColor: {
+			type: String,
+			required: false
+		},
+		showScale: {
+			type: Boolean,
+			required: false
+		},
+		scalePosition: {
+			type: String,
+			required: false
+		},
+		validateEvent: {
+			type: Boolean,
+			required: false
+		}
+	}, defaultSliderProps),
+	emits: [
+		"update:modelValue",
+		"input",
+		"change",
+		"drag-start",
+		"drag-end"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const bem = createBem("slider");
+		const formContext = useFormContext();
+		const formItemContext = useFormItemContext();
+		const isDisabled = computed(() => {
+			return formContext?.disabled || props.disabled;
+		});
+		const isReadonly = computed(() => {
+			return formContext?.readonly || props.readonly;
+		});
+		const innerValue = ref(props.modelValue ?? (props.range ? [props.min, props.min] : props.min));
+		watch(() => props.modelValue, () => {
+			innerValue.value = props.modelValue ?? (props.range ? [props.min, props.min] : props.min);
+			if (props.validateEvent) formItemContext?.onChange();
+		});
+		const trackRef = useTemplateRef("track");
+		let trackRect;
+		let downValue;
+		let moveValue;
+		let downRatio = 0;
+		let triggerMove = false;
+		const isRtl = useRtl(trackRef);
+		const onThumbClick = () => {};
+		const onSliderClick = (event) => {
+			if (isDisabled.value || isReadonly.value) return;
+			const { clientY, clientX } = "touches" in event ? event.touches[0] : event;
+			trackRect = trackRef.value.getBoundingClientRect();
+			const trackSize = props.vertical ? trackRect.height : trackRect.width;
+			let offset = (props.vertical ? clientY : clientX) - (props.vertical ? trackRect.top : isRtl.value ? trackRect.right : trackRect.left);
+			if (isRtl.value) offset *= -1;
+			const ratio = offset / trackSize;
+			const total = props.max - props.min;
+			const tapValue = clamp(mround(props.min + total * ratio, props.step), props.min, props.max);
+			let nextValue;
+			if (Array.isArray(innerValue.value)) {
+				const [start, end] = innerValue.value;
+				if (Math.abs(tapValue - end) <= Math.abs(tapValue - start)) {
+					if (tapValue !== innerValue.value[1]) nextValue = [start, tapValue];
+				} else if (tapValue !== innerValue.value[0]) nextValue = [tapValue, end];
+			} else if (tapValue !== innerValue.value) nextValue = tapValue;
+			if (nextValue !== void 0) {
+				innerValue.value = nextValue;
+				emit("update:modelValue", nextValue);
+				emit("input", nextValue);
+				emit("change", nextValue);
+			}
+		};
+		let downCoord = {
+			x: 0,
+			y: 0
+		};
+		const onTouchStart = (event, index) => {
+			if (isDisabled.value || isReadonly.value) return;
+			downCoord = {
+				x: event.touches[0].clientX,
+				y: event.touches[0].clientY
+			};
+			trackRect = trackRef.value.getBoundingClientRect();
+			downRatio = ((Array.isArray(innerValue.value) ? innerValue.value[index] : innerValue.value) - props.min) / (props.max - props.min);
+			downValue = innerValue.value;
+			moveValue = innerValue.value;
+		};
+		const onTouchMove = (event, index) => {
+			if (isDisabled.value || isReadonly.value) return;
+			if (!triggerMove) {
+				triggerMove = true;
+				emit("drag-start", event);
+			}
+			if (!trackRect) return;
+			let deltaX = event.touches[0].clientX - downCoord.x;
+			if (isRtl.value) deltaX *= -1;
+			const deltaY = event.touches[0].clientY - downCoord.y;
+			const trackSize = props.vertical ? trackRect.height : trackRect.width;
+			const ratio = (props.vertical ? deltaY : deltaX) / trackSize + downRatio;
+			const total = props.max - props.min;
+			const tapValue = clamp(mround(props.min + total * ratio, props.step), props.min, props.max);
+			let nextValue;
+			if (Array.isArray(downValue)) {
+				const [start, end] = downValue;
+				if (index === 1) nextValue = tapValue < start ? [tapValue, start] : [start, tapValue];
+				else nextValue = tapValue > end ? [end, tapValue] : [tapValue, end];
+			} else nextValue = tapValue;
+			if (!arrayEqual(toArray(nextValue), toArray(moveValue))) {
+				moveValue = nextValue;
+				innerValue.value = nextValue;
+				emit("update:modelValue", nextValue);
+				emit("input", nextValue);
+			}
+		};
+		const onTouchEnd = (event) => {
+			triggerMove = false;
+			if (isDisabled.value || isReadonly.value) return;
+			emit("drag-end", event);
+			if (!arrayEqual(toArray(downValue), toArray(innerValue.value))) emit("change", innerValue.value);
+		};
+		const onPointerDown0 = usePointerDown((event) => {
+			event.stopPropagation();
+			onTouchStart(event, 0);
+		}, (event) => onTouchMove(event, 0));
+		const onPointerDown1 = usePointerDown((event) => {
+			event.stopPropagation();
+			onTouchStart(event, 1);
+		}, (event) => onTouchMove(event, 1));
+		const rangeValue = computed(() => {
+			let startValue;
+			let endValue;
+			if (Array.isArray(innerValue.value)) {
+				startValue = innerValue.value[0];
+				endValue = innerValue.value[1];
+			} else {
+				startValue = props.min;
+				endValue = innerValue.value;
+			}
+			return [startValue, endValue];
+		});
+		const rangePercent = computed(() => {
+			const startRatio = (rangeValue.value[0] - props.min) / (props.max - props.min);
+			const endRatio = (rangeValue.value[1] - props.min) / (props.max - props.min);
+			return [startRatio * 100 + "%", (endRatio - startRatio) * 100 + "%"];
+		});
+		const scales = computed(() => {
+			if (!props.showScale) return [];
+			const total = props.max - props.min;
+			const direction = props.vertical ? "top" : "inset-inline-start";
+			const scales = [{
+				value: props.min,
+				style: { [direction]: "0%" },
+				active: props.min === rangeValue.value[0]
+			}];
+			let scale = props.min;
+			do {
+				scale += props.step;
+				if (scale > props.max) scale = props.max;
+				scales.push({
+					value: scale,
+					style: { [direction]: (scale - props.min) / total * 100 + "%" },
+					active: scale >= rangeValue.value[0] && scale <= rangeValue.value[1]
+				});
+			} while (scale < props.max);
+			return scales;
+		});
+		const sliderClass = computed(() => {
+			return [
+				bem.b(),
+				bem.m(props.vertical ? "vertical" : "horizontal"),
+				bem.m("disabled", isDisabled.value),
+				bem.m("readonly", isReadonly.value),
+				bem.m("show-scale", props.showScale),
+				bem.m(`scale-${props.scalePosition ?? (props.vertical ? "left" : "bottom")}`, props.showScale)
+			];
+		});
+		const thumbStyle = computed(() => {
+			return {
+				width: props.thumbSize,
+				height: props.thumbSize,
+				backgroundColor: props.thumbColor
+			};
+		});
+		const fillStyle = computed(() => {
+			return {
+				[props.vertical ? "top" : "inset-inline-start"]: rangePercent.value[0],
+				[props.vertical ? "height" : "width"]: rangePercent.value[1],
+				backgroundColor: props.color
+			};
+		});
+		const valueClass = computed(() => {
+			return [bem.e("value"), bem.em("value", props.valuePosition ?? (props.vertical ? "right" : "top"))];
+		});
+		const valueStyle = computed(() => {
+			return {
+				backgroundColor: props.valueBackground,
+				color: props.valueColor
+			};
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(sliderClass.value),
+				onClick: onSliderClick
+			}, [createElementVNode("div", {
+				ref: "track",
+				class: normalizeClass(unref(bem).e("track")),
+				style: normalizeStyle({
+					width: __props.vertical ? __props.trackSize : "",
+					height: !__props.vertical ? __props.trackSize : "",
+					backgroundColor: __props.trackColor
+				})
+			}, [createElementVNode("div", {
+				class: normalizeClass(unref(bem).e("fill")),
+				style: normalizeStyle(fillStyle.value)
+			}, [__props.range ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass([unref(bem).e("thumb-container"), unref(bem).em("thumb-container", "start")]),
+				onTouchstart: _cache[0] || (_cache[0] = withModifiers(($event) => onTouchStart($event, 0), ["stop", "prevent"])),
+				onTouchmove: _cache[1] || (_cache[1] = withModifiers(($event) => onTouchMove($event, 0), ["stop", "prevent"])),
+				onTouchend: _cache[2] || (_cache[2] = ($event) => onTouchEnd($event)),
+				onTouchcancel: _cache[3] || (_cache[3] = ($event) => onTouchEnd($event)),
+				onPointerdown: _cache[4] || (_cache[4] = (...args) => unref(onPointerDown0) && unref(onPointerDown0)(...args)),
+				onClick: withModifiers(onThumbClick, ["stop"])
+			}, [renderSlot(_ctx.$slots, "start-thumb", { value: rangeValue.value[0] }, () => [createElementVNode("div", {
+				class: normalizeClass(unref(bem).e("thumb")),
+				style: normalizeStyle(thumbStyle.value)
+			}, null, 6)]), __props.showValue ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(valueClass.value),
+				style: normalizeStyle(valueStyle.value)
+			}, toDisplayString(rangeValue.value[0]), 7)) : createCommentVNode("v-if", true)], 34)) : createCommentVNode("v-if", true), createElementVNode("div", {
+				class: normalizeClass([unref(bem).e("thumb-container"), unref(bem).em("thumb-container", "end")]),
+				onTouchstart: _cache[5] || (_cache[5] = withModifiers(($event) => onTouchStart($event, 1), ["stop", "prevent"])),
+				onTouchmove: _cache[6] || (_cache[6] = withModifiers(($event) => onTouchMove($event, 1), ["stop", "prevent"])),
+				onTouchend: _cache[7] || (_cache[7] = ($event) => onTouchEnd($event)),
+				onTouchcancel: _cache[8] || (_cache[8] = ($event) => onTouchEnd($event)),
+				onPointerdown: _cache[9] || (_cache[9] = (...args) => unref(onPointerDown1) && unref(onPointerDown1)(...args)),
+				onClick: withModifiers(onThumbClick, ["stop"])
+			}, [renderSlot(_ctx.$slots, "end-thumb", { value: rangeValue.value[1] }, () => [createElementVNode("div", {
+				class: normalizeClass(unref(bem).e("thumb")),
+				style: normalizeStyle(thumbStyle.value)
+			}, null, 6)]), __props.showValue ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(valueClass.value),
+				style: normalizeStyle(valueStyle.value)
+			}, toDisplayString(rangeValue.value[1]), 7)) : createCommentVNode("v-if", true)], 34)], 6), __props.showScale ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(scales.value, (scale, i) => {
+				return openBlock(), createElementBlock("div", {
+					key: i,
+					class: normalizeClass([unref(bem).e("scale"), unref(bem).em("scale", "active", scale.active)]),
+					style: normalizeStyle(scale.style)
+				}, [createElementVNode("div", { class: normalizeClass(unref(bem).e("scale-text")) }, toDisplayString(scale.value), 3)], 6);
+			}), 128)) : createCommentVNode("v-if", true)], 6)], 2);
+		};
+	}
+});
+//#endregion
+export { slider_default as default };

package/components/space/common.d.ts

@@ -0,0 +1,18 @@
+import { type DefaultProps } from '../config';
+export type SpaceSize = 'small' | 'medium' | 'large';
+export type SpaceAlign = 'start' | 'end' | 'center' | 'baseline';
+export type SpaceJustify = 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';
+export interface SpaceProps {
+    direction?: 'vertical' | 'horizontal';
+    size?: SpaceSize | (string & {});
+    align?: SpaceAlign | (string & {});
+    justify?: SpaceJustify | (string & {});
+    wrap?: boolean;
+}
+export declare const spaceSizes: string[];
+export declare const spaceMapAlign: Record<string, string>;
+export declare const spaceMapJustify: Record<string, string>;
+export declare const defaultSpaceProps: DefaultProps<SpaceProps>;
+export interface SpaceSlots {
+    default?(props: Record<string, never>): any;
+}

package/components/space/common.js

@@ -0,0 +1,23 @@
+//#region packages/sard/components/space/common.ts
+const spaceSizes = [
+	"small",
+	"medium",
+	"large"
+];
+const spaceMapAlign = {
+	start: "flex-start",
+	end: "flex-end"
+};
+const spaceMapJustify = {
+	start: "flex-start",
+	end: "flex-end",
+	between: "space-between",
+	around: "space-around",
+	evenly: "space-evenly"
+};
+const defaultSpaceProps = {
+	direction: "horizontal",
+	size: "medium"
+};
+//#endregion
+export { defaultSpaceProps, spaceMapAlign, spaceMapJustify, spaceSizes };

package/components/space/index.css

@@ -0,0 +1 @@
+:root{--s-space-gap-sm:var(--s-size-xs);--s-space-gap:var(--s-size-sm);--s-space-gap-lg:var(--s-size)}.s-space{display:flex}.s-space--vertical{flex-direction:column}.s-space--horizontal{flex-direction:row}.s-space--small{gap:var(--s-space-gap-sm)}.s-space--medium{gap:var(--s-space-gap)}.s-space--large{gap:var(--s-space-gap-lg)}.s-space--wrap{flex-wrap:wrap}

package/components/space/index.d.ts

@@ -0,0 +1,5 @@
+import { type EnhancedComponent } from '../../utils';
+import _Space from './space.vue';
+export declare const Space: EnhancedComponent<typeof _Space>;
+export default Space;
+export { type SpaceProps, type SpaceSlots, type SpaceSize, spaceSizes } from './common';

package/components/space/index.js

@@ -0,0 +1,7 @@
+import { enhanceComponent } from "../../utils/component.js";
+import { spaceSizes } from "./common.js";
+import space_default from "./space.js";
+//#region packages/sard/components/space/index.ts
+const Space = enhanceComponent(space_default);
+//#endregion
+export { Space, Space as default, spaceSizes };

package/components/space/space.d.ts

@@ -0,0 +1,17 @@
+import { type SpaceProps, type SpaceSlots } from './common';
+type __VLS_Slots = SpaceSlots;
+declare const __VLS_base: import("vue").DefineComponent<SpaceProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SpaceProps> & Readonly<{}>, {
+    size: import("./common").SpaceSize | (string & {});
+    direction: "vertical" | "horizontal";
+    wrap: boolean;
+    justify: import("./common").SpaceJustify | (string & {});
+    align: import("./common").SpaceAlign | (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/space/space.js

@@ -0,0 +1,59 @@
+import { createBem } from "../../utils/bem.js";
+import { defaultSpaceProps, spaceMapAlign, spaceMapJustify, spaceSizes } from "./common.js";
+import { computed, createElementBlock, defineComponent, mergeDefaults, normalizeClass, normalizeStyle, openBlock, renderSlot } from "vue";
+//#region packages/sard/components/space/space.vue
+var space_default = /*@__PURE__*/ defineComponent({
+	__name: "space",
+	props: /*@__PURE__*/ mergeDefaults({
+		direction: {
+			type: String,
+			required: false
+		},
+		size: {
+			type: [String, Object],
+			required: false
+		},
+		align: {
+			type: [String, Object],
+			required: false
+		},
+		justify: {
+			type: [String, Object],
+			required: false
+		},
+		wrap: {
+			type: Boolean,
+			required: false
+		}
+	}, defaultSpaceProps),
+	setup(__props) {
+		const props = __props;
+		const bem = createBem("space");
+		const presetSize = computed(() => {
+			return spaceSizes.includes(props.size);
+		});
+		const spaceClass = computed(() => {
+			return [
+				bem.b(),
+				bem.m(props.direction),
+				bem.m(props.size, presetSize.value),
+				bem.m("wrap", props.wrap)
+			];
+		});
+		const spaceStyle = computed(() => {
+			return {
+				gap: presetSize.value ? "" : props.size,
+				alignItems: (props.align && spaceMapAlign[props.align]) ?? props.align,
+				justifyContent: (props.justify && spaceMapJustify[props.justify]) ?? props.justify
+			};
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(spaceClass.value),
+				style: normalizeStyle(spaceStyle.value)
+			}, [renderSlot(_ctx.$slots, "default")], 6);
+		};
+	}
+});
+//#endregion
+export { space_default as default };

package/components/status-bar/common.d.ts

@@ -0,0 +1,11 @@
+import type { DefaultProps } from '../config';
+export interface StatusBarProps {
+    reverse?: boolean;
+}
+export declare const defaultStatusBarProps: DefaultProps<StatusBarProps>;
+export interface StatusBarSlots {
+}
+export interface StatusBarEmits {
+}
+export interface StatusBarExpose {
+}

package/components/status-bar/common.js

@@ -0,0 +1,4 @@
+//#region packages/sard/components/status-bar/common.ts
+const defaultStatusBarProps = {};
+//#endregion
+export { defaultStatusBarProps };

package/components/status-bar/index.css

@@ -0,0 +1 @@
+.s-statusBar{flex:none}

package/components/status-bar/index.d.ts

@@ -0,0 +1,5 @@
+import { type EnhancedComponent } from '../../utils';
+import _StatusBar from './status-bar.vue';
+export declare const StatusBar: EnhancedComponent<typeof _StatusBar>;
+export default StatusBar;
+export type { StatusBarProps, StatusBarSlots, StatusBarEmits, StatusBarExpose } from './common';

package/components/status-bar/index.js

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

package/components/status-bar/status-bar.d.ts

@@ -0,0 +1,13 @@
+import { type StatusBarProps, type StatusBarSlots, type StatusBarExpose } from './common';
+type __VLS_Slots = StatusBarSlots;
+declare const __VLS_base: import("vue").DefineComponent<StatusBarProps, StatusBarExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<StatusBarProps> & Readonly<{}>, {
+    reverse: 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/status-bar/status-bar.js

@@ -0,0 +1,31 @@
+import { createBem } from "../../utils/bem.js";
+import { windowInfo } from "../config/windowInfo.js";
+import { defaultStatusBarProps } from "./common.js";
+import { computed, createElementBlock, defineComponent, mergeDefaults, normalizeClass, normalizeStyle, openBlock, unref } from "vue";
+//#region packages/sard/components/status-bar/status-bar.vue
+var status_bar_default = /*@__PURE__*/ defineComponent({
+	__name: "status-bar",
+	props: /*@__PURE__*/ mergeDefaults({ reverse: {
+		type: Boolean,
+		required: false
+	} }, defaultStatusBarProps),
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const bem = createBem("status-bar");
+		const statusBarHeight = computed(() => {
+			return windowInfo.statusBarHeight + "px";
+		});
+		__expose();
+		const statusBarStyle = computed(() => {
+			return [{ [props.reverse ? "width" : "height"]: statusBarHeight.value }];
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(unref(bem).b()),
+				style: normalizeStyle(statusBarStyle.value)
+			}, null, 6);
+		};
+	}
+});
+//#endregion
+export { status_bar_default as default };

package/components/stepper/common.d.ts

@@ -0,0 +1,26 @@
+import { type DefaultProps } from '../config';
+export interface StepperProps {
+    modelValue?: number | string | null;
+    min?: number;
+    max?: number;
+    valueOnClear?: number | 'min' | 'max';
+    step?: number;
+    precision?: number;
+    inputType?: 'number' | 'digit';
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    press?: boolean;
+    pressTime?: number;
+    interval?: number;
+    validateEvent?: boolean;
+    size?: 'small' | 'medium';
+    variant?: 'solid' | 'outlined' | 'accent' | 'ghost';
+}
+export declare const defaultStepperProps: DefaultProps<StepperProps>;
+export interface StepperEmits {
+    (e: 'update:modelValue', value: number | string | undefined): void;
+    (e: 'change', value: number | string | undefined): void;
+    (e: 'focus', event: FocusEvent): void;
+    (e: 'blur', event: FocusEvent): void;
+}

package/components/stepper/common.js

@@ -0,0 +1,15 @@
+//#region packages/sard/components/stepper/common.ts
+const defaultStepperProps = {
+	min: Number.MIN_SAFE_INTEGER,
+	max: Number.MAX_SAFE_INTEGER,
+	step: 1,
+	inputType: "number",
+	press: true,
+	pressTime: 350,
+	interval: 150,
+	validateEvent: true,
+	size: "medium",
+	variant: "solid"
+};
+//#endregion
+export { defaultStepperProps };

package/components/stepper/index.css

@@ -0,0 +1 @@
+:root{--s-stepper-height:var(--s-content-height-xs);--s-stepper-accent-height:var(--s-content-height-2xs);--s-stepper-gap:var(--s-size-2xs);--s-stepper-bg:var(--s-fill-color-secondary);--s-stepper-input-width:40px;--s-stepper-input-padding-x:var(--s-size-2xs);--s-stepper-input-font-size:var(--s-font-size);--s-stepper-button-font-size:var(--s-font-size-lg);--s-stepper-button-border-radius:var(--s-border-radius-sm);--s-stepper-button-bg-active:var(--s-bg-color-active-dark);--s-stepper-height-sm:26px;--s-stepper-accent-height-sm:20px;--s-stepper-input-width-sm:36px;--s-stepper-input-font-size-sm:var(--s-font-size-sm);--s-stepper-button-font-size-sm:var(--s-font-size)}.s-stepper{display:inline-flex;align-items:stretch;height:var(--s-stepper-height);color:var(--s-text-color-primary)}.s-stepper__button{flex:none;display:flex;justify-content:center;align-items:center;width:var(--s-stepper-height);font-size:var(--s-stepper-button-font-size);line-height:var(--s-line-height-none);-webkit-user-select:none;user-select:none;cursor:pointer}.s-stepper__button--readonly{cursor:unset}.s-stepper__button:is(.is-disabled){opacity:var(--s-opacity-disabled);cursor:var(--s-cursor-disabled);filter:var(--s-filter-disabled)}:root:not([dir=rtl]) .s-stepper__button--decrease{border-top-left-radius:var(--s-stepper-button-border-radius);border-bottom-left-radius:var(--s-stepper-button-border-radius)}:root[dir=rtl] .s-stepper__button--decrease{border-top-right-radius:var(--s-stepper-button-border-radius);border-bottom-right-radius:var(--s-stepper-button-border-radius)}:root:not([dir=rtl]) .s-stepper__button--increase{border-top-right-radius:var(--s-stepper-button-border-radius);border-bottom-right-radius:var(--s-stepper-button-border-radius)}:root[dir=rtl] .s-stepper__button--increase{border-top-left-radius:var(--s-stepper-button-border-radius);border-bottom-left-radius:var(--s-stepper-button-border-radius)}.s-stepper__input{flex:none;width:var(--s-stepper-input-width);height:100%;padding:0 var(--s-stepper-input-padding-x);border:0;border-radius:0;font-size:var(--s-stepper-input-font-size);line-height:var(--s-line-height-none);text-align:center}.s-stepper--solid{gap:var(--s-stepper-gap)}.s-stepper--solid .s-stepper__button{background:var(--s-stepper-bg)}.s-stepper--solid .s-stepper__button:not(.is-disabled,.is-readonly):active{background:var(--s-stepper-button-bg-active)}.s-stepper--solid .s-stepper__input{background:var(--s-stepper-bg)}.s-stepper--outlined .s-stepper__button{color:var(--s-color-primary);border:1px solid var(--s-color-primary)}.s-stepper--outlined .s-stepper__button:not(.is-disabled,.is-readonly):active{background:var(--s-bg-color-active)}.s-stepper--outlined .s-stepper__input{border-top:1px solid var(--s-color-primary);border-bottom:1px solid var(--s-color-primary)}.s-stepper--accent{height:var(--s-stepper-accent-height);gap:var(--s-stepper-gap)}.s-stepper--accent .s-stepper__button{border-radius:50%;width:var(--s-stepper-accent-height)}.s-stepper--accent .s-stepper__button:not(.is-disabled,.is-readonly):active{opacity:var(--s-opacity-active)}.s-stepper--accent .s-stepper__button--decrease{color:var(--s-color-primary);border:1px solid var(--s-color-primary)}.s-stepper--accent .s-stepper__button--increase{color:var(--s-white);background:var(--s-color-primary)}.s-stepper--accent .s-stepper__input{padding:0}.s-stepper--ghost{gap:var(--s-stepper-gap)}.s-stepper--ghost .s-stepper__button:not(.is-disabled,.is-readonly):active{opacity:var(--s-opacity-active)}.s-stepper--ghost .s-stepper__input{border-radius:var(--s-stepper-button-border-radius);background:var(--s-stepper-bg)}.s-stepper--small{height:var(--s-stepper-height-sm)}.s-stepper--small .s-stepper__input{width:var(--s-stepper-input-width-sm);font-size:var(--s-stepper-input-font-size-sm)}.s-stepper--small .s-stepper__button{width:var(--s-stepper-height-sm);font-size:var(--s-stepper-button-font-size-sm)}.s-stepper--small.s-stepper--accent{height:var(--s-stepper-accent-height-sm)}.s-stepper--small.s-stepper--accent .s-stepper__button{width:var(--s-stepper-accent-height-sm)}

package/components/stepper/index.d.ts

@@ -0,0 +1,5 @@
+import { type EnhancedComponent } from '../../utils';
+import _Stepper from './stepper.vue';
+export declare const Stepper: EnhancedComponent<typeof _Stepper>;
+export default Stepper;
+export type { StepperProps, StepperEmits } from './common';

package/components/stepper/index.js

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

package/components/stepper/stepper.d.ts

@@ -0,0 +1,31 @@
+import { type StepperProps } from './common';
+declare const __VLS_export: import("vue").DefineComponent<StepperProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    blur: (event: FocusEvent) => any;
+    change: (value: string | number | undefined) => any;
+    focus: (event: FocusEvent) => any;
+    "update:modelValue": (value: string | number | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<StepperProps> & Readonly<{
+    onBlur?: ((event: FocusEvent) => any) | undefined;
+    onChange?: ((value: string | number | undefined) => any) | undefined;
+    onFocus?: ((event: FocusEvent) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | number | undefined) => any) | undefined;
+}>, {
+    min: number;
+    max: number;
+    readonly: boolean;
+    size: "small" | "medium";
+    disabled: boolean;
+    modelValue: number | string | null;
+    variant: "solid" | "outlined" | "accent" | "ghost";
+    placeholder: string;
+    validateEvent: boolean;
+    precision: number;
+    inputType: "number" | "digit";
+    valueOnClear: number | "min" | "max";
+    step: number;
+    press: boolean;
+    pressTime: number;
+    interval: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;