@flightlesslabs/dodo-ui 0.10.2 → 0.11.0

package/dist/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/utils/scss/mixins.scss

@@ -56,22 +56,6 @@
   --dodo-ui-CalendarDateChip-selected-#{$color-name}-active-bg: var(
     --dodo-color-#{$color-name}-100
   );
-
-  --dodo-ui-CalendarDateChip-isRangeStart-#{$color-name}-bg: var(--dodo-color-#{$color-name}-300);
-  --dodo-ui-CalendarDateChip-isRangeStart-#{$color-name}-hover-bg: var(
-    --dodo-color-#{$color-name}-200
-  );
-  --dodo-ui-CalendarDateChip-isRangeStart-#{$color-name}-active-bg: var(
-    --dodo-color-#{$color-name}-100
-  );
-
-  --dodo-ui-CalendarDateChip-isRangeEnd-#{$color-name}-bg: var(--dodo-color-#{$color-name}-300);
-  --dodo-ui-CalendarDateChip-isRangeEnd-#{$color-name}-hover-bg: var(
-    --dodo-color-#{$color-name}-200
-  );
-  --dodo-ui-CalendarDateChip-isRangeEnd-#{$color-name}-active-bg: var(
-    --dodo-color-#{$color-name}-100
-  );
 }
 
 /// Mixin: generate-dodo-ui-calendarDateChip-color
@@ -119,35 +103,5 @@
         }
       }
     }
-
-    &.isRangeStart {
-      .chip:not([disabled]) {
-        color: var(--dodo-color-constant-white);
-        background-color: var(--dodo-ui-CalendarDateChip-isRangeStart-#{$theme}-bg);
-
-        &:hover {
-          background-color: var(--dodo-ui-CalendarDateChip-isRangeStart-#{$theme}-hover-bg);
-        }
-
-        &:active {
-          background-color: var(--dodo-ui-CalendarDateChip-isRangeStart-#{$theme}-active-bg);
-        }
-      }
-    }
-
-    &.isRangeEnd {
-      .chip:not([disabled]) {
-        color: var(--dodo-color-constant-white);
-        background-color: var(--dodo-ui-CalendarDateChip-isRangeEnd-#{$theme}-bg);
-
-        &:hover {
-          background-color: var(--dodo-ui-CalendarDateChip-isRangeEnd-#{$theme}-hover-bg);
-        }
-
-        &:active {
-          background-color: var(--dodo-ui-CalendarDateChip-isRangeEnd-#{$theme}-active-bg);
-        }
-      }
-    }
   }
 }

package/dist/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDatesChart.stories.svelte

@@ -83,3 +83,17 @@ const { Story } = defineMeta({
     showNextMonth: false,
   }}
 />
+
+<Story
+  name="ManipulateDate"
+  args={{
+    manipulateDate: (dateToModify: DateOfMonth) => {
+      // Disable all Fridays
+      if (getMoment(dateToModify.date, undefined).day() === 5) {
+        dateToModify.disabled = true;
+      }
+
+      return dateToModify;
+    },
+  }}
+/>

package/dist/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDatesChart.svelte

@@ -2,10 +2,10 @@
 </script>
 
 <script lang="ts">import getMoment from '../../../../../developer tools/helpers/Time/getMoment/getMoment.js';
-import getDatesOfMonth from '../../utils/getDatesOfMonth.js';
 import CalendarDateChip, {} from './CalendarDateChip/CalendarDateChip.svelte';
 import CalendarWeek from './CalendarWeek/CalendarWeek.svelte';
-let { class: className = '', ref = $bindable(), value, startOfWeek, timezone, utc, calendarDateChipProps, color, showToday, showLastMonth, showNextMonth, showSelected = true, activeMonth, onselect, customCalendarDateChipContent, customCalendarDateChip, today, minDate, maxDate, excludeDates, includeDates, weekDayNameType, customCalendarWeekContent, customCalendarWeek, size = 'normal', weekendDays, weekendDaysColorDays = true, rangeValue, onselectRange, } = $props();
+import { getDatesOfMonth } from '../../../../../../index.js';
+let { class: className = '', ref = $bindable(), value, startOfWeek, timezone, utc, calendarDateChipProps, color, showToday, showLastMonth, showNextMonth, showSelected = true, activeMonth, onselect, customCalendarDateChipContent, customCalendarDateChip, today, minDate, maxDate, excludeDates, includeDates, weekDayNameType, customCalendarWeekContent, customCalendarWeek, size = 'normal', weekendDays, weekendDaysColorDays = true, manipulateDate, } = $props();
 let monthToPick = $state(undefined);
 const daysGroup = $derived(getDatesOfMonth(monthToPick, {
     startOfWeek,
@@ -16,26 +16,7 @@ const daysGroup = $derived(getDatesOfMonth(monthToPick, {
     maxDate,
     excludeDates,
     includeDates,
-    rangeValue,
-}) || []);
-function getRangeType(day, rangeValue) {
-    if (!rangeValue) {
-        return undefined;
-    }
-    const [range1, range2] = rangeValue;
-    if (!range1 || !range2) {
-        return undefined;
-    }
-    if (getMoment(range1, undefined, { timezone, utc }).format('MMM YYYY') ===
-        getMoment(day.date, undefined, { timezone, utc }).format('DD-MM-YYY')) {
-        return 'start';
-    }
-    else if (getMoment(range2, undefined, { timezone, utc }).format('MMM YYYY') ===
-        getMoment(day.date, undefined, { timezone, utc }).format('DD-MM-YYY')) {
-        return 'end';
-    }
-    return undefined;
-}
+}, manipulateDate) || []);
 $effect(() => {
     if (!value) {
         monthToPick = activeMonth;
@@ -92,9 +73,6 @@ $effect(() => {
             )
               ? true
               : false}
-            showValueRange={rangeValue ? true : false}
-            rangeType={getRangeType(day, rangeValue)}
-            {onselectRange}
             {...calendarDateChipProps}
           />
         {/each}

package/dist/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDatesChart.svelte.d.ts

@@ -38,8 +38,6 @@ export interface CalendarDatesChartProps {
     includeDates?: Date[];
     /** onselect event handler */
     onselect?: (value: Date, dayOfMonth: DateOfMonth, e: ButtonClickEvent) => void;
-    /** onselectRange event handler */
-    onselectRange?: (value: Date, type: DateRangeType, dayOfMonth: DateOfMonth, e: ButtonClickEvent) => void;
     /** Custom Calendar Chip Content */
     customCalendarDateChipContent?: (dayOfMonth: DateOfMonth) => Snippet;
     /** Custom Calendar Chip */
@@ -56,15 +54,16 @@ export interface CalendarDatesChartProps {
     weekendDays?: CalendarWeekNames[];
     /** Color Weekend days */
     weekendDaysColorDays?: boolean;
-    /** Range value */
-    rangeValue?: [Date, Date];
+    /** manipulate date callback */
+    manipulateDate?: (dateToModify: DateOfMonth, settings?: CreateDatesOfMonthSettings) => DateOfMonth;
 }
 import type { ComponentColor } from '../../../../../../types/colors.js';
 import type { Snippet } from 'svelte';
-import type { DateOfMonth, DateRangeType } from '../../utils/types.js';
+import type { DateOfMonth } from '../../utils/types.js';
 import { type CalendarDateChipProps } from './CalendarDateChip/CalendarDateChip.svelte';
 import type { CalendarWeekOption, CalendarWeekDayNameType, CalendarWeekNames } from './CalendarWeek/CalendarWeek.svelte';
 import type { ComponentSize } from '../../../../../../types/size.js';
+import type { CreateDatesOfMonthSettings } from '../../utils/createDateOfMonth/createDateOfMonth.js';
 declare const CalendarDatesChart: import("svelte").Component<CalendarDatesChartProps, {}, "ref">;
 type CalendarDatesChart = ReturnType<typeof CalendarDatesChart>;
 export default CalendarDatesChart;

package/dist/stories/components/Info/Calendar/utils/createDateOfMonth/createDateOfMonth.d.ts

@@ -0,0 +1,27 @@
+import type { DateOfMonth } from '../types.js';
+import type { CalendarWeekNames } from '../../../../../../index.js';
+/** Settings for generating calendar dates */
+export interface CreateDatesOfMonthSettings {
+    startOfWeek?: CalendarWeekNames;
+    showLastMonth?: boolean;
+    showNextMonth?: boolean;
+    today?: Date;
+    minDate?: Date;
+    maxDate?: Date;
+    excludeDates?: Date[];
+    includeDates?: Date[];
+    timezone?: string;
+    utc?: boolean;
+}
+export type CreateDateOfMonthType = 'currentMonth' | 'nextMonth' | 'lastMonth';
+/**
+ * Generates a DateOfMonth object with metadata for a specific day, including
+ * whether it's part of the current month, disabled, or today.
+ *
+ * @param date - The day to convert.
+ * @param settings - Optional configuration settings.
+ * @param monthType - Specifies if the day belongs to the current, previous, or next month.
+ * @param manipulateDate - Optional function to customize the resulting date object.
+ * @returns A DateOfMonth object representing the day.
+ */
+export default function createDateOfMonth(date?: Date, settings?: CreateDatesOfMonthSettings, monthType?: CreateDateOfMonthType, manipulateDate?: (dateToModify: DateOfMonth, settings?: CreateDatesOfMonthSettings) => DateOfMonth): DateOfMonth;

package/dist/stories/components/Info/Calendar/utils/createDateOfMonth/createDateOfMonth.js

@@ -0,0 +1,72 @@
+import getMoment from '../../../../../developer tools/helpers/Time/getMoment/getMoment.js';
+/**
+ * Creates a moment object from a Date with optional timezone and UTC settings.
+ */
+function dateMoment(date, settings) {
+    return getMoment(date, undefined, {
+        timezone: settings?.timezone,
+        utc: settings?.utc,
+    });
+}
+/**
+ * Determines if the given day matches "today" (manual or actual).
+ */
+function getIsToday(dayMoment, todayDate, todayManual) {
+    const dayDateFormat = dayMoment.format('DD-MM-YYYY');
+    return todayManual === dayDateFormat || todayDate === dayDateFormat;
+}
+/**
+ * Determines if a date should be disabled based on limits and included/excluded lists.
+ */
+function getIsDateDisabled(dayMoment, minDate, maxDate, excludeDates, includeDates) {
+    const dayDateFormat = dayMoment.format('DD-MM-YYYY');
+    if (minDate?.isValid() && dayMoment.isBefore(minDate))
+        return true;
+    if (maxDate?.isValid() && dayMoment.isAfter(maxDate))
+        return true;
+    if (excludeDates?.includes(dayDateFormat))
+        return true;
+    if (includeDates && !includeDates.includes(dayDateFormat))
+        return true;
+    return false;
+}
+/**
+ * Generates a DateOfMonth object with metadata for a specific day, including
+ * whether it's part of the current month, disabled, or today.
+ *
+ * @param date - The day to convert.
+ * @param settings - Optional configuration settings.
+ * @param monthType - Specifies if the day belongs to the current, previous, or next month.
+ * @param manipulateDate - Optional function to customize the resulting date object.
+ * @returns A DateOfMonth object representing the day.
+ */
+export default function createDateOfMonth(date, settings, monthType = 'currentMonth', manipulateDate) {
+    const minDate = settings?.minDate ? dateMoment(settings.minDate, settings) : undefined;
+    const maxDate = settings?.maxDate ? dateMoment(settings.maxDate, settings) : undefined;
+    const excludeDates = settings?.excludeDates?.map((item) => dateMoment(item, settings).format('DD-MM-YYYY'));
+    const includeDates = settings?.includeDates?.map((item) => dateMoment(item, settings).format('DD-MM-YYYY'));
+    const todayDate = dateMoment(undefined, settings).format('DD-MM-YYYY');
+    const todayManual = settings?.today
+        ? dateMoment(settings.today, settings).format('DD-MM-YYYY')
+        : undefined;
+    const dayMoment = dateMoment(date, settings);
+    let dataToExport = {
+        id: `${dayMoment.valueOf()}`,
+        date: dayMoment.toDate(),
+        isCurrentMonth: true,
+        disabled: getIsDateDisabled(dayMoment, minDate, maxDate, excludeDates, includeDates),
+        today: getIsToday(dayMoment, todayDate, todayManual),
+    };
+    if (monthType === 'lastMonth') {
+        dataToExport.isLastMonth = true;
+        dataToExport.isCurrentMonth = false;
+    }
+    else if (monthType === 'nextMonth') {
+        dataToExport.isNextMonth = true;
+        dataToExport.isCurrentMonth = false;
+    }
+    if (manipulateDate) {
+        dataToExport = manipulateDate(dataToExport, settings);
+    }
+    return dataToExport;
+}

package/dist/stories/components/Info/Calendar/utils/createDateOfMonth/index.mdx

@@ -0,0 +1,121 @@
+import { Source } from '@storybook/addon-docs/blocks';
+
+# `createDateOfMonth`
+
+`createDateOfMonth(date, settings, monthType?, manipulateDate?)` creates a single `DateOfMonth` object representing one calendar cell. This is typically used internally by `getDatesOfMonth` but can be useful for custom logic.
+
+## Usage
+
+<Source
+  dark
+  language="ts"
+  code={`
+// Manual usage for one day
+import { createDateOfMonth } from '@flightlesslabs/dodo-ui';
+
+const date = new Date();
+const dateObj = createDateOfMonth(date, {
+minDate: new Date('2025-01-01'),
+timezone: 'UTC',
+}, 'currentMonth');
+`}
+/>
+
+---
+
+# Types
+
+## `DateOfMonth`
+
+<Source
+  dark
+  language="ts"
+  code={`
+// Represents a single calendar cell
+type DateOfMonth = {
+  id: string;
+  date: Date;
+  isCurrentMonth: boolean;
+  isLastMonth?: boolean;
+  isNextMonth?: boolean;
+  disabled?: boolean;
+  today?: boolean;
+};
+`}
+/>
+
+## `CreateDatesOfMonthSettings`
+
+<Source
+  dark
+  language="ts"
+  code={`
+// Configuration for calendar generation
+interface CreateDatesOfMonthSettings {
+  startOfWeek?: 'SUN' | 'MON' | 'TUE' | 'WED' | 'THU' | 'FRI' | 'SAT';
+  showLastMonth?: boolean;
+  showNextMonth?: boolean;
+  today?: Date;
+  minDate?: Date;
+  maxDate?: Date;
+  excludeDates?: Date[];
+  includeDates?: Date[];
+  timezone?: string;
+  utc?: boolean;
+}
+`}
+/>
+
+## `CreateDateOfMonthType`
+
+<Source
+  dark
+  language="ts"
+  code={`
+// Indicates the month context of the date
+type CreateDateOfMonthType = 'currentMonth' | 'nextMonth' | 'lastMonth';
+`}
+/>
+
+## `DAYS_OF_WEEK` Enum
+
+<Source
+  dark
+  language="ts"
+  code={`
+// Weekday constants (Sunday = 0)
+export const enum DAYS_OF_WEEK {
+  SUN,
+  MON,
+  TUE,
+  WED,
+  THU,
+  FRI,
+  SAT,
+}
+`}
+/>
+
+## `MONTHS` Enum
+
+<Source
+  dark
+  language="ts"
+  code={`
+// Month constants (January = 0)
+export const enum MONTHS {
+  JAN,
+  FEB,
+  MAR,
+  APR,
+  MAY,
+  JUN,
+  JUL,
+  AUG,
+  SEP,
+  OCT,
+  NOV,
+  DEC,
+}
+`}
+/>

package/dist/stories/components/Info/Calendar/utils/getDatesOfMonth/getDatesOfMonth.d.ts

@@ -0,0 +1,10 @@
+import { type CreateDatesOfMonthSettings, type DateOfMonth } from '../../../../../../index.js';
+/**
+ * Generates a calendar grid of dates for a given month.
+ *
+ * @param date - The base date for the month to generate.
+ * @param settings - Optional settings for formatting and display.
+ * @param manipulateDate - Optional function to modify each generated DateOfMonth.
+ * @returns A 2D array of DateOfMonth objects representing the calendar, or null if invalid.
+ */
+export default function getDatesOfMonth(date?: Date, settings?: CreateDatesOfMonthSettings, manipulateDate?: (dateToModify: DateOfMonth, settings?: CreateDatesOfMonthSettings) => DateOfMonth): DateOfMonth[][] | null;

package/dist/stories/components/Info/Calendar/utils/{getDatesOfMonth.js → getDatesOfMonth/getDatesOfMonth.js}

@@ -1,13 +1,12 @@
-import getMoment from '../../../../developer tools/helpers/Time/getMoment/getMoment.js';
-import { calendarWeekOptions } from '../../../../../index.js';
-import createDateOfMonth, {} from './createDateOfMonth.js';
+import getMoment from '../../../../../developer tools/helpers/Time/getMoment/getMoment.js';
+import { calendarWeekOptions, createDateOfMonth, } from '../../../../../../index.js';
 /**
  * Divides an array into chunks of a given size.
  *
  * @template T - The type of elements in the array.
- * @param {T[]} arr - The array to be chunked.
- * @param {number} size - The chunk size.
- * @returns {T[][]} - An array of chunks.
+ * @param arr - The array to be chunked.
+ * @param size - The chunk size.
+ * @returns An array of chunks.
  */
 function chunkArray(arr, size) {
     const result = [];
@@ -16,6 +15,13 @@ function chunkArray(arr, size) {
     }
     return result;
 }
+/**
+ * Creates a moment object from a Date with optional timezone and UTC settings.
+ *
+ * @param date - The date to convert.
+ * @param settings - Optional settings for timezone and UTC.
+ * @returns A moment object with the applied settings.
+ */
 function dateMoment(date, settings) {
     return getMoment(date, undefined, {
         timezone: settings?.timezone,
@@ -25,11 +31,12 @@ function dateMoment(date, settings) {
 /**
  * Generates a calendar grid of dates for a given month.
  *
- * @param {Date} date - The base date for the month to generate.
- * @param {GetDatesOfMonthSettings} [settings] - Optional settings for formatting and display.
- * @returns {(DateOfMonth[][] | null)} - A 2D array of DateOfMonth objects representing the calendar, or null if invalid.
+ * @param date - The base date for the month to generate.
+ * @param settings - Optional settings for formatting and display.
+ * @param manipulateDate - Optional function to modify each generated DateOfMonth.
+ * @returns A 2D array of DateOfMonth objects representing the calendar, or null if invalid.
  */
-export default function getDatesOfMonth(date, settings) {
+export default function getDatesOfMonth(date, settings, manipulateDate) {
     if (!date) {
         return null;
     }
@@ -50,12 +57,12 @@ export default function getDatesOfMonth(date, settings) {
     if (showLastMonth) {
         for (let gap = 0; gap < startOfMonthDay; gap++) {
             const dayMoment = lastMonth.clone().add(gap, 'days');
-            dates.push(createDateOfMonth(dayMoment.toDate(), settings, 'lastMonth'));
+            dates.push(createDateOfMonth(dayMoment.toDate(), settings, 'lastMonth', manipulateDate));
         }
     }
     for (let day = 1; day <= daysInMonth; day++) {
         const dayMoment = monthMoment.clone().set('date', day);
-        dates.push(createDateOfMonth(dayMoment.toDate(), settings, 'currentMonth'));
+        dates.push(createDateOfMonth(dayMoment.toDate(), settings, 'currentMonth', manipulateDate));
     }
     const datesDivided = chunkArray(dates, 7);
     if (showNextMonth) {
@@ -65,7 +72,7 @@ export default function getDatesOfMonth(date, settings) {
             const nextMonthDates = [];
             for (let gap = 0; gap < nextMonthDaysRequired; gap++) {
                 const dayMoment = nextMonth.clone().add(gap, 'days');
-                nextMonthDates.push(createDateOfMonth(dayMoment.toDate(), settings, 'nextMonth'));
+                nextMonthDates.push(createDateOfMonth(dayMoment.toDate(), settings, 'nextMonth', manipulateDate));
             }
             datesDivided[datesDivided.length - 1] = [...lastRow, ...nextMonthDates];
         }

package/dist/stories/components/Info/Calendar/utils/getDatesOfMonth/index.mdx

@@ -0,0 +1,37 @@
+import { Source } from '@storybook/addon-docs/blocks';
+
+# `getDatesOfMonth`
+
+`getDatesOfMonth(date, settings, manipulateDate)` generates a 2D array of weeks, each containing `DateOfMonth` objects. It supports options via `CreateDatesOfMonthSettings` and allows injecting custom logic per date.
+
+## Usage
+
+<Source
+  dark
+  language="ts"
+  code={`
+// Basic usage
+import { getDatesOfMonth, getMoment } from '@flightlesslabs/dodo-ui';
+
+const dates = getDatesOfMonth(new Date(), {
+showLastMonth: false,
+showNextMonth: false,
+});
+
+// Using a formatted date
+const dates2 = getDatesOfMonth(
+getMoment('01-02-2025', 'DD-MM-YYYY').toDate()
+);
+
+// With custom manipulation
+const dates3 = getDatesOfMonth(new Date(), {
+timezone: 'America/New_York',
+startOfWeek: 'MON',
+}, (date, settings) => {
+return {
+...date,
+disabled: true,
+};
+});
+`}
+/>

package/dist/stories/components/Info/Calendar/utils/types.d.ts

@@ -29,8 +29,4 @@ export type DateOfMonth = {
     isNextMonth?: boolean;
     disabled?: boolean;
     today?: boolean;
-    isRangeStart?: boolean;
-    isRangeEnd?: boolean;
-    inRange?: boolean;
 };
-export type DateRangeType = 'start' | 'end';

package/dist/stories/components/Layout/Menu/DynamicMenu/Options/OptionFormat.mdx

@@ -1,4 +1,4 @@
-import { Source } from '@storybook/blocks';
+import { Source } from '@storybook/addon-docs/blocks';
 
 # Option Format
 

package/dist/stories/developer tools/directives/clickOutside/index.mdx

@@ -1,4 +1,4 @@
-import { Source } from '@storybook/blocks';
+import { Source } from '@storybook/addon-docs/blocks';
 
 # Click Outside
 

package/dist/stories/developer tools/helpers/Numbers/cleanNumericString/index.mdx

@@ -1,4 +1,4 @@
-import { Source } from '@storybook/blocks';
+import { Source } from '@storybook/addon-docs/blocks';
 
 # `cleanNumericString`
 

package/dist/stories/developer tools/helpers/Numbers/isValidNumberValue/index.mdx

@@ -1,4 +1,4 @@
-import { Source } from '@storybook/blocks';
+import { Source } from '@storybook/addon-docs/blocks';
 
 # `isValidNumberValue`
 

package/dist/stories/developer tools/helpers/Time/getMoment/getMoment.d.ts

@@ -1,18 +1,17 @@
 import type { ConfigType, OptionType } from 'dayjs';
-import dayjs from 'dayjs';
+import { Dayjs } from 'dayjs';
 /**
  * Acceptable input types for the `getMoment` function, compatible with dayjs.
  */
 export type GetMomentDate = ConfigType;
 /**
  * Optional formatting string used to parse the date.
- * Refer to dayjs customParseFormat plugin for supported formats.
  */
 export type GetMomentFormat = OptionType;
 /**
  * Settings to control how the moment is returned (UTC, timezone, or local).
  */
-export type GetMomentSettings = {
+export interface GetMomentSettings {
     /**
      * Timezone string (e.g., "America/New_York").
      */
@@ -21,18 +20,18 @@ export type GetMomentSettings = {
      * Whether to return the time in UTC. If true, overrides timezone.
      */
     utc?: boolean;
-};
+}
 /**
  * A wrapper around dayjs to return a moment-like object with optional formatting,
  * timezone, or UTC handling.
  *
- * @param {GetMomentDate} [date] - The input date, time, or string to be parsed.
- * @param {format} [format] - A custom format string for parsing the input date.
- * @param {GetMomentSettings} [settings] - Optional settings for format, timezone, and UTC.
- * @returns {dayjs.Dayjs} - A dayjs object in local, UTC, or specified timezone.
+ * @param date - The input date, time, or string to be parsed.
+ * @param format - A custom format string for parsing the input date.
+ * @param settings - Optional settings for timezone or UTC output.
+ * @returns A dayjs object in local, UTC, or specified timezone.
  *
  * @example
- * getMoment('2025-01-01T12:00:00Z', { utc: true }).format()
- * getMoment('01-01-2025', { format: 'DD-MM-YYYY', timezone: 'Asia/Kolkata' }).format()
+ * getMoment('2025-01-01T12:00:00Z', undefined, { utc: true }).format()
+ * getMoment('01-01-2025', 'DD-MM-YYYY', { timezone: 'Asia/Kolkata' }).format()
  */
-export default function getMoment(date?: GetMomentDate, format?: GetMomentFormat, settings?: GetMomentSettings): dayjs.Dayjs;
+export default function getMoment(date?: GetMomentDate, format?: GetMomentFormat, settings?: GetMomentSettings): Dayjs;

package/dist/stories/developer tools/helpers/Time/getMoment/getMoment.js

@@ -1,4 +1,4 @@
-import dayjs from 'dayjs';
+import dayjs, { Dayjs } from 'dayjs';
 import utc from 'dayjs/plugin/utc.js';
 import timezone from 'dayjs/plugin/timezone.js';
 import customParseFormat from 'dayjs/plugin/customParseFormat.js';
@@ -9,18 +9,18 @@ dayjs.extend(customParseFormat);
  * A wrapper around dayjs to return a moment-like object with optional formatting,
  * timezone, or UTC handling.
  *
- * @param {GetMomentDate} [date] - The input date, time, or string to be parsed.
- * @param {format} [format] - A custom format string for parsing the input date.
- * @param {GetMomentSettings} [settings] - Optional settings for format, timezone, and UTC.
- * @returns {dayjs.Dayjs} - A dayjs object in local, UTC, or specified timezone.
+ * @param date - The input date, time, or string to be parsed.
+ * @param format - A custom format string for parsing the input date.
+ * @param settings - Optional settings for timezone or UTC output.
+ * @returns A dayjs object in local, UTC, or specified timezone.
  *
  * @example
- * getMoment('2025-01-01T12:00:00Z', { utc: true }).format()
- * getMoment('01-01-2025', { format: 'DD-MM-YYYY', timezone: 'Asia/Kolkata' }).format()
+ * getMoment('2025-01-01T12:00:00Z', undefined, { utc: true }).format()
+ * getMoment('01-01-2025', 'DD-MM-YYYY', { timezone: 'Asia/Kolkata' }).format()
  */
 export default function getMoment(date, format, settings) {
     const timezone = settings?.timezone;
-    const utc = settings?.utc ? true : false;
+    const utc = settings?.utc ?? false;
     if (utc) {
         return dayjs.utc(dayjs(date, format));
     }

package/dist/stories/developer tools/helpers/Time/getMoment/index.mdx

@@ -1,8 +1,10 @@
-import { Source } from '@storybook/blocks';
+import { Source } from '@storybook/addon-docs/blocks';
 
 # `getMoment`
 
-a Day.js wrapper
+A [Day.js](https://day.js.org/) wrapper that supports custom formats, UTC mode, and timezone conversion using `dayjs`, `utc`, `timezone`, and `customParseFormat` plugins.
+
+---
 
 ## Usage
 
@@ -10,9 +12,34 @@ a Day.js wrapper
   dark
   language="ts"
   code={`
-import { getMoment } from '@flightlesslabs/dodo-ui';
+// Basic local time
+getMoment('2025-01-01T00:00:00Z').format();
+
+// UTC output
+getMoment('2025-01-01T00:00:00Z', undefined, { utc: true }).format();
+// → "2025-01-01T00:00:00Z"
+
+// With custom format + timezone
+getMoment('01-01-2025', 'DD-MM-YYYY', { timezone: 'Asia/Kolkata' }).format();
+// → "2025-01-01T00:00:00+05:30"
+`}
+/>
+
+---
 
-getMoment('2025-01-01T00:00:00Z', { utc: true }).format(); // "2025-01-01T00:00:00Z"
-getMoment('01-01-2025', { format: 'DD-MM-YYYY', timezone: 'Asia/Kolkata' }).format();
+## API
+
+<Source
+  dark
+  language="ts"
+  code={`
+getMoment(
+  date?: ConfigType,
+  format?: string,
+  settings?: {
+    utc?: boolean;
+    timezone?: string;
+  }
+): dayjs.Dayjs
 `}
 />