feat: DatePicker add date range picker

[TinaPeach]

No description provided.

[Copilot]

Pull Request Overview

This PR adds support for a date range picker to the DatePicker component and updates the theming tokens, types, demos, and tests accordingly.

• New tokens are introduced for styling the date range elements.
• The DatePicker component is modified to handle range values with updates to state management and rendering.
• Documentation, test cases, snapshots, and type definitions are updated to support date range functionality.

Reviewed Changes

Copilot reviewed 22 out of 22 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/arcodesign/tokens/*	Added new tokens for date range background, font size, padding, etc.
packages/arcodesign/components/date-picker/*	Updated DatePicker to support date range picker functionality and added new props and related logic.
packages/arcodesign/components/picker/*	Added renderExtraHeader prop to allow custom header rendering.
packages/arcodesign/components/form/linked-container.tsx	Enhanced linked container to handle range values.
packages/arcodesign/components/date-picker/demo/, test/, README*	Updated demos, tests, and documentation to reflect the new API.

Comments suppressed due to low confidence (2)

packages/arcodesign/components/date-picker/index.tsx:63

• [nitpick] The local variables minTs and maxTs obtained from useMemo shadow the prop names (userSetMinTs, userSetMaxTs), which could make the code harder to follow. Consider renaming them (e.g., computedMinTs, computedMaxTs) for improved clarity.

const [minTs, maxTs] = useMemo(() => { return _updateTimeScope(); }, [userSetMinTs, userSetMaxTs, activeTabIndex]);

packages/arcodesign/components/date-picker/index.tsx:337

• [nitpick] The use of reduce here to build an array of date objects is a bit compact and may be less readable. Consider refactoring this logic into a more explicit loop or function for better clarity.

nowDateObj = keyOptions.reduce((arr, key) => { arr[0][key] = leftTimeObj[key]; arr[1][key] = rightTimeObj[key]; return arr; }, [{} as IDateObj, {} as IDateObj]);