@g9tm/lynxcontrols 1.4.2 → 1.4.4

package/dist/pickers/date-time-picker.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"pickers/date-time-picker.jsx","sources":["../../src/pickers/date-time-picker.tsx"],"sourcesContent":["import './pickers.css';\nimport {\n  daysInMonth,\n  type G9CalendarSystem,\n  type G9Culture,\n  G9DateTimeDisplayFormat,\n  G9DateTimePickerMode,\n  type G9LocalDate,\n  type G9LocalDateTime,\n  G9StringKey,\n  localDateTimeFromDate,\n} from '@g9tm/lynxcontrols-foundation';\nimport { type ReactNode, useRef, useState } from '@lynx-js/react';\nimport { useG9Press } from '../base/press';\nimport { useControllableState } from '../base/use-controllable-state';\nimport { useG9Culture, useG9Service, useG9Settings, useG9Strings } from '../provider/hooks';\nimport { useG9Sheets } from '../sheet/service';\nimport {\n  asDateTime,\n  clampPickerValue,\n  composePickerValue,\n  dayWheelItems,\n  formatPickerValue,\n  hourWheelItems,\n  minuteWheelItems,\n  monthWheelItems,\n  normalizePickerBounds,\n  pickerParts,\n  resolvePickerCalendar,\n  yearWheelItems,\n  yearWindow,\n} from './date-time';\nimport { PickerSheetHeader, showPickerSheet } from './picker-sheet';\nimport { type G9PickerFieldProps, PickerField, usePickerOpen } from './trigger';\nimport { G9WheelColumn } from './wheel-column';\n\n/** Years the year window grows by at an edge (MAUI `YearWindowStep`). */\nexport const g9YearWindowStep = 25;\n\n/** Props of {@link G9DateTimePicker}. */\nexport interface G9DateTimePickerProps extends G9PickerFieldProps {\n  /** The value, always Gregorian (MAUI `SelectedDateTime`); `null` = none. Controlled with `onValueChange`. */\n  readonly value?: G9LocalDateTime | null;\n  readonly defaultValue?: G9LocalDateTime | null;\n  readonly onValueChange?: (value: G9LocalDateTime | null) => void;\n  /** Default `'date'`. */\n  readonly mode?: G9DateTimePickerMode;\n  /** Default `'shortDate'`. */\n  readonly displayFormat?: G9DateTimeDisplayFormat;\n  /** Text of the `'custom'` format (MAUI `FormattedDisplayText`). */\n  readonly formattedDisplayText?: string | null;\n  readonly minDate?: G9LocalDate | null;\n  readonly maxDate?: G9LocalDate | null;\n  /** Hours 0–23 instead of 12-hour AM/PM. Default false. */\n  readonly twentyFourHourDisplay?: boolean;\n  /**\n   * Default true (MAUI `RestoreOnCancel`): Cancel or a dismissal puts back the value the picker had when it opened if\n   * it changed meanwhile. False leaves the current value.\n   */\n  readonly restoreOnCancel?: boolean;\n  /** The Today / Now chip. Default true. */\n  readonly showTodayButton?: boolean;\n  /** Calendar override; default Persian for `fa`, else Gregorian (follows the language, not the direction). */\n  readonly calendar?: G9CalendarSystem | null;\n  /** Done confirmed a value (MAUI `DateTimeSelected`). */\n  readonly onDateTimeSelected?: (value: G9LocalDateTime) => void;\n}\n\ninterface SheetBodyProps {\n  readonly title: string;\n  readonly initial: G9LocalDateTime;\n  readonly now: () => G9LocalDateTime;\n  readonly mode: G9DateTimePickerMode;\n  readonly calendar: G9CalendarSystem;\n  readonly culture: G9Culture;\n  readonly bounds: { min: G9LocalDateTime | null; max: G9LocalDateTime | null };\n  readonly twentyFourHour: boolean;\n  readonly showToday: boolean;\n  readonly format: (value: G9LocalDateTime) => string;\n  readonly done: (value: G9LocalDateTime) => void;\n  readonly cancel: () => void;\n}\n\n/** The drum sheet body (MAUI `G9DateTimePickerSheet`): header, live preview, Today/Now chip, the wheels. */\nexport function DateTimeSheetBody(props: SheetBodyProps): ReactNode {\n  const strings = useG9Strings();\n  const { calendar, culture, bounds, mode } = props;\n  const [value, setValueState] = useState(() => clampPickerValue(props.initial, bounds, calendar));\n  // The latest value, written synchronously: a wheel that settles and a Done tap (or a second wheel) can arrive before\n  // the re-render binds handlers that close over the new state. Reading the render's `value` there returned the old\n  // one, and a second wheel overwrote the first (seen on the Windows CI agent, Azure builds 539/541).\n  const latest = useRef(value);\n  const setValue = (next: G9LocalDateTime) => {\n    latest.current = next;\n    setValueState(next);\n  };\n  const partsOf = (v: G9LocalDateTime) => ({ ...pickerParts(v, calendar), hour: v.hour, minute: v.minute });\n  const parts = partsOf(value);\n  const minYear = bounds.min ? pickerParts(bounds.min, calendar).year : null;\n  const maxYear = bounds.max ? pickerParts(bounds.max, calendar).year : null;\n  const [years, setYears] = useState(() => yearWindow(parts.year, minYear, maxYear));\n  // A value outside the window (Today, a clamp) rebuilds it around the value.\n  const window_ = parts.year < years.from || parts.year > years.to ? yearWindow(parts.year, minYear, maxYear) : years;\n  const change = (patch: Partial<typeof parts>) =>\n    setValue(composePickerValue({ ...partsOf(latest.current), ...patch }, calendar, bounds));\n  const grow = (edge: 'start' | 'end') =>\n    setYears((w) =>\n      edge === 'end'\n        ? { from: w.from, to: Math.min(maxYear ?? 9999, 9999, w.to + g9YearWindowStep) }\n        : { from: Math.max(minYear ?? 1, 1, w.from - g9YearWindowStep), to: w.to },\n    );\n  const today = useG9Press(\n    () => {\n      const now = props.now();\n      setValue(clampPickerValue(mode === G9DateTimePickerMode.Date ? asDateTime(now) : now, bounds, calendar));\n    },\n    { source: 'G9DateTimePicker', guardMs: 0 },\n  );\n  const showDate = mode !== G9DateTimePickerMode.Time;\n  const showTime = mode !== G9DateTimePickerMode.Date;\n  return (\n    <view className=\"g9-picker-sheet\">\n      <PickerSheetHeader title={props.title} onCancel={props.cancel} onDone={() => props.done(latest.current)} />\n      <text className=\"g9-picker-sheet__preview\" text-maxline=\"1\">\n        {props.format(value)}\n      </text>\n      {props.showToday ? (\n        <view\n          className=\"g9-picker-sheet__today\"\n          accessibility-element={true}\n          accessibility-traits=\"button\"\n          bindtap={today}\n        >\n          <text className=\"g9-picker-sheet__today-text\">\n            {strings.get(mode === G9DateTimePickerMode.Time ? G9StringKey.Now : G9StringKey.Today)}\n          </text>\n        </view>\n      ) : null}\n      <view className={`g9-picker-sheet__wheels g9-dir-${culture.direction}`}>\n        {showDate ? (\n          <G9WheelColumn\n            label={strings.get(G9StringKey.Day)}\n            items={dayWheelItems(daysInMonth(calendar, parts.year, parts.month), culture)}\n            value={parts.day}\n            onValueChange={(day) => change({ day })}\n          />\n        ) : null}\n        {showDate ? (\n          <G9WheelColumn\n            label={strings.get(G9StringKey.Month)}\n            items={monthWheelItems(calendar, culture)}\n            value={parts.month}\n            onValueChange={(month) => change({ month })}\n          />\n        ) : null}\n        {showDate ? (\n          <G9WheelColumn\n            label={strings.get(G9StringKey.Year)}\n            items={yearWheelItems(window_.from, window_.to, culture)}\n            value={parts.year}\n            onValueChange={(year) => change({ year })}\n            onNearEdge={grow}\n          />\n        ) : null}\n        {showTime ? (\n          <G9WheelColumn\n            label={strings.get(G9StringKey.Hour)}\n            items={hourWheelItems(props.twentyFourHour, culture)}\n            value={parts.hour}\n            onValueChange={(hour) => change({ hour })}\n          />\n        ) : null}\n        {showTime ? (\n          <G9WheelColumn\n            label={strings.get(G9StringKey.Minute)}\n            items={minuteWheelItems(culture)}\n            value={parts.minute}\n            onValueChange={(minute) => change({ minute })}\n          />\n        ) : null}\n      </view>\n    </view>\n  );\n}\n\n/**\n * Date, time or date-time in an outlined box (MAUI `G9DateTimePicker`): a tap opens the drum sheet (Cancel, title,\n * Done, live preview, Today/Now, day/month/year and hour/minute wheels). The calendar follows the language (`fa` →\n * Persian) unless `calendar` is set; the value stays Gregorian. Min/max clamp the drums (they roll onto the clamped\n * value); a day past the month's end clamps to its last day. Done writes the value and fires `onDateTimeSelected`;\n * Cancel and dismissals write nothing (see `restoreOnCancel`). Must be inside a `G9Host`.\n */\nexport function G9DateTimePicker(props: G9DateTimePickerProps): ReactNode {\n  const sheets = useG9Sheets();\n  const culture = useG9Culture();\n  const strings = useG9Strings();\n  const glyphs = useG9Settings().glyphs;\n  const clock = useG9Service('clock');\n  const open = usePickerOpen();\n  const [value, setValue] = useControllableState<G9LocalDateTime | null>({\n    value: props.value,\n    defaultValue: props.defaultValue ?? null,\n    onChange: props.onValueChange,\n    name: 'G9DateTimePicker.value',\n  });\n  const latest = useRef({ props, value });\n  latest.current = { props, value };\n  const mode = props.mode ?? G9DateTimePickerMode.Date;\n  const calendar = resolvePickerCalendar(culture, props.calendar);\n  const format = (v: G9LocalDateTime) =>\n    formatPickerValue(v, culture, {\n      mode,\n      displayFormat: props.displayFormat ?? G9DateTimeDisplayFormat.ShortDate,\n      twentyFourHour: props.twentyFourHourDisplay === true,\n      calendar,\n      customText: props.formattedDisplayText ?? null,\n    });\n\n  const onOpen = () =>\n    open(async (isCurrent) => {\n      const previous = latest.current.value;\n      const p = latest.current.props;\n      const now = () => localDateTimeFromDate(new Date(clock.now()));\n      const title = p.label?.trim()\n        ? p.label\n        : strings.get(\n            mode === G9DateTimePickerMode.Time\n              ? G9StringKey.SelectTime\n              : mode === G9DateTimePickerMode.DateTime\n                ? G9StringKey.SelectDateTime\n                : G9StringKey.SelectDate,\n          );\n      const bounds = normalizePickerBounds(p.minDate, p.maxDate, calendar);\n      const result = await showPickerSheet<G9LocalDateTime>(sheets, ({ done, cancel }) => (\n        <DateTimeSheetBody\n          title={title}\n          initial={previous ?? now()}\n          now={now}\n          mode={mode}\n          calendar={calendar}\n          culture={culture}\n          bounds={bounds}\n          twentyFourHour={p.twentyFourHourDisplay === true}\n          showToday={p.showTodayButton !== false}\n          format={format}\n          done={done}\n          cancel={cancel}\n        />\n      ));\n      if (!isCurrent()) return;\n      if (result) {\n        setValue(result);\n        latest.current.props.onDateTimeSelected?.(result);\n      } else if (latest.current.props.restoreOnCancel !== false && latest.current.value !== previous) {\n        setValue(previous);\n      }\n    });\n\n  return (\n    <PickerField\n      field={{ trailingIcon: mode === G9DateTimePickerMode.Time ? glyphs.clock : glyphs.calendar, ...props }}\n      hasValue={value !== null}\n      onOpen={onOpen}\n    >\n      <text className={`g9-picker__text${value ? '' : ' g9-picker__text--placeholder'}`} text-maxline=\"1\">\n        {value ? format(value) : props.label ? '' : (props.placeholder ?? '')}\n      </text>\n    </PickerField>\n  );\n}\n"],"names":["g9YearWindowStep","DateTimeSheetBody","props","strings","useG9Strings","calendar","culture","bounds","mode","value","setValueState","useState","clampPickerValue","latest","useRef","setValue","next","partsOf","v","pickerParts","parts","minYear","maxYear","years","setYears","yearWindow","window_","change","patch","composePickerValue","grow","edge","w","Math","today","useG9Press","now","G9DateTimePickerMode","asDateTime","showDate","showTime","view","PickerSheetHeader","text","G9StringKey","G9WheelColumn","dayWheelItems","daysInMonth","day","monthWheelItems","month","yearWheelItems","year","hourWheelItems","hour","minuteWheelItems","minute","G9DateTimePicker","_props_defaultValue","_props_mode","_props_placeholder","sheets","useG9Sheets","useG9Culture","glyphs","useG9Settings","clock","useG9Service","open","usePickerOpen","useControllableState","resolvePickerCalendar","format","_props_displayFormat","_props_formattedDisplayText","formatPickerValue","G9DateTimeDisplayFormat","onOpen","isCurrent","_p_label","previous","p","localDateTimeFromDate","Date","title","normalizePickerBounds","result","showPickerSheet","done","cancel","_latest_current_props","PickerField"],"mappings":"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"}
+{"version":3,"file":"pickers/date-time-picker.jsx","sources":["../../src/pickers/date-time-picker.tsx"],"sourcesContent":["import './pickers.css';\nimport {\n  daysInMonth,\n  formatColor,\n  type G9CalendarSystem,\n  type G9Culture,\n  G9DateTimeDisplayFormat,\n  G9DateTimePickerMode,\n  type G9LocalDate,\n  type G9LocalDateTime,\n  G9StringKey,\n  localDateTimeFromDate,\n  withAlpha,\n} from '@g9tm/lynxcontrols-foundation';\nimport { type ReactNode, useRef, useState } from '@lynx-js/react';\nimport { g9RowStyle } from '../base/control';\nimport { useG9Press } from '../base/press';\nimport { useControllableState } from '../base/use-controllable-state';\nimport { G9IconSlot } from '../icon/slot';\nimport { useG9Culture, useG9Service, useG9Settings, useG9Strings, useG9Theme } from '../provider/hooks';\nimport { useG9Sheets } from '../sheet/service';\nimport {\n  asDateTime,\n  clampPickerValue,\n  composePickerValue,\n  dayWheelItems,\n  formatPickerValue,\n  hourWheelItems,\n  minuteWheelItems,\n  monthWheelItems,\n  normalizePickerBounds,\n  pickerParts,\n  resolvePickerCalendar,\n  yearWheelItems,\n  yearWindow,\n} from './date-time';\nimport { PickerSheetHeader, showPickerSheet } from './picker-sheet';\nimport { type G9PickerFieldProps, PickerField, usePickerOpen } from './trigger';\nimport { G9WheelColumn } from './wheel-column';\n\n/** Years the year window grows by at an edge (MAUI `YearWindowStep`). */\nexport const g9YearWindowStep = 25;\n\n/** Props of {@link G9DateTimePicker}. */\nexport interface G9DateTimePickerProps extends G9PickerFieldProps {\n  /** The value, always Gregorian (MAUI `SelectedDateTime`); `null` = none. Controlled with `onValueChange`. */\n  readonly value?: G9LocalDateTime | null;\n  readonly defaultValue?: G9LocalDateTime | null;\n  readonly onValueChange?: (value: G9LocalDateTime | null) => void;\n  /** Default `'date'`. */\n  readonly mode?: G9DateTimePickerMode;\n  /** Default `'shortDate'`. */\n  readonly displayFormat?: G9DateTimeDisplayFormat;\n  /** Text of the `'custom'` format (MAUI `FormattedDisplayText`). */\n  readonly formattedDisplayText?: string | null;\n  readonly minDate?: G9LocalDate | null;\n  readonly maxDate?: G9LocalDate | null;\n  /** Hours 0–23 instead of 12-hour AM/PM. Default false. */\n  readonly twentyFourHourDisplay?: boolean;\n  /**\n   * Default true (MAUI `RestoreOnCancel`): Cancel or a dismissal puts back the value the picker had when it opened if\n   * it changed meanwhile. False leaves the current value.\n   */\n  readonly restoreOnCancel?: boolean;\n  /** The Today / Now chip. Default true. */\n  readonly showTodayButton?: boolean;\n  /** Calendar override; default Persian for `fa`, else Gregorian (follows the language, not the direction). */\n  readonly calendar?: G9CalendarSystem | null;\n  /** Done confirmed a value (MAUI `DateTimeSelected`). */\n  readonly onDateTimeSelected?: (value: G9LocalDateTime) => void;\n}\n\ninterface SheetBodyProps {\n  readonly title: string;\n  readonly initial: G9LocalDateTime;\n  readonly now: () => G9LocalDateTime;\n  readonly mode: G9DateTimePickerMode;\n  readonly calendar: G9CalendarSystem;\n  readonly culture: G9Culture;\n  readonly bounds: { min: G9LocalDateTime | null; max: G9LocalDateTime | null };\n  readonly twentyFourHour: boolean;\n  readonly showToday: boolean;\n  readonly format: (value: G9LocalDateTime) => string;\n  readonly done: (value: G9LocalDateTime) => void;\n  readonly cancel: () => void;\n}\n\n/** The drum sheet body (MAUI `G9DateTimePickerSheet`): header, live preview, Today/Now chip, the wheels. */\nexport function DateTimeSheetBody(props: SheetBodyProps): ReactNode {\n  const strings = useG9Strings();\n  const palette = useG9Theme().palette;\n  const glyphs = useG9Settings().glyphs;\n  const { calendar, culture, bounds, mode } = props;\n  const [value, setValueState] = useState(() => clampPickerValue(props.initial, bounds, calendar));\n  // The latest value, written synchronously: a wheel that settles and a Done tap (or a second wheel) can arrive before\n  // the re-render binds handlers that close over the new state. Reading the render's `value` there returned the old\n  // one, and a second wheel overwrote the first (seen on the Windows CI agent, Azure builds 539/541).\n  const latest = useRef(value);\n  const setValue = (next: G9LocalDateTime) => {\n    latest.current = next;\n    setValueState(next);\n  };\n  const partsOf = (v: G9LocalDateTime) => ({ ...pickerParts(v, calendar), hour: v.hour, minute: v.minute });\n  const parts = partsOf(value);\n  const minYear = bounds.min ? pickerParts(bounds.min, calendar).year : null;\n  const maxYear = bounds.max ? pickerParts(bounds.max, calendar).year : null;\n  const [years, setYears] = useState(() => yearWindow(parts.year, minYear, maxYear));\n  // A value outside the window (Today, a clamp) rebuilds it around the value.\n  const window_ = parts.year < years.from || parts.year > years.to ? yearWindow(parts.year, minYear, maxYear) : years;\n  const change = (patch: Partial<typeof parts>) =>\n    setValue(composePickerValue({ ...partsOf(latest.current), ...patch }, calendar, bounds));\n  const grow = (edge: 'start' | 'end') =>\n    setYears((w) =>\n      edge === 'end'\n        ? { from: w.from, to: Math.min(maxYear ?? 9999, 9999, w.to + g9YearWindowStep) }\n        : { from: Math.max(minYear ?? 1, 1, w.from - g9YearWindowStep), to: w.to },\n    );\n  const today = useG9Press(\n    () => {\n      const now = props.now();\n      setValue(clampPickerValue(mode === G9DateTimePickerMode.Date ? asDateTime(now) : now, bounds, calendar));\n    },\n    { source: 'G9DateTimePicker', guardMs: 0 },\n  );\n  const showDate = mode !== G9DateTimePickerMode.Time;\n  const showTime = mode !== G9DateTimePickerMode.Date;\n  return (\n    <view className=\"g9-picker-sheet\">\n      <PickerSheetHeader title={props.title} onCancel={props.cancel} onDone={() => props.done(latest.current)} />\n      <text className=\"g9-picker-sheet__preview\" text-maxline=\"1\">\n        {props.format(value)}\n      </text>\n      {props.showToday ? (\n        // MAUI CreateTodayChip: a 14 dp calendar and 12 bold Primary text, 6 apart, in a pill of Primary 8 % with a\n        // Primary 30 % stroke.\n        <view\n          className=\"g9-picker-sheet__today\"\n          accessibility-element={true}\n          accessibility-traits=\"button\"\n          bindtap={today}\n          style={{\n            ...g9RowStyle(culture.direction),\n            backgroundColor: formatColor(withAlpha(palette.Primary, 0.08)),\n            borderColor: formatColor(withAlpha(palette.Primary, 0.3)),\n          }}\n        >\n          <G9IconSlot icon={glyphs.calendarToday} size={14} color={palette.Primary} />\n          <text className=\"g9-picker-sheet__today-text\">\n            {strings.get(mode === G9DateTimePickerMode.Time ? G9StringKey.Now : G9StringKey.Today)}\n          </text>\n        </view>\n      ) : null}\n      <view className={`g9-picker-sheet__wheels g9-dir-${culture.direction}`}>\n        {showDate ? (\n          <G9WheelColumn\n            label={strings.get(G9StringKey.Day)}\n            items={dayWheelItems(daysInMonth(calendar, parts.year, parts.month), culture)}\n            value={parts.day}\n            onValueChange={(day) => change({ day })}\n          />\n        ) : null}\n        {showDate ? (\n          <G9WheelColumn\n            label={strings.get(G9StringKey.Month)}\n            weight={1.7}\n            items={monthWheelItems(calendar, culture)}\n            value={parts.month}\n            onValueChange={(month) => change({ month })}\n          />\n        ) : null}\n        {showDate ? (\n          <G9WheelColumn\n            label={strings.get(G9StringKey.Year)}\n            items={yearWheelItems(window_.from, window_.to, culture)}\n            value={parts.year}\n            onValueChange={(year) => change({ year })}\n            onNearEdge={grow}\n          />\n        ) : null}\n        {showTime ? (\n          <G9WheelColumn\n            label={strings.get(G9StringKey.Hour)}\n            items={hourWheelItems(props.twentyFourHour, culture)}\n            value={parts.hour}\n            onValueChange={(hour) => change({ hour })}\n          />\n        ) : null}\n        {showTime ? (\n          <G9WheelColumn\n            label={strings.get(G9StringKey.Minute)}\n            items={minuteWheelItems(culture)}\n            value={parts.minute}\n            onValueChange={(minute) => change({ minute })}\n          />\n        ) : null}\n      </view>\n    </view>\n  );\n}\n\n/**\n * Date, time or date-time in an outlined box (MAUI `G9DateTimePicker`): a tap opens the drum sheet (Cancel, title,\n * Done, live preview, Today/Now, day/month/year and hour/minute wheels). The calendar follows the language (`fa` →\n * Persian) unless `calendar` is set; the value stays Gregorian. Min/max clamp the drums (they roll onto the clamped\n * value); a day past the month's end clamps to its last day. Done writes the value and fires `onDateTimeSelected`;\n * Cancel and dismissals write nothing (see `restoreOnCancel`). Must be inside a `G9Host`.\n */\nexport function G9DateTimePicker(props: G9DateTimePickerProps): ReactNode {\n  const sheets = useG9Sheets();\n  const culture = useG9Culture();\n  const strings = useG9Strings();\n  const glyphs = useG9Settings().glyphs;\n  const clock = useG9Service('clock');\n  const open = usePickerOpen();\n  const [value, setValue] = useControllableState<G9LocalDateTime | null>({\n    value: props.value,\n    defaultValue: props.defaultValue ?? null,\n    onChange: props.onValueChange,\n    name: 'G9DateTimePicker.value',\n  });\n  const latest = useRef({ props, value });\n  latest.current = { props, value };\n  const mode = props.mode ?? G9DateTimePickerMode.Date;\n  const calendar = resolvePickerCalendar(culture, props.calendar);\n  const format = (v: G9LocalDateTime) =>\n    formatPickerValue(v, culture, {\n      mode,\n      displayFormat: props.displayFormat ?? G9DateTimeDisplayFormat.ShortDate,\n      twentyFourHour: props.twentyFourHourDisplay === true,\n      calendar,\n      customText: props.formattedDisplayText ?? null,\n    });\n\n  const onOpen = () =>\n    open(async (isCurrent) => {\n      const previous = latest.current.value;\n      const p = latest.current.props;\n      const now = () => localDateTimeFromDate(new Date(clock.now()));\n      const title = p.label?.trim()\n        ? p.label\n        : strings.get(\n            mode === G9DateTimePickerMode.Time\n              ? G9StringKey.SelectTime\n              : mode === G9DateTimePickerMode.DateTime\n                ? G9StringKey.SelectDateTime\n                : G9StringKey.SelectDate,\n          );\n      const bounds = normalizePickerBounds(p.minDate, p.maxDate, calendar);\n      const result = await showPickerSheet<G9LocalDateTime>(sheets, ({ done, cancel }) => (\n        <DateTimeSheetBody\n          title={title}\n          initial={previous ?? now()}\n          now={now}\n          mode={mode}\n          calendar={calendar}\n          culture={culture}\n          bounds={bounds}\n          twentyFourHour={p.twentyFourHourDisplay === true}\n          showToday={p.showTodayButton !== false}\n          format={format}\n          done={done}\n          cancel={cancel}\n        />\n      ));\n      if (!isCurrent()) return;\n      if (result) {\n        setValue(result);\n        latest.current.props.onDateTimeSelected?.(result);\n      } else if (latest.current.props.restoreOnCancel !== false && latest.current.value !== previous) {\n        setValue(previous);\n      }\n    });\n\n  return (\n    <PickerField\n      field={{ trailingIcon: mode === G9DateTimePickerMode.Time ? glyphs.clock : glyphs.calendar, ...props }}\n      hasValue={value !== null}\n      onOpen={onOpen}\n    >\n      <text className={`g9-picker__text${value ? '' : ' g9-picker__text--placeholder'}`} text-maxline=\"1\">\n        {value ? format(value) : props.label ? '' : (props.placeholder ?? '')}\n      </text>\n    </PickerField>\n  );\n}\n"],"names":["g9YearWindowStep","DateTimeSheetBody","props","strings","useG9Strings","palette","useG9Theme","glyphs","useG9Settings","calendar","culture","bounds","mode","value","setValueState","useState","clampPickerValue","latest","useRef","setValue","next","partsOf","v","pickerParts","parts","minYear","maxYear","years","setYears","yearWindow","window_","change","patch","composePickerValue","grow","edge","w","Math","today","useG9Press","now","G9DateTimePickerMode","asDateTime","showDate","showTime","view","PickerSheetHeader","text","g9RowStyle","formatColor","withAlpha","G9IconSlot","G9StringKey","G9WheelColumn","dayWheelItems","daysInMonth","day","monthWheelItems","month","yearWheelItems","year","hourWheelItems","hour","minuteWheelItems","minute","G9DateTimePicker","_props_defaultValue","_props_mode","_props_placeholder","sheets","useG9Sheets","useG9Culture","clock","useG9Service","open","usePickerOpen","useControllableState","resolvePickerCalendar","format","_props_displayFormat","_props_formattedDisplayText","formatPickerValue","G9DateTimeDisplayFormat","onOpen","isCurrent","_p_label","previous","p","localDateTimeFromDate","Date","title","normalizePickerBounds","result","showPickerSheet","done","cancel","_latest_current_props","PickerField"],"mappings":"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"}

package/dist/pickers/picker-sheet.d.ts

@@ -12,7 +12,11 @@ export interface G9PickerSheetBodyProps<T> {
  * the open motion and revealed as one settled unit (`fadeDeferredContentIn`, MAUI's crossfade).
  */
 export declare function showPickerSheet<T>(sheets: G9SheetService, body: (props: G9PickerSheetBodyProps<T>) => ReactNode): Promise<T | null>;
-/** The drum sheet header (MAUI): Cancel, the title, Done. */
+/**
+ * The drum sheet header (MAUI `G9DateTimePickerSheet` / `G9TimeSpanPickerSheet.CreateHeader`): a Grid "Auto,*,Auto" of
+ * Padding (16, 10) — Cancel as a small Text-variant G9Button (Primary text in an Outline pill), the title 15 bold
+ * TextPrimary, Done as a small Primary G9Button.
+ */
 export declare function PickerSheetHeader(props: {
     readonly title: string;
     readonly onCancel: () => void;

package/dist/pickers/picker-sheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"picker-sheet.d.ts","sourceRoot":"","sources":["../../src/pickers/picker-sheet.tsx"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAC;AAEvB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAMhD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEvD,wFAAwF;AACxF,MAAM,WAAW,sBAAsB,CAAC,CAAC;IACvC,QAAQ,CAAC,IAAI,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,MAAM,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED;;;;GAIG;AACH,wBAAsB,eAAe,CAAC,CAAC,EACrC,MAAM,EAAE,cAAc,EACtB,IAAI,EAAE,CAAC,KAAK,EAAE,sBAAsB,CAAC,CAAC,CAAC,KAAK,SAAS,GACpD,OAAO,CAAC,CAAC,GAAG,IAAI,CAAC,CAqBnB;AAED,6DAA6D;AAC7D,wBAAgB,iBAAiB,CAAC,KAAK,EAAE;IACvC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAC;IAC9B,QAAQ,CAAC,MAAM,EAAE,MAAM,IAAI,CAAC;CAC7B,GAAG,SAAS,CA8BZ"}
+{"version":3,"file":"picker-sheet.d.ts","sourceRoot":"","sources":["../../src/pickers/picker-sheet.tsx"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAC;AAEvB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAMhD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEvD,wFAAwF;AACxF,MAAM,WAAW,sBAAsB,CAAC,CAAC;IACvC,QAAQ,CAAC,IAAI,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,MAAM,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED;;;;GAIG;AACH,wBAAsB,eAAe,CAAC,CAAC,EACrC,MAAM,EAAE,cAAc,EACtB,IAAI,EAAE,CAAC,KAAK,EAAE,sBAAsB,CAAC,CAAC,CAAC,KAAK,SAAS,GACpD,OAAO,CAAC,CAAC,GAAG,IAAI,CAAC,CAqBnB;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE;IACvC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAC;IAC9B,QAAQ,CAAC,MAAM,EAAE,MAAM,IAAI,CAAC;CAC7B,GAAG,SAAS,CAwBZ"}

package/dist/pickers/picker-sheet.jsx

@@ -1,7 +1,7 @@
 import "./pickers.css";
 import { G9StringKey } from "@g9tm/lynxcontrols-foundation";
 import { g9RowStyle } from "../base/control.jsx";
-import { useG9Press } from "../base/press.jsx";
+import { G9Button } from "../button/button.jsx";
 import { useG9Direction, useG9Strings } from "../provider/hooks.jsx";
 import { useG9SheetContext } from "../sheet/frame.jsx";
 import { fitToContentSheetOptions } from "../sheet/options.jsx";
@@ -34,26 +34,12 @@ async function showPickerSheet(sheets, body) {
 function PickerSheetHeader(props) {
     const strings = useG9Strings();
     const direction = useG9Direction();
-    const cancel = useG9Press(props.onCancel, {
-        source: 'G9PickerSheet',
-        guardMs: 0
-    });
-    const done = useG9Press(props.onDone, {
-        source: 'G9PickerSheet',
-        guardMs: 0
-    });
     return <view className="g9-picker-sheet__header" style={g9RowStyle(direction)}>
-      <view className="g9-picker-sheet__action g9-picker-sheet__cancel" accessibility-element={true} accessibility-traits="button" bindtap={cancel}>
-        <text className="g9-picker-sheet__action-text">{strings.get(G9StringKey.Cancel)}</text>
-      </view>
+      <G9Button className="g9-picker-sheet__cancel" text={strings.get(G9StringKey.Cancel)} variant="text" size="small" onPress={props.onCancel}/>
       <text className="g9-picker-sheet__title" text-maxline="1">
         {props.title}
       </text>
-      <view className="g9-picker-sheet__action g9-picker-sheet__done" accessibility-element={true} accessibility-traits="button" bindtap={done}>
-        <text className="g9-picker-sheet__action-text g9-picker-sheet__action-text--done">
-          {strings.get(G9StringKey.Done)}
-        </text>
-      </view>
+      <G9Button className="g9-picker-sheet__done" text={strings.get(G9StringKey.Done)} variant="primary" size="small" onPress={props.onDone}/>
     </view>;
 }
 export { PickerSheetHeader, showPickerSheet };

package/dist/pickers/picker-sheet.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"pickers/picker-sheet.jsx","sources":["../../src/pickers/picker-sheet.tsx"],"sourcesContent":["import './pickers.css';\nimport { G9StringKey } from '@g9tm/lynxcontrols-foundation';\nimport type { ReactNode } from '@lynx-js/react';\nimport { g9RowStyle } from '../base/control';\nimport { useG9Press } from '../base/press';\nimport { useG9Direction, useG9Strings } from '../provider/hooks';\nimport { useG9SheetContext } from '../sheet/frame';\nimport { fitToContentSheetOptions } from '../sheet/options';\nimport type { G9SheetService } from '../sheet/service';\n\n/** Props a drum sheet body receives: finish with a value (Done) or without (Cancel). */\nexport interface G9PickerSheetBodyProps<T> {\n  readonly done: (value: T) => void;\n  readonly cancel: () => void;\n}\n\n/**\n * Opens a fit-to-content drum sheet (MAUI `G9DateTimePickerSheet.ShowAsync` / `G9TimeSpanPickerSheet.ShowAsync`) and\n * resolves the value Done returned, or `null` for Cancel, any dismissal, or a throttled open. The body is built after\n * the open motion and revealed as one settled unit (`fadeDeferredContentIn`, MAUI's crossfade).\n */\nexport async function showPickerSheet<T>(\n  sheets: G9SheetService,\n  body: (props: G9PickerSheetBodyProps<T>) => ReactNode,\n): Promise<T | null> {\n  let result: T | null = null;\n  let finished = false;\n  const Body = () => {\n    const handle = useG9SheetContext()?.handle;\n    const finish = (value: T | null) => {\n      if (finished) return;\n      finished = true;\n      result = value;\n      handle?.close();\n    };\n    return body({ done: (v) => finish(v), cancel: () => finish(null) });\n  };\n  const handle = sheets.show(() => <Body />, {\n    ...fitToContentSheetOptions(),\n    fadeDeferredContentIn: true,\n    loadingSkeleton: 'none',\n  });\n  if (!handle) return null;\n  await handle.result;\n  return result;\n}\n\n/** The drum sheet header (MAUI): Cancel, the title, Done. */\nexport function PickerSheetHeader(props: {\n  readonly title: string;\n  readonly onCancel: () => void;\n  readonly onDone: () => void;\n}): ReactNode {\n  const strings = useG9Strings();\n  const direction = useG9Direction();\n  const cancel = useG9Press(props.onCancel, { source: 'G9PickerSheet', guardMs: 0 });\n  const done = useG9Press(props.onDone, { source: 'G9PickerSheet', guardMs: 0 });\n  return (\n    <view className=\"g9-picker-sheet__header\" style={g9RowStyle(direction)}>\n      <view\n        className=\"g9-picker-sheet__action g9-picker-sheet__cancel\"\n        accessibility-element={true}\n        accessibility-traits=\"button\"\n        bindtap={cancel}\n      >\n        <text className=\"g9-picker-sheet__action-text\">{strings.get(G9StringKey.Cancel)}</text>\n      </view>\n      <text className=\"g9-picker-sheet__title\" text-maxline=\"1\">\n        {props.title}\n      </text>\n      <view\n        className=\"g9-picker-sheet__action g9-picker-sheet__done\"\n        accessibility-element={true}\n        accessibility-traits=\"button\"\n        bindtap={done}\n      >\n        <text className=\"g9-picker-sheet__action-text g9-picker-sheet__action-text--done\">\n          {strings.get(G9StringKey.Done)}\n        </text>\n      </view>\n    </view>\n  );\n}\n"],"names":["showPickerSheet","sheets","body","result","finished","Body","_useG9SheetContext","handle","finish","value","v","fitToContentSheetOptions","PickerSheetHeader","props","strings","useG9Strings","direction","useG9Direction","cancel","useG9Press","done","view","g9RowStyle","text","G9StringKey"],"mappings":";;;;;;;AAqBO,eAAeA,gBACpBC,MAAsB,EACtBC,IAAqD;IAErD,IAAIC,SAAmB;IACvB,IAAIC,WAAW;IACf,MAAMC,OAAO;YACIC;QAAf,MAAMC,SAAS,QAAAD,CAAAA,qBAAAA,mBAAkB,IAAlBA,KAAAA,IAAAA,mBAAqB,MAAM;QAC1C,MAAME,SAAS,CAACC;YACd,IAAIL,UAAU;YACdA,WAAW;YACXD,SAASM;YACTF,QAAAA,UAAAA,OAAQ,KAAK;QACf;QACA,OAAOL,KAAK;YAAE,MAAM,CAACQ,IAAMF,OAAOE;YAAI,QAAQ,IAAMF,OAAO;QAAM;IACnE;IACA,MAAMD,SAASN,OAAO,IAAI,CAAC,KAAOI,QAAS;QACzC,GAAGM,0BAA0B;QAC7B,uBAAuB;QACvB,iBAAiB;IACnB;IACA,IAAI,CAACJ,QAAQ,OAAO;IACpB,MAAMA,OAAO,MAAM;IACnB,OAAOJ;AACT;AAGO,SAASS,kBAAkBC,KAIjC;IACC,MAAMC,UAAUC;IAChB,MAAMC,YAAYC;IAClB,MAAMC,SAASC,WAAWN,MAAM,QAAQ,EAAE;QAAE,QAAQ;QAAiB,SAAS;IAAE;IAChF,MAAMO,OAAOD,WAAWN,MAAM,MAAM,EAAE;QAAE,QAAQ;QAAiB,SAAS;IAAE;IAC5E,QACGQ,KAAK,UAAU,0BAA0B,OAAOC,WAAWN,YAAY;MACtE,CAACK,KACC,UAAU,kDACV,uBAAuB,MACvB,qBAAqB,SACrB,SAASH,QACV;QACC,CAACK,KAAK,UAAU,gCAAgCT,QAAQ,GAAG,CAACU,YAAY,MAAM,IAAID,KAAK;MACzF,EAAEF,KAAK;MACP,CAACE,KAAK,UAAU,yBAAyB,aAAa,IAAI;QACxD,CAACV,MAAM,KAAK,CAAC;MACf,EAAEU,KAAK;MACP,CAACF,KACC,UAAU,gDACV,uBAAuB,MACvB,qBAAqB,SACrB,SAASD,MACV;QACC,CAACG,KAAK,UAAU,kEAAkE;UAChF,CAACT,QAAQ,GAAG,CAACU,YAAY,IAAI,EAAE;QACjC,EAAED,KAAK;MACT,EAAEF,KAAK;IACT,EAAEA;AAEN"}
+{"version":3,"file":"pickers/picker-sheet.jsx","sources":["../../src/pickers/picker-sheet.tsx"],"sourcesContent":["import './pickers.css';\nimport { G9StringKey } from '@g9tm/lynxcontrols-foundation';\nimport type { ReactNode } from '@lynx-js/react';\nimport { g9RowStyle } from '../base/control';\nimport { G9Button } from '../button/button';\nimport { useG9Direction, useG9Strings } from '../provider/hooks';\nimport { useG9SheetContext } from '../sheet/frame';\nimport { fitToContentSheetOptions } from '../sheet/options';\nimport type { G9SheetService } from '../sheet/service';\n\n/** Props a drum sheet body receives: finish with a value (Done) or without (Cancel). */\nexport interface G9PickerSheetBodyProps<T> {\n  readonly done: (value: T) => void;\n  readonly cancel: () => void;\n}\n\n/**\n * Opens a fit-to-content drum sheet (MAUI `G9DateTimePickerSheet.ShowAsync` / `G9TimeSpanPickerSheet.ShowAsync`) and\n * resolves the value Done returned, or `null` for Cancel, any dismissal, or a throttled open. The body is built after\n * the open motion and revealed as one settled unit (`fadeDeferredContentIn`, MAUI's crossfade).\n */\nexport async function showPickerSheet<T>(\n  sheets: G9SheetService,\n  body: (props: G9PickerSheetBodyProps<T>) => ReactNode,\n): Promise<T | null> {\n  let result: T | null = null;\n  let finished = false;\n  const Body = () => {\n    const handle = useG9SheetContext()?.handle;\n    const finish = (value: T | null) => {\n      if (finished) return;\n      finished = true;\n      result = value;\n      handle?.close();\n    };\n    return body({ done: (v) => finish(v), cancel: () => finish(null) });\n  };\n  const handle = sheets.show(() => <Body />, {\n    ...fitToContentSheetOptions(),\n    fadeDeferredContentIn: true,\n    loadingSkeleton: 'none',\n  });\n  if (!handle) return null;\n  await handle.result;\n  return result;\n}\n\n/**\n * The drum sheet header (MAUI `G9DateTimePickerSheet` / `G9TimeSpanPickerSheet.CreateHeader`): a Grid \"Auto,*,Auto\" of\n * Padding (16, 10) — Cancel as a small Text-variant G9Button (Primary text in an Outline pill), the title 15 bold\n * TextPrimary, Done as a small Primary G9Button.\n */\nexport function PickerSheetHeader(props: {\n  readonly title: string;\n  readonly onCancel: () => void;\n  readonly onDone: () => void;\n}): ReactNode {\n  const strings = useG9Strings();\n  const direction = useG9Direction();\n  return (\n    <view className=\"g9-picker-sheet__header\" style={g9RowStyle(direction)}>\n      <G9Button\n        className=\"g9-picker-sheet__cancel\"\n        text={strings.get(G9StringKey.Cancel)}\n        variant=\"text\"\n        size=\"small\"\n        onPress={props.onCancel}\n      />\n      <text className=\"g9-picker-sheet__title\" text-maxline=\"1\">\n        {props.title}\n      </text>\n      <G9Button\n        className=\"g9-picker-sheet__done\"\n        text={strings.get(G9StringKey.Done)}\n        variant=\"primary\"\n        size=\"small\"\n        onPress={props.onDone}\n      />\n    </view>\n  );\n}\n"],"names":["showPickerSheet","sheets","body","result","finished","Body","_useG9SheetContext","handle","finish","value","v","fitToContentSheetOptions","PickerSheetHeader","props","strings","useG9Strings","direction","useG9Direction","view","g9RowStyle","G9Button","G9StringKey","text"],"mappings":";;;;;;;AAqBO,eAAeA,gBACpBC,MAAsB,EACtBC,IAAqD;IAErD,IAAIC,SAAmB;IACvB,IAAIC,WAAW;IACf,MAAMC,OAAO;YACIC;QAAf,MAAMC,SAAS,QAAAD,CAAAA,qBAAAA,mBAAkB,IAAlBA,KAAAA,IAAAA,mBAAqB,MAAM;QAC1C,MAAME,SAAS,CAACC;YACd,IAAIL,UAAU;YACdA,WAAW;YACXD,SAASM;YACTF,QAAAA,UAAAA,OAAQ,KAAK;QACf;QACA,OAAOL,KAAK;YAAE,MAAM,CAACQ,IAAMF,OAAOE;YAAI,QAAQ,IAAMF,OAAO;QAAM;IACnE;IACA,MAAMD,SAASN,OAAO,IAAI,CAAC,KAAOI,QAAS;QACzC,GAAGM,0BAA0B;QAC7B,uBAAuB;QACvB,iBAAiB;IACnB;IACA,IAAI,CAACJ,QAAQ,OAAO;IACpB,MAAMA,OAAO,MAAM;IACnB,OAAOJ;AACT;AAOO,SAASS,kBAAkBC,KAIjC;IACC,MAAMC,UAAUC;IAChB,MAAMC,YAAYC;IAClB,QACGC,KAAK,UAAU,0BAA0B,OAAOC,WAAWH,YAAY;MACtE,CAACI,SACC,UAAU,0BACV,MAAMN,QAAQ,GAAG,CAACO,YAAY,MAAM,GACpC,QAAQ,OACR,KAAK,QACL,SAASR,MAAM,QAAQ,GACvB;MACF,CAACS,KAAK,UAAU,yBAAyB,aAAa,IAAI;QACxD,CAACT,MAAM,KAAK,CAAC;MACf,EAAES,KAAK;MACP,CAACF,SACC,UAAU,wBACV,MAAMN,QAAQ,GAAG,CAACO,YAAY,IAAI,GAClC,QAAQ,UACR,KAAK,QACL,SAASR,MAAM,MAAM,GACrB;IACJ,EAAEK;AAEN"}

package/dist/pickers/pickers.css

@@ -100,61 +100,42 @@
 .g9-picker-sheet__header {
   flex-direction: row;
   align-items: center;
-  height: 52px;
-  padding-left: 8px;
-  padding-right: 8px;
+  padding: 10px 16px;
   display: flex;
 }
 
-.g9-picker-sheet__action {
-  justify-content: center;
-  align-items: center;
-  min-width: 64px;
-  height: 40px;
-  display: flex;
-}
-
-.g9-picker-sheet__action-text {
-  color: var(--g9-text-secondary);
-  font-size: 15px;
-}
-
-.g9-picker-sheet__action-text--done {
-  color: var(--g9-primary);
-  font-weight: 700;
-}
-
 .g9-picker-sheet__title {
   text-align: center;
-  color: var(--g9-on-surface);
+  color: var(--g9-text-primary);
   flex: 1;
-  font-size: 16.2px;
+  font-size: 15px;
   font-weight: 700;
 }
 
 .g9-picker-sheet__preview {
   text-align: center;
-  color: var(--g9-text-secondary);
-  margin-bottom: 8px;
-  font-size: 14px;
+  color: var(--g9-primary);
+  padding: 4px 16px 8px;
+  font-size: 13px;
+  font-weight: 700;
 }
 
 .g9-picker-sheet__today {
-  background-color: var(--g9-primary-container);
-  border-radius: 15px;
+  border-style: solid;
+  border-width: 1px;
+  border-radius: 16px;
   justify-content: center;
   align-self: center;
   align-items: center;
-  height: 30px;
-  margin-bottom: 8px;
-  padding-left: 14px;
-  padding-right: 14px;
+  column-gap: 6px;
+  margin: 2px 0 6px;
+  padding: 6px 12px;
   display: flex;
 }
 
 .g9-picker-sheet__today-text {
-  color: var(--g9-on-primary-container);
-  font-size: 13px;
+  color: var(--g9-primary);
+  font-size: 12px;
   font-weight: 700;
 }
 
@@ -180,7 +161,8 @@
   text-align: center;
   color: var(--g9-text-tertiary);
   margin-bottom: 4px;
-  font-size: 12px;
+  font-size: 10px;
+  font-weight: 700;
 }
 
 .g9-wheel__viewport {
@@ -190,13 +172,19 @@
 
 .g9-wheel__band {
   border-style: solid;
-  border-width: 1.5px;
-  border-color: var(--g9-primary);
-  background-color: var(--g9-primary-container);
-  border-radius: 10px;
+  border-width: 1.2px;
+  border-radius: 12px;
+  position: absolute;
+  left: 8px;
+  right: 8px;
+}
+
+.g9-wheel__fade {
   position: absolute;
-  left: 4px;
-  right: 4px;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
 }
 
 .g9-wheel__row {
@@ -206,12 +194,13 @@
 }
 
 .g9-wheel__text {
-  color: var(--g9-text-secondary);
+  color: var(--g9-text-tertiary);
   font-size: 16px;
 }
 
 .g9-wheel__row--selected .g9-wheel__text {
-  color: var(--g9-primary);
+  color: var(--g9-text-primary);
+  font-size: 17px;
   font-weight: 700;
 }
 

package/dist/pickers/pickers.css.map

@@ -1 +1 @@
-{"version":3,"sources":["webpack://./src/pickers/pickers.css"],"names":[],"mappings":"AAAA;EACE,mBAAmB;EACnB,mBAAmB;EACnB,YAAY;EACZ,aAAa;AACf;;AAEA;EACE,6BAA6B;EAC7B,cAAc;EACd,eAAe;AACjB;;AAEA;EACE,8BAA8B;AAChC;;AAGA;EAAE,iBAAiB;AACnB;;AAGA;EAAE,gBAAgB;EAChB,eAAe;AACjB;;AAGA;EAAE,iBAAiB;EACjB,aAAa;AACf;;AAGA;EAAE,gBAAgB;EAChB,eAAe;AACjB;;AAGA;EAAE,iBAAiB;AACnB;;AAGA;EAAE,gBAAgB;EAChB,eAAe;AACjB;;AAGA;EAAE,mBAAmB;EACnB,mBAAmB;EACnB,YAAY;EACZ,aAAa;AACf;;AAGA;EAAE,mBAAmB;EACnB,mBAAmB;EACnB,aAAa;AACf;;AAGA;EAAE,mCAAmC;EACnC,kBAAkB;EAClB,mBAAmB;EACnB,mBAAmB;EACnB,YAAY;EACZ,iBAAiB;EACjB,iBAAiB;EACjB,kBAAkB;EAClB,aAAa;AACf;;AAGA;EAAE,gBAAgB;EAChB,eAAe;AACjB;;AAGA;EAAE,qCAAqC;EACrC,mBAAmB;EACnB,iBAAiB;EACjB,uCAAuC;AACzC;;AAGA;EAAE,2BAA2B;EAC3B,eAAe;EACf,gBAAgB;AAClB;;AAGA;EAAE,+BAA+B;AACjC;;AAGA;EAAE,mCAAmC;EACnC,sBAAsB;EACtB,oBAAoB;EACpB,aAAa;AACf;;AAGA;EAAE,mBAAmB;EACnB,mBAAmB;EACnB,YAAY;EACZ,iBAAiB;EACjB,kBAAkB;EAClB,aAAa;AACf;;AAGA;EAAE,uBAAuB;EACvB,mBAAmB;EACnB,eAAe;EACf,YAAY;EACZ,aAAa;AACf;;AAGA;EAAE,+BAA+B;EAC/B,eAAe;AACjB;;AAGA;EAAE,wBAAwB;EACxB,gBAAgB;AAClB;;AAGA;EAAE,kBAAkB;EAClB,2BAA2B;EAC3B,OAAO;EACP,iBAAiB;EACjB,gBAAgB;AAClB;;AAGA;EAAE,kBAAkB;EAClB,+BAA+B;EAC/B,kBAAkB;EAClB,eAAe;AACjB;;AAGA;EAAE,6CAA6C;EAC7C,mBAAmB;EACnB,uBAAuB;EACvB,kBAAkB;EAClB,mBAAmB;EACnB,YAAY;EACZ,kBAAkB;EAClB,kBAAkB;EAClB,mBAAmB;EACnB,aAAa;AACf;;AAGA;EAAE,qCAAqC;EACrC,eAAe;EACf,gBAAgB;AAClB;;AAGA;EAAE,mBAAmB;EACnB,iBAAiB;EACjB,kBAAkB;EAClB,aAAa;AACf;;AAKA;EAFE,cAAc;EACd,2BAA2B;AAC7B;;AAKA;EAFE,sBAAsB;EACtB,OAAO;EACP,aAAa;AACf;;AAKA;EAFE,kBAAkB;EAClB,8BAA8B;EAC9B,kBAAkB;EAClB,eAAe;AACjB;;AAKA;EAFE,kBAAkB;EAClB,gBAAgB;AAClB;;AAKA;EAFE,mBAAmB;EACnB,mBAAmB;EACnB,+BAA+B;EAC/B,6CAA6C;EAC7C,mBAAmB;EACnB,kBAAkB;EAClB,SAAS;EACT,UAAU;AACZ;;AAKA;EAFE,uBAAuB;EACvB,mBAAmB;EACnB,aAAa;AACf;;AAKA;EAFE,+BAA+B;EAC/B,eAAe;AACjB;;AAKA;EAFE,wBAAwB;EACxB,gBAAgB;AAClB","sourcesContent":[".g9-picker__value {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 100%;\n}\n\n.g9-picker__text {\n  font-size: 15px;\n  color: var(--g9-text-primary);\n  flex-shrink: 1;\n}\n\n.g9-picker__text--placeholder {\n  color: var(--g9-text-tertiary);\n}\n\n/* Gap after the swatch on the reading side (logical margins are dropped by the Lynx encoder, specs/02 §7). */\n.g9-picker__swatch {\n  margin-right: 8px;\n}\n\n.g9-dir-rtl .g9-picker__swatch {\n  margin-right: 0px;\n  margin-left: 8px;\n}\n\n.g9-picker__icon {\n  display: flex;\n  margin-right: 8px;\n}\n\n.g9-dir-rtl .g9-picker__icon {\n  margin-right: 0px;\n  margin-left: 8px;\n}\n\n.g9-combo__chip .g9-picker__icon {\n  margin-right: 6px;\n}\n\n.g9-dir-rtl .g9-combo__chip .g9-picker__icon {\n  margin-right: 0px;\n  margin-left: 6px;\n}\n\n.g9-combo__value {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 100%;\n}\n\n.g9-combo__chips {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n.g9-combo__chip {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 28px;\n  padding-left: 9px;\n  padding-right: 9px;\n  margin-right: 6px;\n  border-radius: 6px;\n  background-color: var(--g9-primary);\n}\n\n.g9-dir-rtl .g9-combo__chip {\n  margin-right: 0px;\n  margin-left: 6px;\n}\n\n.g9-combo__chip--more {\n  background: var(--g9-surface-variant);\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--g9-outline-variant);\n}\n\n.g9-combo__chip-text {\n  font-size: 13px;\n  font-weight: 700;\n  color: var(--g9-on-primary);\n}\n\n.g9-combo__chip--more .g9-combo__chip-text {\n  color: var(--g9-text-secondary);\n}\n\n.g9-picker-sheet {\n  display: flex;\n  flex-direction: column;\n  padding-bottom: 10px;\n  background-color: var(--g9-surface);\n}\n\n.g9-picker-sheet__header {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 52px;\n  padding-left: 8px;\n  padding-right: 8px;\n}\n\n.g9-picker-sheet__action {\n  min-width: 64px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.g9-picker-sheet__action-text {\n  font-size: 15px;\n  color: var(--g9-text-secondary);\n}\n\n.g9-picker-sheet__action-text--done {\n  color: var(--g9-primary);\n  font-weight: 700;\n}\n\n.g9-picker-sheet__title {\n  flex: 1;\n  text-align: center;\n  font-size: 16.2px;\n  font-weight: 700;\n  color: var(--g9-on-surface);\n}\n\n.g9-picker-sheet__preview {\n  text-align: center;\n  font-size: 14px;\n  color: var(--g9-text-secondary);\n  margin-bottom: 8px;\n}\n\n.g9-picker-sheet__today {\n  align-self: center;\n  height: 30px;\n  padding-left: 14px;\n  padding-right: 14px;\n  border-radius: 15px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 8px;\n  background-color: var(--g9-primary-container);\n}\n\n.g9-picker-sheet__today-text {\n  font-size: 13px;\n  font-weight: 700;\n  color: var(--g9-on-primary-container);\n}\n\n.g9-picker-sheet__wheels {\n  display: flex;\n  flex-direction: row;\n  padding-left: 8px;\n  padding-right: 8px;\n}\n\n/* Mirrored explicitly; the row's own direction stays ltr so an engine that honours `direction` does not reverse it\n   again (Lynxtron ignores `direction`, E22). */\n.g9-picker-sheet__wheels.g9-dir-rtl {\n  direction: ltr;\n  flex-direction: row-reverse;\n}\n\n.g9-wheel {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n}\n\n.g9-wheel__label {\n  text-align: center;\n  font-size: 12px;\n  color: var(--g9-text-tertiary);\n  margin-bottom: 4px;\n}\n\n.g9-wheel__viewport {\n  position: relative;\n  overflow: hidden;\n}\n\n.g9-wheel__band {\n  position: absolute;\n  left: 4px;\n  right: 4px;\n  border-radius: 10px;\n  border-width: 1.5px;\n  border-style: solid;\n  border-color: var(--g9-primary);\n  background-color: var(--g9-primary-container);\n}\n\n.g9-wheel__row {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.g9-wheel__text {\n  font-size: 16px;\n  color: var(--g9-text-secondary);\n}\n\n.g9-wheel__row--selected .g9-wheel__text {\n  color: var(--g9-primary);\n  font-weight: 700;\n}\n"],"sourceRoot":""}
+{"version":3,"sources":["webpack://./src/pickers/pickers.css"],"names":[],"mappings":"AAAA;EACE,mBAAmB;EACnB,mBAAmB;EACnB,YAAY;EACZ,aAAa;AACf;;AAEA;EACE,6BAA6B;EAC7B,cAAc;EACd,eAAe;AACjB;;AAEA;EACE,8BAA8B;AAChC;;AAGA;EAAE,iBAAiB;AACnB;;AAGA;EAAE,gBAAgB;EAChB,eAAe;AACjB;;AAGA;EAAE,iBAAiB;EACjB,aAAa;AACf;;AAGA;EAAE,gBAAgB;EAChB,eAAe;AACjB;;AAGA;EAAE,iBAAiB;AACnB;;AAGA;EAAE,gBAAgB;EAChB,eAAe;AACjB;;AAGA;EAAE,mBAAmB;EACnB,mBAAmB;EACnB,YAAY;EACZ,aAAa;AACf;;AAGA;EAAE,mBAAmB;EACnB,mBAAmB;EACnB,aAAa;AACf;;AAGA;EAAE,mCAAmC;EACnC,kBAAkB;EAClB,mBAAmB;EACnB,mBAAmB;EACnB,YAAY;EACZ,iBAAiB;EACjB,iBAAiB;EACjB,kBAAkB;EAClB,aAAa;AACf;;AAGA;EAAE,gBAAgB;EAChB,eAAe;AACjB;;AAGA;EAAE,qCAAqC;EACrC,mBAAmB;EACnB,iBAAiB;EACjB,uCAAuC;AACzC;;AAGA;EAAE,2BAA2B;EAC3B,eAAe;EACf,gBAAgB;AAClB;;AAGA;EAAE,+BAA+B;AACjC;;AAGA;EAAE,mCAAmC;EACnC,sBAAsB;EACtB,oBAAoB;EACpB,aAAa;AACf;;AAGA;EAAE,mBAAmB;EACnB,mBAAmB;EACnB,kBAAkB;EAClB,aAAa;AACf;;AAGA;EAAE,kBAAkB;EAClB,6BAA6B;EAC7B,OAAO;EACP,eAAe;EACf,gBAAgB;AAClB;;AAIA;EADE,kBAAkB;EAClB,wBAAwB;EACxB,qBAAqB;EACrB,eAAe;EACf,gBAAgB;AAClB;;AAKA;EAFE,mBAAmB;EACnB,iBAAiB;EACjB,mBAAmB;EACnB,uBAAuB;EACvB,kBAAkB;EAClB,mBAAmB;EACnB,eAAe;EACf,iBAAiB;EACjB,iBAAiB;EACjB,aAAa;AACf;;AAKA;EAFE,wBAAwB;EACxB,eAAe;EACf,gBAAgB;AAClB;;AAKA;EAFE,mBAAmB;EACnB,iBAAiB;EACjB,kBAAkB;EAClB,aAAa;AACf;;AAOA;EAJE,cAAc;EACd,2BAA2B;AAC7B;;AAOA;EAJE,sBAAsB;EACtB,OAAO;EACP,aAAa;AACf;;AAQA;EALE,kBAAkB;EAClB,8BAA8B;EAC9B,kBAAkB;EAClB,eAAe;EACf,gBAAgB;AAClB;;AAQA;EALE,kBAAkB;EAClB,gBAAgB;AAClB;;AASA;EANE,mBAAmB;EACnB,mBAAmB;EACnB,mBAAmB;EACnB,kBAAkB;EAClB,SAAS;EACT,UAAU;AACZ;;AASA;EANE,kBAAkB;EAClB,MAAM;EACN,SAAS;EACT,OAAO;EACP,QAAQ;AACV;;AASA;EANE,uBAAuB;EACvB,mBAAmB;EACnB,aAAa;AACf;;AAUA;EAPE,8BAA8B;EAC9B,eAAe;AACjB;;AAUA;EAPE,6BAA6B;EAC7B,eAAe;EACf,gBAAgB;AAClB","sourcesContent":[".g9-picker__value {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 100%;\n}\n\n.g9-picker__text {\n  font-size: 15px;\n  color: var(--g9-text-primary);\n  flex-shrink: 1;\n}\n\n.g9-picker__text--placeholder {\n  color: var(--g9-text-tertiary);\n}\n\n/* Gap after the swatch on the reading side (logical margins are dropped by the Lynx encoder, specs/02 §7). */\n.g9-picker__swatch {\n  margin-right: 8px;\n}\n\n.g9-dir-rtl .g9-picker__swatch {\n  margin-right: 0px;\n  margin-left: 8px;\n}\n\n.g9-picker__icon {\n  display: flex;\n  margin-right: 8px;\n}\n\n.g9-dir-rtl .g9-picker__icon {\n  margin-right: 0px;\n  margin-left: 8px;\n}\n\n.g9-combo__chip .g9-picker__icon {\n  margin-right: 6px;\n}\n\n.g9-dir-rtl .g9-combo__chip .g9-picker__icon {\n  margin-right: 0px;\n  margin-left: 6px;\n}\n\n.g9-combo__value {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 100%;\n}\n\n.g9-combo__chips {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n.g9-combo__chip {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 28px;\n  padding-left: 9px;\n  padding-right: 9px;\n  margin-right: 6px;\n  border-radius: 6px;\n  background-color: var(--g9-primary);\n}\n\n.g9-dir-rtl .g9-combo__chip {\n  margin-right: 0px;\n  margin-left: 6px;\n}\n\n.g9-combo__chip--more {\n  background: var(--g9-surface-variant);\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--g9-outline-variant);\n}\n\n.g9-combo__chip-text {\n  font-size: 13px;\n  font-weight: 700;\n  color: var(--g9-on-primary);\n}\n\n.g9-combo__chip--more .g9-combo__chip-text {\n  color: var(--g9-text-secondary);\n}\n\n.g9-picker-sheet {\n  display: flex;\n  flex-direction: column;\n  padding-bottom: 10px;\n  background-color: var(--g9-surface);\n}\n\n.g9-picker-sheet__header {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 10px 16px;\n}\n\n.g9-picker-sheet__title {\n  flex: 1;\n  text-align: center;\n  font-size: 15px;\n  font-weight: 700;\n  color: var(--g9-text-primary);\n}\n\n/* MAUI: the live preview 13 bold Primary, Padding (16, 4, 16, 8). */\n.g9-picker-sheet__preview {\n  text-align: center;\n  font-size: 13px;\n  font-weight: 700;\n  color: var(--g9-primary);\n  padding: 4px 16px 8px 16px;\n}\n\n/* Colours inline (Primary at 8 % / 30 %). */\n.g9-picker-sheet__today {\n  align-self: center;\n  padding: 6px 12px;\n  column-gap: 6px;\n  border-radius: 16px;\n  border-width: 1px;\n  border-style: solid;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin: 2px 0px 6px 0px;\n}\n\n.g9-picker-sheet__today-text {\n  font-size: 12px;\n  font-weight: 700;\n  color: var(--g9-primary);\n}\n\n.g9-picker-sheet__wheels {\n  display: flex;\n  flex-direction: row;\n  padding-left: 8px;\n  padding-right: 8px;\n}\n\n/* Mirrored explicitly; the row's own direction stays ltr so an engine that honours `direction` does not reverse it\n   again (Lynxtron ignores `direction`, E22). */\n.g9-picker-sheet__wheels.g9-dir-rtl {\n  direction: ltr;\n  flex-direction: row-reverse;\n}\n\n.g9-wheel {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n}\n\n/* MAUI DrumLabelFontSize 10, bold, TextTertiary. */\n.g9-wheel__label {\n  text-align: center;\n  font-size: 10px;\n  font-weight: 700;\n  color: var(--g9-text-tertiary);\n  margin-bottom: 4px;\n}\n\n.g9-wheel__viewport {\n  position: relative;\n  overflow: hidden;\n}\n\n/* Colours set inline from the palette (Primary at 6 % / 55 %): CSS cannot take an alpha off a colour variable. */\n.g9-wheel__band {\n  position: absolute;\n  left: 8px;\n  right: 8px;\n  border-radius: 12px;\n  border-width: 1.2px;\n  border-style: solid;\n}\n\n.g9-wheel__fade {\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  right: 0px;\n  bottom: 0px;\n}\n\n.g9-wheel__row {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* MAUI G9DrumColumn.Apply: 16 TextTertiary; the selected row 17 bold TextPrimary. */\n.g9-wheel__text {\n  font-size: 16px;\n  color: var(--g9-text-tertiary);\n}\n\n.g9-wheel__row--selected .g9-wheel__text {\n  font-size: 17px;\n  color: var(--g9-text-primary);\n  font-weight: 700;\n}\n"],"sourceRoot":""}

package/dist/pickers/wheel-column.d.ts

@@ -2,7 +2,7 @@ import './pickers.css';
 import { type ReactNode } from '@lynx-js/react';
 import type { G9WheelItem } from './date-time.js';
 /** Row height of a wheel (MAUI `G9Metrics.DrumRowHeight`). */
-export declare const g9WheelRowHeight = 40;
+export declare const g9WheelRowHeight = 44;
 /** Rows a wheel shows (the selected row is the middle one). */
 export declare const g9WheelVisibleRows = 5;
 /** The row a scroll offset rests on: the nearest row, clamped to the list. */
@@ -16,6 +16,8 @@ export interface G9WheelColumnProps<V extends string | number> {
     /** Caption above the column (Day, Month, …). */
     readonly label?: string;
     readonly rowHeight?: number;
+    /** Width weight among the sheet's wheels (MAUI's Star sizes: the month drum is 1.7, the others 1). Default 1. */
+    readonly weight?: number;
     readonly visibleRows?: number;
     /** The resting row is within two rows of an end (the year window grows there). */
     readonly onNearEdge?: (edge: 'start' | 'end') => void;

package/dist/pickers/wheel-column.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"wheel-column.d.ts","sourceRoot":"","sources":["../../src/pickers/wheel-column.tsx"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,KAAK,SAAS,EAA+B,MAAM,gBAAgB,CAAC;AAG7E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,8DAA8D;AAC9D,eAAO,MAAM,gBAAgB,KAAK,CAAC;AACnC,+DAA+D;AAC/D,eAAO,MAAM,kBAAkB,IAAI,CAAC;AAEpC,8EAA8E;AAC9E,wBAAgB,YAAY,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAGxF;AAED,sCAAsC;AACtC,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IAC3D,QAAQ,CAAC,KAAK,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9C,QAAQ,CAAC,KAAK,EAAE,CAAC,CAAC;IAClB,yEAAyE;IACzE,QAAQ,CAAC,aAAa,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC3C,gDAAgD;IAChD,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,kFAAkF;IAClF,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,GAAG,KAAK,KAAK,IAAI,CAAC;IACtD,QAAQ,CAAC,kBAAkB,CAAC,EAAE,MAAM,CAAC;CACtC;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,GAAG,SAAS,CAmGhG"}
+{"version":3,"file":"wheel-column.d.ts","sourceRoot":"","sources":["../../src/pickers/wheel-column.tsx"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAC;AAEvB,OAAO,EAAE,KAAK,SAAS,EAA+B,MAAM,gBAAgB,CAAC;AAI7E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,8DAA8D;AAC9D,eAAO,MAAM,gBAAgB,KAAK,CAAC;AACnC,+DAA+D;AAC/D,eAAO,MAAM,kBAAkB,IAAI,CAAC;AAEpC,8EAA8E;AAC9E,wBAAgB,YAAY,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAGxF;AAED,sCAAsC;AACtC,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IAC3D,QAAQ,CAAC,KAAK,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9C,QAAQ,CAAC,KAAK,EAAE,CAAC,CAAC;IAClB,yEAAyE;IACzE,QAAQ,CAAC,aAAa,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC3C,gDAAgD;IAChD,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,iHAAiH;IACjH,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,kFAAkF;IAClF,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,GAAG,KAAK,KAAK,IAAI,CAAC;IACtD,QAAQ,CAAC,kBAAkB,CAAC,EAAE,MAAM,CAAC;CACtC;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,GAAG,SAAS,CA0HhG"}

package/dist/pickers/wheel-column.jsx

@@ -1,7 +1,9 @@
 import "./pickers.css";
+import { formatColor, withAlpha } from "@g9tm/lynxcontrols-foundation";
 import { useEffect, useRef, useState } from "@lynx-js/react";
 import { invokeNodeWhenReady } from "../fields/use-text-input.jsx";
-const g9WheelRowHeight = 40;
+import { useG9Theme } from "../provider/hooks.jsx";
+const g9WheelRowHeight = 44;
 const g9WheelVisibleRows = 5;
 function wheelIndexAt(scrollTop, rowHeight, count) {
     if (count <= 0) return 0;
@@ -61,7 +63,14 @@ function G9WheelColumn(props) {
         setLive((prev)=>prev === index ? prev : index);
     };
     const onScrollEnd = ()=>settle(wheelIndexAt(scrollTop.current, rowHeight, latest.current.items.length));
-    return <view className="g9-wheel" accessibility-label={null != (_ref = null != (_props_accessibilityLabel = props.accessibilityLabel) ? _props_accessibilityLabel : props.label) ? _ref : ''}>
+    const palette = useG9Theme().palette;
+    const surface = formatColor(palette.Surface);
+    const clear = formatColor(withAlpha(palette.Surface, 0));
+    return <view className="g9-wheel" accessibility-label={null != (_ref = null != (_props_accessibilityLabel = props.accessibilityLabel) ? _props_accessibilityLabel : props.label) ? _ref : ''} {...void 0 !== props.weight && 1 !== props.weight ? {
+        style: {
+            flex: props.weight
+        }
+    } : {}}>
       {props.label ? <text className="g9-wheel__label" text-maxline="1">
           {props.label}
         </text> : null}
@@ -70,7 +79,9 @@ function G9WheelColumn(props) {
     }}>
         <view className="g9-wheel__band" user-interaction-enabled={false} style={{
         top: `${pad}px`,
-        height: `${rowHeight}px`
+        height: `${rowHeight}px`,
+        backgroundColor: formatColor(withAlpha(palette.Primary, 0.06)),
+        borderColor: formatColor(withAlpha(palette.Primary, 0.55))
     }}/>
         <scroll-view ref={(n)=>{
         node.current = n;
@@ -91,6 +102,9 @@ function G9WheelColumn(props) {
         height: `${pad}px`
     }}/>
         </scroll-view>
+        <view className="g9-wheel__fade" user-interaction-enabled={false} style={{
+        background: `linear-gradient(to bottom, ${surface} 0%, ${clear} 30%, ${clear} 70%, ${surface} 100%)`
+    }}/>
       </view>
     </view>;
 }

package/dist/pickers/wheel-column.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"pickers/wheel-column.jsx","sources":["../../src/pickers/wheel-column.tsx"],"sourcesContent":["import './pickers.css';\nimport { type ReactNode, useEffect, useRef, useState } from '@lynx-js/react';\nimport type { NodesRef } from '@lynx-js/types';\nimport { invokeNodeWhenReady } from '../fields/use-text-input';\nimport type { G9WheelItem } from './date-time';\n\n/** Row height of a wheel (MAUI `G9Metrics.DrumRowHeight`). */\nexport const g9WheelRowHeight = 40;\n/** Rows a wheel shows (the selected row is the middle one). */\nexport const g9WheelVisibleRows = 5;\n\n/** The row a scroll offset rests on: the nearest row, clamped to the list. */\nexport function wheelIndexAt(scrollTop: number, rowHeight: number, count: number): number {\n  if (count <= 0) return 0;\n  return Math.min(count - 1, Math.max(0, Math.round(scrollTop / rowHeight)));\n}\n\n/** Props of {@link G9WheelColumn}. */\nexport interface G9WheelColumnProps<V extends string | number> {\n  readonly items: ReadonlyArray<G9WheelItem<V>>;\n  readonly value: V;\n  /** The user brought another row to rest in the band (after the snap). */\n  readonly onValueChange: (value: V) => void;\n  /** Caption above the column (Day, Month, …). */\n  readonly label?: string;\n  readonly rowHeight?: number;\n  readonly visibleRows?: number;\n  /** The resting row is within two rows of an end (the year window grows there). */\n  readonly onNearEdge?: (edge: 'start' | 'end') => void;\n  readonly accessibilityLabel?: string;\n}\n\n/**\n * One drum of the date/time and duration pickers (MAUI `G9DrumColumn`): a vertical `scroll-view` of fixed-height\n * rows behind a selection band. The highlighted row follows the scroll live; when the scroll ends (finger lifted and\n * the fling done — Lynx reports it, so MAUI's 16 ms settle polling is not needed) the column glides to the nearest\n * row and reports its value. A tap on a row selects it. A new `value` from the parent rolls the column to it\n * (animated once mounted); the column never echoes a value it reported itself.\n */\nexport function G9WheelColumn<V extends string | number>(props: G9WheelColumnProps<V>): ReactNode {\n  const rowHeight = props.rowHeight ?? g9WheelRowHeight;\n  const visible = props.visibleRows ?? g9WheelVisibleRows;\n  const pad = rowHeight * Math.floor(visible / 2);\n  const count = props.items.length;\n  const valueIndex = Math.max(\n    0,\n    props.items.findIndex((i) => i.value === props.value),\n  );\n  const [live, setLive] = useState(valueIndex);\n  const node = useRef<NodesRef | null>(null);\n  const scrollTop = useRef(valueIndex * rowHeight);\n  const reported = useRef<V | null>(null);\n  const mounted = useRef(false);\n  const latest = useRef(props);\n  latest.current = props;\n\n  const scrollToIndex = (index: number, smooth: boolean) => {\n    scrollTop.current = index * rowHeight;\n    invokeNodeWhenReady(node, 'scrollTo', { offset: index * rowHeight, smooth });\n  };\n\n  // Follow the parent's value (and item changes) unless it is the one this column just reported.\n  useEffect(() => {\n    if (reported.current !== null && reported.current === props.value) {\n      reported.current = null;\n      return;\n    }\n    reported.current = null;\n    setLive(valueIndex);\n    scrollToIndex(valueIndex, mounted.current);\n    mounted.current = true;\n  }, [props.value, count]);\n\n  const settle = (index: number) => {\n    const item = latest.current.items[index];\n    scrollToIndex(index, true);\n    setLive(index);\n    if (index <= 2) latest.current.onNearEdge?.('start');\n    if (index >= latest.current.items.length - 3) latest.current.onNearEdge?.('end');\n    if (!item || item.value === latest.current.value) return;\n    reported.current = item.value;\n    latest.current.onValueChange(item.value);\n  };\n\n  const onScroll = (e: { detail?: { scrollTop?: number } }) => {\n    const top = e.detail?.scrollTop;\n    if (typeof top !== 'number') return;\n    scrollTop.current = top;\n    const index = wheelIndexAt(top, rowHeight, latest.current.items.length);\n    setLive((prev) => (prev === index ? prev : index));\n  };\n  const onScrollEnd = () => settle(wheelIndexAt(scrollTop.current, rowHeight, latest.current.items.length));\n\n  return (\n    <view className=\"g9-wheel\" accessibility-label={props.accessibilityLabel ?? props.label ?? ''}>\n      {props.label ? (\n        <text className=\"g9-wheel__label\" text-maxline=\"1\">\n          {props.label}\n        </text>\n      ) : null}\n      <view className=\"g9-wheel__viewport\" style={{ height: `${rowHeight * visible}px` }}>\n        <view\n          className=\"g9-wheel__band\"\n          user-interaction-enabled={false}\n          style={{ top: `${pad}px`, height: `${rowHeight}px` }}\n        />\n        <scroll-view\n          ref={(n: NodesRef | null) => {\n            node.current = n;\n          }}\n          className=\"g9-wheel__scroll\"\n          scroll-orientation=\"vertical\"\n          style={{ height: `${rowHeight * visible}px` }}\n          bindscroll={onScroll}\n          bindscrollend={onScrollEnd}\n        >\n          <view style={{ height: `${pad}px` }} />\n          {props.items.map((item, i) => (\n            <view\n              key={String(item.value)}\n              className={`g9-wheel__row${i === live ? ' g9-wheel__row--selected' : ''}`}\n              style={{ height: `${rowHeight}px` }}\n              accessibility-element={true}\n              accessibility-traits=\"button\"\n              accessibility-value={i === live ? 'selected' : ''}\n              accessibility-label={item.text}\n              bindtap={() => settle(i)}\n            >\n              <text className=\"g9-wheel__text\" text-maxline=\"1\">\n                {item.text}\n              </text>\n            </view>\n          ))}\n          <view style={{ height: `${pad}px` }} />\n        </scroll-view>\n      </view>\n    </view>\n  );\n}\n"],"names":["g9WheelRowHeight","g9WheelVisibleRows","wheelIndexAt","scrollTop","rowHeight","count","Math","G9WheelColumn","props","_props_rowHeight","_props_visibleRows","_ref","visible","pad","valueIndex","i","live","setLive","useState","node","useRef","reported","mounted","latest","scrollToIndex","index","smooth","invokeNodeWhenReady","useEffect","settle","_latest_current","_latest_current1","item","onScroll","e","_e_detail","top","prev","onScrollEnd","view","text","scroll-view","n","String"],"mappings":"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"}
+{"version":3,"file":"pickers/wheel-column.jsx","sources":["../../src/pickers/wheel-column.tsx"],"sourcesContent":["import './pickers.css';\nimport { formatColor, withAlpha } from '@g9tm/lynxcontrols-foundation';\nimport { type ReactNode, useEffect, useRef, useState } from '@lynx-js/react';\nimport type { NodesRef } from '@lynx-js/types';\nimport { invokeNodeWhenReady } from '../fields/use-text-input';\nimport { useG9Theme } from '../provider/hooks';\nimport type { G9WheelItem } from './date-time';\n\n/** Row height of a wheel (MAUI `G9Metrics.DrumRowHeight`). */\nexport const g9WheelRowHeight = 44;\n/** Rows a wheel shows (the selected row is the middle one). */\nexport const g9WheelVisibleRows = 5;\n\n/** The row a scroll offset rests on: the nearest row, clamped to the list. */\nexport function wheelIndexAt(scrollTop: number, rowHeight: number, count: number): number {\n  if (count <= 0) return 0;\n  return Math.min(count - 1, Math.max(0, Math.round(scrollTop / rowHeight)));\n}\n\n/** Props of {@link G9WheelColumn}. */\nexport interface G9WheelColumnProps<V extends string | number> {\n  readonly items: ReadonlyArray<G9WheelItem<V>>;\n  readonly value: V;\n  /** The user brought another row to rest in the band (after the snap). */\n  readonly onValueChange: (value: V) => void;\n  /** Caption above the column (Day, Month, …). */\n  readonly label?: string;\n  readonly rowHeight?: number;\n  /** Width weight among the sheet's wheels (MAUI's Star sizes: the month drum is 1.7, the others 1). Default 1. */\n  readonly weight?: number;\n  readonly visibleRows?: number;\n  /** The resting row is within two rows of an end (the year window grows there). */\n  readonly onNearEdge?: (edge: 'start' | 'end') => void;\n  readonly accessibilityLabel?: string;\n}\n\n/**\n * One drum of the date/time and duration pickers (MAUI `G9DrumColumn`): a vertical `scroll-view` of fixed-height\n * rows behind a selection band. The highlighted row follows the scroll live; when the scroll ends (finger lifted and\n * the fling done — Lynx reports it, so MAUI's 16 ms settle polling is not needed) the column glides to the nearest\n * row and reports its value. A tap on a row selects it. A new `value` from the parent rolls the column to it\n * (animated once mounted); the column never echoes a value it reported itself.\n */\nexport function G9WheelColumn<V extends string | number>(props: G9WheelColumnProps<V>): ReactNode {\n  const rowHeight = props.rowHeight ?? g9WheelRowHeight;\n  const visible = props.visibleRows ?? g9WheelVisibleRows;\n  const pad = rowHeight * Math.floor(visible / 2);\n  const count = props.items.length;\n  const valueIndex = Math.max(\n    0,\n    props.items.findIndex((i) => i.value === props.value),\n  );\n  const [live, setLive] = useState(valueIndex);\n  const node = useRef<NodesRef | null>(null);\n  const scrollTop = useRef(valueIndex * rowHeight);\n  const reported = useRef<V | null>(null);\n  const mounted = useRef(false);\n  const latest = useRef(props);\n  latest.current = props;\n\n  const scrollToIndex = (index: number, smooth: boolean) => {\n    scrollTop.current = index * rowHeight;\n    invokeNodeWhenReady(node, 'scrollTo', { offset: index * rowHeight, smooth });\n  };\n\n  // Follow the parent's value (and item changes) unless it is the one this column just reported.\n  useEffect(() => {\n    if (reported.current !== null && reported.current === props.value) {\n      reported.current = null;\n      return;\n    }\n    reported.current = null;\n    setLive(valueIndex);\n    scrollToIndex(valueIndex, mounted.current);\n    mounted.current = true;\n  }, [props.value, count]);\n\n  const settle = (index: number) => {\n    const item = latest.current.items[index];\n    scrollToIndex(index, true);\n    setLive(index);\n    if (index <= 2) latest.current.onNearEdge?.('start');\n    if (index >= latest.current.items.length - 3) latest.current.onNearEdge?.('end');\n    if (!item || item.value === latest.current.value) return;\n    reported.current = item.value;\n    latest.current.onValueChange(item.value);\n  };\n\n  const onScroll = (e: { detail?: { scrollTop?: number } }) => {\n    const top = e.detail?.scrollTop;\n    if (typeof top !== 'number') return;\n    scrollTop.current = top;\n    const index = wheelIndexAt(top, rowHeight, latest.current.items.length);\n    setLive((prev) => (prev === index ? prev : index));\n  };\n  const onScrollEnd = () => settle(wheelIndexAt(scrollTop.current, rowHeight, latest.current.items.length));\n\n  // MAUI G9DrumColumnDrawable: the band a hairline tint (Primary 6 %) and outline (Primary 55 %, 1.2 dp, corner 12, 8 dp\n  // in from each side); over the rows, Surface fading out across the top 30 % and back in across the bottom 30 %.\n  const palette = useG9Theme().palette;\n  const surface = formatColor(palette.Surface);\n  const clear = formatColor(withAlpha(palette.Surface, 0));\n  return (\n    <view\n      className=\"g9-wheel\"\n      accessibility-label={props.accessibilityLabel ?? props.label ?? ''}\n      // The same shorthand as the class's `flex: 1`, and only for a weighted wheel: the longhand (grow / shrink / 0 px\n      // basis) re-laid the column out after the opening scrollTo and dropped every wheel back to its first row.\n      {...(props.weight !== undefined && props.weight !== 1 ? { style: { flex: props.weight } } : {})}\n    >\n      {props.label ? (\n        <text className=\"g9-wheel__label\" text-maxline=\"1\">\n          {props.label}\n        </text>\n      ) : null}\n      <view className=\"g9-wheel__viewport\" style={{ height: `${rowHeight * visible}px` }}>\n        <view\n          className=\"g9-wheel__band\"\n          user-interaction-enabled={false}\n          style={{\n            top: `${pad}px`,\n            height: `${rowHeight}px`,\n            backgroundColor: formatColor(withAlpha(palette.Primary, 0.06)),\n            borderColor: formatColor(withAlpha(palette.Primary, 0.55)),\n          }}\n        />\n        <scroll-view\n          ref={(n: NodesRef | null) => {\n            node.current = n;\n          }}\n          className=\"g9-wheel__scroll\"\n          scroll-orientation=\"vertical\"\n          style={{ height: `${rowHeight * visible}px` }}\n          bindscroll={onScroll}\n          bindscrollend={onScrollEnd}\n        >\n          <view style={{ height: `${pad}px` }} />\n          {props.items.map((item, i) => (\n            <view\n              key={String(item.value)}\n              className={`g9-wheel__row${i === live ? ' g9-wheel__row--selected' : ''}`}\n              style={{ height: `${rowHeight}px` }}\n              accessibility-element={true}\n              accessibility-traits=\"button\"\n              accessibility-value={i === live ? 'selected' : ''}\n              accessibility-label={item.text}\n              bindtap={() => settle(i)}\n            >\n              <text className=\"g9-wheel__text\" text-maxline=\"1\">\n                {item.text}\n              </text>\n            </view>\n          ))}\n          <view style={{ height: `${pad}px` }} />\n        </scroll-view>\n        <view\n          className=\"g9-wheel__fade\"\n          user-interaction-enabled={false}\n          style={{\n            background: `linear-gradient(to bottom, ${surface} 0%, ${clear} 30%, ${clear} 70%, ${surface} 100%)`,\n          }}\n        />\n      </view>\n    </view>\n  );\n}\n"],"names":["g9WheelRowHeight","g9WheelVisibleRows","wheelIndexAt","scrollTop","rowHeight","count","Math","G9WheelColumn","props","_props_rowHeight","_props_visibleRows","_ref","visible","pad","valueIndex","i","live","setLive","useState","node","useRef","reported","mounted","latest","scrollToIndex","index","smooth","invokeNodeWhenReady","useEffect","settle","_latest_current","_latest_current1","item","onScroll","e","_e_detail","top","prev","onScrollEnd","palette","useG9Theme","surface","formatColor","clear","withAlpha","view","undefined","text","scroll-view","n","String"],"mappings":"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"}

package/dist/popup/frame.d.ts

@@ -52,6 +52,12 @@ export interface G9PopupViewOpenOptions {
     /** The card can be dragged: by a `<G9PopupDragHandle>` inside it, or anywhere when there is none. */
     readonly isDraggable?: boolean;
 }
+/**
+ * The size every MAUI popup RESTS at: `G9PopupView` builds its card container with `ScaleX = ScaleY = 0.92` and its
+ * open animations only ever set `Scale` (which multiplies them), so the card, its text and its buttons all show at
+ * 92 % — a 403 dp card measures 371 dp on screen (MAUI 6.2.36, Pixel 9 Pro XL). The port reproduces what users see.
+ */
+export declare const g9PopupRestingScale = 0.92;
 /** The pose a card starts from / leaves to, per motion (MAUI `G9PopupView` animation table). */
 export declare function popupMotionPose(animation: G9PopupAnimationType, phase: 'enter' | 'exit'): {
     opacity: number;

package/dist/popup/frame.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"frame.d.ts","sourceRoot":"","sources":["../../src/popup/frame.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"frame.d.ts","sourceRoot":"","sources":["../../src/popup/frame.tsx"],"names":[],"mappings":"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"}

package/dist/popup/frame.jsx

@@ -1,10 +1,11 @@
 import "./popup.css";
-import { resolveThemeColor } from "@g9tm/lynxcontrols-foundation";
+import { formatColor, resolveThemeColor, withAlpha } from "@g9tm/lynxcontrols-foundation";
 import { createContext, useContext, useEffect, useRef, useState } from "@lynx-js/react";
 import { g9SafeId } from "../base/control.jsx";
 import { g9FieldNotchStyle } from "../fields/notch.jsx";
 import { useG9Theme } from "../provider/hooks.jsx";
 import { popupScrimOpacity } from "./types.jsx";
+const g9PopupRestingScale = 0.92;
 function popupMotionPose(animation, phase) {
     switch(animation){
         case 'none':
@@ -121,10 +122,11 @@ function G9PopupDragHandle(props) {
     </view>;
 }
 function PopupFrame(props) {
-    var _o_cardBackground, _o_animation, _o_animationDuration, _o_overlayMode, _o_animationEasing, _o_autoSizeMode, _o_absoluteX, _o_absoluteY, _o_relativeAbsoluteX, _o_relativeAbsoluteY, _o_padding, _o_overlayOpacity, _o_blurIntensity, _o_overlayColor, _o_cornerRadius, _o_cardBackground1, _o_borderColor;
+    var _o_cardBackground, _o_overlayColor, _o_animation, _o_animationDuration, _o_overlayMode, _o_animationEasing, _o_autoSizeMode, _o_absoluteX, _o_absoluteY, _o_relativeAbsoluteX, _o_relativeAbsoluteY, _o_padding, _o_overlayOpacity, _o_blurIntensity, _o_cornerRadius, _o_cardBackground1, _o_borderColor;
     const o = props.options;
     const palette = useG9Theme().palette;
     const notch = g9FieldNotchStyle(resolveThemeColor(null != (_o_cardBackground = o.cardBackground) ? _o_cardBackground : 'var(--g9-surface)', palette));
+    const scrimColor = formatColor(withAlpha(resolveThemeColor(null != (_o_overlayColor = o.overlayColor) ? _o_overlayColor : 'var(--g9-scrim)', palette), 1));
     const animation = null != (_o_animation = o.animation) ? _o_animation : 'slideUp';
     const duration = null != (_o_animationDuration = o.animationDuration) ? _o_animationDuration : 240;
     const mode = null != (_o_overlayMode = o.overlayMode) ? _o_overlayMode : 'transparent';
@@ -193,8 +195,8 @@ function PopupFrame(props) {
     return <view className={`g9-popup${'none' === mode ? ' g9-popup--nonmodal' : ''}${placed ? ' g9-popup--placed' : ''}`} {...'none' === mode ? {
         'event-through': true
     } : {}}>
-      {'none' !== mode ? <view className="g9-popup__scrim" style={{
-        backgroundColor: null != (_o_overlayColor = o.overlayColor) ? _o_overlayColor : 'var(--g9-scrim)',
+      {'none' !== mode ? <view flatten={false} className="g9-popup__scrim" style={{
+        backgroundColor: scrimColor,
         opacity: 'open' === props.phase ? scrimOpacity : 0,
         transition: 'enter' === props.phase ? 'none' : `opacity ${duration}ms`
     }} bindtap={()=>{
@@ -222,7 +224,7 @@ function PopupFrame(props) {
         padding: `${pad[1]}px ${pad[2]}px ${pad[3]}px ${pad[0]}px`,
         ...notch,
         opacity: pose.opacity,
-        transform: `${dragTranslate}${pose.transform}`,
+        transform: `${dragTranslate}${pose.transform} scale(${g9PopupRestingScale})`,
         transition
     }} bindlayoutchange={(e)=>{
         var _ref, _ref1;
@@ -247,6 +249,6 @@ function PopupFrame(props) {
       </view>
     </view>;
 }
-export { G9PopupDragHandle, PopupFrame, popupEasingCss, popupMotionPose, relativePopupPlacement };
+export { G9PopupDragHandle, PopupFrame, g9PopupRestingScale, popupEasingCss, popupMotionPose, relativePopupPlacement };
 
 //# sourceMappingURL=frame.jsx.map