@zerodep-dev/vue-tsx-pro-ui 0.0.0-stage → 0.2.0

package/dist/utils/style/item-styles.js

@@ -0,0 +1,79 @@
+import { t } from "../../config/theme/tokens.js";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/utils/style/item-styles.ts
+/**
+* 列表行的外观：菜单项、下拉选项、侧边导航项、表格行共用的悬停、高亮、选中、当前、危险、不可用。
+* 各组件只在这些之上补自己的差别（导航项的字重与内边距、菜单项的焦点环），状态的颜色只在这里定义。
+*
+*   sx: [itemStyles.row, itemStyles.hoverable, active && itemStyles.highlighted, disabled && itemStyles.disabled]
+*/
+/** 列表行的布局与各状态的颜色 */
+var itemStyles = css.create({
+	/** 一行：图标、文字、尾部内容横排；按钮、链接、div 都能用（去掉了按钮与链接的默认外观） */
+	row: {
+		boxSizing: "border-box",
+		display: "flex",
+		alignItems: "center",
+		gap: "_sm",
+		width: "_full",
+		minHeight: `max(${t.sizes.control}, ${t.sizes.minTarget})`,
+		margin: 0,
+		paddingBlock: "_xs",
+		paddingInline: "_sm",
+		borderWidth: 0,
+		borderRadius: "_sm",
+		backgroundColor: "transparent",
+		color: "_text",
+		fontFamily: "inherit",
+		fontSize: "inherit",
+		lineHeight: "_normal",
+		textAlign: "start",
+		textDecoration: "none",
+		cursor: "pointer",
+		userSelect: "none",
+		transition: `background-color ${t.durations.sm} ${t.easings.standard}, color ${t.durations.sm} ${t.easings.standard}`
+	},
+	/** 指针悬停时浅色底 */
+	hoverable: { backgroundColor: {
+		default: "transparent",
+		":hover": "_fillHover"
+	} },
+	/** 键盘高亮（aria-activedescendant 指着的选项）：与悬停同色 */
+	highlighted: { backgroundColor: "_fillHover" },
+	/** 已选（下拉选项）：品牌色文字 */
+	selected: { color: "_accentText" },
+	/** 当前（导航的当前页、表格的选中行）：品牌色浅底 */
+	current: {
+		backgroundColor: {
+			default: "_accentSoft",
+			":hover": "_accentSoftHover"
+		},
+		color: "_accentText"
+	},
+	/** 危险操作（删除）：红色文字，悬停浅红底 */
+	danger: {
+		color: "_dangerText",
+		backgroundColor: {
+			default: "transparent",
+			":hover": "_dangerSoft"
+		}
+	},
+	/** 不可用：不响应悬停（盖掉 hoverable、danger 的 :hover 底色；放在它们后面） */
+	disabled: {
+		opacity: "_disabled",
+		cursor: "not-allowed",
+		backgroundColor: "transparent"
+	},
+	/** 文字部分：占满剩余宽度，一行放不下时省略 */
+	label: {
+		flexGrow: 1,
+		minWidth: 0,
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap"
+	}
+});
+//#endregion
+export { itemStyles };
+
+//# sourceMappingURL=item-styles.js.map

package/dist/utils/style/item-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"item-styles.js","names":[],"sources":["../../../src/utils/style/item-styles.ts"],"sourcesContent":["/**\n * 列表行的外观：菜单项、下拉选项、侧边导航项、表格行共用的悬停、高亮、选中、当前、危险、不可用。\n * 各组件只在这些之上补自己的差别（导航项的字重与内边距、菜单项的焦点环），状态的颜色只在这里定义。\n *\n *   sx: [itemStyles.row, itemStyles.hoverable, active && itemStyles.highlighted, disabled && itemStyles.disabled]\n */\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { t } from '../../config/theme/tokens';\n\n/** 列表行的布局与各状态的颜色 */\nexport const itemStyles = css.create({\n  /** 一行：图标、文字、尾部内容横排；按钮、链接、div 都能用（去掉了按钮与链接的默认外观） */\n  row: {\n    boxSizing: 'border-box',\n    display: 'flex',\n    alignItems: 'center',\n    gap: '_sm',\n    width: '_full',\n    minHeight: `max(${t.sizes.control}, ${t.sizes.minTarget})`,\n    margin: 0,\n    paddingBlock: '_xs',\n    paddingInline: '_sm',\n    borderWidth: 0,\n    borderRadius: '_sm',\n    backgroundColor: 'transparent',\n    color: '_text',\n    fontFamily: 'inherit',\n    fontSize: 'inherit',\n    lineHeight: '_normal',\n    textAlign: 'start',\n    textDecoration: 'none',\n    cursor: 'pointer',\n    userSelect: 'none',\n    transition: `background-color ${t.durations.sm} ${t.easings.standard}, color ${t.durations.sm} ${t.easings.standard}`,\n  },\n  /** 指针悬停时浅色底 */\n  hoverable: { backgroundColor: { default: 'transparent', ':hover': '_fillHover' } },\n  /** 键盘高亮（aria-activedescendant 指着的选项）：与悬停同色 */\n  highlighted: { backgroundColor: '_fillHover' },\n  /** 已选（下拉选项）：品牌色文字 */\n  selected: { color: '_accentText' },\n  /** 当前（导航的当前页、表格的选中行）：品牌色浅底 */\n  current: {\n    backgroundColor: { default: '_accentSoft', ':hover': '_accentSoftHover' },\n    color: '_accentText',\n  },\n  /** 危险操作（删除）：红色文字，悬停浅红底 */\n  danger: {\n    color: '_dangerText',\n    backgroundColor: { default: 'transparent', ':hover': '_dangerSoft' },\n  },\n  /** 不可用：不响应悬停（盖掉 hoverable、danger 的 :hover 底色；放在它们后面） */\n  disabled: { opacity: '_disabled', cursor: 'not-allowed', backgroundColor: 'transparent' },\n  /** 文字部分：占满剩余宽度，一行放不下时省略 */\n  label: {\n    flexGrow: 1,\n    minWidth: 0,\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  },\n});\n"],"mappings":";;;;;;;;;;AAUA,IAAa,aAAa,IAAI,OAAO;;CAEnC,KAAK;EACH,WAAW;EACX,SAAS;EACT,YAAY;EACZ,KAAK;EACL,OAAO;EACP,WAAW,OAAO,EAAE,MAAM,QAAO,IAAK,EAAE,MAAM,UAAS;EACvD,QAAQ;EACR,cAAc;EACd,eAAe;EACf,aAAa;EACb,cAAc;EACd,iBAAiB;EACjB,OAAO;EACP,YAAY;EACZ,UAAU;EACV,YAAY;EACZ,WAAW;EACX,gBAAgB;EAChB,QAAQ;EACR,YAAY;EACZ,YAAY,oBAAoB,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ,SAAQ,UAAW,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ;CAC7G;;CAEA,WAAW,EAAE,iBAAiB;EAAE,SAAS;EAAe,UAAU;CAAa,EAAE;;CAEjF,aAAa,EAAE,iBAAiB,aAAa;;CAE7C,UAAU,EAAE,OAAO,cAAc;;CAEjC,SAAS;EACP,iBAAiB;GAAE,SAAS;GAAe,UAAU;EAAmB;EACxE,OAAO;CACT;;CAEA,QAAQ;EACN,OAAO;EACP,iBAAiB;GAAE,SAAS;GAAe,UAAU;EAAc;CACrE;;CAEA,UAAU;EAAE,SAAS;EAAa,QAAQ;EAAe,iBAAiB;CAAc;;CAExF,OAAO;EACL,UAAU;EACV,UAAU;EACV,UAAU;EACV,cAAc;EACd,YAAY;CACd;AACF,CAAC"}

package/dist/utils/style/markers.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 标记（defineMarker）：挂到祖先上，子元素按它的状态取样式，如 `css.when.ancestor(':hover', headingMarker)`。
+ */
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+/** 标题：悬停或内部聚焦时显示锚点链接 */
+export declare const headingMarker: css.Marker;

package/dist/utils/style/markers.js

@@ -0,0 +1,11 @@
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/utils/style/markers.ts
+/**
+* 标记（defineMarker）：挂到祖先上，子元素按它的状态取样式，如 `css.when.ancestor(':hover', headingMarker)`。
+*/
+/** 标题：悬停或内部聚焦时显示锚点链接 */
+var headingMarker = css.defineMarker("vtp-heading");
+//#endregion
+export { headingMarker };
+
+//# sourceMappingURL=markers.js.map

package/dist/utils/style/markers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"markers.js","names":[],"sources":["../../../src/utils/style/markers.ts"],"sourcesContent":["/**\n * 标记（defineMarker）：挂到祖先上，子元素按它的状态取样式，如 `css.when.ancestor(':hover', headingMarker)`。\n */\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\n\n/** 标题：悬停或内部聚焦时显示锚点链接 */\nexport const headingMarker = css.defineMarker('vtp-heading');\n"],"mappings":";;;;;;AAMA,IAAa,gBAAgB,IAAI,aAAa,aAAa"}

package/dist/utils/style/shimmer.d.ts

@@ -0,0 +1,20 @@
+/**
+ * 骨架的扫光（同 Ant Design Skeleton 的 active、MUI Skeleton 的 wave）：一道光带从起始边扫到结束边，表示内容正在来。
+ * 光带画在元素的 ::after 上，用 transform 平移（同 MUI）：合成器就能跑，不必每帧重绘元素；
+ * 原来移动背景位置时，满屏骨架每帧都要重绘。元素因此 contain: paint。光带颜色见 shimmerVars.highlight。
+ *
+ *   sx: [shimmerStyles.wave, { backgroundColor: … }]
+ *   sx: [shimmerStyles.wave, shimmerStyles.delay(`${index * SHIMMER_STAGGER}ms`)]   多行依次扫过，像一道波
+ *   sx: loaded && shimmerStyles.reveal                                                 骨架换成内容时淡入
+ *
+ * 扫光只是装饰：减少动态效果时不扫（静止的占位已经说明在加载）；从右到左的语言里反向扫。
+ */
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+/** 多行骨架相邻两行的扫光间隔（毫秒）：一屏七八行时整道波约一秒扫完 */
+export declare const SHIMMER_STAGGER = 120;
+/** 骨架扫光：wave、delay、reveal */
+export declare const shimmerStyles: Readonly<{
+    readonly wave: css.CompiledStyles;
+    readonly delay: (delay: string) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+    readonly reveal: css.CompiledStyles;
+}>;

package/dist/utils/style/shimmer.js

@@ -0,0 +1,58 @@
+import { shimmerVars } from "./vars.js";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/utils/style/shimmer.ts
+/**
+* 骨架的扫光（同 Ant Design Skeleton 的 active、MUI Skeleton 的 wave）：一道光带从起始边扫到结束边，表示内容正在来。
+* 光带画在元素的 ::after 上，用 transform 平移（同 MUI）：合成器就能跑，不必每帧重绘元素；
+* 原来移动背景位置时，满屏骨架每帧都要重绘。元素因此 contain: paint。光带颜色见 shimmerVars.highlight。
+*
+*   sx: [shimmerStyles.wave, { backgroundColor: … }]
+*   sx: [shimmerStyles.wave, shimmerStyles.delay(`${index * SHIMMER_STAGGER}ms`)]   多行依次扫过，像一道波
+*   sx: loaded && shimmerStyles.reveal                                                 骨架换成内容时淡入
+*
+* 扫光只是装饰：减少动态效果时不扫（静止的占位已经说明在加载）；从右到左的语言里反向扫。
+*/
+/** 多行骨架相邻两行的扫光间隔（毫秒）：一屏七八行时整道波约一秒扫完 */
+var SHIMMER_STAGGER = 120;
+var sweep = css.keyframes({
+	"0%": { transform: "translateX(-100%)" },
+	"70%": { transform: "translateX(100%)" },
+	"100%": { transform: "translateX(100%)" }
+});
+var fadeIn = css.keyframes({ from: { opacity: 0 } });
+/** 骨架扫光：wave、delay、reveal */
+var shimmerStyles = css.create({
+	wave: {
+		position: "relative",
+		contain: "paint",
+		transform: {
+			default: null,
+			":dir(rtl)": "scaleX(-1)"
+		},
+		"::after": {
+			content: "\"\"",
+			position: "absolute",
+			inset: 0,
+			backgroundImage: `linear-gradient(90deg, transparent 15%, ${shimmerVars.highlight} 50%, transparent 85%)`,
+			transform: "translateX(-100%)",
+			animationName: {
+				default: sweep,
+				_reducedMotion: "none"
+			},
+			animationDuration: "2s",
+			animationTimingFunction: "ease-in-out",
+			animationIterationCount: "infinite",
+			animationDelay: "inherit"
+		}
+	},
+	delay: (delay) => ({ animationDelay: delay }),
+	reveal: {
+		animationName: fadeIn,
+		animationDuration: "_durations.lg",
+		animationTimingFunction: "_easings.enter"
+	}
+});
+//#endregion
+export { SHIMMER_STAGGER, shimmerStyles };
+
+//# sourceMappingURL=shimmer.js.map

package/dist/utils/style/shimmer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shimmer.js","names":[],"sources":["../../../src/utils/style/shimmer.ts"],"sourcesContent":["/**\n * 骨架的扫光（同 Ant Design Skeleton 的 active、MUI Skeleton 的 wave）：一道光带从起始边扫到结束边，表示内容正在来。\n * 光带画在元素的 ::after 上，用 transform 平移（同 MUI）：合成器就能跑，不必每帧重绘元素；\n * 原来移动背景位置时，满屏骨架每帧都要重绘。元素因此 contain: paint。光带颜色见 shimmerVars.highlight。\n *\n *   sx: [shimmerStyles.wave, { backgroundColor: … }]\n *   sx: [shimmerStyles.wave, shimmerStyles.delay(`${index * SHIMMER_STAGGER}ms`)]   多行依次扫过，像一道波\n *   sx: loaded && shimmerStyles.reveal                                                 骨架换成内容时淡入\n *\n * 扫光只是装饰：减少动态效果时不扫（静止的占位已经说明在加载）；从右到左的语言里反向扫。\n */\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { shimmerVars } from './vars';\n\n/** 多行骨架相邻两行的扫光间隔（毫秒）：一屏七八行时整道波约一秒扫完 */\nexport const SHIMMER_STAGGER = 120;\n\n// 光带与元素一样宽：从元素外的起始侧（-100%）扫到结束侧（100%）；后 30% 的时间停在外面，两次之间有个间隔\nconst sweep = css.keyframes({\n  '0%': { transform: 'translateX(-100%)' },\n  '70%': { transform: 'translateX(100%)' },\n  '100%': { transform: 'translateX(100%)' },\n});\n\nconst fadeIn = css.keyframes({ from: { opacity: 0 } });\n\n/** 骨架扫光：wave、delay、reveal */\nexport const shimmerStyles = css.create({\n  wave: {\n    position: 'relative',\n    // 用绘制包含裁掉移出去的光带（按圆角裁）：不用 overflow，行内的骨架仍按文字基线对齐\n    // （overflow 不是 visible 时 inline-block 的基线落到底边，WebKit 里 clip 也是）\n    contain: 'paint',\n    // 从右到左的语言里整个元素镜像，光带就反向扫；骨架包着的内容本来就看不见，镜像没有影响\n    transform: { default: null, ':dir(rtl)': 'scaleX(-1)' },\n    '::after': {\n      content: '\"\"',\n      position: 'absolute',\n      inset: 0,\n      backgroundImage: `linear-gradient(90deg, transparent 15%, ${shimmerVars.highlight} 50%, transparent 85%)`,\n      transform: 'translateX(-100%)',\n      animationName: { default: sweep, _reducedMotion: 'none' },\n      // 循环的装饰动画不取 durations（那是一次性过渡的时长，减少动态效果时为 0）：\n      // 2 秒一轮，其中 1.4 秒扫过、0.6 秒停顿，接近 Ant Design、MUI 的节奏，不催促也不显得卡住\n      animationDuration: '2s',\n      // 先慢后快再慢：光带像被推过去，而不是匀速平移\n      animationTimingFunction: 'ease-in-out',\n      animationIterationCount: 'infinite',\n      // 延迟写在元素上（delay），这里继承\n      animationDelay: 'inherit',\n    },\n  },\n  // 每一轮都保持同样的间隔：几行骨架的光带始终一前一后\n  delay: (delay: string) => ({ animationDelay: delay }),\n  // 骨架换成内容（或内容换成骨架）时淡入，不硬切；减少动态效果时 durations 为 0\n  reveal: {\n    animationName: fadeIn,\n    animationDuration: '_durations.lg',\n    animationTimingFunction: '_easings.enter',\n  },\n});\n"],"mappings":";;;;;;;;;;;;;;;AAeA,IAAa,kBAAkB;AAG/B,IAAM,QAAQ,IAAI,UAAU;CAC1B,MAAM,EAAE,WAAW,oBAAoB;CACvC,OAAO,EAAE,WAAW,mBAAmB;CACvC,QAAQ,EAAE,WAAW,mBAAmB;AAC1C,CAAC;AAED,IAAM,SAAS,IAAI,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,CAAC;;AAGrD,IAAa,gBAAgB,IAAI,OAAO;CACtC,MAAM;EACJ,UAAU;EAGV,SAAS;EAET,WAAW;GAAE,SAAS;GAAM,aAAa;EAAa;EACtD,WAAW;GACT,SAAS;GACT,UAAU;GACV,OAAO;GACP,iBAAiB,2CAA2C,YAAY,UAAS;GACjF,WAAW;GACX,eAAe;IAAE,SAAS;IAAO,gBAAgB;GAAO;GAGxD,mBAAmB;GAEnB,yBAAyB;GACzB,yBAAyB;GAEzB,gBAAgB;EAClB;CACF;CAEA,QAAQ,WAAmB,EAAE,gBAAgB,MAAM;CAEnD,QAAQ;EACN,eAAe;EACf,mBAAmB;EACnB,yBAAyB;CAC3B;AACF,CAAC"}

package/dist/utils/style/styles.d.ts

@@ -0,0 +1,118 @@
+/**
+ * 组件共用的档位类型与样式表。档位与主题 tokens 同名（COMPONENTS.md §6.2）：
+ * 组件的 size、gap 等 prop 直接用这些类型，取值一一对应到 token。
+ * 样式表只放被多个组件复用的；只有一个组件用的写在组件里。
+ */
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { SxStyles } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+/** 圆角档位，对应主题的 radii（em，随字号缩放），括号里是默认主题的值；各组件的 radius 都用它 */
+export interface RadiusScale {
+    /** 直角：表格、密集列表里与直线对齐 */
+    none: unknown;
+    /** 0.15em */
+    xs: unknown;
+    /** 0.25em */
+    sm: unknown;
+    /** 0.4em：控件与按钮的默认 */
+    md: unknown;
+    /** 0.7em：卡片、面板 */
+    lg: unknown;
+    /** 1em */
+    xl: unknown;
+    /** 胶囊形（宽高相等时是圆形） */
+    full: unknown;
+}
+/** 圆角档位 */
+export type Radius = keyof RadiusScale;
+/** 圆角档位的样式：none、xs、sm、md、lg、xl、full */
+export declare const radiusStyles: Readonly<{
+    full: css.CompiledStyles;
+    lg: css.CompiledStyles;
+    md: css.CompiledStyles;
+    none: css.CompiledStyles;
+    sm: css.CompiledStyles;
+    xl: css.CompiledStyles;
+    xs: css.CompiledStyles;
+}>;
+/** 间距档位，对应主题的 space（em，随字号缩放），括号里是默认主题的值 */
+export interface SpaceScale {
+    /** 无间距（0） */
+    none: unknown;
+    /** 0.25em：图标与文字之间、紧凑的元素之间 */
+    xs: unknown;
+    /** 0.5em：控件内部、相关的元素之间 */
+    sm: unknown;
+    /** 0.75em：一组内容的元素之间 */
+    md: unknown;
+    /** 1em：表单项之间、段落之间 */
+    lg: unknown;
+    /** 1.5em：区块之间、卡片与对话框的内边距 */
+    xl: unknown;
+}
+/** 间距档位：五档之外可以是 none */
+export type Space = keyof SpaceScale;
+/**
+ * 一组按名字取的样式（如按变体分组的色调表 Record<变体, StyleTable<色调>>）。
+ * css.create 的结果不用写它：create 返回具名的 CompiledStyles，类型直接推导
+ */
+export type StyleTable<Key extends string> = Readonly<Record<Key, SxStyles>>;
+/** 间距 gap：Flex、Grid */
+export declare const gapStyles: Readonly<{
+    lg: css.CompiledStyles;
+    md: css.CompiledStyles;
+    none: css.CompiledStyles;
+    sm: css.CompiledStyles;
+    xl: css.CompiledStyles;
+    xs: css.CompiledStyles;
+}>;
+/** 两侧的内边距：列表条目与所在容器（弹出层、卡片）的内边距对齐 */
+export declare const paddingInlineStyles: Readonly<{
+    lg: css.CompiledStyles;
+    md: css.CompiledStyles;
+    none: css.CompiledStyles;
+    sm: css.CompiledStyles;
+    xl: css.CompiledStyles;
+    xs: css.CompiledStyles;
+}>;
+/** 行间距：Grid 单独指定时 */
+export declare const rowGapStyles: Readonly<{
+    lg: css.CompiledStyles;
+    md: css.CompiledStyles;
+    none: css.CompiledStyles;
+    sm: css.CompiledStyles;
+    xl: css.CompiledStyles;
+    xs: css.CompiledStyles;
+}>;
+/** 列间距：Grid 单独指定时 */
+export declare const columnGapStyles: Readonly<{
+    lg: css.CompiledStyles;
+    md: css.CompiledStyles;
+    none: css.CompiledStyles;
+    sm: css.CompiledStyles;
+    xl: css.CompiledStyles;
+    xs: css.CompiledStyles;
+}>;
+/**
+ * 焦点环：宽度、颜色全站一致，只有触发的伪类与偏移不同。
+ * - visible：键盘聚焦本元素（Link、Button 等），环离开元素一点；
+ * - tight：同上但贴着边框（勾选框、单选、开关这类小控件，环离远了显得松）；
+ * - hasVisible：里面的元素键盘聚焦时画在整块上（FileDrop：原生 input 视觉上隐藏）；
+ * - within：里面的元素聚焦（含鼠标）时画在外壳上，往里收压住边框（输入框外壳）
+ */
+export declare const focusRingStyles: Readonly<{
+    hasVisible: css.CompiledStyles;
+    tight: css.CompiledStyles;
+    visible: css.CompiledStyles;
+    within: css.CompiledStyles;
+}>;
+/**
+ * 列表元素（ul、ol）当布局容器时去掉默认的圆点与缩进。
+ * Safari 去掉圆点后会把它当成普通容器，读屏不再报“列表”，所以组件同时补上 role="list"（见 listRole）
+ */
+export declare const listStyles: Readonly<{
+    reset: css.CompiledStyles;
+}>;
+/** 布局组件的工厂（createFlex、createGrid、createContainer）可用的语义容器标签 */
+export type LayoutTag = 'div' | 'section' | 'article' | 'ul' | 'ol' | 'li' | 'nav' | 'header' | 'footer' | 'main' | 'aside' | 'form';
+/** 列表标签需要的 role（见 listStyles），其他标签不加 */
+export declare const listRole: (tag: string) => "list" | undefined;

package/dist/utils/style/styles.js

@@ -0,0 +1,114 @@
+import { t } from "../../config/theme/tokens.js";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/utils/style/styles.ts
+/**
+* 组件共用的档位类型与样式表。档位与主题 tokens 同名（COMPONENTS.md §6.2）：
+* 组件的 size、gap 等 prop 直接用这些类型，取值一一对应到 token。
+* 样式表只放被多个组件复用的；只有一个组件用的写在组件里。
+*/
+/** 圆角档位的样式：none、xs、sm、md、lg、xl、full */
+var radiusStyles = css.create({
+	none: { borderRadius: 0 },
+	xs: { borderRadius: "_xs" },
+	sm: { borderRadius: "_sm" },
+	md: { borderRadius: "_md" },
+	lg: { borderRadius: "_lg" },
+	xl: { borderRadius: "_xl" },
+	full: { borderRadius: "_full" }
+});
+/** 间距 gap：Flex、Grid */
+var gapStyles = css.create({
+	none: { gap: "_none" },
+	xs: { gap: "_xs" },
+	sm: { gap: "_sm" },
+	md: { gap: "_md" },
+	lg: { gap: "_lg" },
+	xl: { gap: "_xl" }
+});
+/** 两侧的内边距：列表条目与所在容器（弹出层、卡片）的内边距对齐 */
+var paddingInlineStyles = css.create({
+	none: { paddingInline: "_none" },
+	xs: { paddingInline: "_xs" },
+	sm: { paddingInline: "_sm" },
+	md: { paddingInline: "_md" },
+	lg: { paddingInline: "_lg" },
+	xl: { paddingInline: "_xl" }
+});
+/** 行间距：Grid 单独指定时 */
+var rowGapStyles = css.create({
+	none: { rowGap: "_none" },
+	xs: { rowGap: "_xs" },
+	sm: { rowGap: "_sm" },
+	md: { rowGap: "_md" },
+	lg: { rowGap: "_lg" },
+	xl: { rowGap: "_xl" }
+});
+/** 列间距：Grid 单独指定时 */
+var columnGapStyles = css.create({
+	none: { columnGap: "_none" },
+	xs: { columnGap: "_xs" },
+	sm: { columnGap: "_sm" },
+	md: { columnGap: "_md" },
+	lg: { columnGap: "_lg" },
+	xl: { columnGap: "_xl" }
+});
+/**
+* 焦点环：宽度、颜色全站一致，只有触发的伪类与偏移不同。
+* - visible：键盘聚焦本元素（Link、Button 等），环离开元素一点；
+* - tight：同上但贴着边框（勾选框、单选、开关这类小控件，环离远了显得松）；
+* - hasVisible：里面的元素键盘聚焦时画在整块上（FileDrop：原生 input 视觉上隐藏）；
+* - within：里面的元素聚焦（含鼠标）时画在外壳上，往里收压住边框（输入框外壳）
+*/
+var focusRingStyles = css.create({
+	visible: {
+		outlineStyle: {
+			default: "none",
+			":focus-visible": "solid"
+		},
+		outlineWidth: "_sm",
+		outlineColor: "_focusRing",
+		outlineOffset: "_sm"
+	},
+	tight: {
+		outlineStyle: {
+			default: "none",
+			":focus-visible": "solid"
+		},
+		outlineWidth: "_sm",
+		outlineColor: "_focusRing",
+		outlineOffset: "_borderWidths.sm"
+	},
+	hasVisible: {
+		outlineStyle: {
+			default: "none",
+			":has(:focus-visible)": "solid"
+		},
+		outlineWidth: "_sm",
+		outlineColor: "_focusRing",
+		outlineOffset: "_borderWidths.sm"
+	},
+	within: {
+		outlineStyle: {
+			default: "none",
+			":focus-within": "solid"
+		},
+		outlineWidth: "_sm",
+		outlineColor: "_focusRing",
+		outlineOffset: `calc(-1 * ${t.borderWidths.xs})`
+	}
+});
+/**
+* 列表元素（ul、ol）当布局容器时去掉默认的圆点与缩进。
+* Safari 去掉圆点后会把它当成普通容器，读屏不再报“列表”，所以组件同时补上 role="list"（见 listRole）
+*/
+var listStyles = css.create({ reset: {
+	margin: 0,
+	paddingInlineStart: 0,
+	listStyleType: "none"
+} });
+/** 列表标签需要的 role（见 listStyles），其他标签不加 */
+var listRole = (tag) => tag === "ul" || tag === "ol" ? "list" : void 0;
+//#endregion
+export { columnGapStyles, focusRingStyles, gapStyles, listRole, listStyles, paddingInlineStyles, radiusStyles, rowGapStyles };
+
+//# sourceMappingURL=styles.js.map

package/dist/utils/style/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":[],"sources":["../../../src/utils/style/styles.ts"],"sourcesContent":["/**\n * 组件共用的档位类型与样式表。档位与主题 tokens 同名（COMPONENTS.md §6.2）：\n * 组件的 size、gap 等 prop 直接用这些类型，取值一一对应到 token。\n * 样式表只放被多个组件复用的；只有一个组件用的写在组件里。\n */\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { SxStyles } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { t } from '../../config/theme/tokens';\n\n/*\n * 取值类型的写法（COMPONENTS.md §1）：写成带注释接口的 keyof，接口的每个键带注释，\n * 补全列表与悬停取值时能看到每个取值的效果（WebStorm 把字符串字面量解析到 keyof 的键上）。\n */\n\n/** 圆角档位，对应主题的 radii（em，随字号缩放），括号里是默认主题的值；各组件的 radius 都用它 */\nexport interface RadiusScale {\n  /** 直角：表格、密集列表里与直线对齐 */\n  none: unknown;\n  /** 0.15em */\n  xs: unknown;\n  /** 0.25em */\n  sm: unknown;\n  /** 0.4em：控件与按钮的默认 */\n  md: unknown;\n  /** 0.7em：卡片、面板 */\n  lg: unknown;\n  /** 1em */\n  xl: unknown;\n  /** 胶囊形（宽高相等时是圆形） */\n  full: unknown;\n}\n\n/** 圆角档位 */\nexport type Radius = keyof RadiusScale;\n\n/** 圆角档位的样式：none、xs、sm、md、lg、xl、full */\nexport const radiusStyles = css.create({\n  none: { borderRadius: 0 },\n  xs: { borderRadius: '_xs' },\n  sm: { borderRadius: '_sm' },\n  md: { borderRadius: '_md' },\n  lg: { borderRadius: '_lg' },\n  xl: { borderRadius: '_xl' },\n  full: { borderRadius: '_full' },\n});\n\n/** 间距档位，对应主题的 space（em，随字号缩放），括号里是默认主题的值 */\nexport interface SpaceScale {\n  /** 无间距（0） */\n  none: unknown;\n  /** 0.25em：图标与文字之间、紧凑的元素之间 */\n  xs: unknown;\n  /** 0.5em：控件内部、相关的元素之间 */\n  sm: unknown;\n  /** 0.75em：一组内容的元素之间 */\n  md: unknown;\n  /** 1em：表单项之间、段落之间 */\n  lg: unknown;\n  /** 1.5em：区块之间、卡片与对话框的内边距 */\n  xl: unknown;\n}\n\n/** 间距档位：五档之外可以是 none */\nexport type Space = keyof SpaceScale;\n\n/**\n * 一组按名字取的样式（如按变体分组的色调表 Record<变体, StyleTable<色调>>）。\n * css.create 的结果不用写它：create 返回具名的 CompiledStyles，类型直接推导\n */\nexport type StyleTable<Key extends string> = Readonly<Record<Key, SxStyles>>;\n\n/** 间距 gap：Flex、Grid */\nexport const gapStyles = css.create({\n  none: { gap: '_none' },\n  xs: { gap: '_xs' },\n  sm: { gap: '_sm' },\n  md: { gap: '_md' },\n  lg: { gap: '_lg' },\n  xl: { gap: '_xl' },\n});\n\n/** 两侧的内边距：列表条目与所在容器（弹出层、卡片）的内边距对齐 */\nexport const paddingInlineStyles = css.create({\n  none: { paddingInline: '_none' },\n  xs: { paddingInline: '_xs' },\n  sm: { paddingInline: '_sm' },\n  md: { paddingInline: '_md' },\n  lg: { paddingInline: '_lg' },\n  xl: { paddingInline: '_xl' },\n});\n\n/** 行间距：Grid 单独指定时 */\nexport const rowGapStyles = css.create({\n  none: { rowGap: '_none' },\n  xs: { rowGap: '_xs' },\n  sm: { rowGap: '_sm' },\n  md: { rowGap: '_md' },\n  lg: { rowGap: '_lg' },\n  xl: { rowGap: '_xl' },\n});\n\n/** 列间距：Grid 单独指定时 */\nexport const columnGapStyles = css.create({\n  none: { columnGap: '_none' },\n  xs: { columnGap: '_xs' },\n  sm: { columnGap: '_sm' },\n  md: { columnGap: '_md' },\n  lg: { columnGap: '_lg' },\n  xl: { columnGap: '_xl' },\n});\n\n/**\n * 焦点环：宽度、颜色全站一致，只有触发的伪类与偏移不同。\n * - visible：键盘聚焦本元素（Link、Button 等），环离开元素一点；\n * - tight：同上但贴着边框（勾选框、单选、开关这类小控件，环离远了显得松）；\n * - hasVisible：里面的元素键盘聚焦时画在整块上（FileDrop：原生 input 视觉上隐藏）；\n * - within：里面的元素聚焦（含鼠标）时画在外壳上，往里收压住边框（输入框外壳）\n */\nexport const focusRingStyles = css.create({\n  visible: {\n    outlineStyle: { default: 'none', ':focus-visible': 'solid' },\n    outlineWidth: '_sm',\n    outlineColor: '_focusRing',\n    outlineOffset: '_sm',\n  },\n  tight: {\n    outlineStyle: { default: 'none', ':focus-visible': 'solid' },\n    outlineWidth: '_sm',\n    outlineColor: '_focusRing',\n    outlineOffset: '_borderWidths.sm',\n  },\n  hasVisible: {\n    outlineStyle: { default: 'none', ':has(:focus-visible)': 'solid' },\n    outlineWidth: '_sm',\n    outlineColor: '_focusRing',\n    outlineOffset: '_borderWidths.sm',\n  },\n  within: {\n    outlineStyle: { default: 'none', ':focus-within': 'solid' },\n    outlineWidth: '_sm',\n    outlineColor: '_focusRing',\n    outlineOffset: `calc(-1 * ${t.borderWidths.xs})`,\n  },\n});\n\n/**\n * 列表元素（ul、ol）当布局容器时去掉默认的圆点与缩进。\n * Safari 去掉圆点后会把它当成普通容器，读屏不再报“列表”，所以组件同时补上 role=\"list\"（见 listRole）\n */\nexport const listStyles = css.create({\n  reset: { margin: 0, paddingInlineStart: 0, listStyleType: 'none' },\n});\n\n/** 布局组件的工厂（createFlex、createGrid、createContainer）可用的语义容器标签 */\nexport type LayoutTag =\n  | 'div'\n  | 'section'\n  | 'article'\n  | 'ul'\n  | 'ol'\n  | 'li'\n  | 'nav'\n  | 'header'\n  | 'footer'\n  | 'main'\n  | 'aside'\n  | 'form';\n\n/** 列表标签需要的 role（见 listStyles），其他标签不加 */\nexport const listRole = (tag: string) => (tag === 'ul' || tag === 'ol' ? 'list' : undefined);\n"],"mappings":";;;;;;;;;AAoCA,IAAa,eAAe,IAAI,OAAO;CACrC,MAAM,EAAE,cAAc,EAAE;CACxB,IAAI,EAAE,cAAc,MAAM;CAC1B,IAAI,EAAE,cAAc,MAAM;CAC1B,IAAI,EAAE,cAAc,MAAM;CAC1B,IAAI,EAAE,cAAc,MAAM;CAC1B,IAAI,EAAE,cAAc,MAAM;CAC1B,MAAM,EAAE,cAAc,QAAQ;AAChC,CAAC;;AA4BD,IAAa,YAAY,IAAI,OAAO;CAClC,MAAM,EAAE,KAAK,QAAQ;CACrB,IAAI,EAAE,KAAK,MAAM;CACjB,IAAI,EAAE,KAAK,MAAM;CACjB,IAAI,EAAE,KAAK,MAAM;CACjB,IAAI,EAAE,KAAK,MAAM;CACjB,IAAI,EAAE,KAAK,MAAM;AACnB,CAAC;;AAGD,IAAa,sBAAsB,IAAI,OAAO;CAC5C,MAAM,EAAE,eAAe,QAAQ;CAC/B,IAAI,EAAE,eAAe,MAAM;CAC3B,IAAI,EAAE,eAAe,MAAM;CAC3B,IAAI,EAAE,eAAe,MAAM;CAC3B,IAAI,EAAE,eAAe,MAAM;CAC3B,IAAI,EAAE,eAAe,MAAM;AAC7B,CAAC;;AAGD,IAAa,eAAe,IAAI,OAAO;CACrC,MAAM,EAAE,QAAQ,QAAQ;CACxB,IAAI,EAAE,QAAQ,MAAM;CACpB,IAAI,EAAE,QAAQ,MAAM;CACpB,IAAI,EAAE,QAAQ,MAAM;CACpB,IAAI,EAAE,QAAQ,MAAM;CACpB,IAAI,EAAE,QAAQ,MAAM;AACtB,CAAC;;AAGD,IAAa,kBAAkB,IAAI,OAAO;CACxC,MAAM,EAAE,WAAW,QAAQ;CAC3B,IAAI,EAAE,WAAW,MAAM;CACvB,IAAI,EAAE,WAAW,MAAM;CACvB,IAAI,EAAE,WAAW,MAAM;CACvB,IAAI,EAAE,WAAW,MAAM;CACvB,IAAI,EAAE,WAAW,MAAM;AACzB,CAAC;;;;;;;;AASD,IAAa,kBAAkB,IAAI,OAAO;CACxC,SAAS;EACP,cAAc;GAAE,SAAS;GAAQ,kBAAkB;EAAQ;EAC3D,cAAc;EACd,cAAc;EACd,eAAe;CACjB;CACA,OAAO;EACL,cAAc;GAAE,SAAS;GAAQ,kBAAkB;EAAQ;EAC3D,cAAc;EACd,cAAc;EACd,eAAe;CACjB;CACA,YAAY;EACV,cAAc;GAAE,SAAS;GAAQ,wBAAwB;EAAQ;EACjE,cAAc;EACd,cAAc;EACd,eAAe;CACjB;CACA,QAAQ;EACN,cAAc;GAAE,SAAS;GAAQ,iBAAiB;EAAQ;EAC1D,cAAc;EACd,cAAc;EACd,eAAe,aAAa,EAAE,aAAa,GAAE;CAC/C;AACF,CAAC;;;;;AAMD,IAAa,aAAa,IAAI,OAAO,EACnC,OAAO;CAAE,QAAQ;CAAG,oBAAoB;CAAG,eAAe;AAAO,EACnE,CAAC;;AAkBD,IAAa,YAAY,QAAiB,QAAQ,QAAQ,QAAQ,OAAO,SAAS,KAAA"}

package/dist/utils/style/swatch-styles.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 色块共用的样式：ColorSwatch、ColorField、ThemeCustomizer 里画一块颜色。
+ * 棋盘格垫在下面，半透明的颜色看得出来；内描边按正文色的淡色画出色块边界，亮色、暗色主题里都看得见。
+ */
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+/** 色块的样式：checkerboard、ring */
+export declare const swatchStyles: Readonly<{
+    checkerboard: css.CompiledStyles;
+    ring: css.CompiledStyles;
+}>;

package/dist/utils/style/swatch-styles.js

@@ -0,0 +1,19 @@
+import { t } from "../../config/theme/tokens.js";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/utils/style/swatch-styles.ts
+/**
+* 色块共用的样式：ColorSwatch、ColorField、ThemeCustomizer 里画一块颜色。
+* 棋盘格垫在下面，半透明的颜色看得出来；内描边按正文色的淡色画出色块边界，亮色、暗色主题里都看得见。
+*/
+/** 色块的样式：checkerboard、ring */
+var swatchStyles = css.create({
+	checkerboard: {
+		backgroundImage: `repeating-conic-gradient(${t.colors.fill} 0 25%, ${t.colors.surface} 0 50%)`,
+		backgroundSize: "0.5em 0.5em"
+	},
+	ring: { boxShadow: `inset 0 0 0 1px color-mix(in oklab, ${t.colors.text} 14%, transparent)` }
+});
+//#endregion
+export { swatchStyles };
+
+//# sourceMappingURL=swatch-styles.js.map

package/dist/utils/style/swatch-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"swatch-styles.js","names":[],"sources":["../../../src/utils/style/swatch-styles.ts"],"sourcesContent":["/**\n * 色块共用的样式：ColorSwatch、ColorField、ThemeCustomizer 里画一块颜色。\n * 棋盘格垫在下面，半透明的颜色看得出来；内描边按正文色的淡色画出色块边界，亮色、暗色主题里都看得见。\n */\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { t } from '../../config/theme/tokens';\n\n/** 色块的样式：checkerboard、ring */\nexport const swatchStyles = css.create({\n  // 格子大小用 em：随色块所在的字号缩放\n  checkerboard: {\n    backgroundImage: `repeating-conic-gradient(${t.colors.fill} 0 25%, ${t.colors.surface} 0 50%)`,\n    backgroundSize: '0.5em 0.5em',\n  },\n  ring: { boxShadow: `inset 0 0 0 1px color-mix(in oklab, ${t.colors.text} 14%, transparent)` },\n});\n"],"mappings":";;;;;;;;AAQA,IAAa,eAAe,IAAI,OAAO;CAErC,cAAc;EACZ,iBAAiB,4BAA4B,EAAE,OAAO,KAAI,UAAW,EAAE,OAAO,QAAO;EACrF,gBAAgB;CAClB;CACA,MAAM,EAAE,WAAW,uCAAuC,EAAE,OAAO,KAAI,oBAAqB;AAC9F,CAAC"}

package/dist/utils/style/tone-styles.d.ts

@@ -0,0 +1,58 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { SxStyles } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { IconData } from '../../base/Icon';
+import type { StyleTable } from './styles';
+/** 状态色调 */
+export interface StatusTones {
+    /** 中性：普通的标签、计数，不需要强调的操作（如“取消”） */
+    neutral: unknown;
+    /** 品牌色：新功能、选中、主要操作 */
+    accent: unknown;
+    /** 信息：提示、说明 */
+    info: unknown;
+    /** 成功：已完成、正常 */
+    success: unknown;
+    /** 警告：需要注意、即将过期 */
+    warning: unknown;
+    /** 危险：错误、失败、删除等破坏性操作 */
+    danger: unknown;
+}
+/** 标记与提示的样式 */
+export interface StatusVariants {
+    /** 实底：最醒目，计数、状态点 */
+    solid: unknown;
+    /** 浅色底（默认） */
+    soft: unknown;
+    /** 浅色底加描边 */
+    surface: unknown;
+    /** 只有描边 */
+    outline: unknown;
+}
+/** 状态色调 */
+export type StatusTone = keyof StatusTones;
+/** 标记与提示的样式 */
+export type StatusVariant = keyof StatusVariants;
+/** 状态色调 的样式：bordered */
+export declare const statusToneBorderStyles: Readonly<{
+    bordered: css.CompiledStyles;
+}>;
+/** 样式 × 状态色调 → 样式表：statusToneStyles[variant][tone]（一般用 statusToneSx） */
+export declare const statusToneStyles: Readonly<Record<StatusVariant, StyleTable<StatusTone>>>;
+/** 每种状态色调默认的图标（Lucide）：提示条、通知、确认对话框按色调自动选图标 */
+export declare const statusIcons: Readonly<Record<StatusTone, IconData>>;
+/** 样式 × 色调 → 颜色、底色与边框 */
+export declare function statusToneSx(variant: StatusVariant, tone: StatusTone): SxStyles;
+/**
+ * 实底色调的颜色变量：选中的勾选框、单选框、开关与滑块的已选部分用 `var(--tone-fill)` 作底色、
+ * `var(--tone-on-fill)` 作其上的对勾、圆点、滑块色。组件根元素加 toneFillStyles[tone]，各部件引用变量：
+ * 部件的选中样式不随色调再分六份。
+ * 状态色用文字色而不是实色：黄、绿的实色在表面上不到 3:1，图形要的是与周围的对比；danger 同理（暗色主题里在轨道上不到 3:1）
+ */
+export declare const toneFillStyles: Readonly<{
+    accent: css.CompiledStyles;
+    danger: css.CompiledStyles;
+    info: css.CompiledStyles;
+    neutral: css.CompiledStyles;
+    success: css.CompiledStyles;
+    warning: css.CompiledStyles;
+}>;