@flightlesslabs/dodo-ui 0.9.0 → 0.10.0

package/dist/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/Size/Size.stories.svelte

@@ -0,0 +1,20 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import CalendarYearChip from '../CalendarYearChip.svelte';
+  import { storyCalendarYearChipArgTypes } from '../CalendarYearChip.stories.svelte';
+  import getMoment from '../../../../../../../developer tools/helpers/Time/getMoment/getMoment.js';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: CalendarYearChip,
+    tags: ['autodocs'],
+    argTypes: storyCalendarYearChipArgTypes,
+    args: {
+      value: getMoment(undefined, undefined, { utc: true }).format('YYYY'),
+    },
+  });
+</script>
+
+<Story name="Normal" />
+<Story name="Small" args={{ size: 'small' }} />
+<Story name="Large" args={{ size: 'large' }} />

package/dist/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/Size/Size.stories.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Size;
+type Size = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Size: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/utils/scss/mixins.scss

@@ -0,0 +1,87 @@
+/// Mixin: generate-dodo-ui-calendarYearChip-colors
+/// Generates CSS custom properties for Dodo UI calendarYearChip styles (text & solid)
+/// across different interaction states (default, hover, active).
+/// @param {String} $color-name - The theme color name (e.g., "primary", "safe", etc.)
+@mixin generate-dodo-ui-calendarYearChip-colors($color-name) {
+  --dodo-ui-CalendarYearChip-#{$color-name}-bg: transparent;
+  --dodo-ui-CalendarYearChip-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-100);
+  --dodo-ui-CalendarYearChip-#{$color-name}-active-bg: var(--dodo-color-#{$color-name}-200);
+
+  --dodo-ui-CalendarYearChip-selected-#{$color-name}-bg: var(--dodo-color-#{$color-name}-500);
+  --dodo-ui-CalendarYearChip-selected-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-600);
+  --dodo-ui-CalendarYearChip-selected-#{$color-name}-active-bg: var(
+    --dodo-color-#{$color-name}-700
+  );
+}
+
+/// Mixin: generate-dodo-ui-calendarYearChip-colors
+/// Generates CSS custom properties for Dodo UI calendarYearChip styles (text & solid)
+/// across different interaction states (default, hover, active).
+/// @param {String} $color-name - The theme color name (e.g., "primary", "safe", etc.)
+@mixin generate-dodo-ui-calendarYearChip-colors-dark($color-name) {
+  --dodo-ui-CalendarYearChip-#{$color-name}-bg: transparent;
+  --dodo-ui-CalendarYearChip-#{$color-name}-hover-bg: color-mix(
+    in oklab,
+    var(--dodo-color-#{$color-name}-50) 85%,
+    #fff
+  );
+  --dodo-ui-CalendarYearChip-#{$color-name}-active-bg: color-mix(
+    in oklab,
+    var(--dodo-color-#{$color-name}-100) 85%,
+    #fff
+  );
+
+  --dodo-ui-CalendarYearChip-selected-#{$color-name}-bg: var(--dodo-color-#{$color-name}-300);
+  --dodo-ui-CalendarYearChip-selected-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-200);
+  --dodo-ui-CalendarYearChip-selected-#{$color-name}-active-bg: var(
+    --dodo-color-#{$color-name}-100
+  );
+}
+
+/// Mixin: generate-dodo-ui-calendarYearChip-color
+/// Auto-generates .color--[theme] > variant--solid styles
+/// @param {String} $theme - e.g., default, safe, danger, etc.
+@mixin generate-dodo-ui-calendarYearChip-color($theme) {
+  &--#{$theme} {
+    .chip:not([disabled]) {
+      background-color: var(--dodo-ui-CalendarYearChip-#{$theme}-bg);
+
+      &:hover {
+        background-color: var(--dodo-ui-CalendarYearChip-#{$theme}-hover-bg);
+      }
+
+      &:active {
+        background-color: var(--dodo-ui-CalendarYearChip-#{$theme}-active-bg);
+      }
+    }
+
+    &.today {
+      .chip:not([disabled]) {
+        background-color: var(--dodo-ui-CalendarYearChip-today-#{$theme}-bg);
+
+        &:hover {
+          background-color: var(--dodo-ui-CalendarYearChip-today-#{$theme}-hover-bg);
+        }
+
+        &:active {
+          background-color: var(--dodo-ui-CalendarYearChip-today-#{$theme}-active-bg);
+        }
+      }
+    }
+
+    &.selected {
+      .chip:not([disabled]) {
+        color: var(--dodo-color-constant-white);
+        background-color: var(--dodo-ui-CalendarYearChip-selected-#{$theme}-bg);
+
+        &:hover {
+          background-color: var(--dodo-ui-CalendarYearChip-selected-#{$theme}-hover-bg);
+        }
+
+        &:active {
+          background-color: var(--dodo-ui-CalendarYearChip-selected-#{$theme}-active-bg);
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,35 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import CalendarYearList from './CalendarYearList.svelte';
+import { componentColorArray } from '../../../../../../types/colors.js';
+import { componentSizeArray } from '../../../../../../types/size.js';
+import getMoment from '../../../../../developer tools/helpers/Time/getMoment/getMoment.js';
+export const storyCalendarYearListArgTypes = {
+    color: {
+        control: { type: 'select' },
+        options: componentColorArray,
+    },
+    size: {
+        control: { type: 'select' },
+        options: componentSizeArray,
+    },
+};
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: CalendarYearList,
+    tags: ['autodocs'],
+    argTypes: storyCalendarYearListArgTypes,
+    args: {
+        value: getMoment(undefined, undefined, { utc: true }).format('YYYY'),
+    },
+});
+</script>
+
+<!-- Default CalendarYearList -->
+<Story name="Default" />
+
+<Story
+  name="HideControls"
+  args={{
+    showControls: false,
+  }}
+/>

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

@@ -0,0 +1,21 @@
+import CalendarYearList from './CalendarYearList.svelte';
+import type { StoryBookArgTypes } from '../../../../../../storybook-types.js';
+export declare const storyCalendarYearListArgTypes: StoryBookArgTypes;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const CalendarYearList: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type CalendarYearList = InstanceType<typeof CalendarYearList>;
+export default CalendarYearList;

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

@@ -0,0 +1,83 @@
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts">import CalendarYearChip from './CalendarYearChip/CalendarYearChip.svelte';
+import getMoment from '../../../../../developer tools/helpers/Time/getMoment/getMoment.js';
+import { Button } from '../../../../../../index.js';
+import Icon from '@iconify/svelte';
+let { class: className = '', ref = $bindable(), value, onselect, calendarYearChipProps, size = 'normal', color, customCalendarYearChipContent, customCalendarYearChip, minDate = getMoment('1910-01-01', 'YYYY-MM-DD', { utc: true }).toDate(), maxDate = getMoment(undefined, undefined, { utc: true }).add(100, 'years').toDate(), oncancel, showControls = true, } = $props();
+function getYears(startYear, endYear) {
+    let newYears = [];
+    for (let index = startYear; index <= endYear; index++) {
+        newYears.push(index.toString());
+    }
+    return newYears;
+}
+const startYear = $derived(Number(getMoment(minDate).format('YYYY')));
+const endYear = $derived(Number(getMoment(maxDate).format('YYYY')));
+const years = $derived(getYears(startYear, endYear));
+</script>
+
+<div class={['dodo-ui-CalendarYearList', `size--${size}`, className].join(' ')} bind:this={ref}>
+  {#if showControls}
+    <div class="Controls">
+      <Button {size} {color} variant="text" name="BackButton" onclick={oncancel} roundness={2}>
+        {#snippet before()}
+          <Icon icon="material-symbols:arrow-back-rounded" width="24" height="24" />
+        {/snippet}
+
+        Back
+      </Button>
+    </div>
+  {/if}
+
+  <ul>
+    {#each years as year (year)}
+      <CalendarYearChip
+        value={year}
+        selected={value === year ? true : false}
+        {onselect}
+        {size}
+        {color}
+        {customCalendarYearChipContent}
+        {customCalendarYearChip}
+        {...calendarYearChipProps}
+      />
+    {/each}
+  </ul>
+</div>
+
+<style>.dodo-ui-CalendarYearList {
+  user-select: none;
+}
+.dodo-ui-CalendarYearList ul {
+  margin: 0;
+  padding: 0;
+  flex-wrap: wrap;
+  display: inline-flex;
+  overflow-y: auto;
+}
+.dodo-ui-CalendarYearList :global(.dodo-ui-CalendarYearChip) {
+  width: 33.333%;
+}
+.dodo-ui-CalendarYearList .Controls {
+  margin-bottom: calc(var(--dodo-ui-space) * 2);
+}
+.dodo-ui-CalendarYearList.size--normal {
+  width: calc(var(--dodo-ui-element-height-normal) * 7);
+}
+.dodo-ui-CalendarYearList.size--normal ul {
+  max-height: calc(var(--dodo-ui-element-height-normal) * 5);
+}
+.dodo-ui-CalendarYearList.size--small {
+  width: calc(var(--dodo-ui-element-height-small) * 7);
+}
+.dodo-ui-CalendarYearList.size--small ul {
+  max-height: calc(var(--dodo-ui-element-height-small) * 5);
+}
+.dodo-ui-CalendarYearList.size--large {
+  width: calc(var(--dodo-ui-element-height-large) * 7);
+}
+.dodo-ui-CalendarYearList.size--large ul {
+  max-height: calc(var(--dodo-ui-element-height-large) * 5);
+}</style>

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

@@ -0,0 +1,36 @@
+import type { ButtonClickEvent } from '../../../../Form/Button/Button.svelte';
+export interface CalendarYearListProps {
+    /** CalendarYearList ref */
+    ref?: HTMLDivElement;
+    /** Custom css class */
+    class?: string;
+    /** Selcted year Value */
+    value?: string;
+    /** onselect event handler */
+    onselect?: (value: string, e: ButtonClickEvent) => void;
+    /** oncancel event handler */
+    oncancel?: (e: ButtonClickEvent) => void;
+    /** Custom Calendar Chip Content */
+    customCalendarYearChipContent?: (value: string) => Snippet;
+    /** Custom Calendar Chip */
+    customCalendarYearChip?: (value: string) => Snippet;
+    /** How large should the Component be? */
+    size?: ComponentSize;
+    /** What color to use? */
+    color?: ComponentColor;
+    /** calendarYearChipProps: calendarYearChip component props */
+    calendarYearChipProps?: Partial<CalendarYearChipProps>;
+    /** Minimum allowed date, rest of the dates will be disabled  */
+    minDate?: Date;
+    /** Maxium allowed date, rest of the dates will be disabled  */
+    maxDate?: Date;
+    /** show controls */
+    showControls?: boolean;
+}
+import type { ComponentColor } from '../../../../../../types/colors.js';
+import type { Snippet } from 'svelte';
+import type { ComponentSize } from '../../../../../../types/size.js';
+import type { CalendarYearChipProps } from './CalendarYearChip/CalendarYearChip.svelte';
+declare const CalendarYearList: import("svelte").Component<CalendarYearListProps, {}, "ref">;
+type CalendarYearList = ReturnType<typeof CalendarYearList>;
+export default CalendarYearList;

package/dist/stories/components/Info/Calendar/SubComponents/CalendarYearList/Color/Color.stories.svelte

@@ -0,0 +1,23 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import CalendarYearList from '../CalendarYearList.svelte';
+  import { storyCalendarYearListArgTypes } from '../CalendarYearList.stories.svelte';
+  import getMoment from '../../../../../../developer tools/helpers/Time/getMoment/getMoment.js';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: CalendarYearList,
+    tags: ['autodocs'],
+    argTypes: storyCalendarYearListArgTypes,
+    args: {
+      value: getMoment(undefined, undefined, { utc: true }).format('YYYY'),
+    },
+  });
+</script>
+
+<Story name="Primary" />
+<Story name="Secondary" args={{ color: 'secondary' }} />
+<Story name="Neutral" args={{ color: 'neutral' }} />
+<Story name="Safe" args={{ color: 'safe' }} />
+<Story name="Warning" args={{ color: 'warning' }} />
+<Story name="Danger" args={{ color: 'danger' }} />

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

@@ -0,0 +1,26 @@
+export default Color;
+type Color = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Color: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/stories/components/Info/Calendar/SubComponents/CalendarYearList/Customize/Customize.stories.svelte

@@ -0,0 +1,34 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import CalendarYearList from '../CalendarYearList.svelte';
+import { storyCalendarYearListArgTypes } from '../CalendarYearList.stories.svelte';
+import { Button, getMoment } from '../../../../../../../index.js';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: CalendarYearList,
+    tags: ['autodocs'],
+    argTypes: storyCalendarYearListArgTypes,
+    args: {
+        value: getMoment(undefined, undefined, { utc: true }).format('YYYY'),
+    },
+});
+</script>
+
+<Story name="Default" />
+
+<Story name="customCalendarYearChipContent" asChild>
+  <CalendarYearList value={getMoment(undefined, undefined, { utc: true }).format('YYYY')}>
+    {#snippet customCalendarYearChipContent(val)}
+      🗓️{val}
+    {/snippet}
+  </CalendarYearList>
+</Story>
+
+<Story name="customCalendarYearChip" asChild>
+  <CalendarYearList value={getMoment(undefined, undefined, { utc: true }).format('YYYY')}>
+    {#snippet customCalendarYearChip(val)}
+      <Button size="small" variant="text" outline>
+        {val}
+      </Button>
+    {/snippet}
+  </CalendarYearList>
+</Story>

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Customize: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Customize = InstanceType<typeof Customize>;
+export default Customize;

package/dist/stories/components/Info/Calendar/SubComponents/CalendarYearList/Events/Events.stories.svelte

@@ -0,0 +1,21 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import CalendarYearList from '../CalendarYearList.svelte';
+import { storyCalendarYearListArgTypes } from '../CalendarYearList.stories.svelte';
+import getMoment from '../../../../../../developer tools/helpers/Time/getMoment/getMoment.js';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: CalendarYearList,
+    tags: ['autodocs'],
+    argTypes: storyCalendarYearListArgTypes,
+});
+let value = $state(getMoment(undefined, undefined, { utc: true }).format('YYYY'));
+</script>
+
+<Story name="Select" asChild>
+  <CalendarYearList
+    {value}
+    onselect={(val) => {
+      value = val;
+    }}
+  />
+</Story>

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Events: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Events = InstanceType<typeof Events>;
+export default Events;

package/dist/stories/components/Info/Calendar/SubComponents/CalendarYearList/Size/Size.stories.svelte

@@ -0,0 +1,20 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import CalendarYearList from '../CalendarYearList.svelte';
+  import { storyCalendarYearListArgTypes } from '../CalendarYearList.stories.svelte';
+  import getMoment from '../../../../../../developer tools/helpers/Time/getMoment/getMoment.js';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: CalendarYearList,
+    tags: ['autodocs'],
+    argTypes: storyCalendarYearListArgTypes,
+    args: {
+      value: getMoment(undefined, undefined, { utc: true }).format('YYYY'),
+    },
+  });
+</script>
+
+<Story name="Normal" />
+<Story name="Small" args={{ size: 'small' }} />
+<Story name="Large" args={{ size: 'large' }} />

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

@@ -0,0 +1,26 @@
+export default Size;
+type Size = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Size: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

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

@@ -0,0 +1,28 @@
+import type { DateOfMonth } from './types.js';
+import type { CalendarWeekNames } from '../SubComponents/CalendarDatesChart/CalendarWeek/CalendarWeek.svelte';
+export interface CreateDatesOfMonthSettings {
+    /** Day considered as start of the week */
+    startOfWeek?: CalendarWeekNames;
+    /** Include leading days from the previous month */
+    showLastMonth?: boolean;
+    /** Include trailing days from the next month */
+    showNextMonth?: boolean;
+    /** Set today manually  */
+    today?: Date;
+    /** Minimum allowed date, rest of the dates will be disabled  */
+    minDate?: Date;
+    /** Maxium allowed date, rest of the dates will be disabled  */
+    maxDate?: Date;
+    /** Exclude Dates, these dates will be disabled */
+    excludeDates?: Date[];
+    /** Include Dates, rest of the dates will be disabled  */
+    includeDates?: Date[];
+    /** Optional IANA timezone */
+    timezone?: string;
+    /** Use UTC time */
+    utc?: boolean;
+    /** Range value */
+    rangeValue?: [Date, Date];
+}
+export type CreateDateOfMonthType = 'currentMonth' | 'nextMonth' | 'lastMonth';
+export default function createDateOfMonth(date?: Date, settings?: CreateDatesOfMonthSettings, monthType?: CreateDateOfMonthType): DateOfMonth;

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

@@ -0,0 +1,87 @@
+import getMoment from '../../../../developer tools/helpers/Time/getMoment/getMoment.js';
+function dateMoment(date, settings) {
+    return getMoment(date, undefined, {
+        timezone: settings?.timezone,
+        utc: settings?.utc,
+    });
+}
+function getIsToday(dayMoment, todayDate, todayManual) {
+    const dayDateFormat = dayMoment.format('DD-MM-YYYY');
+    let today = false;
+    if (todayManual && todayManual === dayDateFormat) {
+        today = true;
+    }
+    else if (todayDate === dayDateFormat) {
+        today = true;
+    }
+    return today;
+}
+function getIsDateDisabled(dayMoment, minDate, maxDate, excludeDates, includeDates) {
+    const dayDateFormat = dayMoment.format('DD-MM-YYYY');
+    let disabled = false;
+    if (minDate?.isValid() && dayMoment.isBefore(minDate)) {
+        disabled = true;
+    }
+    if (maxDate?.isValid() && dayMoment.isAfter(maxDate)) {
+        disabled = true;
+    }
+    if (excludeDates?.length && excludeDates.includes(dayDateFormat)) {
+        disabled = true;
+    }
+    if (includeDates?.length && !includeDates.includes(dayDateFormat)) {
+        disabled = true;
+    }
+    return disabled;
+}
+export default function createDateOfMonth(date, settings, monthType = 'currentMonth') {
+    const minDate = settings?.minDate ? dateMoment(settings.minDate, settings) : undefined;
+    const maxDate = settings?.maxDate ? dateMoment(settings.maxDate, settings) : undefined;
+    const excludeDates = settings?.excludeDates?.length
+        ? settings?.excludeDates.map((item) => dateMoment(item, settings).format('DD-MM-YYYY'))
+        : undefined;
+    const includeDates = settings?.includeDates?.length
+        ? settings?.includeDates.map((item) => dateMoment(item, settings).format('DD-MM-YYYY'))
+        : undefined;
+    const [range1, range2] = settings?.rangeValue || [];
+    const rangeStart = range1 ? dateMoment(range1, settings) : undefined;
+    const rangeEnd = range2 ? dateMoment(range2, settings) : undefined;
+    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);
+    const dayMomentDayFormatted = dayMoment.format('DD-MM-YYYY');
+    let isRangeStart = false;
+    let isRangeEnd = false;
+    let inRange = false;
+    if (rangeStart && rangeEnd) {
+        if (dayMomentDayFormatted === rangeStart.format('DD-MM-YYYY')) {
+            isRangeStart = true;
+        }
+        if (dayMomentDayFormatted === rangeEnd.format('DD-MM-YYYY')) {
+            isRangeEnd = true;
+        }
+        if (dayMoment.isAfter(rangeStart) && dayMoment.isBefore(rangeEnd)) {
+            inRange = true;
+        }
+    }
+    const dataToExport = {
+        id: `${dayMoment.valueOf()}`,
+        date: dayMoment.toDate(),
+        isCurrentMonth: true,
+        disabled: getIsDateDisabled(dayMoment, minDate, maxDate, excludeDates, includeDates),
+        today: getIsToday(dayMoment, todayDate, todayManual),
+        isRangeStart,
+        isRangeEnd,
+        inRange,
+    };
+    if (monthType === 'lastMonth') {
+        dataToExport.isLastMonth = true;
+        dataToExport.isCurrentMonth = false;
+    }
+    else if (monthType === 'nextMonth') {
+        dataToExport.isNextMonth = true;
+        dataToExport.isCurrentMonth = false;
+    }
+    return dataToExport;
+}

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

@@ -0,0 +1,10 @@
+import type { DateOfMonth } from './types.js';
+import { type CreateDatesOfMonthSettings } from './createDateOfMonth.js';
+/**
+ * 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.
+ */
+export default function getDatesOfMonth(date?: Date, settings?: CreateDatesOfMonthSettings): DateOfMonth[][] | null;