@synetics/ui 0.7.0-alpha

package/src/components/organisms/date-picker/components/date-picker.header.syn

@@ -0,0 +1,130 @@
+import { Button } from '../internal-components/button';
+import {
+  CalendarCancelIcon,
+  CalendarIcon,
+  CalendarSearchIcon,
+  ClearIcon,
+} from '../internal-components/icons';
+import { PortalSlot } from '../internal-components/portal';
+import { useToggleableContext } from '../toggleable/toggleable.context.hook';
+import { useDatePickerContext } from './date-picker.context';
+import DatePickerSwitch from './date-picker.switch';
+
+interface IDatePickerDrawerHeaderProps {
+  id: string;
+}
+
+/**
+ * The `DatePickerDrawerHeader` component renders the header section of a date picker drawer.
+ */
+const DatePickerDrawerHeader = ({ id }: IDatePickerDrawerHeaderProps) => {
+  const { internalDate, updateGridMode, jumpToNow, jumpToSelection, selectedCells, clear, close } =
+    useDatePickerContext();
+
+  const { toggleState } = useToggleableContext();
+
+  const yearSelection = (e: MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    updateGridMode('YEAR');
+  };
+
+  const monthSelection = (e: MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    updateGridMode('MONTH');
+  };
+
+  const daySelection = (e: MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    updateGridMode('DAY');
+  };
+
+  return (
+    <div className="date-picker-header">
+      <div className="date-picker-header-top">
+        <div className="selected">
+          <Button
+            disabled={selectedCells().length === 0}
+            id="dp-selected"
+            title="go to selected (s)"
+            onClick={jumpToSelection}
+          >
+            <span className="mr-1">Selected</span>
+            <CalendarSearchIcon />
+          </Button>
+        </div>
+
+        <div className="ml-1 now">
+          <Button id="dp-now" title="go to now (n)" onClick={jumpToNow}>
+            <span className="mr-1">Now</span>
+            <CalendarIcon />
+          </Button>
+        </div>
+        <div className="ml-1 clear">
+          <Button
+            disabled={selectedCells().length === 0}
+            id="dp-clear"
+            title="clear selection (c)"
+            onClick={clear}
+          >
+            <CalendarCancelIcon />
+          </Button>
+        </div>
+        <div className="ml-1 close">
+          <Button id="dp-close" title="close (Escape)" onClick={close}>
+            <ClearIcon />
+          </Button>
+        </div>
+      </div>
+      <div className="date-picker-header-separator" />
+      <div className="date-picker-header-bottom">
+        <PortalSlot slotName="previous" />
+
+        <div className="date-picker-date-parts">
+          <div className="year">
+            <Button id="dp-year" title="year selection (y)" onClick={yearSelection}>
+              {internalDate()?.getFullYear()}
+            </Button>
+          </div>
+          <div className="month mx-1">
+            <Button id="dp-month" title="month selection (m)" onClick={monthSelection}>
+              {(internalDate()?.getMonth() || internalDate()?.getMonth() === 0
+                ? internalDate()?.getMonth() + 1
+                : 0
+              )
+                ?.toString()
+                ?.padStart(2, '0')}
+            </Button>
+          </div>
+          <div className="day">
+            <Button id="dp-day" title="day selection (d)" onClick={daySelection}>
+              {internalDate()?.getDate?.()?.toString()?.padStart(2, '0')}
+            </Button>
+          </div>
+        </div>
+        <PortalSlot slotName="next" />
+      </div>
+      <div className="date-picker-header-grid-mode">
+        <DatePickerSwitch
+          day={
+            <>
+              <div>Mon</div>
+              <div>Tue</div>
+              <div>Wed</div>
+              <div>Thu</div>
+              <div>Fri</div>
+              <div>Sat</div>
+              <div>Sun</div>
+            </>
+          }
+          month={<div>Month</div>}
+          year={<div>Years</div>}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default DatePickerDrawerHeader;

package/src/components/organisms/date-picker/components/date-picker.switch.syn

@@ -0,0 +1,27 @@
+import { DatePickerDisplayType } from '../core/date-picker.types';
+import { useDatePickerContext } from './date-picker.context';
+
+interface IDatePickerSwitch {
+  day: HTMLElement;
+  month: HTMLElement;
+  year: HTMLElement;
+  definedGridMode?: DatePickerDisplayType;
+}
+
+/**
+ * A functional component that renders different content based on the current grid mode.
+ * The grid mode determines whether the day, month, or year is displayed.
+ */
+const DatePickerSwitch = ({ day, month, year, definedGridMode }: IDatePickerSwitch) => {
+  const { gridMode } = useDatePickerContext();
+  const _gridMode = definedGridMode ?? gridMode();
+  return (
+    <>
+      {_gridMode === 'DAY' && <>{day}</>}
+      {_gridMode === 'YEAR' && <>{year}</>}
+      {_gridMode === 'MONTH' && <>{month}</>}
+    </>
+  );
+};
+
+export default DatePickerSwitch;

package/src/components/organisms/date-picker/core/computed/compute-days-grid.ts

@@ -0,0 +1,46 @@
+import { getCurrentMonthDays } from '../getters/get-current-month-days'
+import { getNextMonthDays } from '../getters/get-next-month-days'
+import { getPreviousMonthDays } from '../getters/get-previous-month-days'
+import { IDatePickerRow } from '../models/date-picker.models'
+import { newCellsRow } from '../models/date-picker.models.constructors'
+
+/**
+ * Computes a grid of days for a date picker, organized into rows of weeks.
+ * The grid includes days from the previous month, the current month, and the next month
+ * to ensure all weeks are fully populated.
+ *
+ * @param dte - The date for which the days grid is computed. The month and year of this date
+ *              determine the current month in the grid.
+ * @returns An array of rows, where each row represents a week and contains the days
+ *          (including previous and next month's days) as part of the grid.
+ */
+export const computeDaysGrid = (dte: Date): IDatePickerRow[] => {
+    const year = dte.getFullYear()
+    const currentMonth = dte.getMonth()
+    const daysArray = [1, 2, 3, 4, 5, 6, 0]
+
+    const firstDay = new Date(year, currentMonth, 1).getDay()
+    const nextMonthFirstDay = new Date(year, currentMonth + 1, 1).getDay()
+    const output: IDatePickerRow[] = []
+
+    // let's find out how many days previews the first day to complete a weekrow with previous month
+    const previousDaysRemaining = daysArray.indexOf(firstDay)
+    // let's find out how many days remains the last day to complete a weekrow with next months
+    const nextMonthDaysRemaining = Math.abs(daysArray.indexOf(nextMonthFirstDay) - daysArray.length)
+    // gets the previous month's days
+    const previousDays = getPreviousMonthDays(previousDaysRemaining, currentMonth, year)
+    // gets the month's days
+    const currentDays = getCurrentMonthDays(currentMonth, year)
+    // gets the next month's days
+    const nextMonthDays = getNextMonthDays(nextMonthDaysRemaining, currentMonth, year)
+    // build full grid data combining the three above collections
+    const fullGridData = [...previousDays, ...currentDays, ...nextMonthDays]
+    // split week rows
+    for (let row = 1; row < 7; row++) {
+        const weekDays = fullGridData.splice(0, 7)
+        const newRow = newCellsRow(row, weekDays)
+        output.push(newRow)
+    }
+
+    return output
+}

package/src/components/organisms/date-picker/core/computed/compute-months-grid.ts

@@ -0,0 +1,43 @@
+import { createCell } from '../constructors/create-cell'
+import { IDatePickerCell, IDatePickerRow } from '../models/date-picker.models'
+import { newCellsRow } from '../models/date-picker.models.constructors'
+
+/**
+ * Computes a grid of months for a date picker, organizing months into rows of three.
+ *
+ * @param date - The reference date used to determine the year and day for the grid.
+ * @returns An array of rows, where each row contains cells representing months.
+ *
+ * Each cell in the grid represents a month and includes metadata such as whether
+ * it belongs to the current scope (year). The grid is structured into 4 rows, with
+ * each row containing 3 months (total 12 months):
+ * Row 1: 1, 2, 3
+ * Row 2: 4, 5, 6
+ * Row 3: 7, 8, 9
+ * Row 4: 10, 11, 12
+ */
+export const computeMonthsGrid = (date: Date) => {
+  const output: IDatePickerRow[] = []
+  let rowData: IDatePickerCell[] = []
+
+  const currentYear = date.getFullYear()
+  const currentDay = date.getDate()
+
+  let rowNumber: number = 1
+  for (let month = 0; month < 12; month++) {
+    const cell = createCell(currentDay, month, currentYear, {
+      isCurrentScope: true,
+    })
+    rowData.push(cell)
+
+    // Push row every 3 months (or at the end)
+    if ((month + 1) % 3 === 0 || month === 11) {
+      const newRow = newCellsRow(rowNumber, rowData)
+      output.push(newRow)
+      rowData = []
+      rowNumber++
+    }
+  }
+
+  return output
+}

package/src/components/organisms/date-picker/core/computed/compute-range.ts

@@ -0,0 +1,36 @@
+import { getTs } from '../../utils/date-object'
+import { createCell } from '../constructors/create-cell'
+import { IDatePickerCell } from '../models/date-picker.models'
+
+/**
+ * Computes a range of date picker cells between two selected dates.
+ *
+ * @param selection - An array of `IDatePickerCell` objects representing the selected dates.
+ *                     The array should contain at least two elements: the start date and the end date.
+ * @returns An array of `IDatePickerCell` objects representing the range of dates between the start and end dates.
+ *          If the selection is invalid or the dates cannot be computed, an empty array is returned.
+ */
+export const computeRange = (selection: IDatePickerCell[]): IDatePickerCell[] => {
+  const output: IDatePickerCell[] = []
+  if (selection.length < 2) return output
+
+  const startDateObject = selection[0]
+  const endDateObject = selection[1]
+
+  const _sd = startDateObject.item?.date.toDate?.()
+  const _ed = endDateObject.item?.date.toDate?.()
+
+  if (!_sd || !_ed) return output
+
+  let newDate = new Date(_sd.getFullYear(), _sd.getMonth(), _sd.getDate())
+
+  while (getTs(newDate) !== getTs(_ed)) {
+    newDate = new Date(newDate.getFullYear(), newDate.getMonth(), newDate.getDate() + 1)
+    const cell = createCell(newDate.getDate(), newDate.getMonth(), newDate.getFullYear(), {
+      isRangeDays: true,
+    })
+    output.push(cell)
+  }
+
+  return output
+}

package/src/components/organisms/date-picker/core/computed/compute-years-grid.ts

@@ -0,0 +1,56 @@
+import { createCell } from '../constructors/create-cell'
+import { IDatePickerCell, IDatePickerRow } from '../models/date-picker.models'
+import { newCellsRow } from '../models/date-picker.models.constructors'
+
+/**
+ * Computes a grid of years centered around the given date's year.
+ * The grid includes the current year, a range of previous years, and a range of next years.
+ * The years are organized into rows, each containing a fixed number of columns.
+ *
+ * @param date - The reference date used to determine the current year.
+ * @returns An array of rows, where each row contains cells representing years.
+ *          Each cell includes metadata indicating whether the year belongs to the
+ *          previous, current, or next scope.
+ */
+export const computeYearsGrid = (date: Date) => {
+    let previousYears: number[] = []
+    let nextYears: number[] = []
+
+    const currentMonth = date.getMonth()
+    const currentDay = date.getDate()
+    const currentYear = date.getFullYear()
+    for (let p = currentYear - 1; p > currentYear - 13; p--) {
+        previousYears.push(p)
+    }
+    for (let n = currentYear + 1; n < currentYear + 13; n++) {
+        nextYears.push(n)
+    }
+
+    previousYears = previousYears.sort((a, b) => a - b)
+    nextYears = nextYears.sort((a, b) => a - b)
+
+    const allYears = [...previousYears, currentYear, ...nextYears].sort((a, b) => a - b)
+
+    const output: IDatePickerRow[] = []
+    let rowData: IDatePickerCell[] = []
+    let colNumber: number = 0
+    let rowNumber: number = 0
+    for (const y of allYears) {
+        colNumber++
+        const cell = createCell(currentDay, currentMonth, y, {
+            isPreviousScope: previousYears[0] === y,
+            isCurrentScope: y === currentYear,
+            isNextScope: nextYears[nextYears.length - 1] === y
+        })
+        rowData.push(cell)
+        if (colNumber === 5) {
+            rowNumber++
+            colNumber = 0
+            const newRow = newCellsRow(rowNumber, rowData)
+            rowData = []
+            output.push(newRow)
+        }
+    }
+
+    return output
+}

package/src/components/organisms/date-picker/core/constructors/create-cell.ts

@@ -0,0 +1,37 @@
+import { DateObject } from '../../utils/date-object'
+import { IDatePickerCell, IDatePickerOptions } from '../models/date-picker.models'
+import { newCell, newDatePickerItem } from '../models/date-picker.models.constructors'
+
+/**
+ * Creates a date picker cell with the specified parameters.
+ *
+ * @param day - The day of the month for the cell.
+ * @param month - The month of the year for the cell (0-based, where 0 = January).
+ * @param year - The year for the cell.
+ * @param options - Partial options for configuring the date picker cell.
+ * @param defineWeekEnds - Optional flag to determine if weekends should be identified.
+ * @returns An object representing the date picker cell.
+ */
+export const createCell = (
+  day: number,
+  month: number,
+  year: number,
+  options: Partial<IDatePickerOptions>,
+  defineWeekEnds?: boolean
+): IDatePickerCell => {
+  const key = `${month}${day}`
+  const cDate = new Date(year, month, day)
+  const isWeekEnd = defineWeekEnds ? [6, 0].includes(cDate.getDay()) : false
+  const nowDate = new Date()?.toLocaleString(undefined, {
+    dateStyle: 'short',
+  })
+  const currentCellDate = cDate.toLocaleDateString(undefined, {
+    dateStyle: 'short',
+  })
+
+  const isNow = nowDate === currentCellDate
+
+  const dateObjectInstance = new DateObject(cDate, key)
+  const dpItem = newDatePickerItem(key, dateObjectInstance, { ...options, isWeekEnd, isNow })
+  return newCell(day, dpItem)
+}

package/src/components/organisms/date-picker/core/date-picker.types.ts

@@ -0,0 +1,41 @@
+import { DateFormatsEnum } from '../utils/date-utils'
+
+// Utility type to extract values from enum
+type ValueOfType<T> = T[keyof T]
+
+/**
+ * Explanation:
+        ([0-2][0-9]|3[0-1]): Matches days 01 to 31.
+        ([-/]): Captures the separator (- or /) and ensures consistency.
+        ([0][1-9]|1[0-2]): Matches months 01 to 12.
+        \2: Ensures the same separator is used.
+        (\d{4}): Matches a 4-digit year.
+ */
+export const ddMMYYYYRegex = /^([0-2][0-9]|3[0-1])([-/])([0][1-9]|1[0-2])\2(\d{4})$/
+
+/**Explanation:
+        ([0][1-9]|1[0-2]): Matches months 01 to 12.
+        ([-/]): Captures the separator (- or /) and ensures consistency.
+        ([0-2][0-9]|3[0-1]): Matches days 01 to 31.
+        \2: Ensures the same separator is used.
+        (\d{4}): Matches a 4-digit year.
+ */
+export const MMddYYYYRegex = /^([0][1-9]|1[0-2])([-/])([0-2][0-9]|3[0-1])\2(\d{4})$/
+
+/**
+ * Explanation:
+        (\d{4}): Matches a 4-digit year.
+        ([-/]): Captures the separator (- or /) and ensures consistency.
+        ([0][1-9]|1[0-2]): Matches months 01 to 12.
+        \2: Ensures the same separator is used.
+        ([0-2][0-9]|3[0-1]): Matches days 01 to 31.
+ */
+export const yyyyMMDDRegex = /^(\d{4})([-/])([0][1-9]|1[0-2])\2([0-2][0-9]|3[0-1])$/
+
+export type DatePickerFormatType = ValueOfType<DateFormatsEnum>
+export const DatePickerFormatArray: string[] = Object.values(DateFormatsEnum)
+/** indicates  */
+export type DatePickerGridModeType = 'YEAR' | 'MONTH' | 'DAY'
+export type DatePickerDisplayType = 'DAY' | 'MONTH' | 'YEAR'
+
+export type DatePickerSelectionModeType = 'range' | 'single'

package/src/components/organisms/date-picker/core/getters/get-current-month-days.ts

@@ -0,0 +1,35 @@
+import { createCell } from '../constructors/create-cell'
+import { IDatePickerCell } from '../models/date-picker.models'
+
+/**
+ * Generates an array of date picker cells representing all the days in a given month and year.
+ *
+ * @param month - The zero-based month index (0 for January, 11 for December).
+ * @param year - The full year (e.g., 2023).
+ * @returns An array of `IDatePickerCell` objects, each representing a day in the specified month.
+ *
+ * @remarks
+ * - The function calculates the number of days in the specified month and year.
+ * - Each day is represented as an `IDatePickerCell` object created using the `createCell` function.
+ * - The `isCurrentScope` property of each cell is set to `true`.
+ */
+export const getCurrentMonthDays = (month: number, year: number) => {
+    //If you provide 0 as the dayValue in Date.setFullYear you get the last day of the previous month:
+    const lastDay = new Date(year, month + 1, 0).getDate()
+    const output: IDatePickerCell[] = []
+    for (let i = 1; i < lastDay + 1; i++) {
+        const cell = createCell(
+            i,
+            month,
+            year,
+            {
+                isCurrentScope: true
+            },
+            true
+        )
+        output.push(cell)
+        // const cDate = new Date(year, month, i)
+        // output.push(newCell(i, `${month + 1}-${i}`, cDate.getDay(), null))
+    }
+    return output
+}

package/src/components/organisms/date-picker/core/getters/get-next-date.ts

@@ -0,0 +1,32 @@
+import { DatePickerGridModeType } from '../date-picker.types'
+
+/**
+ * Calculates the next date based on the provided grid mode and current date.
+ *
+ * @param gridMode - The mode of the date picker grid, which determines the unit of increment.
+ *                   Can be one of the following:
+ *                   - 'YEAR': Increments the year by 1.
+ *                   - 'MONTH': Increments the month by 1.
+ *                   - 'DAY': Increments the day by 1 (default behavior).
+ * @param currentDate - The current date from which the next date will be calculated.
+ * @returns A new `Date` object representing the next date based on the specified grid mode.
+ */
+export const getNextDate = (gridMode: DatePickerGridModeType, currentDate: Date) => {
+    let _year = currentDate.getFullYear()
+    let _month = currentDate.getMonth()
+    let _day = currentDate.getDate()
+
+    switch (gridMode) {
+        case 'YEAR':
+            _year = _year + 1
+            break
+        case 'MONTH':
+            _month = _month + 1
+            break
+        case 'DAY':
+        default:
+            _day = _day + 1
+            break
+    }
+    return new Date(_year, _month, _day)
+}

package/src/components/organisms/date-picker/core/getters/get-next-month-days.ts

@@ -0,0 +1,23 @@
+import { createCell } from '../constructors/create-cell'
+import { IDatePickerCell } from '../models/date-picker.models'
+
+/**
+ * Generates an array of date picker cells representing the days of the next month.
+ *
+ * @param remainingDays - The number of days remaining to fill in the current month's calendar view.
+ * @param currentMonth - The current month (0-based, where 0 = January, 11 = December).
+ * @param year - The year for which the next month's days are being calculated.
+ * @returns An array of `IDatePickerCell` objects representing the days of the next month.
+ */
+export const getNextMonthDays = (remainingDays: number, currentMonth: number, year: number) => {
+    const output: IDatePickerCell[] = []
+    for (let i = 1; i <= remainingDays + 14; i++) {
+        const cell = createCell(i, currentMonth + 1, year, {
+            isNextScope: true
+        })
+        output.push(cell)
+        // const cDate = new Date(year, nextMonth, i)
+        // output.push(newCell(i, `${nextMonth + 1}-${i}`, cDate.getDay(), null))
+    }
+    return output
+}

package/src/components/organisms/date-picker/core/getters/get-previous-date.ts

@@ -0,0 +1,32 @@
+import { DatePickerGridModeType } from '../date-picker.types'
+
+/**
+ * Calculates the previous date based on the specified grid mode and the current date.
+ *
+ * @param gridMode - The mode of the date picker grid, which determines the unit to decrement.
+ *                   Can be one of the following:
+ *                   - 'YEAR': Decrements the year by 1.
+ *                   - 'MONTH': Decrements the month by 1.
+ *                   - 'DAY': Decrements the day by 1 (default behavior).
+ * @param currentDate - The current date from which the previous date is calculated.
+ * @returns A new `Date` object representing the previous date based on the specified grid mode.
+ */
+export const getPreviousDate = (gridMode: DatePickerGridModeType, currentDate: Date) => {
+    let _year = currentDate.getFullYear()
+    let _month = currentDate.getMonth()
+    let _day = currentDate.getDate()
+
+    switch (gridMode) {
+        case 'YEAR':
+            _year = _year - 1
+            break
+        case 'MONTH':
+            _month = _month - 1
+            break
+        case 'DAY':
+        default:
+            _day = _day - 1
+            break
+    }
+    return new Date(_year, _month, _day)
+}

package/src/components/organisms/date-picker/core/getters/get-previous-month-days.ts

@@ -0,0 +1,32 @@
+import { createCell } from '../constructors/create-cell'
+import { IDatePickerCell } from '../models/date-picker.models'
+
+/**
+ * Generates an array of date picker cells representing the remaining days
+ * from the previous month to fill a calendar grid.
+ *
+ * @param remainingDays - The number of days needed from the previous month.
+ * @param currentMonth - The current month (1-based, where January is 1 and December is 12).
+ * @param year - The year of the current month.
+ * @returns An array of `IDatePickerCell` objects representing the days from the previous month.
+ *
+ * The function calculates the last day of the previous month and iterates backward
+ * to create date picker cells. It stops once the required number of days (`remainingDays`)
+ * is reached. The resulting array is sorted by the `id` property of the cells in ascending order.
+ */
+export const getPreviousMonthDays = (remainingDays: number, currentMonth: number, year: number) => {
+    const lastDay = new Date(year, currentMonth, 0).getDate()
+    const output: IDatePickerCell[] = []
+    if (remainingDays === 0) return output
+    for (let i = lastDay; i > 0; i--) {
+        const cell = createCell(i, currentMonth, year, {
+            isPreviousScope: true
+        })
+
+        output.push(cell)
+        if (output.length === remainingDays) {
+            break
+        }
+    }
+    return output.sort((a, b) => a.id - b.id)
+}

package/src/components/organisms/date-picker/core/models/date-picker.models.constructors.ts

@@ -0,0 +1,36 @@
+import { IDateObject } from '../../utils/date-object'
+import { IDatePickerCell, IDatePickerItem, IDatePickerOptions } from './date-picker.models'
+
+export const newDatePickerItem = (
+  id: string,
+  date: IDateObject,
+  option: Partial<IDatePickerOptions>
+) => {
+  return {
+    id,
+    date,
+    selected: option.selected ?? false,
+    active: option.active ?? false,
+    isNextScope: option.isNextScope ?? false,
+    isPreviousScope: option.isPreviousScope ?? false,
+    isCurrentScope: option.isCurrentScope ?? false,
+    isRangeDays: option.isRangeDays ?? false,
+    isWeekEnd: option.isWeekEnd ?? false,
+    isNow: option.isNow ?? false,
+    displayType: option.displayType ?? 'DAY',
+  }
+}
+
+export const newCell = (id: number, item: IDatePickerItem | null): IDatePickerCell => {
+  const dtePrint = `${item?.date.year}${item?.date.month.toString().padStart(2, '0')}${item?.date.day.toString().padStart(2, '0')}`
+  return {
+    id,
+    code: dtePrint,
+    ts: parseInt(dtePrint),
+    item,
+  }
+}
+
+export const newCellsRow = (id: number, cells: IDatePickerCell[]) => {
+  return { id, cells }
+}

package/src/components/organisms/date-picker/core/models/date-picker.models.ts

@@ -0,0 +1,46 @@
+import { IDateObject } from '../../utils/date-object'
+import { DatePickerDisplayType } from '../date-picker.types'
+
+export interface ICursorPosition {
+  currentID: number
+  x: number
+  y: number
+}
+
+export interface IDatePickerItem {
+  id: string
+  date: IDateObject
+  selected: boolean
+  active: boolean
+  isNextScope: boolean
+  isPreviousScope: boolean
+  isCurrentScope: boolean
+  isRangeDays: boolean
+  isWeekEnd: boolean
+  isNow: boolean
+  displayType: DatePickerDisplayType
+}
+
+export interface IDatePickerOptions {
+  selected: boolean
+  active: boolean
+  isNextScope: boolean
+  isPreviousScope: boolean
+  isCurrentScope: boolean
+  isRangeDays: boolean
+  isWeekEnd: boolean
+  isNow: boolean
+  displayType: DatePickerDisplayType
+}
+
+export interface IDatePickerCell {
+  id: number
+  code: string | undefined
+  ts: number
+  item: IDatePickerItem | null
+}
+
+export interface IDatePickerRow {
+  id: number
+  cells: IDatePickerCell[]
+}

package/src/components/organisms/date-picker/core/system/get-local-system-separator.ts

@@ -0,0 +1,5 @@
+export const getSystemDateSeparator = () => {
+    const formattedDate = new Intl.DateTimeFormat('default').format(new Date())
+    const separator = formattedDate.replace(/\d/g, '').trim()[0]
+    return separator
+}