@flightlesslabs/dodo-ui 0.10.3 → 0.11.1

package/dist/index.d.ts

@@ -98,6 +98,6 @@ export type { CalendarYearChipProps } from './stories/components/Info/Calendar/S
 export { default as CalendarYearChip } from './stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/CalendarYearChip.svelte';
 export type { DateOfMonth } from './stories/components/Info/Calendar/utils/types.js';
 export { DAYS_OF_WEEK, MONTHS } from './stories/components/Info/Calendar/utils/types.js';
-export { default as getDatesOfMonth } from './stories/components/Info/Calendar/utils/getDatesOfMonth.js';
-export { default as createDateOfMonth } from './stories/components/Info/Calendar/utils/createDateOfMonth.js';
-export type { CreateDatesOfMonthSettings, CreateDateOfMonthType, } from './stories/components/Info/Calendar/utils/createDateOfMonth.js';
+export { default as getDatesOfMonth } from './stories/components/Info/Calendar/utils/getDatesOfMonth/getDatesOfMonth.js';
+export { default as createDateOfMonth } from './stories/components/Info/Calendar/utils/createDateOfMonth/createDateOfMonth.js';
+export type { CreateDatesOfMonthSettings, CreateDateOfMonthType, } from './stories/components/Info/Calendar/utils/createDateOfMonth/createDateOfMonth.js';

package/dist/index.js

@@ -58,5 +58,5 @@ export { default as CalendarMonthChip } from './stories/components/Info/Calendar
 export { default as CalendarYearList } from './stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearList.svelte';
 export { default as CalendarYearChip } from './stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/CalendarYearChip.svelte';
 export { DAYS_OF_WEEK, MONTHS } from './stories/components/Info/Calendar/utils/types.js';
-export { default as getDatesOfMonth } from './stories/components/Info/Calendar/utils/getDatesOfMonth.js';
-export { default as createDateOfMonth } from './stories/components/Info/Calendar/utils/createDateOfMonth.js';
+export { default as getDatesOfMonth } from './stories/components/Info/Calendar/utils/getDatesOfMonth/getDatesOfMonth.js';
+export { default as createDateOfMonth } from './stories/components/Info/Calendar/utils/createDateOfMonth/createDateOfMonth.js';

package/dist/stories/components/Form/DatePicker/DatePicker.stories.svelte

@@ -4,6 +4,7 @@ import { componentRoundnessArray } from '../../../../types/roundness.js';
 import { componentSizeArray } from '../../../../types/size.js';
 import { componentColorArray } from '../../../../types/colors.js';
 import Icon from '@iconify/svelte';
+import { getMoment } from '../../../../index.js';
 export const storyDatePickerArgTypes = {
     roundness: {
         control: { type: 'select' },
@@ -77,6 +78,21 @@ let value = $state(new Date());
   <DatePicker {value} open={true} />
 </Story>
 
+<Story name="ManipulateDate" asChild>
+  <DatePicker
+    {value}
+    onselect={(val: Date) => (value = val)}
+    manipulateDate={(dateToModify: DateOfMonth) => {
+      // Disable all Fridays
+      if (getMoment(dateToModify.date, undefined).day() === 5) {
+        dateToModify.disabled = true;
+      }
+
+      return dateToModify;
+    }}
+  />
+</Story>
+
 <Story name="Custom calender icon" asChild>
   <DatePicker {value}>
     {#snippet customCalendarIcon()}

package/dist/stories/components/Form/DatePicker/DatePicker.svelte

@@ -6,7 +6,7 @@ import UtilityButton from '../../../developer tools/components/UtilityButton/Uti
 import Icon from '@iconify/svelte';
 import { createDateOfMonth, DynamicInput, getMoment, Popper, } from '../../../../index.js';
 import Calendar, {} from '../../Info/Calendar/Calendar.svelte';
-let { size = 'normal', roundness = 1, outline = true, name, id, class: className = '', disabled = false, onchange, oninput, onselect, onblur, onfocus, onpaste, oncopy, oncut, onkeydown, onkeypress, onkeyup, before, after, error = false, value, placeholder, ref = $bindable(), readonly = false, editable = false, clearable = false, onclear, customInputContent: customInputContentInternal, customPopupContent: customPopupContentInternal, customCalendarIcon: customCalendarIconInternal, paperProps, popperProps, calendarIconPosition = 'after', popupPositionX, popupPositionY, lockPoistions, popperHeightForVerticalPosition, color, format = 'DD/MM/YYYY', formatEditable: formatEditableRaw, open = $bindable(false), startOfWeek = 'sun', timezone, utc, calendarDateChipProps, activeMonth, showSelected, showLastMonth, showNextMonth, showToday, today, minDate, maxDate, excludeDates, includeDates, customCalendarDateChipContent, customCalendarDateChip, customCalendarWeekContent, customCalendarWeek, weekendDays, weekendDaysColorDays, customCalendarControls, showCalendarControls, calendarMonthSelectorProps, customCalendarMonthSelector, customCalendarMonthSelectorContent, onMonthSelectorClick, calendarYearSelectorProps, customCalendarYearSelector, customCalendarYearSelectorContent, onYearSelectorClick, calendarNavigationProps, customCalendarNavigation, customCalendarNavigationNext, customCalendarNavigationPrev, customCalendarNavigationNextContent, customCalendarNavigationPrevContent, onCalendarNavigationNextClick, onCalendarNavigationPrevClick, disabledCalendarNavigationNext, disabledCalendarNavigationPrev, showCalendarMonthSelector, showCalendarYearSelector, showCalendarNavigator, onselectMonth, customCalendarMonthChipContent, customCalendarMonthChip, disabledMonths, calendarMonthChipProps, calendarYearChipProps, onselectYear, customCalendarYearChipContent, customCalendarYearChip, oncancelMonth, oncancelYear, showControlsMonthList, showControlsYearList, calendarProps, calendarTopContent, calendarBottomContent, } = $props();
+let { size = 'normal', roundness = 1, outline = true, name, id, class: className = '', disabled = false, onchange, oninput, onselect, onblur, onfocus, onpaste, oncopy, oncut, onkeydown, onkeypress, onkeyup, before, after, error = false, value, placeholder, ref = $bindable(), readonly = false, editable = false, clearable = false, onclear, customInputContent: customInputContentInternal, customPopupContent: customPopupContentInternal, customCalendarIcon: customCalendarIconInternal, paperProps, popperProps, calendarIconPosition = 'after', popupPositionX, popupPositionY, lockPoistions, popperHeightForVerticalPosition, color, format = 'DD/MM/YYYY', formatEditable: formatEditableRaw, open = $bindable(false), startOfWeek = 'sun', timezone, utc, calendarDateChipProps, activeMonth, showSelected, showLastMonth, showNextMonth, showToday, today, minDate, maxDate, excludeDates, includeDates, customCalendarDateChipContent, customCalendarDateChip, customCalendarWeekContent, customCalendarWeek, weekendDays, weekendDaysColorDays, customCalendarControls, showCalendarControls, calendarMonthSelectorProps, customCalendarMonthSelector, customCalendarMonthSelectorContent, onMonthSelectorClick, calendarYearSelectorProps, customCalendarYearSelector, customCalendarYearSelectorContent, onYearSelectorClick, calendarNavigationProps, customCalendarNavigation, customCalendarNavigationNext, customCalendarNavigationPrev, customCalendarNavigationNextContent, customCalendarNavigationPrevContent, onCalendarNavigationNextClick, onCalendarNavigationPrevClick, disabledCalendarNavigationNext, disabledCalendarNavigationPrev, showCalendarMonthSelector, showCalendarYearSelector, showCalendarNavigator, onselectMonth, customCalendarMonthChipContent, customCalendarMonthChip, disabledMonths, calendarMonthChipProps, calendarYearChipProps, onselectYear, customCalendarYearChipContent, customCalendarYearChip, oncancelMonth, oncancelYear, showControlsMonthList, showControlsYearList, calendarProps, calendarTopContent, calendarBottomContent, manipulateDate, } = $props();
 const formatEditable = $derived(formatEditableRaw || format);
 let searchText = $derived(value ? getMoment(value, undefined, { timezone, utc }).format(format) : '');
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -16,16 +16,6 @@ let customPopupContentTyped = customPopupContentInternal;
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 let customCalendarIconTyped = customCalendarIconInternal;
 const calenderSize = calendarProps?.size || size;
-let popupWidth = $state(`calc(var(--dodo-ui-element-height-normal) * 7 + var(--dodo-ui-space) * 2)`);
-if (calenderSize === 'normal') {
-    popupWidth = `calc(var(--dodo-ui-element-height-normal) * 7 + var(--dodo-ui-space) * 2)`;
-}
-else if (calenderSize === 'small') {
-    popupWidth = `calc(var(--dodo-ui-element-height-small) * 7 + var(--dodo-ui-space) * 2)`;
-}
-else if (calenderSize === 'large') {
-    popupWidth = `calc(var(--dodo-ui-element-height-large) * 7 + var(--dodo-ui-space) * 2)`;
-}
 function closePopup() {
     open = false;
     ref?.blur();
@@ -110,7 +100,7 @@ function onclearMod(e) {
   <Popper
     {open}
     fullWidth
-    {popupWidth}
+    popupFullWidth={false}
     {onClickOutside}
     {...popperProps}
     {popupPositionX}
@@ -266,6 +256,7 @@ function onclearMod(e) {
             onselect={onselectMod}
             {calendarTopContent}
             {calendarBottomContent}
+            {manipulateDate}
             {...calendarProps}
           />
         </div>

package/dist/stories/components/Form/DatePicker/DatePicker.svelte.d.ts

@@ -206,8 +206,10 @@ export interface DatePickerProps {
     calendarTopContent?: (activeSection: CalendarActiveSection) => Snippet;
     /** calendar Bottom Content*/
     calendarBottomContent?: (activeSection: CalendarActiveSection) => Snippet;
+    /** manipulate date callback */
+    manipulateDate?: (dateToModify: DateOfMonth, settings?: CreateDatesOfMonthSettings) => DateOfMonth;
 }
-import { type CalendarDateChipProps, type CalendarMonthChipProps, type CalendarMonthNames, type CalendarMonthOption, type CalendarMonthSelectorProps, type CalendarWeekNames, type CalendarWeekOption, type CalendarYearChipProps, type CalendarYearSelectorProps, type ComponentColor, type DateOfMonth, type PaperProps, type PopperProps, type PositionX, type PositionY } from '../../../../index.js';
+import { type CalendarDateChipProps, type CalendarMonthChipProps, type CalendarMonthNames, type CalendarMonthOption, type CalendarMonthSelectorProps, type CalendarWeekNames, type CalendarWeekOption, type CalendarYearChipProps, type CalendarYearSelectorProps, type ComponentColor, type CreateDatesOfMonthSettings, type DateOfMonth, type PaperProps, type PopperProps, type PositionX, type PositionY } from '../../../../index.js';
 import type { ButtonClickEvent } from '../Button/Button.svelte';
 import { type CalendarActiveSection, type CalendarProps } from '../../Info/Calendar/Calendar.svelte';
 declare const DatePicker: import("svelte").Component<DatePickerProps, {}, "ref" | "open">;

package/dist/stories/components/Form/DatePicker/Positions/AutoPosition/AutoPosition.stories.svelte

@@ -0,0 +1,43 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import { storyDatePickerArgTypes } from '../../DatePicker.stories.svelte';
+import DatePicker from '../../DatePicker.svelte';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: DatePicker,
+    tags: ['autodocs'],
+    argTypes: storyDatePickerArgTypes,
+    parameters: {
+        docs: {
+            story: {
+                height: '200px',
+                inline: false,
+            },
+        },
+    },
+});
+let value = $state(new Date());
+</script>
+
+<Story name="PositionAutoAdjust" asChild>
+  <DatePicker {value} onselect={(val: Date) => (value = val)} />
+</Story>
+
+<!-- Positions will not auto adjust if you use `lockPoistions` -->
+<Story name="LockPoistions" asChild>
+  <DatePicker
+    {value}
+    onselect={(val: Date) => (value = val)}
+    popupPositionY="top"
+    lockPoistions={true}
+  />
+</Story>
+
+<!-- you can also adjust `popperHeightForVerticalPosition` to achive the same -->
+<Story name="HeightForVerticalPosition" asChild>
+  <DatePicker
+    {value}
+    onselect={(val: Date) => (value = val)}
+    popupPositionY="top"
+    popperHeightForVerticalPosition={3}
+  />
+</Story>

package/dist/stories/components/Form/DatePicker/Positions/AutoPosition/AutoPosition.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 AutoPosition: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type AutoPosition = InstanceType<typeof AutoPosition>;
+export default AutoPosition;

package/dist/stories/components/Form/DatePicker/Positions/Positions.stories.svelte

@@ -0,0 +1,54 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import { storyDatePickerArgTypes } from '../DatePicker.stories.svelte';
+import DatePicker from '../DatePicker.svelte';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: DatePicker,
+    tags: ['autodocs'],
+    argTypes: storyDatePickerArgTypes,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            story: {
+                height: '400px',
+                inline: false,
+            },
+        },
+    },
+});
+let value = $state(new Date());
+</script>
+
+<Story name="BottomLeft" asChild>
+  <DatePicker {value} onselect={(val: Date) => (value = val)} />
+</Story>
+
+<Story name="BottomCenter" asChild>
+  <DatePicker {value} onselect={(val: Date) => (value = val)} popupPositionX="center" />
+</Story>
+
+<Story name="BottomRight" asChild>
+  <DatePicker {value} onselect={(val: Date) => (value = val)} popupPositionX="right" />
+</Story>
+
+<Story name="TopLeft" asChild>
+  <DatePicker {value} onselect={(val: Date) => (value = val)} popupPositionY="top" />
+</Story>
+
+<Story name="TopCenter" asChild>
+  <DatePicker
+    {value}
+    onselect={(val: Date) => (value = val)}
+    popupPositionY="top"
+    popupPositionX="center"
+  />
+</Story>
+
+<Story name="TopRight" asChild>
+  <DatePicker
+    {value}
+    onselect={(val: Date) => (value = val)}
+    popupPositionY="top"
+    popupPositionX="right"
+  />
+</Story>

package/dist/stories/components/Form/DatePicker/Positions/Positions.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 Positions: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Positions = InstanceType<typeof Positions>;
+export default Positions;

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

@@ -99,3 +99,17 @@ let value = $state(getMoment().toDate());
     showCalendarControls: 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/Calendar.svelte

@@ -5,7 +5,7 @@
 import { CalendarDatesChart, CalendarControls, calendarMonthOptions, MONTHS, } from '../../../../index.js';
 import CalendarMonthList from './SubComponents/CalendarMonthList/CalendarMonthList.svelte';
 import CalendarYearList from './SubComponents/CalendarYearList/CalendarYearList.svelte';
-let { class: className = '', ref = $bindable(), value, startOfWeek = 'sun', timezone, utc, calendarDateChipProps, activeMonth: activeMonthRaw, showSelected = true, showLastMonth = true, showNextMonth = true, showToday = true, today, minDate, maxDate, excludeDates, includeDates, onselect, customCalendarDateChipContent, customCalendarDateChip, color, customCalendarWeekContent, customCalendarWeek, size = 'normal', weekendDays, weekendDaysColorDays = true, customCalendarControls, showCalendarControls = true, calendarMonthSelectorProps, customCalendarMonthSelector, customCalendarMonthSelectorContent, onMonthSelectorClick, calendarYearSelectorProps, customCalendarYearSelector, customCalendarYearSelectorContent, onYearSelectorClick, calendarNavigationProps, customCalendarNavigation, customCalendarNavigationNext, customCalendarNavigationPrev, customCalendarNavigationNextContent, customCalendarNavigationPrevContent, onCalendarNavigationNextClick, onCalendarNavigationPrevClick, disabledCalendarNavigationNext: disabledCalendarNavigationNextRaw, disabledCalendarNavigationPrev: disabledCalendarNavigationPrevRaw, showCalendarMonthSelector, showCalendarYearSelector, showCalendarNavigator, onselectMonth, customCalendarMonthChipContent, customCalendarMonthChip, disabledMonths, calendarMonthChipProps, calendarYearChipProps, onselectYear, customCalendarYearChipContent, customCalendarYearChip, oncancelMonth, oncancelYear, showControlsMonthList = true, showControlsYearList = true, calendarTopContent: calendarTopContentInternal, calendarBottomContent: calendarBottomContentInternal, } = $props();
+let { class: className = '', ref = $bindable(), value, startOfWeek = 'sun', timezone, utc, calendarDateChipProps, activeMonth: activeMonthRaw, showSelected = true, showLastMonth = true, showNextMonth = true, showToday = true, today, minDate, maxDate, excludeDates, includeDates, onselect, customCalendarDateChipContent, customCalendarDateChip, color, customCalendarWeekContent, customCalendarWeek, size = 'normal', weekendDays, weekendDaysColorDays = true, customCalendarControls, showCalendarControls = true, calendarMonthSelectorProps, customCalendarMonthSelector, customCalendarMonthSelectorContent, onMonthSelectorClick, calendarYearSelectorProps, customCalendarYearSelector, customCalendarYearSelectorContent, onYearSelectorClick, calendarNavigationProps, customCalendarNavigation, customCalendarNavigationNext, customCalendarNavigationPrev, customCalendarNavigationNextContent, customCalendarNavigationPrevContent, onCalendarNavigationNextClick, onCalendarNavigationPrevClick, disabledCalendarNavigationNext: disabledCalendarNavigationNextRaw, disabledCalendarNavigationPrev: disabledCalendarNavigationPrevRaw, showCalendarMonthSelector, showCalendarYearSelector, showCalendarNavigator, onselectMonth, customCalendarMonthChipContent, customCalendarMonthChip, disabledMonths, calendarMonthChipProps, calendarYearChipProps, onselectYear, customCalendarYearChipContent, customCalendarYearChip, oncancelMonth, oncancelYear, showControlsMonthList = true, showControlsYearList = true, calendarTopContent: calendarTopContentInternal, calendarBottomContent: calendarBottomContentInternal, manipulateDate, } = $props();
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 let calendarTopContentTyped = calendarTopContentInternal;
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -144,6 +144,7 @@ function oncancelYearMod(e) {
     {size}
     {weekendDays}
     {weekendDaysColorDays}
+    {manipulateDate}
   />
 {/snippet}
 

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

@@ -128,8 +128,8 @@ export interface CalendarProps {
     calendarTopContent?: (activeSection: CalendarActiveSection) => Snippet;
     /** calendar Bottom Content*/
     calendarBottomContent?: (activeSection: CalendarActiveSection) => Snippet;
-    /** 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';
@@ -137,7 +137,7 @@ import type { ButtonClickEvent } from '../../Form/Button/Button.svelte';
 import type { DateOfMonth } from './utils/types.js';
 import type { ComponentSize } from '../../../../types/size.js';
 import type { MouseEventHandler } from 'svelte/elements';
-import { type CalendarWeekNames, type CalendarDateChipProps, type CalendarWeekOption, type CalendarMonthOption, type CalendarMonthSelectorProps, type CalendarYearSelectorProps, type CalendarMonthNames, type CalendarMonthChipProps, type CalendarYearChipProps } from '../../../../index.js';
+import { type CalendarWeekNames, type CalendarDateChipProps, type CalendarWeekOption, type CalendarMonthOption, type CalendarMonthSelectorProps, type CalendarYearSelectorProps, type CalendarMonthNames, type CalendarMonthChipProps, type CalendarYearChipProps, type CreateDatesOfMonthSettings } from '../../../../index.js';
 declare const Calendar: import("svelte").Component<CalendarProps, {}, "ref">;
 type Calendar = ReturnType<typeof Calendar>;
 export default Calendar;

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

@@ -2,22 +2,16 @@
 </script>
 
 <script lang="ts">import getMoment from '../../../../../../developer tools/helpers/Time/getMoment/getMoment.js';
-let { class: className = '', dayOfMonth, roundness = 1, showLastMonth = true, showNextMonth = true, selected = false, showToday = true, color = 'primary', ref = $bindable(), customCalendarDateChipContent: customCalendarDateChipContentInternal, customCalendarDateChip: customCalendarDateChipInternal, onselect, onselectRange, size = 'normal', weekend, timezone, utc, showValueRange = false, rangeType, } = $props();
+let { class: className = '', dayOfMonth, roundness = 1, showLastMonth = true, showNextMonth = true, selected = false, showToday = true, color = 'primary', ref = $bindable(), customCalendarDateChipContent: customCalendarDateChipContentInternal, customCalendarDateChip: customCalendarDateChipInternal, onselect, size = 'normal', weekend, timezone, utc, } = $props();
 const dayNumber = Number(getMoment(dayOfMonth.date, undefined, { timezone, utc }).format('D'));
 const disabled = dayOfMonth.disabled || false;
 const today = showToday && dayOfMonth.today ? true : false;
-const isRangeStart = rangeType === 'start' || false;
-const isRangeEnd = rangeType === 'end' || false;
-const inRange = dayOfMonth.inRange || false;
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 let customCalendarDateChipContentTyped = customCalendarDateChipContentInternal;
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 let customCalendarDateChipTyped = customCalendarDateChipInternal;
 function onselectMod(e) {
-    if (showValueRange && onselectRange) {
-        onselectRange(dayOfMonth.date, rangeType || 'start', dayOfMonth, e);
-    }
-    else if (onselect) {
+    if (onselect) {
         onselect(dayOfMonth.date, dayOfMonth, e);
     }
 }
@@ -43,9 +37,6 @@ function onselectMod(e) {
   class:showNextMonth
   class:today
   class:selected
-  class:isRangeStart
-  class:isRangeEnd
-  class:inRange
   class:weekend
   class={[
     'dodo-ui-CalendarDateChip',
@@ -173,20 +164,6 @@ function onselectMod(e) {
   --dodo-ui-CalendarDateChip-selected-neutral-active-bg: var(
     --dodo-color-neutral-100
   );
-  --dodo-ui-CalendarDateChip-isRangeStart-neutral-bg: var(--dodo-color-neutral-300);
-  --dodo-ui-CalendarDateChip-isRangeStart-neutral-hover-bg: var(
-    --dodo-color-neutral-200
-  );
-  --dodo-ui-CalendarDateChip-isRangeStart-neutral-active-bg: var(
-    --dodo-color-neutral-100
-  );
-  --dodo-ui-CalendarDateChip-isRangeEnd-neutral-bg: var(--dodo-color-neutral-300);
-  --dodo-ui-CalendarDateChip-isRangeEnd-neutral-hover-bg: var(
-    --dodo-color-neutral-200
-  );
-  --dodo-ui-CalendarDateChip-isRangeEnd-neutral-active-bg: var(
-    --dodo-color-neutral-100
-  );
   --dodo-ui-CalendarDateChip-primary-bg: transparent;
   --dodo-ui-CalendarDateChip-primary-hover-bg: color-mix(
     in oklab,
@@ -218,20 +195,6 @@ function onselectMod(e) {
   --dodo-ui-CalendarDateChip-selected-primary-active-bg: var(
     --dodo-color-primary-100
   );
-  --dodo-ui-CalendarDateChip-isRangeStart-primary-bg: var(--dodo-color-primary-300);
-  --dodo-ui-CalendarDateChip-isRangeStart-primary-hover-bg: var(
-    --dodo-color-primary-200
-  );
-  --dodo-ui-CalendarDateChip-isRangeStart-primary-active-bg: var(
-    --dodo-color-primary-100
-  );
-  --dodo-ui-CalendarDateChip-isRangeEnd-primary-bg: var(--dodo-color-primary-300);
-  --dodo-ui-CalendarDateChip-isRangeEnd-primary-hover-bg: var(
-    --dodo-color-primary-200
-  );
-  --dodo-ui-CalendarDateChip-isRangeEnd-primary-active-bg: var(
-    --dodo-color-primary-100
-  );
   --dodo-ui-CalendarDateChip-secondary-bg: transparent;
   --dodo-ui-CalendarDateChip-secondary-hover-bg: color-mix(
     in oklab,
@@ -263,20 +226,6 @@ function onselectMod(e) {
   --dodo-ui-CalendarDateChip-selected-secondary-active-bg: var(
     --dodo-color-secondary-100
   );
-  --dodo-ui-CalendarDateChip-isRangeStart-secondary-bg: var(--dodo-color-secondary-300);
-  --dodo-ui-CalendarDateChip-isRangeStart-secondary-hover-bg: var(
-    --dodo-color-secondary-200
-  );
-  --dodo-ui-CalendarDateChip-isRangeStart-secondary-active-bg: var(
-    --dodo-color-secondary-100
-  );
-  --dodo-ui-CalendarDateChip-isRangeEnd-secondary-bg: var(--dodo-color-secondary-300);
-  --dodo-ui-CalendarDateChip-isRangeEnd-secondary-hover-bg: var(
-    --dodo-color-secondary-200
-  );
-  --dodo-ui-CalendarDateChip-isRangeEnd-secondary-active-bg: var(
-    --dodo-color-secondary-100
-  );
   --dodo-ui-CalendarDateChip-safe-bg: transparent;
   --dodo-ui-CalendarDateChip-safe-hover-bg: color-mix(
     in oklab,
@@ -308,20 +257,6 @@ function onselectMod(e) {
   --dodo-ui-CalendarDateChip-selected-safe-active-bg: var(
     --dodo-color-safe-100
   );
-  --dodo-ui-CalendarDateChip-isRangeStart-safe-bg: var(--dodo-color-safe-300);
-  --dodo-ui-CalendarDateChip-isRangeStart-safe-hover-bg: var(
-    --dodo-color-safe-200
-  );
-  --dodo-ui-CalendarDateChip-isRangeStart-safe-active-bg: var(
-    --dodo-color-safe-100
-  );
-  --dodo-ui-CalendarDateChip-isRangeEnd-safe-bg: var(--dodo-color-safe-300);
-  --dodo-ui-CalendarDateChip-isRangeEnd-safe-hover-bg: var(
-    --dodo-color-safe-200
-  );
-  --dodo-ui-CalendarDateChip-isRangeEnd-safe-active-bg: var(
-    --dodo-color-safe-100
-  );
   --dodo-ui-CalendarDateChip-warning-bg: transparent;
   --dodo-ui-CalendarDateChip-warning-hover-bg: color-mix(
     in oklab,
@@ -353,20 +288,6 @@ function onselectMod(e) {
   --dodo-ui-CalendarDateChip-selected-warning-active-bg: var(
     --dodo-color-warning-100
   );
-  --dodo-ui-CalendarDateChip-isRangeStart-warning-bg: var(--dodo-color-warning-300);
-  --dodo-ui-CalendarDateChip-isRangeStart-warning-hover-bg: var(
-    --dodo-color-warning-200
-  );
-  --dodo-ui-CalendarDateChip-isRangeStart-warning-active-bg: var(
-    --dodo-color-warning-100
-  );
-  --dodo-ui-CalendarDateChip-isRangeEnd-warning-bg: var(--dodo-color-warning-300);
-  --dodo-ui-CalendarDateChip-isRangeEnd-warning-hover-bg: var(
-    --dodo-color-warning-200
-  );
-  --dodo-ui-CalendarDateChip-isRangeEnd-warning-active-bg: var(
-    --dodo-color-warning-100
-  );
   --dodo-ui-CalendarDateChip-danger-bg: transparent;
   --dodo-ui-CalendarDateChip-danger-hover-bg: color-mix(
     in oklab,
@@ -398,20 +319,6 @@ function onselectMod(e) {
   --dodo-ui-CalendarDateChip-selected-danger-active-bg: var(
     --dodo-color-danger-100
   );
-  --dodo-ui-CalendarDateChip-isRangeStart-danger-bg: var(--dodo-color-danger-300);
-  --dodo-ui-CalendarDateChip-isRangeStart-danger-hover-bg: var(
-    --dodo-color-danger-200
-  );
-  --dodo-ui-CalendarDateChip-isRangeStart-danger-active-bg: var(
-    --dodo-color-danger-100
-  );
-  --dodo-ui-CalendarDateChip-isRangeEnd-danger-bg: var(--dodo-color-danger-300);
-  --dodo-ui-CalendarDateChip-isRangeEnd-danger-hover-bg: var(
-    --dodo-color-danger-200
-  );
-  --dodo-ui-CalendarDateChip-isRangeEnd-danger-active-bg: var(
-    --dodo-color-danger-100
-  );
 }
 
 .dodo-ui-CalendarDateChip {
@@ -482,26 +389,6 @@ function onselectMod(e) {
 .dodo-ui-CalendarDateChip.color--neutral.selected .chip:not([disabled]):active {
   background-color: var(--dodo-ui-CalendarDateChip-selected-neutral-active-bg);
 }
-.dodo-ui-CalendarDateChip.color--neutral.isRangeStart .chip:not([disabled]) {
-  color: var(--dodo-color-constant-white);
-  background-color: var(--dodo-ui-CalendarDateChip-isRangeStart-neutral-bg);
-}
-.dodo-ui-CalendarDateChip.color--neutral.isRangeStart .chip:not([disabled]):hover {
-  background-color: var(--dodo-ui-CalendarDateChip-isRangeStart-neutral-hover-bg);
-}
-.dodo-ui-CalendarDateChip.color--neutral.isRangeStart .chip:not([disabled]):active {
-  background-color: var(--dodo-ui-CalendarDateChip-isRangeStart-neutral-active-bg);
-}
-.dodo-ui-CalendarDateChip.color--neutral.isRangeEnd .chip:not([disabled]) {
-  color: var(--dodo-color-constant-white);
-  background-color: var(--dodo-ui-CalendarDateChip-isRangeEnd-neutral-bg);
-}
-.dodo-ui-CalendarDateChip.color--neutral.isRangeEnd .chip:not([disabled]):hover {
-  background-color: var(--dodo-ui-CalendarDateChip-isRangeEnd-neutral-hover-bg);
-}
-.dodo-ui-CalendarDateChip.color--neutral.isRangeEnd .chip:not([disabled]):active {
-  background-color: var(--dodo-ui-CalendarDateChip-isRangeEnd-neutral-active-bg);
-}
 .dodo-ui-CalendarDateChip.color--primary .chip:not([disabled]) {
   background-color: var(--dodo-ui-CalendarDateChip-primary-bg);
 }
@@ -530,26 +417,6 @@ function onselectMod(e) {
 .dodo-ui-CalendarDateChip.color--primary.selected .chip:not([disabled]):active {
   background-color: var(--dodo-ui-CalendarDateChip-selected-primary-active-bg);
 }
-.dodo-ui-CalendarDateChip.color--primary.isRangeStart .chip:not([disabled]) {
-  color: var(--dodo-color-constant-white);
-  background-color: var(--dodo-ui-CalendarDateChip-isRangeStart-primary-bg);
-}
-.dodo-ui-CalendarDateChip.color--primary.isRangeStart .chip:not([disabled]):hover {
-  background-color: var(--dodo-ui-CalendarDateChip-isRangeStart-primary-hover-bg);
-}
-.dodo-ui-CalendarDateChip.color--primary.isRangeStart .chip:not([disabled]):active {
-  background-color: var(--dodo-ui-CalendarDateChip-isRangeStart-primary-active-bg);
-}
-.dodo-ui-CalendarDateChip.color--primary.isRangeEnd .chip:not([disabled]) {
-  color: var(--dodo-color-constant-white);
-  background-color: var(--dodo-ui-CalendarDateChip-isRangeEnd-primary-bg);
-}
-.dodo-ui-CalendarDateChip.color--primary.isRangeEnd .chip:not([disabled]):hover {
-  background-color: var(--dodo-ui-CalendarDateChip-isRangeEnd-primary-hover-bg);
-}
-.dodo-ui-CalendarDateChip.color--primary.isRangeEnd .chip:not([disabled]):active {
-  background-color: var(--dodo-ui-CalendarDateChip-isRangeEnd-primary-active-bg);
-}
 .dodo-ui-CalendarDateChip.color--secondary .chip:not([disabled]) {
   background-color: var(--dodo-ui-CalendarDateChip-secondary-bg);
 }
@@ -578,26 +445,6 @@ function onselectMod(e) {
 .dodo-ui-CalendarDateChip.color--secondary.selected .chip:not([disabled]):active {
   background-color: var(--dodo-ui-CalendarDateChip-selected-secondary-active-bg);
 }
-.dodo-ui-CalendarDateChip.color--secondary.isRangeStart .chip:not([disabled]) {
-  color: var(--dodo-color-constant-white);
-  background-color: var(--dodo-ui-CalendarDateChip-isRangeStart-secondary-bg);
-}
-.dodo-ui-CalendarDateChip.color--secondary.isRangeStart .chip:not([disabled]):hover {
-  background-color: var(--dodo-ui-CalendarDateChip-isRangeStart-secondary-hover-bg);
-}
-.dodo-ui-CalendarDateChip.color--secondary.isRangeStart .chip:not([disabled]):active {
-  background-color: var(--dodo-ui-CalendarDateChip-isRangeStart-secondary-active-bg);
-}
-.dodo-ui-CalendarDateChip.color--secondary.isRangeEnd .chip:not([disabled]) {
-  color: var(--dodo-color-constant-white);
-  background-color: var(--dodo-ui-CalendarDateChip-isRangeEnd-secondary-bg);
-}
-.dodo-ui-CalendarDateChip.color--secondary.isRangeEnd .chip:not([disabled]):hover {
-  background-color: var(--dodo-ui-CalendarDateChip-isRangeEnd-secondary-hover-bg);
-}
-.dodo-ui-CalendarDateChip.color--secondary.isRangeEnd .chip:not([disabled]):active {
-  background-color: var(--dodo-ui-CalendarDateChip-isRangeEnd-secondary-active-bg);
-}
 .dodo-ui-CalendarDateChip.color--safe .chip:not([disabled]) {
   background-color: var(--dodo-ui-CalendarDateChip-safe-bg);
 }
@@ -626,26 +473,6 @@ function onselectMod(e) {
 .dodo-ui-CalendarDateChip.color--safe.selected .chip:not([disabled]):active {
   background-color: var(--dodo-ui-CalendarDateChip-selected-safe-active-bg);
 }
-.dodo-ui-CalendarDateChip.color--safe.isRangeStart .chip:not([disabled]) {
-  color: var(--dodo-color-constant-white);
-  background-color: var(--dodo-ui-CalendarDateChip-isRangeStart-safe-bg);
-}
-.dodo-ui-CalendarDateChip.color--safe.isRangeStart .chip:not([disabled]):hover {
-  background-color: var(--dodo-ui-CalendarDateChip-isRangeStart-safe-hover-bg);
-}
-.dodo-ui-CalendarDateChip.color--safe.isRangeStart .chip:not([disabled]):active {
-  background-color: var(--dodo-ui-CalendarDateChip-isRangeStart-safe-active-bg);
-}
-.dodo-ui-CalendarDateChip.color--safe.isRangeEnd .chip:not([disabled]) {
-  color: var(--dodo-color-constant-white);
-  background-color: var(--dodo-ui-CalendarDateChip-isRangeEnd-safe-bg);
-}
-.dodo-ui-CalendarDateChip.color--safe.isRangeEnd .chip:not([disabled]):hover {
-  background-color: var(--dodo-ui-CalendarDateChip-isRangeEnd-safe-hover-bg);
-}
-.dodo-ui-CalendarDateChip.color--safe.isRangeEnd .chip:not([disabled]):active {
-  background-color: var(--dodo-ui-CalendarDateChip-isRangeEnd-safe-active-bg);
-}
 .dodo-ui-CalendarDateChip.color--warning .chip:not([disabled]) {
   background-color: var(--dodo-ui-CalendarDateChip-warning-bg);
 }
@@ -674,26 +501,6 @@ function onselectMod(e) {
 .dodo-ui-CalendarDateChip.color--warning.selected .chip:not([disabled]):active {
   background-color: var(--dodo-ui-CalendarDateChip-selected-warning-active-bg);
 }
-.dodo-ui-CalendarDateChip.color--warning.isRangeStart .chip:not([disabled]) {
-  color: var(--dodo-color-constant-white);
-  background-color: var(--dodo-ui-CalendarDateChip-isRangeStart-warning-bg);
-}
-.dodo-ui-CalendarDateChip.color--warning.isRangeStart .chip:not([disabled]):hover {
-  background-color: var(--dodo-ui-CalendarDateChip-isRangeStart-warning-hover-bg);
-}
-.dodo-ui-CalendarDateChip.color--warning.isRangeStart .chip:not([disabled]):active {
-  background-color: var(--dodo-ui-CalendarDateChip-isRangeStart-warning-active-bg);
-}
-.dodo-ui-CalendarDateChip.color--warning.isRangeEnd .chip:not([disabled]) {
-  color: var(--dodo-color-constant-white);
-  background-color: var(--dodo-ui-CalendarDateChip-isRangeEnd-warning-bg);
-}
-.dodo-ui-CalendarDateChip.color--warning.isRangeEnd .chip:not([disabled]):hover {
-  background-color: var(--dodo-ui-CalendarDateChip-isRangeEnd-warning-hover-bg);
-}
-.dodo-ui-CalendarDateChip.color--warning.isRangeEnd .chip:not([disabled]):active {
-  background-color: var(--dodo-ui-CalendarDateChip-isRangeEnd-warning-active-bg);
-}
 .dodo-ui-CalendarDateChip.color--danger .chip:not([disabled]) {
   background-color: var(--dodo-ui-CalendarDateChip-danger-bg);
 }
@@ -722,26 +529,6 @@ function onselectMod(e) {
 .dodo-ui-CalendarDateChip.color--danger.selected .chip:not([disabled]):active {
   background-color: var(--dodo-ui-CalendarDateChip-selected-danger-active-bg);
 }
-.dodo-ui-CalendarDateChip.color--danger.isRangeStart .chip:not([disabled]) {
-  color: var(--dodo-color-constant-white);
-  background-color: var(--dodo-ui-CalendarDateChip-isRangeStart-danger-bg);
-}
-.dodo-ui-CalendarDateChip.color--danger.isRangeStart .chip:not([disabled]):hover {
-  background-color: var(--dodo-ui-CalendarDateChip-isRangeStart-danger-hover-bg);
-}
-.dodo-ui-CalendarDateChip.color--danger.isRangeStart .chip:not([disabled]):active {
-  background-color: var(--dodo-ui-CalendarDateChip-isRangeStart-danger-active-bg);
-}
-.dodo-ui-CalendarDateChip.color--danger.isRangeEnd .chip:not([disabled]) {
-  color: var(--dodo-color-constant-white);
-  background-color: var(--dodo-ui-CalendarDateChip-isRangeEnd-danger-bg);
-}
-.dodo-ui-CalendarDateChip.color--danger.isRangeEnd .chip:not([disabled]):hover {
-  background-color: var(--dodo-ui-CalendarDateChip-isRangeEnd-danger-hover-bg);
-}
-.dodo-ui-CalendarDateChip.color--danger.isRangeEnd .chip:not([disabled]):active {
-  background-color: var(--dodo-ui-CalendarDateChip-isRangeEnd-danger-active-bg);
-}
 .dodo-ui-CalendarDateChip.weekend .chip {
   color: var(--dodo-color-danger-600);
 }