@zerodep-dev/vue-tsx-pro-ui 0.2.0 → 0.3.0

package/dist/form/FormSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormSection.js","names":["_isVNode","_vtp_readonlyProp","_vtp_bindable","_vtp_childrenProp","_vtp_restProps","_createVNode","_mergeProps","Text","_vue_unref"],"sources":["../../src/form/FormSection.tsx"],"sourcesContent":["/**\n * 表单里的一组字段：标题、说明、右侧的操作，下面一条细线，再下面是字段的栅格。长表单按主题分组（基本信息、计划与实施……）。\n *\n *   <FormSection title=\"项目基本信息\" columns={2}>\n *     <Field label=\"项目名称\">…</Field>\n *     <Field label=\"任务类别\">…</Field>\n *     <GridItem span=\"full\"><Field label=\"简要描述\">…</Field></GridItem>\n *   </FormSection>\n *\n * columns 是最多几列：每列不窄于 minColumnWidth，容器窄时自动减少列数，不需要断点；跨列用 GridItem（多列时用 span=\"full\"）。\n * 也是一层字段布局（field-layout）：标签位置、宽度、对齐、只读、不可用写在这里只作用于这一组，没写的沿用 Form 的。\n * collapsible 时标题是展开收起的按钮（aria-expanded），收起的字段不能被 Tab 到。\n * 给了 id 就能当锚点：长表单旁边放一个 TableOfContents（items 用各组的 id 与标题）做分节导航，跳过来时让开粘性顶栏。\n * 语义：role=\"group\" 以标题为名称、说明为描述，标题是 h2–h6（headingLevel），读屏能按标题跳转。\n *\n * 部件：Root（div）、Header（div）、Heading（h2–h6）、Trigger（ButtonBase，collapsible 时）、Chevron（Icon）、\n * Description（Text）、Extra（div）、Body（div，字段的栅格）、Collapse（collapsible 时包住 Body）。\n */\nimport { ChevronDown } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { h, useId, type VNodeChild } from 'vue';\nimport { ButtonBase, type ButtonBaseProps } from '../base/ButtonBase';\nimport { Icon, type IconProps } from '../base/Icon';\nimport { Text, type TextProps } from '../base/Text';\nimport { space, t } from '../config/theme/tokens';\nimport { Collapse, type CollapseProps } from '../display/Collapse';\nimport { provideGridColumns } from '../layout/Grid';\nimport { hasContent, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { disclosureStyles } from '../utils/style/transitions';\nimport { layoutVars } from '../utils/style/vars';\nimport { provideFieldLayout, type FieldLayout } from './field-layout';\n\n/** 角色与关联由组件管理；原生的 title 属性让给标题内容 */\nexport type FormSectionManaged = 'role' | 'title' | 'aria-labelledby' | 'aria-describedby';\n\n/** 未声明的属性落到外层 div 上 */\nexport interface FormSectionProps extends PartProps<'div', FormSectionManaged>, FieldLayout {\n  /** 标题；不写时没有标题栏，只是一层栅格与字段布局 */\n  title?: VNodeChild;\n  /** 标题下面的说明 */\n  description?: VNodeChild;\n  /** 标题栏结束边的内容：链接、按钮（“查看关联明细”“添加”） */\n  extra?: VNodeChild;\n  /** 标题的级别（h2–h6），默认 3 */\n  headingLevel?: 2 | 3 | 4 | 5 | 6;\n  /** 最多几列，默认 1；容器窄时按 minColumnWidth 自动减少 */\n  columns?: number;\n  /** 每列的最小宽度（CSS 长度），默认 `'26em'`：标签在起始边时放得下标签、控件与横排的三四个选项 */\n  minColumnWidth?: string;\n  /** 可以展开收起：标题变成按钮 */\n  collapsible?: boolean;\n  /** 是否展开（collapsible 时）：父级写 _open={x}，默认展开 */\n  _open?: boolean;\n  /** 标题栏的部件属性 */\n  propsHeader?: PartProps<'div'>;\n  /** 标题（h2–h6）的部件属性 */\n  propsHeading?: PartProps<'h3'>;\n  /** 展开收起按钮的部件属性 */\n  propsTrigger?: Omit<Partial<ButtonBaseProps>, 'aria-expanded' | 'aria-controls'>;\n  /** 展开箭头的部件属性 */\n  propsChevron?: Partial<IconProps>;\n  /** 说明的部件属性 */\n  propsDescription?: Partial<TextProps>;\n  /** 标题栏结束边内容的部件属性 */\n  propsExtra?: PartProps<'div'>;\n  /** 字段栅格的部件属性 */\n  propsBody?: PartProps<'div'>;\n  /** 展开收起层的部件属性（collapsible 时） */\n  propsCollapse?: Partial<CollapseProps>;\n  /** 字段 */\n  children?: VNodeChild;\n}\n\n/** FormSection 的样式：root、header、headerText、heading、trigger、chevron、description、extra、body、singleColumn */\nexport const formSectionStyles = css.create({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '_lg',\n    minWidth: 0,\n    // 分节导航（TableOfContents、锚点）跳过来时让开粘性顶栏，再留一点空\n    scrollMarginBlockStart: `calc(${layoutVars.stickyOffset} + ${space.lg})`,\n  },\n  header: {\n    display: 'flex',\n    alignItems: 'flex-end',\n    justifyContent: 'space-between',\n    flexWrap: 'wrap',\n    columnGap: '_lg',\n    rowGap: '_xs',\n    paddingBlockEnd: '_sm',\n    borderBlockEndWidth: '_xs',\n    borderBlockEndStyle: 'solid',\n    borderBlockEndColor: '_borderMuted',\n  },\n  headerText: { display: 'flex', flexDirection: 'column', gap: '_xs', minWidth: 0 },\n  heading: {\n    margin: 0,\n    fontSize: '_md',\n    fontWeight: '_semibold',\n    lineHeight: '_tight',\n    color: '_text',\n  },\n  trigger: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: '_xs',\n    marginInline: `calc(-1 * ${t.space.xs})`,\n    paddingInline: '_xs',\n    borderRadius: '_sm',\n    fontWeight: 'inherit',\n    color: 'inherit',\n    textAlign: 'start',\n    backgroundColor: { default: 'transparent', ':hover': '_fill' },\n  },\n  chevron: { flexShrink: 0, color: '_textMuted' },\n  chevronClosed: { rotate: '-90deg' },\n  description: { fontSize: '_sm', lineHeight: '_normal' },\n  extra: { display: 'flex', alignItems: 'center', gap: '_sm', flexShrink: 0 },\n  // 多列时列间距比行间距大：一眼看出哪几项是同一列\n  body: {\n    '--form-section-column-gap': '_space.xl',\n    display: 'grid',\n    columnGap: 'var(--form-section-column-gap)',\n    rowGap: '_md',\n    gridTemplateColumns: 'minmax(0, 1fr)',\n    alignItems: 'start',\n  },\n});\n\n/** FormSection 的样式：columns（最多几列、每列不窄于多少） */\nexport const formSectionColumnStyles = css.create({\n  columns: (count: number, minWidth: string) => ({\n    gridTemplateColumns: `repeat(auto-fill, minmax(max(min(${minWidth}, 100%), calc((100% - ${count - 1} * var(--form-section-column-gap)) / ${count})), 1fr))`,\n  }),\n});\n\n/** 表单里的一组字段：标题栏、字段栅格，可折叠；这一组的标签布局、只读、不可用 */\nexport const FormSection = _component(\n  ({\n    title,\n    description,\n    extra,\n    headingLevel = 3,\n    columns = 1,\n    minColumnWidth = '26em',\n    collapsible = false,\n    _open: open = _bindable(true),\n    labelPlacement,\n    labelWidth,\n    labelAlign,\n    disabled,\n    readonly,\n    propsHeader,\n    propsHeading,\n    propsTrigger,\n    propsChevron,\n    propsDescription,\n    propsExtra,\n    propsBody,\n    propsCollapse,\n    children,\n    ...rest\n  }: FormSectionProps) => {\n    const id = useId();\n    const ids = { title: `${id}-title`, description: `${id}-description`, body: `${id}-body` };\n    provideFieldLayout(() => ({ labelPlacement, labelWidth, labelAlign, disabled, readonly }));\n    const bodyRef = provideGridColumns(() =>\n      columns > 1 ? { columns, minItemWidth: minColumnWidth } : { columns: 1 },\n    );\n\n    return () => {\n      const expanded = !collapsible || open;\n      const state = expanded ? 'open' : 'closed';\n      const titleContent = collapsible ? (\n        <ButtonBase\n          {...mergePartProps<ButtonBaseProps>({ sx: formSectionStyles.trigger }, propsTrigger, {\n            id: ids.title,\n            'aria-expanded': open,\n            'aria-controls': ids.body,\n            onClick: () => (open = !open),\n          })}\n          data-state={state}\n        >\n          <span>{title}</span>\n          <Icon\n            {...mergePartProps<IconProps>(\n              {\n                icon: ChevronDown,\n                sx: [\n                  formSectionStyles.chevron,\n                  disclosureStyles.icon,\n                  !open && formSectionStyles.chevronClosed,\n                ],\n              },\n              propsChevron,\n            )}\n          />\n        </ButtonBase>\n      ) : (\n        <span id={ids.title}>{title}</span>\n      );\n      const body = (\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              sx: [\n                formSectionStyles.body,\n                columns > 1 && formSectionColumnStyles.columns(columns, minColumnWidth),\n              ],\n            },\n            propsBody,\n            { ref: bodyRef, ...(collapsible ? {} : { id: ids.body }) },\n          )}\n        >\n          {children}\n        </div>\n      );\n      return (\n        <div\n          {...mergeAttrs<'div'>({ sx: formSectionStyles.root }, rest, {\n            role: hasContent(title) ? 'group' : undefined,\n            'aria-labelledby': hasContent(title) ? ids.title : undefined,\n            'aria-describedby': hasContent(description) ? ids.description : undefined,\n          })}\n          data-state={collapsible ? state : undefined}\n        >\n          {(title != null || extra != null) && (\n            <div {...mergeAttrs<'div'>({ sx: formSectionStyles.header }, propsHeader)}>\n              <div {...css.attrs(formSectionStyles.headerText)}>\n                {hasContent(title) &&\n                  h(\n                    `h${headingLevel}`,\n                    mergeAttrs<'h3'>({ sx: formSectionStyles.heading }, propsHeading),\n                    [titleContent],\n                  )}\n                {hasContent(description) && (\n                  <Text\n                    {...mergePartProps<TextProps>(\n                      { tone: 'muted', sx: formSectionStyles.description },\n                      propsDescription,\n                      { id: ids.description },\n                    )}\n                  >\n                    {description}\n                  </Text>\n                )}\n              </div>\n              {hasContent(extra) && (\n                <div {...mergeAttrs<'div'>({ sx: formSectionStyles.extra }, propsExtra)}>\n                  {extra}\n                </div>\n              )}\n            </div>\n          )}\n          {collapsible ? (\n            <Collapse\n              {...mergePartProps<CollapseProps>({}, propsCollapse, { id: ids.body })}\n              _open={open}\n            >\n              {body}\n            </Collapse>\n          ) : (\n            body\n          )}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"FormSection.js","names":["_isVNode","_vtp_readonlyProp","_vtp_bindable","_vtp_childrenProp","_vtp_restProps","_createVNode","_mergeProps","Text","_vue_unref"],"sources":["../../src/form/FormSection.tsx"],"sourcesContent":["/**\n * 表单里的一组字段：标题、说明、右侧的操作，下面一条细线，再下面是字段的栅格。长表单按主题分组（基本信息、计划与实施……）。\n *\n *   <FormSection title=\"项目基本信息\" columns={2}>\n *     <Field label=\"项目名称\">…</Field>\n *     <Field label=\"任务类别\">…</Field>\n *     <GridItem span=\"full\"><Field label=\"简要描述\">…</Field></GridItem>\n *   </FormSection>\n *\n * columns 是最多几列：每列不窄于 minColumnWidth，容器窄时自动减少列数，不需要断点；跨列用 GridItem（多列时用 span=\"full\"）。\n * 也是一层字段布局（field-layout）：标签位置、宽度、对齐、只读、不可用写在这里只作用于这一组，没写的沿用 Form 的。\n * collapsible 时标题是展开收起的按钮（aria-expanded），收起的字段不能被 Tab 到。\n * 给了 id 就能当锚点：长表单旁边放一个 TableOfContents（items 用各组的 id 与标题）做分节导航，跳过来时让开粘性顶栏。\n * 语义：role=\"group\" 以标题为名称、说明为描述，标题是 h2–h6（headingLevel），读屏能按标题跳转。\n *\n * 部件：Root（div）、Header（div）、Heading（h2–h6）、Trigger（ButtonBase，collapsible 时）、Chevron（Icon）、\n * Description（Text）、Extra（div）、Body（div，字段的栅格）、Collapse（collapsible 时包住 Body）。\n */\nimport { ChevronDown } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { h, useId, type VNodeChild } from 'vue';\nimport { ButtonBase, type ButtonBaseProps } from '../base/ButtonBase';\nimport { Icon, type IconProps } from '../base/Icon';\nimport { Text, type TextProps } from '../base/Text';\nimport { space, t } from '../config/theme/tokens';\nimport { Collapse, type CollapseProps } from '../display/Collapse';\nimport { provideGridColumns } from '../layout/Grid';\nimport { hasContent, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { disclosureStyles } from '../utils/style/transitions';\nimport { layoutVars } from '../utils/style/vars';\nimport { provideFieldLayout, type FieldLayout } from './field-layout';\n\n/** 角色与关联由组件管理；原生的 title 属性让给标题内容 */\nexport type FormSectionManaged = 'role' | 'title' | 'aria-labelledby' | 'aria-describedby';\n\n/** 未声明的属性落到外层 div 上 */\nexport interface FormSectionProps extends PartProps<'div', FormSectionManaged>, FieldLayout {\n  /** 标题；不写时没有标题栏，只是一层栅格与字段布局 */\n  title?: VNodeChild;\n  /** 标题下面的说明 */\n  description?: VNodeChild;\n  /** 标题栏结束边的内容：链接、按钮（“查看关联明细”“添加”） */\n  extra?: VNodeChild;\n  /** 标题的级别（h2–h6），默认 3 */\n  headingLevel?: 2 | 3 | 4 | 5 | 6;\n  /** 最多几列，默认 1；容器窄时按 minColumnWidth 自动减少 */\n  columns?: number;\n  /** 每列的最小宽度（CSS 长度），默认 `'26em'`：标签在起始边时放得下标签、控件与横排的三四个选项 */\n  minColumnWidth?: string;\n  /** 可以展开收起：标题变成按钮 */\n  collapsible?: boolean;\n  /** 是否展开（collapsible 时）：父级写 _open={x}，默认展开 */\n  _open?: boolean;\n  /** 标题栏的部件属性 */\n  propsHeader?: PartProps<'div'>;\n  /** 标题（h2–h6）的部件属性 */\n  propsHeading?: PartProps<'h3'>;\n  /** 展开收起按钮的部件属性 */\n  propsTrigger?: Omit<Partial<ButtonBaseProps>, 'aria-expanded' | 'aria-controls'>;\n  /** 展开箭头的部件属性 */\n  propsChevron?: Partial<IconProps>;\n  /** 说明的部件属性 */\n  propsDescription?: Partial<TextProps>;\n  /** 标题栏结束边内容的部件属性 */\n  propsExtra?: PartProps<'div'>;\n  /** 字段栅格的部件属性 */\n  propsBody?: PartProps<'div'>;\n  /** 展开收起层的部件属性（collapsible 时） */\n  propsCollapse?: Partial<CollapseProps>;\n  /** 字段 */\n  children?: VNodeChild;\n}\n\n/** FormSection 的样式：root、header、headerText、heading、trigger、chevron、description、extra、body、singleColumn */\nexport const formSectionStyles = css.create({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '_lg',\n    minWidth: 0,\n    // 分节导航（TableOfContents、锚点）跳过来时让开粘性顶栏，再留一点空\n    scrollMarginBlockStart: `calc(${layoutVars.stickyOffset} + ${space.lg})`,\n  },\n  header: {\n    display: 'flex',\n    alignItems: 'flex-end',\n    justifyContent: 'space-between',\n    flexWrap: 'wrap',\n    columnGap: '_lg',\n    rowGap: '_xs',\n    paddingBlockEnd: '_sm',\n    borderBlockEndWidth: '_xs',\n    borderBlockEndStyle: 'solid',\n    borderBlockEndColor: '_borderMuted',\n  },\n  headerText: { display: 'flex', flexDirection: 'column', gap: '_xs', minWidth: 0 },\n  heading: {\n    margin: 0,\n    fontSize: '_md',\n    fontWeight: '_semibold',\n    lineHeight: '_tight',\n    color: '_text',\n  },\n  trigger: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: '_xs',\n    marginInline: `calc(-1 * ${t.space.xs})`,\n    paddingInline: '_xs',\n    borderRadius: '_sm',\n    fontWeight: 'inherit',\n    color: 'inherit',\n    textAlign: 'start',\n    backgroundColor: { default: 'transparent', ':hover': '_fill' },\n  },\n  chevron: { flexShrink: 0, color: '_textMuted' },\n  chevronClosed: { rotate: '-90deg' },\n  description: { fontSize: '_sm', lineHeight: '_normal' },\n  extra: { display: 'flex', alignItems: 'center', gap: '_sm', flexShrink: 0 },\n  // 多列时列间距比行间距大：一眼看出哪几项是同一列\n  body: {\n    '--form-section-column-gap': '_space.xl',\n    display: 'grid',\n    columnGap: 'var(--form-section-column-gap)',\n    rowGap: '_md',\n    gridTemplateColumns: 'minmax(0, 1fr)',\n    alignItems: 'start',\n  },\n});\n\n/** FormSection 的样式：columns（最多几列、每列不窄于多少） */\nexport const formSectionColumnStyles = css.create({\n  columns: (count: number, minWidth: string) => ({\n    gridTemplateColumns: `repeat(auto-fill, minmax(max(min(${minWidth}, 100%), calc((100% - ${count - 1} * var(--form-section-column-gap)) / ${count})), 1fr))`,\n  }),\n});\n\n/** 表单里的一组字段：标题栏、字段栅格，可折叠；这一组的标签布局、只读、不可用 */\nexport const FormSection = _component(\n  ({\n    title,\n    description,\n    extra,\n    headingLevel = 3,\n    columns = 1,\n    minColumnWidth = '26em',\n    collapsible = false,\n    _open: open = _bindable(true),\n    labelPlacement,\n    labelWidth,\n    labelAlign,\n    disabled,\n    readonly,\n    propsHeader,\n    propsHeading,\n    propsTrigger,\n    propsChevron,\n    propsDescription,\n    propsExtra,\n    propsBody,\n    propsCollapse,\n    children,\n    ...rest\n  }: FormSectionProps) => {\n    const id = useId();\n    const ids = { title: `${id}-title`, description: `${id}-description`, body: `${id}-body` };\n    provideFieldLayout(() => ({ labelPlacement, labelWidth, labelAlign, disabled, readonly }));\n    const bodyRef = provideGridColumns(() =>\n      columns > 1 ? { columns, minItemWidth: minColumnWidth } : { columns: 1 },\n    );\n\n    return () => {\n      const expanded = !collapsible || open;\n      const state = expanded ? 'open' : 'closed';\n      const titleContent = collapsible ? (\n        <ButtonBase\n          {...mergePartProps<ButtonBaseProps>({ sx: formSectionStyles.trigger }, propsTrigger, {\n            id: ids.title,\n            'aria-expanded': open,\n            'aria-controls': ids.body,\n            onClick: () => (open = !open),\n          })}\n          data-state={state}\n        >\n          <span>{title}</span>\n          <Icon\n            {...mergePartProps<IconProps>(\n              {\n                icon: ChevronDown,\n                sx: [\n                  formSectionStyles.chevron,\n                  disclosureStyles.icon,\n                  !open && formSectionStyles.chevronClosed,\n                ],\n              },\n              propsChevron,\n            )}\n          />\n        </ButtonBase>\n      ) : (\n        <span id={ids.title}>{title}</span>\n      );\n      const body = (\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              sx: [\n                formSectionStyles.body,\n                columns > 1 && formSectionColumnStyles.columns(columns, minColumnWidth),\n              ],\n            },\n            propsBody,\n            { ref: bodyRef, ...(collapsible ? {} : { id: ids.body }) },\n          )}\n        >\n          {children}\n        </div>\n      );\n      return (\n        <div\n          {...mergeAttrs<'div'>({ sx: formSectionStyles.root }, rest, {\n            role: hasContent(title) ? 'group' : undefined,\n            'aria-labelledby': hasContent(title) ? ids.title : undefined,\n            'aria-describedby': hasContent(description) ? ids.description : undefined,\n          })}\n          data-state={collapsible ? state : undefined}\n        >\n          {(title != null || extra != null) && (\n            <div {...mergeAttrs<'div'>({ sx: formSectionStyles.header }, propsHeader)}>\n              <div {...css.attrs(formSectionStyles.headerText)}>\n                {hasContent(title) &&\n                  h(\n                    `h${headingLevel}`,\n                    mergeAttrs<'h3'>({ sx: formSectionStyles.heading }, propsHeading),\n                    [titleContent],\n                  )}\n                {hasContent(description) && (\n                  <Text\n                    {...mergePartProps<TextProps>(\n                      { tone: 'muted', sx: formSectionStyles.description },\n                      propsDescription,\n                      { id: ids.description },\n                    )}\n                  >\n                    {description}\n                  </Text>\n                )}\n              </div>\n              {hasContent(extra) && (\n                <div {...mergeAttrs<'div'>({ sx: formSectionStyles.extra }, propsExtra)}>\n                  {extra}\n                </div>\n              )}\n            </div>\n          )}\n          {collapsible ? (\n            <Collapse\n              {...mergePartProps<CollapseProps>({}, propsCollapse, { id: ids.body })}\n              _open={open}\n            >\n              {body}\n            </Collapse>\n          ) : (\n            body\n          )}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/index.d.ts

@@ -3,6 +3,8 @@ export { Blockquote, blockquoteStyles, type BlockquoteProps } from './base/Block
 export { Button, type ButtonManaged, type ButtonProps } from './base/Button';
 export { ButtonBase, type ButtonBaseManaged, type ButtonBaseProps } from './base/ButtonBase';
 export { ButtonGroup, buttonGroupStyles, type ButtonGroupManaged, type ButtonGroupProps, } from './base/ButtonGroup';
+export { Can, type CanProps } from './base/Can';
+export { ClientOnly, type ClientOnlyProps } from './base/ClientOnly';
 export { ClearButton, CloseButton, createPresetIconButton, type PresetIconButtonProps, } from './base/CloseButton';
 export { Code, codeStyles, type CodeProps } from './base/Code';
 export { CodeBlock, codeBlockDynamicStyles, codeBlockStyles, parseLineSpec, type CodeBlockProps, type LineSpec, } from './base/CodeBlock';
@@ -83,10 +85,11 @@ export { Popconfirm, popconfirmStyles, type PopconfirmProps } from './overlay/Po
 export { Popover, popoverStyles, type PopoverProps, type PopoverTriggerProps, } from './overlay/Popover';
 export { Tooltip, tooltipStyles, type TooltipProps, type TooltipTriggerProps, } from './overlay/Tooltip';
 export { Tour, tourDynamicStyles, tourStyles, type TourProps, type TourStep } from './overlay/Tour';
-export { useDetachedDialog, useDetachedOverlay, type DetachedDialogHost, type DetachedOverlayHandle, type DetachedOverlayOptions, } from './overlay/detached';
+export { useDetachedDialog, useDetachedOverlay, useDetachedRender, type DetachedDialogHost, type DetachedOverlayHandle, type DetachedOverlayOptions, } from './overlay/detached';
 export { Breadcrumbs, breadcrumbsStyles, type BreadcrumbItem, type BreadcrumbsProps, } from './navigation/Breadcrumbs';
 export { NavBar, navBarStyles, type NavBarItem, type NavBarProps } from './navigation/NavBar';
 export { NavCompactContext, NavGroup, NavGroupContext, NavItem, NavList, navListStyles, NavSection, type NavGroupProps, type NavGroupState, type NavItemManaged, type NavItemProps, type NavListProps, type NavSectionProps, } from './navigation/NavList';
+export { NavMenu, type NavMenuItem, type NavMenuProps, type NavMenuTopLevels, } from './navigation/NavMenu';
 export { PageJump, pageJumpStyles, type PageJumpProps } from './navigation/PageJump';
 export { PageSizeSelect, pageSizeSelectStyles, type PageSizeSelectProps, } from './navigation/PageSizeSelect';
 export { Pager, pagerStyles, type PagerLink, type PagerProps } from './navigation/Pager';
@@ -182,8 +185,8 @@ export { parseCsv, readCsvFile, sheetFromMatrix, type SheetMatrixOptions, type S
 export { dataTableRecipe, dataTableStateStyles, type DataTableDensities, type DataTableOptions, type DataTablePart, type DataTableVariants, } from './table/table-styles';
 export { tableParams, useTableQuery, type TablePage, type TableQuery, type TableQueryOptions, type TableQueryState, } from './table/use-table-query';
 export { ConfigScope, Provider, providerStyles, type ConfigScopeProps, type ProviderProps, } from './config/Provider';
-export { ConfigContext, defaultConfig, useConfig, useLang, useTextMatcher, type Highlighter, type QueryPatch, type QueryValues, type TextMatcher, type UiConfig, type UiRouter, } from './config/context';
-export { createUi, documentStyles, type UiOptions } from './config/createUi';
+export { ConfigContext, defaultConfig, useCan, useConfig, useLang, useTextMatcher, type Highlighter, type QueryPatch, type QueryValues, type TextMatcher, type UiConfig, type UiPermissions, type UiRouter, } from './config/context';
+export { createUi, documentStyles, type DocumentAttrs, type UiOptions, type UiPlugin, } from './config/createUi';
 export { mergeDefaults, useDefaults, type ComponentDefaults, type ResolvedDefaults, } from './config/defaults';
 export { queryCodecs, useQueryState, useQueryStates, type QueryCodec, type QueryCodecs, } from './config/query-state';
 export { mergeStyles, partAttrs, useRecipe, type ComponentStyles, type PartAttrs, type PartLayer, type StyleLayers, } from './config/styles';
@@ -205,6 +208,7 @@ export { sakuraColors, sakuraRadii, sakuraShadows, sakuraTheme } from './config/
 export { defineTheme, readToken, resolveTheme, themeAttrs, themeVariables, tokenValue, type ColorSchemes, type GroupTheme, type Theme, type ThemeInput, type ThemeOverrides, } from './config/theme/theme';
 import './config/theme/token-names';
 export { t } from './config/theme/tokens';
+export { createLayoutPreference, DEFAULT_LAYOUT_HEIGHT, DEFAULT_LAYOUT_STORAGE_KEY, DEFAULT_LAYOUT_WIDTH, LAYOUT_MODES, LAYOUT_SIDES, type LayoutMode, type LayoutPreference, type LayoutPreferenceOptions, type LayoutSide, type LayoutState, } from './config/layout/preference';
 export { enUS } from './config/lang/en-US';
 export { useFormat, type NumericFormat, type RelativeFormatOptions } from './config/lang/format';
 export { defineLang, type Directions, type ErrorCodeText, type HourCycles, type Lang, type LangMessages, } from './config/lang/lang';
@@ -225,7 +229,7 @@ export { caretAnchor, caretRect } from './utils/dom/caret';
 export { useClipboard, type ClipboardOptions, type ClipboardState } from './utils/dom/clipboard';
 export { inlineArrows, isRtl, type InlineArrows } from './utils/dom/direction';
 export { downloadFile, pickFile } from './utils/dom/download';
-export { toElement } from './utils/dom/element';
+export { isHTMLElement, toElement } from './utils/dom/element';
 export { useEventListener, type ListenerTarget } from './utils/dom/event-listener';
 export { anchoredPanelSx, anchorFloating, createAnchoredLayer, floatingStyles, pointAnchor, useAnchoredPopover, type Anchored, type AnchoredLayer, type AnchoredPopoverEvents, type AnchoredPopoverState, type FloatingAnchor, type FloatingOptions, type FloatingPlacement, type FloatingPlacements, type RestoreFocus, } from './utils/dom/floating';
 export { focusAfterRemoval, focusControl, focusFirst, focusOrigin, returnFocus, trapFocus, } from './utils/dom/focus';
@@ -237,6 +241,7 @@ export { useIntersectionObserver, type IntersectionOptions } from './utils/dom/i
 export { batchLayout } from './utils/dom/layout-batch';
 export { externalLinkAttrs, shouldRouteClick, useRouterLink, type RouterLink, } from './utils/dom/link';
 export { useMediaQuery, usePrefersDark, useReducedMotion } from './utils/dom/media-query';
+export { useMounted } from './utils/dom/mounted';
 export { startMove, type MoveOptions, type MovePoint } from './utils/dom/move';
 export { openSetter, type OpenChangeDetails, type OpenChangeProps, type OpenChangeReasons, type SetOpen, } from './utils/dom/open-change';
 export { fitCount, useOverflowItems, type OverflowItems, type OverflowItemsOptions, } from './utils/dom/overflow';
@@ -260,7 +265,7 @@ export { sameValue } from './utils/data/equality';
 export { createHistory, type History, type HistoryCommitOptions, type HistoryGesture, type HistoryOptions, } from './utils/data/history';
 export { cachedIntl } from './utils/data/intl-cache';
 export { normalizeNumber, parseNumber } from './utils/data/number-parse';
-export { clamp, snapToStep } from './utils/data/number';
+export { clamp, snapToStep, svgNumber } from './utils/data/number';
 export { addNumeric, compareDecimalText, compareNumeric, decimalTextOf, isDecimal, isNumeric, isNumericText, multiplyNumeric, numericKind, numericText, sameNumeric, shiftDecimal, snapNumeric, toNumber, toNumericKind, type NumericKind, type NumericValue, } from './utils/data/numeric';
 export { paginationItems, type PaginationEllipsis, type PaginationOptions, } from './utils/data/pagination';
 export { selectedValues, toggleSelection, type MultipleSelectionProps, type SelectionModes, type SelectionOptions, type SelectionProps, type SingleSelectionProps, } from './utils/data/selection';
@@ -271,7 +276,7 @@ export { addWorkdays, createWorkCalendar, deadlineOf, useWorkCalendar, weekdayCa
 export { useVirtualizer, type UseVirtualizerOptions, type VirtualView, } from './utils/virtual/use-virtualizer';
 export { computeMeasurements, defaultRangeExtractor, findVisibleRange, isWindow, Virtualizer, type ExtractorRange, type ScrollAligns, type VirtualItem, type VirtualizerOptions, type VirtualScrollOptions, type VisibleRange, } from './utils/virtual/virtualizer';
 export { codeText, errorCodeOf, errorCodeText, errorMessage, useErrorMessage, } from './utils/request/error-message';
-export { createHttpClient, HTTP_ERROR_CODES, HttpError, isAbortError, OK_CODE, scopeHttp, useHttp, type ApiEnvelope, type ApiErrorDetail, type FetchClient, type HttpClient, type HttpClientOptions, type HttpErrorCode, type HttpErrorContext, type HttpMethod, type HttpRequest, type QueryValue, } from './utils/request/http';
+export { createHttpClient, HTTP_ERROR_CODES, HttpError, isAbortError, OK_CODE, scopeHttp, useHttp, type ApiEnvelope, type ApiErrorDetail, type FetchClient, type HttpClient, type HttpClientOptions, type HttpErrorCode, type HttpErrorContext, type HttpMethod, type HttpRequest, type HttpWire, type QueryValue, } from './utils/request/http';
 export { useAutosave, type Autosave, type AutosaveOptions, type AutosaveStatus, } from './utils/request/use-autosave';
 export { useRequest, type RequestOptions, type RequestState } from './utils/request/use-request';
 export { fromWire, toWire, wireText, type WireReviveOptions, type WireScalar, type WireType, type WireTypes, } from './utils/request/wire';

package/dist/index.js

@@ -1,11 +1,11 @@
 import { cachedIntl } from "./utils/data/intl-cache.js";
-import { clamp, snapToStep } from "./utils/data/number.js";
+import { clamp, snapToStep, svgNumber } from "./utils/data/number.js";
 import { addNumeric, compareDecimalText, compareNumeric, decimalTextOf, isDecimal, isNumeric, isNumericText, multiplyNumeric, numericKind, numericText, sameNumeric, shiftDecimal, snapNumeric, toNumber, toNumericKind } from "./utils/data/numeric.js";
 import { createComparer, createMatcher, isDateValue, sortByValue, sortByValues } from "./utils/data/collation.js";
 import { zhCN } from "./config/lang/zh-CN.js";
 import { t } from "./config/theme/tokens.js";
 import { defaultFonts, defaultRadii, lightColors, lightShadows, lightTheme } from "./config/theme/light.js";
-import { ConfigContext, defaultConfig, useConfig, useLang, useTextMatcher } from "./config/context.js";
+import { ConfigContext, defaultConfig, useCan, useConfig, useLang, useTextMatcher } from "./config/context.js";
 import { mergeDefaults, useDefaults } from "./config/defaults.js";
 import { applyStyleAttrs, dataAttrs, defaultLabelledBy, elementProps, hasContent, mergeAttrs, mergePartProps, mergeProps } from "./utils/props.js";
 import { fontSizeStyles, fontWeightStyles, lineClampStyles, relativeFontSizeStyles, textAlignStyles, textStyles, textWrapStyles, toneStyles } from "./utils/style/typography.js";
@@ -27,6 +27,9 @@ import { ButtonGroupContext, buttonBaseStyles, buttonContent, buttonPart, button
 import { Button } from "./base/Button.js";
 import { ButtonBase } from "./base/ButtonBase.js";
 import { ButtonGroup, buttonGroupStyles } from "./base/ButtonGroup.js";
+import { Can } from "./base/Can.js";
+import { useMounted } from "./utils/dom/mounted.js";
+import { ClientOnly } from "./base/ClientOnly.js";
 import { IconButton } from "./base/IconButton.js";
 import { ClearButton, CloseButton, createPresetIconButton } from "./base/CloseButton.js";
 import { Code, codeStyles } from "./base/Code.js";
@@ -53,7 +56,7 @@ import { LinkButton } from "./base/LinkButton.js";
 import { List, ListContext, ListItem, OrderedList, listStylesProse } from "./base/List.js";
 import { Mark, markStyles } from "./base/Mark.js";
 import { StatusDot, statusDotDynamicStyles, statusDotStyles, statusDotToneStyles } from "./base/StatusDot.js";
-import { toElement } from "./utils/dom/element.js";
+import { isHTMLElement, toElement } from "./utils/dom/element.js";
 import { useDismissible, useLazyContent, usePresence } from "./utils/motion/presence.js";
 import { childNodes, plainText } from "./utils/data/text.js";
 import { Tag, tagStyles } from "./base/Tag.js";
@@ -146,7 +149,7 @@ import { ToastItem, Toaster, createToaster, toastCountdownStyles, toastPlacement
 import { CharacterCount, characterCountStyles } from "./input/CharacterCount.js";
 import { clickOnShell, controlAffix, controlClear, controlIcon, controlParts, focusOnShell, inputRecipe, useControlAppearance } from "./input/control.js";
 import { Textarea, textareaRowStyles, textareaStyles } from "./input/Textarea.js";
-import { useDetachedDialog, useDetachedOverlay } from "./overlay/detached.js";
+import { useDetachedDialog, useDetachedOverlay, useDetachedRender } from "./overlay/detached.js";
 import { ModalCore, modalPartStyles } from "./overlay/ModalCore.js";
 import { Dialog, dialogRecipe, useDialog } from "./overlay/Dialog.js";
 import { AlertDialog, useConfirm } from "./overlay/AlertDialog.js";
@@ -164,6 +167,7 @@ import { Breadcrumbs, breadcrumbsStyles } from "./navigation/Breadcrumbs.js";
 import { fitCount, useOverflowItems } from "./utils/dom/overflow.js";
 import { NavBar, navBarStyles } from "./navigation/NavBar.js";
 import { NavCompactContext, NavGroup, NavGroupContext, NavItem, NavList, NavSection, navListStyles } from "./navigation/NavList.js";
+import { NavMenu } from "./navigation/NavMenu.js";
 import { FormValue, formValueText } from "./form/FormValue.js";
 import { normalizeNumber, parseNumber } from "./utils/data/number-parse.js";
 import { NumberField } from "./input/NumberField.js";
@@ -273,6 +277,7 @@ import { sakuraColors, sakuraRadii, sakuraShadows, sakuraTheme } from "./config/
 import { builtinThemeLabel, builtinThemes } from "./config/theme/builtin.js";
 import { revealTransition } from "./utils/motion/reveal.js";
 import { createThemePreference } from "./config/theme/preference.js";
+import { DEFAULT_LAYOUT_HEIGHT, DEFAULT_LAYOUT_STORAGE_KEY, DEFAULT_LAYOUT_WIDTH, LAYOUT_MODES, LAYOUT_SIDES, createLayoutPreference } from "./config/layout/preference.js";
 import { enUS } from "./config/lang/en-US.js";
 import { useMessages } from "./config/lang/messages.js";
 import { downloadFile, pickFile } from "./utils/dom/download.js";
@@ -282,4 +287,4 @@ import { createHistory } from "./utils/data/history.js";
 import { createStatusMap } from "./utils/data/status.js";
 import { addWorkdays, createWorkCalendar, deadlineOf, useWorkCalendar, weekdayCalendar, workdaysBetween } from "./utils/data/workdays.js";
 import { useAutosave } from "./utils/request/use-autosave.js";
-export { Accordion, AccordionContext, AccordionItem, Affix, Alert, AlertDialog, AnimatedNumber, AsideLayout, AttachedContext, Autocomplete, Avatar, AvatarGroup, AvatarGroupContext, BackTop, Badge, Banner, Blockquote, Breadcrumbs, Button, ButtonBase, ButtonGroup, ButtonGroupContext, COLUMN_FLEX_MIN_WIDTH, COLUMN_MIN_WIDTH, CONTRAST_AA, Calendar, CalendarBoard, CalendarView, Card, Cascader, CharacterCount, Checkbox, CheckboxGroup, CheckboxGroupContext, Checklist, ClearButton, CloseButton, Code, CodeBlock, Collapse, Collapsible, ColorField, ColumnFilterButton, ColumnMenuButton, ColumnResizer, ColumnSettings, ColumnTable, Combobox, CommandPalette, ConditionBuilder, ConfigContext, ConfigScope, Container, ContextMenu, ControlGroup, CopyButton, Countdown, DEFAULT_THEME_STORAGE_KEY, DataTable, DataTableDetailRow, DataTableRow, DataTableView, DateField, DatePicker, DateRangePicker, DateSegmentGroup, DateTime, Descriptions, Dialog, Drawer, Ellipsis, Em, Empty, Field, FieldCompare, FieldContext, FieldLayoutContext, FileDrop, Flex, FlexList, FlexOrderedList, Form, FormContext, FormErrorSummary, FormSection, FormValue, Gauge, Grid, GridItem, GridList, GridListItem, H1, H2, H3, H4, H5, H6, HTTP_ERROR_CODES, HoverCard, HttpError, Icon, IconButton, IconLinkButton, Image, ImageGroup, Indicator, ItemList, ItemListItem, Kbd, Label, Lightbox, Link, LinkButton, List, ListContext, ListItem, ListPopover, Listbox, ListboxView, LoadingBar, LoadingOverlay, Mark, Marquee, MentionText, Mentions, Menu, MenuCheckboxItem, MenuContext, MenuGroup, MenuItem, MenuLinkItem, MenuRadioGroup, MenuRadioGroupContext, MenuRadioItem, MenuSub, ModalCore, NavBar, NavCompactContext, NavGroup, NavGroupContext, NavItem, NavList, NavSection, NumberField, NumberRangeField, OK_CODE, OrderedList, OtpField, OverlayScrollbar, PageJump, PageScrollbar, PageSizeSelect, Pager, Pagination, PaginationBar, Paragraph, PeoplePicker, PeoplePickerPanel, PivotTable, Popconfirm, Popover, Progress, ProportionBar, Prose, Provider, QuarterCalendar, Radio, RadioGroup, RadioGroupContext, RangeCalendar, Rating, RelativeTime, ResizeHandle, Result, SHIMMER_STAGGER, SYSTEM_THEME, ScrollArea, SegmentedField, Select, SelectedTags, SelectionBar, Separator, Skeleton, SkeletonText, SkipLink, Slider, Small, Sortable, Sparkline, Spinner, Splitter, Stat, StatGroup, StatusBadge, StatusDot, Steps, Strong, Switch, Tab, TabList, TabPanel, Table, TableBody, TableCaption, TableCell, TableContext, TableFoot, TableHead, TableHeaderCell, TableOfContents, TableRow, TableSectionContext, Tabs, TabsContext, Tag, TagsInput, Text, TextField, Textarea, TimeField, TimePicker, Timeline, ToastItem, Toaster, ToggleGroup, ToggleGroupContext, ToggleItem, Toolbar, ToolbarContext, Tooltip, Tour, Transfer, Tree, TreeDataTable, TreeSelect, TreeTransfer, Upload, ViewportFill, VirtualList, Virtualizer, VisuallyHidden, Watermark, accordionStyles, activeOptionId, addNumeric, addWorkdays, affixPositionStyles, affixStyles, afterTransitions, alertRecipe, anchorFloating, anchoredPanelSx, animatedNumberStyles, announce, applyStyleAttrs, ariaKeyShortcut, arrangeColumns, asideLayoutDynamicStyles, asideLayoutStyles, attachedStyles, avatarGroupStyles, avatarRecipe, backTopStyles, backgroundOf, badgeParts, badgeRecipe, bankCardFormat, bannerStyles, batchLayout, bigintSchema, blockquoteStyles, breadcrumbsStyles, buildTree, builtinThemeBootColors, builtinThemeLabel, builtinThemes, buttonBaseStyles, buttonContent, buttonGroupStyles, buttonPart, buttonRecipe, buttonStyles, buttonSx, cachedIntl, calendarBoardStyles, calendarOf, calendarStyles, cardEffectDynamicStyles, cardRecipe, caretAnchor, caretRect, cascaderStyles, characterCountStyles, checkStates, checkboxStyles, checkedByStrategy, checklistStatusStyles, checklistStyles, childNodes, choiceInputStyles, choiceParts, choiceRecipe, clamp, clampDate, clampPan, clickOnShell, cloneValue, codeBlockDynamicStyles, codeBlockStyles, codeStyles, codeText, coffeeColors, coffeeTheme, collapseStyles, collectHeadings, colorFieldDynamicStyles, colorFieldStyles, columnAlign, columnFilter, columnGapStyles, columnHeaderActionStyles, columnSettingsStyles, columnTableStyles, columnType, columnValue, comboboxStyles, commandPaletteStyles, compareDates, compareDecimalText, compareNumeric, computeMeasurements, conditionBuilderStyles, conditionOperators, containerPaddingStyles, containerSizeStyles, containerStyles, contrastRatio, controlAffix, controlClear, controlGroupStyles, controlIcon, controlParts, copyButtonStyles, countdownParts, countdownStyles, createAnchoredLayer, createComparer, createConstraints, createContainer, createFlex, createGrid, createGridItem, createGroupedFormat, createHeading, createHistory, createHoverGroup, createHttpClient, createLoadingBar, createMatcher, createPresetIconButton, createStatusMap, createText, createThemePreference, createToaster, createTypeahead, createUi, createWorkCalendar, cyberpunkColors, cyberpunkFonts, cyberpunkRadii, cyberpunkShadows, cyberpunkTheme, darkColors, darkShadows, darkTheme, dataAttrs, dataTableDynamicStyles, dataTableRecipe, dataTableRowToneStyles, dataTableStateStyles, datePickerStyles, dateRangePickerStyles, dateSegmentStyles, dateUnitOf, dayRangeBounds, daysBetween, deadlineOf, decimalSchema, decimalTextOf, defaultConfig, defaultFonts, defaultLabelledBy, defaultRadii, defaultRangeExtractor, defineLang, defineTheme, describeCondition, descriptionsGridStyles, descriptionsStyles, dialogRecipe, diffFields, disclosureStyles, dismissOnBackdrop, displayPosition, documentStyles, downloadFile, drawerRecipe, elementProps, ellipsisStyles, emptyRecipe, enUS, errorCodeOf, errorCodeText, errorMessage, existingUploadFile, externalLinkAttrs, festiveColors, festiveShadows, festiveTheme, fieldColumnStyles, fieldCompareStyles, fieldStyles, fieldsToIso, fileDropStyles, filterOptions, filterRows, filterTree, findVisibleRange, firstSegmentOf, fitCount, fitTransform, flattenTree, flexAlignStyles, flexJustifyStyles, flexStyles, floatingStyles, focusAfterRemoval, focusCalendar, focusControl, focusFirst, focusOnShell, focusOrigin, focusRingStyles, fontSizeStyles, fontWeightStyles, forestColors, forestShadows, forestTheme, formErrorSummaryStyles, formSectionColumnStyles, formSectionStyles, formValueText, formatCell, formatConditionValue, formatHotkey, formatSorts, fromWire, fullIsoDay, gapStyles, gaugeStyles, gridAlignStyles, gridDynamicStyles, gridFlowStyles, gridFocus, gridItemDynamicStyles, gridItemStyles, gridJustifyStyles, gridStyles, handleCalendarKeydown, handleListKeydown, handleSegmentKeydown, hasContent, hasTimeOf, headerLayout, headingMarker, headingStyles, highContrastColors, highContrastRadii, highContrastShadows, highContrastTheme, hoverCardStyles, iconMarkup, iconStyles, idCardFormat, idCardSchema, imageDynamicStyles, imageFitStyles, imageGroupStyles, imageStyles, indexTree, indicatorRecipe, initials, inlineArrows, inputRecipe, interactionTransitions, isAbortError, isApplePlatform, isCellEditable, isComposingKey, isConditionGroup, isDateDisabled, isDateValue, isDecimal, isEditable, isExpandable, isInRange, isNumeric, isNumericText, isOutOfRange, isOutsideDecade, isPeriodDisabled, isRtl, isRuleComplete, isSameDate, isTimeGranularity, isValidIdCard, isWindow, isoDayOfWeek, isoToFields, isoToValue, isoWeekOf, isoWeeksInYear, itemListStyles, itemStyles, kbdStyles, labelStyles, lastIsoDay, lemonColors, lemonRadii, lemonShadows, lemonTheme, lightColors, lightShadows, lightTheme, lightboxDynamicStyles, lightboxStyles, lineClampStyles, linkRecipe, listPopoverStyles, listRole, listStyles, listStylesProse, listboxPositionStyles, listboxStyles, loadingBarScaleStyles, loadingBarStyles, loadingOverlayStyles, localPeopleSource, lockScroll, machineDateTime, markStyles, marqueeDynamicStyles, marqueeStyles, marqueeTrailStyles, matchesAccept, matchesCondition, matchesHotkey, mentionSegments, mentionStyles, mentionedValues, menuItemContent, menuItemDescribedBy, menuItemSx, menuStyles, mergeAttrs, mergeDefaults, mergePartProps, mergeProps, mergeStyles, midnightColors, midnightTheme, modalPartStyles, monthGrid, monthsOfYear, moveNode, multiplyNumeric, navBarStyles, navListStyles, needsValue, nextSort, nextSorts, normalizeNumber, numberRangeFieldStyles, numericKind, numericText, oceanColors, oceanRadii, oceanShadows, oceanTheme, openModalDialog, openSetter, operatorLabel, operatorsOf, orderedRange, otpFieldStyles, paddingInlineStyles, pageJumpStyles, pageScrollbarStyles, pageSizeSelectStyles, pagerStyles, paginationBarStyles, paginationItems, paginationStyles, paperColors, paperFonts, paperShadows, paperTheme, parseColor, parseCsv, parseDuration, parseHotkey, parseIsoDate, parseIsoDateTime, parseIsoRange, parseIsoTime, parseLineSpec, parseNumber, parseSorts, partAttrs, peopleKey, peoplePickerPanelDynamicStyles, peoplePickerPanelStyles, phoneFormat, phoneSchema, pickFile, pickerPresetStyles, pivot, pivotTableStyles, plainText, pointAnchor, popconfirmStyles, popoverStyles, presenceStyles, presetIsoRange, presetRange, progressRecipe, progressTargetPositionStyles, progressWidthStyles, proportionBarDynamicStyles, proportionBarStyles, proseStyles, provideFieldLayout, provideGridColumns, providerStyles, queryCodecs, radioStyles, radiusStyles, rangeDays, rangeHasUnavailable, rasterizeSvg, ratingClipStyles, ratingStyles, ratingToneStyles, readCsvFile, readToken, readableText, readonlyChoiceHandlers, relativeFontSizeStyles, relativeUnit, renderPickerPresets, repeatedRowSpans, resizeHandleStyles, resolveTheme, resultRecipe, returnFocus, revealTransition, rippleHostStyles, ripplePlacementStyles, rippleStyles, rovingFocus, rowGapStyles, rowLabel, sakuraColors, sakuraRadii, sakuraShadows, sakuraTheme, sameNumeric, sameStickyOffsets, sameValue, scopeHttp, scrollAreaBarStyles, scrollAreaStyles, segmentFields, segmentedFieldStyles, selectStyles, selectedTagsStyles, selectedValues, selectionBarStyles, separatorStyles, sheetFromMatrix, shiftDecimal, shiftIsoDate, shimmerStyles, shouldRouteClick, skeletonStyles, skeletonTextStyles, skeletonVariantStyles, skipLinkStyles, sliderPositionStyles, sliderStyles, snapNumeric, snapToStep, sortByValue, sortByValues, sortList, sortRows, sortableStyles, sparklineStyles, spinnerStyles, splitterDynamicStyles, splitterStyles, startMove, startRipple, statGroupDynamicStyles, statGroupStyles, statStyles, statusDotDynamicStyles, statusDotStyles, statusDotToneStyles, statusIcons, statusToneBorderStyles, statusToneStyles, statusToneSx, stepsStateStyles, stepsStyles, stickyOffsets, sumColumn, swatchStyles, switchStyles, syncChecked, t, tabListStyles, tabPanelStyles, tabRecipe, tableDynamicStyles, tableMinWidth, tableOfContentsStyles, tableParams, tableRecipe, tableToCsv, tabsStyles, tagStyles, tagsInputStyles, textAlignStyles, textComponentStyles, textStyles, textWrapStyles, textareaRowStyles, textareaStyles, themeAttrs, themeBootScript, themeTransition, themeTransitionOrInstant, themeVariables, timePickerStyles, timelineStyles, timelineToneStyles, toDateLimits, toDayOfWeek, toElement, toHex, toInstant, toIsoDate, toIsoDateTime, toIsoQuarter, toIsoRange, toIsoTime, toIsoWeek, toListboxOption, toNumber, toNumericKind, toPeopleValue, toText, toTime, toWire, toastCountdownStyles, toastPlacementStyles, toastStackStyles, toastStyles, todayIso, toggleChecked, toggleGroupStyles, toggleSelection, tokenValue, toneFillStyles, toneStyles, toolbarStyles, tooltipStyles, topModal, tourDynamicStyles, tourStyles, trackModal, transferStyles, transitions, trapFocus, treeDataTableIndentStyles, treeDataTableStyles, treeDynamicStyles, treePath, treeSelectStyles, treeStyles, truncateDate, uploadDynamicStyles, uploadStyles, useActiveIndicator, useAnchoredPopover, useAnimate, useAutosave, useButtonAppearance, useButtonBehavior, useCalendarState, useChoiceAppearance, useClipboard, useColumnDisplay, useConfig, useConfirm, useControlAppearance, useDateLocale, useDateSegments, useDefaults, useDelayedLoading, useDetachedDialog, useDetachedOverlay, useDialog, useDismissible, useDrawer, useErrorMessage, useEventListener, useFieldControl, useFieldSegments, useForm, useFormReset, useFormat, useFullscreen, useHotkeys, useHoverIntent, useHoverLayer, useHttp, useIntersectionObserver, useLang, useLayoutAnimation, useLazyContent, useLeaveConfirmation, useListState, useMediaQuery, useMenuItem, useMenuItemContentIds, useMessages, useNow, useOverflowItems, usePageVisible, usePanZoom, usePersistentState, usePickerPopover, usePointer, usePrefersDark, usePresence, useQueryState, useQueryStates, useRecipe, useReducedMotion, useRemoteItems, useRequest, useResizeObserver, useResultAnnouncement, useRipple, useRouterLink, useScrollSpy, useSelectedOptions, useSortable, useSpring, useTableQuery, useTextMatcher, useTreeExpansion, useTween, useVirtualizer, useWorkCalendar, valueShape, valueToIso, viewportFillDynamicStyles, viewportFillStyles, virtualListSizeStyles, virtualListStyles, visuallyHiddenStyles, watermarkStyles, watermarkTileStyles, weekOfYear, weekdayCalendar, weekdayNames, wireText, withAlpha, workdaysBetween, writeDateLike, yearsOfDecade, zhCN, zoomAround };
+export { Accordion, AccordionContext, AccordionItem, Affix, Alert, AlertDialog, AnimatedNumber, AsideLayout, AttachedContext, Autocomplete, Avatar, AvatarGroup, AvatarGroupContext, BackTop, Badge, Banner, Blockquote, Breadcrumbs, Button, ButtonBase, ButtonGroup, ButtonGroupContext, COLUMN_FLEX_MIN_WIDTH, COLUMN_MIN_WIDTH, CONTRAST_AA, Calendar, CalendarBoard, CalendarView, Can, Card, Cascader, CharacterCount, Checkbox, CheckboxGroup, CheckboxGroupContext, Checklist, ClearButton, ClientOnly, CloseButton, Code, CodeBlock, Collapse, Collapsible, ColorField, ColumnFilterButton, ColumnMenuButton, ColumnResizer, ColumnSettings, ColumnTable, Combobox, CommandPalette, ConditionBuilder, ConfigContext, ConfigScope, Container, ContextMenu, ControlGroup, CopyButton, Countdown, DEFAULT_LAYOUT_HEIGHT, DEFAULT_LAYOUT_STORAGE_KEY, DEFAULT_LAYOUT_WIDTH, DEFAULT_THEME_STORAGE_KEY, DataTable, DataTableDetailRow, DataTableRow, DataTableView, DateField, DatePicker, DateRangePicker, DateSegmentGroup, DateTime, Descriptions, Dialog, Drawer, Ellipsis, Em, Empty, Field, FieldCompare, FieldContext, FieldLayoutContext, FileDrop, Flex, FlexList, FlexOrderedList, Form, FormContext, FormErrorSummary, FormSection, FormValue, Gauge, Grid, GridItem, GridList, GridListItem, H1, H2, H3, H4, H5, H6, HTTP_ERROR_CODES, HoverCard, HttpError, Icon, IconButton, IconLinkButton, Image, ImageGroup, Indicator, ItemList, ItemListItem, Kbd, LAYOUT_MODES, LAYOUT_SIDES, Label, Lightbox, Link, LinkButton, List, ListContext, ListItem, ListPopover, Listbox, ListboxView, LoadingBar, LoadingOverlay, Mark, Marquee, MentionText, Mentions, Menu, MenuCheckboxItem, MenuContext, MenuGroup, MenuItem, MenuLinkItem, MenuRadioGroup, MenuRadioGroupContext, MenuRadioItem, MenuSub, ModalCore, NavBar, NavCompactContext, NavGroup, NavGroupContext, NavItem, NavList, NavMenu, NavSection, NumberField, NumberRangeField, OK_CODE, OrderedList, OtpField, OverlayScrollbar, PageJump, PageScrollbar, PageSizeSelect, Pager, Pagination, PaginationBar, Paragraph, PeoplePicker, PeoplePickerPanel, PivotTable, Popconfirm, Popover, Progress, ProportionBar, Prose, Provider, QuarterCalendar, Radio, RadioGroup, RadioGroupContext, RangeCalendar, Rating, RelativeTime, ResizeHandle, Result, SHIMMER_STAGGER, SYSTEM_THEME, ScrollArea, SegmentedField, Select, SelectedTags, SelectionBar, Separator, Skeleton, SkeletonText, SkipLink, Slider, Small, Sortable, Sparkline, Spinner, Splitter, Stat, StatGroup, StatusBadge, StatusDot, Steps, Strong, Switch, Tab, TabList, TabPanel, Table, TableBody, TableCaption, TableCell, TableContext, TableFoot, TableHead, TableHeaderCell, TableOfContents, TableRow, TableSectionContext, Tabs, TabsContext, Tag, TagsInput, Text, TextField, Textarea, TimeField, TimePicker, Timeline, ToastItem, Toaster, ToggleGroup, ToggleGroupContext, ToggleItem, Toolbar, ToolbarContext, Tooltip, Tour, Transfer, Tree, TreeDataTable, TreeSelect, TreeTransfer, Upload, ViewportFill, VirtualList, Virtualizer, VisuallyHidden, Watermark, accordionStyles, activeOptionId, addNumeric, addWorkdays, affixPositionStyles, affixStyles, afterTransitions, alertRecipe, anchorFloating, anchoredPanelSx, animatedNumberStyles, announce, applyStyleAttrs, ariaKeyShortcut, arrangeColumns, asideLayoutDynamicStyles, asideLayoutStyles, attachedStyles, avatarGroupStyles, avatarRecipe, backTopStyles, backgroundOf, badgeParts, badgeRecipe, bankCardFormat, bannerStyles, batchLayout, bigintSchema, blockquoteStyles, breadcrumbsStyles, buildTree, builtinThemeBootColors, builtinThemeLabel, builtinThemes, buttonBaseStyles, buttonContent, buttonGroupStyles, buttonPart, buttonRecipe, buttonStyles, buttonSx, cachedIntl, calendarBoardStyles, calendarOf, calendarStyles, cardEffectDynamicStyles, cardRecipe, caretAnchor, caretRect, cascaderStyles, characterCountStyles, checkStates, checkboxStyles, checkedByStrategy, checklistStatusStyles, checklistStyles, childNodes, choiceInputStyles, choiceParts, choiceRecipe, clamp, clampDate, clampPan, clickOnShell, cloneValue, codeBlockDynamicStyles, codeBlockStyles, codeStyles, codeText, coffeeColors, coffeeTheme, collapseStyles, collectHeadings, colorFieldDynamicStyles, colorFieldStyles, columnAlign, columnFilter, columnGapStyles, columnHeaderActionStyles, columnSettingsStyles, columnTableStyles, columnType, columnValue, comboboxStyles, commandPaletteStyles, compareDates, compareDecimalText, compareNumeric, computeMeasurements, conditionBuilderStyles, conditionOperators, containerPaddingStyles, containerSizeStyles, containerStyles, contrastRatio, controlAffix, controlClear, controlGroupStyles, controlIcon, controlParts, copyButtonStyles, countdownParts, countdownStyles, createAnchoredLayer, createComparer, createConstraints, createContainer, createFlex, createGrid, createGridItem, createGroupedFormat, createHeading, createHistory, createHoverGroup, createHttpClient, createLayoutPreference, createLoadingBar, createMatcher, createPresetIconButton, createStatusMap, createText, createThemePreference, createToaster, createTypeahead, createUi, createWorkCalendar, cyberpunkColors, cyberpunkFonts, cyberpunkRadii, cyberpunkShadows, cyberpunkTheme, darkColors, darkShadows, darkTheme, dataAttrs, dataTableDynamicStyles, dataTableRecipe, dataTableRowToneStyles, dataTableStateStyles, datePickerStyles, dateRangePickerStyles, dateSegmentStyles, dateUnitOf, dayRangeBounds, daysBetween, deadlineOf, decimalSchema, decimalTextOf, defaultConfig, defaultFonts, defaultLabelledBy, defaultRadii, defaultRangeExtractor, defineLang, defineTheme, describeCondition, descriptionsGridStyles, descriptionsStyles, dialogRecipe, diffFields, disclosureStyles, dismissOnBackdrop, displayPosition, documentStyles, downloadFile, drawerRecipe, elementProps, ellipsisStyles, emptyRecipe, enUS, errorCodeOf, errorCodeText, errorMessage, existingUploadFile, externalLinkAttrs, festiveColors, festiveShadows, festiveTheme, fieldColumnStyles, fieldCompareStyles, fieldStyles, fieldsToIso, fileDropStyles, filterOptions, filterRows, filterTree, findVisibleRange, firstSegmentOf, fitCount, fitTransform, flattenTree, flexAlignStyles, flexJustifyStyles, flexStyles, floatingStyles, focusAfterRemoval, focusCalendar, focusControl, focusFirst, focusOnShell, focusOrigin, focusRingStyles, fontSizeStyles, fontWeightStyles, forestColors, forestShadows, forestTheme, formErrorSummaryStyles, formSectionColumnStyles, formSectionStyles, formValueText, formatCell, formatConditionValue, formatHotkey, formatSorts, fromWire, fullIsoDay, gapStyles, gaugeStyles, gridAlignStyles, gridDynamicStyles, gridFlowStyles, gridFocus, gridItemDynamicStyles, gridItemStyles, gridJustifyStyles, gridStyles, handleCalendarKeydown, handleListKeydown, handleSegmentKeydown, hasContent, hasTimeOf, headerLayout, headingMarker, headingStyles, highContrastColors, highContrastRadii, highContrastShadows, highContrastTheme, hoverCardStyles, iconMarkup, iconStyles, idCardFormat, idCardSchema, imageDynamicStyles, imageFitStyles, imageGroupStyles, imageStyles, indexTree, indicatorRecipe, initials, inlineArrows, inputRecipe, interactionTransitions, isAbortError, isApplePlatform, isCellEditable, isComposingKey, isConditionGroup, isDateDisabled, isDateValue, isDecimal, isEditable, isExpandable, isHTMLElement, isInRange, isNumeric, isNumericText, isOutOfRange, isOutsideDecade, isPeriodDisabled, isRtl, isRuleComplete, isSameDate, isTimeGranularity, isValidIdCard, isWindow, isoDayOfWeek, isoToFields, isoToValue, isoWeekOf, isoWeeksInYear, itemListStyles, itemStyles, kbdStyles, labelStyles, lastIsoDay, lemonColors, lemonRadii, lemonShadows, lemonTheme, lightColors, lightShadows, lightTheme, lightboxDynamicStyles, lightboxStyles, lineClampStyles, linkRecipe, listPopoverStyles, listRole, listStyles, listStylesProse, listboxPositionStyles, listboxStyles, loadingBarScaleStyles, loadingBarStyles, loadingOverlayStyles, localPeopleSource, lockScroll, machineDateTime, markStyles, marqueeDynamicStyles, marqueeStyles, marqueeTrailStyles, matchesAccept, matchesCondition, matchesHotkey, mentionSegments, mentionStyles, mentionedValues, menuItemContent, menuItemDescribedBy, menuItemSx, menuStyles, mergeAttrs, mergeDefaults, mergePartProps, mergeProps, mergeStyles, midnightColors, midnightTheme, modalPartStyles, monthGrid, monthsOfYear, moveNode, multiplyNumeric, navBarStyles, navListStyles, needsValue, nextSort, nextSorts, normalizeNumber, numberRangeFieldStyles, numericKind, numericText, oceanColors, oceanRadii, oceanShadows, oceanTheme, openModalDialog, openSetter, operatorLabel, operatorsOf, orderedRange, otpFieldStyles, paddingInlineStyles, pageJumpStyles, pageScrollbarStyles, pageSizeSelectStyles, pagerStyles, paginationBarStyles, paginationItems, paginationStyles, paperColors, paperFonts, paperShadows, paperTheme, parseColor, parseCsv, parseDuration, parseHotkey, parseIsoDate, parseIsoDateTime, parseIsoRange, parseIsoTime, parseLineSpec, parseNumber, parseSorts, partAttrs, peopleKey, peoplePickerPanelDynamicStyles, peoplePickerPanelStyles, phoneFormat, phoneSchema, pickFile, pickerPresetStyles, pivot, pivotTableStyles, plainText, pointAnchor, popconfirmStyles, popoverStyles, presenceStyles, presetIsoRange, presetRange, progressRecipe, progressTargetPositionStyles, progressWidthStyles, proportionBarDynamicStyles, proportionBarStyles, proseStyles, provideFieldLayout, provideGridColumns, providerStyles, queryCodecs, radioStyles, radiusStyles, rangeDays, rangeHasUnavailable, rasterizeSvg, ratingClipStyles, ratingStyles, ratingToneStyles, readCsvFile, readToken, readableText, readonlyChoiceHandlers, relativeFontSizeStyles, relativeUnit, renderPickerPresets, repeatedRowSpans, resizeHandleStyles, resolveTheme, resultRecipe, returnFocus, revealTransition, rippleHostStyles, ripplePlacementStyles, rippleStyles, rovingFocus, rowGapStyles, rowLabel, sakuraColors, sakuraRadii, sakuraShadows, sakuraTheme, sameNumeric, sameStickyOffsets, sameValue, scopeHttp, scrollAreaBarStyles, scrollAreaStyles, segmentFields, segmentedFieldStyles, selectStyles, selectedTagsStyles, selectedValues, selectionBarStyles, separatorStyles, sheetFromMatrix, shiftDecimal, shiftIsoDate, shimmerStyles, shouldRouteClick, skeletonStyles, skeletonTextStyles, skeletonVariantStyles, skipLinkStyles, sliderPositionStyles, sliderStyles, snapNumeric, snapToStep, sortByValue, sortByValues, sortList, sortRows, sortableStyles, sparklineStyles, spinnerStyles, splitterDynamicStyles, splitterStyles, startMove, startRipple, statGroupDynamicStyles, statGroupStyles, statStyles, statusDotDynamicStyles, statusDotStyles, statusDotToneStyles, statusIcons, statusToneBorderStyles, statusToneStyles, statusToneSx, stepsStateStyles, stepsStyles, stickyOffsets, sumColumn, svgNumber, swatchStyles, switchStyles, syncChecked, t, tabListStyles, tabPanelStyles, tabRecipe, tableDynamicStyles, tableMinWidth, tableOfContentsStyles, tableParams, tableRecipe, tableToCsv, tabsStyles, tagStyles, tagsInputStyles, textAlignStyles, textComponentStyles, textStyles, textWrapStyles, textareaRowStyles, textareaStyles, themeAttrs, themeBootScript, themeTransition, themeTransitionOrInstant, themeVariables, timePickerStyles, timelineStyles, timelineToneStyles, toDateLimits, toDayOfWeek, toElement, toHex, toInstant, toIsoDate, toIsoDateTime, toIsoQuarter, toIsoRange, toIsoTime, toIsoWeek, toListboxOption, toNumber, toNumericKind, toPeopleValue, toText, toTime, toWire, toastCountdownStyles, toastPlacementStyles, toastStackStyles, toastStyles, todayIso, toggleChecked, toggleGroupStyles, toggleSelection, tokenValue, toneFillStyles, toneStyles, toolbarStyles, tooltipStyles, topModal, tourDynamicStyles, tourStyles, trackModal, transferStyles, transitions, trapFocus, treeDataTableIndentStyles, treeDataTableStyles, treeDynamicStyles, treePath, treeSelectStyles, treeStyles, truncateDate, uploadDynamicStyles, uploadStyles, useActiveIndicator, useAnchoredPopover, useAnimate, useAutosave, useButtonAppearance, useButtonBehavior, useCalendarState, useCan, useChoiceAppearance, useClipboard, useColumnDisplay, useConfig, useConfirm, useControlAppearance, useDateLocale, useDateSegments, useDefaults, useDelayedLoading, useDetachedDialog, useDetachedOverlay, useDetachedRender, useDialog, useDismissible, useDrawer, useErrorMessage, useEventListener, useFieldControl, useFieldSegments, useForm, useFormReset, useFormat, useFullscreen, useHotkeys, useHoverIntent, useHoverLayer, useHttp, useIntersectionObserver, useLang, useLayoutAnimation, useLazyContent, useLeaveConfirmation, useListState, useMediaQuery, useMenuItem, useMenuItemContentIds, useMessages, useMounted, useNow, useOverflowItems, usePageVisible, usePanZoom, usePersistentState, usePickerPopover, usePointer, usePrefersDark, usePresence, useQueryState, useQueryStates, useRecipe, useReducedMotion, useRemoteItems, useRequest, useResizeObserver, useResultAnnouncement, useRipple, useRouterLink, useScrollSpy, useSelectedOptions, useSortable, useSpring, useTableQuery, useTextMatcher, useTreeExpansion, useTween, useVirtualizer, useWorkCalendar, valueShape, valueToIso, viewportFillDynamicStyles, viewportFillStyles, virtualListSizeStyles, virtualListStyles, visuallyHiddenStyles, watermarkStyles, watermarkTileStyles, weekOfYear, weekdayCalendar, weekdayNames, wireText, withAlpha, workdaysBetween, writeDateLike, yearsOfDecade, zhCN, zoomAround };

package/dist/input/Autocomplete.js

@@ -1,7 +1,7 @@
 import { FormValue } from "../form/FormValue.js";
 import { Combobox } from "./Combobox.js";
-import { Fragment, createVNode, mergeProps } from "vue";
-import { _component, bindable, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { Fragment, createVNode } from "vue";
+import { _component, bindable, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
 //#region src/input/Autocomplete.tsx
 /** 未声明的属性落到 input 上；选项、过滤、远程建议、外观同 Combobox */
 /** 自动完成：带建议的输入框，值就是文字 */
@@ -10,7 +10,7 @@ var Autocomplete = /*#__PURE__*/ _component((_props, _ctx) => {
 	const value = bindable(_props, "_value", () => "", _ctx.emit);
 	const name = readonlyProp(_props, "name");
 	const rest = restProps(_props, _ctx, true);
-	return () => createVNode(Fragment, null, [createVNode(Combobox, mergeProps(rest, {
+	return () => createVNode(Fragment, null, [createVNode(Combobox, mergeJsxProps(rest, {
 		"_inputValue": value.value,
 		"onUpdate:_inputValue": _cache[0] || (_cache[0] = ($event) => value.value = $event),
 		"allowCustomValue": true,

package/dist/input/Autocomplete.js.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_createVNode","_Fragment","_mergeProps"],"sources":["../../src/input/Autocomplete.tsx"],"sourcesContent":["/**\n * 自动完成：值就是输入框里的文字，列表只是建议（邮箱后缀、常用地址、搜索历史、供应商名称）。\n * 选一项等于把它的文字填进来；不选也行，输入什么就是什么。要从固定的选项里选一个（值是选项的 value）时用 Combobox。\n *\n *   <Field label=\"邮箱\"><Autocomplete _value={email} items={suggestions(email)} filter={false} /></Field>\n *   <Autocomplete _value={keyword} load={(text, signal) => api.suggest(text, { signal })} aria-label=\"搜索\" />\n *\n * 建在 Combobox 上（allowCustomValue、不显示展开按钮）：没有可选的建议时不弹出列表；↓ 打开建议，↑↓ 移动，\n * Enter 填入，Esc 关闭（关闭时再按 Esc 清空）。写了 name 时表单提交的是输入框里的文字。\n * 部件同 Combobox：Root（外壳）、Input（主元素）、Clear、Popover、Listbox。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport type { UpdateHandlers } from '@zerodep-dev/vue-tsx-pro-tsx/jsx-runtime';\nimport { Combobox, type ComboboxBaseProps, type ComboboxProps } from './Combobox';\nimport { FormValue } from '../form/FormValue';\nimport type { ListboxOption, OptionMapping } from './list-state';\nimport type { OptionsLoader } from './remote-items';\n\n/** 未声明的属性落到 input 上；选项、过滤、远程建议、外观同 Combobox */\nexport type AutocompleteProps<T = ListboxOption> = Omit<\n  ComboboxBaseProps<T>,\n  '_value' | '_inputValue' | 'allowCustomValue' | 'showToggle' | 'hideEmpty' | 'items' | 'load'\n> &\n  OptionMapping<T> & {\n    /** 输入框里的文字：父级写 _value={x}；选一项建议就是把它的文字填进来 */\n    _value?: string;\n    /** 建议：ListboxOption、字符串，或任意数据加 toOption（直接写在这里，数据的类型才能从它推出来） */\n    items?: readonly T[];\n    /** 远程建议：输入停下 300 ms 后按输入调用，结果代替 items；只采用最后一次 */\n    load?: OptionsLoader<T>;\n  };\n\n/** 自动完成：带建议的输入框，值就是文字 */\nexport const Autocomplete = _component(\n  <T,>({ _value: value = _bindable(''), name, ...rest }: AutocompleteProps<T>) =>\n    () => (\n      <>\n        <Combobox\n          {...(rest as ComboboxProps<T> & UpdateHandlers<ComboboxProps<T>>)}\n          _inputValue={value}\n          allowCustomValue\n          showToggle={false}\n          hideEmpty\n        />\n        <FormValue name={name} value={value || null} disabled={rest.disabled} />\n      </>\n    ),\n);\n"],"mappings":";;;;;;;AAiCA,IAAa,eAAe,0BAC1B,QAAA,SAAA;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,QAAAA,SAAA,QAAA,gBAAiC,IAAE,KAAA,IAAA;CAAA,MAAA,OAAAC,aAAA,QAAA,MAAA;CAAA,MAAY,OAAIC,UAAA,QAAA,MAAA,IAAA;CAAA,aACjDC,YAAAC,UAAA,MAAA,CAAAD,YAAA,UAAAE,WAGW,MAAI;EAAA,eAAA,MAAA;EAAA,wBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAA,QAAA;EAAA,oBAAA;EAAA,cAGG;EAAK,aAAA;CAAA,CAAA,GAAA,IAAA,GAAAF,YAAA,WAAA;EAAA,QAAA,KAAA;EAAA,SAGW,MAAA,SAAS;EAAI,YAAY,KAAK;CAAQ,GAAA,IAAA,CAAA,CAAA;AAEvE,GAAA;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACL"}
+{"version":3,"file":"Autocomplete.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_createVNode","_Fragment","_mergeProps"],"sources":["../../src/input/Autocomplete.tsx"],"sourcesContent":["/**\n * 自动完成：值就是输入框里的文字，列表只是建议（邮箱后缀、常用地址、搜索历史、供应商名称）。\n * 选一项等于把它的文字填进来；不选也行，输入什么就是什么。要从固定的选项里选一个（值是选项的 value）时用 Combobox。\n *\n *   <Field label=\"邮箱\"><Autocomplete _value={email} items={suggestions(email)} filter={false} /></Field>\n *   <Autocomplete _value={keyword} load={(text, signal) => api.suggest(text, { signal })} aria-label=\"搜索\" />\n *\n * 建在 Combobox 上（allowCustomValue、不显示展开按钮）：没有可选的建议时不弹出列表；↓ 打开建议，↑↓ 移动，\n * Enter 填入，Esc 关闭（关闭时再按 Esc 清空）。写了 name 时表单提交的是输入框里的文字。\n * 部件同 Combobox：Root（外壳）、Input（主元素）、Clear、Popover、Listbox。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport type { UpdateHandlers } from '@zerodep-dev/vue-tsx-pro-tsx/jsx-runtime';\nimport { Combobox, type ComboboxBaseProps, type ComboboxProps } from './Combobox';\nimport { FormValue } from '../form/FormValue';\nimport type { ListboxOption, OptionMapping } from './list-state';\nimport type { OptionsLoader } from './remote-items';\n\n/** 未声明的属性落到 input 上；选项、过滤、远程建议、外观同 Combobox */\nexport type AutocompleteProps<T = ListboxOption> = Omit<\n  ComboboxBaseProps<T>,\n  '_value' | '_inputValue' | 'allowCustomValue' | 'showToggle' | 'hideEmpty' | 'items' | 'load'\n> &\n  OptionMapping<T> & {\n    /** 输入框里的文字：父级写 _value={x}；选一项建议就是把它的文字填进来 */\n    _value?: string;\n    /** 建议：ListboxOption、字符串，或任意数据加 toOption（直接写在这里，数据的类型才能从它推出来） */\n    items?: readonly T[];\n    /** 远程建议：输入停下 300 ms 后按输入调用，结果代替 items；只采用最后一次 */\n    load?: OptionsLoader<T>;\n  };\n\n/** 自动完成：带建议的输入框，值就是文字 */\nexport const Autocomplete = _component(\n  <T,>({ _value: value = _bindable(''), name, ...rest }: AutocompleteProps<T>) =>\n    () => (\n      <>\n        <Combobox\n          {...(rest as ComboboxProps<T> & UpdateHandlers<ComboboxProps<T>>)}\n          _inputValue={value}\n          allowCustomValue\n          showToggle={false}\n          hideEmpty\n        />\n        <FormValue name={name} value={value || null} disabled={rest.disabled} />\n      </>\n    ),\n);\n"],"mappings":";;;;;;;AAiCA,IAAa,eAAe,0BAC1B,QAAA,SAAA;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,QAAAA,SAAA,QAAA,gBAAiC,IAAE,KAAA,IAAA;CAAA,MAAA,OAAAC,aAAA,QAAA,MAAA;CAAA,MAAY,OAAIC,UAAA,QAAA,MAAA,IAAA;CAAA,aACjDC,YAAAC,UAAA,MAAA,CAAAD,YAAA,UAAAE,cAGW,MAAI;EAAA,eAAA,MAAA;EAAA,wBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAA,QAAA;EAAA,oBAAA;EAAA,cAGG;EAAK,aAAA;CAAA,CAAA,GAAA,IAAA,GAAAF,YAAA,WAAA;EAAA,QAAA,KAAA;EAAA,SAGW,MAAA,SAAS;EAAI,YAAY,KAAK;CAAQ,GAAA,IAAA,CAAA,CAAA;AAEvE,GAAA;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACL"}

package/dist/input/Cascader.js

@@ -16,8 +16,8 @@ import { FormValue } from "../form/FormValue.js";
 import { listPopoverStyles } from "./ListPopover.js";
 import { TextField } from "./TextField.js";
 import { selectStyles } from "./Select.js";
-import { Fragment, computed, createVNode, mergeProps, nextTick, ref, shallowRef, useId } from "vue";
-import { _component, bindable, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { Fragment, computed, createVNode, nextTick, ref, shallowRef, useId } 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 { Check, ChevronDown, ChevronRight, Search } from "@lucide/icons";
 //#region src/input/Cascader.tsx
@@ -391,7 +391,7 @@ var Cascader = /*#__PURE__*/ _component((_props, _ctx) => {
 		const focused = focusedColumn.value === level;
 		const chosen = value.value ?? [];
 		const onChosenPath = path.value.slice(0, level).every((key, index) => chosen[index] === key);
-		return createVNode("div", mergeProps({ "key": level }, mergeAttrs({ sx: cascaderStyles.column }, propsColumn.value, {
+		return createVNode("div", mergeJsxProps({ "key": level }, mergeAttrs({ sx: cascaderStyles.column }, propsColumn.value, {
 			id: columnId(level),
 			role: "listbox",
 			tabindex: -1,
@@ -407,7 +407,7 @@ var Cascader = /*#__PURE__*/ _component((_props, _ctx) => {
 			const branch = expandable(node);
 			const active = index === activeIndex;
 			const selected = onChosenPath && chosen[level] === key;
-			return createVNode("div", mergeProps({
+			return createVNode("div", mergeJsxProps({
 				"key": key,
 				"id": optionId(level, index),
 				"role": "option",
@@ -443,7 +443,7 @@ var Cascader = /*#__PURE__*/ _component((_props, _ctx) => {
 			"aria-label": lang.selectSearch
 		}), [list.length === 0 && createVNode("div", css.attrs(cascaderStyles.empty), [lang.selectNoMatch]), list.map((item, index) => {
 			const selected = item.keys.join("\0") === chosen;
-			return createVNode("div", mergeProps({
+			return createVNode("div", mergeJsxProps({
 				"key": item.keys.join("\0"),
 				"id": optionId(0, index),
 				"role": "option",
@@ -470,7 +470,7 @@ var Cascader = /*#__PURE__*/ _component((_props, _ctx) => {
 		const shown = keys.length === 0 ? createVNode("span", css.attrs(selectStyles.placeholder), [placeholder.value ?? lang.selectPlaceholder]) : renderValue.value?.(labels, keys.map((_, index) => nodes[index])) ?? (showAllLevels.value ? labels.join(separator.value) : labels.at(-1));
 		const firstLabel = () => state.labelledBy ? { "aria-labelledby": state.labelledBy } : { "aria-label": rest["aria-label"] };
 		const list = hits.value;
-		return createVNode(Fragment, null, [createVNode("div", mergeProps(mergeAttrs({
+		return createVNode(Fragment, null, [createVNode("div", mergeJsxProps(mergeAttrs({
 			...s.root,
 			sx: [s.root.sx, selectStyles.root]
 		}, propsRoot.value, {
@@ -525,7 +525,7 @@ var Cascader = /*#__PURE__*/ _component((_props, _ctx) => {
 			ref: panel,
 			popover: "auto",
 			onToggle: onPanelToggle
-		}), [searchable.value && createVNode("div", css.attrs(listPopoverStyles.header), [createVNode(TextField, mergeProps(mergePartProps({
+		}), [searchable.value && createVNode("div", css.attrs(listPopoverStyles.header), [createVNode(TextField, mergeJsxProps(mergePartProps({
 			icon: Search,
 			variant: "soft",
 			placeholder: lang.selectSearch,