antdv-next 0.0.0 → 1.0.0-alpha.1

package/dist/layout/Sider.d.ts

@@ -0,0 +1,33 @@
+import { CSSProperties, Ref, SlotsType } from "vue";
+
+//#region src/layout/Sider.d.ts
+interface SiderContextProps {
+  siderCollapsed?: Ref<boolean>;
+}
+declare function useSiderCtx(): SiderContextProps;
+type CollapseType = 'clickTrigger' | 'responsive';
+type SiderTheme = 'light' | 'dark';
+interface SiderProps {
+  prefixCls?: string;
+  collapsible?: boolean;
+  collapsed?: boolean;
+  defaultCollapsed?: boolean;
+  reverseArrow?: boolean;
+  zeroWidthTriggerStyle?: CSSProperties;
+  width?: number | string;
+  collapsedWidth?: number | string;
+  breakpoint?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+  theme?: SiderTheme;
+}
+interface SiderEmits {
+  'collapse': (collapsed: boolean, type: CollapseType) => void;
+  'update:collapsed': (collapsed: boolean) => void;
+  'breakpoint': (broken: boolean) => void;
+  [key: string]: (...args: any[]) => any;
+}
+interface SiderSlots {
+  trigger: () => any;
+  default: () => any;
+}
+//#endregion
+export { SiderEmits, SiderProps, SiderSlots, useSiderCtx };

package/dist/layout/Sider.js

@@ -0,0 +1,172 @@
+import { useBaseConfig } from "../config-provider/context.js";
+import { getSlotPropsFnRun } from "../_util/tools.js";
+import { addMediaQueryListener, removeMediaQueryListener } from "../_util/mediaQueryUtil.js";
+import { useLayoutCtx } from "./context.js";
+import sider_default from "./style/sider.js";
+import { computed, createVNode, defineComponent, inject, mergeDefaults, mergeProps, onBeforeUnmount, provide, ref, shallowRef, watch, watchEffect } from "vue";
+import { classNames } from "@v-c/util";
+import { BarsOutlined, LeftOutlined, RightOutlined } from "@antdv-next/icons";
+import { omit } from "es-toolkit";
+
+//#region src/layout/Sider.tsx
+const dimensionMaxMap = {
+	xs: "479.98px",
+	sm: "575.98px",
+	md: "767.98px",
+	lg: "991.98px",
+	xl: "1199.98px",
+	xxl: "1599.98px"
+};
+function isNumeric(val) {
+	return !Number.isNaN(Number.parseFloat(val)) && Number.isFinite(Number(val));
+}
+const SiderContextKey = Symbol("SiderContext");
+function useSiderProvider(props) {
+	provide(SiderContextKey, props);
+}
+function useSiderCtx() {
+	return inject(SiderContextKey, { siderCollapsed: ref(false) });
+}
+const generateId = (() => {
+	let i = 0;
+	return (prefix = "") => {
+		i += 1;
+		return `${prefix}${i}`;
+	};
+})();
+const Sider = /* @__PURE__ */ defineComponent((props, { emit, slots, attrs }) => {
+	const { siderHook } = useLayoutCtx();
+	const collapsed = shallowRef(false);
+	watchEffect(() => {
+		collapsed.value = !!(props.collapsed === void 0 ? props.defaultCollapsed : props.collapsed);
+	});
+	const below = shallowRef(false);
+	const handleSetCollapsed = (value, type) => {
+		if (props.collapsed === void 0) collapsed.value = value;
+		emit("collapse", value, type);
+		emit("update:collapsed", value);
+	};
+	const { prefixCls, direction } = useBaseConfig("layout-sider", props);
+	const [hashId, cssVarCls] = sider_default(prefixCls);
+	const responsiveHandler = (mql) => {
+		below.value = mql.matches;
+		emit("breakpoint", mql.matches);
+		if (!collapsed.value !== mql.matches) handleSetCollapsed(mql.matches, "responsive");
+	};
+	watch(() => props.breakpoint, (_n, _ol, onCleanup) => {
+		let mql;
+		const breakpoint = props.breakpoint;
+		if (typeof window?.matchMedia !== "undefined" && breakpoint && breakpoint in dimensionMaxMap) {
+			mql = window.matchMedia(`screen and (max-width: ${dimensionMaxMap[breakpoint]})`);
+			addMediaQueryListener(mql, responsiveHandler);
+			responsiveHandler(mql);
+		}
+		onCleanup(() => {
+			removeMediaQueryListener(mql, responsiveHandler);
+		});
+	}, { immediate: true });
+	const uniqueId = generateId("ant-sider-");
+	siderHook.addSider(uniqueId);
+	onBeforeUnmount(() => {
+		siderHook.removeSider(uniqueId);
+	});
+	const toggle = () => {
+		handleSetCollapsed(!collapsed.value, "clickTrigger");
+	};
+	const rawWidth = computed(() => {
+		return collapsed.value ? props.collapsedWidth : props.width;
+	});
+	const siderWidth = computed(() => isNumeric(rawWidth.value) ? `${rawWidth.value}px` : String(rawWidth.value));
+	useSiderProvider({ siderCollapsed: collapsed });
+	return () => {
+		const { collapsedWidth, reverseArrow, zeroWidthTriggerStyle, theme, collapsible } = props;
+		const trigger = getSlotPropsFnRun(slots, props, "trigger");
+		const zeroWidthTrigger = Number.parseFloat(String(collapsedWidth || 0)) === 0 ? createVNode("span", {
+			"onClick": toggle,
+			"class": classNames(`${prefixCls.value}-zero-width-trigger`, `${prefixCls.value}-zero-width-trigger-${reverseArrow ? "right" : "left"}`),
+			"style": zeroWidthTriggerStyle
+		}, [trigger || createVNode(BarsOutlined, null, null)]) : null;
+		const reverseIcon = direction.value === "rtl" === !reverseArrow;
+		const defaultTrigger = {
+			expanded: reverseIcon ? createVNode(RightOutlined, null, null) : createVNode(LeftOutlined, null, null),
+			collapsed: reverseIcon ? createVNode(LeftOutlined, null, null) : createVNode(RightOutlined, null, null)
+		}[collapsed.value ? "collapsed" : "expanded"];
+		const triggerDom = trigger != null ? zeroWidthTrigger || createVNode("div", {
+			"class": `${prefixCls.value}-trigger`,
+			"onClick": toggle,
+			"style": { width: `${siderWidth.value}` }
+		}, [trigger || defaultTrigger]) : null;
+		const divStyle = {
+			flex: `0 0 ${siderWidth.value}`,
+			maxWidth: `${siderWidth.value}`,
+			minWidth: `${siderWidth.value}`,
+			width: `${siderWidth.value}`
+		};
+		const siderCls = classNames(prefixCls.value, `${prefixCls.value}-${theme}`, {
+			[`${prefixCls.value}-collapsed`]: collapsed.value,
+			[`${prefixCls.value}-has-trigger`]: collapsible && trigger !== null && !zeroWidthTrigger,
+			[`${prefixCls.value}-below`]: !!below,
+			[`${prefixCls.value}-zero-width`]: Number.parseFloat(siderWidth.value) === 0
+		}, attrs.class, hashId.value, cssVarCls.value);
+		return createVNode("aside", mergeProps({ "class": siderCls }, omit(attrs, ["style", "class"]), { "style": [attrs.style, divStyle] }), [createVNode("div", { "class": `${prefixCls.value}-children` }, [slots?.default?.()]), collapsible || below.value && zeroWidthTrigger ? triggerDom : null]);
+	};
+}, {
+	emits: [
+		"collapse",
+		"update:collapsed",
+		"breakpoint"
+	],
+	props: /* @__PURE__ */ mergeDefaults({
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		collapsible: {
+			type: Boolean,
+			required: false
+		},
+		collapsed: {
+			type: Boolean,
+			required: false
+		},
+		defaultCollapsed: {
+			type: Boolean,
+			required: false
+		},
+		reverseArrow: {
+			type: Boolean,
+			required: false
+		},
+		zeroWidthTriggerStyle: {
+			type: Object,
+			required: false
+		},
+		width: {
+			type: [Number, String],
+			required: false
+		},
+		collapsedWidth: {
+			type: [Number, String],
+			required: false
+		},
+		breakpoint: {
+			type: String,
+			required: false
+		},
+		theme: {
+			type: String,
+			required: false
+		}
+	}, {
+		theme: "dark",
+		width: 200,
+		collapsedWidth: 80,
+		collapsed: void 0
+	}),
+	name: "ALayoutSider",
+	inheritAttrs: false
+});
+var Sider_default = Sider;
+
+//#endregion
+export { Sider_default as default, useSiderCtx };

package/dist/layout/context.js

@@ -0,0 +1,16 @@
+import { inject, provide } from "vue";
+
+//#region src/layout/context.ts
+const LayoutContextSymbol = Symbol("LayoutContext");
+function useLayoutProvider(props) {
+	provide(LayoutContextSymbol, props);
+}
+function useLayoutCtx() {
+	return inject(LayoutContextSymbol, { siderHook: {
+		addSider: () => null,
+		removeSider: () => null
+	} });
+}
+
+//#endregion
+export { useLayoutCtx, useLayoutProvider };

package/dist/layout/hooks/useHasSider.js

@@ -0,0 +1,9 @@
+//#region src/layout/hooks/useHasSider.ts
+function useHasSider(siders, children, hasSider) {
+	if (typeof hasSider === "boolean") return hasSider;
+	if (siders.length) return true;
+	return (Array.isArray(children) ? children : [children]).some((node) => node?.type?.name === "ALayoutSider");
+}
+
+//#endregion
+export { useHasSider as default };

package/dist/layout/index.d.ts

@@ -0,0 +1,14 @@
+import { BasicProps, Layout } from "./layout.js";
+import { SiderEmits, SiderProps, SiderSlots, useSiderCtx } from "./Sider.js";
+import * as vue107 from "vue";
+
+//#region src/layout/index.d.ts
+declare const useLayoutSider: typeof useSiderCtx;
+declare const LayoutHeader: vue107.DefineSetupFnComponent<BasicProps, {}, {}, BasicProps & {}, vue107.PublicProps>;
+declare const LayoutFooter: vue107.DefineSetupFnComponent<BasicProps, {}, {}, BasicProps & {}, vue107.PublicProps>;
+declare const LayoutContent: vue107.DefineSetupFnComponent<BasicProps, {}, {}, BasicProps & {}, vue107.PublicProps>;
+declare const LayoutSider: vue107.DefineSetupFnComponent<SiderProps, SiderEmits, vue107.SlotsType<SiderSlots>, SiderProps & {
+  [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, vue107.PublicProps>;
+//#endregion
+export { LayoutContent, LayoutFooter, LayoutHeader, LayoutSider, useLayoutSider };

package/dist/layout/index.js

@@ -0,0 +1,21 @@
+import Sider_default, { useSiderCtx } from "./Sider.js";
+import layout_default, { Content, Footer, Header } from "./layout.js";
+
+//#region src/layout/index.tsx
+const useLayoutSider = useSiderCtx;
+layout_default.install = (app) => {
+	app.component(layout_default.name, layout_default);
+	app.component(Header.name, Header);
+	app.component(Footer.name, Footer);
+	app.component(Content.name, Content);
+	app.component(Sider_default.name, Sider_default);
+	return app;
+};
+const LayoutHeader = Header;
+const LayoutFooter = Footer;
+const LayoutContent = Content;
+const LayoutSider = Sider_default;
+var layout_default$1 = layout_default;
+
+//#endregion
+export { LayoutContent, LayoutFooter, LayoutHeader, LayoutSider, layout_default$1 as default, useLayoutSider };

package/dist/layout/layout.d.ts

@@ -0,0 +1,12 @@
+import { ComponentBaseProps } from "../config-provider/context.js";
+import * as vue269 from "vue";
+
+//#region src/layout/layout.d.ts
+
+interface BasicProps extends ComponentBaseProps {
+  suffixCls?: string;
+  hasSider?: boolean;
+}
+declare const Layout: vue269.DefineSetupFnComponent<BasicProps, {}, {}, BasicProps & {}, vue269.PublicProps>;
+//#endregion
+export { BasicProps, Layout };

package/dist/layout/layout.js

@@ -0,0 +1,151 @@
+import { useBaseConfig, useComponentConfig } from "../config-provider/context.js";
+import { useLayoutProvider } from "./context.js";
+import style_default from "./style/index.js";
+import useHasSider from "./hooks/useHasSider.js";
+import { createVNode, defineComponent, mergeDefaults, mergeProps, ref } from "vue";
+import { classNames } from "@v-c/util";
+import { filterEmpty } from "@v-c/util/dist/props-util";
+
+//#region src/layout/layout.tsx
+const basicDefaultProps = { hasSider: void 0 };
+function generator({ suffixCls, tagName, displayName }) {
+	return (BasicComponent) => {
+		return /* @__PURE__ */ defineComponent((props, { attrs, slots }) => {
+			return () => {
+				return createVNode(BasicComponent, mergeProps(props, {
+					"suffixCls": props?.suffixCls ?? suffixCls,
+					"tagName": tagName
+				}, attrs), slots);
+			};
+		}, {
+			props: /* @__PURE__ */ mergeDefaults({
+				suffixCls: {
+					type: String,
+					required: false
+				},
+				hasSider: {
+					type: Boolean,
+					required: false
+				},
+				rootClass: {
+					type: String,
+					required: false
+				},
+				prefixCls: {
+					type: String,
+					required: false
+				}
+			}, basicDefaultProps),
+			name: displayName,
+			inheritAttrs: false
+		});
+	};
+}
+const Basic = /* @__PURE__ */ defineComponent((props, { attrs, slots }) => {
+	const { prefixCls } = useBaseConfig("layout", props);
+	const [hashId, cssVarCls] = style_default(prefixCls);
+	return () => {
+		const { suffixCls, tagName, prefixCls: customizePrefixCls } = props;
+		const prefixWithSuffixCls = suffixCls ? `${prefixCls.value}-${suffixCls}` : prefixCls.value;
+		return createVNode(tagName, {
+			...attrs,
+			class: classNames(customizePrefixCls || prefixWithSuffixCls, attrs?.class, hashId.value, cssVarCls.value)
+		}, slots);
+	};
+}, { props: /* @__PURE__ */ mergeDefaults({
+	tagName: {
+		type: String,
+		required: true
+	},
+	suffixCls: {
+		type: String,
+		required: false
+	},
+	hasSider: {
+		type: Boolean,
+		required: false
+	},
+	rootClass: {
+		type: String,
+		required: false
+	},
+	prefixCls: {
+		type: String,
+		required: false
+	}
+}, basicDefaultProps) });
+const BasicLayout = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
+	const { direction, prefixCls } = useBaseConfig("layout", props);
+	const compCtx = useComponentConfig("layout");
+	const siders = ref([]);
+	const [hashId, cssVarCls] = style_default(prefixCls);
+	const addSider = (id) => {
+		siders.value = [...siders.value, id];
+	};
+	const removeSider = (id) => {
+		siders.value = siders.value.filter((currentId) => currentId !== id);
+	};
+	useLayoutProvider({ siderHook: {
+		addSider,
+		removeSider
+	} });
+	return () => {
+		const { hasSider, rootClass, tagName, suffixCls } = props;
+		const children = filterEmpty(slots?.default?.() || []);
+		const mergedHasSider = useHasSider(siders.value, children, hasSider);
+		const classString = classNames(prefixCls.value, {
+			[`${prefixCls.value}-has-sider`]: mergedHasSider,
+			[`${prefixCls.value}-rtl`]: direction.value === "rtl"
+		}, compCtx.value.class, attrs.class, rootClass, hashId.value, cssVarCls.value);
+		return createVNode(tagName, {
+			...attrs,
+			suffixCls,
+			class: classString,
+			style: [compCtx.value.style, attrs.style]
+		}, { default: () => children });
+	};
+}, { props: /* @__PURE__ */ mergeDefaults({
+	tagName: {
+		type: String,
+		required: true
+	},
+	suffixCls: {
+		type: String,
+		required: false
+	},
+	hasSider: {
+		type: Boolean,
+		required: false
+	},
+	rootClass: {
+		type: String,
+		required: false
+	},
+	prefixCls: {
+		type: String,
+		required: false
+	}
+}, basicDefaultProps) });
+const Layout = generator({
+	tagName: "div",
+	displayName: "ALayout"
+})(BasicLayout);
+const Header = generator({
+	suffixCls: "header",
+	tagName: "header",
+	displayName: "ALayoutHeader"
+})(Basic);
+const Footer = generator({
+	suffixCls: "footer",
+	tagName: "footer",
+	displayName: "ALayoutFooter"
+})(Basic);
+const Content = generator({
+	suffixCls: "content",
+	tagName: "main",
+	displayName: "ALayoutContent"
+})(Basic);
+var layout_default = Layout;
+
+//#endregion
+export { Content, Footer, Header, layout_default as default };

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

@@ -0,0 +1,94 @@
+import "../../theme/internal.js";
+import { CSSProperties } from "vue";
+
+//#region src/layout/style/index.d.ts
+interface ComponentToken {
+  /** @deprecated Use headerBg instead */
+  colorBgHeader: string;
+  /** @deprecated Use bodyBg instead */
+  colorBgBody: string;
+  /** @deprecated Use triggerBg instead */
+  colorBgTrigger: string;
+  /**
+   * @desc 主体部分背景色
+   * @descEN Background Color of body
+   */
+  bodyBg: string;
+  /**
+   * @desc 顶部背景色
+   * @descEN Background Color of header
+   */
+  headerBg: string;
+  /**
+   * @desc 顶部高度
+   * @descEN Height of header
+   */
+  headerHeight: number | string;
+  /**
+   * @desc 顶部内边距
+   * @descEN Padding of header
+   */
+  headerPadding: CSSProperties['padding'];
+  /**
+   * @desc 顶部文字颜色
+   * @descEN Text color of header
+   */
+  headerColor: string;
+  /**
+   * @desc 页脚内边距
+   * @descEN Padding of footer
+   */
+  footerPadding: CSSProperties['padding'];
+  /**
+   * @desc 页脚背景色
+   * @descEN Background Color of footer
+   */
+  footerBg: string;
+  /**
+   * @desc 侧边栏背景色
+   * @descEN Background Color of sider
+   */
+  siderBg: string;
+  /**
+   * @desc 侧边栏开关高度
+   * @descEN Height of sider trigger
+   */
+  triggerHeight: number | string;
+  /**
+   * @desc 侧边栏开关背景色
+   * @descEN Background Color of sider trigger
+   */
+  triggerBg: string;
+  /**
+   * @desc 侧边栏开关颜色
+   * @descEN Color of sider trigger
+   */
+  triggerColor: string;
+  /**
+   * @desc collapse 为 0 时侧边栏开关宽度
+   * @descEN Width of sider trigger when collapse is 0
+   */
+  zeroTriggerWidth: number;
+  /**
+   * @desc collapse 为 0 时侧边栏开关高度
+   * @descEN Height of sider trigger when collapse is 0
+   */
+  zeroTriggerHeight: number;
+  /**
+   * @desc 亮色主题侧边栏背景色
+   * @descEN Background Color of light theme sider
+   */
+  lightSiderBg: string;
+  /**
+   * @desc 亮色主题侧边栏开关背景色
+   * @descEN Background Color of light theme sider trigger
+   */
+  lightTriggerBg: string;
+  /**
+   * @desc 亮色主题侧边栏开关颜色
+   * @descEN Color of light theme sider trigger
+   */
+  lightTriggerColor: string;
+}
+//#endregion
+export { ComponentToken };

package/dist/layout/style/index.js

@@ -0,0 +1,77 @@
+import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
+import "../../theme/internal.js";
+import { unit } from "@antdv-next/cssinjs";
+
+//#region src/layout/style/index.ts
+const genLayoutStyle = (token) => {
+	const { antCls, componentCls, colorText, footerBg, headerHeight, headerPadding, headerColor, footerPadding, fontSize, bodyBg, headerBg } = token;
+	return {
+		[componentCls]: {
+			"display": "flex",
+			"flex": "auto",
+			"flexDirection": "column",
+			"minHeight": 0,
+			"background": bodyBg,
+			"&, *": { boxSizing: "border-box" },
+			[`&${componentCls}-has-sider`]: {
+				flexDirection: "row",
+				[`> ${componentCls}, > ${componentCls}-content`]: { width: 0 }
+			},
+			[`${componentCls}-header, &${componentCls}-footer`]: { flex: "0 0 auto" },
+			"&-rtl": { direction: "rtl" }
+		},
+		[`${componentCls}-header`]: {
+			height: headerHeight,
+			padding: headerPadding,
+			color: headerColor,
+			lineHeight: unit(headerHeight),
+			background: headerBg,
+			[`${antCls}-menu`]: { lineHeight: "inherit" }
+		},
+		[`${componentCls}-footer`]: {
+			padding: footerPadding,
+			color: colorText,
+			fontSize,
+			background: footerBg
+		},
+		[`${componentCls}-content`]: {
+			flex: "auto",
+			color: colorText,
+			minHeight: 0
+		}
+	};
+};
+const prepareComponentToken = (token) => {
+	const { colorBgLayout, controlHeight, controlHeightLG, colorText, controlHeightSM, marginXXS, colorTextLightSolid, colorBgContainer } = token;
+	const paddingInline = controlHeightLG * 1.25;
+	return {
+		colorBgHeader: "#001529",
+		colorBgBody: colorBgLayout,
+		colorBgTrigger: "#002140",
+		bodyBg: colorBgLayout,
+		headerBg: "#001529",
+		headerHeight: controlHeight * 2,
+		headerPadding: `0 ${paddingInline}px`,
+		headerColor: colorText,
+		footerPadding: `${controlHeightSM}px ${paddingInline}px`,
+		footerBg: colorBgLayout,
+		siderBg: "#001529",
+		triggerHeight: controlHeightLG + marginXXS * 2,
+		triggerBg: "#002140",
+		triggerColor: colorTextLightSolid,
+		zeroTriggerWidth: controlHeightLG,
+		zeroTriggerHeight: controlHeightLG,
+		lightSiderBg: colorBgContainer,
+		lightTriggerBg: colorBgContainer,
+		lightTriggerColor: colorText
+	};
+};
+const DEPRECATED_TOKENS = [
+	["colorBgBody", "bodyBg"],
+	["colorBgHeader", "headerBg"],
+	["colorBgTrigger", "triggerBg"]
+];
+var style_default = genStyleHooks("Layout", genLayoutStyle, prepareComponentToken, { deprecatedTokens: DEPRECATED_TOKENS });
+
+//#endregion
+export { DEPRECATED_TOKENS, style_default as default, prepareComponentToken };

package/dist/layout/style/sider.js

@@ -0,0 +1,82 @@
+import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
+import "../../theme/internal.js";
+import { DEPRECATED_TOKENS, prepareComponentToken } from "./index.js";
+import { unit } from "@antdv-next/cssinjs";
+
+//#region src/layout/style/sider.ts
+const genSiderStyle = (token) => {
+	const { componentCls, siderBg, motionDurationMid, motionDurationSlow, antCls, triggerHeight, triggerColor, triggerBg, headerHeight, zeroTriggerWidth, zeroTriggerHeight, borderRadiusLG, lightSiderBg, lightTriggerColor, lightTriggerBg, bodyBg } = token;
+	return { [componentCls]: {
+		"position": "relative",
+		"minWidth": 0,
+		"background": siderBg,
+		"transition": `all ${motionDurationMid}, background 0s`,
+		"&-has-trigger": { paddingBottom: triggerHeight },
+		"&-right": { order: 1 },
+		[`${componentCls}-children`]: {
+			height: "100%",
+			marginTop: -.1,
+			paddingTop: .1,
+			[`${antCls}-menu${antCls}-menu-inline-collapsed`]: { width: "auto" }
+		},
+		[`&-zero-width ${componentCls}-children`]: { overflow: "hidden" },
+		[`${componentCls}-trigger`]: {
+			position: "fixed",
+			bottom: 0,
+			zIndex: 1,
+			height: triggerHeight,
+			color: triggerColor,
+			lineHeight: unit(triggerHeight),
+			textAlign: "center",
+			background: triggerBg,
+			cursor: "pointer",
+			transition: `all ${motionDurationMid}`
+		},
+		[`${componentCls}-zero-width-trigger`]: {
+			"position": "absolute",
+			"top": headerHeight,
+			"insetInlineEnd": token.calc(zeroTriggerWidth).mul(-1).equal(),
+			"zIndex": 1,
+			"width": zeroTriggerWidth,
+			"height": zeroTriggerHeight,
+			"color": triggerColor,
+			"fontSize": token.fontSizeXL,
+			"display": "flex",
+			"alignItems": "center",
+			"justifyContent": "center",
+			"background": siderBg,
+			"borderRadius": `0 ${unit(borderRadiusLG)} ${unit(borderRadiusLG)} 0`,
+			"cursor": "pointer",
+			"transition": `background ${motionDurationSlow} ease`,
+			"&::after": {
+				position: "absolute",
+				inset: 0,
+				background: "transparent",
+				transition: `all ${motionDurationSlow}`,
+				content: "\"\""
+			},
+			"&:hover::after": { background: `rgba(255, 255, 255, 0.2)` },
+			"&-right": {
+				insetInlineStart: token.calc(zeroTriggerWidth).mul(-1).equal(),
+				borderRadius: `${unit(borderRadiusLG)} 0 0 ${unit(borderRadiusLG)}`
+			}
+		},
+		"&-light": {
+			background: lightSiderBg,
+			[`${componentCls}-trigger`]: {
+				color: lightTriggerColor,
+				background: lightTriggerBg
+			},
+			[`${componentCls}-zero-width-trigger`]: {
+				color: lightTriggerColor,
+				background: lightTriggerBg,
+				border: `1px solid ${bodyBg}`,
+				borderInlineStart: 0
+			}
+		}
+	} };
+};
+var sider_default = genStyleHooks(["Layout", "Sider"], genSiderStyle, prepareComponentToken, { deprecatedTokens: DEPRECATED_TOKENS });
+
+//#endregion
+export { sider_default as default };