// ===== showcase/src/examples/components/temporal_inputs.ts ===== import {  RenderDateRangeEdit,  RenderDateTimeRangeEdit,  RenderFormField,  RenderFormPanel,  RenderPageHeader,  RenderStackPanel,  RenderText,  RenderTimeEdit,  RenderTimePicker,  RenderTimeRangeEdit,} from 'ds-ui' export function createTemporalInputsExample(): RenderStackPanel {  const status = new RenderText(    '时间与范围值使用稳定字符串模型；弹窗中的草稿只有确认后才会提交。',    { role: 'secondary' },  )  const form = new RenderFormPanel({    columns: 'auto',    maxColumns: 2,    minColumnWidth: 340,    labelWidth: 116,    columnGap: 18,    rowGap: 16,  })   form.addField(new RenderFormField({    label: '键盘时间',    child: new RenderTimeEdit({      value: '08:30',      precision: 'minute',      minuteStep: 5,      clearable: true,      helperText: '按时、分分段录入，方向键按 5 分钟步进',      onChange: value => { status.text = `TimeEdit：${value || '已清空'}` },    }),  }))  form.addField(new RenderFormField({    label: '候选时间',    child: new RenderTimePicker({      value: '09:30',      precision: 'minute',      minuteStep: 5,      clearable: true,      helperText: '从时、分候选列选择并确认',      onChange: value => { status.text = `TimePicker：${value || '已清空'}` },    }),  }))  form.addField(new RenderFormField({    label: '跨日班次',    child: new RenderTimeRangeEdit({      value: { start: '22:00', end: '06:00' },      precision: 'minute',      minuteStep: 5,      allowOvernight: true,      clearable: true,      helperText: '显式允许结束时刻落在次日',      onChange: value => {        status.text = `TimeRangeEdit：${value.start ?? '-'} ~ ${value.end ?? '-'}`      },    }),  }))  form.addField(new RenderFormField({    label: '住院日期',    child: new RenderDateRangeEdit({      value: { start: '2026-07-01', end: '2026-07-25' },      clearable: true,      helperText: '左右日历可独立切换日、月和年视图',      onChange: value => {        status.text = `DateRangeEdit：${value.start ?? '-'} ~ ${value.end ?? '-'}`      },    }),  }))  form.addField(new RenderFormField({    label: '预约窗口',    child: new RenderDateTimeRangeEdit({      value: {        start: '2026-07-31T08:30',        end: '2026-08-01T17:30',      },      timePrecision: 'minute',      minuteStep: 5,      clearable: true,      helperText: '每侧可独立切换日期和时间页签',      onChange: value => {        status.text = `DateTimeRangeEdit：${value.start ?? '-'} ~ ${value.end ?? '-'}`      },    }),  }), { columnSpan: 2 })   const panel = new RenderStackPanel({    orientation: 'vertical',    spacing: 18,    crossAxisAlignment: 'stretch',  })  panel.addChild(new RenderPageHeader({    title: '时间与日期范围输入',    description: '对比键盘分段输入、候选列选择、跨日时刻以及纯日期和日期时间范围。',  }))  panel.addChild(form)  panel.addChild(status)  panel.padding = 24  return panel}