Skip to content

Conversation

@futjesus
Copy link
Member

@futjesus futjesus commented Jan 22, 2026

Summary

  • Add new DateRangePicker component for selecting date ranges with time support
  • Includes preset options: Today, Current month, Custom, Last 7 days, Last 2 weeks
  • Features smooth carousel animation for month navigation (customizable duration)
  • Full dark mode support

Screenshot

DateRangePicker Light Mode

Features

  • Preset Panel: RadioGroup with predefined date range options
  • Date/Time Inputs: Start and end date/time inputs with validation
  • Calendar Panel: Two-month calendar view with range selection
  • Carousel Animation: Smooth sliding animation with customizable duration via animationDuration prop
  • Accessibility: Full keyboard navigation and ARIA support

Props

  • defaultRange - Initial date range
  • defaultTime - Initial time range
  • defaultPreset - Initially selected preset
  • onRangeChange - Callback when range changes
  • timeFormat - 12 or 24 hour format
  • animationDuration - Animation duration in ms (default: 500)
  • disabled - Disabled state
  • label / isRequired - Form field options

Test plan

  • Unit tests passing (248 tests)
  • Accessibility tests with jest-axe
  • Manual testing in Storybook
  • Visual review in light and dark modes

…AlertDialog flexibility props

- Add support for custom components in VirtualizedTable action menu items
  - New `component` prop to use custom component instead of Button
  - New `componentProps` prop for additional component props
  - New `id` prop for React key
- Add onClick callback and asChild props to AlertDialog
  - New `onClick` callback when trigger is clicked
  - New `isTitleChild` prop for custom title components
  - New `isDescriptionChild` prop for custom description components
- Add DateRangePicker component with preset options (Today, Current month, Custom, Last 7 days, Last 2 weeks)
- Include date/time inputs with validation
- Implement dual calendar view with react-day-picker
- Add carousel slide animation for month navigation with customizable duration
- Support range selection with highlighting for intermediate days
- Add animationDuration prop for customizing transition speed (default: 500ms)
- Support light and dark themes
@futjesus futjesus changed the title ✨ feat: add DateRangePicker component [🚧 WIP] ✨ feat: add DateRangePicker component Jan 22, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants