@lobehub/ui 5.63.4 → 5.64.1

package/es/base-ui/DatePicker/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/DatePicker/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nimport { focusRing } from '@/base-ui/focusRing';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  band: css`\n    background: ${cssVar.colorFillSecondary};\n  `,\n  bandEnd: css`\n    background: linear-gradient(to left, transparent 50%, ${cssVar.colorFillSecondary} 50%);\n  `,\n  bandStart: css`\n    background: linear-gradient(to right, transparent 50%, ${cssVar.colorFillSecondary} 50%);\n  `,\n  calendar: css`\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    width: 266px;\n  `,\n  cell: css`\n    display: flex;\n    justify-content: center;\n  `,\n  day: css`\n    ${focusRing};\n    cursor: pointer;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    width: 34px;\n    height: 34px;\n    padding: 0;\n    border: 0;\n    border-radius: 50%;\n\n    font: inherit;\n    font-size: 13px;\n    font-variant-numeric: tabular-nums;\n    color: ${cssVar.colorText};\n\n    background: none;\n\n    &:hover:not(:disabled, [aria-pressed='true']) {\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      color: ${cssVar.colorTextQuaternary};\n    }\n\n    &[data-outside] {\n      color: ${cssVar.colorTextQuaternary};\n    }\n\n    &[data-today] {\n      box-shadow: inset 0 0 0 1px ${cssVar.colorText};\n    }\n\n    &[aria-pressed='true'] {\n      font-weight: 600;\n      color: ${cssVar.colorBgContainer};\n      background: ${cssVar.colorText};\n    }\n  `,\n  footer: css`\n    display: flex;\n    justify-content: center;\n\n    margin-block-start: 12px;\n    padding-block-start: 12px;\n    border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n  `,\n  grid: css`\n    display: grid;\n    grid-template-columns: repeat(7, minmax(0, 1fr));\n    row-gap: 2px;\n  `,\n  header: css`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-block-end: 4px;\n  `,\n  icon: css`\n    display: inline-flex;\n    flex: none;\n    color: ${cssVar.colorTextTertiary};\n  `,\n  navGroup: css`\n    display: flex;\n    gap: 2px;\n  `,\n  placeholder: css`\n    color: ${cssVar.colorTextPlaceholder};\n  `,\n  range: css`\n    display: flex;\n    gap: 28px;\n  `,\n  rangeHalf: css`\n    flex: 1;\n    min-width: 0;\n    padding-block: 2px;\n\n    &[data-active] {\n      box-shadow: inset 0 -2px 0 ${cssVar.colorText};\n    }\n  `,\n  rangeTrigger: css`\n    display: flex;\n    flex: 1;\n    gap: 8px;\n    align-items: center;\n\n    min-width: 0;\n  `,\n  tile: css`\n    ${focusRing};\n    cursor: pointer;\n\n    height: 40px;\n    padding: 0;\n    border: 0;\n    border-radius: 999px;\n\n    font: inherit;\n    font-size: 14px;\n    color: ${cssVar.colorText};\n\n    background: none;\n\n    &:hover:not(:disabled, [aria-pressed='true']) {\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      color: ${cssVar.colorTextQuaternary};\n    }\n\n    &[data-today] {\n      box-shadow: inset 0 0 0 1px ${cssVar.colorText};\n    }\n\n    &[aria-pressed='true'] {\n      font-weight: 600;\n      color: ${cssVar.colorBgContainer};\n      background: ${cssVar.colorText};\n    }\n  `,\n  tiles: css`\n    display: grid;\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n    gap: 6px 4px;\n    width: 266px;\n  `,\n  trigger: css`\n    ${focusRing};\n    cursor: pointer;\n\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    min-width: 0;\n    height: 100%;\n    padding: 0;\n    border: 0;\n\n    font: inherit;\n    color: inherit;\n    text-align: start;\n    white-space: nowrap;\n\n    background: none;\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n  `,\n  weekday: css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 20px;\n  `,\n}));\n"],"mappings":";;;AAIA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;kBACO,OAAO,mBAAmB;;CAE1C,SAAS,GAAG;4DAC8C,OAAO,mBAAmB;;CAEpF,WAAW,GAAG;6DAC6C,OAAO,mBAAmB;;CAErF,UAAU,GAAG;;;;;;CAMb,MAAM,GAAG;;;;CAIT,KAAK,GAAG;MACJ,UAAU;;;;;;;;;;;;;;;;aAgBH,OAAO,UAAU;;;;;oBAKV,OAAO,kBAAkB;;;;;eAK9B,OAAO,oBAAoB;;;;eAI3B,OAAO,oBAAoB;;;;oCAIN,OAAO,UAAU;;;;;eAKtC,OAAO,iBAAiB;oBACnB,OAAO,UAAU;;;CAGnC,QAAQ,GAAG;;;;;;oCAMuB,OAAO,qBAAqB;;CAE9D,MAAM,GAAG;;;;;CAKT,QAAQ,GAAG;;;;;;CAMX,MAAM,GAAG;;;aAGE,OAAO,kBAAkB;;CAEpC,UAAU,GAAG;;;;CAIb,aAAa,GAAG;aACL,OAAO,qBAAqB;;CAEvC,OAAO,GAAG;;;;CAIV,WAAW,GAAG;;;;;;mCAMmB,OAAO,UAAU;;;CAGlD,cAAc,GAAG;;;;;;;;CAQjB,MAAM,GAAG;MACL,UAAU;;;;;;;;;;aAUH,OAAO,UAAU;;;;;oBAKV,OAAO,kBAAkB;;;;;eAK9B,OAAO,oBAAoB;;;;oCAIN,OAAO,UAAU;;;;;eAKtC,OAAO,iBAAiB;oBACnB,OAAO,UAAU;;;CAGnC,OAAO,GAAG;;;;;;CAMV,SAAS,GAAG;MACR,UAAU;;;;;;;;;;;;;;;;;;;;;;;CAuBd,SAAS,GAAG;;;;;;AAMd,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/DatePicker/style.ts"],"sourcesContent":["import { focusRing } from '@/base-ui/focusRing';\nimport { createStaticStyles } from '@/utils/styleEngine';\n\n/** Own prefix so rc-picker class names never collide with antd's global `.ant-picker` CSS. */\nexport const PREFIX_CLS = 'lobe-picker';\n\nconst P = PREFIX_CLS;\nconst MOTION = `${P}-slide-up`;\n\n/**\n * Styles for rc-picker's class-name contract. `root` is passed as `rootClassName`, which\n * rc-picker puts on both the input box (`.lobe-picker`) and the popup\n * (`.lobe-picker-dropdown`); the box itself reuses base-ui Input's `rootVariants`.\n */\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  /** antd's `underlined`: only a bottom border, applied over Input's `borderless`. */\n  underlined: css`\n    &.${P} {\n      border-block-end-color: ${cssVar.colorBorder};\n      border-radius: 0;\n    }\n\n    &.${P}:hover:not(:focus-within, .${P}-disabled) {\n      border-block-end-color: ${cssVar.colorPrimaryHover};\n    }\n\n    &.${P}:focus-within {\n      border-block-end-color: ${cssVar.colorPrimary};\n    }\n  `,\n  root: css`\n    /* ---------------------------------------------------------------- input box */\n\n    /* Size to content like antd: the shared Input root is width: 100%, which made the\n       picker stretch in a flex row and squeeze its siblings. Default to auto width (capped by\n       the container); a style / className width (e.g. 100%) still wins and the inputs grow. */\n    &.${P} {\n      position: relative;\n      width: auto;\n      max-width: 100%;\n    }\n\n    /* flex-basis auto, not 0: the input keeps its natural width from rc-picker's size\n       attribute (format length + 2) instead of collapsing when the root is auto width. */\n    &.${P} .${P}-input {\n      position: relative;\n\n      display: inline-flex;\n      flex: 1 1 auto;\n      gap: 8px;\n      align-items: center;\n\n      min-width: 0;\n    }\n\n    &.${P} .${P}-input > input {\n      flex: 1 1 auto;\n\n      width: auto;\n      min-width: 0;\n      padding: 0;\n      border: none;\n\n      font: inherit;\n      font-variant-numeric: tabular-nums;\n      color: inherit;\n      text-overflow: ellipsis;\n\n      appearance: none;\n      background: transparent;\n      outline: none;\n\n      &::placeholder {\n        color: ${cssVar.colorTextPlaceholder};\n      }\n\n      &:disabled {\n        cursor: not-allowed;\n      }\n    }\n\n    /*\n     * \\`disabled: [boolean, boolean]\\`: Input greys the whole root on \\`:has(input:disabled)\\`;\n     * while one end stays editable (rc adds \\`-disabled\\` only when both are), grey just that end.\n     */\n    &.${P}-range:not(.${P}-disabled):has(input:disabled) {\n      cursor: auto;\n      color: ${cssVar.colorText};\n      opacity: 1;\n    }\n\n    &.${P}-range:not(.${P}-disabled) .${P}-input:has(> input:disabled) {\n      cursor: not-allowed;\n      color: ${cssVar.colorTextQuaternary};\n    }\n\n    /* hover preview text from presets / cells */\n    &.${P} .${P}-input-placeholder > input {\n      color: ${cssVar.colorTextPlaceholder};\n    }\n\n    &.${P} .${P}-prefix {\n      display: inline-flex;\n      flex: none;\n      align-items: center;\n      color: ${cssVar.colorTextTertiary};\n    }\n\n    &.${P} .${P}-suffix {\n      pointer-events: none;\n\n      display: inline-flex;\n      flex: none;\n      align-items: center;\n      justify-content: center;\n\n      width: 16px;\n\n      color: ${cssVar.colorTextTertiary};\n\n      transition: opacity 150ms ${cssVar.motionEaseOut};\n    }\n\n    /* the clear button sits on top of the suffix icon (16px wide + 8px gap) */\n    &.${P} .${P}-clear {\n      cursor: pointer;\n\n      position: relative;\n      z-index: 1;\n\n      display: inline-flex;\n      flex: none;\n      align-items: center;\n      justify-content: center;\n\n      width: 16px;\n      height: 16px;\n      margin-inline-start: -24px;\n      padding: 0;\n      border: 0;\n      border-radius: 50%;\n\n      color: ${cssVar.colorBgContainer};\n\n      opacity: 0;\n      background: ${cssVar.colorTextQuaternary};\n\n      transition: opacity 150ms ${cssVar.motionEaseOut};\n\n      &:hover {\n        background: ${cssVar.colorTextTertiary};\n      }\n    }\n\n    &.${P}:not(.${P}-disabled):hover .${P}-clear {\n      opacity: 1;\n    }\n\n    &.${P}:not(.${P}-disabled):hover .${P}-suffix:not(:last-child) {\n      opacity: 0;\n    }\n\n    &.${P}-disabled .${P}-clear {\n      display: none;\n    }\n\n    /*\n     * multiple: rc-picker's tags (\\`-selection-item\\`, also the \\`+ N ...\\` rest) in base-ui Tag's\n     * filled look, sized as antd (control height - 8px) and wrapping the box when they overflow.\n     */\n    &.${P}-multiple {\n      --lobe-picker-tag-height: 24px;\n\n      cursor: pointer;\n      padding-block: 1px;\n    }\n\n    &.${P}-multiple.${P}-small {\n      --lobe-picker-tag-height: 16px;\n    }\n\n    &.${P}-multiple.${P}-large {\n      --lobe-picker-tag-height: 32px;\n    }\n\n    &.${P}-multiple .${P}-selector {\n      position: relative;\n      flex: 1;\n      min-width: 0;\n    }\n\n    &.${P}-multiple .${P}-selection-overflow {\n      display: flex;\n      flex-wrap: wrap;\n      align-items: center;\n      max-width: 100%;\n    }\n\n    &.${P}-multiple .${P}-selection-overflow-item {\n      flex: none;\n      max-width: 100%;\n    }\n\n    &.${P}-multiple .${P}-selection-item {\n      display: flex;\n      gap: 4px;\n      align-items: center;\n\n      box-sizing: border-box;\n      max-width: 100%;\n      height: var(--lobe-picker-tag-height);\n      margin-block: 2px;\n      margin-inline-end: 4px;\n      padding-inline: 8px 4px;\n      border-radius: ${cssVar.borderRadiusSM};\n\n      font-size: ${cssVar.fontSizeSM};\n      line-height: var(--lobe-picker-tag-height);\n      color: ${cssVar.colorText};\n      white-space: nowrap;\n\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &.${P}-multiple.${P}-large .${P}-selection-item {\n      font-size: ${cssVar.fontSize};\n    }\n\n    &.${P}-multiple .${P}-selection-item:not(:has(.${P}-selection-item-remove)) {\n      padding-inline-end: 8px;\n    }\n\n    &.${P}-multiple .${P}-selection-item-content {\n      overflow: hidden;\n      font-variant-numeric: tabular-nums;\n      text-overflow: ellipsis;\n    }\n\n    &.${P}-multiple .${P}-selection-item-remove {\n      cursor: pointer;\n\n      display: inline-flex;\n      flex: none;\n      align-items: center;\n\n      color: ${cssVar.colorIcon};\n\n      &:hover {\n        color: ${cssVar.colorTextHeading};\n      }\n    }\n\n    &.${P}-multiple .${P}-selection-placeholder {\n      overflow: hidden;\n      display: block;\n\n      line-height: calc(var(--lobe-picker-tag-height) + 4px);\n      color: ${cssVar.colorTextPlaceholder};\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    /* the selector shows the value; rc-picker keeps this readonly input only for focus */\n    &.${P}-multiple .${P}-multiple-input {\n      position: absolute;\n      z-index: -1;\n\n      width: 0;\n      height: 0;\n      padding: 0;\n      border: 0;\n\n      opacity: 0;\n    }\n\n    &.${P}-multiple.${P}-disabled {\n      cursor: not-allowed;\n      color: ${cssVar.colorTextQuaternary};\n      opacity: 0.66;\n    }\n\n    /* status: border + focus ring per variant, as antd's genStatusStyle */\n    &.${P}-status-error {\n      --lobe-picker-status: ${cssVar.colorError};\n      --lobe-picker-status-hover: ${cssVar.colorErrorBorderHover};\n      --lobe-picker-status-bg: ${cssVar.colorErrorBg};\n      --lobe-picker-status-bg-hover: ${cssVar.colorErrorBgHover};\n    }\n\n    &.${P}-status-warning {\n      --lobe-picker-status: ${cssVar.colorWarning};\n      --lobe-picker-status-hover: ${cssVar.colorWarningBorderHover};\n      --lobe-picker-status-bg: ${cssVar.colorWarningBg};\n      --lobe-picker-status-bg-hover: ${cssVar.colorWarningBgHover};\n    }\n\n    &:is(.${P}-status-error, .${P}-status-warning):not(.${P}-disabled) {\n      &.${P}-outlined {\n        border-color: var(--lobe-picker-status);\n\n        &:hover:not(:focus-within) {\n          border-color: var(--lobe-picker-status-hover);\n        }\n\n        &:focus-within {\n          border-color: var(--lobe-picker-status);\n          box-shadow: 0 0 0 2px var(--lobe-picker-status-bg);\n        }\n      }\n\n      &.${P}-filled {\n        background: var(--lobe-picker-status-bg);\n\n        &:hover:not(:focus-within) {\n          background: var(--lobe-picker-status-bg-hover);\n        }\n\n        &:focus-within {\n          border-color: var(--lobe-picker-status);\n          background: ${cssVar.colorBgContainer};\n        }\n      }\n\n      &.${P}-underlined {\n        border-block-end-color: var(--lobe-picker-status);\n      }\n\n      &:is(.${P}-borderless, .${P}-underlined) .${P}-input > input {\n        color: var(--lobe-picker-status);\n      }\n\n      .${P}-prefix {\n        color: var(--lobe-picker-status);\n      }\n    }\n\n    /* rtl: rc-picker adds the -rtl modifier to the box and the popup; lucide arrows are mirrored */\n    &.${P}-rtl, &.${P}-dropdown-rtl {\n      direction: rtl;\n    }\n\n    &.${P}-rtl .${P}-range-separator .lucide,\n    &.${P}-dropdown-rtl .${P}-header > button .lucide {\n      transform: scaleX(-1);\n    }\n\n    /* range: two inputs, a separator and the bar under the active field */\n    &.${P}-range .${P}-input {\n      flex: 1 1 auto;\n    }\n\n    &.${P}-range .${P}-range-separator {\n      display: inline-flex;\n      flex: none;\n      align-items: center;\n      color: ${cssVar.colorTextTertiary};\n    }\n\n    &.${P}-range .${P}-active-bar {\n      pointer-events: none;\n\n      position: absolute;\n      inset-block-end: -1px;\n\n      height: 2px;\n\n      opacity: 0;\n      background: ${cssVar.colorPrimary};\n\n      transition:\n        inset-inline-start 200ms ${cssVar.motionEaseOut},\n        width 200ms ${cssVar.motionEaseOut},\n        opacity 200ms ${cssVar.motionEaseOut};\n    }\n\n    &.${P}-range.${P}-focused .${P}-active-bar {\n      opacity: 1;\n    }\n\n    /* ---------------------------------------------------------------- popup */\n    &.${P}-dropdown {\n      /* nested in a base-ui Modal / Popover layer that sets pointer-events: none */\n      pointer-events: auto;\n\n      position: absolute;\n      inset-block-start: -9999px;\n      inset-inline-start: -9999px;\n\n      font-size: 14px;\n      color: ${cssVar.colorText};\n    }\n\n    &.${P}-dropdown-hidden {\n      display: none;\n    }\n\n    &.${P}-dropdown .${P}-range-arrow {\n      display: none;\n    }\n\n    /* rc-trigger stretches the popup to the input width; only the container is painted */\n    &.${P}-dropdown .${P}-panel-container {\n      overflow: hidden;\n      display: inline-block;\n\n      border-radius: 16px;\n\n      vertical-align: top;\n\n      background: ${cssVar.colorBgElevated};\n      box-shadow: ${cssVar.boxShadow}, var(--lobe-ring);\n    }\n\n    &.${P}-dropdown .${P}-panel-layout {\n      display: flex;\n      align-items: stretch;\n    }\n\n    &.${P}-dropdown .${P}-panels {\n      display: flex;\n      flex-wrap: nowrap;\n    }\n\n    /* presets: a sidebar on the start side of the panels, as in antd */\n    &.${P}-dropdown .${P}-presets {\n      display: flex;\n      flex-direction: column;\n\n      min-width: 120px;\n      max-width: 200px;\n\n      /* divider one step lighter than the panel borders: light colorFillSecondary,\n         dark colorFillTertiary (see the -dropdown-dark rule below) */\n      border-inline-end: 1px solid ${cssVar.colorFillSecondary};\n\n      /* slightly tinted; the panel container's radius + overflow clip it */\n      background: ${cssVar.colorFillQuaternary};\n\n      ul {\n        overflow: auto;\n        flex: auto;\n\n        height: 0;\n        margin: 0;\n        padding: 6px;\n\n        list-style: none;\n      }\n\n      li {\n        cursor: pointer;\n\n        overflow: hidden;\n\n        padding-block: 4px;\n        padding-inline: 8px;\n        border-radius: 6px;\n\n        font-size: 13px;\n        line-height: 20px;\n        color: ${cssVar.colorText};\n        text-overflow: ellipsis;\n        white-space: nowrap;\n\n        transition: background-color 150ms ${cssVar.motionEaseOut};\n\n        &:hover {\n          background: ${cssVar.colorFillTertiary};\n        }\n\n        &:has(> .${P}-preset-active) {\n          font-weight: 500;\n          background: ${cssVar.colorFillSecondary};\n        }\n      }\n\n      li + li {\n        margin-block-start: 2px;\n      }\n    }\n\n    /* dark: fill tokens are white-alpha and would lighten the sidebar, so darken it */\n    &.${P}-dropdown.${P}-dropdown-dark .${P}-presets {\n      border-inline-end-color: ${cssVar.colorFillTertiary};\n      background: rgb(0 0 0 / 12%);\n    }\n\n    &.${P}-dropdown .${P}-panel {\n      display: inline-flex;\n      flex-direction: column;\n      outline: none;\n    }\n\n    &.${P}-dropdown .${P}-panels > .${P}-panel + .${P}-panel {\n      border-inline-start: 1px solid ${cssVar.colorBorderSecondary};\n    }\n\n    &.${P}-dropdown\n      :is(\n        .${P}-date-panel,\n          .${P}-week-panel,\n          .${P}-month-panel,\n          .${P}-quarter-panel,\n          .${P}-year-panel,\n          .${P}-decade-panel\n      ) {\n      width: 288px;\n    }\n\n    /* header: << < [month year] > >> */\n    &.${P}-dropdown .${P}-header {\n      display: flex;\n      gap: 2px;\n      align-items: center;\n\n      padding-block: 12px 4px;\n      padding-inline: 12px;\n    }\n\n    &.${P}-dropdown .${P}-header > button {\n      ${focusRing};\n      cursor: pointer;\n\n      display: inline-flex;\n      flex: none;\n      align-items: center;\n      justify-content: center;\n\n      width: 28px;\n      height: 28px;\n      padding: 0;\n      border: 0;\n      border-radius: 50%;\n\n      color: ${cssVar.colorTextSecondary};\n\n      background: none;\n\n      &:hover:not(:disabled) {\n        color: ${cssVar.colorText};\n        background: ${cssVar.colorFillTertiary};\n      }\n    }\n\n    &.${P}-dropdown\n      :is(\n        .${P}-header-prev-btn-disabled,\n          .${P}-header-next-btn-disabled,\n          .${P}-header-super-prev-btn-disabled,\n          .${P}-header-super-next-btn-disabled\n      ) {\n      cursor: not-allowed;\n      opacity: 0.3;\n    }\n\n    &.${P}-dropdown .${P}-header-view {\n      display: flex;\n      flex: 1;\n      gap: 4px;\n      align-items: center;\n      justify-content: center;\n\n      min-width: 0;\n\n      font-weight: 600;\n    }\n\n    &.${P}-dropdown .${P}-header-view > button {\n      ${focusRing};\n      cursor: pointer;\n\n      padding-block: 2px;\n      padding-inline: 4px;\n      border: 0;\n      border-radius: 6px;\n\n      font: inherit;\n      color: inherit;\n\n      background: none;\n\n      &:hover:not(:disabled) {\n        color: ${cssVar.colorPrimary};\n      }\n\n      &:disabled {\n        cursor: default;\n      }\n    }\n\n    /* body + cells */\n    &.${P}-dropdown .${P}-body {\n      padding-block: 4px 12px;\n      padding-inline: 12px;\n    }\n\n    &.${P}-dropdown .${P}-content {\n      table-layout: fixed;\n      border-collapse: collapse;\n      width: 100%;\n    }\n\n    &.${P}-dropdown .${P}-content th {\n      height: 28px;\n      padding: 0;\n\n      font-size: 12px;\n      font-weight: 400;\n      color: ${cssVar.colorTextTertiary};\n      text-align: center;\n    }\n\n    &.${P}-dropdown .${P}-cell {\n      cursor: pointer;\n\n      position: relative;\n\n      padding-block: 2px;\n      padding-inline: 0;\n\n      color: ${cssVar.colorTextQuaternary};\n      text-align: center;\n\n      &::before {\n        content: '';\n\n        position: absolute;\n        z-index: 0;\n        inset-block-start: 50%;\n        inset-inline: 0;\n        transform: translateY(-50%);\n\n        height: 32px;\n      }\n    }\n\n    &.${P}-dropdown .${P}-cell-in-view {\n      color: ${cssVar.colorText};\n    }\n\n    &.${P}-dropdown .${P}-cell-inner {\n      position: relative;\n      z-index: 1;\n\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n\n      box-sizing: border-box;\n      min-width: 32px;\n      height: 32px;\n      border-radius: 999px;\n\n      font-size: 13px;\n      font-variant-numeric: tabular-nums;\n\n      transition:\n        background 150ms ${cssVar.motionEaseOut},\n        color 150ms ${cssVar.motionEaseOut};\n    }\n\n    &.${P}-dropdown\n      .${P}-cell:not(\n        .${P}-cell-disabled,\n        .${P}-cell-selected,\n        .${P}-cell-range-start,\n        .${P}-cell-range-end\n      ):hover\n      .${P}-cell-inner {\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    /* today: bold only, no ring, fill or border */\n    &.${P}-dropdown .${P}-cell-in-view.${P}-cell-today .${P}-cell-inner {\n      font-weight: ${cssVar.fontWeightStrong};\n    }\n\n    &.${P}-dropdown\n      :is(\n        .${P}-cell-in-view.${P}-cell-selected,\n          .${P}-cell-in-view.${P}-cell-range-start,\n          .${P}-cell-in-view.${P}-cell-range-end\n      )\n      .${P}-cell-inner {\n      font-weight: 600;\n      color: ${cssVar.colorBgContainer};\n      background: ${cssVar.colorText};\n    }\n\n    &.${P}-dropdown .${P}-cell-in-view.${P}-cell-in-range::before {\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &.${P}-dropdown .${P}-cell-in-view.${P}-cell-range-start:not(.${P}-cell-range-end)::before {\n      inset-inline-start: 50%;\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &.${P}-dropdown .${P}-cell-in-view.${P}-cell-range-end:not(.${P}-cell-range-start)::before {\n      inset-inline-end: 50%;\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &.${P}-dropdown .${P}-cell-disabled {\n      cursor: not-allowed;\n      color: ${cssVar.colorTextQuaternary};\n    }\n\n    &.${P}-dropdown .${P}-cell-disabled::before {\n      background: transparent;\n    }\n\n    /* month / quarter / year / decade: wider pills in a 3-column grid */\n    &.${P}-dropdown\n      :is(.${P}-month-panel, .${P}-quarter-panel, .${P}-year-panel, .${P}-decade-panel)\n      .${P}-cell {\n      padding-block: 8px;\n    }\n\n    &.${P}-dropdown\n      :is(.${P}-month-panel, .${P}-quarter-panel, .${P}-year-panel, .${P}-decade-panel)\n      .${P}-cell::before {\n      height: 36px;\n    }\n\n    &.${P}-dropdown\n      :is(.${P}-month-panel, .${P}-quarter-panel, .${P}-year-panel, .${P}-decade-panel)\n      .${P}-cell-inner {\n      min-width: 64px;\n      height: 36px;\n      padding-inline: 8px;\n      font-size: 14px;\n    }\n\n    /* decade labels (\"2020-2029\") stay on one line */\n    &.${P}-dropdown .${P}-decade-panel .${P}-cell-inner {\n      padding-inline: 6px;\n      font-size: 13px;\n      white-space: nowrap;\n    }\n\n    /* week number column: always on the week panel, on the date panel with showWeek */\n    &.${P}-dropdown :is(.${P}-week-panel, .${P}-date-panel-show-week) {\n      width: 320px;\n    }\n\n    &.${P}-dropdown .${P}-cell-week {\n      font-size: 12px;\n      color: ${cssVar.colorTextTertiary};\n    }\n\n    &.${P}-dropdown .${P}-date-panel-show-week .${P}-cell-week {\n      cursor: default;\n    }\n\n    /* week panel: the whole row is one tile, painted through each cell's band */\n    &.${P}-dropdown .${P}-week-panel .${P}-cell:hover .${P}-cell-inner {\n      background: none;\n    }\n\n    &.${P}-dropdown .${P}-week-panel .${P}-cell:first-child::before {\n      inset-inline-start: 2px;\n      border-start-start-radius: 999px;\n      border-end-start-radius: 999px;\n    }\n\n    &.${P}-dropdown .${P}-week-panel .${P}-cell:last-child::before {\n      inset-inline-end: 2px;\n      border-start-end-radius: 999px;\n      border-end-end-radius: 999px;\n    }\n\n    &.${P}-dropdown .${P}-week-panel-row:hover .${P}-cell::before {\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &.${P}-dropdown\n      .${P}-week-panel-row-range-hover\n      .${P}-cell::before,\n      &.${P}-dropdown\n      .${P}-week-panel-row-hover\n      .${P}-cell::before {\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    /* multiple: rc-picker marks every picked week but the first with \\`-row-hover\\` */\n    &.${P}-dropdown\n      :is(\n        .${P}-week-panel-row-selected,\n          .${P}-dropdown-multiple\n          .${P}-week-panel-row-hover,\n          .${P}-week-panel-row-range-start,\n          .${P}-week-panel-row-range-end\n      )\n      .${P}-cell {\n      color: ${cssVar.colorBgContainer};\n\n      &::before {\n        background: ${cssVar.colorText};\n      }\n\n      .${P}-cell-inner {\n        font-weight: 600;\n        box-shadow: none;\n      }\n    }\n\n    /* keyboard: the tile arrow keys moved to on month / quarter / year / decade panels */\n    &.${P}-dropdown .${P}-cell-keyboard-active {\n      display: none;\n    }\n\n    &.${P}-dropdown .${P}-cell-in-view:has(> .${P}-cell-keyboard-active) .${P}-cell-inner {\n      outline: 2px solid ${cssVar.colorPrimary};\n      outline-offset: 1px;\n    }\n\n    /* time: hour / minute / second / meridiem columns, beside the date panel with showTime */\n    &.${P}-dropdown .${P}-datetime-panel {\n      display: flex;\n      align-items: stretch;\n    }\n\n    &.${P}-dropdown .${P}-datetime-panel > .${P}-time-panel {\n      border-inline-start: 1px solid ${cssVar.colorBorderSecondary};\n    }\n\n    &.${P}-dropdown .${P}-time-panel {\n      display: flex;\n      flex-direction: column;\n      min-width: 0;\n    }\n\n    &.${P}-dropdown .${P}-time-panel .${P}-header-view {\n      height: 28px;\n      font-variant-numeric: tabular-nums;\n    }\n\n    &.${P}-dropdown .${P}-time-panel .${P}-content {\n      display: flex;\n      flex: auto;\n\n      height: 224px;\n      padding-block: 4px 12px;\n      padding-inline: 4px;\n    }\n\n    /* next to the date panel the columns take its height instead */\n    &.${P}-dropdown .${P}-datetime-panel .${P}-time-panel .${P}-content {\n      flex: 1 1 0;\n      height: auto;\n      min-height: 0;\n    }\n\n    &.${P}-dropdown .${P}-time-panel-column {\n      scrollbar-width: thin;\n\n      overflow-y: hidden;\n      flex: none;\n\n      width: 56px;\n      margin: 0;\n      padding: 0;\n\n      list-style: none;\n\n      /* lets the last option scroll up to the top, as in antd */\n      &::after {\n        content: '';\n        display: block;\n        height: calc(100% - 28px);\n      }\n\n      &:hover {\n        overflow-y: auto;\n      }\n    }\n\n    &.${P}-dropdown .${P}-time-panel-column + .${P}-time-panel-column {\n      border-inline-start: 1px solid ${cssVar.colorBorderSecondary};\n    }\n\n    &.${P}-dropdown .${P}-time-panel-cell {\n      cursor: pointer;\n      padding-block: 1px;\n      padding-inline: 4px;\n    }\n\n    &.${P}-dropdown .${P}-time-panel-cell-inner {\n      height: 26px;\n      border-radius: 6px;\n\n      font-size: 13px;\n      font-variant-numeric: tabular-nums;\n      line-height: 26px;\n      color: ${cssVar.colorText};\n      text-align: center;\n\n      transition:\n        background 150ms ${cssVar.motionEaseOut},\n        color 150ms ${cssVar.motionEaseOut};\n    }\n\n    &.${P}-dropdown\n      .${P}-time-panel-cell:not(.${P}-time-panel-cell-disabled, .${P}-time-panel-cell-selected):hover\n      .${P}-time-panel-cell-inner {\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &.${P}-dropdown .${P}-time-panel-cell-selected .${P}-time-panel-cell-inner {\n      font-weight: 600;\n      color: ${cssVar.colorBgContainer};\n      background: ${cssVar.colorText};\n    }\n\n    &.${P}-dropdown .${P}-time-panel-cell-disabled {\n      cursor: not-allowed;\n\n      .${P}-time-panel-cell-inner {\n        color: ${cssVar.colorTextQuaternary};\n      }\n    }\n\n    /* footer: no background of its own; dividers match the presets sidebar divider */\n\n    /* footer: ONE row in one container — renderExtraFooter content on the start side,\n       Today / Now / OK on the end side — under a single divider. No background. */\n    &.${P}-dropdown .${P}-footer {\n      display: flex;\n      gap: 8px;\n      align-items: center;\n\n      min-width: 0;\n      border-block-start: 1px solid ${cssVar.colorFillSecondary};\n\n      background: none;\n    }\n\n    &.${P}-dropdown.${P}-dropdown-dark .${P}-footer {\n      border-block-start-color: ${cssVar.colorFillTertiary};\n    }\n\n    &.${P}-dropdown .${P}-footer-extra {\n      flex: 1;\n\n      min-width: 0;\n      padding-block: 8px;\n      padding-inline: 12px;\n\n      font-size: 13px;\n      line-height: 20px;\n      color: ${cssVar.colorTextSecondary};\n      text-align: start;\n    }\n\n    &.${P}-dropdown .${P}-footer-extra + .${P}-ranges {\n      flex: none;\n      padding-inline-start: 0;\n    }\n\n    &.${P}-dropdown .${P}-ranges {\n      display: flex;\n      flex: 1;\n      gap: 8px;\n      align-items: center;\n      justify-content: space-between;\n\n      margin: 0;\n      padding-block: 8px;\n      padding-inline: 12px;\n\n      list-style: none;\n    }\n\n    &.${P}-dropdown .${P}-ranges > .${P}-now {\n      margin-inline: auto;\n    }\n\n    /* Now on the start side, OK on the end side */\n    &.${P}-dropdown .${P}-ranges > .${P}-now:has(+ .${P}-ok) {\n      margin-inline: 0;\n    }\n\n    &.${P}-dropdown .${P}-ranges > .${P}-ok {\n      margin-inline-start: auto;\n    }\n\n    &.${P}-dropdown .${P}-now-btn {\n      ${focusRing};\n      cursor: pointer;\n\n      padding-block: 2px;\n      padding-inline: 8px;\n      border-radius: 6px;\n\n      font-size: 13px;\n      color: ${cssVar.colorText};\n\n      &:hover {\n        background: ${cssVar.colorFillTertiary};\n      }\n    }\n\n    &.${P}-dropdown .${P}-now-btn-disabled {\n      cursor: not-allowed;\n      color: ${cssVar.colorTextQuaternary};\n    }\n\n    /* motion (transitionName = lobe-picker-slide-up) */\n    &.${MOTION}-appear, &.${MOTION}-enter {\n      transform-origin: top center;\n    }\n\n    /* rc-motion's prepare frame is where the trigger measures and aligns the popup, so it\n       must stay untransformed (a scaled box would misalign). Without an opacity of its own\n       it painted fully visible at the final spot for one frame, then snapped back to the\n       start state below and animated in again: that flash + jump read as jitter on open. */\n    &.${MOTION}-appear-prepare, &.${MOTION}-enter-prepare {\n      opacity: 0;\n    }\n\n    &.${MOTION}-appear-start, &.${MOTION}-enter-start {\n      transform: translateY(-4px) scale(0.98);\n      opacity: 0;\n    }\n\n    &.${MOTION}-appear-active, &.${MOTION}-enter-active {\n      transform: none;\n      opacity: 1;\n      transition:\n        opacity 150ms ${cssVar.motionEaseOut},\n        transform 150ms ${cssVar.motionEaseOut};\n    }\n\n    &.${MOTION}-leave-active {\n      transform: translateY(-4px) scale(0.98);\n      opacity: 0;\n      transition:\n        opacity 100ms ${cssVar.motionEaseInOut},\n        transform 100ms ${cssVar.motionEaseInOut};\n    }\n  `,\n}));\n"],"mappings":"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"}

package/es/base-ui/DatePicker/type.d.mts

@@ -1,35 +1,291 @@
-import { InputSize, InputVariant } from "../Input/type.mjs";
-import { CalendarMode } from "./calendar.mjs";
-import { CSSProperties, ReactNode } from "react";
+import { CSSProperties, ComponentType, FocusEvent, MouseEvent, ReactNode, Ref } from "react";
+import { Dayjs } from "dayjs";
+import { PickerProps, PickerRef, RangePickerProps } from "@rc-component/picker";
+import { GenerateConfig } from "@rc-component/picker/generate";
+import { BaseInfo, CellRender, CellRenderInfo, Components, Locale, PanelMode, PickerMode, RangePickerRef, SharedPanelProps, ValueDate } from "@rc-component/picker/interface";
 //#region src/base-ui/DatePicker/type.d.ts
-interface PickerCommonProps {
-  allowClear?: boolean;
-  className?: string;
-  disabled?: boolean;
-  disabledDate?: (date: Date) => boolean;
-  format?: string | ((date: Date) => string);
-  max?: Date;
-  min?: Date;
+/** rc-picker's locale (texts and formats) plus antd's per-`picker` placeholders. */
+interface PickerLocaleLang extends Locale {
+  monthPlaceholder?: string;
+  placeholder?: string;
+  quarterPlaceholder?: string;
+  rangeMonthPlaceholder?: [string, string];
+  rangePlaceholder?: [string, string];
+  rangeQuarterPlaceholder?: [string, string];
+  rangeWeekPlaceholder?: [string, string];
+  rangeYearPlaceholder?: [string, string];
+  weekPlaceholder?: string;
+  yearPlaceholder?: string;
+}
+/** Placeholders of `picker="time"`. */
+interface TimePickerLocale {
+  placeholder?: string;
+  rangePlaceholder?: [string, string];
+}
+/** antd's `PickerLocale`, the shape of the `locale` prop. */
+interface PickerLocale {
+  /** @deprecated Kept for antd parity; use `lang.fieldDateFormat`. */
+  dateFormat?: string;
+  /** @deprecated Kept for antd parity; use `lang.fieldDateTimeFormat`. */
+  dateTimeFormat?: string;
+  lang: PickerLocaleLang;
+  /** @deprecated Kept for antd parity; use `lang.fieldMonthFormat`. */
+  monthFormat?: string;
+  timePickerLocale: TimePickerLocale;
+  /** @deprecated Kept for antd parity; use `lang.fieldWeekFormat`. */
+  weekFormat?: string;
+}
+/**
+ * The `locale` prop: a full `PickerLocale` (e.g. a spread of an exported default locale) or
+ * only the fields to change — `lang` and `timePickerLocale` are merged field by field over the
+ * default locale generated from `@lobehub/ui/i18n`.
+ */
+type PickerLocaleInput = Omit<Partial<PickerLocale>, 'lang' | 'timePickerLocale'> & {
+  lang?: Partial<PickerLocaleLang>;
+  timePickerLocale?: TimePickerLocale;
+};
+/** A `presets` entry: `value` may be a function, evaluated when the preset is hovered or picked. */
+type PresetDate<T = Dayjs> = ValueDate<T>;
+/** `components`: replace a panel (`date` / `week` / … / `time`), the `input` or the OK `button`. */
+type PickerComponents = Components<Dayjs>;
+/** Props a custom panel in `components` receives (`value`, `onSelect`, `onHover`, …). */
+type PickerPanelProps = SharedPanelProps<Dayjs>;
+/** `middle` is kept as an alias of `medium`. */
+type PickerSize = 'large' | 'medium' | 'small' | 'middle';
+type PickerVariant = 'outlined' | 'borderless' | 'filled' | 'underlined';
+type PickerStatus = 'error' | 'warning';
+type PickerPlacement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
+/** @deprecated Use `PickerMode` (the `picker` prop) instead. */
+type CalendarMode = 'date' | 'month' | 'year';
+/** Semantic parts of the input box (Semantic DOM). */
+type PickerSemanticName = 'root' | 'prefix' | 'input' | 'suffix';
+/** Semantic parts of the popup (Semantic DOM, `classNames.popup` / `styles.popup`). */
+type PickerPopupSemanticName = 'root' | 'container' | 'header' | 'body' | 'content' | 'item' | 'footer';
+interface PickerSemanticClassNames extends Partial<Record<PickerSemanticName, string>> {
+  /** A string is the popup `root` class. */
+  popup?: string | Partial<Record<PickerPopupSemanticName, string>>;
+}
+interface PickerSemanticStyles extends Partial<Record<PickerSemanticName, CSSProperties>> {
+  popup?: Partial<Record<PickerPopupSemanticName, CSSProperties>>;
+}
+/** `classNames`: an object, or a function of `{ props }` returning one. */
+type PickerClassNames<P = any> = PickerSemanticClassNames | ((info: {
+  props: P;
+}) => PickerSemanticClassNames);
+/** `styles`: an object, or a function of `{ props }` returning one. */
+type PickerStyles<P = any> = PickerSemanticStyles | ((info: {
+  props: P;
+}) => PickerSemanticStyles);
+/** Props rc-picker owns internally or that lobe wires up itself. */
+type InternalRcProps = 'classNames' | 'generateConfig' | 'locale' | 'prefixCls' | 'styles';
+type MultipleRcProps = 'maxTagCount' | 'multiple' | 'removeIcon' | 'tagRender';
+type ValueRcProps = 'changeOnBlur' | 'defaultValue' | 'onCalendarChange' | 'onChange' | 'onOk' | 'placeholder' | 'placement' | 'size' | 'value';
+interface LobePickerProps {
+  /** @deprecated Use `variant` instead; `bordered={false}` maps to `variant="borderless"`. */
+  bordered?: boolean;
+  /**
+   * @deprecated Use `needConfirm={false}` instead: the value is committed when the popup
+   * closes, without the OK button. Ignored when `needConfirm` is set.
+   */
+  changeOnBlur?: boolean;
+  /** @deprecated Use `classNames.popup.root` instead. */
+  dropdownClassName?: string;
+  /**
+   * Popup position relative to the input.
+   * @default 'bottomLeft' ('bottomRight' when `direction="rtl"`)
+   */
+  placement?: PickerPlacement;
+  /** @deprecated Use `classNames.popup.root` instead. */
+  popupClassName?: string;
+  /** @deprecated Use `styles.popup.root` instead. */
+  popupStyle?: CSSProperties;
+  /** Lobe look: drop shadow under the input box. */
   shadow?: boolean;
-  size?: InputSize;
-  style?: CSSProperties;
-  variant?: InputVariant;
+  /** @default 'medium' */
+  size?: PickerSize;
+  status?: PickerStatus;
+  /** @default 'outlined' (light) / 'filled' (dark) */
+  variant?: PickerVariant;
+}
+/** Props `tagRender` receives for each picked date in `multiple` mode. */
+interface PickerTagProps<DateType extends object = Dayjs> {
+  closable: boolean;
+  disabled: boolean;
+  /** The date formatted with `format`. */
+  label: ReactNode;
+  /** Removes the date from the value. */
+  onClose: (event?: MouseEvent<HTMLElement>) => void;
+  value: DateType;
 }
-interface DatePickerProps extends PickerCommonProps {
-  defaultValue?: Date | null;
+/** `dateString` of a value: a string per date in `multiple` mode. */
+type PickerDateStrings<ValueType> = ValueType extends readonly unknown[] ? string[] : string | null;
+/**
+ * antd's `PickerPropsWithMultiple`: `InnerPickerProps` with the value props typed by
+ * `ValueType` — `DateType` for one date, `DateType[]` with `multiple`.
+ */
+type PickerPropsWithMultiple<DateType, InnerPickerProps, ValueType = DateType> = Omit<InnerPickerProps, 'defaultValue' | 'onCalendarChange' | 'onChange' | 'onOk' | 'value'> & {
+  defaultValue?: ValueType | null;
+  onCalendarChange?: (date: ValueType | null, dateString: PickerDateStrings<ValueType>, info: BaseInfo) => void;
+  /** Cleared: `null` for one date, `[]` with `multiple`. */
+  onChange?: (date: ValueType | null, dateString: PickerDateStrings<ValueType>) => void;
+  onOk?: (date?: ValueType | null) => void;
+  value?: ValueType | null;
+};
+/**
+ * DatePicker props other than the value ones, which `PickerPropsWithMultiple` adds.
+ * `DateType` is the date library's type (`Dayjs`, or another one with `generatePicker`).
+ */
+interface DatePickerBaseProps<DateType extends object = Dayjs> extends Omit<PickerProps<DateType>, InternalRcProps | MultipleRcProps | ValueRcProps>, LobePickerProps {
+  /** Semantic DOM class names: `root` / `prefix` / `input` / `suffix` and `popup.*`. */
+  classNames?: PickerClassNames<DatePickerProps<any>>;
+  /** @deprecated Use `renderExtraFooter` instead. */
   footer?: ReactNode;
-  mode?: CalendarMode;
-  onChange?: (date: Date | null) => void;
+  /**
+   * antd `PickerLocale`: `lang` texts and formats (`fieldDateFormat`, `yearFormat`,
+   * `shortWeekDays`, …) and `timePickerLocale`. Defaults to the locale generated from the
+   * `@lobehub/ui/i18n` resources in context.
+   */
+  locale?: PickerLocaleInput;
+  /** @deprecated Use `maxDate` instead. */
+  max?: DateType;
+  /**
+   * `multiple`: at most this many tags; `'responsive'` fits as many as the width allows.
+   * The rest collapse into a `+ N ...` tag.
+   */
+  maxTagCount?: number | 'responsive';
+  /** @deprecated Use `minDate` instead. */
+  min?: DateType;
+  /**
+   * Pick several dates, shown as tags; clicking a picked cell again removes it. Works on
+   * every `picker` except with `showTime`. Values are `Dayjs[]`, sorted unless
+   * `order={false}`. No OK button (`needConfirm` defaults to `false`): `onCalendarChange`
+   * fires on each click and `onChange` once the popup closes.
+   */
+  multiple?: boolean;
+  /** @deprecated Use `onCalendarChange` instead. Not called with `multiple`. */
+  onSelect?: (date: DateType) => void;
+  /**
+   * `multiple`: sort the picked dates; `false` keeps them in picking order.
+   * @default true
+   */
+  order?: boolean;
   placeholder?: string;
-  value?: Date | null;
+  ref?: Ref<PickerRef>;
+  /** `multiple`: the remove icon of each tag. */
+  removeIcon?: ReactNode;
+  /** Semantic DOM styles: `root` / `prefix` / `input` / `suffix` and `popup.*`. */
+  styles?: PickerStyles<DatePickerProps<any>>;
+  /** `multiple`: render each picked date's tag, e.g. with base-ui `Tag`. */
+  tagRender?: (props: PickerTagProps<DateType>) => ReactNode;
 }
-type DateRangeValue = [Date | null, Date | null];
-interface DateRangePickerProps extends PickerCommonProps {
-  defaultValue?: DateRangeValue;
-  onChange?: (range: DateRangeValue) => void;
+/**
+ * `ValueType` is `Dayjs` (default) or `Dayjs[]` with `multiple`; `<DatePicker multiple>`
+ * infers `Dayjs[]` by itself.
+ */
+type DatePickerProps<ValueType = Dayjs> = PickerPropsWithMultiple<Dayjs, DatePickerBaseProps, ValueType>;
+type DateRangeValue<DateType extends object = Dayjs> = [DateType | null, DateType | null];
+/** Which end of a range an event belongs to. */
+interface RangeInfo {
+  range: 'start' | 'end';
+}
+/** `info.from` is the end picked first in the current range selection. */
+type RangeDisabledDate<DateType extends object = Dayjs> = (current: DateType, info: {
+  from?: DateType;
+  type: PanelMode;
+}) => boolean;
+type RangeRcProps = 'allowEmpty' | 'disabled' | 'disabledDate' | 'id' | 'onBlur' | 'onFocus' | 'order';
+interface DateRangePickerProps<DateType extends object = Dayjs> extends Omit<RangePickerProps<DateType>, InternalRcProps | RangeRcProps | ValueRcProps>, LobePickerProps {
+  /**
+   * Allow leaving the start / end empty; `true` applies to both ends.
+   * @default [false, false]
+   */
+  allowEmpty?: boolean | [boolean, boolean];
+  /** Semantic DOM class names, see `DatePickerProps['classNames']`. */
+  classNames?: PickerClassNames<DateRangePickerProps<DateType>>;
+  defaultValue?: [DateType | null | undefined, DateType | null | undefined];
+  /** Disable the whole picker, or each end separately with `[start, end]`. */
+  disabled?: boolean | [boolean, boolean];
+  /** Receives `info.from` once one end is picked, e.g. to limit the range length. */
+  disabledDate?: RangeDisabledDate<DateType>;
+  /** @deprecated Use `renderExtraFooter` instead. */
+  footer?: ReactNode;
+  /** Ids of the start and end inputs. */
+  id?: {
+    end?: string;
+    start?: string;
+  };
+  /** antd `PickerLocale`, see `DatePickerProps['locale']`. */
+  locale?: PickerLocaleInput;
+  /** @deprecated Use `maxDate` instead. */
+  max?: DateType;
+  /** @deprecated Use `minDate` instead. */
+  min?: DateType;
+  onBlur?: (event: FocusEvent<HTMLElement>, info: RangeInfo) => void;
+  onCalendarChange?: (dates: DateRangeValue<DateType>, dateStrings: [string, string], info: RangeInfo) => void;
+  onChange?: (dates: DateRangeValue<DateType> | null, dateStrings: [string, string] | null) => void;
+  onFocus?: (event: FocusEvent<HTMLElement>, info: RangeInfo) => void;
+  onOk?: (dates: DateRangeValue<DateType>) => void;
+  /**
+   * Swap the ends when the end is earlier than the start; `false` keeps them as entered.
+   * @default true
+   */
+  order?: boolean;
   placeholder?: [string, string];
-  value?: DateRangeValue;
+  /** `focus(index)` / `focus({ index })` focuses the start (`0`) or end (`1`) input. */
+  ref?: Ref<RangePickerRef>;
+  /** Semantic DOM styles, see `DatePickerProps['styles']`. */
+  styles?: PickerStyles<DateRangePickerProps<DateType>>;
+  value?: [DateType | null | undefined, DateType | null | undefined] | null;
+}
+/** antd `PickerProps<DateType>`: DatePicker props over any date library's type. */
+type PickerProps$1<DateType extends object = Dayjs, ValueType = DateType> = PickerPropsWithMultiple<DateType, DatePickerBaseProps<DateType>, ValueType>;
+/** Props of `DatePicker.WeekPicker` / `MonthPicker` / … : `picker` is fixed. */
+type PresetPickerProps<DateType extends object = Dayjs, ValueType = DateType> = Omit<PickerProps$1<DateType, ValueType>, 'picker'>;
+type WeekPickerProps<ValueType = Dayjs> = PresetPickerProps<Dayjs, ValueType>;
+type MonthPickerProps<ValueType = Dayjs> = PresetPickerProps<Dayjs, ValueType>;
+type YearPickerProps<ValueType = Dayjs> = PresetPickerProps<Dayjs, ValueType>;
+type QuarterPickerProps<ValueType = Dayjs> = PresetPickerProps<Dayjs, ValueType>;
+/** antd `GenericTimePickerProps`: `DatePicker.TimePicker` has no `picker` / `showTime`. */
+type GenericTimePickerProps<DateType extends object = Dayjs, ValueType = DateType> = Omit<PickerProps$1<DateType, ValueType>, 'picker' | 'showTime'>;
+type TimePickerProps<ValueType = Dayjs> = GenericTimePickerProps<Dayjs, ValueType>;
+/** antd-style alias of `DateRangePickerProps`. */
+type RangePickerProps$1<DateType extends object = Dayjs> = DateRangePickerProps<DateType>;
+/** antd `DatePickerSemanticType`: the Semantic DOM `classNames` / `styles` shapes. */
+interface DatePickerSemanticType {
+  classNames?: PickerSemanticClassNames;
+  styles?: PickerSemanticStyles;
+}
+/**
+ * A single-date picker component: `multiple` (as `IsMultiple`) picks `DateType[]` values,
+ * otherwise `DateType`; a `value` / `defaultValue` infers `ValueType` directly.
+ */
+interface SinglePickerComponent<DateType extends object, InnerProps = DatePickerBaseProps<DateType>> {
+  <IsMultiple extends boolean = false, ValueType = IsMultiple extends true ? DateType[] : DateType>(props: PickerPropsWithMultiple<DateType, InnerProps, ValueType> & {
+    multiple?: IsMultiple;
+  }): ReactNode;
+  displayName?: string;
+}
+interface RangePickerComponent<DateType extends object> {
+  (props: DateRangePickerProps<DateType>): ReactNode;
+  displayName?: string;
+}
+/** What `generatePicker(generateConfig)` returns: DatePicker with its static pickers. */
+interface GeneratedDatePicker<DateType extends object> extends SinglePickerComponent<DateType> {
+  MonthPicker: SinglePickerComponent<DateType, Omit<DatePickerBaseProps<DateType>, 'picker'>>;
+  QuarterPicker: SinglePickerComponent<DateType, Omit<DatePickerBaseProps<DateType>, 'picker'>>;
+  RangePicker: RangePickerComponent<DateType>;
+  TimePicker: SinglePickerComponent<DateType, Omit<DatePickerBaseProps<DateType>, 'picker' | 'showTime'>>;
+  WeekPicker: SinglePickerComponent<DateType, Omit<DatePickerBaseProps<DateType>, 'picker'>>;
+  YearPicker: SinglePickerComponent<DateType, Omit<DatePickerBaseProps<DateType>, 'picker'>>;
+}
+/** The default `DatePicker` (Dayjs), with antd's pure panels and `generatePicker`. */
+interface DatePickerType extends GeneratedDatePicker<Dayjs> {
+  /** Debug only: the popup panel rendered inline, always open (antd `render-panel`). */
+  _InternalPanelDoNotUseOrYouWillBeFired: ComponentType<DatePickerProps<any>>;
+  /** Debug only: the RangePicker popup panel rendered inline, always open. */
+  _InternalRangePanelDoNotUseOrYouWillBeFired: ComponentType<DateRangePickerProps>;
+  generatePicker: <DateType extends object>(generateConfig: GenerateConfig<DateType>) => GeneratedDatePicker<DateType>;
 }
 //#endregion
-export { type CalendarMode, DatePickerProps, DateRangePickerProps, DateRangeValue };
+export { CalendarMode, type CellRender, type CellRenderInfo, DatePickerBaseProps, DatePickerProps, DatePickerSemanticType, DatePickerType, DateRangePickerProps, DateRangeValue, GeneratedDatePicker, GenericTimePickerProps, MonthPickerProps, type PanelMode, PickerClassNames, PickerComponents, PickerDateStrings, PickerLocale, PickerLocaleInput, PickerLocaleLang, type PickerMode, PickerPanelProps, PickerPlacement, PickerPopupSemanticName, PickerProps$1 as PickerProps, PickerPropsWithMultiple, type PickerRef, PickerSemanticClassNames, PickerSemanticName, PickerSemanticStyles, PickerSize, PickerStatus, PickerStyles, PickerTagProps, PickerVariant, PresetDate, PresetPickerProps, QuarterPickerProps, RangeDisabledDate, RangeInfo, RangePickerComponent, RangePickerProps$1 as RangePickerProps, type RangePickerRef, SinglePickerComponent, TimePickerLocale, TimePickerProps, WeekPickerProps, YearPickerProps };
 //# sourceMappingURL=type.d.mts.map

package/es/base-ui/DatePicker/usePanelKeyboard.mjs

@@ -0,0 +1,230 @@
+"use client";
+import generateConfig from "./generateConfig.mjs";
+import { PREFIX_CLS } from "./style.mjs";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/base-ui/DatePicker/usePanelKeyboard.tsx
+const isGridMode = (mode) => mode === "month" || mode === "quarter" || mode === "year" || mode === "decade";
+/** Cell steps per panel: one cell (←/→), one row (↑/↓) and one page (PageUp/PageDown). */
+const GRID = {
+	decade: {
+		col: 10,
+		page: 100,
+		row: 30,
+		unit: "year"
+	},
+	month: {
+		col: 1,
+		page: 12,
+		row: 3,
+		unit: "month"
+	},
+	quarter: {
+		col: 3,
+		page: 12,
+		row: 12,
+		unit: "month"
+	},
+	year: {
+		col: 1,
+		page: 10,
+		row: 3,
+		unit: "year"
+	}
+};
+const defaultConfig = generateConfig;
+/** Months since year 0, to compare tiles by position. */
+const monthIndex = (date, config) => config.getYear(date) * 12 + config.getMonth(date);
+/** First cell of the page `date` is on: Jan / Q1 of its year, first year of its decade… */
+const getPageStart = (date, mode, config = defaultConfig) => {
+	const year = config.getYear(date);
+	const startYear = mode === "year" ? Math.floor(year / 10) * 10 : mode === "decade" ? Math.floor(year / 100) * 100 : year;
+	const start = config.setDate(config.setMonth(config.setYear(date, startYear), 0), 1);
+	return config.setHour(config.setMinute(config.setSecond(config.setMillisecond(start, 0), 0), 0), 0);
+};
+const getPageEnd = (date, mode, config) => {
+	const start = getPageStart(date, mode, config);
+	if (mode === "month") return config.setMonth(start, 11);
+	if (mode === "quarter") return config.setMonth(start, 9);
+	return config.addYear(start, mode === "year" ? 9 : 90);
+};
+/** Whether `a` and `b` fall in the same tile of a `mode` panel. */
+const isSameCell = (a, b, mode, config = defaultConfig) => {
+	const yearA = config.getYear(a);
+	const yearB = config.getYear(b);
+	if (mode === "decade") return Math.floor(yearA / 10) === Math.floor(yearB / 10);
+	if (mode === "year") return yearA === yearB;
+	if (mode === "quarter") return yearA === yearB && Math.floor(config.getMonth(a) / 3) === Math.floor(config.getMonth(b) / 3);
+	return yearA === yearB && config.getMonth(a) === config.getMonth(b);
+};
+/**
+* Where `key` moves the active tile of a `mode` panel, or `undefined` for other keys.
+* `rtl` mirrors ←/→.
+*/
+const moveGridCell = (date, key, mode, rtl = false, config = defaultConfig) => {
+	const { col, page, row, unit } = GRID[mode];
+	const add = (diff) => unit === "year" ? config.addYear(date, diff) : config.addMonth(date, diff);
+	switch (key) {
+		case "ArrowLeft": return add(rtl ? col : -col);
+		case "ArrowRight": return add(rtl ? -col : col);
+		case "ArrowUp": return add(-row);
+		case "ArrowDown": return add(row);
+		case "PageUp": return add(-page);
+		case "PageDown": return add(page);
+		case "Home": return getPageStart(date, mode, config);
+		case "End": return getPageEnd(date, mode, config);
+	}
+};
+const ACTIVE_CLS = `${PREFIX_CLS}-cell-keyboard-active`;
+const toPair = (value) => Array.isArray(value) ? [value[0] ?? void 0, value[1] ?? void 0] : [value ?? void 0, void 0];
+/** The selection the keys start from; with `multiple`, the last picked date. */
+const toValuePair = (value, range) => !range && Array.isArray(value) ? toPair(value.at(-1)) : toPair(value);
+/**
+* lobe enhancement over rc-picker (ADR §8 step 6): arrow keys, PageUp / PageDown and
+* Home / End move an active tile on the month, quarter, year and decade panels while
+* focus stays in the input, and Enter picks it — as a click on that tile would.
+*
+* rc-picker has no grid navigation of its own, so this is layered on top: a capture
+* listener reads the keys before rc-picker's input handlers, the active tile is marked
+* through `cellRender`, and `pickerValue` is driven so the active tile stays on screen.
+* The date and week panels keep the input's text-editing keys, as in antd.
+*/
+const usePanelKeyboard = ({ cellRender, dateRender, defaultOpen, defaultPickerValue, defaultValue, direction, generateConfig: config = defaultConfig, mode, monthCellRender, onChange, onFocus, onOpenChange, onPanelChange, onPickerValueChange, open, picker = "date", pickerValue, range, value }) => {
+	const scopeId = useId();
+	const scopeClassName = `${PREFIX_CLS}-kb-${scopeId.replaceAll(/[^\w-]/g, "")}`;
+	const [innerOpen, setInnerOpen] = useState(!!defaultOpen);
+	const mergedOpen = open ?? innerOpen;
+	const [activeIndex, setActiveIndex] = useState(0);
+	const [innerMode, setInnerMode] = useState(picker);
+	const [innerPickerValue, setInnerPickerValue] = useState([void 0, void 0]);
+	const [activeCell, setActiveCell] = useState();
+	const [innerValue, setInnerValue] = useState();
+	const panelMode = (Array.isArray(mode) ? mode[activeIndex] : mode) ?? innerMode;
+	const resetKey = `${mergedOpen}|${activeIndex}|${picker}`;
+	const [prevResetKey, setPrevResetKey] = useState(resetKey);
+	if (prevResetKey !== resetKey) {
+		setPrevResetKey(resetKey);
+		setInnerMode(picker);
+		setActiveCell(void 0);
+	}
+	const [prevPanelMode, setPrevPanelMode] = useState(panelMode);
+	if (prevPanelMode !== panelMode) {
+		setPrevPanelMode(panelMode);
+		setActiveCell(void 0);
+	}
+	const mergedPickerValue = pickerValue === void 0 ? innerPickerValue : toPair(pickerValue);
+	const state = {
+		activeCell,
+		activeIndex,
+		config,
+		defaultPickerValue: toPair(defaultPickerValue),
+		direction,
+		mergedPickerValue,
+		onPickerValueChange,
+		panelMode,
+		picker,
+		range,
+		value: value === void 0 ? innerValue ?? toValuePair(defaultValue, range) : toValuePair(value, range)
+	};
+	const stateRef = useRef(state);
+	stateRef.current = state;
+	const commitPickerValue = useCallback((next) => {
+		const { activeIndex, mergedPickerValue, onPickerValueChange, panelMode, range } = stateRef.current;
+		const nextPair = [...mergedPickerValue];
+		nextPair[activeIndex] = next;
+		setInnerPickerValue(nextPair);
+		if (range) onPickerValueChange?.(nextPair, {
+			mode: [panelMode, panelMode],
+			range: activeIndex === 1 ? "end" : "start",
+			source: "panel"
+		});
+		else onPickerValueChange?.(next, {
+			mode: panelMode,
+			source: "panel"
+		});
+	}, []);
+	useEffect(() => {
+		if (!mergedOpen) return;
+		const onKeyDown = (event) => {
+			const { activeCell, activeIndex, config, defaultPickerValue, direction, mergedPickerValue, panelMode, picker, range, value } = stateRef.current;
+			if (!isGridMode(panelMode) || event.altKey || event.ctrlKey || event.metaKey) return;
+			if (!(event.target instanceof Element) || !event.target.closest(`.${scopeClassName}`)) return;
+			if (event.key === "Enter") {
+				if (!activeCell) return;
+				const cells = [...document.querySelectorAll(`.${scopeClassName} .${ACTIVE_CLS}`)].map((node) => node.closest("td")).filter((node) => !!node);
+				const cell = cells.find((node) => node.classList.contains(`${PREFIX_CLS}-cell-in-view`));
+				event.preventDefault();
+				event.stopPropagation();
+				(cell ?? cells[0])?.click();
+				return;
+			}
+			const pageDate = mergedPickerValue[activeIndex] ?? defaultPickerValue[activeIndex] ?? value[activeIndex] ?? config.getNow();
+			const rtl = direction === "rtl";
+			const pages = range && panelMode === picker ? 2 : 1;
+			const pageIndex = (date) => monthIndex(getPageStart(date, panelMode, config), config);
+			const firstPage = pageIndex(pageDate);
+			const lastPage = pageIndex(moveGridCell(pageDate, "PageDown", panelMode, rtl, config));
+			const isVisible = (date) => {
+				const page = pageIndex(date);
+				return page === firstPage || pages === 2 && page === lastPage;
+			};
+			const selected = value[activeIndex];
+			const base = activeCell && isVisible(activeCell) ? activeCell : selected && isVisible(selected) ? selected : void 0;
+			const next = base ? moveGridCell(base, event.key, panelMode, rtl, config) : moveGridCell(pageDate, event.key, panelMode, rtl, config) && pageDate;
+			if (!next) return;
+			event.preventDefault();
+			event.stopPropagation();
+			setActiveCell(next);
+			if (pageIndex(next) < firstPage) commitPickerValue(next);
+			else if (!isVisible(next)) commitPickerValue(pages === 2 ? moveGridCell(next, "PageUp", panelMode, rtl, config) : next);
+		};
+		document.addEventListener("keydown", onKeyDown, true);
+		return () => document.removeEventListener("keydown", onKeyDown, true);
+	}, [
+		mergedOpen,
+		scopeClassName,
+		commitPickerValue
+	]);
+	const mergedCellRender = (current, info) => {
+		let node = info.originNode;
+		if (cellRender) node = cellRender(current, info);
+		else if (dateRender && info.type === "date") node = dateRender(current, info.today);
+		else if (monthCellRender && info.type === "month") node = monthCellRender(current, info.locale);
+		if (!activeCell || info.type !== panelMode || !isGridMode(info.type)) return node;
+		if (!isSameCell(current, activeCell, info.type, config)) return node;
+		return /* @__PURE__ */ jsxs(Fragment$1, { children: [node, /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: ACTIVE_CLS
+		})] });
+	};
+	return {
+		cellRender: mergedCellRender,
+		onChange: (date, dateString) => {
+			setInnerValue(toValuePair(date, range));
+			onChange?.(date, dateString);
+		},
+		onFocus: (event, info) => {
+			if (range && info?.range) setActiveIndex(info.range === "end" ? 1 : 0);
+			onFocus?.(event, info);
+		},
+		onOpenChange: (next) => {
+			setInnerOpen(next);
+			onOpenChange?.(next);
+		},
+		onPanelChange: (date, nextMode) => {
+			setInnerMode(Array.isArray(nextMode) ? nextMode[stateRef.current.activeIndex] : nextMode);
+			onPanelChange?.(date, nextMode);
+		},
+		onPickerValueChange: (date, info) => {
+			setInnerPickerValue(toPair(date));
+			onPickerValueChange?.(date, info);
+		},
+		/** Controlled once known, so a key can move the visible page. */
+		pickerValue: pickerValue !== void 0 || innerPickerValue.some(Boolean) ? range ? mergedPickerValue : mergedPickerValue[0] : void 0,
+		scopeClassName
+	};
+};
+//#endregion
+export { getPageStart, isSameCell, moveGridCell, usePanelKeyboard };
+
+//# sourceMappingURL=usePanelKeyboard.mjs.map