@zerodep-dev/vue-tsx-pro-ui 0.3.1 → 0.3.2

package/dist/base/List.js

@@ -4,7 +4,7 @@ import { gapStyles } from "../utils/style/styles.js";
 import { Icon } from "./Icon.js";
 import { createVNode } from "vue";
 import { _component, childrenProp, createContext, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/base/List.tsx
 /** 正文列表的样式：缩进与项目之间的间距；嵌套的列表紧贴上一项；有图标时不要圆点、不缩进 */
 var listStylesProse = css.create({

package/dist/base/List.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/base/List.tsx"],"sourcesContent":["/**\n * 正文里的列表：List（ul，圆点或图标）、OrderedList（ol，编号）、ListItem（li）。\n * 界面结构上的列表（导航、分页、步骤）不要圆点，用布局组件 FlexList / FlexOrderedList。\n *\n *   <List>\n *     <ListItem>安装依赖</ListItem>\n *     <ListItem>配置 Vite 预设<OrderedList><ListItem>…</ListItem></OrderedList></ListItem>\n *   </List>\n *   <List icon={Check} propsIcon={{ tone: 'success' }}>        功能清单：图标代替圆点\n *     <ListItem>不限项目</ListItem>\n *     <ListItem icon={X} propsIcon={{ tone: 'muted' }}>单点登录</ListItem>   逐项换图标\n *   </List>\n *\n * 图标是装饰（aria-hidden），读屏照常念“列表，几项”。参考 Mantine List 的 icon、Chakra 的 ListIcon。\n */\nimport { createContext, _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { gapStyles, type Space } from '../utils/style/styles';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\nimport { Icon, type IconData, type IconProps } from './Icon';\n\n/** 正文列表的样式：缩进与项目之间的间距；嵌套的列表紧贴上一项；有图标时不要圆点、不缩进 */\nexport const listStylesProse = css.create({\n  root: {\n    display: 'grid',\n    margin: 0,\n    paddingInlineStart: '1.5em',\n  },\n  bullet: { listStyleType: 'disc' },\n  number: { listStyleType: 'decimal' },\n  // 图标代替圆点：图标在项里占一列，项的文字换行时对齐文字\n  iconic: { listStyleType: 'none', paddingInlineStart: 0 },\n  item: { paddingInlineStart: '_xs' },\n  iconItem: { display: 'flex', alignItems: 'baseline', gap: '_sm', paddingInlineStart: 0 },\n  // 图标与第一行文字对齐（基线对不齐图标，按行高居中）\n  icon: { flexShrink: 0, alignSelf: 'flex-start', marginBlockStart: '0.2em' },\n  content: { minWidth: 0 },\n});\n\n/** 列表共有的外观 */\ninterface ListOptions {\n  /** 字号档位；不写时继承上下文字号 */\n  size?: TextSize;\n  /** 项与项之间的间距档位（与 Flex、Grid 的 gap 同一套），默认 xs；每项是一段话时用 md */\n  gap?: Space;\n  children?: VNodeChild;\n}\n\n/** List 交给 ListItem 的：默认的图标与它的部件属性 */\nexport interface ListMarkerState {\n  /** 各项默认的图标；没有时画圆点 */\n  readonly icon?: IconData;\n  /** 各项图标默认的部件属性 */\n  readonly propsIcon?: Partial<IconProps>;\n}\n\n/** List 的上下文：ListItem 据此画图标；OrderedList 里是空的 */\nexport const ListContext = createContext<ListMarkerState>('List');\n\n/** 未声明的属性落到 ul 上 */\nexport interface ListProps extends PartProps<'ul'>, ListOptions {\n  /** 用图标代替圆点（功能清单的对勾）；ListItem 的 icon 可以逐项覆盖 */\n  icon?: IconData;\n  /** 各项图标的部件属性（tone 改颜色）；ListItem 的 propsIcon 会合并进来 */\n  propsIcon?: Partial<IconProps>;\n}\n\n/** 未声明的属性落到 ol 上 */\nexport interface OrderedListProps extends PartProps<'ol'>, ListOptions {}\n\n/** 未声明的属性落到 li 上 */\nexport interface ListItemProps extends PartProps<'li'> {\n  /** 这一项的图标，覆盖 List 的 icon（在有序列表里不用） */\n  icon?: IconData;\n  /** 图标的部件属性，与 List 的 propsIcon 合并 */\n  propsIcon?: Partial<IconProps>;\n  /** 带图标时包着文字的内容层（div）的部件属性 */\n  propsContent?: PartProps<'div'>;\n  children?: VNodeChild;\n}\n\nconst listSx = (gap: Space, size: TextSize | undefined) => [\n  listStylesProse.root,\n  gapStyles[gap],\n  size && fontSizeStyles[size],\n];\n\n/** 无序列表（ul）：圆点，或 icon 代替圆点 */\nexport const List = _component(\n  ({ icon, propsIcon, size, gap = 'xs', children, ...rest }: ListProps) => {\n    ListContext.provide({\n      get icon() {\n        return icon;\n      },\n      get propsIcon() {\n        return propsIcon;\n      },\n    });\n    return () => (\n      <ul\n        {...mergeAttrs<'ul'>(\n          {\n            sx: [...listSx(gap, size), icon ? listStylesProse.iconic : listStylesProse.bullet],\n            // 去掉圆点后 Safari 不再把它当列表念（见 listStyles）\n            role: icon ? 'list' : undefined,\n          },\n          rest,\n        )}\n      >\n        {children}\n      </ul>\n    );\n  },\n);\n\n/** 有序列表（ol）：编号；start、reversed 等原生属性照常可用 */\nexport const OrderedList = _component(\n  ({ size, gap = 'xs', children, ...rest }: OrderedListProps) => {\n    // 里面的项不沿用外层 List 的图标\n    ListContext.provide({});\n    return () => (\n      <ol {...mergeAttrs<'ol'>({ sx: [...listSx(gap, size), listStylesProse.number] }, rest)}>\n        {children}\n      </ol>\n    );\n  },\n);\n\n/** 列表项（li）：在带图标的 List 里，图标在前、文字在后 */\nexport const ListItem = _component(\n  ({ icon, propsIcon, propsContent, children, ...rest }: ListItemProps) => {\n    const list: ListMarkerState = ListContext.inject({});\n    return () => {\n      const shown = icon ?? list.icon;\n      if (!shown) {\n        return <li {...mergeAttrs<'li'>({ sx: listStylesProse.item }, rest)}>{children}</li>;\n      }\n      return (\n        <li {...mergeAttrs<'li'>({ sx: listStylesProse.iconItem }, rest)}>\n          <Icon\n            {...mergePartProps<IconProps>(\n              { icon: shown, sx: listStylesProse.icon },\n              list.propsIcon,\n              propsIcon,\n            )}\n          />\n          <div {...mergeAttrs<'div'>({ sx: listStylesProse.content }, propsContent)}>\n            {children}\n          </div>\n        </li>\n      );\n    };\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"List.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/base/List.tsx"],"sourcesContent":["/**\n * 正文里的列表：List（ul，圆点或图标）、OrderedList（ol，编号）、ListItem（li）。\n * 界面结构上的列表（导航、分页、步骤）不要圆点，用布局组件 FlexList / FlexOrderedList。\n *\n *   <List>\n *     <ListItem>安装依赖</ListItem>\n *     <ListItem>配置 Vite 预设<OrderedList><ListItem>…</ListItem></OrderedList></ListItem>\n *   </List>\n *   <List icon={Check} propsIcon={{ tone: 'success' }}>        功能清单：图标代替圆点\n *     <ListItem>不限项目</ListItem>\n *     <ListItem icon={X} propsIcon={{ tone: 'muted' }}>单点登录</ListItem>   逐项换图标\n *   </List>\n *\n * 图标是装饰（aria-hidden），读屏照常念“列表，几项”。参考 Mantine List 的 icon、Chakra 的 ListIcon。\n */\nimport { createContext, _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { gapStyles, type Space } from '../utils/style/styles';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\nimport { Icon, type IconData, type IconProps } from './Icon';\n\n/** 正文列表的样式：缩进与项目之间的间距；嵌套的列表紧贴上一项；有图标时不要圆点、不缩进 */\nexport const listStylesProse = css.create({\n  root: {\n    display: 'grid',\n    margin: 0,\n    paddingInlineStart: '1.5em',\n  },\n  bullet: { listStyleType: 'disc' },\n  number: { listStyleType: 'decimal' },\n  // 图标代替圆点：图标在项里占一列，项的文字换行时对齐文字\n  iconic: { listStyleType: 'none', paddingInlineStart: 0 },\n  item: { paddingInlineStart: '_xs' },\n  iconItem: { display: 'flex', alignItems: 'baseline', gap: '_sm', paddingInlineStart: 0 },\n  // 图标与第一行文字对齐（基线对不齐图标，按行高居中）\n  icon: { flexShrink: 0, alignSelf: 'flex-start', marginBlockStart: '0.2em' },\n  content: { minWidth: 0 },\n});\n\n/** 列表共有的外观 */\ninterface ListOptions {\n  /** 字号档位；不写时继承上下文字号 */\n  size?: TextSize;\n  /** 项与项之间的间距档位（与 Flex、Grid 的 gap 同一套），默认 xs；每项是一段话时用 md */\n  gap?: Space;\n  children?: VNodeChild;\n}\n\n/** List 交给 ListItem 的：默认的图标与它的部件属性 */\nexport interface ListMarkerState {\n  /** 各项默认的图标；没有时画圆点 */\n  readonly icon?: IconData;\n  /** 各项图标默认的部件属性 */\n  readonly propsIcon?: Partial<IconProps>;\n}\n\n/** List 的上下文：ListItem 据此画图标；OrderedList 里是空的 */\nexport const ListContext = createContext<ListMarkerState>('List');\n\n/** 未声明的属性落到 ul 上 */\nexport interface ListProps extends PartProps<'ul'>, ListOptions {\n  /** 用图标代替圆点（功能清单的对勾）；ListItem 的 icon 可以逐项覆盖 */\n  icon?: IconData;\n  /** 各项图标的部件属性（tone 改颜色）；ListItem 的 propsIcon 会合并进来 */\n  propsIcon?: Partial<IconProps>;\n}\n\n/** 未声明的属性落到 ol 上 */\nexport interface OrderedListProps extends PartProps<'ol'>, ListOptions {}\n\n/** 未声明的属性落到 li 上 */\nexport interface ListItemProps extends PartProps<'li'> {\n  /** 这一项的图标，覆盖 List 的 icon（在有序列表里不用） */\n  icon?: IconData;\n  /** 图标的部件属性，与 List 的 propsIcon 合并 */\n  propsIcon?: Partial<IconProps>;\n  /** 带图标时包着文字的内容层（div）的部件属性 */\n  propsContent?: PartProps<'div'>;\n  children?: VNodeChild;\n}\n\nconst listSx = (gap: Space, size: TextSize | undefined) => [\n  listStylesProse.root,\n  gapStyles[gap],\n  size && fontSizeStyles[size],\n];\n\n/** 无序列表（ul）：圆点，或 icon 代替圆点 */\nexport const List = _component(\n  ({ icon, propsIcon, size, gap = 'xs', children, ...rest }: ListProps) => {\n    ListContext.provide({\n      get icon() {\n        return icon;\n      },\n      get propsIcon() {\n        return propsIcon;\n      },\n    });\n    return () => (\n      <ul\n        {...mergeAttrs<'ul'>(\n          {\n            sx: [...listSx(gap, size), icon ? listStylesProse.iconic : listStylesProse.bullet],\n            // 去掉圆点后 Safari 不再把它当列表念（见 listStyles）\n            role: icon ? 'list' : undefined,\n          },\n          rest,\n        )}\n      >\n        {children}\n      </ul>\n    );\n  },\n);\n\n/** 有序列表（ol）：编号；start、reversed 等原生属性照常可用 */\nexport const OrderedList = _component(\n  ({ size, gap = 'xs', children, ...rest }: OrderedListProps) => {\n    // 里面的项不沿用外层 List 的图标\n    ListContext.provide({});\n    return () => (\n      <ol {...mergeAttrs<'ol'>({ sx: [...listSx(gap, size), listStylesProse.number] }, rest)}>\n        {children}\n      </ol>\n    );\n  },\n);\n\n/** 列表项（li）：在带图标的 List 里，图标在前、文字在后 */\nexport const ListItem = _component(\n  ({ icon, propsIcon, propsContent, children, ...rest }: ListItemProps) => {\n    const list: ListMarkerState = ListContext.inject({});\n    return () => {\n      const shown = icon ?? list.icon;\n      if (!shown) {\n        return <li {...mergeAttrs<'li'>({ sx: listStylesProse.item }, rest)}>{children}</li>;\n      }\n      return (\n        <li {...mergeAttrs<'li'>({ sx: listStylesProse.iconItem }, rest)}>\n          <Icon\n            {...mergePartProps<IconProps>(\n              { icon: shown, sx: listStylesProse.icon },\n              list.propsIcon,\n              propsIcon,\n            )}\n          />\n          <div {...mergeAttrs<'div'>({ sx: listStylesProse.content }, propsContent)}>\n            {children}\n          </div>\n        </li>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/base/Mark.d.ts

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import type { VNodeChild } from 'vue';
 import { type PartProps } from '../utils/props';
 /** 未声明的属性落到 mark 上 */

package/dist/base/Mark.js

@@ -1,7 +1,7 @@
 import { mergeAttrs } from "../utils/props.js";
 import { createVNode } from "vue";
 import { _component, childrenProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/base/Mark.tsx
 /** 未声明的属性落到 mark 上 */
 /** Mark 的样式 */

package/dist/base/Mark.js.map

@@ -1 +1 @@
-{"version":3,"file":"Mark.js","names":["_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/base/Mark.tsx"],"sourcesContent":["/**\n * 高亮标记（mark）：搜索命中、正文里要强调的词。底色取主题的 highlight，文字颜色不变。\n *\n *   <Mark>vue-tsx-pro</Mark> 的组件\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { mergeAttrs, type PartProps } from '../utils/props';\n\n/** 未声明的属性落到 mark 上 */\nexport interface MarkProps extends PartProps<'mark'> {\n  children?: VNodeChild;\n}\n\n/** Mark 的样式 */\nexport const markStyles = css.create({\n  root: {\n    paddingInline: '0.15em',\n    borderRadius: '_xs',\n    backgroundColor: '_highlight',\n    color: 'inherit',\n  },\n});\n\n/** 高亮标记（mark） */\nexport const Mark = _component(({ children, ...rest }: MarkProps) => () => (\n  <mark {...mergeAttrs<'mark'>({ sx: markStyles.root }, rest)}>{children}</mark>\n));\n"],"mappings":";;;;;;;AAgBA,IAAa,aAAa,IAAI,OAAO,EACnC,MAAM;CACJ,eAAe;CACf,cAAc;CACd,iBAAiB;CACjB,OAAO;AACT,EACF,CAAC;;AAGD,IAAa,OAAO,0BAAW,QAAA,SAAA;CAAA,MAAA,WAAAA,aAAA,MAAA;CAAA,MAAgB,OAAIC,UAAA,QAAA,MAAA,KAAA;CAAA,aAAkBC,YAAA,QACzD,WAAmB,EAAE,IAAI,WAAW,KAAK,GAAG,IAAI,GAAC,CAAA,SAAA,KAAA,CAAA;AAC5D,GAAA,EAAA,MAAA,OAAA,CAAA"}
+{"version":3,"file":"Mark.js","names":["_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/base/Mark.tsx"],"sourcesContent":["/**\n * 高亮标记（mark）：搜索命中、正文里要强调的词。底色取主题的 highlight，文字颜色不变。\n *\n *   <Mark>vue-tsx-pro</Mark> 的组件\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { mergeAttrs, type PartProps } from '../utils/props';\n\n/** 未声明的属性落到 mark 上 */\nexport interface MarkProps extends PartProps<'mark'> {\n  children?: VNodeChild;\n}\n\n/** Mark 的样式 */\nexport const markStyles = css.create({\n  root: {\n    paddingInline: '0.15em',\n    borderRadius: '_xs',\n    backgroundColor: '_highlight',\n    color: 'inherit',\n  },\n});\n\n/** 高亮标记（mark） */\nexport const Mark = _component(({ children, ...rest }: MarkProps) => () => (\n  <mark {...mergeAttrs<'mark'>({ sx: markStyles.root }, rest)}>{children}</mark>\n));\n"],"mappings":";;;;;;;AAgBA,IAAa,aAAa,IAAI,OAAO,EACnC,MAAM;CACJ,eAAe;CACf,cAAc;CACd,iBAAiB;CACjB,OAAO;AACT,EACF,CAAC;;AAGD,IAAa,OAAO,0BAAW,QAAA,SAAA;CAAA,MAAA,WAAAA,aAAA,MAAA;CAAA,MAAgB,OAAIC,UAAA,QAAA,MAAA,KAAA;CAAA,aAAkBC,YAAA,QACzD,WAAmB,EAAE,IAAI,WAAW,KAAK,GAAG,IAAI,GAAC,CAAA,SAAA,KAAA,CAAA;AAC5D,GAAA,EAAA,MAAA,OAAA,CAAA"}

package/dist/base/Spinner.d.ts

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import { type PartProps } from '../utils/props';
 import type { TextSize } from '../utils/style/typography';
 import { type IconProps } from './Icon';

package/dist/base/Spinner.js

@@ -3,7 +3,7 @@ import { Icon } from "./Icon.js";
 import { VisuallyHidden } from "./VisuallyHidden.js";
 import { createVNode, unref } from "vue";
 import { _component, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 import { LoaderCircle } from "@lucide/icons";
 //#region src/base/Spinner.tsx
 /**

package/dist/base/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_vue_unref"],"sources":["../../src/base/Spinner.tsx"],"sourcesContent":["/**\n * 加载中的旋转指示：Lucide 的 LoaderCircle 图标加旋转，默认跟随所在文字的大小与颜色。\n * 表示“一个操作正在进行”（按钮家族、Alert、LoadingOverlay、Switch、Tree 展开）；内容还没来时的占位用 Skeleton。\n *\n *   <Spinner />                       装饰性：旁边已经有“加载中”之类的文字\n *   <Spinner label=\"正在加载订单\" />   单独出现：role=\"status\"，读屏会念出 label\n */\nimport { LoaderCircle } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport type { TextSize } from '../utils/style/typography';\nimport { Icon, type IconProps } from './Icon';\nimport { VisuallyHidden } from './VisuallyHidden';\n\n/** 未声明的属性落到外层的 span 上 */\nexport interface SpinnerProps extends PartProps<'span', 'role'> {\n  /** 读屏念的说明；给了就是 role=\"status\"，不给就是装饰性的（对读屏隐藏） */\n  label?: string;\n  /** 字号档位，不写时为 1em，跟随所在文字 */\n  size?: TextSize;\n  /** 图标（旋转的那个 svg）的部件属性 */\n  propsIcon?: Partial<IconProps>;\n}\n\nconst spin = css.keyframes({ to: { transform: 'rotate(360deg)' } });\n\n/** Spinner 的样式：root、icon */\nexport const spinnerStyles = css.create({\n  root: { display: 'inline-flex', flexShrink: 0 },\n  icon: {\n    animationName: spin,\n    // 旋转本身就是“还在加载”的信息，不随 durations 变为 0；减少动态效果时转慢一些\n    animationDuration: { default: '0.8s', _reducedMotion: '1.6s' },\n    animationTimingFunction: 'linear',\n    animationIterationCount: 'infinite',\n  },\n});\n\n/** 加载指示（span > 图标）：有 label 时是 role=\"status\" */\nexport const Spinner = _component(({ label, size, propsIcon, ...rest }: SpinnerProps) => () => (\n  <span\n    {...mergeAttrs<'span'>({ sx: spinnerStyles.root }, rest, {\n      role: label ? 'status' : undefined,\n    })}\n  >\n    <Icon\n      {...mergePartProps<IconProps>(\n        { icon: LoaderCircle, size, sx: spinnerStyles.icon },\n        propsIcon,\n      )}\n    />\n    {label && <VisuallyHidden>{label}</VisuallyHidden>}\n  </span>\n));\n"],"mappings":";;;;;;;;;;;;;;;;AAyBA,IAAM,OAAO,IAAI,UAAU,EAAE,IAAI,EAAE,WAAW,iBAAiB,EAAE,CAAC;;AAGlE,IAAa,gBAAgB,IAAI,OAAO;CACtC,MAAM;EAAE,SAAS;EAAe,YAAY;CAAE;CAC9C,MAAM;EACJ,eAAe;EAEf,mBAAmB;GAAE,SAAS;GAAQ,gBAAgB;EAAO;EAC7D,yBAAyB;EACzB,yBAAyB;CAC3B;AACF,CAAC;;AAGD,IAAa,UAAU,0BAAW,QAAA,SAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAA8B,OAAIC,UAAA,QAAA,MAAA,IAAA;CAAA,aAAqBC,YAAA,QAEjF,WAAmB,EAAE,IAAI,cAAc,KAAK,GAAG,MAAM,EACvD,MAAM,MAAA,QAAQ,WAAW,KAAA,EAC3B,CAAC,GAAC,CAAAA,YAAA,MAGI,eACF;EAAE,MAAM;EAAc,MAAI,KAAA;EAAE,IAAI,cAAc;CAAK,GAAC,UAAA,KAEtD,GAAC,IAAA,GAEF,MAAA,SAAAA,YAAA,gBAAA,EAAA,OAAA,UAAA,GAAA;EAAA,eAAA,CAAAC,MAAA,KAAA,CAAA;EAAA,SAAA;CAAA,CAAA,CAAiD,CAAA;AAErD,GAAA;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CAAA"}
+{"version":3,"file":"Spinner.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_vue_unref"],"sources":["../../src/base/Spinner.tsx"],"sourcesContent":["/**\n * 加载中的旋转指示：Lucide 的 LoaderCircle 图标加旋转，默认跟随所在文字的大小与颜色。\n * 表示“一个操作正在进行”（按钮家族、Alert、LoadingOverlay、Switch、Tree 展开）；内容还没来时的占位用 Skeleton。\n *\n *   <Spinner />                       装饰性：旁边已经有“加载中”之类的文字\n *   <Spinner label=\"正在加载订单\" />   单独出现：role=\"status\"，读屏会念出 label\n */\nimport { LoaderCircle } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport type { TextSize } from '../utils/style/typography';\nimport { Icon, type IconProps } from './Icon';\nimport { VisuallyHidden } from './VisuallyHidden';\n\n/** 未声明的属性落到外层的 span 上 */\nexport interface SpinnerProps extends PartProps<'span', 'role'> {\n  /** 读屏念的说明；给了就是 role=\"status\"，不给就是装饰性的（对读屏隐藏） */\n  label?: string;\n  /** 字号档位，不写时为 1em，跟随所在文字 */\n  size?: TextSize;\n  /** 图标（旋转的那个 svg）的部件属性 */\n  propsIcon?: Partial<IconProps>;\n}\n\nconst spin = css.keyframes({ to: { transform: 'rotate(360deg)' } });\n\n/** Spinner 的样式：root、icon */\nexport const spinnerStyles = css.create({\n  root: { display: 'inline-flex', flexShrink: 0 },\n  icon: {\n    animationName: spin,\n    // 旋转本身就是“还在加载”的信息，不随 durations 变为 0；减少动态效果时转慢一些\n    animationDuration: { default: '0.8s', _reducedMotion: '1.6s' },\n    animationTimingFunction: 'linear',\n    animationIterationCount: 'infinite',\n  },\n});\n\n/** 加载指示（span > 图标）：有 label 时是 role=\"status\" */\nexport const Spinner = _component(({ label, size, propsIcon, ...rest }: SpinnerProps) => () => (\n  <span\n    {...mergeAttrs<'span'>({ sx: spinnerStyles.root }, rest, {\n      role: label ? 'status' : undefined,\n    })}\n  >\n    <Icon\n      {...mergePartProps<IconProps>(\n        { icon: LoaderCircle, size, sx: spinnerStyles.icon },\n        propsIcon,\n      )}\n    />\n    {label && <VisuallyHidden>{label}</VisuallyHidden>}\n  </span>\n));\n"],"mappings":";;;;;;;;;;;;;;;;AAyBA,IAAM,OAAO,IAAI,UAAU,EAAE,IAAI,EAAE,WAAW,iBAAiB,EAAE,CAAC;;AAGlE,IAAa,gBAAgB,IAAI,OAAO;CACtC,MAAM;EAAE,SAAS;EAAe,YAAY;CAAE;CAC9C,MAAM;EACJ,eAAe;EAEf,mBAAmB;GAAE,SAAS;GAAQ,gBAAgB;EAAO;EAC7D,yBAAyB;EACzB,yBAAyB;CAC3B;AACF,CAAC;;AAGD,IAAa,UAAU,0BAAW,QAAA,SAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAA8B,OAAIC,UAAA,QAAA,MAAA,IAAA;CAAA,aAAqBC,YAAA,QAEjF,WAAmB,EAAE,IAAI,cAAc,KAAK,GAAG,MAAM,EACvD,MAAM,MAAA,QAAQ,WAAW,KAAA,EAC3B,CAAC,GAAC,CAAAA,YAAA,MAGI,eACF;EAAE,MAAM;EAAc,MAAI,KAAA;EAAE,IAAI,cAAc;CAAK,GAAC,UAAA,KAEtD,GAAC,IAAA,GAEF,MAAA,SAAAA,YAAA,gBAAA,EAAA,OAAA,UAAA,GAAA;EAAA,eAAA,CAAAC,MAAA,KAAA,CAAA;EAAA,SAAA;CAAA,CAAA,CAAiD,CAAA;AAErD,GAAA;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CAAA"}

package/dist/base/StatusDot.d.ts

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import { type PartProps } from '../utils/props';
 import type { StatusTone } from '../utils/style/tone-styles';
 /** 色点的大小 */

package/dist/base/StatusDot.js

@@ -1,7 +1,7 @@
 import { mergeAttrs } from "../utils/props.js";
 import { createVNode } from "vue";
 import { _component, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/base/StatusDot.tsx
 /** 色点的大小 */
 /** 未声明的属性落到 span 上 */

package/dist/base/StatusDot.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusDot.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/base/StatusDot.tsx"],"sourcesContent":["/**\n * 状态色点：一个小圆点标出状态或类别（未读、新到、退回、图例），比 Badge 更轻。\n *\n *   <StatusDot tone=\"danger\" />                        装饰：对读屏隐藏，含义写在旁边的文字里\n *   <StatusDot tone=\"accent\" label=\"未读\" />            点本身就是信息：读屏念 label\n *\n * 色调与 Badge 同名（neutral 是次要文字色）；color 给任意 CSS 颜色（图表的系列色）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport type { StatusTone } from '../utils/style/tone-styles';\n\n/** 色点的大小 */\nexport interface StatusDotSizes {\n  /** 0.5rem（默认）：列表、通知 */\n  sm: unknown;\n  /** 0.625rem：图例 */\n  md: unknown;\n}\n\n/** 未声明的属性落到 span 上 */\nexport interface StatusDotProps extends PartProps<'span', 'role' | 'aria-hidden'> {\n  /**\n   * 色调\n   * @default 'accent'\n   */\n  tone?: StatusTone;\n  /** 任意 CSS 颜色；写了时不看 tone */\n  color?: string;\n  /**\n   * 大小\n   * @default 'sm'\n   */\n  size?: keyof StatusDotSizes;\n  /** 读屏念的含义；不写时色点只是装饰（aria-hidden） */\n  label?: string;\n}\n\n/** StatusDot 的样式：root、sm、md */\nexport const statusDotStyles = css.create({\n  root: { display: 'inline-block', flexShrink: 0, borderRadius: '_full' },\n  sm: { width: '0.5rem', height: '0.5rem' },\n  md: { width: '0.625rem', height: '0.625rem' },\n});\n\n/** StatusDot 的色调 */\nexport const statusDotToneStyles = css.create({\n  neutral: { backgroundColor: '_textMuted' },\n  accent: { backgroundColor: '_accent' },\n  info: { backgroundColor: '_info' },\n  success: { backgroundColor: '_success' },\n  warning: { backgroundColor: '_warning' },\n  danger: { backgroundColor: '_danger' },\n});\n\n/** StatusDot 的动态样式：任意颜色 */\nexport const statusDotDynamicStyles = css.create({\n  color: (color: string) => ({ backgroundColor: color }),\n});\n\n/** 状态色点 */\nexport const StatusDot = _component(\n  ({ tone = 'accent', color, size = 'sm', label, ...rest }: StatusDotProps) =>\n    () => (\n      <span\n        {...mergeAttrs<'span'>(\n          {\n            sx: [\n              statusDotStyles.root,\n              statusDotStyles[size],\n              color ? statusDotDynamicStyles.color(color) : statusDotToneStyles[tone],\n            ],\n          },\n          rest,\n          label ? { role: 'img', 'aria-label': label } : { 'aria-hidden': true },\n        )}\n        data-tone={color ? undefined : tone}\n      />\n    ),\n);\n"],"mappings":";;;;;;;;AAwCA,IAAa,kBAAkB,IAAI,OAAO;CACxC,MAAM;EAAE,SAAS;EAAgB,YAAY;EAAG,cAAc;CAAQ;CACtE,IAAI;EAAE,OAAO;EAAU,QAAQ;CAAS;CACxC,IAAI;EAAE,OAAO;EAAY,QAAQ;CAAW;AAC9C,CAAC;;AAGD,IAAa,sBAAsB,IAAI,OAAO;CAC5C,SAAS,EAAE,iBAAiB,aAAa;CACzC,QAAQ,EAAE,iBAAiB,UAAU;CACrC,MAAM,EAAE,iBAAiB,QAAQ;CACjC,SAAS,EAAE,iBAAiB,WAAW;CACvC,SAAS,EAAE,iBAAiB,WAAW;CACvC,QAAQ,EAAE,iBAAiB,UAAU;AACvC,CAAC;;AAGD,IAAa,yBAAyB,IAAI,OAAO,EAC/C,QAAQ,WAAmB,EAAE,iBAAiB,MAAM,GACtD,CAAC;;AAGD,IAAa,YAAY,0BACvB,QAAA,SAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,QAAU,QAAQ;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,QAAgB,IAAI;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAY,OAAIC,UAAA,QAAA,MAAA,IAAA;CAAA,aACpDC,YAAA,QAAAC,cAEQ,WACF,EACE,IAAI;EACF,gBAAgB;EAChB,gBAAe,KAAA;EACf,MAAA,QAAA,IAAA,KAAQ,uBAAuB,aAAK,CAAA,MAAA,KAAA,GAAA,IAAA,IAAU,oBAAmB,KAAA;CAAM,EAE3E,GACA,MACA,MAAA,QAAQ;EAAE,MAAM;EAAO,cAAY,MAAA;CAAQ,IAAI,EAAE,eAAe,KAAK,CACvE,GAAC,EAAA,aACU,MAAA,QAAQ,KAAA,IAAS,KAAA,MAAO,CAAA,GAAA,IAAA;AAEtC,GAAA;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACL"}
+{"version":3,"file":"StatusDot.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/base/StatusDot.tsx"],"sourcesContent":["/**\n * 状态色点：一个小圆点标出状态或类别（未读、新到、退回、图例），比 Badge 更轻。\n *\n *   <StatusDot tone=\"danger\" />                        装饰：对读屏隐藏，含义写在旁边的文字里\n *   <StatusDot tone=\"accent\" label=\"未读\" />            点本身就是信息：读屏念 label\n *\n * 色调与 Badge 同名（neutral 是次要文字色）；color 给任意 CSS 颜色（图表的系列色）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport type { StatusTone } from '../utils/style/tone-styles';\n\n/** 色点的大小 */\nexport interface StatusDotSizes {\n  /** 0.5rem（默认）：列表、通知 */\n  sm: unknown;\n  /** 0.625rem：图例 */\n  md: unknown;\n}\n\n/** 未声明的属性落到 span 上 */\nexport interface StatusDotProps extends PartProps<'span', 'role' | 'aria-hidden'> {\n  /**\n   * 色调\n   * @default 'accent'\n   */\n  tone?: StatusTone;\n  /** 任意 CSS 颜色；写了时不看 tone */\n  color?: string;\n  /**\n   * 大小\n   * @default 'sm'\n   */\n  size?: keyof StatusDotSizes;\n  /** 读屏念的含义；不写时色点只是装饰（aria-hidden） */\n  label?: string;\n}\n\n/** StatusDot 的样式：root、sm、md */\nexport const statusDotStyles = css.create({\n  root: { display: 'inline-block', flexShrink: 0, borderRadius: '_full' },\n  sm: { width: '0.5rem', height: '0.5rem' },\n  md: { width: '0.625rem', height: '0.625rem' },\n});\n\n/** StatusDot 的色调 */\nexport const statusDotToneStyles = css.create({\n  neutral: { backgroundColor: '_textMuted' },\n  accent: { backgroundColor: '_accent' },\n  info: { backgroundColor: '_info' },\n  success: { backgroundColor: '_success' },\n  warning: { backgroundColor: '_warning' },\n  danger: { backgroundColor: '_danger' },\n});\n\n/** StatusDot 的动态样式：任意颜色 */\nexport const statusDotDynamicStyles = css.create({\n  color: (color: string) => ({ backgroundColor: color }),\n});\n\n/** 状态色点 */\nexport const StatusDot = _component(\n  ({ tone = 'accent', color, size = 'sm', label, ...rest }: StatusDotProps) =>\n    () => (\n      <span\n        {...mergeAttrs<'span'>(\n          {\n            sx: [\n              statusDotStyles.root,\n              statusDotStyles[size],\n              color ? statusDotDynamicStyles.color(color) : statusDotToneStyles[tone],\n            ],\n          },\n          rest,\n          label ? { role: 'img', 'aria-label': label } : { 'aria-hidden': true },\n        )}\n        data-tone={color ? undefined : tone}\n      />\n    ),\n);\n"],"mappings":";;;;;;;;AAwCA,IAAa,kBAAkB,IAAI,OAAO;CACxC,MAAM;EAAE,SAAS;EAAgB,YAAY;EAAG,cAAc;CAAQ;CACtE,IAAI;EAAE,OAAO;EAAU,QAAQ;CAAS;CACxC,IAAI;EAAE,OAAO;EAAY,QAAQ;CAAW;AAC9C,CAAC;;AAGD,IAAa,sBAAsB,IAAI,OAAO;CAC5C,SAAS,EAAE,iBAAiB,aAAa;CACzC,QAAQ,EAAE,iBAAiB,UAAU;CACrC,MAAM,EAAE,iBAAiB,QAAQ;CACjC,SAAS,EAAE,iBAAiB,WAAW;CACvC,SAAS,EAAE,iBAAiB,WAAW;CACvC,QAAQ,EAAE,iBAAiB,UAAU;AACvC,CAAC;;AAGD,IAAa,yBAAyB,IAAI,OAAO,EAC/C,QAAQ,WAAmB,EAAE,iBAAiB,MAAM,GACtD,CAAC;;AAGD,IAAa,YAAY,0BACvB,QAAA,SAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,QAAU,QAAQ;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,QAAgB,IAAI;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAY,OAAIC,UAAA,QAAA,MAAA,IAAA;CAAA,aACpDC,YAAA,QAAAC,cAEQ,WACF,EACE,IAAI;EACF,gBAAgB;EAChB,gBAAe,KAAA;EACf,MAAA,QAAA,IAAA,KAAQ,uBAAuB,aAAK,CAAA,MAAA,KAAA,GAAA,IAAA,IAAU,oBAAmB,KAAA;CAAM,EAE3E,GACA,MACA,MAAA,QAAQ;EAAE,MAAM;EAAO,cAAY,MAAA;CAAQ,IAAI,EAAE,eAAe,KAAK,CACvE,GAAC,EAAA,aACU,MAAA,QAAQ,KAAA,IAAS,KAAA,MAAO,CAAA,GAAA,IAAA;AAEtC,GAAA;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACL"}

package/dist/base/Tag.d.ts

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import type { VNodeChild } from 'vue';
 import { type PartProps } from '../utils/props';
 import { type BadgeOptions } from './badge-styles';

package/dist/base/Tag.js

@@ -10,7 +10,7 @@ import { useDismissible } from "../utils/motion/presence.js";
 import { plainText } from "../utils/data/text.js";
 import { createVNode } from "vue";
 import { _component, childrenProp, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/base/Tag.tsx
 /** 未声明的属性落到 span 上 */
 /** Tag 的样式：root、removable、remove、removing */

package/dist/base/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/base/Tag.tsx"],"sourcesContent":["/**\n * 标签（span）：外观同 Badge，可以带移除按钮（筛选条件、已选项、输入的关键词）。\n *\n *   <Tag onRemove={() => remove(item)}>{item.name}</Tag>\n *\n * 移除时标签先淡出缩小（usePresence），离场结束才调用 onRemove。其余标签平移补位交给所在容器：\n *   const layout = useLayoutAnimation(() => list);\n *   <Tag onRemove={() => layout.change(() => remove(item))}>…</Tag>\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { useLang } from '../config/context';\nimport { useDefaults } from '../config/defaults';\nimport { useDismissible } from '../utils/motion/presence';\nimport { mergeAttrs, mergePartProps, mergeProps, type PartProps } from '../utils/props';\nimport { plainText } from '../utils/data/text';\nimport { badgeParts, badgeRecipe, type BadgeOptions } from './badge-styles';\nimport { useRecipe } from '../config/styles';\nimport { CloseButton, type PresetIconButtonProps } from './CloseButton';\nimport { Icon, type IconData, type IconProps } from './Icon';\nimport { t } from '../config/theme/tokens';\n\n/** 未声明的属性落到 span 上 */\nexport interface TagProps extends PartProps<'span'>, BadgeOptions {\n  /** 文字前的图标 */\n  icon?: IconData;\n  /** 给了就显示移除按钮：点击后标签先淡出缩小，离场结束再调用；标签随后被移除时，焦点交给同组的下一个（没有就上一个）可聚焦元素；没被移除就重新显示 */\n  onRemove?: () => void;\n  /** 移除按钮的无障碍名称，默认“移除”加上标签文字（内容只有文字时） */\n  removeLabel?: string;\n  /** 图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n  /** 移除按钮的部件属性 */\n  propsRemove?: Partial<PresetIconButtonProps>;\n  children?: VNodeChild;\n}\n\n/** Tag 的样式：root、removable、remove、removing */\nexport const tagStyles = css.create({\n  // 移除被拒绝（使用方没移除）时从离场状态过渡回来\n  root: {\n    transition: `opacity ${t.durations.sm} ${t.easings.enter}, scale ${t.durations.sm} ${t.easings.enter}`,\n  },\n  // 移除按钮紧贴右侧，比独立的图标按钮紧凑（标签之间留有间距，满足目标尺寸的间距例外）\n  removable: { paddingInlineEnd: '_xs' },\n  remove: {\n    width: '1.5em',\n    minHeight: '1.5em',\n    marginBlock: `calc(-1 * ${t.space.xs})`,\n    color: 'inherit',\n  },\n  removing: {\n    opacity: 0,\n    scale: 0.8,\n    transition: `opacity ${t.durations.sm} ${t.easings.exit}, scale ${t.durations.sm} ${t.easings.exit}`,\n  },\n});\n\n/** 标签（span）：外观同 Badge，可以带移除按钮 */\nexport const Tag = _component(\n  ({\n    variant,\n    tone,\n    size,\n    radius,\n    icon,\n    onRemove,\n    removeLabel,\n    propsIcon,\n    propsRemove,\n    children,\n    ...rest\n  }: TagProps) => {\n    const lang = useLang();\n    const appearance = useDefaults('Badge', () => ({ variant, tone, size, radius }));\n    const recipe = useRecipe(badgeRecipe);\n    // 离场结束才交给使用方移除；使用方没移除（如拒绝删除）时标签重新出现\n    const dismissible = useDismissible(() => onRemove?.());\n    return () => {\n      const text = plainText(children);\n      const label = removeLabel ?? (text ? `${lang.remove} ${text}` : lang.remove);\n      return (\n        <span\n          {...mergeAttrs<'span'>(\n            {\n              ...badgeParts(appearance(), recipe).root,\n              sx: [\n                badgeParts(appearance(), recipe).root.sx,\n                tagStyles.root,\n                onRemove && tagStyles.removable,\n                dismissible.dismissing && tagStyles.removing,\n              ],\n            },\n            rest,\n            { ref: dismissible.ref },\n          )}\n          data-state={dismissible.state}\n        >\n          {icon && <Icon {...mergePartProps<IconProps>({ icon }, propsIcon)} />}\n          {children}\n          {onRemove && (\n            <CloseButton\n              {...mergeProps<PresetIconButtonProps>(\n                { sx: tagStyles.remove, 'aria-label': label, radius: 'full' },\n                propsRemove,\n                { onClick: dismissible.dismiss },\n              )}\n            />\n          )}\n        </span>\n      );\n    };\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;AAuCA,IAAa,YAAY,IAAI,OAAO;CAElC,MAAM,EACJ,YAAY,WAAW,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ,MAAK,UAAW,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ,QACjG;CAEA,WAAW,EAAE,kBAAkB,MAAM;CACrC,QAAQ;EACN,OAAO;EACP,WAAW;EACX,aAAa,aAAa,EAAE,MAAM,GAAE;EACpC,OAAO;CACT;CACA,UAAU;EACR,SAAS;EACT,OAAO;EACP,YAAY,WAAW,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ,KAAI,UAAW,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ;CAChG;AACF,CAAC;;AAGD,IAAa,MAAM,0BACjB,QAAA,SAYgB;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MADX,OAAIC,UAAA,QAAA,MAAA,KAAA;CAEP,MAAM,OAAO,QAAQ;CACrB,MAAM,aAAa,YAAY,gBAAgB;EAAE,SAAO,QAAA;EAAE,MAAI,KAAA;EAAE,MAAI,KAAA;EAAE,QAAM,OAAA;CAAC,EAAE;CAC/E,MAAM,SAAS,UAAU,WAAW;CAEpC,MAAM,cAAc,qBAAqB,SAAA,QAAW,CAAC;CACrD,aAAa;EACX,MAAM,OAAO,UAAS,SAAA,KAAS;EAC/B,MAAM,QAAQ,YAAA,UAAgB,OAAO,GAAG,KAAK,OAAM,GAAI,SAAS,KAAK;EACrE,OAAAC,YAAA,QAAAC,cAEQ,WACF;GACE,GAAG,WAAW,WAAW,GAAG,MAAM,CAAC,CAAC;GACpC,IAAI;IACF,WAAW,WAAW,GAAG,MAAM,CAAC,CAAC,KAAK;IACtC,UAAU;IACV,SAAA,SAAY,UAAU;IAAS,IAAA,aAC/B,YAAY,cAAc,UAAU,UAAQ,IAAA;GAAA;EAEhD,GACA,MACA,EAAE,KAAK,YAAY,IAAI,CACzB,GAAC,EAAA,cACW,YAAY,MAAK,CAAA,GAAA;GAE5B,KAAA,SAAAD,YAAA,MAAkB,eAA0B,EAAE,MAAI,KAAA,MAAC,GAAC,UAAA,KAAW,GAAC,IAAA;GAAI,SAAA;GAEpE,SAAA,SAAAA,YAAA,aAEO,WACF;IAAE,IAAI,UAAU;IAAQ,cAAc;IAAO,QAAQ;GAAO,GAAC,YAAA,OAE7D,EAAE,SAAS,YAAY,QAAQ,CACjC,GAAC,IAAA;EAEJ,CAAA;CAGP;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}
+{"version":3,"file":"Tag.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/base/Tag.tsx"],"sourcesContent":["/**\n * 标签（span）：外观同 Badge，可以带移除按钮（筛选条件、已选项、输入的关键词）。\n *\n *   <Tag onRemove={() => remove(item)}>{item.name}</Tag>\n *\n * 移除时标签先淡出缩小（usePresence），离场结束才调用 onRemove。其余标签平移补位交给所在容器：\n *   const layout = useLayoutAnimation(() => list);\n *   <Tag onRemove={() => layout.change(() => remove(item))}>…</Tag>\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { useLang } from '../config/context';\nimport { useDefaults } from '../config/defaults';\nimport { useDismissible } from '../utils/motion/presence';\nimport { mergeAttrs, mergePartProps, mergeProps, type PartProps } from '../utils/props';\nimport { plainText } from '../utils/data/text';\nimport { badgeParts, badgeRecipe, type BadgeOptions } from './badge-styles';\nimport { useRecipe } from '../config/styles';\nimport { CloseButton, type PresetIconButtonProps } from './CloseButton';\nimport { Icon, type IconData, type IconProps } from './Icon';\nimport { t } from '../config/theme/tokens';\n\n/** 未声明的属性落到 span 上 */\nexport interface TagProps extends PartProps<'span'>, BadgeOptions {\n  /** 文字前的图标 */\n  icon?: IconData;\n  /** 给了就显示移除按钮：点击后标签先淡出缩小，离场结束再调用；标签随后被移除时，焦点交给同组的下一个（没有就上一个）可聚焦元素；没被移除就重新显示 */\n  onRemove?: () => void;\n  /** 移除按钮的无障碍名称，默认“移除”加上标签文字（内容只有文字时） */\n  removeLabel?: string;\n  /** 图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n  /** 移除按钮的部件属性 */\n  propsRemove?: Partial<PresetIconButtonProps>;\n  children?: VNodeChild;\n}\n\n/** Tag 的样式：root、removable、remove、removing */\nexport const tagStyles = css.create({\n  // 移除被拒绝（使用方没移除）时从离场状态过渡回来\n  root: {\n    transition: `opacity ${t.durations.sm} ${t.easings.enter}, scale ${t.durations.sm} ${t.easings.enter}`,\n  },\n  // 移除按钮紧贴右侧，比独立的图标按钮紧凑（标签之间留有间距，满足目标尺寸的间距例外）\n  removable: { paddingInlineEnd: '_xs' },\n  remove: {\n    width: '1.5em',\n    minHeight: '1.5em',\n    marginBlock: `calc(-1 * ${t.space.xs})`,\n    color: 'inherit',\n  },\n  removing: {\n    opacity: 0,\n    scale: 0.8,\n    transition: `opacity ${t.durations.sm} ${t.easings.exit}, scale ${t.durations.sm} ${t.easings.exit}`,\n  },\n});\n\n/** 标签（span）：外观同 Badge，可以带移除按钮 */\nexport const Tag = _component(\n  ({\n    variant,\n    tone,\n    size,\n    radius,\n    icon,\n    onRemove,\n    removeLabel,\n    propsIcon,\n    propsRemove,\n    children,\n    ...rest\n  }: TagProps) => {\n    const lang = useLang();\n    const appearance = useDefaults('Badge', () => ({ variant, tone, size, radius }));\n    const recipe = useRecipe(badgeRecipe);\n    // 离场结束才交给使用方移除；使用方没移除（如拒绝删除）时标签重新出现\n    const dismissible = useDismissible(() => onRemove?.());\n    return () => {\n      const text = plainText(children);\n      const label = removeLabel ?? (text ? `${lang.remove} ${text}` : lang.remove);\n      return (\n        <span\n          {...mergeAttrs<'span'>(\n            {\n              ...badgeParts(appearance(), recipe).root,\n              sx: [\n                badgeParts(appearance(), recipe).root.sx,\n                tagStyles.root,\n                onRemove && tagStyles.removable,\n                dismissible.dismissing && tagStyles.removing,\n              ],\n            },\n            rest,\n            { ref: dismissible.ref },\n          )}\n          data-state={dismissible.state}\n        >\n          {icon && <Icon {...mergePartProps<IconProps>({ icon }, propsIcon)} />}\n          {children}\n          {onRemove && (\n            <CloseButton\n              {...mergeProps<PresetIconButtonProps>(\n                { sx: tagStyles.remove, 'aria-label': label, radius: 'full' },\n                propsRemove,\n                { onClick: dismissible.dismiss },\n              )}\n            />\n          )}\n        </span>\n      );\n    };\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;AAuCA,IAAa,YAAY,IAAI,OAAO;CAElC,MAAM,EACJ,YAAY,WAAW,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ,MAAK,UAAW,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ,QACjG;CAEA,WAAW,EAAE,kBAAkB,MAAM;CACrC,QAAQ;EACN,OAAO;EACP,WAAW;EACX,aAAa,aAAa,EAAE,MAAM,GAAE;EACpC,OAAO;CACT;CACA,UAAU;EACR,SAAS;EACT,OAAO;EACP,YAAY,WAAW,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ,KAAI,UAAW,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ;CAChG;AACF,CAAC;;AAGD,IAAa,MAAM,0BACjB,QAAA,SAYgB;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MADX,OAAIC,UAAA,QAAA,MAAA,KAAA;CAEP,MAAM,OAAO,QAAQ;CACrB,MAAM,aAAa,YAAY,gBAAgB;EAAE,SAAO,QAAA;EAAE,MAAI,KAAA;EAAE,MAAI,KAAA;EAAE,QAAM,OAAA;CAAC,EAAE;CAC/E,MAAM,SAAS,UAAU,WAAW;CAEpC,MAAM,cAAc,qBAAqB,SAAA,QAAW,CAAC;CACrD,aAAa;EACX,MAAM,OAAO,UAAS,SAAA,KAAS;EAC/B,MAAM,QAAQ,YAAA,UAAgB,OAAO,GAAG,KAAK,OAAM,GAAI,SAAS,KAAK;EACrE,OAAAC,YAAA,QAAAC,cAEQ,WACF;GACE,GAAG,WAAW,WAAW,GAAG,MAAM,CAAC,CAAC;GACpC,IAAI;IACF,WAAW,WAAW,GAAG,MAAM,CAAC,CAAC,KAAK;IACtC,UAAU;IACV,SAAA,SAAY,UAAU;IAAS,IAAA,aAC/B,YAAY,cAAc,UAAU,UAAQ,IAAA;GAAA;EAEhD,GACA,MACA,EAAE,KAAK,YAAY,IAAI,CACzB,GAAC,EAAA,cACW,YAAY,MAAK,CAAA,GAAA;GAE5B,KAAA,SAAAD,YAAA,MAAkB,eAA0B,EAAE,MAAI,KAAA,MAAC,GAAC,UAAA,KAAW,GAAC,IAAA;GAAI,SAAA;GAEpE,SAAA,SAAAA,YAAA,aAEO,WACF;IAAE,IAAI,UAAU;IAAQ,cAAc;IAAO,QAAQ;GAAO,GAAC,YAAA,OAE7D,EAAE,SAAS,YAAY,QAAQ,CACjC,GAAC,IAAA;EAEJ,CAAA;CAGP;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/base/Text.d.ts

@@ -9,7 +9,7 @@
  *   <Text numeric tone="danger">超时 3 天</Text>       金额、计数：等宽数字，上下对齐
  */
 import { type TsxComponent } from '@zerodep-dev/vue-tsx-pro-tsx';
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import type { VNodeChild } from 'vue';
 import { type PartProps } from '../utils/props';
 import { type FontWeight, type TextAlign, type TextSize, type TextWrap, type Tone } from '../utils/style/typography';

package/dist/base/Text.js

@@ -2,7 +2,7 @@ import { mergeAttrs } from "../utils/props.js";
 import { fontSizeStyles, fontWeightStyles, lineClampStyles, textAlignStyles, textStyles, textWrapStyles, toneStyles } from "../utils/style/typography.js";
 import { createVNode, isVNode } from "vue";
 import { _component, childrenProp, forwardChildren, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/base/Text.tsx
 /** 文字组件可用的标签 */
 /** 文字的样式选项，五个文字组件共用 */

package/dist/base/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","names":["_isVNode","_vtp_readonlyProp","_vtp_restProps","_createVNode","_vtp_forwardChildren","Text"],"sources":["../../src/base/Text.tsx"],"sourcesContent":["/**\n * 正文文字：字号、字重、色调、对齐、截断。一个元素一个组件（COMPONENTS.md §1），由同一个工厂生成：\n *   Text（span）、Paragraph（p）、Strong（strong）、Em（em）、Small（small）。\n * 不写的属性都继承上下文；Paragraph、Strong、Small 各有自己的默认值。表单标签以后由 Label 组件负责。\n *\n *   <Text tone=\"muted\" size=\"sm\">更新于 3 分钟前</Text>\n *   <Paragraph lineClamp={2}>很长的描述…</Paragraph>\n *   <Text mono size=\"sm\">PO-2026-0187</Text>         编号、件号：等宽字体\n *   <Text numeric tone=\"danger\">超时 3 天</Text>       金额、计数：等宽数字，上下对齐\n */\nimport { _component, type TsxComponent } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport {\n  fontSizeStyles,\n  fontWeightStyles,\n  lineClampStyles,\n  textAlignStyles,\n  textStyles,\n  textWrapStyles,\n  toneStyles,\n  type FontWeight,\n  type TextAlign,\n  type TextSize,\n  type TextWrap,\n  type Tone,\n} from '../utils/style/typography';\n\n/** 文字组件可用的标签 */\nexport type TextTag = 'span' | 'p' | 'strong' | 'em' | 'small';\n\n/** 文字的样式选项，五个文字组件共用 */\nexport interface TextOptions {\n  /** 字号档位，对应主题的 fontSizes；不写时继承（Small 默认 xs） */\n  size?: TextSize;\n  /** 字重，对应主题的 fontWeights；不写时继承（Strong 默认 semibold） */\n  weight?: FontWeight;\n  /** 色调：muted 次要说明，其余为品牌色与提示色的文字色；不写时继承 */\n  tone?: Tone;\n  /** 水平对齐，不写时继承（只在块级元素上有效，如 Paragraph） */\n  align?: TextAlign;\n  /** 单行省略（在块级元素或 flex 子项上生效） */\n  truncate?: boolean;\n  /** 最多显示几行，超出省略 */\n  lineClamp?: number;\n  /** 换行方式：pretty 避免最后一行只剩一个字（Paragraph 默认 pretty） */\n  wrap?: TextWrap;\n  /** 数字等宽（tabular-nums）：金额、计数、日期，上下对齐、变化时不跳动 */\n  numeric?: boolean;\n  /** 等宽字体：编号、件号、代码片段 */\n  mono?: boolean;\n  children?: VNodeChild;\n}\n\n/** 未声明的属性落到对应元素上：Text 为 span，Paragraph 为 p，以此类推 */\nexport type TextProps<Tag extends TextTag = 'span'> = PartProps<Tag> & TextOptions;\n\n/** Text 系列 的样式：paragraph */\nexport const textComponentStyles = css.create({\n  // 段落之间的距离交给布局（Flex 的 gap），与标题一致\n  paragraph: { margin: 0 },\n});\n\n/** 生成文字组件：标签、组件名与默认的字号、字重、换行（Text、Paragraph、Strong、Em、Small 由它生成） */\nexport function createText<Tag extends TextTag>(\n  tag: Tag,\n  name: string,\n  defaults: Pick<TextOptions, 'size' | 'weight' | 'wrap'> = {},\n): TsxComponent<TextProps<Tag>> {\n  // 实现按五种标签共有的属性写，对外每个组件只接受自己元素的属性\n  return _component(\n    ({\n      size = defaults.size,\n      weight = defaults.weight,\n      tone,\n      align,\n      truncate = false,\n      lineClamp,\n      wrap = defaults.wrap,\n      numeric = false,\n      mono = false,\n      children,\n      ...rest\n    }: TextProps<TextTag>) =>\n      () => {\n        const Tag = tag as TextTag;\n        const sx = [\n          tag === 'p' && textComponentStyles.paragraph,\n          size && fontSizeStyles[size],\n          weight && fontWeightStyles[weight],\n          tone && toneStyles[tone],\n          align && textAlignStyles[align],\n          wrap && textWrapStyles[wrap],\n          truncate && textStyles.truncate,\n          lineClamp != null && [textStyles.clamp, lineClampStyles.lines(lineClamp)],\n          numeric && textStyles.numeric,\n          mono && textStyles.mono,\n        ];\n        return <Tag {...mergeAttrs<TextTag>({ sx }, rest)}>{children}</Tag>;\n      },\n    { name },\n  ) as unknown as TsxComponent<TextProps<Tag>>;\n}\n\n/** 行内文字（span）：不加任何默认样式，全部继承上下文 */\nexport const Text = createText('span', 'Text');\n/** 段落（p）：去掉浏览器默认外边距（间距交给布局），换行默认 pretty */\nexport const Paragraph = createText('p', 'Paragraph', { wrap: 'pretty' });\n/** 重要的内容（strong）：读屏可能加重语气；默认字重 semibold */\nexport const Strong = createText('strong', 'Strong', { weight: 'semibold' });\n/** 语气上的强调（em）：浏览器默认斜体 */\nexport const Em = createText('em', 'Em');\n/** 附注、版权、细则（small）：默认字号 xs */\nexport const Small = createText('small', 'Small', { size: 'xs' });\n"],"mappings":";;;;;;;;;AAuDA,SAAA,QAAA,GAAA;CAAA,OAAA,OAAA,MAAA,cAAA,OAAA,UAAA,SAAA,KAAA,CAAA,MAAA,qBAAA,CAAAA,QAAA,CAAA;AAAA;;AAIA,IAAa,sBAAsB,IAAI,OAAO,EAE5C,WAAW,EAAE,QAAQ,EAAE,EACzB,CAAC;;AAGD,SAAgB,WACd,KACA,MACA,WAA0D,CAAC,GAC7B;CAE9B,OAAO,0BACL,QAAA,SAAA;EAAA,MAAA,OAAAC,aAAA,QAAA,cACS,SAAS,IAAI;EAAA,MAAA,SAAAA,aAAA,QAAA,gBACX,SAAS,MAAM;EAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;EAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;EAAA,MAAA,WAAAA,aAAA,QAAA,YAGb,KAAK;EAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;EAAA,MAAA,OAAAA,aAAA,QAAA,cAET,SAAS,IAAI;EAAA,MAAA,UAAAA,aAAA,QAAA,WACV,KAAK;EAAA,MAAA,OAAAA,aAAA,QAAA,QACR,KAAK;EAAA,aAAA,MAAA;EAAA,MAET,OAAIC,UAAA,QAAA,MAAA,KAAA;EAAA,aAED;GAAA,IAAA;GACJ,MAAM,MAAM;GACZ,MAAM,KAAK;IACT,QAAQ,OAAO,oBAAoB;IACnC,KAAA,SAAQ,eAAc,KAAA;IACtB,OAAA,SAAU,iBAAgB,OAAA;IAC1B,KAAA,SAAQ,WAAU,KAAA;IAClB,MAAA,SAAS,gBAAe,MAAA;IACxB,KAAA,SAAQ,eAAc,KAAA;IACtB,SAAA,SAAY,WAAW;IACvB,UAAA,SAAa,QAAQ,CAAC,WAAW,OAAO,gBAAgB,MAAK,UAAA,KAAU,CAAC;IACxE,QAAA,SAAW,WAAW;IACtB,KAAA,SAAQ,WAAW;GAAI;GAEzB,OAAAC,YAAA,KAAgB,WAAoB,EAAE,GAAG,GAAG,IAAI,GAAC,QAAA,QAA1CC,gBAAA,MAA2D,CAAC,IAAA,QAAA,EAAA,eAAA,CAAA,KAAA,EAAA,CAAA;EACrE;CAAC,GACH;EAAA,OAAA;GAAA;GAAA;GAAA;GAAA;GAAA;GAAA;GAAA;GAAA;GAAA;EAAA;EAAE;CAAK,CACT;AACF;;AAGA,IAAaC,SAAO,WAAW,QAAQ,MAAM;;AAE7C,IAAa,YAAY,WAAW,KAAK,aAAa,EAAE,MAAM,SAAS,CAAC;;AAExE,IAAa,SAAS,WAAW,UAAU,UAAU,EAAE,QAAQ,WAAW,CAAC;;AAE3E,IAAa,KAAK,WAAW,MAAM,IAAI;;AAEvC,IAAa,QAAQ,WAAW,SAAS,SAAS,EAAE,MAAM,KAAK,CAAC"}
+{"version":3,"file":"Text.js","names":["_isVNode","_vtp_readonlyProp","_vtp_restProps","_createVNode","_vtp_forwardChildren","Text"],"sources":["../../src/base/Text.tsx"],"sourcesContent":["/**\n * 正文文字：字号、字重、色调、对齐、截断。一个元素一个组件（COMPONENTS.md §1），由同一个工厂生成：\n *   Text（span）、Paragraph（p）、Strong（strong）、Em（em）、Small（small）。\n * 不写的属性都继承上下文；Paragraph、Strong、Small 各有自己的默认值。表单标签以后由 Label 组件负责。\n *\n *   <Text tone=\"muted\" size=\"sm\">更新于 3 分钟前</Text>\n *   <Paragraph lineClamp={2}>很长的描述…</Paragraph>\n *   <Text mono size=\"sm\">PO-2026-0187</Text>         编号、件号：等宽字体\n *   <Text numeric tone=\"danger\">超时 3 天</Text>       金额、计数：等宽数字，上下对齐\n */\nimport { _component, type TsxComponent } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport {\n  fontSizeStyles,\n  fontWeightStyles,\n  lineClampStyles,\n  textAlignStyles,\n  textStyles,\n  textWrapStyles,\n  toneStyles,\n  type FontWeight,\n  type TextAlign,\n  type TextSize,\n  type TextWrap,\n  type Tone,\n} from '../utils/style/typography';\n\n/** 文字组件可用的标签 */\nexport type TextTag = 'span' | 'p' | 'strong' | 'em' | 'small';\n\n/** 文字的样式选项，五个文字组件共用 */\nexport interface TextOptions {\n  /** 字号档位，对应主题的 fontSizes；不写时继承（Small 默认 xs） */\n  size?: TextSize;\n  /** 字重，对应主题的 fontWeights；不写时继承（Strong 默认 semibold） */\n  weight?: FontWeight;\n  /** 色调：muted 次要说明，其余为品牌色与提示色的文字色；不写时继承 */\n  tone?: Tone;\n  /** 水平对齐，不写时继承（只在块级元素上有效，如 Paragraph） */\n  align?: TextAlign;\n  /** 单行省略（在块级元素或 flex 子项上生效） */\n  truncate?: boolean;\n  /** 最多显示几行，超出省略 */\n  lineClamp?: number;\n  /** 换行方式：pretty 避免最后一行只剩一个字（Paragraph 默认 pretty） */\n  wrap?: TextWrap;\n  /** 数字等宽（tabular-nums）：金额、计数、日期，上下对齐、变化时不跳动 */\n  numeric?: boolean;\n  /** 等宽字体：编号、件号、代码片段 */\n  mono?: boolean;\n  children?: VNodeChild;\n}\n\n/** 未声明的属性落到对应元素上：Text 为 span，Paragraph 为 p，以此类推 */\nexport type TextProps<Tag extends TextTag = 'span'> = PartProps<Tag> & TextOptions;\n\n/** Text 系列 的样式：paragraph */\nexport const textComponentStyles = css.create({\n  // 段落之间的距离交给布局（Flex 的 gap），与标题一致\n  paragraph: { margin: 0 },\n});\n\n/** 生成文字组件：标签、组件名与默认的字号、字重、换行（Text、Paragraph、Strong、Em、Small 由它生成） */\nexport function createText<Tag extends TextTag>(\n  tag: Tag,\n  name: string,\n  defaults: Pick<TextOptions, 'size' | 'weight' | 'wrap'> = {},\n): TsxComponent<TextProps<Tag>> {\n  // 实现按五种标签共有的属性写，对外每个组件只接受自己元素的属性\n  return _component(\n    ({\n      size = defaults.size,\n      weight = defaults.weight,\n      tone,\n      align,\n      truncate = false,\n      lineClamp,\n      wrap = defaults.wrap,\n      numeric = false,\n      mono = false,\n      children,\n      ...rest\n    }: TextProps<TextTag>) =>\n      () => {\n        const Tag = tag as TextTag;\n        const sx = [\n          tag === 'p' && textComponentStyles.paragraph,\n          size && fontSizeStyles[size],\n          weight && fontWeightStyles[weight],\n          tone && toneStyles[tone],\n          align && textAlignStyles[align],\n          wrap && textWrapStyles[wrap],\n          truncate && textStyles.truncate,\n          lineClamp != null && [textStyles.clamp, lineClampStyles.lines(lineClamp)],\n          numeric && textStyles.numeric,\n          mono && textStyles.mono,\n        ];\n        return <Tag {...mergeAttrs<TextTag>({ sx }, rest)}>{children}</Tag>;\n      },\n    { name },\n  ) as unknown as TsxComponent<TextProps<Tag>>;\n}\n\n/** 行内文字（span）：不加任何默认样式，全部继承上下文 */\nexport const Text = createText('span', 'Text');\n/** 段落（p）：去掉浏览器默认外边距（间距交给布局），换行默认 pretty */\nexport const Paragraph = createText('p', 'Paragraph', { wrap: 'pretty' });\n/** 重要的内容（strong）：读屏可能加重语气；默认字重 semibold */\nexport const Strong = createText('strong', 'Strong', { weight: 'semibold' });\n/** 语气上的强调（em）：浏览器默认斜体 */\nexport const Em = createText('em', 'Em');\n/** 附注、版权、细则（small）：默认字号 xs */\nexport const Small = createText('small', 'Small', { size: 'xs' });\n"],"mappings":";;;;;;;;;AAuDA,SAAA,QAAA,GAAA;CAAA,OAAA,OAAA,MAAA,cAAA,OAAA,UAAA,SAAA,KAAA,CAAA,MAAA,qBAAA,CAAAA,QAAA,CAAA;AAAA;;AAIA,IAAa,sBAAsB,IAAI,OAAO,EAE5C,WAAW,EAAE,QAAQ,EAAE,EACzB,CAAC;;AAGD,SAAgB,WACd,KACA,MACA,WAA0D,CAAC,GAC7B;CAE9B,OAAO,0BACL,QAAA,SAAA;EAAA,MAAA,OAAAC,aAAA,QAAA,cACS,SAAS,IAAI;EAAA,MAAA,SAAAA,aAAA,QAAA,gBACX,SAAS,MAAM;EAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;EAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;EAAA,MAAA,WAAAA,aAAA,QAAA,YAGb,KAAK;EAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;EAAA,MAAA,OAAAA,aAAA,QAAA,cAET,SAAS,IAAI;EAAA,MAAA,UAAAA,aAAA,QAAA,WACV,KAAK;EAAA,MAAA,OAAAA,aAAA,QAAA,QACR,KAAK;EAAA,aAAA,MAAA;EAAA,MAET,OAAIC,UAAA,QAAA,MAAA,KAAA;EAAA,aAED;GAAA,IAAA;GACJ,MAAM,MAAM;GACZ,MAAM,KAAK;IACT,QAAQ,OAAO,oBAAoB;IACnC,KAAA,SAAQ,eAAc,KAAA;IACtB,OAAA,SAAU,iBAAgB,OAAA;IAC1B,KAAA,SAAQ,WAAU,KAAA;IAClB,MAAA,SAAS,gBAAe,MAAA;IACxB,KAAA,SAAQ,eAAc,KAAA;IACtB,SAAA,SAAY,WAAW;IACvB,UAAA,SAAa,QAAQ,CAAC,WAAW,OAAO,gBAAgB,MAAK,UAAA,KAAU,CAAC;IACxE,QAAA,SAAW,WAAW;IACtB,KAAA,SAAQ,WAAW;GAAI;GAEzB,OAAAC,YAAA,KAAgB,WAAoB,EAAE,GAAG,GAAG,IAAI,GAAC,QAAA,QAA1CC,gBAAA,MAA2D,CAAC,IAAA,QAAA,EAAA,eAAA,CAAA,KAAA,EAAA,CAAA;EACrE;CAAC,GACH;EAAA,OAAA;GAAA;GAAA;GAAA;GAAA;GAAA;GAAA;GAAA;GAAA;GAAA;EAAA;EAAE;CAAK,CACT;AACF;;AAGA,IAAaC,SAAO,WAAW,QAAQ,MAAM;;AAE7C,IAAa,YAAY,WAAW,KAAK,aAAa,EAAE,MAAM,SAAS,CAAC;;AAExE,IAAa,SAAS,WAAW,UAAU,UAAU,EAAE,QAAQ,WAAW,CAAC;;AAE3E,IAAa,KAAK,WAAW,MAAM,IAAI;;AAEvC,IAAa,QAAQ,WAAW,SAAS,SAAS,EAAE,MAAM,KAAK,CAAC"}

package/dist/base/VisuallyHidden.d.ts

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import type { VNodeChild } from 'vue';
 import { type PartProps } from '../utils/props';
 /** 未声明的属性落到 span 上 */

package/dist/base/VisuallyHidden.js

@@ -1,7 +1,7 @@
 import { mergeAttrs } from "../utils/props.js";
 import { createVNode } from "vue";
 import { _component, childrenProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/base/VisuallyHidden.tsx
 /** 未声明的属性落到 span 上 */
 /** VisuallyHidden 的样式：hidden */

package/dist/base/VisuallyHidden.js.map

@@ -1 +1 @@
-{"version":3,"file":"VisuallyHidden.js","names":["_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/base/VisuallyHidden.tsx"],"sourcesContent":["/**\n * 只给读屏器看的内容：视觉上不占位，读屏照常朗读。\n * 用于图标按钮的名称、“在新窗口打开”这类补充说明。渲染为 span（行内文字，与 Radix 一致）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { mergeAttrs, type PartProps } from '../utils/props';\n\n/** 未声明的属性落到 span 上 */\nexport interface VisuallyHiddenProps extends PartProps<'span'> {\n  children?: VNodeChild;\n}\n\n/** VisuallyHidden 的样式：hidden */\nexport const visuallyHiddenStyles = css.create({\n  // 不用 display: none / visibility: hidden：那样读屏也读不到\n  hidden: {\n    position: 'absolute',\n    width: 1,\n    height: 1,\n    padding: 0,\n    margin: -1,\n    overflow: 'hidden',\n    clipPath: 'inset(50%)',\n    whiteSpace: 'nowrap',\n    borderWidth: 0,\n  },\n});\n\n/** 只给读屏器看的文字（span）：视觉上不占位 */\nexport const VisuallyHidden = _component(({ children, ...rest }: VisuallyHiddenProps) => () => (\n  <span {...mergeAttrs<'span'>({ sx: visuallyHiddenStyles.hidden }, rest)}>{children}</span>\n));\n"],"mappings":";;;;;;;AAeA,IAAa,uBAAuB,IAAI,OAAO,EAE7C,QAAQ;CACN,UAAU;CACV,OAAO;CACP,QAAQ;CACR,SAAS;CACT,QAAQ;CACR,UAAU;CACV,UAAU;CACV,YAAY;CACZ,aAAa;AACf,EACF,CAAC;;AAGD,IAAa,iBAAiB,0BAAW,QAAA,SAAA;CAAA,MAAA,WAAAA,aAAA,MAAA;CAAA,MAAgB,OAAIC,UAAA,QAAA,MAAA,KAAA;CAAA,aAA4BC,YAAA,QAC7E,WAAmB,EAAE,IAAI,qBAAqB,OAAO,GAAG,IAAI,GAAC,CAAA,SAAA,KAAA,CAAA;AACxE,GAAA,EAAA,MAAA,iBAAA,CAAA"}
+{"version":3,"file":"VisuallyHidden.js","names":["_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/base/VisuallyHidden.tsx"],"sourcesContent":["/**\n * 只给读屏器看的内容：视觉上不占位，读屏照常朗读。\n * 用于图标按钮的名称、“在新窗口打开”这类补充说明。渲染为 span（行内文字，与 Radix 一致）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { mergeAttrs, type PartProps } from '../utils/props';\n\n/** 未声明的属性落到 span 上 */\nexport interface VisuallyHiddenProps extends PartProps<'span'> {\n  children?: VNodeChild;\n}\n\n/** VisuallyHidden 的样式：hidden */\nexport const visuallyHiddenStyles = css.create({\n  // 不用 display: none / visibility: hidden：那样读屏也读不到\n  hidden: {\n    position: 'absolute',\n    width: 1,\n    height: 1,\n    padding: 0,\n    margin: -1,\n    overflow: 'hidden',\n    clipPath: 'inset(50%)',\n    whiteSpace: 'nowrap',\n    borderWidth: 0,\n  },\n});\n\n/** 只给读屏器看的文字（span）：视觉上不占位 */\nexport const VisuallyHidden = _component(({ children, ...rest }: VisuallyHiddenProps) => () => (\n  <span {...mergeAttrs<'span'>({ sx: visuallyHiddenStyles.hidden }, rest)}>{children}</span>\n));\n"],"mappings":";;;;;;;AAeA,IAAa,uBAAuB,IAAI,OAAO,EAE7C,QAAQ;CACN,UAAU;CACV,OAAO;CACP,QAAQ;CACR,SAAS;CACT,QAAQ;CACR,UAAU;CACV,UAAU;CACV,YAAY;CACZ,aAAa;AACf,EACF,CAAC;;AAGD,IAAa,iBAAiB,0BAAW,QAAA,SAAA;CAAA,MAAA,WAAAA,aAAA,MAAA;CAAA,MAAgB,OAAIC,UAAA,QAAA,MAAA,KAAA;CAAA,aAA4BC,YAAA,QAC7E,WAAmB,EAAE,IAAI,qBAAqB,OAAO,GAAG,IAAI,GAAC,CAAA,SAAA,KAAA,CAAA;AACxE,GAAA,EAAA,MAAA,iBAAA,CAAA"}

package/dist/base/badge-styles.d.ts

@@ -1,7 +1,7 @@
 /**
  * Badge 与 Tag 共用的外观（配方）：样式 × 色调逐项写主题 token（组合档位）；字号、圆角另外叠加。
  */
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import type { PartLayer } from '../config/styles';
 import { type TextSize } from '../utils/style/typography';
 import { type Radius } from '../utils/style/styles';

package/dist/base/badge-styles.js

@@ -1,6 +1,6 @@
 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";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/base/badge-styles.ts
 /**
 * Badge 与 Tag 共用的外观（配方）：样式 × 色调逐项写主题 token（组合档位）；字号、圆角另外叠加。

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

@@ -1 +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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"}
+{"version":3,"file":"badge-styles.js","names":[],"sources":["../../src/base/badge-styles.ts"],"sourcesContent":["/**\n * Badge 与 Tag 共用的外观（配方）：样式 × 色调逐项写主题 token（组合档位）；字号、圆角另外叠加。\n */\nimport { 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

@@ -5,7 +5,7 @@
  * 外观 = variant（样式）× tone（色调）× size（字号档位，内部尺寸随之按 em 缩放）× radius（圆角）。
  */
 import { type VNodeChild } from 'vue';
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { 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';

package/dist/base/button-core.js

@@ -11,7 +11,7 @@ import { rippleHostStyles, useRipple } from "../utils/dom/ripple.js";
 import { AttachedContext, attachedStyles } from "../utils/style/attached.js";
 import { h } from "vue";
 import { createContext } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/base/button-core.ts
 /**
 * 按钮家族（Button、LinkButton、IconButton、CloseButton、ClearButton）的内核：共用的外观、选项、内容排布与行为。

package/dist/base/button-core.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-core.js","names":[],"sources":["../../src/base/button-core.ts"],"sourcesContent":["/**\n * 按钮家族（Button、LinkButton、IconButton、CloseButton、ClearButton）的内核：共用的外观、选项、内容排布与行为。\n * 一个元素一个组件（COMPONENTS.md §1）：各组件只管自己元素的行为，样式与内容排布都从这里取。\n *\n * 外观 = variant（样式）× tone（色调）× size（字号档位，内部尺寸随之按 em 缩放）× radius（圆角）。\n */\nimport { h, type VNodeChild } from 'vue';\nimport { createContext } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { SxStyles } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { Icon, type IconData, type IconProps } from './Icon';\nimport { Spinner, type SpinnerProps } from './Spinner';\nimport { useDefaults } from '../config/defaults';\nimport { partAttrs, useRecipe } from '../config/styles';\nimport { rippleHostStyles, useRipple, type RippleHandlers } from '../utils/dom/ripple';\nimport { mergeAttrs, mergeProps, type PartProps } from '../utils/props';\nimport { focusRingStyles, radiusStyles, type Radius } from '../utils/style/styles';\nimport type { StatusTone } from '../utils/style/tone-styles';\nimport {\n  AttachedContext,\n  attachedStyles,\n  type AttachedOrientations,\n} from '../utils/style/attached';\nimport { interactionTransitions } from '../utils/style/transitions';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\nimport { t } from '../config/theme/tokens';\n\n/** 按钮样式 */\nexport interface ButtonVariants {\n  /** 实底：一组操作里的主要操作，每组最多一个 */\n  solid: unknown;\n  /** 浅色底：次要但仍需突出的操作，如卡片里的操作 */\n  soft: unknown;\n  /** 浅色底加描边：表单、设置页里常用的次要操作 */\n  surface: unknown;\n  /** 只有描边：次要操作 */\n  outline: unknown;\n  /** 无底无边，悬停时才有底色：工具栏、行内操作、图标按钮 */\n  ghost: unknown;\n  /** 看起来像链接（无底、无内边距、悬停下划线）：文字中间的操作 */\n  link: unknown;\n}\n\n/** 按钮家族共用的外观选项；可以用 createUi / Provider 的 defaults.Button 统一改默认值 */\nexport interface ButtonOptions {\n  /**\n   * 样式；可以用 createUi / Provider 的 defaults.Button 统一改\n   * @default 'solid'\n   */\n  variant?: keyof ButtonVariants;\n  /**\n   * 色调：与 Badge、Alert 等同一套\n   * @default 'accent'\n   */\n  tone?: StatusTone;\n  /** 字号档位，内部尺寸随之缩放；不写时继承上下文字号 */\n  size?: TextSize;\n  /**\n   * 圆角\n   * @default 'md'\n   */\n  radius?: Radius;\n  /** 加载中：显示旋转指示，宽度不变，点击无效，焦点保留；读屏会得知 aria-busy */\n  loading?: boolean;\n  /** 按下时的波纹效果；不写时沿用 createUi / Provider 的 ripple（默认开启） */\n  ripple?: boolean;\n  /** 加载指示（Spinner）的部件属性 */\n  propsSpinner?: Partial<SpinnerProps>;\n}\n\n/** 有文字的按钮（Button、LinkButton）另有的选项 */\nexport interface ButtonContentOptions {\n  /** 文字前的图标：`import { Plus } from '@lucide/icons'` */\n  icon?: IconData;\n  /** 文字后的图标 */\n  iconEnd?: IconData;\n  /** 占满容器宽度 */\n  fullWidth?: boolean;\n  /** 内容层（包着图标与文字的 span）的部件属性 */\n  propsContent?: PartProps<'span'>;\n  /** 前置图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n  /** 后置图标的部件属性 */\n  propsIconEnd?: Partial<IconProps>;\n  /** 按钮文字；加载中仍保留（读屏名称不变） */\n  children?: VNodeChild;\n}\n\n/** 按钮的基础样式：去掉默认外观，继承文字样式，指针与触摸的反馈；Button 家族也用它 */\nexport const buttonBaseStyles = css.create({\n  root: {\n    boxSizing: 'border-box',\n    margin: 0,\n    padding: 0,\n    borderWidth: 0,\n    backgroundColor: 'transparent',\n    color: 'inherit',\n    fontFamily: 'inherit',\n    fontSize: 'inherit',\n    lineHeight: 'inherit',\n    textAlign: 'inherit',\n    textDecoration: 'none',\n    cursor: 'pointer',\n    userSelect: 'none',\n    // 触摸时不等双击缩放的判定，点击立即响应\n    touchAction: 'manipulation',\n    WebkitTapHighlightColor: 'transparent',\n  },\n  disabled: { cursor: 'not-allowed' },\n});\n\n/** 按钮家族 的样式：root、square、fullWidth、disabled、content、hidden 等 */\nexport const buttonStyles = css.create({\n  // 去掉默认外观、指针与触摸反馈、颜色过渡来自 buttonBaseStyles 与 interactionTransitions（buttonSx 里排在前面）\n  root: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: '_sm',\n    minHeight: `max(${t.sizes.control}, ${t.sizes.minTarget})`,\n    paddingBlock: '_xs',\n    paddingInline: '_lg',\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: 'transparent',\n    fontWeight: '_semibold',\n    lineHeight: '_tight',\n    whiteSpace: 'nowrap',\n  },\n  // 图标按钮：宽高相等\n  square: {\n    paddingInline: 0,\n    width: `max(${t.sizes.control}, ${t.sizes.minTarget})`,\n    flexShrink: 0,\n  },\n  fullWidth: { display: 'flex', width: '_full' },\n  disabled: { opacity: '_disabled', cursor: 'not-allowed' },\n  content: { display: 'inline-flex', alignItems: 'center', gap: '_sm' },\n  // 加载中隐藏内容但保留占位与无障碍名称（不用 visibility: hidden，那样读屏也读不到）\n  hidden: { opacity: 0 },\n  spinner: {\n    position: 'absolute',\n    inset: 0,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n});\n\n/** 悬停变色只在可用时：原生 disabled 的按钮照样匹配 :hover，悬停变色会让人以为还能点 */\nconst HOVER = ':hover:not(:disabled,[aria-disabled=\"true\"])';\n\n/**\n * 按钮的样式（配方）：样式 × 色调逐项写主题 token（组合档位）。中性色没有专门的实底色，用反色表面。\n * 实底悬停用各色调的 Hover token：主题检查保证它与 Contrast 字色到 4.5:1\n */\nexport const buttonRecipe = css.recipe({\n  name: 'Button',\n  parts: ['root'],\n  variants: {\n    variant: {\n      solid: {},\n      soft: {},\n      surface: {},\n      outline: {},\n      ghost: {},\n      link: {\n        root: {\n          minHeight: 0,\n          paddingInline: 0,\n          fontWeight: '_medium',\n          textUnderlineOffset: '0.2em',\n          textDecorationLine: { default: 'none', [HOVER]: 'underline' },\n        },\n      },\n    },\n    tone: { neutral: {}, accent: {}, info: {}, success: {}, warning: {}, danger: {} },\n  },\n  compound: [\n    {\n      when: { variant: 'solid', tone: 'neutral' },\n      root: {\n        color: '_inverseText',\n        backgroundColor: {\n          default: '_inverseSurface',\n          [HOVER]: `color-mix(in oklab, ${t.colors.inverseSurface} 85%, ${t.colors.background})`,\n        },\n      },\n    },\n    {\n      when: { variant: 'solid', tone: 'accent' },\n      root: {\n        color: '_accentContrast',\n        backgroundColor: { default: '_accent', [HOVER]: '_accentHover' },\n      },\n    },\n    {\n      when: { variant: 'solid', tone: 'info' },\n      root: {\n        color: '_infoContrast',\n        backgroundColor: { default: '_info', [HOVER]: '_infoHover' },\n      },\n    },\n    {\n      when: { variant: 'solid', tone: 'success' },\n      root: {\n        color: '_successContrast',\n        backgroundColor: { default: '_success', [HOVER]: '_successHover' },\n      },\n    },\n    {\n      when: { variant: 'solid', tone: 'warning' },\n      root: {\n        color: '_warningContrast',\n        backgroundColor: { default: '_warning', [HOVER]: '_warningHover' },\n      },\n    },\n    {\n      when: { variant: 'solid', tone: 'danger' },\n      root: {\n        color: '_dangerContrast',\n        backgroundColor: { default: '_danger', [HOVER]: '_dangerHover' },\n      },\n    },\n    {\n      when: { variant: 'soft', tone: 'neutral' },\n      root: { color: '_text', backgroundColor: { default: '_fill', [HOVER]: '_fillHover' } },\n    },\n    {\n      when: { variant: 'soft', tone: 'accent' },\n      root: {\n        color: '_accentText',\n        backgroundColor: { default: '_accentSoft', [HOVER]: '_accentSoftHover' },\n      },\n    },\n    {\n      when: { variant: 'soft', tone: 'info' },\n      root: {\n        color: '_infoText',\n        backgroundColor: { default: '_infoSoft', [HOVER]: '_infoSoftHover' },\n      },\n    },\n    {\n      when: { variant: 'soft', tone: 'success' },\n      root: {\n        color: '_successText',\n        backgroundColor: { default: '_successSoft', [HOVER]: '_successSoftHover' },\n      },\n    },\n    {\n      when: { variant: 'soft', tone: 'warning' },\n      root: {\n        color: '_warningText',\n        backgroundColor: { default: '_warningSoft', [HOVER]: '_warningSoftHover' },\n      },\n    },\n    {\n      when: { variant: 'soft', tone: 'danger' },\n      root: {\n        color: '_dangerText',\n        backgroundColor: { default: '_dangerSoft', [HOVER]: '_dangerSoftHover' },\n      },\n    },\n    {\n      when: { variant: 'surface', tone: 'neutral' },\n      root: {\n        color: '_text',\n        borderColor: '_border',\n        backgroundColor: { default: '_surface', [HOVER]: '_fillHover' },\n      },\n    },\n    {\n      when: { variant: 'surface', tone: 'accent' },\n      root: {\n        color: '_accentText',\n        borderColor: '_accentBorder',\n        backgroundColor: { default: '_accentSoft', [HOVER]: '_accentSoftHover' },\n      },\n    },\n    {\n      when: { variant: 'surface', tone: 'info' },\n      root: {\n        color: '_infoText',\n        borderColor: '_infoBorder',\n        backgroundColor: { default: '_infoSoft', [HOVER]: '_infoSoftHover' },\n      },\n    },\n    {\n      when: { variant: 'surface', tone: 'success' },\n      root: {\n        color: '_successText',\n        borderColor: '_successBorder',\n        backgroundColor: { default: '_successSoft', [HOVER]: '_successSoftHover' },\n      },\n    },\n    {\n      when: { variant: 'surface', tone: 'warning' },\n      root: {\n        color: '_warningText',\n        borderColor: '_warningBorder',\n        backgroundColor: { default: '_warningSoft', [HOVER]: '_warningSoftHover' },\n      },\n    },\n    {\n      when: { variant: 'surface', tone: 'danger' },\n      root: {\n        color: '_dangerText',\n        borderColor: '_dangerBorder',\n        backgroundColor: { default: '_dangerSoft', [HOVER]: '_dangerSoftHover' },\n      },\n    },\n    {\n      when: { variant: 'outline', tone: 'neutral' },\n      root: {\n        color: '_text',\n        borderColor: '_border',\n        backgroundColor: { default: 'transparent', [HOVER]: '_fillHover' },\n      },\n    },\n    {\n      when: { variant: 'outline', tone: 'accent' },\n      root: {\n        color: '_accentText',\n        borderColor: '_accentBorder',\n        backgroundColor: { default: 'transparent', [HOVER]: '_accentSoft' },\n      },\n    },\n    {\n      when: { variant: 'outline', tone: 'info' },\n      root: {\n        color: '_infoText',\n        borderColor: '_infoBorder',\n        backgroundColor: { default: 'transparent', [HOVER]: '_infoSoft' },\n      },\n    },\n    {\n      when: { variant: 'outline', tone: 'success' },\n      root: {\n        color: '_successText',\n        borderColor: '_successBorder',\n        backgroundColor: { default: 'transparent', [HOVER]: '_successSoft' },\n      },\n    },\n    {\n      when: { variant: 'outline', tone: 'warning' },\n      root: {\n        color: '_warningText',\n        borderColor: '_warningBorder',\n        backgroundColor: { default: 'transparent', [HOVER]: '_warningSoft' },\n      },\n    },\n    {\n      when: { variant: 'outline', tone: 'danger' },\n      root: {\n        color: '_dangerText',\n        borderColor: '_dangerBorder',\n        backgroundColor: { default: 'transparent', [HOVER]: '_dangerSoft' },\n      },\n    },\n    {\n      when: { variant: 'ghost', tone: 'neutral' },\n      root: { color: '_text', backgroundColor: { default: 'transparent', [HOVER]: '_fillHover' } },\n    },\n    {\n      when: { variant: 'ghost', tone: 'accent' },\n      root: {\n        color: '_accentText',\n        backgroundColor: { default: 'transparent', [HOVER]: '_accentSoft' },\n      },\n    },\n    {\n      when: { variant: 'ghost', tone: 'info' },\n      root: {\n        color: '_infoText',\n        backgroundColor: { default: 'transparent', [HOVER]: '_infoSoft' },\n      },\n    },\n    {\n      when: { variant: 'ghost', tone: 'success' },\n      root: {\n        color: '_successText',\n        backgroundColor: { default: 'transparent', [HOVER]: '_successSoft' },\n      },\n    },\n    {\n      when: { variant: 'ghost', tone: 'warning' },\n      root: {\n        color: '_warningText',\n        backgroundColor: { default: 'transparent', [HOVER]: '_warningSoft' },\n      },\n    },\n    {\n      when: { variant: 'ghost', tone: 'danger' },\n      root: {\n        color: '_dangerText',\n        backgroundColor: { default: 'transparent', [HOVER]: '_dangerSoft' },\n      },\n    },\n    { when: { variant: 'link', tone: 'neutral' }, root: { color: '_text' } },\n    { when: { variant: 'link', tone: 'accent' }, root: { color: '_accentText' } },\n    { when: { variant: 'link', tone: 'info' }, root: { color: '_infoText' } },\n    { when: { variant: 'link', tone: 'success' }, root: { color: '_successText' } },\n    { when: { variant: 'link', tone: 'warning' }, root: { color: '_warningText' } },\n    { when: { variant: 'link', tone: 'danger' }, root: { color: '_dangerText' } },\n  ],\n});\n\n/** 按钮的部件（createUi / Provider 的 styles.Button 按它定制） */\nexport type ButtonPart = (typeof buttonRecipe.parts)[number];\n\n/** 按钮根元素的部件标记：`data-scope=\"button\" data-part=\"root\"` */\nexport const buttonPart = partAttrs(buttonRecipe, 'root');\n\n/** ButtonGroup 交给组里按钮的状态：统一的外观（相连的方向经 AttachedContext 给出） */\nexport interface ButtonGroupState {\n  /** 组上写的外观，组里的按钮没写的项用它 */\n  readonly appearance: Pick<ButtonOptions, 'variant' | 'tone' | 'size' | 'radius'>;\n}\n\n/** 按钮组的上下文：组里的按钮家族据此相连、共用外观 */\nexport const ButtonGroupContext = createContext<ButtonGroupState>('ButtonGroup');\n\n/** 合并后的外观：每一项都有值（size 不写时继承字号）；在 ButtonGroup、ControlGroup 里时带上相连的方向 */\nexport type ButtonAppearance = Required<Pick<ButtonOptions, 'variant' | 'tone' | 'radius'>> &\n  Pick<ButtonOptions, 'size'> & {\n    attached?: keyof AttachedOrientations;\n    /** 按钮的配方，带上 createUi / Provider 里 styles.Button 的定制 */\n    recipe: ReturnType<typeof useRecipe<ButtonPart, unknown>>;\n  };\n\n/**\n * 按钮的外观：显式写的 prop > 所在 ButtonGroup 写的 > createUi / Provider 的 defaults.Button > 组件自己的默认样式。\n * 在 setup 里调用，返回的函数在渲染时调用（读到最新的 prop 与配置）\n */\nexport function useButtonAppearance(\n  read: () => Pick<ButtonOptions, 'variant' | 'tone' | 'size' | 'radius'>,\n  fallbackVariant: keyof ButtonVariants,\n  fallbackTone: StatusTone = 'accent',\n): () => ButtonAppearance {\n  const group = ButtonGroupContext.inject(null);\n  const attachedGroup = AttachedContext.inject(null);\n  const recipe = useRecipe(buttonRecipe);\n  return useDefaults(\n    'Button',\n    () => {\n      const { variant, tone, size, radius } = read();\n      const shared = group?.appearance;\n      return {\n        variant: variant ?? shared?.variant,\n        tone: tone ?? shared?.tone,\n        size: size ?? shared?.size,\n        radius: radius ?? shared?.radius,\n        attached: attachedGroup?.orientation,\n        recipe,\n      };\n    },\n    // 组里的按钮外观要一致：不论有没有文字都按 Button 的默认色调（拆分按钮的两半同色）\n    { variant: fallbackVariant, tone: group ? 'accent' : fallbackTone, radius: 'md' },\n  );\n}\n\n/** 外观（已合并默认值）与状态 → 按钮根元素的样式 */\nexport function buttonSx(\n  { variant, tone, size, radius, attached, recipe }: ButtonAppearance,\n  state: { disabled: boolean; square?: boolean; fullWidth?: boolean },\n): SxStyles {\n  return [\n    buttonBaseStyles.root,\n    interactionTransitions.colors,\n    buttonStyles.root,\n    focusRingStyles.visible,\n    rippleHostStyles.host,\n    recipe({ variant, tone }).root.sx,\n    radiusStyles[radius],\n    attached && attachedStyles[attached],\n    size && fontSizeStyles[size],\n    state.square && buttonStyles.square,\n    state.fullWidth && buttonStyles.fullWidth,\n    state.disabled && buttonStyles.disabled,\n  ] as SxStyles;\n}\n\n/** 按钮内容：图标、文字、加载指示；加载中内容透明但保留宽度与无障碍名称 */\nexport function buttonContent(\n  {\n    icon,\n    iconEnd,\n    children,\n    propsContent,\n    propsIcon,\n    propsIconEnd,\n  }: Omit<ButtonContentOptions, 'fullWidth'>,\n  { loading, propsSpinner }: Pick<ButtonOptions, 'loading' | 'propsSpinner'>,\n): VNodeChild {\n  return [\n    h(\n      'span',\n      mergeAttrs<'span'>({ sx: buttonStyles.content }, propsContent, {\n        sx: loading && buttonStyles.hidden,\n      }),\n      [\n        icon && h(Icon, mergeProps<IconProps>({ icon }, propsIcon) as IconProps),\n        children,\n        iconEnd && h(Icon, mergeProps<IconProps>({ icon: iconEnd }, propsIconEnd) as IconProps),\n      ],\n    ),\n    loading &&\n      h(\n        Spinner,\n        mergeProps<SpinnerProps>({ sx: buttonStyles.spinner }, propsSpinner) as SpinnerProps,\n      ),\n  ];\n}\n\n/** useButtonBehavior 每次渲染读取的状态 */\nexport interface ButtonBehaviorState {\n  /** 不可用 */\n  disabled: boolean;\n  /** 加载中：点击无效，焦点保留 */\n  loading: boolean;\n  /** 不可用时仍可聚焦：用 aria-disabled 代替原生 disabled。链接没有原生 disabled，总是写 true */\n  focusableWhenDisabled?: boolean;\n  /** 波纹；不写时沿用配置 */\n  ripple?: boolean;\n}\n\n/** useButtonBehavior 给出的受管属性：展开到 mergeProps 的受管层 */\nexport interface ButtonBehaviorProps<E extends MouseEvent = MouseEvent> extends RippleHandlers {\n  /** 原生 disabled（不可聚焦的不可用） */\n  disabled?: boolean;\n  /** 可聚焦的不可用 */\n  'aria-disabled'?: true;\n  /** 加载中 */\n  'aria-busy'?: true;\n  /** 加载中、可聚焦的不可用时拦下点击，否则交给使用方的 onClick */\n  onClick: (event: E) => void;\n  /** 状态写成 data 属性，样式与测试据此选择 */\n  'data-loading'?: true;\n  /** 不可用（两种方式都有） */\n  'data-disabled'?: true;\n}\n\n/**\n * 按钮家族的行为：不可用（原生 disabled 或可聚焦的 aria-disabled）、加载中、拦截点击、波纹、状态 data 属性。\n * 被拦下的点击会 preventDefault：不触发使用方的 onClick，也不提交表单、不跟随链接。\n *\n *   const behavior = useButtonBehavior(() => ({ disabled, loading, focusableWhenDisabled, ripple }), () => onClick);\n *   mergeAttrs<'button'>(默认, rest, behavior())\n */\nexport function useButtonBehavior<E extends MouseEvent>(\n  read: () => ButtonBehaviorState,\n  onClick: () => ((event: E) => void) | undefined,\n): () => ButtonBehaviorProps<E> {\n  const ripple = useRipple(() => read().ripple);\n  function click(event: E) {\n    const { disabled, loading, focusableWhenDisabled = false } = read();\n    if (loading || (disabled && focusableWhenDisabled)) {\n      event.preventDefault();\n      return;\n    }\n    onClick()?.(event);\n  }\n  return () => {\n    const { disabled, loading, focusableWhenDisabled = false } = read();\n    const soft = disabled && focusableWhenDisabled;\n    return {\n      disabled: (disabled && !focusableWhenDisabled) || undefined,\n      'aria-disabled': soft || undefined,\n      'aria-busy': loading || undefined,\n      onClick: click,\n      ...ripple,\n      'data-loading': loading || undefined,\n      'data-disabled': disabled || undefined,\n    };\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"button-core.js","names":[],"sources":["../../src/base/button-core.ts"],"sourcesContent":["/**\n * 按钮家族（Button、LinkButton、IconButton、CloseButton、ClearButton）的内核：共用的外观、选项、内容排布与行为。\n * 一个元素一个组件（COMPONENTS.md §1）：各组件只管自己元素的行为，样式与内容排布都从这里取。\n *\n * 外观 = variant（样式）× tone（色调）× size（字号档位，内部尺寸随之按 em 缩放）× radius（圆角）。\n */\nimport { h, type VNodeChild } from 'vue';\nimport { createContext } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { SxStyles } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { Icon, type IconData, type IconProps } from './Icon';\nimport { Spinner, type SpinnerProps } from './Spinner';\nimport { useDefaults } from '../config/defaults';\nimport { partAttrs, useRecipe } from '../config/styles';\nimport { rippleHostStyles, useRipple, type RippleHandlers } from '../utils/dom/ripple';\nimport { mergeAttrs, mergeProps, type PartProps } from '../utils/props';\nimport { focusRingStyles, radiusStyles, type Radius } from '../utils/style/styles';\nimport type { StatusTone } from '../utils/style/tone-styles';\nimport {\n  AttachedContext,\n  attachedStyles,\n  type AttachedOrientations,\n} from '../utils/style/attached';\nimport { interactionTransitions } from '../utils/style/transitions';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\nimport { t } from '../config/theme/tokens';\n\n/** 按钮样式 */\nexport interface ButtonVariants {\n  /** 实底：一组操作里的主要操作，每组最多一个 */\n  solid: unknown;\n  /** 浅色底：次要但仍需突出的操作，如卡片里的操作 */\n  soft: unknown;\n  /** 浅色底加描边：表单、设置页里常用的次要操作 */\n  surface: unknown;\n  /** 只有描边：次要操作 */\n  outline: unknown;\n  /** 无底无边，悬停时才有底色：工具栏、行内操作、图标按钮 */\n  ghost: unknown;\n  /** 看起来像链接（无底、无内边距、悬停下划线）：文字中间的操作 */\n  link: unknown;\n}\n\n/** 按钮家族共用的外观选项；可以用 createUi / Provider 的 defaults.Button 统一改默认值 */\nexport interface ButtonOptions {\n  /**\n   * 样式；可以用 createUi / Provider 的 defaults.Button 统一改\n   * @default 'solid'\n   */\n  variant?: keyof ButtonVariants;\n  /**\n   * 色调：与 Badge、Alert 等同一套\n   * @default 'accent'\n   */\n  tone?: StatusTone;\n  /** 字号档位，内部尺寸随之缩放；不写时继承上下文字号 */\n  size?: TextSize;\n  /**\n   * 圆角\n   * @default 'md'\n   */\n  radius?: Radius;\n  /** 加载中：显示旋转指示，宽度不变，点击无效，焦点保留；读屏会得知 aria-busy */\n  loading?: boolean;\n  /** 按下时的波纹效果；不写时沿用 createUi / Provider 的 ripple（默认开启） */\n  ripple?: boolean;\n  /** 加载指示（Spinner）的部件属性 */\n  propsSpinner?: Partial<SpinnerProps>;\n}\n\n/** 有文字的按钮（Button、LinkButton）另有的选项 */\nexport interface ButtonContentOptions {\n  /** 文字前的图标：`import { Plus } from '@lucide/icons'` */\n  icon?: IconData;\n  /** 文字后的图标 */\n  iconEnd?: IconData;\n  /** 占满容器宽度 */\n  fullWidth?: boolean;\n  /** 内容层（包着图标与文字的 span）的部件属性 */\n  propsContent?: PartProps<'span'>;\n  /** 前置图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n  /** 后置图标的部件属性 */\n  propsIconEnd?: Partial<IconProps>;\n  /** 按钮文字；加载中仍保留（读屏名称不变） */\n  children?: VNodeChild;\n}\n\n/** 按钮的基础样式：去掉默认外观，继承文字样式，指针与触摸的反馈；Button 家族也用它 */\nexport const buttonBaseStyles = css.create({\n  root: {\n    boxSizing: 'border-box',\n    margin: 0,\n    padding: 0,\n    borderWidth: 0,\n    backgroundColor: 'transparent',\n    color: 'inherit',\n    fontFamily: 'inherit',\n    fontSize: 'inherit',\n    lineHeight: 'inherit',\n    textAlign: 'inherit',\n    textDecoration: 'none',\n    cursor: 'pointer',\n    userSelect: 'none',\n    // 触摸时不等双击缩放的判定，点击立即响应\n    touchAction: 'manipulation',\n    WebkitTapHighlightColor: 'transparent',\n  },\n  disabled: { cursor: 'not-allowed' },\n});\n\n/** 按钮家族 的样式：root、square、fullWidth、disabled、content、hidden 等 */\nexport const buttonStyles = css.create({\n  // 去掉默认外观、指针与触摸反馈、颜色过渡来自 buttonBaseStyles 与 interactionTransitions（buttonSx 里排在前面）\n  root: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: '_sm',\n    minHeight: `max(${t.sizes.control}, ${t.sizes.minTarget})`,\n    paddingBlock: '_xs',\n    paddingInline: '_lg',\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: 'transparent',\n    fontWeight: '_semibold',\n    lineHeight: '_tight',\n    whiteSpace: 'nowrap',\n  },\n  // 图标按钮：宽高相等\n  square: {\n    paddingInline: 0,\n    width: `max(${t.sizes.control}, ${t.sizes.minTarget})`,\n    flexShrink: 0,\n  },\n  fullWidth: { display: 'flex', width: '_full' },\n  disabled: { opacity: '_disabled', cursor: 'not-allowed' },\n  content: { display: 'inline-flex', alignItems: 'center', gap: '_sm' },\n  // 加载中隐藏内容但保留占位与无障碍名称（不用 visibility: hidden，那样读屏也读不到）\n  hidden: { opacity: 0 },\n  spinner: {\n    position: 'absolute',\n    inset: 0,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n});\n\n/** 悬停变色只在可用时：原生 disabled 的按钮照样匹配 :hover，悬停变色会让人以为还能点 */\nconst HOVER = ':hover:not(:disabled,[aria-disabled=\"true\"])';\n\n/**\n * 按钮的样式（配方）：样式 × 色调逐项写主题 token（组合档位）。中性色没有专门的实底色，用反色表面。\n * 实底悬停用各色调的 Hover token：主题检查保证它与 Contrast 字色到 4.5:1\n */\nexport const buttonRecipe = css.recipe({\n  name: 'Button',\n  parts: ['root'],\n  variants: {\n    variant: {\n      solid: {},\n      soft: {},\n      surface: {},\n      outline: {},\n      ghost: {},\n      link: {\n        root: {\n          minHeight: 0,\n          paddingInline: 0,\n          fontWeight: '_medium',\n          textUnderlineOffset: '0.2em',\n          textDecorationLine: { default: 'none', [HOVER]: 'underline' },\n        },\n      },\n    },\n    tone: { neutral: {}, accent: {}, info: {}, success: {}, warning: {}, danger: {} },\n  },\n  compound: [\n    {\n      when: { variant: 'solid', tone: 'neutral' },\n      root: {\n        color: '_inverseText',\n        backgroundColor: {\n          default: '_inverseSurface',\n          [HOVER]: `color-mix(in oklab, ${t.colors.inverseSurface} 85%, ${t.colors.background})`,\n        },\n      },\n    },\n    {\n      when: { variant: 'solid', tone: 'accent' },\n      root: {\n        color: '_accentContrast',\n        backgroundColor: { default: '_accent', [HOVER]: '_accentHover' },\n      },\n    },\n    {\n      when: { variant: 'solid', tone: 'info' },\n      root: {\n        color: '_infoContrast',\n        backgroundColor: { default: '_info', [HOVER]: '_infoHover' },\n      },\n    },\n    {\n      when: { variant: 'solid', tone: 'success' },\n      root: {\n        color: '_successContrast',\n        backgroundColor: { default: '_success', [HOVER]: '_successHover' },\n      },\n    },\n    {\n      when: { variant: 'solid', tone: 'warning' },\n      root: {\n        color: '_warningContrast',\n        backgroundColor: { default: '_warning', [HOVER]: '_warningHover' },\n      },\n    },\n    {\n      when: { variant: 'solid', tone: 'danger' },\n      root: {\n        color: '_dangerContrast',\n        backgroundColor: { default: '_danger', [HOVER]: '_dangerHover' },\n      },\n    },\n    {\n      when: { variant: 'soft', tone: 'neutral' },\n      root: { color: '_text', backgroundColor: { default: '_fill', [HOVER]: '_fillHover' } },\n    },\n    {\n      when: { variant: 'soft', tone: 'accent' },\n      root: {\n        color: '_accentText',\n        backgroundColor: { default: '_accentSoft', [HOVER]: '_accentSoftHover' },\n      },\n    },\n    {\n      when: { variant: 'soft', tone: 'info' },\n      root: {\n        color: '_infoText',\n        backgroundColor: { default: '_infoSoft', [HOVER]: '_infoSoftHover' },\n      },\n    },\n    {\n      when: { variant: 'soft', tone: 'success' },\n      root: {\n        color: '_successText',\n        backgroundColor: { default: '_successSoft', [HOVER]: '_successSoftHover' },\n      },\n    },\n    {\n      when: { variant: 'soft', tone: 'warning' },\n      root: {\n        color: '_warningText',\n        backgroundColor: { default: '_warningSoft', [HOVER]: '_warningSoftHover' },\n      },\n    },\n    {\n      when: { variant: 'soft', tone: 'danger' },\n      root: {\n        color: '_dangerText',\n        backgroundColor: { default: '_dangerSoft', [HOVER]: '_dangerSoftHover' },\n      },\n    },\n    {\n      when: { variant: 'surface', tone: 'neutral' },\n      root: {\n        color: '_text',\n        borderColor: '_border',\n        backgroundColor: { default: '_surface', [HOVER]: '_fillHover' },\n      },\n    },\n    {\n      when: { variant: 'surface', tone: 'accent' },\n      root: {\n        color: '_accentText',\n        borderColor: '_accentBorder',\n        backgroundColor: { default: '_accentSoft', [HOVER]: '_accentSoftHover' },\n      },\n    },\n    {\n      when: { variant: 'surface', tone: 'info' },\n      root: {\n        color: '_infoText',\n        borderColor: '_infoBorder',\n        backgroundColor: { default: '_infoSoft', [HOVER]: '_infoSoftHover' },\n      },\n    },\n    {\n      when: { variant: 'surface', tone: 'success' },\n      root: {\n        color: '_successText',\n        borderColor: '_successBorder',\n        backgroundColor: { default: '_successSoft', [HOVER]: '_successSoftHover' },\n      },\n    },\n    {\n      when: { variant: 'surface', tone: 'warning' },\n      root: {\n        color: '_warningText',\n        borderColor: '_warningBorder',\n        backgroundColor: { default: '_warningSoft', [HOVER]: '_warningSoftHover' },\n      },\n    },\n    {\n      when: { variant: 'surface', tone: 'danger' },\n      root: {\n        color: '_dangerText',\n        borderColor: '_dangerBorder',\n        backgroundColor: { default: '_dangerSoft', [HOVER]: '_dangerSoftHover' },\n      },\n    },\n    {\n      when: { variant: 'outline', tone: 'neutral' },\n      root: {\n        color: '_text',\n        borderColor: '_border',\n        backgroundColor: { default: 'transparent', [HOVER]: '_fillHover' },\n      },\n    },\n    {\n      when: { variant: 'outline', tone: 'accent' },\n      root: {\n        color: '_accentText',\n        borderColor: '_accentBorder',\n        backgroundColor: { default: 'transparent', [HOVER]: '_accentSoft' },\n      },\n    },\n    {\n      when: { variant: 'outline', tone: 'info' },\n      root: {\n        color: '_infoText',\n        borderColor: '_infoBorder',\n        backgroundColor: { default: 'transparent', [HOVER]: '_infoSoft' },\n      },\n    },\n    {\n      when: { variant: 'outline', tone: 'success' },\n      root: {\n        color: '_successText',\n        borderColor: '_successBorder',\n        backgroundColor: { default: 'transparent', [HOVER]: '_successSoft' },\n      },\n    },\n    {\n      when: { variant: 'outline', tone: 'warning' },\n      root: {\n        color: '_warningText',\n        borderColor: '_warningBorder',\n        backgroundColor: { default: 'transparent', [HOVER]: '_warningSoft' },\n      },\n    },\n    {\n      when: { variant: 'outline', tone: 'danger' },\n      root: {\n        color: '_dangerText',\n        borderColor: '_dangerBorder',\n        backgroundColor: { default: 'transparent', [HOVER]: '_dangerSoft' },\n      },\n    },\n    {\n      when: { variant: 'ghost', tone: 'neutral' },\n      root: { color: '_text', backgroundColor: { default: 'transparent', [HOVER]: '_fillHover' } },\n    },\n    {\n      when: { variant: 'ghost', tone: 'accent' },\n      root: {\n        color: '_accentText',\n        backgroundColor: { default: 'transparent', [HOVER]: '_accentSoft' },\n      },\n    },\n    {\n      when: { variant: 'ghost', tone: 'info' },\n      root: {\n        color: '_infoText',\n        backgroundColor: { default: 'transparent', [HOVER]: '_infoSoft' },\n      },\n    },\n    {\n      when: { variant: 'ghost', tone: 'success' },\n      root: {\n        color: '_successText',\n        backgroundColor: { default: 'transparent', [HOVER]: '_successSoft' },\n      },\n    },\n    {\n      when: { variant: 'ghost', tone: 'warning' },\n      root: {\n        color: '_warningText',\n        backgroundColor: { default: 'transparent', [HOVER]: '_warningSoft' },\n      },\n    },\n    {\n      when: { variant: 'ghost', tone: 'danger' },\n      root: {\n        color: '_dangerText',\n        backgroundColor: { default: 'transparent', [HOVER]: '_dangerSoft' },\n      },\n    },\n    { when: { variant: 'link', tone: 'neutral' }, root: { color: '_text' } },\n    { when: { variant: 'link', tone: 'accent' }, root: { color: '_accentText' } },\n    { when: { variant: 'link', tone: 'info' }, root: { color: '_infoText' } },\n    { when: { variant: 'link', tone: 'success' }, root: { color: '_successText' } },\n    { when: { variant: 'link', tone: 'warning' }, root: { color: '_warningText' } },\n    { when: { variant: 'link', tone: 'danger' }, root: { color: '_dangerText' } },\n  ],\n});\n\n/** 按钮的部件（createUi / Provider 的 styles.Button 按它定制） */\nexport type ButtonPart = (typeof buttonRecipe.parts)[number];\n\n/** 按钮根元素的部件标记：`data-scope=\"button\" data-part=\"root\"` */\nexport const buttonPart = partAttrs(buttonRecipe, 'root');\n\n/** ButtonGroup 交给组里按钮的状态：统一的外观（相连的方向经 AttachedContext 给出） */\nexport interface ButtonGroupState {\n  /** 组上写的外观，组里的按钮没写的项用它 */\n  readonly appearance: Pick<ButtonOptions, 'variant' | 'tone' | 'size' | 'radius'>;\n}\n\n/** 按钮组的上下文：组里的按钮家族据此相连、共用外观 */\nexport const ButtonGroupContext = createContext<ButtonGroupState>('ButtonGroup');\n\n/** 合并后的外观：每一项都有值（size 不写时继承字号）；在 ButtonGroup、ControlGroup 里时带上相连的方向 */\nexport type ButtonAppearance = Required<Pick<ButtonOptions, 'variant' | 'tone' | 'radius'>> &\n  Pick<ButtonOptions, 'size'> & {\n    attached?: keyof AttachedOrientations;\n    /** 按钮的配方，带上 createUi / Provider 里 styles.Button 的定制 */\n    recipe: ReturnType<typeof useRecipe<ButtonPart, unknown>>;\n  };\n\n/**\n * 按钮的外观：显式写的 prop > 所在 ButtonGroup 写的 > createUi / Provider 的 defaults.Button > 组件自己的默认样式。\n * 在 setup 里调用，返回的函数在渲染时调用（读到最新的 prop 与配置）\n */\nexport function useButtonAppearance(\n  read: () => Pick<ButtonOptions, 'variant' | 'tone' | 'size' | 'radius'>,\n  fallbackVariant: keyof ButtonVariants,\n  fallbackTone: StatusTone = 'accent',\n): () => ButtonAppearance {\n  const group = ButtonGroupContext.inject(null);\n  const attachedGroup = AttachedContext.inject(null);\n  const recipe = useRecipe(buttonRecipe);\n  return useDefaults(\n    'Button',\n    () => {\n      const { variant, tone, size, radius } = read();\n      const shared = group?.appearance;\n      return {\n        variant: variant ?? shared?.variant,\n        tone: tone ?? shared?.tone,\n        size: size ?? shared?.size,\n        radius: radius ?? shared?.radius,\n        attached: attachedGroup?.orientation,\n        recipe,\n      };\n    },\n    // 组里的按钮外观要一致：不论有没有文字都按 Button 的默认色调（拆分按钮的两半同色）\n    { variant: fallbackVariant, tone: group ? 'accent' : fallbackTone, radius: 'md' },\n  );\n}\n\n/** 外观（已合并默认值）与状态 → 按钮根元素的样式 */\nexport function buttonSx(\n  { variant, tone, size, radius, attached, recipe }: ButtonAppearance,\n  state: { disabled: boolean; square?: boolean; fullWidth?: boolean },\n): SxStyles {\n  return [\n    buttonBaseStyles.root,\n    interactionTransitions.colors,\n    buttonStyles.root,\n    focusRingStyles.visible,\n    rippleHostStyles.host,\n    recipe({ variant, tone }).root.sx,\n    radiusStyles[radius],\n    attached && attachedStyles[attached],\n    size && fontSizeStyles[size],\n    state.square && buttonStyles.square,\n    state.fullWidth && buttonStyles.fullWidth,\n    state.disabled && buttonStyles.disabled,\n  ] as SxStyles;\n}\n\n/** 按钮内容：图标、文字、加载指示；加载中内容透明但保留宽度与无障碍名称 */\nexport function buttonContent(\n  {\n    icon,\n    iconEnd,\n    children,\n    propsContent,\n    propsIcon,\n    propsIconEnd,\n  }: Omit<ButtonContentOptions, 'fullWidth'>,\n  { loading, propsSpinner }: Pick<ButtonOptions, 'loading' | 'propsSpinner'>,\n): VNodeChild {\n  return [\n    h(\n      'span',\n      mergeAttrs<'span'>({ sx: buttonStyles.content }, propsContent, {\n        sx: loading && buttonStyles.hidden,\n      }),\n      [\n        icon && h(Icon, mergeProps<IconProps>({ icon }, propsIcon) as IconProps),\n        children,\n        iconEnd && h(Icon, mergeProps<IconProps>({ icon: iconEnd }, propsIconEnd) as IconProps),\n      ],\n    ),\n    loading &&\n      h(\n        Spinner,\n        mergeProps<SpinnerProps>({ sx: buttonStyles.spinner }, propsSpinner) as SpinnerProps,\n      ),\n  ];\n}\n\n/** useButtonBehavior 每次渲染读取的状态 */\nexport interface ButtonBehaviorState {\n  /** 不可用 */\n  disabled: boolean;\n  /** 加载中：点击无效，焦点保留 */\n  loading: boolean;\n  /** 不可用时仍可聚焦：用 aria-disabled 代替原生 disabled。链接没有原生 disabled，总是写 true */\n  focusableWhenDisabled?: boolean;\n  /** 波纹；不写时沿用配置 */\n  ripple?: boolean;\n}\n\n/** useButtonBehavior 给出的受管属性：展开到 mergeProps 的受管层 */\nexport interface ButtonBehaviorProps<E extends MouseEvent = MouseEvent> extends RippleHandlers {\n  /** 原生 disabled（不可聚焦的不可用） */\n  disabled?: boolean;\n  /** 可聚焦的不可用 */\n  'aria-disabled'?: true;\n  /** 加载中 */\n  'aria-busy'?: true;\n  /** 加载中、可聚焦的不可用时拦下点击，否则交给使用方的 onClick */\n  onClick: (event: E) => void;\n  /** 状态写成 data 属性，样式与测试据此选择 */\n  'data-loading'?: true;\n  /** 不可用（两种方式都有） */\n  'data-disabled'?: true;\n}\n\n/**\n * 按钮家族的行为：不可用（原生 disabled 或可聚焦的 aria-disabled）、加载中、拦截点击、波纹、状态 data 属性。\n * 被拦下的点击会 preventDefault：不触发使用方的 onClick，也不提交表单、不跟随链接。\n *\n *   const behavior = useButtonBehavior(() => ({ disabled, loading, focusableWhenDisabled, ripple }), () => onClick);\n *   mergeAttrs<'button'>(默认, rest, behavior())\n */\nexport function useButtonBehavior<E extends MouseEvent>(\n  read: () => ButtonBehaviorState,\n  onClick: () => ((event: E) => void) | undefined,\n): () => ButtonBehaviorProps<E> {\n  const ripple = useRipple(() => read().ripple);\n  function click(event: E) {\n    const { disabled, loading, focusableWhenDisabled = false } = read();\n    if (loading || (disabled && focusableWhenDisabled)) {\n      event.preventDefault();\n      return;\n    }\n    onClick()?.(event);\n  }\n  return () => {\n    const { disabled, loading, focusableWhenDisabled = false } = read();\n    const soft = disabled && focusableWhenDisabled;\n    return {\n      disabled: (disabled && !focusableWhenDisabled) || undefined,\n      'aria-disabled': soft || undefined,\n      'aria-busy': loading || undefined,\n      onClick: click,\n      ...ripple,\n      'data-loading': loading || undefined,\n      'data-disabled': disabled || undefined,\n    };\n  };\n}\n"],"mappings":"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"}

package/dist/charts/ChordChart.d.ts

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import type { VNodeChild } from 'vue';
 import { type NumericFormat } from '../config/lang/format';
 import type { PartProps } from '../utils/props';

package/dist/charts/ChordChart.js

@@ -7,7 +7,7 @@ import { flowData, resolveFlowNodes } from "./flow.js";
 import { useSingleChart } from "./single.js";
 import { computed, createVNode, shallowRef } from "vue";
 import { _component, bindable, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 import { ChordDiagram, ChordLabelAlignment } from "@unovis/ts";
 //#region src/charts/ChordChart.tsx
 /**