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

package/dist/input/Cascader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Cascader.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vue_ref","_vue_shallowRef","_vue_computed","_createVNode","_mergeProps","_Fragment"],"sources":["../../src/input/Cascader.tsx"],"sourcesContent":["/**\n * 级联选择：一列一列往下选（省 / 市 / 区、产品大类 / 小类 / 型号、物料分类），触发框里显示整条路径“浙江 / 杭州 / 西湖区”。\n *\n *   <Cascader items={regions} getKey={(r) => r.code} getLabel={(r) => r.name} getChildren={(r) => r.children} _value={path} />\n *   <Cascader … changeOnSelect />                                      每一级都能选（选到市也行）\n *   <Cascader … hasChildren={(r) => !r.leaf} loadChildren={loadNext} />  展开时远程取下一级\n *   <Cascader … searchable />                                          按整条路径搜索（在已加载的节点里）\n *\n * - value 是从第一级到选中节点的 key 路径（同 Ant Design、Element Plus），key 只要在同级里唯一；没有选择时 null。\n * - 默认只能选到叶子：点有下一级的项只是展开；changeOnSelect 时点任何一级都选中它（并展开下一级）。\n * - 弹出层里每一级是一列 listbox，焦点在列上、高亮项经 aria-activedescendant：↑↓ 移动（有下一级的跟着显示下一列），\n *   → 进入下一级（懒加载的先取回来），← 回到上一级，Enter 选中（叶子选中后关闭），Esc 关闭并把焦点还给触发按钮。\n *   从右到左排版时左右键对调。\n * - searchable：搜索框里输入后换成一列匹配的完整路径，只列能选的（默认是叶子），↑↓、Enter 在搜索框里操作。\n * - 懒加载：hasChildren 声明有下一级，进入时 loadChildren 取回来放进数据里（数据要是响应式的），期间显示转圈；\n *   打开时沿着已选的路径逐级取回来，已选的那一列看得见。\n *\n * 部件：Root（外壳）、Trigger（button，主元素）、Value、Clear、Chevron、Popover、Search（TextField）、Column（每一列）、Option。\n */\nimport { Check, ChevronDown, ChevronRight, Search } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { nextTick, useId, type VNodeChild } from 'vue';\nimport type { PresetIconButtonProps } from '../base/CloseButton';\nimport { buttonBaseStyles } from '../base/button-core';\nimport { Icon, type IconProps } from '../base/Icon';\nimport { Spinner } from '../base/Spinner';\nimport { useLang, useTextMatcher } from '../config/context';\nimport { useFieldControl } from '../form/Field';\nimport { FormValue } from '../form/FormValue';\nimport { isExpandable } from '../utils/data/tree';\nimport { inlineArrows, isRtl } from '../utils/dom/direction';\nimport {\n  anchoredPanelSx,\n  floatingStyles,\n  useAnchoredPopover,\n  type FloatingPlacement,\n} from '../utils/dom/floating';\nimport { openSetter, type OpenChangeProps } from '../utils/dom/open-change';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { itemStyles } from '../utils/style/item-styles';\nimport { t } from '../config/theme/tokens';\nimport { disclosureStyles } from '../utils/style/transitions';\nimport {\n  clickOnShell,\n  controlClear,\n  controlIcon,\n  controlParts,\n  focusOnShell,\n  useControlAppearance,\n  type ControlIconOptions,\n  type ControlOptions,\n} from './control';\nimport { listPopoverStyles } from './ListPopover';\nimport { selectStyles, type SelectManaged } from './Select';\nimport { TextField, type TextFieldProps } from './TextField';\n\n/** 未声明的属性落到触发按钮（主元素）上，外壳用 propsRoot */\nexport interface CascaderProps<T>\n  extends PartProps<'button', SelectManaged>, ControlOptions, ControlIconOptions, OpenChangeProps {\n  /** 第一级的节点 */\n  items?: readonly T[];\n  /** 节点的 key，同级里唯一；index 是它在同级里的位置 */\n  getKey: (node: T, index: number) => string;\n  /** 节点的文字 */\n  getLabel: (node: T) => string;\n  /** 下一级；叶子或还没加载时 undefined */\n  getChildren: (node: T) => readonly T[] | undefined;\n  /** 有没有下一级（懒加载时还没取回来也算有）；不写时看 getChildren 是否非空 */\n  hasChildren?: (node: T) => boolean;\n  /** 进入一个还没有下一级的节点时取回来，放进数据里；返回 Promise 时显示加载中 */\n  loadChildren?: (node: T) => Promise<unknown> | void;\n  /** 不能选、不能进入的节点 */\n  isDisabled?: (node: T) => boolean;\n  /** 选中的路径（第一级到选中节点的 key），没有时 null：父级写 _value={x} */\n  _value?: readonly string[] | null;\n  /** 每一级都能选；默认只能选到叶子 */\n  changeOnSelect?: boolean;\n  /** 触发框里显示整条路径（默认），false 时只显示最后一级 */\n  showAllLevels?: boolean;\n  /** 路径各级之间的分隔，默认“ / ” */\n  separator?: string;\n  /** 自定义触发框里的内容：参数是路径上各级的文字与节点（还没加载的节点文字是 key、节点是 undefined） */\n  renderValue?: (labels: readonly string[], nodes: readonly (T | undefined)[]) => VNodeChild;\n  /** 弹出层顶部带搜索框，按整条路径的文字搜索已加载的节点 */\n  searchable?: boolean;\n  /** 搜索时怎样算匹配：参数是路径上的节点与输入；默认路径文字包含输入（忽略大小写与重音，或用 createUi 的 textMatcher） */\n  filter?: (nodes: readonly T[], query: string) => boolean;\n  /** 没有选择时显示的文字，默认取语言包（请选择） */\n  placeholder?: string;\n  /** 是否打开：父级可以写 _open={x} */\n  _open?: boolean;\n  /** 弹出位置，默认 bottom-start */\n  placement?: FloatingPlacement;\n  /** 有选择时显示清空按钮 */\n  clearable?: boolean;\n  /** 表单提交时的 name（用隐藏的 input，路径上每一级一个） */\n  name?: string;\n  /** 不可用 */\n  disabled?: boolean;\n  /** 只读：能聚焦、能看到已选的内容，不能打开、不能清空 */\n  readonly?: boolean;\n  /** 必填 */\n  required?: boolean;\n  /** 校验未通过 */\n  invalid?: boolean;\n  /** 外壳的部件属性 */\n  propsRoot?: PartProps<'div'>;\n  /** 已选内容那一层的部件属性 */\n  propsValue?: PartProps<'span'>;\n  /** 清空按钮的部件属性 */\n  propsClear?: Partial<PresetIconButtonProps>;\n  /** 下拉箭头的部件属性 */\n  propsChevron?: Partial<IconProps>;\n  /** 弹出层的部件属性 */\n  propsPopover?: PartProps<'div', 'id' | 'popover'>;\n  /** 搜索框的部件属性（searchable 时） */\n  propsSearch?: Partial<TextFieldProps>;\n  /** 每一列的部件属性 */\n  propsColumn?: PartProps<'div', 'role' | 'id' | 'tabindex'>;\n}\n\n/** Cascader 的样式：columns、column、option、onPath、focused、chevron、results */\nexport const cascaderStyles = css.create({\n  // 各列横排；列多了在弹出层里横向滚动\n  columns: { display: 'flex', minHeight: 0, flexGrow: 1, overflowX: 'auto' },\n  column: {\n    boxSizing: 'border-box',\n    flexShrink: 0,\n    minWidth: '10em',\n    maxWidth: '16em',\n    overflowY: 'auto',\n    padding: '_xs',\n    outlineStyle: 'none',\n    borderInlineEndWidth: { default: '_xs', ':last-child': 0 },\n    borderInlineEndStyle: 'solid',\n    borderInlineEndColor: '_borderMuted',\n  },\n  // 搜索结果是一整列，占满宽度\n  results: { flexGrow: 1, maxWidth: 'none' },\n  // 已展开的那一项（各列里在当前路径上的）\n  onPath: { backgroundColor: '_fillHover' },\n  // 列有焦点时它的高亮项画焦点环（列本身不画）\n  focused: {\n    outlineStyle: 'solid',\n    outlineWidth: '_sm',\n    outlineColor: '_focusRing',\n    outlineOffset: `calc(-1 * ${t.borderWidths.sm})`,\n  },\n  chevron: { flexShrink: 0, color: '_textMuted', scale: { default: null, ':dir(rtl)': '-1 1' } },\n  check: { flexShrink: 0 },\n  empty: { paddingBlock: '_sm', paddingInline: '_sm', color: '_textMuted' },\n});\n\n/** 搜索结果的一项：整条路径 */\ninterface PathHit<T> {\n  readonly keys: readonly string[];\n  readonly nodes: readonly T[];\n  readonly label: string;\n  readonly disabled: boolean;\n}\n\n/** 级联选择：触发框 + 一列一列的选项，选到叶子（或任意一级） */\nexport const Cascader = _component(\n  <T,>({\n    items = [],\n    getKey,\n    getLabel,\n    getChildren,\n    hasChildren,\n    loadChildren,\n    isDisabled,\n    _value: value = _bindable<readonly string[] | null>(null),\n    changeOnSelect = false,\n    showAllLevels = true,\n    separator = ' / ',\n    renderValue,\n    searchable = false,\n    filter,\n    placeholder,\n    _open: open = _bindable(false),\n    onOpenChange,\n    placement = 'bottom-start',\n    clearable = false,\n    name,\n    variant,\n    size,\n    radius,\n    disabled,\n    readonly,\n    required,\n    invalid,\n    id,\n    icon,\n    propsRoot,\n    propsIcon,\n    propsValue,\n    propsClear,\n    propsChevron,\n    propsPopover,\n    propsSearch,\n    propsColumn,\n    ...rest\n  }: CascaderProps<T>) => {\n    const lang = useLang();\n    const textMatcher = useTextMatcher();\n    const baseId = useId();\n    const appearance = useControlAppearance(() => ({ variant, size, radius }));\n    const control = useFieldControl(() => ({ id, invalid, required, disabled, readonly }));\n    // 有没有下一级（懒加载时还没取回来也算有）；每次调用时读属性，数据换了跟着变\n    const expandable = (node: T) => isExpandable(node, { getKey, getChildren, hasChildren });\n    // 当前展开的路径（各列的高亮项）；有焦点的列\n    let path = _state<string[]>([]);\n    let focusedColumn = _state<number | null>(null);\n    let search = _state('');\n    let hit = _state(0);\n    let loading = _state.raw<ReadonlySet<T>>(new Set());\n    let shell = _state.raw<HTMLElement | null>(null);\n    let trigger = _state.raw<HTMLElement | null>(null);\n    let panel = _state.raw<HTMLElement | null>(null);\n    const setOpen = openSetter(\n      () => open,\n      (next) => (open = next),\n      () => onOpenChange,\n    );\n\n    const columnId = (level: number) => `${baseId}-column-${level}`;\n    const optionId = (level: number, index: number) => `${baseId}-${level}-${index}`;\n    const disabledNode = (node: T) => isDisabled?.(node) ?? false;\n    const loaded = (node: T) => (getChildren(node)?.length ?? 0) > 0;\n\n    /** 沿着 keys 找到各级的节点（找不到的地方停下：还没加载，或数据变了） */\n    function nodesAlong(keys: readonly string[]): T[] {\n      const found: T[] = [];\n      let level = items;\n      for (const key of keys) {\n        const node = level.find((item, index) => getKey(item, index) === key);\n        if (!node) break;\n        found.push(node);\n        level = getChildren(node) ?? [];\n      }\n      return found;\n    }\n\n    /** 要显示的各列：第一级，以及路径上每个已加载（或正在加载）下一级的节点的下一级 */\n    const columns = _derived.by(() => {\n      const list: { parent: T | undefined; items: readonly T[] }[] = [{ parent: undefined, items }];\n      for (const node of nodesAlong(path)) {\n        if (!expandable(node) || !(loaded(node) || loading.has(node))) break;\n        list.push({ parent: node, items: getChildren(node) ?? [] });\n      }\n      return list;\n    });\n\n    /** 取回节点的下一级；有了（或取回来了）返回 true */\n    async function ensureChildren(node: T): Promise<boolean> {\n      if (loaded(node)) return true;\n      if (!loadChildren || loading.has(node)) return false;\n      const pending = loadChildren(node);\n      if (!(pending instanceof Promise)) return loaded(node);\n      loading = new Set([...loading, node]);\n      try {\n        await pending;\n      } catch (error) {\n        console.error('级联选择的下一级加载失败', error);\n        return false;\n      } finally {\n        const next = new Set(loading);\n        next.delete(node);\n        loading = next;\n      }\n      return loaded(node);\n    }\n\n    function focusColumn(level: number) {\n      void nextTick(() =>\n        panel?.querySelector<HTMLElement>(`#${CSS.escape(columnId(level))}`)?.focus(),\n      );\n    }\n\n    /** 高亮第 level 列的一项：它后面的路径换成它（有已加载的下一级时显示出来） */\n    function activate(level: number, key: string) {\n      path = [...path.slice(0, level), key];\n    }\n\n    /** 进入一项的下一级：先取回来，再高亮下一列的第一项并把焦点移过去 */\n    async function enter(level: number, node: T, key: string) {\n      activate(level, key);\n      if (!expandable(node) || !(await ensureChildren(node))) return;\n      // 等待期间换了高亮项：不再进入\n      if (path[level] !== key) return;\n      const children = getChildren(node) ?? [];\n      const first = children.findIndex((child) => !disabledNode(child));\n      if (first < 0) return;\n      activate(level + 1, getKey(children[first]!, first));\n      focusColumn(level + 1);\n    }\n\n    /** 选中一条路径；选到叶子（或从搜索结果里选）时关闭 */\n    function pick(keys: readonly string[], node: T, close: boolean, event?: Event) {\n      value = [...keys];\n      if (close || !expandable(node)) setOpen(false, 'select', event);\n    }\n\n    /** 点一项：有下一级的展开（changeOnSelect 时同时选中），叶子选中 */\n    function onOptionClick(level: number, node: T, key: string, event: MouseEvent) {\n      if (disabledNode(node)) return;\n      focusedColumn = level;\n      if (!expandable(node)) return pick([...path.slice(0, level), key], node, true, event);\n      if (changeOnSelect) pick([...path.slice(0, level), key], node, false, event);\n      activate(level, key);\n      void ensureChildren(node);\n    }\n\n    function onColumnKeydown(level: number, event: KeyboardEvent) {\n      if (event.altKey || event.ctrlKey || event.metaKey) return;\n      if (event.key === 'Tab') {\n        setOpen(false, 'focus', event);\n        return;\n      }\n      const list = columns[level]?.items ?? [];\n      const current = list.findIndex((item, index) => getKey(item, index) === path[level]);\n      const enabled = list.flatMap((item, index) => (disabledNode(item) ? [] : [index]));\n      const go = (index: number | undefined) => {\n        if (index !== undefined) activate(level, getKey(list[index]!, index));\n      };\n      const { forward, backward } = inlineArrows(!!panel && isRtl(panel));\n      const node = current >= 0 ? list[current] : undefined;\n      switch (event.key) {\n        case 'ArrowDown':\n          go(enabled.find((index) => index > current) ?? enabled[0]);\n          break;\n        case 'ArrowUp':\n          go(enabled.findLast((index) => index < current) ?? enabled.at(-1));\n          break;\n        case 'Home':\n          go(enabled[0]);\n          break;\n        case 'End':\n          go(enabled.at(-1));\n          break;\n        case forward:\n          if (node) void enter(level, node, path[level]!);\n          break;\n        case backward:\n          if (level > 0) focusColumn(level - 1);\n          break;\n        case 'Enter':\n          if (!node || disabledNode(node)) break;\n          if (!expandable(node)) pick(path.slice(0, level + 1), node, true, event);\n          else {\n            if (changeOnSelect) pick(path.slice(0, level + 1), node, false, event);\n            void enter(level, node, path[level]!);\n          }\n          break;\n        default:\n          return;\n      }\n      event.preventDefault();\n    }\n\n    function onColumnFocus(level: number) {\n      focusedColumn = level;\n      // 第一次进入这一列：高亮第一个能选的\n      if (path[level] !== undefined) return;\n      const list = columns[level]?.items ?? [];\n      const first = list.findIndex((item) => !disabledNode(item));\n      if (first >= 0) activate(level, getKey(list[first]!, first));\n    }\n\n    // 搜索：匹配的完整路径，只列能选的（默认是叶子）\n    const hits = _derived.by((): PathHit<T>[] | null => {\n      const text = search.trim();\n      if (!searchable || !text) return null;\n      const match = textMatcher();\n      const found: PathHit<T>[] = [];\n      const visit = (\n        level: readonly T[],\n        keys: readonly string[],\n        nodes: readonly T[],\n        off: boolean,\n      ) => {\n        level.forEach((node, index) => {\n          const nextKeys = [...keys, getKey(node, index)];\n          const nextNodes = [...nodes, node];\n          const nextOff = off || disabledNode(node);\n          const label = nextNodes.map(getLabel).join(separator);\n          const selectable = changeOnSelect || !expandable(node);\n          if (selectable && (filter ? filter(nextNodes, text) : match(label, text))) {\n            found.push({ keys: nextKeys, nodes: nextNodes, label, disabled: nextOff });\n          }\n          visit(getChildren(node) ?? [], nextKeys, nextNodes, nextOff);\n        });\n      };\n      visit(items, [], [], false);\n      return found;\n    });\n\n    function onSearchKeydown(event: KeyboardEvent) {\n      const list = hits;\n      if (event.key === 'Tab') {\n        setOpen(false, 'focus', event);\n        return;\n      }\n      // 没有搜索词：↓ 进入第一列\n      if (!list) {\n        if (event.key === 'ArrowDown') {\n          event.preventDefault();\n          focusColumn(Math.max(path.length - 1, 0));\n        }\n        return;\n      }\n      const enabled = list.flatMap((item, index) => (item.disabled ? [] : [index]));\n      if (event.key === 'ArrowDown') hit = enabled.find((index) => index > hit) ?? enabled[0] ?? 0;\n      else if (event.key === 'ArrowUp')\n        hit = enabled.findLast((index) => index < hit) ?? enabled.at(-1) ?? 0;\n      else if (event.key === 'Enter') {\n        const chosen = list[hit];\n        if (chosen && !chosen.disabled) pick(chosen.keys, chosen.nodes.at(-1)!, true, event);\n      } else return;\n      event.preventDefault();\n    }\n\n    async function show(event?: Event) {\n      search = '';\n      hit = 0;\n      path = [...(value ?? [])];\n      setOpen(true, 'trigger', event);\n      // 沿着已选的路径逐级取回来（懒加载），已选的那一列看得见\n      for (const node of nodesAlong(path).slice(0, -1)) {\n        if (!(await ensureChildren(node))) break;\n      }\n    }\n\n    function clear() {\n      value = null;\n      trigger?.focus();\n    }\n\n    const { onToggle } = useAnchoredPopover(\n      () => ({\n        open,\n        anchor: shell,\n        panel,\n        floating: { placement, matchWidth: true, fitHeight: true },\n        restoreFocus: false,\n      }),\n      { close: (reason, event) => setOpen(false, reason, event) },\n    );\n\n    // 打开后焦点进搜索框或已选的那一列；关闭时焦点还在弹层里（Esc、选中、点外面）就还给触发按钮\n    function onPanelToggle(event: ToggleEvent) {\n      onToggle(event);\n      if (event.newState === 'open') {\n        if (searchable) panel?.querySelector<HTMLElement>('input[type=\"search\"]')?.focus();\n        else focusColumn(Math.max(path.length - 1, 0));\n        return;\n      }\n      focusedColumn = null;\n      const active = document.activeElement;\n      if (!active || active === document.body || panel?.contains(active)) trigger?.focus();\n    }\n\n    function onTriggerKeydown(event: KeyboardEvent) {\n      const state = control();\n      if (state.disabled || state.readonly) return;\n      if (!open && (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ')) {\n        event.preventDefault();\n        void show(event);\n      }\n    }\n\n    function toggle(event?: Event) {\n      if (open) setOpen(false, 'trigger', event);\n      else void show(event);\n    }\n\n    /** 一列选项 */\n    function renderColumn(\n      level: number,\n      parent: T | undefined,\n      list: readonly T[],\n      label: () => {\n        'aria-label'?: string;\n        'aria-labelledby'?: string;\n      },\n    ) {\n      const activeIndex = list.findIndex((item, index) => getKey(item, index) === path[level]);\n      const focused = focusedColumn === level;\n      const chosen = value ?? [];\n      // 这一列在已选路径上：前面各级都与已选的一致\n      const onChosenPath = path.slice(0, level).every((key, index) => chosen[index] === key);\n      return (\n        <div\n          key={level}\n          {...mergeAttrs<'div'>({ sx: cascaderStyles.column }, propsColumn, {\n            id: columnId(level),\n            role: 'listbox',\n            tabindex: -1,\n            ...label(),\n            'aria-activedescendant': activeIndex >= 0 ? optionId(level, activeIndex) : undefined,\n            'aria-busy': parent && loading.has(parent) ? true : undefined,\n            onKeydown: (event: KeyboardEvent) => onColumnKeydown(level, event),\n            onFocus: () => onColumnFocus(level),\n            onBlur: () => (focusedColumn = focusedColumn === level ? null : focusedColumn),\n          })}\n        >\n          {parent && loading.has(parent) && list.length === 0 && (\n            <div {...css.attrs(cascaderStyles.empty)}>\n              <Spinner label={lang.loading} />\n            </div>\n          )}\n          {list.map((node, index) => {\n            const key = getKey(node, index);\n            const off = disabledNode(node);\n            const branch = expandable(node);\n            const active = index === activeIndex;\n            const selected = onChosenPath && chosen[level] === key;\n            return (\n              <div\n                key={key}\n                id={optionId(level, index)}\n                role=\"option\"\n                aria-selected={selected}\n                aria-disabled={off || undefined}\n                aria-haspopup={branch ? 'listbox' : undefined}\n                aria-expanded={branch ? active && columns.length > level + 1 : undefined}\n                {...css.attrs(\n                  itemStyles.row,\n                  itemStyles.hoverable,\n                  active && cascaderStyles.onPath,\n                  active && focused && cascaderStyles.focused,\n                  selected && itemStyles.selected,\n                  off && itemStyles.disabled,\n                )}\n                // 焦点留在列上\n                onPointerdown={(event: PointerEvent) => event.preventDefault()}\n                onClick={(event: MouseEvent) => {\n                  panel?.querySelector<HTMLElement>(`#${CSS.escape(columnId(level))}`)?.focus();\n                  onOptionClick(level, node, key, event);\n                }}\n                data-state={selected ? 'checked' : 'unchecked'}\n                data-active={active || undefined}\n                data-disabled={off || undefined}\n              >\n                <span {...css.attrs(itemStyles.label)}>{getLabel(node)}</span>\n                {branch ? (\n                  loading.has(node) ? (\n                    <Spinner size=\"sm\" />\n                  ) : (\n                    <Icon icon={ChevronRight} sx={cascaderStyles.chevron} />\n                  )\n                ) : (\n                  selected && <Icon icon={Check} sx={cascaderStyles.check} />\n                )}\n              </div>\n            );\n          })}\n        </div>\n      );\n    }\n\n    /** 搜索结果：一列完整路径 */\n    function renderHits(list: readonly PathHit<T>[]) {\n      const chosen = (value ?? []).join('\\u0000');\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            { sx: [cascaderStyles.column, cascaderStyles.results] },\n            propsColumn,\n            {\n              id: columnId(0),\n              role: 'listbox',\n              tabindex: -1,\n              'aria-label': lang.selectSearch,\n            },\n          )}\n        >\n          {list.length === 0 && (\n            <div {...css.attrs(cascaderStyles.empty)}>{lang.selectNoMatch}</div>\n          )}\n          {list.map((item, index) => {\n            const selected = item.keys.join('\\u0000') === chosen;\n            return (\n              <div\n                key={item.keys.join('\\u0000')}\n                id={optionId(0, index)}\n                role=\"option\"\n                aria-selected={selected}\n                aria-disabled={item.disabled || undefined}\n                {...css.attrs(\n                  itemStyles.row,\n                  itemStyles.hoverable,\n                  index === hit && itemStyles.highlighted,\n                  selected && itemStyles.selected,\n                  item.disabled && itemStyles.disabled,\n                )}\n                onPointerdown={(event: PointerEvent) => event.preventDefault()}\n                onPointermove={() => !item.disabled && (hit = index)}\n                onClick={(event: MouseEvent) =>\n                  !item.disabled && pick(item.keys, item.nodes.at(-1)!, true, event)\n                }\n              >\n                <span {...css.attrs(itemStyles.label)}>{item.label}</span>\n                {selected && <Icon icon={Check} sx={cascaderStyles.check} />}\n              </div>\n            );\n          })}\n        </div>\n      );\n    }\n\n    return () => {\n      const state = control();\n      const s = controlParts(appearance(), state);\n      const off = state.disabled;\n      const locked = off || state.readonly;\n      const keys = value ?? [];\n      const nodes = nodesAlong(keys);\n      // 还没加载的那几级按 key 显示\n      const labels = keys.map((key, index) => (nodes[index] ? getLabel(nodes[index]) : key));\n      const shown =\n        keys.length === 0 ? (\n          <span {...css.attrs(selectStyles.placeholder)}>\n            {placeholder ?? lang.selectPlaceholder}\n          </span>\n        ) : (\n          (renderValue?.(\n            labels,\n            keys.map((_, index) => nodes[index]),\n          ) ?? (showAllLevels ? labels.join(separator) : labels.at(-1)))\n        );\n      const firstLabel = () =>\n        state.labelledBy\n          ? { 'aria-labelledby': state.labelledBy }\n          : { 'aria-label': rest['aria-label'] };\n      const list = hits;\n      return (\n        <>\n          <div\n            {...mergeAttrs<'div'>({ ...s.root, sx: [s.root.sx, selectStyles.root] }, propsRoot, {\n              ref: _toRef(shell),\n              onPointerdown: off ? undefined : focusOnShell(() => trigger),\n              onClick: locked\n                ? undefined\n                : clickOnShell(\n                    () => trigger,\n                    (event) => toggle(event),\n                  ),\n            })}\n            data-state={open ? 'open' : 'closed'}\n            data-invalid={state.invalid || undefined}\n            data-disabled={off || undefined}\n          >\n            {controlIcon(s, icon, propsIcon)}\n            <button\n              {...mergeAttrs<'button'>(\n                { sx: [buttonBaseStyles.root, selectStyles.trigger] },\n                rest,\n                {\n                  ref: _toRef(trigger),\n                  id: state.id,\n                  type: 'button',\n                  role: 'combobox',\n                  disabled: off,\n                  'aria-haspopup': 'listbox',\n                  'aria-expanded': open,\n                  'aria-controls': columnId(0),\n                  'aria-invalid': state.invalid || undefined,\n                  'aria-required': state.required || undefined,\n                  'aria-readonly': state.readonly || undefined,\n                  'aria-describedby': state.describedBy,\n                  onClick: (event: MouseEvent) => {\n                    trigger?.focus();\n                    if (!locked) toggle(event);\n                  },\n                  onKeydown: onTriggerKeydown,\n                },\n              )}\n            >\n              <span {...mergeAttrs<'span'>({ sx: selectStyles.value }, propsValue)}>{shown}</span>\n            </button>\n            {clearable && keys.length > 0 && !locked && controlClear(s, propsClear, clear)}\n            <Icon\n              {...mergePartProps<IconProps>(\n                {\n                  ...s.icon,\n                  icon: ChevronDown,\n                  sx: [s.icon.sx, disclosureStyles.icon, open && selectStyles.chevronOpen],\n                },\n                propsChevron,\n              )}\n            />\n            <FormValue name={name} value={keys} disabled={state.disabled} />\n          </div>\n          <div\n            {...mergeAttrs<'div'>(\n              {\n                sx: [\n                  anchoredPanelSx(appearance().size),\n                  floatingStyles.scrollPanel,\n                  listPopoverStyles.panel,\n                ],\n              },\n              propsPopover,\n              { ref: _toRef(panel), popover: 'auto', onToggle: onPanelToggle },\n            )}\n          >\n            {searchable && (\n              <div {...css.attrs(listPopoverStyles.header)}>\n                <TextField\n                  {...mergePartProps<TextFieldProps>(\n                    {\n                      icon: Search,\n                      variant: 'soft',\n                      placeholder: lang.selectSearch,\n                      'aria-label': lang.selectSearch,\n                      propsRoot: { sx: selectStyles.search },\n                    },\n                    propsSearch,\n                  )}\n                  type=\"search\"\n                  _value={search}\n                  onUpdate:_value={(next: string) => {\n                    search = next;\n                    hit = 0;\n                  }}\n                  aria-controls={columnId(0)}\n                  aria-activedescendant={list?.length ? optionId(0, hit) : undefined}\n                  onKeydown={onSearchKeydown}\n                />\n              </div>\n            )}\n            {open && (\n              <div {...css.attrs(cascaderStyles.columns)}>\n                {list\n                  ? renderHits(list)\n                  : columns.map((column, level) =>\n                      renderColumn(level, column.parent, column.items, () =>\n                        column.parent ? { 'aria-label': getLabel(column.parent) } : firstLabel(),\n                      ),\n                    )}\n              </div>\n            )}\n          </div>\n        </>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/input/CharacterCount.d.ts

@@ -0,0 +1,21 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type VisuallyHiddenProps } from '../base/VisuallyHidden';
+import { type PartProps } from '../utils/props';
+/** 未声明的属性落到 span 上；id 给输入框的 aria-describedby 关联 */
+export interface CharacterCountProps extends PartProps<'span'> {
+    /** 已输入的字符数 */
+    count: number;
+    /** 上限；不给时只显示字数 */
+    max?: number;
+    /** 看得见的字数（“12 / 100”，对读屏隐藏）的部件属性 */
+    propsValue?: PartProps<'span', 'aria-hidden'>;
+    /** 给读屏的完整句子的部件属性 */
+    propsLabel?: Partial<VisuallyHiddenProps>;
+}
+/** CharacterCount 的样式：root、over */
+export declare const characterCountStyles: Readonly<{
+    over: css.CompiledStyles;
+    root: css.CompiledStyles;
+}>;
+/** 字数计数：超出上限时用危险色 */
+export declare const CharacterCount: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<CharacterCountProps>;

package/dist/input/CharacterCount.js

@@ -0,0 +1,47 @@
+import { useLang } from "../config/context.js";
+import { mergeAttrs, mergePartProps } from "../utils/props.js";
+import { VisuallyHidden } from "../base/VisuallyHidden.js";
+import { createVNode, mergeProps } from "vue";
+import { _component, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/input/CharacterCount.tsx
+/** 未声明的属性落到 span 上；id 给输入框的 aria-describedby 关联 */
+/** CharacterCount 的样式：root、over */
+var characterCountStyles = css.create({
+	root: {
+		flexShrink: 0,
+		fontSize: "_sm",
+		color: "_textMuted",
+		fontVariantNumeric: "tabular-nums",
+		whiteSpace: "nowrap"
+	},
+	over: { color: "_dangerText" }
+});
+/** 字数计数：超出上限时用危险色 */
+var CharacterCount = /*#__PURE__*/ _component((_props, _ctx) => {
+	const count = readonlyProp(_props, "count");
+	const max = readonlyProp(_props, "max");
+	const propsValue = readonlyProp(_props, "propsValue");
+	const propsLabel = readonlyProp(_props, "propsLabel");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	return () => {
+		const over = max.value != null && count.value > max.value;
+		return createVNode("span", mergeProps(mergeAttrs({ sx: [characterCountStyles.root, over && characterCountStyles.over] }, rest), { "data-over": over || void 0 }), [createVNode("span", mergeAttrs({}, propsValue.value, { "aria-hidden": true }), [max.value == null ? count.value : `${count.value} / ${max.value}`]), createVNode(VisuallyHidden, mergeProps(mergePartProps({}, propsLabel.value), { "key": "__site0" }), {
+			default: () => [lang.characterCount(count.value, max.value)],
+			$stable: true
+		})]);
+	};
+}, {
+	name: "CharacterCount",
+	props: [
+		"count",
+		"max",
+		"propsValue",
+		"propsLabel"
+	]
+});
+//#endregion
+export { CharacterCount, characterCountStyles };
+
+//# sourceMappingURL=CharacterCount.js.map

package/dist/input/CharacterCount.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CharacterCount.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/input/CharacterCount.tsx"],"sourcesContent":["/**\n * 字数计数（span）：TextField、Textarea 的 showCount 用它，也可以单独放在 Field 里。\n * 显示“12 / 100”，超出上限时用危险色；读屏念完整的句子（语言包的 characterCount），由输入框经 aria-describedby 关联。\n *\n *   <CharacterCount id={countId} count={bio.length} max={200} />\n *\n * 部件：Root（span）、Value（看得见的字数，对读屏隐藏）、Label（给读屏的句子）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { VisuallyHidden, type VisuallyHiddenProps } from '../base/VisuallyHidden';\nimport { useLang } from '../config/context';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\n\n/** 未声明的属性落到 span 上；id 给输入框的 aria-describedby 关联 */\nexport interface CharacterCountProps extends PartProps<'span'> {\n  /** 已输入的字符数 */\n  count: number;\n  /** 上限；不给时只显示字数 */\n  max?: number;\n  /** 看得见的字数（“12 / 100”，对读屏隐藏）的部件属性 */\n  propsValue?: PartProps<'span', 'aria-hidden'>;\n  /** 给读屏的完整句子的部件属性 */\n  propsLabel?: Partial<VisuallyHiddenProps>;\n}\n\n/** CharacterCount 的样式：root、over */\nexport const characterCountStyles = css.create({\n  root: {\n    flexShrink: 0,\n    fontSize: '_sm',\n    color: '_textMuted',\n    fontVariantNumeric: 'tabular-nums',\n    whiteSpace: 'nowrap',\n  },\n  over: { color: '_dangerText' },\n});\n\n/** 字数计数：超出上限时用危险色 */\nexport const CharacterCount = _component(\n  ({ count, max, propsValue, propsLabel, ...rest }: CharacterCountProps) => {\n    const lang = useLang();\n    return () => {\n      const over = max != null && count > max;\n      return (\n        <span\n          {...mergeAttrs<'span'>(\n            { sx: [characterCountStyles.root, over && characterCountStyles.over] },\n            rest,\n          )}\n          data-over={over || undefined}\n        >\n          <span {...mergeAttrs<'span'>({}, propsValue, { 'aria-hidden': true })}>\n            {max == null ? count : `${count} / ${max}`}\n          </span>\n          <VisuallyHidden {...mergePartProps<VisuallyHiddenProps>({}, propsLabel)}>\n            {lang.characterCount(count, max)}\n          </VisuallyHidden>\n        </span>\n      );\n    };\n  },\n);\n"],"mappings":";;;;;;;;;AA2BA,IAAa,uBAAuB,IAAI,OAAO;CAC7C,MAAM;EACJ,YAAY;EACZ,UAAU;EACV,OAAO;EACP,oBAAoB;EACpB,YAAY;CACd;CACA,MAAM,EAAE,OAAO,cAAc;AAC/B,CAAC;;AAGD,IAAa,iBAAiB,0BAC5B,QAAA,SAA0E;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,MAAAA,aAAA,QAAA,KAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAhC,OAAIC,UAAA,QAAA,MAAA,IAAA;CAC5C,MAAM,OAAO,QAAQ;CACrB,aAAa;EACX,MAAM,OAAO,IAAA,SAAO,QAAQ,MAAA,QAAA,IAAA;EAC5B,OAAAC,YAAA,QAAAC,WAEQ,WACF,EAAE,IAAI,CAAC,qBAAqB,MAAM,QAAQ,qBAAqB,IAAI,EAAE,GACrE,IACF,GAAC,EAAA,aACU,QAAQ,KAAA,EAAS,CAAA,GAAA,CAAAD,YAAA,QAElB,WAAmB,CAAC,GAAC,WAAA,OAAc,EAAE,eAAe,KAAK,CAAC,GAAC,CAClE,IAAA,SAAO,OAAI,MAAA,QAAW,GAAA,MAAA,MAAA,KAAA,IAAA,OAAmB,CAAA,GAAAA,YAAA,gBAAAC,WAExB,eAAoC,CAAC,GAAC,WAAA,KAAY,GAAC,EAAA,OAAA,UAAA,CAAA,GAAA;GAAA,eAAA,CACpE,KAAK,eAAc,MAAA,OAAA,IAAA,KAAW,CAAC;GAAA,SAAA;EAAA,CAAA,CAAA,CAAA;CAIxC;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/input/Checkbox.d.ts

@@ -0,0 +1,93 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type VNodeChild } from 'vue';
+import { type IconProps } from '../base/Icon';
+import { type ListboxOption, type OptionMapping } from './list-state';
+import { type PartProps } from '../utils/props';
+import type { StatusTone } from '../utils/style/tone-styles';
+import type { TextSize } from '../utils/style/typography';
+import { type ChoiceOrientations } from './choice-styles';
+/** CheckboxGroup 交给组内 Checkbox 的状态 */
+export interface CheckboxGroupState {
+    /** 已勾选的值 */
+    readonly value: readonly string[];
+    /** 表单提交时的 name，组内每个 Checkbox 共用 */
+    readonly name: string | undefined;
+    /** 整组不可用 */
+    readonly disabled: boolean;
+    /** 整组只读 */
+    readonly readonly: boolean;
+    /** 整组校验未通过 */
+    readonly invalid: boolean;
+    /** 勾选或取消一个值 */
+    toggle(value: string): void;
+}
+/** CheckboxGroup 的上下文：自定义的勾选项可以 inject 它接入组 */
+export declare const CheckboxGroupContext: import("@zerodep-dev/vue-tsx-pro-tsx").Context<CheckboxGroupState>;
+/** 勾选状态与可用性由组件管理；原生的 size 属性让给字号档位 */
+export type CheckboxManaged = 'type' | 'checked' | 'disabled' | 'required' | 'size' | 'aria-invalid' | 'aria-describedby';
+/** 未声明的属性落到 input 上；外层 label 用 propsRoot */
+export interface CheckboxProps extends PartProps<'input', CheckboxManaged> {
+    /** 是否勾选：父级写 _checked={x}；在复选组里时由组决定 */
+    _checked?: boolean;
+    /** 部分勾选（“全选”下面只选了一部分）：显示横线，读屏念“部分选中” */
+    indeterminate?: boolean;
+    /** 在复选组里的值；单独使用时是表单提交的值（默认 on） */
+    value?: string;
+    /** 不可用 */
+    disabled?: boolean;
+    /** 只读：能聚焦、读屏念“只读”，勾选状态不能改（查看详情、审批时）；外观照常 */
+    readonly?: boolean;
+    /** 必填（如“同意条款”） */
+    required?: boolean;
+    /** 校验未通过 */
+    invalid?: boolean;
+    /** 字号档位；不写时继承上下文字号 */
+    size?: TextSize;
+    /** 选中时的色调（与 Button、Badge 等同一套），默认 accent；可以用 defaults.Choice 统一改 */
+    tone?: StatusTone;
+    /** 外层 label 的部件属性 */
+    propsRoot?: PartProps<'label'>;
+    /** 叠放层的部件属性 */
+    propsControl?: PartProps<'span'>;
+    /** 对勾 / 横线图标的部件属性 */
+    propsIndicator?: Partial<IconProps>;
+    /** 文字的部件属性 */
+    propsLabel?: PartProps<'span'>;
+    /** 文字下方的说明（aria-describedby） */
+    description?: VNodeChild;
+    /** 说明的部件属性 */
+    propsDescription?: PartProps<'span'>;
+    /** 文字 */
+    children?: VNodeChild;
+}
+/** Checkbox 的样式：box、indicator、hidden */
+export declare const checkboxStyles: Readonly<{
+    box: css.CompiledStyles;
+    hidden: css.CompiledStyles;
+    indicator: css.CompiledStyles;
+}>;
+/** 复选框：原生 checkbox 加自绘的方框与对勾 */
+export declare const Checkbox: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<CheckboxProps>;
+/** 未声明的属性落到 div（role="group"）上 */
+export interface CheckboxGroupBaseProps<T> extends PartProps<'div', 'role'> {
+    /** 勾选的值：父级写 _value={list} */
+    _value?: string[];
+    /** 表单提交时各项共用的 name */
+    name?: string;
+    /** 整组不可用 */
+    disabled?: boolean;
+    /** 整组只读 */
+    readonly?: boolean;
+    /** 校验未通过（如“至少选一项”） */
+    invalid?: boolean;
+    /** 排列方向，默认 vertical */
+    orientation?: keyof ChoiceOrientations;
+    /** 各项：ListboxOption（值、文字、说明、不可用）、字符串，或任意数据加 toOption；写了 children 时不用 */
+    items?: readonly T[];
+    /** Checkbox；不写时按 items 生成 */
+    children?: VNodeChild;
+}
+/** CheckboxGroup 的属性：items 是 ListboxOption、字符串时不用 toOption */
+export type CheckboxGroupProps<T = ListboxOption> = CheckboxGroupBaseProps<T> & OptionMapping<T>;
+/** 一组复选框：value 是勾选项的值的数组 */
+export declare const CheckboxGroup: <T = ListboxOption>(props: CheckboxGroupProps<T>) => import("@zerodep-dev/vue-tsx-pro-tsx").TsxNode;

package/dist/input/Checkbox.js

@@ -0,0 +1,250 @@
+import { defaultLabelledBy, hasContent, mergeAttrs, mergePartProps } from "../utils/props.js";
+import { focusRingStyles } from "../utils/style/styles.js";
+import { useRecipe } from "../config/styles.js";
+import { Icon } from "../base/Icon.js";
+import { toggleSelection } from "../utils/data/selection.js";
+import { useFieldControl } from "../form/Field.js";
+import { toListboxOption } from "./list-state.js";
+import { choiceInputStyles, choiceParts, choiceRecipe, readonlyChoiceHandlers, syncChecked, useChoiceAppearance } from "./choice-styles.js";
+import { createVNode, mergeProps, ref, shallowRef, useId } from "vue";
+import { _component, bindable, childrenProp, createContext, effect, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { Check, Minus } from "@lucide/icons";
+//#region src/input/Checkbox.tsx
+/**
+* 复选框（原生 input type="checkbox"）与复选组。结构与样式见 choice-styles.ts。
+*
+*   <Checkbox _checked={agreed}>我已阅读并同意</Checkbox>
+*   <Checkbox checked={allChecked} indeterminate={someChecked} onChange={toggleAll}>全选</Checkbox>
+*   <Field label="通知方式">
+*     <CheckboxGroup _value={channels} name="channels">
+*       <Checkbox value="email">邮件</Checkbox>
+*       <Checkbox value="sms">短信</Checkbox>
+*     </CheckboxGroup>
+*   </Field>
+*   <CheckboxGroup _value={channels} items={[{ value: 'email', label: '邮件', description: '每天汇总一封' }, …]} />
+*
+* 部分勾选（indeterminate）是原生 input 的属性，读屏念“部分选中”。在 Field 里时关联说明与错误、沿用其状态；
+* 复选组用 role="group"，以 Field 的标签为名称（aria-labelledby）。
+*
+* 部件：Root（label）、Control（叠放层）、Indicator（对勾 / 横线图标）、Label（文字）；未声明的属性落到 input 上。
+*/
+/** CheckboxGroup 交给组内 Checkbox 的状态 */
+/** CheckboxGroup 的上下文：自定义的勾选项可以 inject 它接入组 */
+var CheckboxGroupContext = createContext("CheckboxGroup");
+/** 勾选状态与可用性由组件管理；原生的 size 属性让给字号档位 */
+/** 未声明的属性落到 input 上；外层 label 用 propsRoot */
+/** Checkbox 的样式：box、indicator、hidden */
+var checkboxStyles = css.create({
+	box: {
+		width: "1.125em",
+		height: "1.125em",
+		borderRadius: "_sm"
+	},
+	indicator: {
+		width: "0.875em",
+		height: "0.875em",
+		color: "var(--tone-on-fill)"
+	},
+	hidden: { visibility: "hidden" }
+});
+/** 复选框：原生 checkbox 加自绘的方框与对勾 */
+var Checkbox = /*#__PURE__*/ _component((_props, _ctx) => {
+	const checked = bindable(_props, "_checked", () => false, _ctx.emit);
+	const indeterminate = readonlyProp(_props, "indeterminate", false);
+	const value = readonlyProp(_props, "value");
+	const disabled = readonlyProp(_props, "disabled");
+	const readonly = readonlyProp(_props, "readonly");
+	const required = readonlyProp(_props, "required");
+	const invalid = readonlyProp(_props, "invalid");
+	const size = readonlyProp(_props, "size");
+	const tone = readonlyProp(_props, "tone");
+	const id = readonlyProp(_props, "id");
+	const propsRoot = readonlyProp(_props, "propsRoot");
+	const propsControl = readonlyProp(_props, "propsControl");
+	const propsIndicator = readonlyProp(_props, "propsIndicator");
+	const propsLabel = readonlyProp(_props, "propsLabel");
+	const description = readonlyProp(_props, "description");
+	const propsDescription = readonlyProp(_props, "propsDescription");
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	const group = CheckboxGroupContext.inject(null);
+	const descriptionId = `${useId()}-description`;
+	const appearance = useChoiceAppearance(() => ({
+		size: size.value,
+		tone: tone.value
+	}));
+	const control = useFieldControl(() => ({
+		id: id.value,
+		invalid: invalid.value,
+		required: required.value,
+		disabled: disabled.value,
+		readonly: readonly.value
+	}));
+	let input = shallowRef(null);
+	let drawCheck = ref(false);
+	effect(() => {
+		if (input.value) input.value.indeterminate = indeterminate.value;
+	});
+	function onChange(event) {
+		const target = event.target;
+		const next = target.checked;
+		drawCheck.value = next;
+		if (group && value.value != null) group.toggle(value.value);
+		else checked.value = next;
+		syncChecked([target], () => group && value.value != null ? group.value.includes(value.value) : checked.value);
+	}
+	return () => {
+		const field = group ? void 0 : control();
+		const isChecked = group && value.value != null ? group.value.includes(value.value) : checked.value;
+		const off = disabled.value ?? group?.disabled ?? field?.disabled ?? false;
+		const locked = readonly.value ?? group?.readonly ?? field?.readonly ?? false;
+		const bad = invalid.value ?? group?.invalid ?? field?.invalid ?? false;
+		const marked = isChecked || indeterminate.value;
+		const s = choiceParts(appearance(), {
+			disabled: off,
+			readonly: locked
+		});
+		return createVNode("label", mergeProps(mergeAttrs(s.root, propsRoot.value), {
+			"data-state": indeterminate.value ? "indeterminate" : isChecked ? "checked" : "unchecked",
+			"data-disabled": off || void 0,
+			"data-readonly": locked || void 0
+		}), [createVNode("span", mergeAttrs(s.control, propsControl.value), [createVNode("input", mergeAttrs({
+			...s.input,
+			sx: [
+				s.input.sx,
+				focusRingStyles.tight,
+				checkboxStyles.box,
+				marked && choiceInputStyles.checked,
+				bad && choiceInputStyles.invalid
+			]
+		}, rest, {
+			ref: input,
+			type: "checkbox",
+			id: field?.id ?? id.value,
+			name: rest.name ?? group?.name,
+			value: value.value,
+			checked: isChecked,
+			disabled: off,
+			required: required.value ?? field?.required,
+			"aria-invalid": bad || void 0,
+			"aria-readonly": locked || void 0,
+			"aria-describedby": [field?.describedBy, hasContent(description.value) && descriptionId].filter(Boolean).join(" ") || void 0,
+			onChange,
+			...locked && readonlyChoiceHandlers
+		}), null), createVNode(Icon, mergePartProps({
+			...s.indicator,
+			icon: indeterminate.value ? Minus : Check,
+			draw: drawCheck.value && isChecked && !indeterminate.value,
+			strokeWidth: 3,
+			sx: [
+				s.indicator.sx,
+				checkboxStyles.indicator,
+				!marked && checkboxStyles.hidden
+			]
+		}, propsIndicator.value), null)]), (hasContent(children.value) || hasContent(description.value)) && createVNode("span", mergeAttrs(s.label, propsLabel.value), [children.value, hasContent(description.value) && createVNode("span", mergeAttrs(s.description, propsDescription.value, { id: descriptionId }), [description.value])])]);
+	};
+}, {
+	name: "Checkbox",
+	props: [
+		"_checked",
+		"onUpdate:_checked",
+		"indeterminate",
+		"value",
+		"disabled",
+		"readonly",
+		"required",
+		"invalid",
+		"size",
+		"tone",
+		"id",
+		"propsRoot",
+		"propsControl",
+		"propsIndicator",
+		"propsLabel",
+		"description",
+		"propsDescription"
+	]
+});
+/** 未声明的属性落到 div（role="group"）上 */
+/** CheckboxGroup 的属性：items 是 ListboxOption、字符串时不用 toOption */
+/** 一组复选框：value 是勾选项的值的数组 */
+var CheckboxGroup = /*#__PURE__*/ _component((_props2, _ctx2) => {
+	const value = bindable(_props2, "_value", () => [], _ctx2.emit);
+	const name = readonlyProp(_props2, "name");
+	const disabled = readonlyProp(_props2, "disabled");
+	const readonly = readonlyProp(_props2, "readonly");
+	const invalid = readonlyProp(_props2, "invalid");
+	const orientation = readonlyProp(_props2, "orientation", "vertical");
+	const id = readonlyProp(_props2, "id");
+	const items = readonlyProp(_props2, "items");
+	const toOption = readonlyProp(_props2, "toOption");
+	const children = childrenProp(_props2);
+	const rest = restProps(_props2, _ctx2, false);
+	const control = useFieldControl(() => ({
+		id: id.value,
+		disabled: disabled.value,
+		readonly: readonly.value,
+		invalid: invalid.value
+	}));
+	const recipe = useRecipe(choiceRecipe);
+	CheckboxGroupContext.provide({
+		get value() {
+			return value.value;
+		},
+		get name() {
+			return name.value;
+		},
+		get disabled() {
+			return control().disabled;
+		},
+		get readonly() {
+			return control().readonly;
+		},
+		get invalid() {
+			return control().invalid;
+		},
+		toggle(item) {
+			value.value = [...toggleSelection(value.value, item, { mode: "multiple" })];
+		}
+	});
+	return () => {
+		const state = control();
+		return createVNode("div", mergeProps(mergeAttrs(recipe({ orientation: orientation.value }).group, rest, {
+			id: state.id,
+			role: "group",
+			"aria-labelledby": defaultLabelledBy(rest, state.labelledBy),
+			"aria-describedby": state.describedBy
+		}), {
+			"data-orientation": orientation.value,
+			"data-disabled": state.disabled || void 0,
+			"data-readonly": state.readonly || void 0
+		}), [children.value ?? items.value?.map((item) => {
+			const option = toListboxOption(item, toOption.value);
+			return createVNode(Checkbox, {
+				"key": option.value,
+				"value": option.value,
+				"disabled": option.disabled || void 0,
+				"description": option.description
+			}, { default: () => [option.label] });
+		})]);
+	};
+}, {
+	name: "CheckboxGroup",
+	props: [
+		"_value",
+		"onUpdate:_value",
+		"name",
+		"disabled",
+		"readonly",
+		"invalid",
+		"orientation",
+		"id",
+		"items",
+		"toOption"
+	]
+});
+//#endregion
+export { Checkbox, CheckboxGroup, CheckboxGroupContext, checkboxStyles };
+
+//# sourceMappingURL=Checkbox.js.map

package/dist/input/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_vue_shallowRef","_vue_ref","_createVNode","_mergeProps"],"sources":["../../src/input/Checkbox.tsx"],"sourcesContent":["/**\n * 复选框（原生 input type=\"checkbox\"）与复选组。结构与样式见 choice-styles.ts。\n *\n *   <Checkbox _checked={agreed}>我已阅读并同意</Checkbox>\n *   <Checkbox checked={allChecked} indeterminate={someChecked} onChange={toggleAll}>全选</Checkbox>\n *   <Field label=\"通知方式\">\n *     <CheckboxGroup _value={channels} name=\"channels\">\n *       <Checkbox value=\"email\">邮件</Checkbox>\n *       <Checkbox value=\"sms\">短信</Checkbox>\n *     </CheckboxGroup>\n *   </Field>\n *   <CheckboxGroup _value={channels} items={[{ value: 'email', label: '邮件', description: '每天汇总一封' }, …]} />\n *\n * 部分勾选（indeterminate）是原生 input 的属性，读屏念“部分选中”。在 Field 里时关联说明与错误、沿用其状态；\n * 复选组用 role=\"group\"，以 Field 的标签为名称（aria-labelledby）。\n *\n * 部件：Root（label）、Control（叠放层）、Indicator（对勾 / 横线图标）、Label（文字）；未声明的属性落到 input 上。\n */\nimport { Check, Minus } from '@lucide/icons';\nimport { createContext, _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { useId, type VNodeChild } from 'vue';\nimport { Icon, type IconProps } from '../base/Icon';\nimport { useFieldControl } from '../form/Field';\nimport { toListboxOption, type ListboxOption, type OptionMapping } from './list-state';\nimport {\n  hasContent,\n  defaultLabelledBy,\n  mergeAttrs,\n  mergePartProps,\n  type PartProps,\n} from '../utils/props';\nimport { focusRingStyles } from '../utils/style/styles';\nimport { toggleSelection } from '../utils/data/selection';\nimport type { StatusTone } from '../utils/style/tone-styles';\nimport type { TextSize } from '../utils/style/typography';\nimport { useRecipe } from '../config/styles';\nimport {\n  choiceInputStyles,\n  choiceParts,\n  choiceRecipe,\n  useChoiceAppearance,\n  type ChoiceOrientations,\n  readonlyChoiceHandlers,\n  syncChecked,\n} from './choice-styles';\n\n/** CheckboxGroup 交给组内 Checkbox 的状态 */\nexport interface CheckboxGroupState {\n  /** 已勾选的值 */\n  readonly value: readonly string[];\n  /** 表单提交时的 name，组内每个 Checkbox 共用 */\n  readonly name: string | undefined;\n  /** 整组不可用 */\n  readonly disabled: boolean;\n  /** 整组只读 */\n  readonly readonly: boolean;\n  /** 整组校验未通过 */\n  readonly invalid: boolean;\n  /** 勾选或取消一个值 */\n  toggle(value: string): void;\n}\n\n/** CheckboxGroup 的上下文：自定义的勾选项可以 inject 它接入组 */\nexport const CheckboxGroupContext = createContext<CheckboxGroupState>('CheckboxGroup');\n\n/** 勾选状态与可用性由组件管理；原生的 size 属性让给字号档位 */\nexport type CheckboxManaged =\n  'type' | 'checked' | 'disabled' | 'required' | 'size' | 'aria-invalid' | 'aria-describedby';\n\n/** 未声明的属性落到 input 上；外层 label 用 propsRoot */\nexport interface CheckboxProps extends PartProps<'input', CheckboxManaged> {\n  /** 是否勾选：父级写 _checked={x}；在复选组里时由组决定 */\n  _checked?: boolean;\n  /** 部分勾选（“全选”下面只选了一部分）：显示横线，读屏念“部分选中” */\n  indeterminate?: boolean;\n  /** 在复选组里的值；单独使用时是表单提交的值（默认 on） */\n  value?: string;\n  /** 不可用 */\n  disabled?: boolean;\n  /** 只读：能聚焦、读屏念“只读”，勾选状态不能改（查看详情、审批时）；外观照常 */\n  readonly?: boolean;\n  /** 必填（如“同意条款”） */\n  required?: boolean;\n  /** 校验未通过 */\n  invalid?: boolean;\n  /** 字号档位；不写时继承上下文字号 */\n  size?: TextSize;\n  /** 选中时的色调（与 Button、Badge 等同一套），默认 accent；可以用 defaults.Choice 统一改 */\n  tone?: StatusTone;\n  /** 外层 label 的部件属性 */\n  propsRoot?: PartProps<'label'>;\n  /** 叠放层的部件属性 */\n  propsControl?: PartProps<'span'>;\n  /** 对勾 / 横线图标的部件属性 */\n  propsIndicator?: Partial<IconProps>;\n  /** 文字的部件属性 */\n  propsLabel?: PartProps<'span'>;\n  /** 文字下方的说明（aria-describedby） */\n  description?: VNodeChild;\n  /** 说明的部件属性 */\n  propsDescription?: PartProps<'span'>;\n  /** 文字 */\n  children?: VNodeChild;\n}\n\n/** Checkbox 的样式：box、indicator、hidden */\nexport const checkboxStyles = css.create({\n  box: { width: '1.125em', height: '1.125em', borderRadius: '_sm' },\n  indicator: { width: '0.875em', height: '0.875em', color: 'var(--tone-on-fill)' },\n  hidden: { visibility: 'hidden' },\n});\n\n/** 复选框：原生 checkbox 加自绘的方框与对勾 */\nexport const Checkbox = _component(\n  ({\n    _checked: checked = _bindable(false),\n    indeterminate = false,\n    value,\n    disabled,\n    readonly,\n    required,\n    invalid,\n    size,\n    tone,\n    id,\n    propsRoot,\n    propsControl,\n    propsIndicator,\n    propsLabel,\n    description,\n    propsDescription,\n    children,\n    ...rest\n  }: CheckboxProps) => {\n    const group = CheckboxGroupContext.inject(null);\n    const descriptionId = `${useId()}-description`;\n    const appearance = useChoiceAppearance(() => ({ size, tone }));\n    const control = useFieldControl(() => ({ id, invalid, required, disabled, readonly }));\n    let input = _state.raw<HTMLInputElement | null>(null);\n    // 用户点击勾上时对勾描线；初次渲染、外部改值不播\n    let drawCheck = _state(false);\n\n    // indeterminate 只能经 DOM 属性设置\n    _effect(() => {\n      if (input) input.indeterminate = indeterminate;\n    });\n\n    function onChange(event: Event) {\n      const target = event.target as HTMLInputElement;\n      const next = target.checked;\n      drawCheck = next;\n      if (group && value != null) group.toggle(value);\n      else checked = next;\n      syncChecked([target], () => (group && value != null ? group.value.includes(value) : checked));\n    }\n\n    return () => {\n      // 在复选组里时，id 与说明归组所有，不再给每一项\n      const field = group ? undefined : control();\n      const isChecked = group && value != null ? group.value.includes(value) : checked;\n      const off = disabled ?? group?.disabled ?? field?.disabled ?? false;\n      const locked = readonly ?? group?.readonly ?? field?.readonly ?? false;\n      const bad = invalid ?? group?.invalid ?? field?.invalid ?? false;\n      const marked = isChecked || indeterminate;\n      const s = choiceParts(appearance(), { disabled: off, readonly: locked });\n      return (\n        <label\n          {...mergeAttrs<'label'>(s.root, propsRoot)}\n          data-state={indeterminate ? 'indeterminate' : isChecked ? 'checked' : 'unchecked'}\n          data-disabled={off || undefined}\n          data-readonly={locked || undefined}\n        >\n          <span {...mergeAttrs<'span'>(s.control, propsControl)}>\n            <input\n              {...mergeAttrs<'input'>(\n                {\n                  ...s.input,\n                  sx: [\n                    s.input.sx,\n                    focusRingStyles.tight,\n                    checkboxStyles.box,\n                    marked && choiceInputStyles.checked,\n                    bad && choiceInputStyles.invalid,\n                  ],\n                },\n                rest,\n                {\n                  ref: _toRef(input),\n                  type: 'checkbox',\n                  id: field?.id ?? id,\n                  name: rest.name ?? group?.name,\n                  value,\n                  checked: isChecked,\n                  disabled: off,\n                  required: required ?? field?.required,\n                  'aria-invalid': bad || undefined,\n                  'aria-readonly': locked || undefined,\n                  'aria-describedby':\n                    [field?.describedBy, hasContent(description) && descriptionId]\n                      .filter(Boolean)\n                      .join(' ') || undefined,\n                  onChange,\n                  ...(locked && readonlyChoiceHandlers),\n                },\n              )}\n            />\n            <Icon\n              {...mergePartProps<IconProps>(\n                {\n                  ...s.indicator,\n                  icon: indeterminate ? Minus : Check,\n                  draw: drawCheck && isChecked && !indeterminate,\n                  strokeWidth: 3,\n                  sx: [s.indicator.sx, checkboxStyles.indicator, !marked && checkboxStyles.hidden],\n                },\n                propsIndicator,\n              )}\n            />\n          </span>\n          {(hasContent(children) || hasContent(description)) && (\n            <span {...mergeAttrs<'span'>(s.label, propsLabel)}>\n              {children}\n              {hasContent(description) && (\n                <span\n                  {...mergeAttrs<'span'>(s.description, propsDescription, {\n                    id: descriptionId,\n                  })}\n                >\n                  {description}\n                </span>\n              )}\n            </span>\n          )}\n        </label>\n      );\n    };\n  },\n);\n\n/** 未声明的属性落到 div（role=\"group\"）上 */\nexport interface CheckboxGroupBaseProps<T> extends PartProps<'div', 'role'> {\n  /** 勾选的值：父级写 _value={list} */\n  _value?: string[];\n  /** 表单提交时各项共用的 name */\n  name?: string;\n  /** 整组不可用 */\n  disabled?: boolean;\n  /** 整组只读 */\n  readonly?: boolean;\n  /** 校验未通过（如“至少选一项”） */\n  invalid?: boolean;\n  /** 排列方向，默认 vertical */\n  orientation?: keyof ChoiceOrientations;\n  /** 各项：ListboxOption（值、文字、说明、不可用）、字符串，或任意数据加 toOption；写了 children 时不用 */\n  items?: readonly T[];\n  /** Checkbox；不写时按 items 生成 */\n  children?: VNodeChild;\n}\n\n/** CheckboxGroup 的属性：items 是 ListboxOption、字符串时不用 toOption */\nexport type CheckboxGroupProps<T = ListboxOption> = CheckboxGroupBaseProps<T> & OptionMapping<T>;\n\n/** 一组复选框：value 是勾选项的值的数组 */\nexport const CheckboxGroup = _component(\n  <T = ListboxOption,>({\n    _value: value = _bindable<string[]>([]),\n    name,\n    disabled,\n    readonly,\n    invalid,\n    orientation = 'vertical',\n    id,\n    items,\n    toOption,\n    children,\n    ...rest\n  }: CheckboxGroupProps<T>) => {\n    const control = useFieldControl(() => ({ id, disabled, readonly, invalid }));\n    const recipe = useRecipe(choiceRecipe);\n    CheckboxGroupContext.provide({\n      get value() {\n        return value;\n      },\n      get name() {\n        return name;\n      },\n      get disabled() {\n        return control().disabled;\n      },\n      get readonly() {\n        return control().readonly;\n      },\n      get invalid() {\n        return control().invalid;\n      },\n      toggle(item) {\n        value = [...toggleSelection(value, item, { mode: 'multiple' })];\n      },\n    });\n\n    return () => {\n      const state = control();\n      return (\n        <div\n          {...mergeAttrs<'div'>(recipe({ orientation }).group, rest, {\n            id: state.id,\n            role: 'group',\n            'aria-labelledby': defaultLabelledBy(rest, state.labelledBy),\n            'aria-describedby': state.describedBy,\n          })}\n          data-orientation={orientation}\n          data-disabled={state.disabled || undefined}\n          data-readonly={state.readonly || undefined}\n        >\n          {children ??\n            items?.map((item) => {\n              const option = toListboxOption(item, toOption);\n              return (\n                <Checkbox\n                  key={option.value}\n                  value={option.value}\n                  disabled={option.disabled || undefined}\n                  description={option.description}\n                >\n                  {option.label}\n                </Checkbox>\n              );\n            })}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/input/ColorField.d.ts

@@ -0,0 +1,37 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type PartProps } from '../utils/props';
+import { type ControlOptions } from './control';
+/** 值、状态与无障碍关联由组件管理 */
+export type ColorFieldManaged = 'value' | 'type' | 'disabled' | 'readonly' | 'required' | 'size' | 'aria-invalid' | 'aria-describedby';
+/** 未声明的属性落到文字输入框（input）上 */
+export interface ColorFieldProps extends PartProps<'input', ColorFieldManaged>, ControlOptions {
+    /** 颜色值（#rrggbb 或 #rrggbbaa）：父级写 _value={x} 双向绑定 */
+    _value?: string;
+    /** 不可用 */
+    disabled?: boolean;
+    /** 只读：能看到颜色、复制取值，不能修改 */
+    readonly?: boolean;
+    /** 必填 */
+    required?: boolean;
+    /** 校验未通过 */
+    invalid?: boolean;
+    /** 外壳（边框、焦点环）的部件属性 */
+    propsRoot?: PartProps<'div'>;
+    /** 色块（包着原生取色器的 label）的部件属性 */
+    propsSwatch?: PartProps<'label'>;
+    /** 原生取色器（透明地盖在色块上）的部件属性；类型、取值、可用性与无障碍名称由组件管理 */
+    propsPicker?: PartProps<'input', 'type' | 'value' | 'disabled' | 'aria-label' | 'onInput'>;
+}
+/** ColorField 的样式：swatch、fill、picker、input */
+export declare const colorFieldStyles: Readonly<{
+    fill: css.CompiledStyles;
+    input: css.CompiledStyles;
+    picker: css.CompiledStyles;
+    swatch: css.CompiledStyles;
+}>;
+/** ColorField 的动态样式：色块里的颜色 */
+export declare const colorFieldDynamicStyles: Readonly<{
+    readonly fill: (color: string) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+}>;
+/** 颜色输入（色块 + 文字输入）：值是 #hex */
+export declare const ColorField: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<ColorFieldProps>;