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

package/dist/base/badge-styles.js

@@ -0,0 +1,329 @@
+import { fontSizeStyles } from "../utils/style/typography.js";
+import { radiusStyles } from "../utils/style/styles.js";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/base/badge-styles.ts
+/**
+* Badge 与 Tag 共用的外观（配方）：样式 × 色调逐项写主题 token（组合档位）；字号、圆角另外叠加。
+*/
+/** 标记的配方：部件 root（外层）、dot（圆点） */
+var badgeRecipe = css.recipe({
+	name: "Badge",
+	parts: ["root", "dot"],
+	base: {
+		root: {
+			boxSizing: "border-box",
+			display: "inline-flex",
+			alignItems: "center",
+			gap: "_xs",
+			paddingInline: "_sm",
+			minHeight: "1.75em",
+			fontWeight: "_medium",
+			lineHeight: "_tight",
+			whiteSpace: "nowrap",
+			verticalAlign: "middle",
+			borderWidth: "_xs",
+			borderStyle: "solid",
+			borderColor: "transparent"
+		},
+		dot: {
+			flexShrink: 0,
+			width: "0.5em",
+			height: "0.5em",
+			borderRadius: "_full",
+			backgroundColor: "currentColor"
+		}
+	},
+	variants: {
+		variant: {
+			solid: {},
+			soft: {},
+			surface: {},
+			outline: {}
+		},
+		tone: {
+			neutral: {},
+			accent: {},
+			info: {},
+			success: {},
+			warning: {},
+			danger: {}
+		}
+	},
+	compound: [
+		{
+			when: {
+				variant: "solid",
+				tone: "neutral"
+			},
+			root: {
+				color: "_inverseText",
+				backgroundColor: "_inverseSurface"
+			}
+		},
+		{
+			when: {
+				variant: "solid",
+				tone: "accent"
+			},
+			root: {
+				color: "_accentContrast",
+				backgroundColor: "_accent"
+			}
+		},
+		{
+			when: {
+				variant: "solid",
+				tone: "info"
+			},
+			root: {
+				color: "_infoContrast",
+				backgroundColor: "_info"
+			}
+		},
+		{
+			when: {
+				variant: "solid",
+				tone: "success"
+			},
+			root: {
+				color: "_successContrast",
+				backgroundColor: "_success"
+			}
+		},
+		{
+			when: {
+				variant: "solid",
+				tone: "warning"
+			},
+			root: {
+				color: "_warningContrast",
+				backgroundColor: "_warning"
+			}
+		},
+		{
+			when: {
+				variant: "solid",
+				tone: "danger"
+			},
+			root: {
+				color: "_dangerContrast",
+				backgroundColor: "_danger"
+			}
+		},
+		{
+			when: {
+				variant: "soft",
+				tone: "neutral"
+			},
+			root: {
+				color: "_text",
+				backgroundColor: "_fill"
+			}
+		},
+		{
+			when: {
+				variant: "soft",
+				tone: "accent"
+			},
+			root: {
+				color: "_accentText",
+				backgroundColor: "_accentSoft"
+			}
+		},
+		{
+			when: {
+				variant: "soft",
+				tone: "info"
+			},
+			root: {
+				color: "_infoText",
+				backgroundColor: "_infoSoft"
+			}
+		},
+		{
+			when: {
+				variant: "soft",
+				tone: "success"
+			},
+			root: {
+				color: "_successText",
+				backgroundColor: "_successSoft"
+			}
+		},
+		{
+			when: {
+				variant: "soft",
+				tone: "warning"
+			},
+			root: {
+				color: "_warningText",
+				backgroundColor: "_warningSoft"
+			}
+		},
+		{
+			when: {
+				variant: "soft",
+				tone: "danger"
+			},
+			root: {
+				color: "_dangerText",
+				backgroundColor: "_dangerSoft"
+			}
+		},
+		{
+			when: {
+				variant: "surface",
+				tone: "neutral"
+			},
+			root: {
+				color: "_text",
+				backgroundColor: "_surface",
+				borderColor: "_border"
+			}
+		},
+		{
+			when: {
+				variant: "surface",
+				tone: "accent"
+			},
+			root: {
+				color: "_accentText",
+				backgroundColor: "_accentSoft",
+				borderColor: "_accentBorder"
+			}
+		},
+		{
+			when: {
+				variant: "surface",
+				tone: "info"
+			},
+			root: {
+				color: "_infoText",
+				backgroundColor: "_infoSoft",
+				borderColor: "_infoBorder"
+			}
+		},
+		{
+			when: {
+				variant: "surface",
+				tone: "success"
+			},
+			root: {
+				color: "_successText",
+				backgroundColor: "_successSoft",
+				borderColor: "_successBorder"
+			}
+		},
+		{
+			when: {
+				variant: "surface",
+				tone: "warning"
+			},
+			root: {
+				color: "_warningText",
+				backgroundColor: "_warningSoft",
+				borderColor: "_warningBorder"
+			}
+		},
+		{
+			when: {
+				variant: "surface",
+				tone: "danger"
+			},
+			root: {
+				color: "_dangerText",
+				backgroundColor: "_dangerSoft",
+				borderColor: "_dangerBorder"
+			}
+		},
+		{
+			when: {
+				variant: "outline",
+				tone: "neutral"
+			},
+			root: {
+				color: "_text",
+				borderColor: "_border"
+			}
+		},
+		{
+			when: {
+				variant: "outline",
+				tone: "accent"
+			},
+			root: {
+				color: "_accentText",
+				borderColor: "_accentBorder"
+			}
+		},
+		{
+			when: {
+				variant: "outline",
+				tone: "info"
+			},
+			root: {
+				color: "_infoText",
+				borderColor: "_infoBorder"
+			}
+		},
+		{
+			when: {
+				variant: "outline",
+				tone: "success"
+			},
+			root: {
+				color: "_successText",
+				borderColor: "_successBorder"
+			}
+		},
+		{
+			when: {
+				variant: "outline",
+				tone: "warning"
+			},
+			root: {
+				color: "_warningText",
+				borderColor: "_warningBorder"
+			}
+		},
+		{
+			when: {
+				variant: "outline",
+				tone: "danger"
+			},
+			root: {
+				color: "_dangerText",
+				borderColor: "_dangerBorder"
+			}
+		}
+	],
+	defaults: {
+		variant: "soft",
+		tone: "neutral"
+	}
+});
+/**
+* 标记的各部件：配方（样式 × 色调）+ 字号 + 圆角，带部件标记。recipe 是 useRecipe(badgeRecipe) 的结果（带上主题定制），
+* 结果直接作部件属性的默认层：`mergeAttrs<'span'>(styles.root, rest)`
+*/
+function badgeParts({ variant = "soft", tone = "neutral", size = "xs", radius = "sm" }, recipe) {
+	const parts = recipe({
+		variant,
+		tone
+	});
+	return {
+		root: {
+			...parts.root,
+			sx: [
+				parts.root.sx,
+				fontSizeStyles[size],
+				radiusStyles[radius]
+			]
+		},
+		dot: parts.dot
+	};
+}
+//#endregion
+export { badgeParts, badgeRecipe };
+
+//# sourceMappingURL=badge-styles.js.map

package/dist/base/badge-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge-styles.js","names":[],"sources":["../../src/base/badge-styles.ts"],"sourcesContent":["/**\n * Badge 与 Tag 共用的外观（配方）：样式 × 色调逐项写主题 token（组合档位）；字号、圆角另外叠加。\n */\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { PartLayer } from '../config/styles';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\nimport { radiusStyles, type Radius } from '../utils/style/styles';\nimport type { StatusTone, StatusVariant } from '../utils/style/tone-styles';\n\n/** Badge、Tag 的外观选项 */\nexport interface BadgeOptions {\n  /** 样式，默认 soft */\n  variant?: StatusVariant;\n  /** 色调，默认 neutral */\n  tone?: StatusTone;\n  /** 字号档位，默认 xs */\n  size?: TextSize;\n  /** 圆角，默认 sm；表格、密集列表里的状态常用 none，与表格的直线对齐 */\n  radius?: Radius;\n}\n\n/** 标记的配方：部件 root（外层）、dot（圆点） */\nexport const badgeRecipe = css.recipe({\n  name: 'Badge',\n  parts: ['root', 'dot'],\n  base: {\n    root: {\n      boxSizing: 'border-box',\n      display: 'inline-flex',\n      alignItems: 'center',\n      gap: '_xs',\n      paddingInline: '_sm',\n      // 一行的高度：不随内容的图标、按钮撑高\n      minHeight: '1.75em',\n      fontWeight: '_medium',\n      lineHeight: '_tight',\n      whiteSpace: 'nowrap',\n      verticalAlign: 'middle',\n      borderWidth: '_xs',\n      borderStyle: 'solid',\n      borderColor: 'transparent',\n    },\n    // 跟着文字色：soft、outline 是色调色，solid 是反白\n    dot: {\n      flexShrink: 0,\n      width: '0.5em',\n      height: '0.5em',\n      borderRadius: '_full',\n      backgroundColor: 'currentColor',\n    },\n  },\n  variants: {\n    variant: { solid: {}, soft: {}, surface: {}, outline: {} },\n    tone: { neutral: {}, accent: {}, info: {}, success: {}, warning: {}, danger: {} },\n  },\n  // 样式 × 色调逐项写主题 token；中性色的实底是反色表面\n  compound: [\n    {\n      when: { variant: 'solid', tone: 'neutral' },\n      root: { color: '_inverseText', backgroundColor: '_inverseSurface' },\n    },\n    {\n      when: { variant: 'solid', tone: 'accent' },\n      root: { color: '_accentContrast', backgroundColor: '_accent' },\n    },\n    {\n      when: { variant: 'solid', tone: 'info' },\n      root: { color: '_infoContrast', backgroundColor: '_info' },\n    },\n    {\n      when: { variant: 'solid', tone: 'success' },\n      root: { color: '_successContrast', backgroundColor: '_success' },\n    },\n    {\n      when: { variant: 'solid', tone: 'warning' },\n      root: { color: '_warningContrast', backgroundColor: '_warning' },\n    },\n    {\n      when: { variant: 'solid', tone: 'danger' },\n      root: { color: '_dangerContrast', backgroundColor: '_danger' },\n    },\n    {\n      when: { variant: 'soft', tone: 'neutral' },\n      root: { color: '_text', backgroundColor: '_fill' },\n    },\n    {\n      when: { variant: 'soft', tone: 'accent' },\n      root: { color: '_accentText', backgroundColor: '_accentSoft' },\n    },\n    {\n      when: { variant: 'soft', tone: 'info' },\n      root: { color: '_infoText', backgroundColor: '_infoSoft' },\n    },\n    {\n      when: { variant: 'soft', tone: 'success' },\n      root: { color: '_successText', backgroundColor: '_successSoft' },\n    },\n    {\n      when: { variant: 'soft', tone: 'warning' },\n      root: { color: '_warningText', backgroundColor: '_warningSoft' },\n    },\n    {\n      when: { variant: 'soft', tone: 'danger' },\n      root: { color: '_dangerText', backgroundColor: '_dangerSoft' },\n    },\n    {\n      when: { variant: 'surface', tone: 'neutral' },\n      root: { color: '_text', backgroundColor: '_surface', borderColor: '_border' },\n    },\n    {\n      when: { variant: 'surface', tone: 'accent' },\n      root: { color: '_accentText', backgroundColor: '_accentSoft', borderColor: '_accentBorder' },\n    },\n    {\n      when: { variant: 'surface', tone: 'info' },\n      root: { color: '_infoText', backgroundColor: '_infoSoft', borderColor: '_infoBorder' },\n    },\n    {\n      when: { variant: 'surface', tone: 'success' },\n      root: {\n        color: '_successText',\n        backgroundColor: '_successSoft',\n        borderColor: '_successBorder',\n      },\n    },\n    {\n      when: { variant: 'surface', tone: 'warning' },\n      root: {\n        color: '_warningText',\n        backgroundColor: '_warningSoft',\n        borderColor: '_warningBorder',\n      },\n    },\n    {\n      when: { variant: 'surface', tone: 'danger' },\n      root: { color: '_dangerText', backgroundColor: '_dangerSoft', borderColor: '_dangerBorder' },\n    },\n    {\n      when: { variant: 'outline', tone: 'neutral' },\n      root: { color: '_text', borderColor: '_border' },\n    },\n    {\n      when: { variant: 'outline', tone: 'accent' },\n      root: { color: '_accentText', borderColor: '_accentBorder' },\n    },\n    {\n      when: { variant: 'outline', tone: 'info' },\n      root: { color: '_infoText', borderColor: '_infoBorder' },\n    },\n    {\n      when: { variant: 'outline', tone: 'success' },\n      root: { color: '_successText', borderColor: '_successBorder' },\n    },\n    {\n      when: { variant: 'outline', tone: 'warning' },\n      root: { color: '_warningText', borderColor: '_warningBorder' },\n    },\n    {\n      when: { variant: 'outline', tone: 'danger' },\n      root: { color: '_dangerText', borderColor: '_dangerBorder' },\n    },\n  ],\n  defaults: { variant: 'soft', tone: 'neutral' },\n});\n\n/** 标记的部件（createUi / Provider 的 styles.Badge 按它定制） */\nexport type BadgePart = (typeof badgeRecipe.parts)[number];\n\n/**\n * 标记的各部件：配方（样式 × 色调）+ 字号 + 圆角，带部件标记。recipe 是 useRecipe(badgeRecipe) 的结果（带上主题定制），\n * 结果直接作部件属性的默认层：`mergeAttrs<'span'>(styles.root, rest)`\n */\nexport function badgeParts(\n  { variant = 'soft', tone = 'neutral', size = 'xs', radius = 'sm' }: BadgeOptions,\n  recipe: (selection: {\n    variant: StatusVariant;\n    tone: StatusTone;\n  }) => Readonly<Record<BadgePart, PartLayer>>,\n) {\n  const parts = recipe({ variant, tone });\n  return {\n    root: {\n      ...parts.root,\n      sx: [parts.root.sx, fontSizeStyles[size], radiusStyles[radius]] as css.SxStyles,\n    },\n    dot: parts.dot,\n  } as const;\n}\n"],"mappings":"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"}

package/dist/base/button-core.d.ts

@@ -0,0 +1,191 @@
+/**
+ * 按钮家族（Button、LinkButton、IconButton、CloseButton、ClearButton）的内核：共用的外观、选项、内容排布与行为。
+ * 一个元素一个组件（COMPONENTS.md §1）：各组件只管自己元素的行为，样式与内容排布都从这里取。
+ *
+ * 外观 = variant（样式）× tone（色调）× size（字号档位，内部尺寸随之按 em 缩放）× radius（圆角）。
+ */
+import { type VNodeChild } from 'vue';
+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, type IconProps } from './Icon';
+import { type SpinnerProps } from './Spinner';
+import { useRecipe } from '../config/styles';
+import { type RippleHandlers } from '../utils/dom/ripple';
+import { type PartProps } from '../utils/props';
+import { type Radius } from '../utils/style/styles';
+import type { StatusTone } from '../utils/style/tone-styles';
+import { type AttachedOrientations } from '../utils/style/attached';
+import { type TextSize } from '../utils/style/typography';
+/** 按钮样式 */
+export interface ButtonVariants {
+    /** 实底：一组操作里的主要操作，每组最多一个 */
+    solid: unknown;
+    /** 浅色底：次要但仍需突出的操作，如卡片里的操作 */
+    soft: unknown;
+    /** 浅色底加描边：表单、设置页里常用的次要操作 */
+    surface: unknown;
+    /** 只有描边：次要操作 */
+    outline: unknown;
+    /** 无底无边，悬停时才有底色：工具栏、行内操作、图标按钮 */
+    ghost: unknown;
+    /** 看起来像链接（无底、无内边距、悬停下划线）：文字中间的操作 */
+    link: unknown;
+}
+/** 按钮家族共用的外观选项；可以用 createUi / Provider 的 defaults.Button 统一改默认值 */
+export interface ButtonOptions {
+    /**
+     * 样式；可以用 createUi / Provider 的 defaults.Button 统一改
+     * @default 'solid'
+     */
+    variant?: keyof ButtonVariants;
+    /**
+     * 色调：与 Badge、Alert 等同一套
+     * @default 'accent'
+     */
+    tone?: StatusTone;
+    /** 字号档位，内部尺寸随之缩放；不写时继承上下文字号 */
+    size?: TextSize;
+    /**
+     * 圆角
+     * @default 'md'
+     */
+    radius?: Radius;
+    /** 加载中：显示旋转指示，宽度不变，点击无效，焦点保留；读屏会得知 aria-busy */
+    loading?: boolean;
+    /** 按下时的波纹效果；不写时沿用 createUi / Provider 的 ripple（默认开启） */
+    ripple?: boolean;
+    /** 加载指示（Spinner）的部件属性 */
+    propsSpinner?: Partial<SpinnerProps>;
+}
+/** 有文字的按钮（Button、LinkButton）另有的选项 */
+export interface ButtonContentOptions {
+    /** 文字前的图标：`import { Plus } from '@lucide/icons'` */
+    icon?: IconData;
+    /** 文字后的图标 */
+    iconEnd?: IconData;
+    /** 占满容器宽度 */
+    fullWidth?: boolean;
+    /** 内容层（包着图标与文字的 span）的部件属性 */
+    propsContent?: PartProps<'span'>;
+    /** 前置图标的部件属性 */
+    propsIcon?: Partial<IconProps>;
+    /** 后置图标的部件属性 */
+    propsIconEnd?: Partial<IconProps>;
+    /** 按钮文字；加载中仍保留（读屏名称不变） */
+    children?: VNodeChild;
+}
+/** 按钮的基础样式：去掉默认外观，继承文字样式，指针与触摸的反馈；Button 家族也用它 */
+export declare const buttonBaseStyles: Readonly<{
+    disabled: css.CompiledStyles;
+    root: css.CompiledStyles;
+}>;
+/** 按钮家族 的样式：root、square、fullWidth、disabled、content、hidden 等 */
+export declare const buttonStyles: Readonly<{
+    content: css.CompiledStyles;
+    disabled: css.CompiledStyles;
+    fullWidth: css.CompiledStyles;
+    hidden: css.CompiledStyles;
+    root: css.CompiledStyles;
+    spinner: css.CompiledStyles;
+    square: css.CompiledStyles;
+}>;
+/**
+ * 按钮的样式（配方）：样式 × 色调逐项写主题 token（组合档位）。中性色没有专门的实底色，用反色表面。
+ * 实底悬停用各色调的 Hover token：主题检查保证它与 Contrast 字色到 4.5:1
+ */
+export declare const buttonRecipe: css.Recipe<"root", {
+    readonly variant: {
+        readonly solid: {};
+        readonly soft: {};
+        readonly surface: {};
+        readonly outline: {};
+        readonly ghost: {};
+        readonly link: {
+            readonly root: {
+                readonly minHeight: 0;
+                readonly paddingInline: 0;
+                readonly fontWeight: "_medium";
+                readonly textUnderlineOffset: "0.2em";
+                readonly textDecorationLine: {
+                    readonly default: "none";
+                    readonly ":hover:not(:disabled,[aria-disabled=\"true\"])": "underline";
+                };
+            };
+        };
+    };
+    readonly tone: {
+        neutral: {};
+        accent: {};
+        info: {};
+        success: {};
+        warning: {};
+        danger: {};
+    };
+}>;
+/** 按钮的部件（createUi / Provider 的 styles.Button 按它定制） */
+export type ButtonPart = (typeof buttonRecipe.parts)[number];
+/** 按钮根元素的部件标记：`data-scope="button" data-part="root"` */
+export declare const buttonPart: Readonly<{
+    'data-scope': string;
+    'data-part': string;
+}>;
+/** ButtonGroup 交给组里按钮的状态：统一的外观（相连的方向经 AttachedContext 给出） */
+export interface ButtonGroupState {
+    /** 组上写的外观，组里的按钮没写的项用它 */
+    readonly appearance: Pick<ButtonOptions, 'variant' | 'tone' | 'size' | 'radius'>;
+}
+/** 按钮组的上下文：组里的按钮家族据此相连、共用外观 */
+export declare const ButtonGroupContext: import("@zerodep-dev/vue-tsx-pro-tsx").Context<ButtonGroupState>;
+/** 合并后的外观：每一项都有值（size 不写时继承字号）；在 ButtonGroup、ControlGroup 里时带上相连的方向 */
+export type ButtonAppearance = Required<Pick<ButtonOptions, 'variant' | 'tone' | 'radius'>> & Pick<ButtonOptions, 'size'> & {
+    attached?: keyof AttachedOrientations;
+    /** 按钮的配方，带上 createUi / Provider 里 styles.Button 的定制 */
+    recipe: ReturnType<typeof useRecipe<ButtonPart, unknown>>;
+};
+/**
+ * 按钮的外观：显式写的 prop > 所在 ButtonGroup 写的 > createUi / Provider 的 defaults.Button > 组件自己的默认样式。
+ * 在 setup 里调用，返回的函数在渲染时调用（读到最新的 prop 与配置）
+ */
+export declare function useButtonAppearance(read: () => Pick<ButtonOptions, 'variant' | 'tone' | 'size' | 'radius'>, fallbackVariant: keyof ButtonVariants, fallbackTone?: StatusTone): () => ButtonAppearance;
+/** 外观（已合并默认值）与状态 → 按钮根元素的样式 */
+export declare function buttonSx({ variant, tone, size, radius, attached, recipe }: ButtonAppearance, state: {
+    disabled: boolean;
+    square?: boolean;
+    fullWidth?: boolean;
+}): SxStyles;
+/** 按钮内容：图标、文字、加载指示；加载中内容透明但保留宽度与无障碍名称 */
+export declare function buttonContent({ icon, iconEnd, children, propsContent, propsIcon, propsIconEnd, }: Omit<ButtonContentOptions, 'fullWidth'>, { loading, propsSpinner }: Pick<ButtonOptions, 'loading' | 'propsSpinner'>): VNodeChild;
+/** useButtonBehavior 每次渲染读取的状态 */
+export interface ButtonBehaviorState {
+    /** 不可用 */
+    disabled: boolean;
+    /** 加载中：点击无效，焦点保留 */
+    loading: boolean;
+    /** 不可用时仍可聚焦：用 aria-disabled 代替原生 disabled。链接没有原生 disabled，总是写 true */
+    focusableWhenDisabled?: boolean;
+    /** 波纹；不写时沿用配置 */
+    ripple?: boolean;
+}
+/** useButtonBehavior 给出的受管属性：展开到 mergeProps 的受管层 */
+export interface ButtonBehaviorProps<E extends MouseEvent = MouseEvent> extends RippleHandlers {
+    /** 原生 disabled（不可聚焦的不可用） */
+    disabled?: boolean;
+    /** 可聚焦的不可用 */
+    'aria-disabled'?: true;
+    /** 加载中 */
+    'aria-busy'?: true;
+    /** 加载中、可聚焦的不可用时拦下点击，否则交给使用方的 onClick */
+    onClick: (event: E) => void;
+    /** 状态写成 data 属性，样式与测试据此选择 */
+    'data-loading'?: true;
+    /** 不可用（两种方式都有） */
+    'data-disabled'?: true;
+}
+/**
+ * 按钮家族的行为：不可用（原生 disabled 或可聚焦的 aria-disabled）、加载中、拦截点击、波纹、状态 data 属性。
+ * 被拦下的点击会 preventDefault：不触发使用方的 onClick，也不提交表单、不跟随链接。
+ *
+ *   const behavior = useButtonBehavior(() => ({ disabled, loading, focusableWhenDisabled, ripple }), () => onClick);
+ *   mergeAttrs<'button'>(默认, rest, behavior())
+ */
+export declare function useButtonBehavior<E extends MouseEvent>(read: () => ButtonBehaviorState, onClick: () => ((event: E) => void) | undefined): () => ButtonBehaviorProps<E>;