antdv-next 0.0.111 → 1.0.0-alpha.2

package/dist/badge/index.js

@@ -0,0 +1,249 @@
+import { useComponentBaseConfig } from "../config-provider/context.js";
+import { useMergeSemantic, useToArr, useToProps } from "../_util/hooks/useMergeSemantic.js";
+import "../_util/hooks/index.js";
+import { clsx as clsx$1, getSlotPropsFnRun, toPropsRefs } from "../_util/tools.js";
+import { isPresetColor } from "../_util/colors.js";
+import { getTransitionProps } from "../_util/motion.js";
+import style_default from "./style/index.js";
+import Ribbon_default from "./Ribbon.js";
+import ScrollNumber_default from "./ScrollNumber.js";
+import { Transition, cloneVNode, computed, createVNode, defineComponent, isVNode, mergeDefaults, mergeProps, shallowRef, watchEffect } from "vue";
+import { classNames } from "@v-c/util";
+import { filterEmpty } from "@v-c/util/dist/props-util";
+
+//#region src/badge/index.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const InternalBadge = /* @__PURE__ */ defineComponent((props, { slots, attrs, expose }) => {
+	const { class: contextClassName, style: contextStyle, classes: contextClassNames, styles: contextStyles, prefixCls, direction, getPrefixCls } = useComponentBaseConfig("badge", props);
+	const { classes, styles } = toPropsRefs(props, "classes", "styles");
+	const mergedProps = computed(() => props);
+	const [mergedClassNames, mergedStyles] = useMergeSemantic(useToArr(contextClassNames, classes), useToArr(contextStyles, styles), useToProps(mergedProps));
+	const badgeRef = shallowRef();
+	expose({ badgeRef });
+	const [hashId, cssVarCls] = style_default(prefixCls);
+	const numberedDisplayCount = computed(() => {
+		const { count, overflowCount } = props;
+		return count > overflowCount ? `${overflowCount}+` : count;
+	});
+	const isZero = computed(() => numberedDisplayCount.value === "0" || numberedDisplayCount.value === 0 || props.text === "0" || props.text === 0);
+	const countNodes = computed(() => {
+		const result = getSlotPropsFnRun(slots, props, "count");
+		if (!result) return [];
+		return Array.isArray(result) ? result : [result];
+	});
+	const textNodes = computed(() => {
+		const result = getSlotPropsFnRun(slots, props, "text");
+		if (!result) return [];
+		return Array.isArray(result) ? result : [result];
+	});
+	const ignoreCount = computed(() => props.count === null || isZero.value && !props.showZero);
+	const hasStatus = computed(() => {
+		const { status, color } = props;
+		return (status !== null && status !== void 0 || color !== null && color !== void 0) && ignoreCount.value;
+	});
+	const hasStatusValue = computed(() => props.status !== null && props.status !== void 0 || !isZero.value);
+	const showAsDot = computed(() => props.dot && !isZero.value);
+	const mergedCount = computed(() => showAsDot.value ? "" : numberedDisplayCount.value);
+	const isHidden = computed(() => {
+		const textEmpty = textNodes.value.length === 0 && (props.text === void 0 || props.text === null || props.text === "");
+		return ((mergedCount.value === null || mergedCount.value === void 0 || mergedCount.value === "") && countNodes.value.length === 0 || isZero.value && !props.showZero) && !showAsDot.value && textEmpty;
+	});
+	const displayCountRef = shallowRef(mergedCount.value);
+	const countCacheRef = shallowRef(props.count ?? null);
+	const isDotRef = shallowRef(showAsDot.value);
+	watchEffect(() => {
+		if (!isHidden.value) displayCountRef.value = mergedCount.value;
+	});
+	watchEffect(() => {
+		if (!isHidden.value) countCacheRef.value = countNodes.value[0] ?? null;
+	});
+	watchEffect(() => {
+		if (!isHidden.value) isDotRef.value = showAsDot.value;
+	});
+	const mergedStyle = computed(() => {
+		if (!props.offset) return {
+			...contextStyle.value,
+			...attrs.style
+		};
+		const horizontalOffset = Number.parseInt(props.offset[0], 10);
+		const offsetStyle = {
+			marginTop: props.offset[1],
+			insetInlineEnd: direction.value === "rtl" ? horizontalOffset : -horizontalOffset
+		};
+		return {
+			...contextStyle.value,
+			...offsetStyle,
+			...attrs.style
+		};
+	});
+	const displayCount = computed(() => displayCountRef.value);
+	const isInternalColor = computed(() => isPresetColor(props.color, false));
+	return () => {
+		const { class: attrClass, style: attrStyle,...restAttrs } = attrs;
+		const children = filterEmpty(slots.default?.() ?? []);
+		let livingCount = countCacheRef.value;
+		if (typeof livingCount === "function") livingCount = livingCount();
+		const titleNode = props.title ?? (typeof livingCount === "string" || typeof livingCount === "number" ? livingCount : void 0);
+		const hasTextSlot = textNodes.value.length > 0;
+		const showStatusTextNode = !isHidden.value && (hasTextSlot ? true : props.text === 0 ? props.showZero : !!props.text && props.text !== true);
+		const statusCls = clsx$1(mergedClassNames.value.indicator, {
+			[`${prefixCls.value}-status-dot`]: hasStatus.value,
+			[`${prefixCls.value}-status-${props.status}`]: !!props.status,
+			[`${prefixCls.value}-color-${props.color}`]: isInternalColor.value
+		});
+		const badgeClassName = classNames(prefixCls.value, {
+			[`${prefixCls.value}-status`]: hasStatus.value,
+			[`${prefixCls.value}-not-a-wrapper`]: children.length === 0,
+			[`${prefixCls.value}-rtl`]: direction.value === "rtl"
+		}, attrs.class, props.rootClass, contextClassName.value, mergedClassNames.value?.root, hashId.value, cssVarCls.value);
+		const statusStyle = {};
+		if (props.color && !isInternalColor.value) {
+			statusStyle.background = props.color;
+			statusStyle.color = props.color;
+		}
+		const renderStatusText = (style) => {
+			if (!showStatusTextNode) return null;
+			return createVNode("span", {
+				"class": `${prefixCls.value}-status-text`,
+				"style": style
+			}, [hasTextSlot ? textNodes.value : props.text]);
+		};
+		if (!children.length && hasStatus.value && (showStatusTextNode || hasStatusValue.value || !ignoreCount.value)) {
+			const statusTextColor = mergedStyle.value?.color;
+			return createVNode("span", mergeProps(restAttrs, {
+				"ref": badgeRef,
+				"class": badgeClassName,
+				"style": [mergedStyles.value.root, mergedStyle.value]
+			}), [createVNode("span", {
+				"class": statusCls,
+				"style": [mergedStyles.value.indicator, statusStyle]
+			}, null), renderStatusText({ color: statusTextColor })]);
+		}
+		const scrollNumberCls = classNames(mergedClassNames.value.indicator, {
+			[`${prefixCls.value}-dot`]: isDotRef.value,
+			[`${prefixCls.value}-count`]: !isDotRef.value,
+			[`${prefixCls.value}-count-sm`]: props.size === "small",
+			[`${prefixCls.value}-multiple-words`]: !isDotRef.value && displayCount.value && displayCount.value.toString().length > 1,
+			[`${prefixCls.value}-status-${props.status}`]: !!props.status,
+			[`${prefixCls.value}-color-${props.color}`]: isInternalColor.value
+		});
+		const scrollNumberPrefixCls = getPrefixCls("scroll-number", props.scrollNumberPrefixCls);
+		const livingVNode = livingCount && typeof livingCount === "object" ? livingCount : null;
+		const clonedNode = livingVNode ? cloneVNode(livingVNode, { style: mergedStyle.value }) : void 0;
+		const scrollNumberStyle = {};
+		if (props.color && !isInternalColor.value) scrollNumberStyle.background = props.color;
+		return createVNode("span", mergeProps(restAttrs, {
+			"ref": badgeRef,
+			"class": badgeClassName,
+			"style": mergedStyles.value.root
+		}), [
+			children,
+			createVNode(Transition, getTransitionProps(`${prefixCls.value}-zoom`, { appear: false }), { default: () => !isHidden.value ? createVNode(ScrollNumber_default, {
+				"key": "scrollNumber",
+				"prefixCls": scrollNumberPrefixCls,
+				"show": !isHidden.value,
+				"class": scrollNumberCls,
+				"count": displayCount.value,
+				"title": titleNode,
+				"style": [
+					mergedStyles.value?.indicator,
+					mergedStyle.value,
+					scrollNumberStyle
+				]
+			}, _isSlot(clonedNode) ? clonedNode : { default: () => [clonedNode] }) : null }),
+			renderStatusText()
+		]);
+	};
+}, {
+	props: /* @__PURE__ */ mergeDefaults({
+		count: {
+			type: [
+				Function,
+				Boolean,
+				String,
+				Number,
+				null,
+				Object
+			],
+			required: false
+		},
+		showZero: {
+			type: Boolean,
+			required: false
+		},
+		overflowCount: {
+			type: Number,
+			required: false
+		},
+		dot: {
+			type: Boolean,
+			required: false
+		},
+		scrollNumberPrefixCls: {
+			type: String,
+			required: false
+		},
+		status: {
+			type: String,
+			required: false
+		},
+		color: { required: false },
+		text: {
+			type: [
+				Function,
+				Boolean,
+				String,
+				Number,
+				null,
+				Object
+			],
+			required: false
+		},
+		size: {
+			type: String,
+			required: false
+		},
+		offset: {
+			type: Array,
+			required: false
+		},
+		title: {
+			type: String,
+			required: false
+		},
+		classes: {
+			type: [Object, Function],
+			required: false
+		},
+		styles: {
+			type: [Object, Function],
+			required: false
+		},
+		rootClass: {
+			type: String,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		}
+	}, {
+		count: null,
+		overflowCount: 99,
+		size: "default"
+	}),
+	name: "ABadge",
+	inheritAttrs: false
+});
+const Badge = InternalBadge;
+Badge.Ribbon = Ribbon_default;
+Badge.install = (app) => {
+	app.component(InternalBadge.name, Badge);
+	app.component(Ribbon_default.name, Ribbon_default);
+};
+var badge_default = Badge;
+
+//#endregion
+export { badge_default as default };

package/dist/badge/style/index.d.ts

@@ -0,0 +1,49 @@
+import "../../theme/internal.js";
+import "vue";
+
+//#region src/badge/style/index.d.ts
+/** Component only token. Which will handle additional calculation of alias token */
+interface ComponentToken {
+  /**
+   * @desc 徽标 z-index
+   * @descEN z-index of badge
+   */
+  indicatorZIndex: number | string;
+  /**
+   * @desc 徽标高度
+   * @descEN Height of badge
+   */
+  indicatorHeight: number | string;
+  /**
+   * @desc 小号徽标高度
+   * @descEN Height of small badge
+   */
+  indicatorHeightSM: number | string;
+  /**
+   * @desc 点状徽标尺寸
+   * @descEN Size of dot badge
+   */
+  dotSize: number;
+  /**
+   * @desc 徽标文本尺寸
+   * @descEN Font size of badge text
+   */
+  textFontSize: number;
+  /**
+   * @desc 小号徽标文本尺寸
+   * @descEN Font size of small badge text
+   */
+  textFontSizeSM: number;
+  /**
+   * @desc 徽标文本粗细
+   * @descEN Font weight of badge text
+   */
+  textFontWeight: number | string;
+  /**
+   * @desc 状态徽标尺寸
+   * @descEN Size of status badge
+   */
+  statusSize: number;
+}
+//#endregion
+export { ComponentToken };

package/dist/badge/style/index.js

@@ -0,0 +1,260 @@
+import genPresetColor from "../../theme/util/genPresetColor.js";
+import { resetComponent } from "../../style/index.js";
+import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
+import { mergeToken } from "../../theme/internal.js";
+import { Keyframes, unit } from "@antdv-next/cssinjs";
+
+//#region src/badge/style/index.ts
+const antStatusProcessing = new Keyframes("antStatusProcessing", {
+	"0%": {
+		transform: "scale(0.8)",
+		opacity: .5
+	},
+	"100%": {
+		transform: "scale(2.4)",
+		opacity: 0
+	}
+});
+const antZoomBadgeIn = new Keyframes("antZoomBadgeIn", {
+	"0%": {
+		transform: "scale(0) translate(50%, -50%)",
+		opacity: 0
+	},
+	"100%": { transform: "scale(1) translate(50%, -50%)" }
+});
+const antZoomBadgeOut = new Keyframes("antZoomBadgeOut", {
+	"0%": { transform: "scale(1) translate(50%, -50%)" },
+	"100%": {
+		transform: "scale(0) translate(50%, -50%)",
+		opacity: 0
+	}
+});
+const antNoWrapperZoomBadgeIn = new Keyframes("antNoWrapperZoomBadgeIn", {
+	"0%": {
+		transform: "scale(0)",
+		opacity: 0
+	},
+	"100%": { transform: "scale(1)" }
+});
+const antNoWrapperZoomBadgeOut = new Keyframes("antNoWrapperZoomBadgeOut", {
+	"0%": { transform: "scale(1)" },
+	"100%": {
+		transform: "scale(0)",
+		opacity: 0
+	}
+});
+const antBadgeLoadingCircle = new Keyframes("antBadgeLoadingCircle", {
+	"0%": { transformOrigin: "50%" },
+	"100%": {
+		transform: "translate(50%, -50%) rotate(360deg)",
+		transformOrigin: "50%"
+	}
+});
+const genSharedBadgeStyle = (token) => {
+	const { componentCls, iconCls, antCls, badgeShadowSize, textFontSize, textFontSizeSM, statusSize, dotSize, textFontWeight, indicatorHeight, indicatorHeightSM, marginXS, calc } = token;
+	const numberPrefixCls = `${antCls}-scroll-number`;
+	const colorPreset = genPresetColor(token, (colorKey, { darkColor }) => ({ [`&${componentCls} ${componentCls}-color-${colorKey}`]: {
+		"background": darkColor,
+		[`&:not(${componentCls}-count)`]: { color: darkColor },
+		"a:hover &": { background: darkColor }
+	} }));
+	return { [componentCls]: {
+		...resetComponent(token),
+		"position": "relative",
+		"display": "inline-block",
+		"width": "fit-content",
+		"lineHeight": 1,
+		[`${componentCls}-count`]: {
+			"display": "inline-flex",
+			"justifyContent": "center",
+			"zIndex": token.indicatorZIndex,
+			"minWidth": indicatorHeight,
+			"height": indicatorHeight,
+			"color": token.badgeTextColor,
+			"fontWeight": textFontWeight,
+			"fontSize": textFontSize,
+			"lineHeight": unit(indicatorHeight),
+			"whiteSpace": "nowrap",
+			"textAlign": "center",
+			"background": token.badgeColor,
+			"borderRadius": calc(indicatorHeight).div(2).equal(),
+			"boxShadow": `0 0 0 ${unit(badgeShadowSize)} ${token.badgeShadowColor}`,
+			"transition": `background ${token.motionDurationMid}`,
+			"a": { color: token.badgeTextColor },
+			"a:hover": { color: token.badgeTextColor },
+			"a:hover &": { background: token.badgeColorHover }
+		},
+		[`${componentCls}-count-sm`]: {
+			minWidth: indicatorHeightSM,
+			height: indicatorHeightSM,
+			fontSize: textFontSizeSM,
+			lineHeight: unit(indicatorHeightSM),
+			borderRadius: calc(indicatorHeightSM).div(2).equal()
+		},
+		[`${componentCls}-multiple-words`]: {
+			padding: `0 ${unit(token.paddingXS)}`,
+			bdi: { unicodeBidi: "plaintext" }
+		},
+		[`${componentCls}-dot`]: {
+			zIndex: token.indicatorZIndex,
+			width: dotSize,
+			minWidth: dotSize,
+			height: dotSize,
+			background: token.badgeColor,
+			borderRadius: "100%",
+			boxShadow: `0 0 0 ${unit(badgeShadowSize)} ${token.badgeShadowColor}`
+		},
+		[`${componentCls}-count, ${componentCls}-dot, ${numberPrefixCls}-custom-component`]: {
+			position: "absolute",
+			top: 0,
+			insetInlineEnd: 0,
+			transform: "translate(50%, -50%)",
+			transformOrigin: "100% 0%",
+			[`&${iconCls}-spin`]: {
+				animationName: antBadgeLoadingCircle,
+				animationDuration: "1s",
+				animationIterationCount: "infinite",
+				animationTimingFunction: "linear"
+			}
+		},
+		[`&${componentCls}-status`]: {
+			lineHeight: "inherit",
+			verticalAlign: "baseline",
+			[`${componentCls}-status-dot`]: {
+				position: "relative",
+				top: -1,
+				display: "inline-block",
+				width: statusSize,
+				height: statusSize,
+				verticalAlign: "middle",
+				borderRadius: "50%"
+			},
+			[`${componentCls}-status-success`]: { backgroundColor: token.colorSuccess },
+			[`${componentCls}-status-processing`]: {
+				"overflow": "visible",
+				"color": token.colorInfo,
+				"backgroundColor": token.colorInfo,
+				"borderColor": "currentcolor",
+				"&::after": {
+					position: "absolute",
+					top: 0,
+					insetInlineStart: 0,
+					width: "100%",
+					height: "100%",
+					borderWidth: badgeShadowSize,
+					borderStyle: "solid",
+					borderColor: "inherit",
+					borderRadius: "50%",
+					animationName: antStatusProcessing,
+					animationDuration: token.badgeProcessingDuration,
+					animationIterationCount: "infinite",
+					animationTimingFunction: "ease-in-out",
+					content: "\"\""
+				}
+			},
+			[`${componentCls}-status-default`]: { backgroundColor: token.colorTextPlaceholder },
+			[`${componentCls}-status-error`]: { backgroundColor: token.colorError },
+			[`${componentCls}-status-warning`]: { backgroundColor: token.colorWarning },
+			[`${componentCls}-status-text`]: {
+				marginInlineStart: marginXS,
+				color: token.colorText,
+				fontSize: token.fontSize
+			}
+		},
+		...colorPreset,
+		[`${componentCls}-zoom-appear, ${componentCls}-zoom-enter`]: {
+			animationName: antZoomBadgeIn,
+			animationDuration: token.motionDurationSlow,
+			animationTimingFunction: token.motionEaseOutBack,
+			animationFillMode: "both"
+		},
+		[`${componentCls}-zoom-leave`]: {
+			animationName: antZoomBadgeOut,
+			animationDuration: token.motionDurationSlow,
+			animationTimingFunction: token.motionEaseOutBack,
+			animationFillMode: "both"
+		},
+		[`&${componentCls}-not-a-wrapper`]: {
+			[`${componentCls}-zoom-appear, ${componentCls}-zoom-enter`]: {
+				animationName: antNoWrapperZoomBadgeIn,
+				animationDuration: token.motionDurationSlow,
+				animationTimingFunction: token.motionEaseOutBack
+			},
+			[`${componentCls}-zoom-leave`]: {
+				animationName: antNoWrapperZoomBadgeOut,
+				animationDuration: token.motionDurationSlow,
+				animationTimingFunction: token.motionEaseOutBack
+			},
+			[`&:not(${componentCls}-status)`]: { verticalAlign: "middle" },
+			[`${numberPrefixCls}-custom-component, ${componentCls}-count`]: { transform: "none" },
+			[`${numberPrefixCls}-custom-component, ${numberPrefixCls}`]: {
+				position: "relative",
+				top: "auto",
+				display: "block",
+				transformOrigin: "50% 50%"
+			}
+		},
+		[numberPrefixCls]: {
+			overflow: "hidden",
+			transition: `all ${token.motionDurationMid} ${token.motionEaseOutBack}`,
+			[`${numberPrefixCls}-only`]: {
+				position: "relative",
+				display: "inline-block",
+				height: indicatorHeight,
+				transition: `all ${token.motionDurationSlow} ${token.motionEaseOutBack}`,
+				WebkitTransformStyle: "preserve-3d",
+				WebkitBackfaceVisibility: "hidden",
+				[`> p${numberPrefixCls}-only-unit`]: {
+					height: indicatorHeight,
+					margin: 0,
+					WebkitTransformStyle: "preserve-3d",
+					WebkitBackfaceVisibility: "hidden"
+				}
+			},
+			[`${numberPrefixCls}-symbol`]: { verticalAlign: "top" }
+		},
+		"&-rtl": {
+			direction: "rtl",
+			[`${componentCls}-count, ${componentCls}-dot, ${numberPrefixCls}-custom-component`]: { transform: "translate(-50%, -50%)" }
+		}
+	} };
+};
+const prepareToken = (token) => {
+	const { fontHeight, lineWidth, marginXS, colorBorderBg } = token;
+	const badgeFontHeight = fontHeight;
+	const badgeShadowSize = lineWidth;
+	const badgeTextColor = token.colorTextLightSolid;
+	const badgeColor = token.colorError;
+	const badgeColorHover = token.colorErrorHover;
+	return mergeToken(token, {
+		badgeFontHeight,
+		badgeShadowSize,
+		badgeTextColor,
+		badgeColor,
+		badgeColorHover,
+		badgeShadowColor: colorBorderBg,
+		badgeProcessingDuration: "1.2s",
+		badgeRibbonOffset: marginXS,
+		badgeRibbonCornerTransform: "scaleY(0.75)",
+		badgeRibbonCornerFilter: `brightness(75%)`
+	});
+};
+const prepareComponentToken = (token) => {
+	const { fontSize, lineHeight, fontSizeSM, lineWidth } = token;
+	return {
+		indicatorZIndex: "auto",
+		indicatorHeight: Math.round(fontSize * lineHeight) - 2 * lineWidth,
+		indicatorHeightSM: fontSize,
+		dotSize: fontSizeSM / 2,
+		textFontSize: fontSizeSM,
+		textFontSizeSM: fontSizeSM,
+		textFontWeight: "normal",
+		statusSize: fontSizeSM / 2
+	};
+};
+var style_default = genStyleHooks("Badge", (token) => {
+	return genSharedBadgeStyle(prepareToken(token));
+}, prepareComponentToken);
+
+//#endregion
+export { style_default as default, prepareComponentToken, prepareToken };

package/dist/badge/style/ribbon.js

@@ -0,0 +1,69 @@
+import genPresetColor from "../../theme/util/genPresetColor.js";
+import { resetComponent } from "../../style/index.js";
+import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
+import "../../theme/internal.js";
+import { prepareComponentToken, prepareToken } from "./index.js";
+import { unit } from "@antdv-next/cssinjs";
+
+//#region src/badge/style/ribbon.ts
+const genRibbonStyle = (token) => {
+	const { antCls, badgeFontHeight, marginXS, badgeRibbonOffset, calc } = token;
+	const ribbonPrefixCls = `${antCls}-ribbon`;
+	const ribbonWrapperPrefixCls = `${antCls}-ribbon-wrapper`;
+	const statusRibbonPreset = genPresetColor(token, (colorKey, { darkColor }) => ({ [`&${ribbonPrefixCls}-color-${colorKey}`]: {
+		background: darkColor,
+		color: darkColor
+	} }));
+	return {
+		[ribbonWrapperPrefixCls]: { position: "relative" },
+		[ribbonPrefixCls]: {
+			...resetComponent(token),
+			"position": "absolute",
+			"top": marginXS,
+			"padding": `0 ${unit(token.paddingXS)}`,
+			"color": token.colorPrimary,
+			"lineHeight": unit(badgeFontHeight),
+			"whiteSpace": "nowrap",
+			"backgroundColor": token.colorPrimary,
+			"borderRadius": token.borderRadiusSM,
+			[`${ribbonPrefixCls}-text`]: { color: token.badgeTextColor },
+			[`${ribbonPrefixCls}-corner`]: {
+				position: "absolute",
+				top: "100%",
+				width: badgeRibbonOffset,
+				height: badgeRibbonOffset,
+				color: "currentcolor",
+				border: `${unit(calc(badgeRibbonOffset).div(2).equal())} solid`,
+				transform: token.badgeRibbonCornerTransform,
+				transformOrigin: "top",
+				filter: token.badgeRibbonCornerFilter
+			},
+			...statusRibbonPreset,
+			[`&${ribbonPrefixCls}-placement-end`]: {
+				insetInlineEnd: calc(badgeRibbonOffset).mul(-1).equal(),
+				borderEndEndRadius: 0,
+				[`${ribbonPrefixCls}-corner`]: {
+					insetInlineEnd: 0,
+					borderInlineEndColor: "transparent",
+					borderBlockEndColor: "transparent"
+				}
+			},
+			[`&${ribbonPrefixCls}-placement-start`]: {
+				insetInlineStart: calc(badgeRibbonOffset).mul(-1).equal(),
+				borderEndStartRadius: 0,
+				[`${ribbonPrefixCls}-corner`]: {
+					insetInlineStart: 0,
+					borderBlockEndColor: "transparent",
+					borderInlineStartColor: "transparent"
+				}
+			},
+			"&-rtl": { direction: "rtl" }
+		}
+	};
+};
+var ribbon_default = genStyleHooks(["Badge", "Ribbon"], (token) => {
+	return genRibbonStyle(prepareToken(token));
+}, prepareComponentToken);
+
+//#endregion
+export { ribbon_default as default };