niuma-ui 1.0.0

package/src/components/form-utils.ts

@@ -0,0 +1,77 @@
+import {
+  computed,
+  inject,
+  onMounted,
+  onUnmounted,
+  provide,
+  type ComputedRef,
+  type InjectionKey,
+  type Ref,
+} from 'vue'
+
+export type RsFormLabelPosition = 'top' | 'left'
+export type RsFormLabelAlign = 'start' | 'end'
+export type RsFormSize = 'ssm' | 'sm' | 'md' | 'lg'
+export type RsFormGap = 'sm' | 'md' | 'lg'
+export type RsFormMaxWidth = 'sm' | 'md' | 'lg' | 'full' | 'none'
+
+export interface RsFormValidationResult {
+  valid: boolean
+}
+
+export interface RsFormFieldExpose {
+  getValue: () => unknown
+  setValue: (value: unknown) => void
+  validate?: () => RsFormValidationResult | Promise<RsFormValidationResult>
+  clearValidation?: () => void
+}
+
+export interface RsFormContext {
+  disabled: Readonly<Ref<boolean>>
+  labelPosition: ComputedRef<RsFormLabelPosition>
+  labelWidth: Readonly<Ref<string>>
+  labelAlign: Readonly<Ref<RsFormLabelAlign>>
+  size: Readonly<Ref<RsFormSize>>
+  registerField: (id: symbol, field: RsFormFieldExpose) => void
+  unregisterField: (id: symbol) => void
+}
+
+export const RS_FORM_INJECTION_KEY: InjectionKey<RsFormContext> = Symbol('RsForm')
+
+export function cloneFormFieldValue(value: unknown): unknown {
+  if (value === undefined || value === null) return value
+  if (typeof value !== 'object') return value
+  try {
+    return structuredClone(value)
+  } catch {
+    return value
+  }
+}
+
+export function provideRsFormContext(context: RsFormContext): void {
+  provide(RS_FORM_INJECTION_KEY, context)
+}
+
+export function useRsFormContext(): RsFormContext | null {
+  return inject(RS_FORM_INJECTION_KEY, null)
+}
+
+export function useRsFormField(getExpose: () => RsFormFieldExpose | undefined): void {
+  const form = useRsFormContext()
+  if (!form) return
+
+  const fieldId = Symbol('rs-form-field')
+
+  onMounted(() => {
+    const expose = getExpose()
+    if (expose) form.registerField(fieldId, expose)
+  })
+
+  onUnmounted(() => {
+    form.unregisterField(fieldId)
+  })
+}
+
+export function resolveRsFormSize(size?: RsFormSize, form?: RsFormContext | null): ComputedRef<RsFormSize> {
+  return computed(() => size ?? form?.size.value ?? 'md')
+}

package/src/components/input-number-utils.ts

@@ -0,0 +1,128 @@
+/**
+ * RsInputNumber 纯函数工具（对齐 Ant InputNumber 核心语义）。
+ * 展示/编辑过程用文本草稿；提交边界再解析为 number / string。
+ */
+
+export type RsInputNumberValue = number | string | null
+
+export function countDecimalPlaces(value: number | string): number {
+  const s = String(value)
+  const exp = s.toLowerCase().indexOf('e')
+  if (exp >= 0) {
+    const base = s.slice(0, exp)
+    const power = Number(s.slice(exp + 1))
+    const baseDecimals = Math.max(0, (base.split('.')[1] ?? '').length)
+    return Math.max(0, baseDecimals - power)
+  }
+  const dot = s.indexOf('.')
+  return dot >= 0 ? s.length - dot - 1 : 0
+}
+
+export function resolveNumberPrecision(step: number | string, precision?: number): number {
+  if (precision != null && Number.isFinite(precision) && precision >= 0) {
+    return Math.floor(precision)
+  }
+  return countDecimalPlaces(step)
+}
+
+export function roundToPrecision(value: number, precision: number): number {
+  if (!Number.isFinite(value)) return value
+  if (precision <= 0) return Math.round(value)
+  const factor = 10 ** precision
+  return Math.round(value * factor) / factor
+}
+
+/** 是否为尚可继续输入的中间态（如 `-`、`1.`、`1e`）。 */
+export function isNumberInputInterim(text: string): boolean {
+  const t = text.trim()
+  if (!t) return true
+  // 末尾符号：继续输入小数/指数
+  if (/[+-]$/.test(t) || /\.$/.test(t) || /[eE][+-]?$/.test(t)) return true
+  if (!/^[+-]?(\d+\.?\d*|\.\d*)([eE][+-]?\d+)?$/.test(t)) return false
+  return Number.isNaN(Number(t))
+}
+
+export function parseNumberInput(text: string): number | null {
+  const t = text.trim()
+  if (!t || t === '+' || t === '-' || t === '.' || t === '+.' || t === '-.') return null
+  const n = Number(t)
+  return Number.isFinite(n) ? n : null
+}
+
+export function clampNumber(value: number, min?: number, max?: number): number {
+  let next = value
+  if (min != null && Number.isFinite(min) && next < min) next = min
+  if (max != null && Number.isFinite(max) && next > max) next = max
+  return next
+}
+
+export function formatNumberValue(
+  value: number | null,
+  opts?: {
+    precision?: number
+    formatter?: (value: number, info: { userTyping: boolean; input: string }) => string
+    userTyping?: boolean
+    input?: string
+  },
+): string {
+  if (value == null || !Number.isFinite(value)) return ''
+  if (opts?.formatter) {
+    return opts.formatter(value, {
+      userTyping: Boolean(opts.userTyping),
+      input: opts.input ?? String(value),
+    })
+  }
+  if (opts?.precision != null && opts.precision >= 0) {
+    return value.toFixed(opts.precision)
+  }
+  return String(value)
+}
+
+export function stepNumberValue(
+  current: number | null,
+  direction: 1 | -1,
+  opts: {
+    step?: number | string
+    min?: number
+    max?: number
+    precision?: number
+  } = {},
+): number {
+  const step = Number(opts.step ?? 1)
+  const safeStep = Number.isFinite(step) && step !== 0 ? Math.abs(step) : 1
+  const precision = resolveNumberPrecision(safeStep, opts.precision)
+  const base = current == null || !Number.isFinite(current) ? 0 : current
+  const next = roundToPrecision(base + direction * safeStep, precision)
+  return clampNumber(next, opts.min, opts.max)
+}
+
+export function normalizeCommittedNumber(
+  raw: string,
+  opts: {
+    min?: number
+    max?: number
+    precision?: number
+    step?: number | string
+    parser?: (display: string) => string
+  } = {},
+): number | null {
+  const text = opts.parser ? opts.parser(raw) : raw
+  const parsed = parseNumberInput(text)
+  if (parsed == null) return null
+  const precision = resolveNumberPrecision(opts.step ?? 1, opts.precision)
+  return clampNumber(roundToPrecision(parsed, precision), opts.min, opts.max)
+}
+
+export function toModelValue(
+  value: number | null,
+  stringMode: boolean,
+): RsInputNumberValue {
+  if (value == null) return null
+  return stringMode ? String(value) : value
+}
+
+export function fromModelValue(value: RsInputNumberValue): number | null {
+  if (value == null || value === '') return null
+  if (typeof value === 'number') return Number.isFinite(value) ? value : null
+  return parseNumberInput(String(value))
+}

package/src/components/input-rules.ts

@@ -0,0 +1,84 @@
+import type { RsTranslateFn } from '../composables/useRsI18n'
+import { createTranslator } from '../composables/useRsI18n'
+import { defaultLocale } from '../locale/types'
+
+export type RsInputRule = 'email' | 'number' | 'integer' | 'phone' | 'url' | 'minComplexity'
+
+export type RsInputValidateTrigger = 'blur' | 'input' | 'both'
+
+export const inputRuleMessageKeys: Record<RsInputRule, string> = {
+  email: 'input.rule.email',
+  number: 'input.rule.number',
+  integer: 'input.rule.integer',
+  phone: 'input.rule.phone',
+  url: 'input.rule.url',
+  minComplexity: 'input.rule.minComplexity',
+}
+
+const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+const numberPattern = /^-?\d+(\.\d+)?$/
+const integerPattern = /^-?\d+$/
+const phonePattern = /^1[3-9]\d{9}$/
+const urlPattern = /^https?:\/\/.+/i
+const minComplexityPattern = /^(?=.*[A-Za-z])(?=.*\d).{8,}$/
+
+export function validateInputRule(value: string, rule: RsInputRule): boolean {
+  if (value === '') return true
+
+  switch (rule) {
+    case 'email':
+      return emailPattern.test(value)
+    case 'number':
+      return numberPattern.test(value)
+    case 'integer':
+      return integerPattern.test(value)
+    case 'phone':
+      return phonePattern.test(value)
+    case 'url':
+      return urlPattern.test(value)
+    case 'minComplexity':
+      return minComplexityPattern.test(value)
+    default:
+      return true
+  }
+}
+
+export function getInputRuleMessage(rule: RsInputRule, t?: RsTranslateFn): string {
+  const key = inputRuleMessageKeys[rule]
+  const tr = t ?? createTranslator(defaultLocale)
+  return tr(key)
+}
+
+export interface RsInputValidateResult {
+  valid: boolean
+  message?: string
+}
+
+export function runInputValidation(
+  value: string,
+  options: {
+    rule?: RsInputRule
+    required?: boolean
+    validator?: (value: string) => boolean | string
+  },
+  t?: RsTranslateFn,
+): RsInputValidateResult {
+  const tr = t ?? createTranslator(defaultLocale)
+
+  if (options.required && value.trim() === '') {
+    return { valid: false, message: tr('input.required') }
+  }
+
+  if (options.rule && !validateInputRule(value, options.rule)) {
+    return { valid: false, message: getInputRuleMessage(options.rule, tr) }
+  }
+
+  if (options.validator) {
+    const result = options.validator(value)
+    if (result === true) return { valid: true }
+    if (result === false) return { valid: false, message: tr('input.formatInvalid') }
+    if (typeof result === 'string') return { valid: false, message: result }
+  }
+
+  return { valid: true }
+}

package/src/components/loading-utils.ts

@@ -0,0 +1,8 @@
+/** 加载指示器尺寸 */
+export type RsLoadingSize = 'sm' | 'md' | 'lg'
+
+/** 加载指示器色调 */
+export type RsLoadingTone = 'default' | 'primary'
+
+/** 加载指示器变体 */
+export type RsLoadingVariant = 'spinner' | 'dots' | 'skeleton'

package/src/components/markdown-utils.ts

@@ -0,0 +1,126 @@
+/**
+ * Markdown 渲染工具：GFM + 安全链接/图片 + DOMPurify 消毒。
+ * 面向表单/说明类场景，不含 AI 流式、公式、图表等业务能力。
+ */
+import { Marked } from 'marked'
+import type { Tokens } from 'marked'
+import DOMPurify from 'dompurify'
+
+export type RsMarkdownMode = 'edit' | 'preview' | 'split'
+
+export type RsMarkdownRenderOptions = {
+  /** GFM 换行（单个换行转 <br>），默认 true */
+  breaks?: boolean
+}
+
+export function escapeHtml(text: string): string {
+  return text
+    .replaceAll('&', '&amp;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#39;')
+}
+
+export function isSafeHref(href: string): boolean {
+  const value = href.trim()
+  if (!value) return false
+  if (value.startsWith('#') || value.startsWith('/')) return true
+  return /^(https?:|mailto:)/i.test(value)
+}
+
+export function isSafeImageSrc(src: string): boolean {
+  const value = src.trim()
+  if (!value) return false
+  if (value.startsWith('data:image/')) return true
+  return /^(https?:)/i.test(value)
+}
+
+function sanitizeLang(lang: string | undefined): string {
+  const raw = (lang ?? 'text').trim().split(/\s+/)[0] ?? 'text'
+  return raw.replace(/[^\w.+#-]/g, '') || 'text'
+}
+
+function renderCodeBlock(text: string, lang: string | undefined): string {
+  const language = sanitizeLang(lang)
+  const code = text.replace(/\n$/, '')
+  return [
+    `<div class="rs-markdown__codeblock" data-rs-md-lang="${escapeHtml(language)}">`,
+    `<div class="rs-markdown__code-head">`,
+    `<span class="rs-markdown__code-lang">${escapeHtml(language)}</span>`,
+    `</div>`,
+    `<pre class="rs-markdown__pre"><code class="language-${escapeHtml(language)}">${escapeHtml(code)}</code></pre>`,
+    `</div>`,
+  ].join('')
+}
+
+function wrapTables(html: string): string {
+  return html.replace(/<table\b[\s\S]*?<\/table>/gi, (table) => {
+    return `<div class="rs-markdown__table-wrap">${table}</div>`
+  })
+}
+
+function createMarked(breaks: boolean): Marked {
+  return new Marked({
+    gfm: true,
+    breaks,
+    renderer: {
+      code({ text, lang }) {
+        return renderCodeBlock(text, lang)
+      },
+      link(
+        this: { parser: { parseInline: (tokens: Tokens.Link['tokens']) => string } },
+        token: Tokens.Link,
+      ) {
+        const text = this.parser.parseInline(token.tokens)
+        const href = token.href?.trim() ?? ''
+        if (!isSafeHref(href)) return text
+        const title = token.title ? ` title="${escapeHtml(token.title)}"` : ''
+        return `<a href="${escapeHtml(href)}"${title} target="_blank" rel="noopener noreferrer">${text}</a>`
+      },
+      image({ href, title, text }) {
+        const src = href?.trim() ?? ''
+        if (!isSafeImageSrc(src)) return escapeHtml(text || '')
+        const alt = escapeHtml(text || '')
+        const titleAttr = title ? ` title="${escapeHtml(title)}"` : ''
+        return `<img class="rs-markdown__img" src="${escapeHtml(src)}" alt="${alt}"${titleAttr} loading="lazy" decoding="async" />`
+      },
+    },
+  })
+}
+
+const markedCache = new Map<boolean, Marked>()
+
+function getMarked(breaks: boolean): Marked {
+  const cached = markedCache.get(breaks)
+  if (cached) return cached
+  const instance = createMarked(breaks)
+  markedCache.set(breaks, instance)
+  return instance
+}
+
+/**
+ * 将 Markdown 转为可安全注入的 HTML（必须配合 v-html 使用消毒结果）。
+ */
+export function renderMarkdown(source = '', options?: RsMarkdownRenderOptions): string {
+  if (!source.trim()) return ''
+  const breaks = options?.breaks !== false
+  const dirty = wrapTables(getMarked(breaks).parse(source, { async: false }) as string)
+  return DOMPurify.sanitize(dirty, {
+    USE_PROFILES: { html: true },
+    ADD_ATTR: ['class', 'target', 'rel', 'loading', 'decoding', 'alt', 'src', 'data-rs-md-lang'],
+  })
+}
+
+export function resolveMarkdownHeight(height?: number | string): string {
+  if (height === undefined) return '16rem'
+  return typeof height === 'number' ? `${height}px` : height
+}
+
+export function resolveMarkdownMode(
+  mode: RsMarkdownMode | undefined,
+  readonly: boolean,
+): RsMarkdownMode {
+  if (readonly) return 'preview'
+  return mode ?? 'edit'
+}

package/src/components/menu-utils.ts

@@ -0,0 +1,48 @@
+export interface RsMenuItem {
+  key: string
+  label: string
+  icon?: string
+  disabled?: boolean
+  children?: RsMenuItem[]
+}
+
+export interface RsMenuItemGroup {
+  label: string
+  children: RsMenuItem[]
+}
+
+export type RsMenuItems = RsMenuItem[] | RsMenuItemGroup[]
+
+export function isMenuItemGroup(
+  item: RsMenuItem | RsMenuItemGroup,
+): item is RsMenuItemGroup {
+  return !('key' in item) && 'children' in item
+}
+
+export function findMenuParentKeys(items: RsMenuItems, key: string): string[] {
+  function walk(list: RsMenuItem[], ancestors: string[]): string[] | null {
+    for (const item of list) {
+      if (item.key === key) {
+        return ancestors
+      }
+      if (item.children?.length) {
+        const found = walk(item.children, [...ancestors, item.key])
+        if (found) {
+          return found
+        }
+      }
+    }
+    return null
+  }
+
+  for (const entry of items) {
+    const found = isMenuItemGroup(entry)
+      ? walk(entry.children, [])
+      : walk([entry], [])
+    if (found) {
+      return found
+    }
+  }
+
+  return []
+}

package/src/components/overlay-utils.ts

@@ -0,0 +1,47 @@
+/**
+ * 浮层 / 模态 z-index 常量，与 `styles.css` 中 `--rs-z-*` token 对齐。
+ * 组件样式应使用 `z-index: var(--rs-z-*)`，禁止硬编码层级。
+ */
+
+/** 下拉 / Popover / Tooltip 浮层 */
+export const RS_Z_DROPDOWN = 'var(--rs-z-dropdown)'
+
+/** Shell 常驻面板（底部 Dock 等），须低于 modal */
+export const RS_Z_PANEL = 'var(--rs-z-panel)'
+
+/** 模态对话框 */
+export const RS_Z_MODAL = 'var(--rs-z-modal)'
+
+/** 全局 Toast */
+export const RS_Z_TOAST = 'var(--rs-z-toast)'
+
+/** 反馈语义色调（Dialog 图标等） */
+export type RsFeedbackTone = 'default' | 'info' | 'success' | 'warning' | 'danger'
+
+export type RsToastType = 'success' | 'error' | 'info' | 'warning'
+
+export type RsToastPosition =
+  | 'top-left'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-right'
+  | 'top-center'
+  | 'bottom-center'
+
+export const RS_TOAST_DEFAULT_POSITION: RsToastPosition = 'top-center'
+
+/** 多条 Toast 之间的垂直间距（px），传给 vue-sonner `gap` */
+export const RS_TOAST_DEFAULT_GAP = 4
+
+export const rsToastPositions = [
+  'top-center',
+  'top-left',
+  'top-right',
+  'bottom-center',
+  'bottom-left',
+  'bottom-right',
+] as const satisfies readonly RsToastPosition[]
+
+export function rsFeedbackIconClass(tone: RsFeedbackTone): string {
+  return `rs-feedback-icon rs-feedback-icon--${tone}`
+}

package/src/components/pagination-utils.ts

@@ -0,0 +1,38 @@
+export const DEFAULT_PAGE_SIZE_OPTIONS = [10, 20, 50, 100] as const
+
+export function getPageCount(total: number, pageSize: number): number {
+  if (pageSize <= 0) return 1
+  return Math.max(1, Math.ceil(Math.max(0, total) / pageSize))
+}
+
+export function clampPage(page: number, pageCount: number): number {
+  return Math.min(Math.max(1, page), Math.max(1, pageCount))
+}
+
+export function getPaginationRange(page: number, pageCount: number, siblingCount = 1): Array<number | 'ellipsis'> {
+  const totalNumbers = siblingCount * 2 + 5
+  if (pageCount <= totalNumbers) return Array.from({ length: pageCount }, (_, index) => index + 1)
+
+  const leftSibling = Math.max(page - siblingCount, 1)
+  const rightSibling = Math.min(page + siblingCount, pageCount)
+  const showLeftEllipsis = leftSibling > 2
+  const showRightEllipsis = rightSibling < pageCount - 1
+
+  if (!showLeftEllipsis && showRightEllipsis) {
+    return [...Array.from({ length: 3 + siblingCount * 2 }, (_, index) => index + 1), 'ellipsis', pageCount]
+  }
+  if (showLeftEllipsis && !showRightEllipsis) {
+    const start = pageCount - (2 + siblingCount * 2)
+    return [1, 'ellipsis', ...Array.from({ length: 3 + siblingCount * 2 }, (_, index) => start + index)]
+  }
+  return [1, 'ellipsis', ...Array.from({ length: rightSibling - leftSibling + 1 }, (_, index) => leftSibling + index), 'ellipsis', pageCount]
+}
+
+export function slicePageData<T>(data: readonly T[], page: number, pageSize: number): T[] {
+  const start = (clampPage(page, getPageCount(data.length, pageSize)) - 1) * pageSize
+  return data.slice(start, start + pageSize)
+}
+
+export function createPageSizeSelectOptions(options: readonly number[] = DEFAULT_PAGE_SIZE_OPTIONS) {
+  return options.map((value) => ({ label: String(value), value: String(value) }))
+}

package/src/components/popover-utils.ts

@@ -0,0 +1,8 @@
+/** Popover 弹出方位 */
+export type RsPopoverSide = 'top' | 'right' | 'bottom' | 'left'
+
+/** Popover 对齐方式 */
+export type RsPopoverAlign = 'start' | 'center' | 'end'
+
+/** Popover 内容宽度档位 */
+export type RsPopoverWidth = 'sm' | 'md' | 'lg' | 'auto'

package/src/components/reka.ts

@@ -0,0 +1,106 @@
+export {
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogRoot,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+  Primitive,
+  AvatarFallback,
+  AvatarImage,
+  AvatarRoot,
+  CollapsibleContent,
+  CollapsibleRoot,
+  CollapsibleTrigger,
+  ComboboxAnchor,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxItemIndicator,
+  ComboboxLabel,
+  ComboboxPortal,
+  ComboboxRoot,
+  ComboboxTrigger,
+  ComboboxViewport,
+  ComboboxVirtualizer,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuPortal,
+  ContextMenuRoot,
+  ContextMenuSeparator,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogOverlay,
+  DialogPortal,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuRoot,
+  DropdownMenuTrigger,
+  PopoverContent,
+  PopoverPortal,
+  PopoverRoot,
+  PopoverTrigger,
+  PaginationEllipsis,
+  PaginationFirst,
+  PaginationLast,
+  PaginationList,
+  PaginationListItem,
+  PaginationNext,
+  PaginationPrev,
+  PaginationRoot,
+  ScrollAreaCorner,
+  ScrollAreaRoot,
+  ScrollAreaScrollbar,
+  ScrollAreaThumb,
+  ScrollAreaViewport,
+  SelectContent,
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  SelectPortal,
+  SelectRoot,
+  SelectTrigger,
+  SelectValue,
+  SelectViewport,
+  StepperDescription,
+  StepperIndicator,
+  StepperItem,
+  StepperRoot,
+  StepperSeparator,
+  StepperTitle,
+  StepperTrigger,
+  TabsContent,
+  TabsList,
+  TabsRoot,
+  TabsTrigger,
+  TooltipContent,
+  TooltipPortal,
+  TooltipProvider,
+  TooltipRoot,
+  TooltipTrigger,
+  TreeItem,
+  TreeRoot,
+  TreeVirtualizer,
+  useForwardExpose,
+  useFilter,
+} from 'reka-ui'
+
+export type { AcceptableValue, PrimitiveProps, TooltipRootEmits, TooltipRootProps } from 'reka-ui'

package/src/components/resolve-radius.ts

@@ -0,0 +1,22 @@
+import { computed, type ComputedRef } from 'vue'
+import { RS_RADIUS_CSS, type RsRadius } from '../theme/types'
+import { useRsConfigOptional } from '../composables/useRsConfig'
+
+/**
+ * 解析圆角：props → ConfigProvider.controlRadius → 组件默认档。
+ * 业务应传 `radius` / `iconRadius` 或依赖全局配置，避免 :deep 改 border-radius。
+ */
+export function useResolvedRsRadius(
+  radius: () => RsRadius | undefined,
+  fallback: RsRadius,
+): ComputedRef<RsRadius> {
+  const config = useRsConfigOptional()
+  return computed(
+    () => radius() ?? config?.controlRadius.value ?? fallback,
+  )
+}
+
+/** 将档位转为可写入 style / CSS 变量的值。 */
+export function rsRadiusCss(radius: RsRadius): string {
+  return RS_RADIUS_CSS[radius]
+}