@flightlesslabs/dodo-ui 0.9.0 → 0.10.0

package/dist/index.d.ts

@@ -12,6 +12,9 @@ export { default as isValidNumberValue } from './stories/developer tools/helpers
 export type { IsValidNumberValueSettings } from './stories/developer tools/helpers/Numbers/isValidNumberValue/isValidNumberValue.js';
 /** developer tools: helpers: Numbers: cleanNumericString */
 export { default as cleanNumericString } from './stories/developer tools/helpers/Numbers/cleanNumericString/cleanNumericString.js';
+/** developer tools: helpers: Numbers: cleanNumericString */
+export { default as getMoment } from './stories/developer tools/helpers/Time/getMoment/getMoment.js';
+export type { GetMomentDate, GetMomentFormat, GetMomentSettings, } from './stories/developer tools/helpers/Time/getMoment/getMoment.js';
 /** developer tools: directives: clickOutside */
 export { clickOutside } from './stories/developer tools/directives/clickOutside/clickOutside.js';
 /** developer tools: components: UtilityButton */
@@ -52,6 +55,9 @@ export type { SelectOption, SelectDropdownArrowPosition, SelectProps, } from './
 /** Form: NumericInput */
 export { default as NumericInput } from './stories/components/Form/NumericInput/NumericInput.svelte';
 export type { NumericInputProps } from './stories/components/Form/NumericInput/NumericInput.svelte';
+/** Form: DatePicker */
+export { default as DatePicker } from './stories/components/Form/DatePicker/DatePicker.svelte';
+export type { DatePickerProps, DatePickerCalendarIconPosition, } from './stories/components/Form/DatePicker/DatePicker.svelte';
 /** Layout: Paper */
 export { default as Paper } from './stories/components/Layout/Paper/Paper.svelte';
 export type { PaperColor, PaperProps } from './stories/components/Layout/Paper/Paper.svelte';
@@ -65,3 +71,33 @@ export { default as MenuItem } from './stories/components/Layout/Menu/MenuItem/M
 export type { MenuItemType, MenuItemProps, } from './stories/components/Layout/Menu/MenuItem/MenuItem.svelte';
 export { default as DynamicMenu } from './stories/components/Layout/Menu/DynamicMenu/DynamicMenu.svelte';
 export type { DynamicMenuItemOption, DynamicMenuProps, } from './stories/components/Layout/Menu/DynamicMenu/DynamicMenu.svelte';
+/** Info: Calendar */
+export { default as Calendar } from './stories/components/Info/Calendar/Calendar.svelte';
+export type { CalendarProps, CalendarActiveSection, } from './stories/components/Info/Calendar/Calendar.svelte';
+export { default as CalendarDatesChart } from './stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDatesChart.svelte';
+export type { CalendarDatesChartProps } from './stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDatesChart.svelte';
+export { default as CalendarDateChip } from './stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/CalendarDateChip.svelte';
+export type { CalendarDateChipProps } from './stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/CalendarDateChip.svelte';
+export { default as CalendarWeek, calendarWeekOptions, } from './stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarWeek/CalendarWeek.svelte';
+export type { CalendarWeekProps, CalendarWeekOption, CalendarWeekNames, CalendarWeekDayNameType, } from './stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarWeek/CalendarWeek.svelte';
+export type { CalendarControlsProps } from './stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarControls.svelte';
+export { default as CalendarControls } from './stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarControls.svelte';
+export type { CalendarMonthNames, CalendarMonthOption, calendarMonthNameType, CalendarMonthSelectorProps, } from './stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/CalendarMonthSelector.svelte';
+export { default as CalendarMonthSelector, calendarMonthOptions, } from './stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/CalendarMonthSelector.svelte';
+export type { CalendarYearSelectorProps } from './stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarYearSelector/CalendarYearSelector.svelte';
+export { default as CalendarYearSelector } from './stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarYearSelector/CalendarYearSelector.svelte';
+export type { CalendarNavigationProps } from './stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarNavigation/CalendarNavigation.svelte';
+export { default as CalendarNavigation } from './stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarNavigation/CalendarNavigation.svelte';
+export type { CalendarMonthListProps } from './stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthList.svelte';
+export { default as CalendarMonthList } from './stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthList.svelte';
+export type { CalendarMonthChipProps } from './stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/CalendarMonthChip.svelte';
+export { default as CalendarMonthChip } from './stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/CalendarMonthChip.svelte';
+export type { CalendarYearListProps } from './stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearList.svelte';
+export { default as CalendarYearList } from './stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearList.svelte';
+export type { CalendarYearChipProps } from './stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/CalendarYearChip.svelte';
+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';

package/dist/index.js

@@ -5,6 +5,8 @@ export { default as createLogger } from './stories/developer tools/helpers/logge
 export { default as isValidNumberValue } from './stories/developer tools/helpers/Numbers/isValidNumberValue/isValidNumberValue.js';
 /** developer tools: helpers: Numbers: cleanNumericString */
 export { default as cleanNumericString } from './stories/developer tools/helpers/Numbers/cleanNumericString/cleanNumericString.js';
+/** developer tools: helpers: Numbers: cleanNumericString */
+export { default as getMoment } from './stories/developer tools/helpers/Time/getMoment/getMoment.js';
 /** developer tools: directives: clickOutside */
 export { clickOutside } from './stories/developer tools/directives/clickOutside/clickOutside.js';
 /** developer tools: components: UtilityButton */
@@ -32,6 +34,8 @@ export { default as Message } from './stories/components/Form/Message/Message.sv
 export { default as Select } from './stories/components/Form/Select/Select.svelte';
 /** Form: NumericInput */
 export { default as NumericInput } from './stories/components/Form/NumericInput/NumericInput.svelte';
+/** Form: DatePicker */
+export { default as DatePicker } from './stories/components/Form/DatePicker/DatePicker.svelte';
 /** Layout: Paper */
 export { default as Paper } from './stories/components/Layout/Paper/Paper.svelte';
 /** Layout: Separator */
@@ -40,3 +44,19 @@ export { default as Separator } from './stories/components/Layout/Separator/Sepa
 export { default as Menu } from './stories/components/Layout/Menu/Menu.svelte';
 export { default as MenuItem } from './stories/components/Layout/Menu/MenuItem/MenuItem.svelte';
 export { default as DynamicMenu } from './stories/components/Layout/Menu/DynamicMenu/DynamicMenu.svelte';
+/** Info: Calendar */
+export { default as Calendar } from './stories/components/Info/Calendar/Calendar.svelte';
+export { default as CalendarDatesChart } from './stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDatesChart.svelte';
+export { default as CalendarDateChip } from './stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/CalendarDateChip.svelte';
+export { default as CalendarWeek, calendarWeekOptions, } from './stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarWeek/CalendarWeek.svelte';
+export { default as CalendarControls } from './stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarControls.svelte';
+export { default as CalendarMonthSelector, calendarMonthOptions, } from './stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/CalendarMonthSelector.svelte';
+export { default as CalendarYearSelector } from './stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarYearSelector/CalendarYearSelector.svelte';
+export { default as CalendarNavigation } from './stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarNavigation/CalendarNavigation.svelte';
+export { default as CalendarMonthList } from './stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthList.svelte';
+export { default as CalendarMonthChip } from './stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/CalendarMonthChip.svelte';
+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';

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

@@ -127,45 +127,141 @@ let { children, type = 'button', size = 'normal', color = 'primary', roundness =
 :global(.dodo-theme--dark) {
   --dodo-ui-Button-disabled-bg: var(--dodo-color-neutral-100);
   --dodo-ui-Button-disabled-color: var(--dodo-color-neutral-500);
-  --dodo-ui-Button-outline-neutral: var(--dodo-color-neutral-300);
-  --dodo-ui-Button-text-neutral-bg: var(--dodo-color-neutral-50);
-  --dodo-ui-Button-text-neutral-hover-bg: var(--dodo-color-neutral-100);
-  --dodo-ui-Button-text-neutral-active-bg: var(--dodo-color-neutral-200);
+  --dodo-ui-Button-outline-neutral: color-mix(
+    in oklab,
+    var(--dodo-color-neutral-300) 90%,
+    #fff
+  );
+  --dodo-ui-Button-text-neutral-bg: color-mix(
+    in oklab,
+    var(--dodo-color-neutral-50) 90%,
+    #fff
+  );
+  --dodo-ui-Button-text-neutral-hover-bg: color-mix(
+    in oklab,
+    var(--dodo-color-neutral-100) 90%,
+    #fff
+  );
+  --dodo-ui-Button-text-neutral-active-bg: color-mix(
+    in oklab,
+    var(--dodo-color-neutral-200) 90%,
+    #fff
+  );
   --dodo-ui-Button-solid-neutral-bg: var(--dodo-color-neutral-300);
   --dodo-ui-Button-solid-neutral-hover-bg: var(--dodo-color-neutral-200);
   --dodo-ui-Button-solid-neutral-active-bg: var(--dodo-color-neutral-100);
-  --dodo-ui-Button-outline-primary: var(--dodo-color-primary-300);
-  --dodo-ui-Button-text-primary-bg: var(--dodo-color-primary-50);
-  --dodo-ui-Button-text-primary-hover-bg: var(--dodo-color-primary-100);
-  --dodo-ui-Button-text-primary-active-bg: var(--dodo-color-primary-200);
+  --dodo-ui-Button-outline-primary: color-mix(
+    in oklab,
+    var(--dodo-color-primary-300) 90%,
+    #fff
+  );
+  --dodo-ui-Button-text-primary-bg: color-mix(
+    in oklab,
+    var(--dodo-color-primary-50) 90%,
+    #fff
+  );
+  --dodo-ui-Button-text-primary-hover-bg: color-mix(
+    in oklab,
+    var(--dodo-color-primary-100) 90%,
+    #fff
+  );
+  --dodo-ui-Button-text-primary-active-bg: color-mix(
+    in oklab,
+    var(--dodo-color-primary-200) 90%,
+    #fff
+  );
   --dodo-ui-Button-solid-primary-bg: var(--dodo-color-primary-300);
   --dodo-ui-Button-solid-primary-hover-bg: var(--dodo-color-primary-200);
   --dodo-ui-Button-solid-primary-active-bg: var(--dodo-color-primary-100);
-  --dodo-ui-Button-outline-secondary: var(--dodo-color-secondary-300);
-  --dodo-ui-Button-text-secondary-bg: var(--dodo-color-secondary-50);
-  --dodo-ui-Button-text-secondary-hover-bg: var(--dodo-color-secondary-100);
-  --dodo-ui-Button-text-secondary-active-bg: var(--dodo-color-secondary-200);
+  --dodo-ui-Button-outline-secondary: color-mix(
+    in oklab,
+    var(--dodo-color-secondary-300) 90%,
+    #fff
+  );
+  --dodo-ui-Button-text-secondary-bg: color-mix(
+    in oklab,
+    var(--dodo-color-secondary-50) 90%,
+    #fff
+  );
+  --dodo-ui-Button-text-secondary-hover-bg: color-mix(
+    in oklab,
+    var(--dodo-color-secondary-100) 90%,
+    #fff
+  );
+  --dodo-ui-Button-text-secondary-active-bg: color-mix(
+    in oklab,
+    var(--dodo-color-secondary-200) 90%,
+    #fff
+  );
   --dodo-ui-Button-solid-secondary-bg: var(--dodo-color-secondary-300);
   --dodo-ui-Button-solid-secondary-hover-bg: var(--dodo-color-secondary-200);
   --dodo-ui-Button-solid-secondary-active-bg: var(--dodo-color-secondary-100);
-  --dodo-ui-Button-outline-safe: var(--dodo-color-safe-300);
-  --dodo-ui-Button-text-safe-bg: var(--dodo-color-safe-50);
-  --dodo-ui-Button-text-safe-hover-bg: var(--dodo-color-safe-100);
-  --dodo-ui-Button-text-safe-active-bg: var(--dodo-color-safe-200);
+  --dodo-ui-Button-outline-safe: color-mix(
+    in oklab,
+    var(--dodo-color-safe-300) 90%,
+    #fff
+  );
+  --dodo-ui-Button-text-safe-bg: color-mix(
+    in oklab,
+    var(--dodo-color-safe-50) 90%,
+    #fff
+  );
+  --dodo-ui-Button-text-safe-hover-bg: color-mix(
+    in oklab,
+    var(--dodo-color-safe-100) 90%,
+    #fff
+  );
+  --dodo-ui-Button-text-safe-active-bg: color-mix(
+    in oklab,
+    var(--dodo-color-safe-200) 90%,
+    #fff
+  );
   --dodo-ui-Button-solid-safe-bg: var(--dodo-color-safe-300);
   --dodo-ui-Button-solid-safe-hover-bg: var(--dodo-color-safe-200);
   --dodo-ui-Button-solid-safe-active-bg: var(--dodo-color-safe-100);
-  --dodo-ui-Button-outline-warning: var(--dodo-color-warning-300);
-  --dodo-ui-Button-text-warning-bg: var(--dodo-color-warning-50);
-  --dodo-ui-Button-text-warning-hover-bg: var(--dodo-color-warning-100);
-  --dodo-ui-Button-text-warning-active-bg: var(--dodo-color-warning-200);
+  --dodo-ui-Button-outline-warning: color-mix(
+    in oklab,
+    var(--dodo-color-warning-300) 90%,
+    #fff
+  );
+  --dodo-ui-Button-text-warning-bg: color-mix(
+    in oklab,
+    var(--dodo-color-warning-50) 90%,
+    #fff
+  );
+  --dodo-ui-Button-text-warning-hover-bg: color-mix(
+    in oklab,
+    var(--dodo-color-warning-100) 90%,
+    #fff
+  );
+  --dodo-ui-Button-text-warning-active-bg: color-mix(
+    in oklab,
+    var(--dodo-color-warning-200) 90%,
+    #fff
+  );
   --dodo-ui-Button-solid-warning-bg: var(--dodo-color-warning-300);
   --dodo-ui-Button-solid-warning-hover-bg: var(--dodo-color-warning-200);
   --dodo-ui-Button-solid-warning-active-bg: var(--dodo-color-warning-100);
-  --dodo-ui-Button-outline-danger: var(--dodo-color-danger-300);
-  --dodo-ui-Button-text-danger-bg: var(--dodo-color-danger-50);
-  --dodo-ui-Button-text-danger-hover-bg: var(--dodo-color-danger-100);
-  --dodo-ui-Button-text-danger-active-bg: var(--dodo-color-danger-200);
+  --dodo-ui-Button-outline-danger: color-mix(
+    in oklab,
+    var(--dodo-color-danger-300) 90%,
+    #fff
+  );
+  --dodo-ui-Button-text-danger-bg: color-mix(
+    in oklab,
+    var(--dodo-color-danger-50) 90%,
+    #fff
+  );
+  --dodo-ui-Button-text-danger-hover-bg: color-mix(
+    in oklab,
+    var(--dodo-color-danger-100) 90%,
+    #fff
+  );
+  --dodo-ui-Button-text-danger-active-bg: color-mix(
+    in oklab,
+    var(--dodo-color-danger-200) 90%,
+    #fff
+  );
   --dodo-ui-Button-solid-danger-bg: var(--dodo-color-danger-300);
   --dodo-ui-Button-solid-danger-hover-bg: var(--dodo-color-danger-200);
   --dodo-ui-Button-solid-danger-active-bg: var(--dodo-color-danger-100);
@@ -188,7 +284,6 @@ let { children, type = 'button', size = 'normal', color = 'primary', roundness =
   outline: 0;
   color: inherit;
   letter-spacing: 0.3px;
-  font-family: inherit;
 }
 .dodo-ui-Button.size--normal {
   height: var(--dodo-ui-element-height-normal);

package/dist/stories/components/Form/Button/utils/scss/mixins.scss

@@ -19,11 +19,27 @@
 /// across different interaction states (default, hover, active).
 /// @param {String} $color-name - The theme color name (e.g., "primary", "safe", etc.)
 @mixin generate-dodo-ui-button-colors-dark($color-name) {
-  --dodo-ui-Button-outline-#{$color-name}: var(--dodo-color-#{$color-name}-300);
+  --dodo-ui-Button-outline-#{$color-name}: color-mix(
+    in oklab,
+    var(--dodo-color-#{$color-name}-300) 90%,
+    #fff
+  );
 
-  --dodo-ui-Button-text-#{$color-name}-bg: var(--dodo-color-#{$color-name}-50);
-  --dodo-ui-Button-text-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-100);
-  --dodo-ui-Button-text-#{$color-name}-active-bg: var(--dodo-color-#{$color-name}-200);
+  --dodo-ui-Button-text-#{$color-name}-bg: color-mix(
+    in oklab,
+    var(--dodo-color-#{$color-name}-50) 90%,
+    #fff
+  );
+  --dodo-ui-Button-text-#{$color-name}-hover-bg: color-mix(
+    in oklab,
+    var(--dodo-color-#{$color-name}-100) 90%,
+    #fff
+  );
+  --dodo-ui-Button-text-#{$color-name}-active-bg: color-mix(
+    in oklab,
+    var(--dodo-color-#{$color-name}-200) 90%,
+    #fff
+  );
 
   --dodo-ui-Button-solid-#{$color-name}-bg: var(--dodo-color-#{$color-name}-300);
   --dodo-ui-Button-solid-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-200);

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

@@ -0,0 +1,44 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import DatePicker from '../DatePicker.svelte';
+import { storyDatePickerArgTypes } from '../DatePicker.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: DatePicker,
+    tags: ['autodocs'],
+    argTypes: storyDatePickerArgTypes,
+    parameters: {
+        docs: {
+            story: {
+                height: '400px',
+                inline: false,
+            },
+        },
+    },
+});
+let value = $state(getMoment().toDate());
+</script>
+
+<Story name="Primary" asChild>
+  <DatePicker {value} />
+</Story>
+
+<Story name="Secondary" asChild>
+  <DatePicker {value} color="secondary" />
+</Story>
+
+<Story name="Neutral" asChild>
+  <DatePicker {value} color="neutral" />
+</Story>
+
+<Story name="Safe" asChild>
+  <DatePicker {value} color="safe" />
+</Story>
+
+<Story name="Warning" asChild>
+  <DatePicker {value} color="warning" />
+</Story>
+
+<Story name="Danger" asChild>
+  <DatePicker {value} color="danger" />
+</Story>

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

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

@@ -0,0 +1,55 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import DatePicker from '../DatePicker.svelte';
+import { storyDatePickerArgTypes } from '../DatePicker.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: DatePicker,
+    tags: ['autodocs'],
+    argTypes: storyDatePickerArgTypes,
+    args: {
+        value: getMoment().toDate(),
+    },
+    parameters: {
+        docs: {
+            story: {
+                height: '400px',
+                inline: false,
+            },
+        },
+    },
+});
+let value = $state(getMoment().toDate());
+</script>
+
+<Story name="Normal" asChild>
+  <DatePicker {value} />
+</Story>
+
+<Story name="HideCalendarMonthSelector" asChild>
+  <DatePicker {value} showCalendarMonthSelector={false} />
+</Story>
+
+<Story name="HideCalendarYearSelector" asChild>
+  <DatePicker {value} showCalendarYearSelector={false} />
+</Story>
+
+<Story name="HideCalendarNavigator" asChild>
+  <DatePicker {value} showCalendarNavigator={false} />
+</Story>
+
+<Story name="HideControlsMonthList" asChild>
+  <DatePicker {value} showControlsMonthList={false} />
+</Story>
+
+<Story name="HideControlsYearList" asChild>
+  <DatePicker {value} showControlsYearList={false} />
+</Story>
+
+<Story name="DisabledNavigationPrev" asChild>
+  <DatePicker {value} disabledCalendarNavigationPrev />
+</Story>
+
+<Story name="DisabledNavigationNext" asChild>
+  <DatePicker {value} disabledCalendarNavigationNext />
+</Story>

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

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

@@ -0,0 +1,164 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import DatePicker from '../DatePicker.svelte';
+import { storyDatePickerArgTypes } from '../DatePicker.stories.svelte';
+import { Button, getMoment } from '../../../../../index.js';
+import Icon from '@iconify/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: '400px',
+                inline: false,
+            },
+        },
+    },
+});
+let value = $state(getMoment().toDate());
+</script>
+
+<Story name="calendarDateChipProps" asChild>
+  <DatePicker
+    {value}
+    calendarDateChipProps={{
+      roundness: 'full',
+    }}
+  />
+</Story>
+
+<Story name="calendarMonthChipProps" asChild>
+  <DatePicker
+    {value}
+    calendarMonthChipProps={{
+      roundness: 2,
+    }}
+  />
+</Story>
+
+<Story name="customCalendarDateChipContent" asChild>
+  <DatePicker value={getMoment().toDate()}>
+    {#snippet customCalendarDateChipContent(dayOfMonth)}
+      🗓️{Number(getMoment(dayOfMonth.date).format('D'))}
+    {/snippet}
+  </DatePicker>
+</Story>
+
+<Story name="customCalendarDateChip" asChild>
+  <DatePicker value={getMoment().toDate()}>
+    {#snippet customCalendarDateChip(dayOfMonth)}
+      <Button size="small" variant="text" outline>
+        {Number(getMoment(dayOfMonth.date).format('D'))}
+      </Button>
+    {/snippet}
+  </DatePicker>
+</Story>
+
+<Story name="customCalendarWeekContent" asChild>
+  <DatePicker value={getMoment().toDate()}>
+    {#snippet customCalendarWeekContent(option)}
+      ☀️{option.abr1}
+    {/snippet}
+  </DatePicker>
+</Story>
+
+<Story name="customCalendarWeek" asChild>
+  <DatePicker value={getMoment().toDate()}>
+    {#snippet customCalendarWeek(option)}
+      <li style="color: blue; display: block;">
+        {option.abr3}
+      </li>
+    {/snippet}
+  </DatePicker>
+</Story>
+
+<Story name="customCalendarMonthSelectorContent" asChild>
+  <DatePicker value={getMoment().toDate()}>
+    {#snippet customCalendarMonthSelectorContent(option)}
+      🗓️{option.abr3}
+    {/snippet}
+  </DatePicker>
+</Story>
+
+<Story name="customCalendarMonthSelector" asChild>
+  <DatePicker value={getMoment().toDate()}>
+    {#snippet customCalendarMonthSelector(option)}
+      <span style="color: blue; display: block;">
+        {option.abr3}
+      </span>
+    {/snippet}
+  </DatePicker>
+</Story>
+
+<Story name="customCalendarYearSelectorContent" asChild>
+  <DatePicker value={getMoment().toDate()}>
+    {#snippet customCalendarYearSelectorContent(selectedYear)}
+      🗓️{selectedYear}
+    {/snippet}
+  </DatePicker>
+</Story>
+
+<Story name="customCalendarYearSelector" asChild>
+  <DatePicker value={getMoment().toDate()}>
+    {#snippet customCalendarYearSelector(selectedYear)}
+      <span style="color: blue; display: block;">
+        {selectedYear}
+      </span>
+    {/snippet}
+  </DatePicker>
+</Story>
+
+<Story name="customCalendarNavigationContent" asChild>
+  <DatePicker value={getMoment().toDate()}>
+    {#snippet customCalendarNavigationPrevContent()}
+      <Icon icon="carbon:previous-filled" width="32" height="32" />
+    {/snippet}
+    {#snippet customCalendarNavigationNextContent()}
+      <Icon icon="carbon:next-outline" width="32" height="32" />
+    {/snippet}
+  </DatePicker>
+</Story>
+
+<Story name="customCalendarNavigation" asChild>
+  <DatePicker value={getMoment().toDate()}>
+    {#snippet customCalendarNavigation()}
+      <Button>Control</Button>
+    {/snippet}
+  </DatePicker>
+</Story>
+
+<Story name="customCalendarMonthChipContent" asChild>
+  <DatePicker value={getMoment().toDate()}>
+    {#snippet customCalendarMonthChipContent(val)}
+      🗓️{val}
+    {/snippet}
+  </DatePicker>
+</Story>
+
+<Story name="customCalendarMonthChip" asChild>
+  <DatePicker value={getMoment().toDate()}>
+    {#snippet customCalendarMonthChip(val)}
+      <Button size="small" variant="text" outline>
+        {val}
+      </Button>
+    {/snippet}
+  </DatePicker>
+</Story>
+
+<Story name="calendarTopContent" asChild>
+  <DatePicker value={getMoment().toDate()}>
+    {#snippet calendarTopContent(activeSection)}
+      Top Content: {activeSection}
+    {/snippet}
+  </DatePicker>
+</Story>
+
+<Story name="calendarBottomContent" asChild>
+  <DatePicker value={getMoment().toDate()}>
+    {#snippet calendarBottomContent(activeSection)}
+      Bottom Content: {activeSection}
+    {/snippet}
+  </DatePicker>
+</Story>

package/dist/stories/components/Form/DatePicker/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;