@g1itest/date-ui

Enterprise date selection, period filtering, and range picker components for the Ginesys Design System.

Installation

npm install @g1itest/date-ui @g1itest/tokens @g1itest/ui date-fns

Features

• Standard BI Presets: Today, Yesterday, MTD (Month to Date), YTD (Year to Date), and Custom Range.
• Intelligent Formatting: Clear representation of chosen boundaries (e.g. "MTD (Sep 1 - Sep 22, 2026)").
• Theme Awareness: Directly inherits Ginesys light and dark mode tokens.
• Accessible: Keyboard navigation, ARIA attributes, and automatic dismissal on outside click or Escape.

Usage

import { useState } from 'react';
import { DateSelector, type DateSelectorValue } from '@g1itest/date-ui';

export function ReportFilter() {
  const [dateVal, setDateVal] = useState<DateSelectorValue>({ preset: 'mtd' });

  return (
    <DateSelector
      value={dateVal}
      onChange={setDateVal}
      size="default"
      variant="outline"
    />
  );
}