niuma-ui 1.0.2 → 1.1.0

package/src/__tests__/RsSelect.spec.ts

@@ -7,6 +7,12 @@ import RsSelect from '../components/RsSelect.vue'
 import {
   filterSelectOptions,
   fromComboboxValue,
+  normalizeSelectOptions,
+  optionDisplayLabel,
+  packSelectModel,
+  restoreSelectValue,
+  sortSelectOptions,
+  splitByTokenSeparators,
   toComboboxValue,
   RS_SELECT_EMPTY_VALUE,
 } from '../components/select-utils'
@@ -40,6 +46,59 @@ describe('RsSelect', () => {
     expect(wrapper.find('.rs-select__placeholder').text()).toBe('请选择')
   })
 
+  it('keeps numeric option values on v-model including 0', async () => {
+    const numeric = [
+      { label: '静态配置', value: 0 },
+      { label: '服务发现', value: 1 },
+    ]
+    const wrapper = mount(RsSelect, {
+      props: { options: numeric, modelValue: 0 },
+    })
+    expect(wrapper.find('.rs-select__single-label').text()).toBe('静态配置')
+    const root = wrapper.getComponent({ name: 'ComboboxRoot' })
+    await root.vm.$emit('update:modelValue', '1')
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([1])
+  })
+
+  it('collapses overflow tags with maxTagCount', () => {
+    const wrapper = mount(RsSelect, {
+      props: {
+        options,
+        modelValue: ['gpt-4o', 'claude'],
+        multiple: true,
+        maxTagCount: 1,
+      },
+    })
+    expect(wrapper.findAll('.rs-select__tag')).toHaveLength(2)
+    expect(wrapper.find('.rs-select__tag--rest').text()).toBe('+1')
+  })
+
+  it('renders prefix and option slots', async () => {
+    const wrapper = mount(RsSelect, {
+      props: { options, modelValue: '' },
+      slots: {
+        prefix: () => h('span', { class: 'pref' }, 'P'),
+        option: ({ option }: { option: { label: string } }) =>
+          h('span', { class: 'opt' }, option.label),
+      },
+      attachTo: document.body,
+    })
+    expect(wrapper.find('.pref').text()).toBe('P')
+    await wrapper.find('.rs-select__trigger').trigger('click')
+    await flushPromises()
+    expect(document.body.querySelector('.opt')?.textContent).toContain('GPT-4o')
+    wrapper.unmount()
+  })
+
+  it('marks invalid on the trigger instead of the combobox root', () => {
+    const wrapper = mount(RsSelect, {
+      props: { options, modelValue: '', invalid: true },
+    })
+    expect(wrapper.find('.rs-select__trigger').classes()).toContain('rs-select__trigger--invalid')
+    expect(wrapper.find('.rs-select__trigger').attributes('aria-invalid')).toBe('true')
+    expect(wrapper.find('.rs-select').attributes('aria-invalid')).toBeUndefined()
+  })
+
   it('uses en-US default placeholder inside RsConfigProvider', () => {
     const wrapper = mount(RsConfigProvider, {
       props: { locale: 'en-US' },
@@ -214,7 +273,7 @@ describe('RsSelect', () => {
       },
       template: `
         <RsForm ref="formRef">
-          <RsSelect v-model="role" :options="roleOptions" required />
+          <RsSelect v-model="role" name="role" :options="roleOptions" required />
         </RsForm>
       `,
     })
@@ -294,6 +353,260 @@ describe('RsSelect', () => {
     expect(matched!.classList.contains('rs-select__content--match-trigger')).toBe(true)
     wrapper.unmount()
   })
+
+  it('packs labelInValue including numeric 0', async () => {
+    const numeric = [
+      { label: '静态配置', value: 0 },
+      { label: '服务发现', value: 1 },
+    ]
+    const wrapper = mount(RsSelect, {
+      props: { options: numeric, modelValue: '', labelInValue: true },
+    })
+    expect(wrapper.find('.rs-select__placeholder').exists()).toBe(true)
+    const root = wrapper.getComponent({ name: 'ComboboxRoot' })
+    await root.vm.$emit('update:modelValue', '0')
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([
+      { label: '静态配置', value: 0 },
+    ])
+  })
+
+  it('echoes labelInValue snapshot for number 0', () => {
+    const numeric = [
+      { label: '静态配置', value: 0 },
+      { label: '服务发现', value: 1 },
+    ]
+    const wrapper = mount(RsSelect, {
+      props: {
+        options: numeric,
+        modelValue: { label: '静态配置', value: 0 },
+        labelInValue: true,
+      },
+    })
+    expect(wrapper.find('.rs-select__single-label').text()).toBe('静态配置')
+  })
+
+  it('packs labelInValue arrays in multiple mode', async () => {
+    const wrapper = mount(RsSelect, {
+      props: { options, modelValue: [], multiple: true, labelInValue: true },
+    })
+    const root = wrapper.getComponent({ name: 'ComboboxRoot' })
+    await root.vm.$emit('update:modelValue', ['gpt-4o'])
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([
+      [{ label: 'GPT-4o', value: 'gpt-4o' }],
+    ])
+  })
+
+  it('emits select, deselect and clear', async () => {
+    const wrapper = mount(RsSelect, {
+      props: { options, modelValue: '', clearable: true },
+    })
+    const root = wrapper.getComponent({ name: 'ComboboxRoot' })
+    await root.vm.$emit('update:modelValue', 'claude')
+    expect(wrapper.emitted('select')?.at(-1)?.[0]).toBe('claude')
+
+    await wrapper.setProps({ modelValue: 'claude' })
+    await root.vm.$emit('update:modelValue', 'gpt-4o')
+    expect(wrapper.emitted('deselect')?.at(-1)?.[0]).toBe('claude')
+    expect(wrapper.emitted('select')?.at(-1)?.[0]).toBe('gpt-4o')
+
+    await wrapper.setProps({ modelValue: 'gpt-4o' })
+    await wrapper.find('.rs-select__clear').trigger('click')
+    expect(wrapper.emitted('clear')).toHaveLength(1)
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([''])
+  })
+
+  it('truncates tag text with maxTagTextLength', () => {
+    const wrapper = mount(RsSelect, {
+      props: {
+        options: [{ label: 'TypeScript', value: 'ts' }],
+        modelValue: ['ts'],
+        multiple: true,
+        maxTagTextLength: 4,
+      },
+    })
+    expect(wrapper.find('.rs-select__tag-label').text()).toBe('Type…')
+  })
+
+  it('applies warning status on the trigger', () => {
+    const wrapper = mount(RsSelect, {
+      props: { options, modelValue: '', status: 'warning' },
+    })
+    expect(wrapper.find('.rs-select__trigger').classes()).toContain('rs-select__trigger--warning')
+    expect(wrapper.find('.rs-select__trigger').classes()).not.toContain(
+      'rs-select__trigger--invalid',
+    )
+  })
+
+  it('treats status error as invalid', () => {
+    const wrapper = mount(RsSelect, {
+      props: { options, modelValue: '', status: 'error' },
+    })
+    expect(wrapper.find('.rs-select__trigger').classes()).toContain('rs-select__trigger--invalid')
+    expect(wrapper.find('.rs-select__trigger').classes()).not.toContain(
+      'rs-select__trigger--warning',
+    )
+  })
+
+  it('hides arrow when showArrow is false', () => {
+    const wrapper = mount(RsSelect, {
+      props: { options, modelValue: '', showArrow: false },
+    })
+    expect(wrapper.find('.rs-select__suffix').exists()).toBe(false)
+  })
+
+  it('sorts options with filterSort', async () => {
+    const unsorted = [
+      { label: 'Zulu', value: 'z' },
+      { label: 'Alpha', value: 'a' },
+    ]
+    const wrapper = mount(RsSelect, {
+      props: {
+        options: unsorted,
+        modelValue: '',
+        filterSort: (a, b) => String(a.label).localeCompare(String(b.label)),
+      },
+      attachTo: document.body,
+    })
+    await wrapper.find('.rs-select__trigger').trigger('click')
+    await flushPromises()
+    const items = [...document.body.querySelectorAll('.rs-select__item-label')].map(
+      (el) => el.textContent?.trim(),
+    )
+    expect(items[0]).toBe('Alpha')
+    expect(items[1]).toBe('Zulu')
+    wrapper.unmount()
+  })
+
+  it('renders header and footer slots', async () => {
+    const wrapper = mount(RsSelect, {
+      props: { options, modelValue: '' },
+      slots: {
+        header: () => h('div', { class: 'sel-head' }, 'HEAD'),
+        footer: () => h('div', { class: 'sel-foot' }, 'FOOT'),
+      },
+      attachTo: document.body,
+    })
+    await wrapper.find('.rs-select__trigger').trigger('click')
+    await flushPromises()
+    expect(document.body.querySelector('.sel-head')?.textContent).toBe('HEAD')
+    expect(document.body.querySelector('.sel-foot')?.textContent).toBe('FOOT')
+    wrapper.unmount()
+  })
+
+  it('applies popupClassName and listHeight on the panel', async () => {
+    const wrapper = mount(RsSelect, {
+      props: {
+        options,
+        modelValue: '',
+        popupClassName: 'extra-popup',
+        listHeight: 120,
+      },
+      attachTo: document.body,
+    })
+    await wrapper.find('.rs-select__trigger').trigger('click')
+    await flushPromises()
+    const content = document.body.querySelector('.rs-select__content') as HTMLElement | null
+    expect(content?.classList.contains('extra-popup')).toBe(true)
+    expect(content?.style.getPropertyValue('--rs-select-list-height')).toBe('120px')
+    wrapper.unmount()
+  })
+
+  it('commits tokens when typing a separator', async () => {
+    const wrapper = mount(RsSelect, {
+      props: {
+        options,
+        modelValue: [],
+        multiple: true,
+        searchable: true,
+        tokenSeparators: [','],
+      },
+      attachTo: document.body,
+    })
+    await wrapper.find('.rs-select__trigger').trigger('click')
+    await flushPromises()
+    const input = document.querySelector('.rs-select__search') as HTMLInputElement | null
+    expect(input).toBeTruthy()
+    input!.value = 'gpt-4o,'
+    input!.dispatchEvent(new Event('input', { bubbles: true }))
+    await flushPromises()
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([['gpt-4o']])
+    wrapper.unmount()
+  })
+
+  it('maps fieldNames including numeric 0', async () => {
+    const raw = [
+      { name: '静态配置', id: 0 },
+      { name: '服务发现', id: 1 },
+    ]
+    const wrapper = mount(RsSelect, {
+      props: {
+        options: raw,
+        modelValue: 0,
+        fieldNames: { label: 'name', value: 'id' },
+      },
+    })
+    expect(wrapper.find('.rs-select__single-label').text()).toBe('静态配置')
+    const root = wrapper.getComponent({ name: 'ComboboxRoot' })
+    await root.vm.$emit('update:modelValue', '1')
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([1])
+  })
+
+  it('shows optionLabelProp on the trigger', () => {
+    const wrapper = mount(RsSelect, {
+      props: { options, modelValue: 'claude', optionLabelProp: 'value' },
+    })
+    expect(wrapper.find('.rs-select__single-label').text()).toBe('claude')
+  })
+
+  it('binds searchValue and emits updates', async () => {
+    const wrapper = mount(RsSelect, {
+      props: { options, modelValue: '', searchable: true, searchValue: 'cla' },
+      attachTo: document.body,
+    })
+    await wrapper.find('.rs-select__trigger').trigger('click')
+    await flushPromises()
+    const input = document.querySelector('.rs-select__search') as HTMLInputElement | null
+    expect(input?.value).toBe('cla')
+    input!.value = 'gpt'
+    input!.dispatchEvent(new Event('input', { bubbles: true }))
+    await flushPromises()
+    expect(wrapper.emitted('update:searchValue')?.at(-1)).toEqual(['gpt'])
+    wrapper.unmount()
+  })
+
+  it('renders dropdownRender instead of the default panel body', async () => {
+    const wrapper = mount(RsSelect, {
+      props: { options, modelValue: '' },
+      slots: {
+        dropdownRender: () => h('div', { class: 'custom-dd' }, 'CUSTOM'),
+      },
+      attachTo: document.body,
+    })
+    await wrapper.find('.rs-select__trigger').trigger('click')
+    await flushPromises()
+    expect(document.body.querySelector('.custom-dd')?.textContent).toBe('CUSTOM')
+    expect(document.body.querySelector('.rs-select__item')).toBeNull()
+    wrapper.unmount()
+  })
+
+  it('mounts the panel into getPopupContainer', async () => {
+    const host = document.createElement('div')
+    host.id = 'rs-select-portal-host'
+    document.body.appendChild(host)
+    const wrapper = mount(RsSelect, {
+      props: {
+        options,
+        modelValue: '',
+        getPopupContainer: () => host,
+      },
+      attachTo: document.body,
+    })
+    await wrapper.find('.rs-select__trigger').trigger('click')
+    await flushPromises()
+    expect(host.querySelector('.rs-select__content')).toBeTruthy()
+    wrapper.unmount()
+    host.remove()
+  })
 })
 
 describe('select-utils', () => {
@@ -303,10 +616,119 @@ describe('select-utils', () => {
   it('maps empty string to combobox sentinel and back', () => {
     expect(toComboboxValue('')).toBe(RS_SELECT_EMPTY_VALUE)
     expect(toComboboxValue('claude')).toBe('claude')
+    expect(toComboboxValue(0)).toBe('0')
     expect(fromComboboxValue(RS_SELECT_EMPTY_VALUE)).toBe('')
     expect(fromComboboxValue('claude')).toBe('claude')
   })
 
+  it('restoreSelectValue keeps option number type', () => {
+    const numeric = [
+      { label: '静态配置', value: 0 },
+      { label: '服务发现', value: 1 },
+    ]
+    expect(restoreSelectValue('0', numeric)).toBe(0)
+    expect(restoreSelectValue('1', numeric)).toBe(1)
+    expect(restoreSelectValue('custom', numeric)).toBe('custom')
+  })
+
+  it('filterSelectOptions honors filterOption and optionFilterProp', () => {
+    const numeric = [
+      { label: '静态配置', value: 0 },
+      { label: '服务发现', value: 1 },
+    ]
+    const byValue = filterSelectOptions(numeric, '0', contains, true, 'value')
+    expect(byValue).toHaveLength(1)
+    expect(byValue[0]).toMatchObject({ value: 0 })
+
+    const custom = filterSelectOptions(numeric, '发现', contains, (q, opt) =>
+      String(opt.label).includes(q),
+    )
+    expect(custom).toHaveLength(1)
+    expect(custom[0]).toMatchObject({ value: 1 })
+
+    const unfiltered = filterSelectOptions(numeric, 'zzz', contains, false)
+    expect(unfiltered).toHaveLength(2)
+  })
+
+  it('packSelectModel keeps number 0 and labelInValue', () => {
+    const numeric = [
+      { label: '静态配置', value: 0 },
+      { label: '服务发现', value: 1 },
+    ]
+    expect(packSelectModel([0], numeric, false, false)).toBe(0)
+    expect(packSelectModel([0], numeric, false, true)).toEqual({
+      label: '静态配置',
+      value: 0,
+    })
+    expect(packSelectModel([0, 1], numeric, true, true)).toEqual([
+      { label: '静态配置', value: 0 },
+      { label: '服务发现', value: 1 },
+    ])
+    expect(packSelectModel([], numeric, false, true)).toBe('')
+  })
+
+  it('sortSelectOptions sorts flat and grouped lists', () => {
+    const flat = [
+      { label: 'Zulu', value: 'z' },
+      { label: 'Alpha', value: 'a' },
+    ]
+    const sorted = sortSelectOptions(flat, (a, b) => String(a.label).localeCompare(String(b.label)))
+    expect(sorted.map((item) => ('value' in item ? item.value : ''))).toEqual(['a', 'z'])
+
+    const grouped = [
+      {
+        label: '后端',
+        options: [
+          { label: 'Go', value: 'go' },
+          { label: 'Ada', value: 'ada' },
+        ],
+      },
+    ]
+    const groupedSorted = sortSelectOptions(grouped, (a, b) =>
+      String(a.label).localeCompare(String(b.label)),
+    )
+    expect(groupedSorted[0]).toMatchObject({ label: '后端' })
+    if ('options' in groupedSorted[0]) {
+      expect(groupedSorted[0].options.map((opt) => opt.value)).toEqual(['ada', 'go'])
+    }
+  })
+
+  it('splitByTokenSeparators splits on the first matching separator', () => {
+    expect(splitByTokenSeparators('a,b,c', [','])).toEqual(['a', 'b', 'c'])
+    expect(splitByTokenSeparators('ab', [','])).toBeNull()
+    expect(splitByTokenSeparators('a;b', [',', ';'])).toEqual(['a', 'b'])
+  })
+
+  it('normalizeSelectOptions maps fieldNames and keeps number 0', () => {
+    const raw = [
+      { name: '静态配置', id: 0 },
+      {
+        name: '后端',
+        children: [
+          { name: 'Go', id: 'go' },
+          { name: 'Ada', id: 'ada' },
+        ],
+      },
+    ]
+    const normalized = normalizeSelectOptions(raw, {
+      label: 'name',
+      value: 'id',
+      options: 'children',
+    })
+    expect(normalized[0]).toMatchObject({ label: '静态配置', value: 0 })
+    expect(normalized[1]).toMatchObject({ label: '后端' })
+    if ('options' in normalized[1]) {
+      expect(normalized[1].options.map((opt) => opt.value)).toEqual(['go', 'ada'])
+    }
+  })
+
+  it('optionDisplayLabel reads optionLabelProp', () => {
+    const option = { label: 'Claude', value: 'claude', code: 'CL' }
+    expect(optionDisplayLabel(option)).toBe('Claude')
+    expect(optionDisplayLabel(option, 'value')).toBe('claude')
+    expect(optionDisplayLabel(option, 'code')).toBe('CL')
+  })
+
   it('filterSelectOptions filters flat and grouped options', () => {
     const grouped = [
       {

package/src/__tests__/RsSwitch.spec.ts

@@ -41,4 +41,34 @@ describe('RsSwitch', () => {
     await wrapper.find('.rs-switch__root').trigger('click')
     expect(wrapper.emitted('update:modelValue')).toBeUndefined()
   })
+
+  it('writes custom checkedValue / uncheckedValue to v-model', async () => {
+    const Host = defineComponent({
+      components: { RsSwitch },
+      data: () => ({ flag: 'N' }),
+      template: '<RsSwitch v-model="flag" checked-value="Y" unchecked-value="N" />',
+    })
+    const wrapper = mount(Host)
+
+    expect(wrapper.find('.rs-switch--checked').exists()).toBe(false)
+    await wrapper.find('.rs-switch__root').trigger('click')
+    await nextTick()
+    expect((wrapper.vm as { flag: string }).flag).toBe('Y')
+    expect(wrapper.find('.rs-switch--checked').exists()).toBe(true)
+
+    await wrapper.find('.rs-switch__root').trigger('click')
+    await nextTick()
+    expect((wrapper.vm as { flag: string }).flag).toBe('N')
+    expect(wrapper.find('.rs-switch--checked').exists()).toBe(false)
+  })
+
+  it('treats numeric 1 / 0 as checked and unchecked', async () => {
+    const wrapper = mount(RsSwitch, {
+      props: { modelValue: 0, checkedValue: 1, uncheckedValue: 0 },
+    })
+    expect(wrapper.find('.rs-switch--checked').exists()).toBe(false)
+    await wrapper.find('.rs-switch__root').trigger('click')
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([1])
+    expect(wrapper.emitted('change')?.[0]).toEqual([1])
+  })
 })

package/src/__tests__/RsTimePicker.spec.ts

@@ -85,4 +85,13 @@ describe('RsTimePicker', () => {
     })
     expect(wrapper.find('.rs-time-picker__trigger').attributes('disabled')).toBeDefined()
   })
+
+  it('marks invalid on the trigger instead of the field wrapper', () => {
+    const wrapper = mount(RsTimePicker, { props: { modelValue: '', invalid: true } })
+    expect(wrapper.find('.rs-time-picker__trigger').classes()).toContain(
+      'rs-time-picker__trigger--invalid',
+    )
+    expect(wrapper.find('.rs-time-picker__trigger').attributes('aria-invalid')).toBe('true')
+    expect(wrapper.attributes('aria-invalid')).toBeUndefined()
+  })
 })

package/src/__tests__/RsTooltip.spec.ts

@@ -54,6 +54,49 @@ describe('RsTooltip', () => {
     wrapper.unmount()
   })
 
+  it('does not open on non-keyboard focus when ignoreNonKeyboardFocus is on', async () => {
+    const wrapper = mountTooltip(
+      '<button type="button" class="trigger">Hover</button>',
+      { content: 'Focus tip' },
+    )
+    try {
+      const trigger = wrapper.find('.trigger').element as HTMLButtonElement
+      // 模拟 Dialog 关闭回焦：有 focus 但无 :focus-visible（jsdom 对 :focus-visible 不稳定）
+      const matchesSpy = vi
+        .spyOn(trigger, 'matches')
+        .mockImplementation((selectors: string) => !selectors.includes(':focus-visible'))
+      trigger.dispatchEvent(new FocusEvent('focus', { bubbles: true }))
+      await vi.runAllTimersAsync()
+      await flushPromises()
+      expect(document.body.querySelector('.rs-tooltip__content')).toBeNull()
+      matchesSpy.mockRestore()
+    } finally {
+      wrapper.unmount()
+    }
+  })
+
+  it('opens on keyboard-style focus-visible', async () => {
+    const wrapper = mountTooltip(
+      '<button type="button" class="trigger">Hover</button>',
+      { content: 'Keyboard tip' },
+    )
+    try {
+      const trigger = wrapper.find('.trigger').element as HTMLButtonElement
+      const matchesSpy = vi
+        .spyOn(trigger, 'matches')
+        .mockImplementation((selectors: string) => selectors.includes(':focus-visible'))
+      trigger.dispatchEvent(new FocusEvent('focus', { bubbles: true }))
+      await vi.runAllTimersAsync()
+      await flushPromises()
+      expect(document.body.querySelector('.rs-tooltip__content')).not.toBeNull()
+      expect(document.body.textContent).toContain('Keyboard tip')
+      matchesSpy.mockRestore()
+    } finally {
+      wrapper.unmount()
+    }
+  })
+
+
   it('renders custom content slot', async () => {
     const wrapper = mount(
       {

package/src/__tests__/css-token.spec.ts

@@ -0,0 +1,51 @@
+import { afterEach, describe, expect, it } from 'vitest'
+import {
+  parseCssLengthToPx,
+  readCodeFontFamily,
+  readCodeFontSizePx,
+  readCssLengthPx,
+  readCssVar,
+  readTerminalFontFamily,
+  readTerminalFontSizePx,
+  readTerminalFontWeight,
+  readTerminalFontWeightBold,
+} from '../theme/css-token'
+
+describe('css-token', () => {
+  afterEach(() => {
+    document.documentElement.style.cssText = ''
+  })
+
+  it('parses px / rem / unitless lengths', () => {
+    expect(parseCssLengthToPx('12px', 16)).toBe(12)
+    expect(parseCssLengthToPx('0.875rem', 16)).toBe(14)
+    expect(parseCssLengthToPx('1.5em', 16)).toBe(24)
+    expect(parseCssLengthToPx('14', 16)).toBe(14)
+    expect(parseCssLengthToPx('var(--x)', 16)).toBeNull()
+  })
+
+  it('reads and unwraps nested custom properties', () => {
+    const root = document.documentElement
+    root.style.setProperty('--rs-font-size-sm', '0.875rem')
+    root.style.setProperty('--rs-code-font-size', 'var(--rs-font-size-sm)')
+    root.style.setProperty('--rs-font-mono', 'JetBrains Mono, monospace')
+    root.style.setProperty('--rs-code-font-family', 'var(--rs-font-mono)')
+    root.style.setProperty('--rs-font-weight-regular', '400')
+    root.style.setProperty('--rs-terminal-font-weight', 'var(--rs-font-weight-regular)')
+
+    expect(readCssVar('--rs-code-font-size')).toBe('0.875rem')
+    expect(readCssLengthPx('--rs-code-font-size', 99)).toBe(14)
+    expect(readCodeFontSizePx()).toBe(14)
+    expect(readCodeFontFamily()).toBe('JetBrains Mono, monospace')
+    expect(readTerminalFontWeight()).toBe('400')
+  })
+
+  it('falls back when tokens are missing', () => {
+    expect(readCodeFontSizePx()).toBe(14)
+    expect(readTerminalFontSizePx()).toBe(14)
+    expect(readCodeFontFamily()).toContain('monospace')
+    expect(readTerminalFontFamily()).toContain('monospace')
+    expect(readTerminalFontWeight()).toBe('400')
+    expect(readTerminalFontWeightBold()).toBe('500')
+  })
+})

package/src/__tests__/date-picker-utils.spec.ts

@@ -4,8 +4,10 @@ import {
   formatDateTimeDisplay,
   formatDateTimeValue,
   formatDateValue,
+  fromInternalPickerValue,
   parseDateTimeValue,
   parseDateValue,
+  toInternalPickerValue,
 } from '../components/date-picker-utils'
 import { RS_DATE_FORMAT, RS_DATETIME_FORMAT } from '../lib/rs-dayjs'
 
@@ -68,3 +70,50 @@ describe('date-picker-utils (dayjs)', () => {
     expect(formatDateTimeValue('not-a-date')).toBe('not-a-date')
   })
 })
+
+describe('date-picker valueFormat conversion', () => {
+  const datetimeOpts = { valueFormat: 'iso', withTime: true }
+  const dateOpts = { valueFormat: 'iso', withTime: false }
+
+  it('converts internal datetime to local-offset RFC3339', () => {
+    const iso = fromInternalPickerValue('2025-06-16 14:30:00', datetimeOpts)
+    expect(iso).toMatch(/^2025-06-16T14:30:00[+-]\d{2}:\d{2}$/)
+  })
+
+  it('converts internal date to RFC3339 at midnight local offset', () => {
+    const iso = fromInternalPickerValue('2025-06-16', dateOpts)
+    expect(iso).toMatch(/^2025-06-16T00:00:00[+-]\d{2}:\d{2}$/)
+  })
+
+  it('round-trips iso datetime as wall clock', () => {
+    const iso = fromInternalPickerValue('2025-06-16 14:30:00', datetimeOpts)
+    expect(toInternalPickerValue(iso, datetimeOpts)).toBe('2025-06-16 14:30:00')
+    expect(toInternalPickerValue('2026-07-01T14:49:43Z', datetimeOpts)).toBe('2026-07-01 14:49:43')
+    expect(toInternalPickerValue('2026-08-14T14:38:42+08:00', datetimeOpts)).toBe('2026-08-14 14:38:42')
+  })
+
+  it('keeps string format as internal wall clock', () => {
+    expect(fromInternalPickerValue('2025-06-16 14:30:00', { valueFormat: 'string', withTime: true }))
+      .toBe('2025-06-16 14:30:00')
+    expect(toInternalPickerValue('2025-06-16 14:30:00', { valueFormat: 'string', withTime: true }))
+      .toBe('2025-06-16 14:30:00')
+  })
+
+  it('converts timestamp format', () => {
+    const ms = fromInternalPickerValue('2025-06-16 14:30:00', { valueFormat: 'timestamp', withTime: true })
+    expect(typeof ms).toBe('number')
+    expect(toInternalPickerValue(ms, { valueFormat: 'timestamp', withTime: true })).toBe('2025-06-16 14:30:00')
+  })
+
+  it('supports custom dayjs value-format templates', () => {
+    const custom = { valueFormat: 'YYYY-MM-DDTHH:mm:ss', withTime: true }
+    expect(fromInternalPickerValue('2025-06-16 14:30:00', custom)).toBe('2025-06-16T14:30:00')
+    expect(toInternalPickerValue('2025-06-16T14:30:00', custom)).toBe('2025-06-16 14:30:00')
+  })
+
+  it('emits null for empty iso and timestamp', () => {
+    expect(fromInternalPickerValue('', datetimeOpts)).toBeNull()
+    expect(fromInternalPickerValue('', { valueFormat: 'timestamp', withTime: true })).toBeNull()
+    expect(fromInternalPickerValue('', { valueFormat: 'string', withTime: true })).toBe('')
+  })
+})