@flightlesslabs/dodo-ui 0.9.0 → 0.10.0

package/dist/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/CalendarMonthSelector.svelte

@@ -0,0 +1,93 @@
+<script lang="ts" module>import { MONTHS } from '../../../utils/types.js';
+import getMoment from '../../../../../../developer tools/helpers/Time/getMoment/getMoment.js';
+import { Button } from '../../../../../../../index.js';
+import Icon from '@iconify/svelte';
+export const calendarMonthOptions = [
+    { value: MONTHS.JAN, abr3: 'jan', fullName: 'January' },
+    { value: MONTHS.FEB, abr3: 'feb', fullName: 'February' },
+    { value: MONTHS.MAR, abr3: 'mar', fullName: 'March' },
+    { value: MONTHS.APR, abr3: 'apr', fullName: 'April' },
+    { value: MONTHS.MAY, abr3: 'may', fullName: 'May' },
+    { value: MONTHS.JUN, abr3: 'jun', fullName: 'June' },
+    { value: MONTHS.JUL, abr3: 'jul', fullName: 'July' },
+    { value: MONTHS.AUG, abr3: 'aug', fullName: 'August' },
+    { value: MONTHS.SEP, abr3: 'sep', fullName: 'September' },
+    { value: MONTHS.OCT, abr3: 'oct', fullName: 'October' },
+    { value: MONTHS.NOV, abr3: 'nov', fullName: 'November' },
+    { value: MONTHS.DEC, abr3: 'dec', fullName: 'December' },
+];
+</script>
+
+<script lang="ts">"use strict";
+let { class: className = '', ref = $bindable(), value, timezone, utc, activeMonth, size, color, buttonProps, nameType, onclick, disabled, roundness = 2, customCalendarMonthSelector: customCalendarMonthSelectorInternal, customCalendarMonthSelectorContent: customCalendarMonthSelectorContentInternal, } = $props();
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let customCalendarMonthSelectorTyped = customCalendarMonthSelectorInternal;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let customCalendarMonthSelectorContentTyped = customCalendarMonthSelectorContentInternal;
+let selectedMonth = $derived(getMoment(activeMonth || value, undefined, {
+    timezone,
+    utc,
+})
+    .format('MMM')
+    .toLocaleLowerCase());
+const monthDetails = $derived(calendarMonthOptions.find((item) => item.abr3 === selectedMonth) || calendarMonthOptions[0]);
+function onClickMod(e) {
+    if (onclick) {
+        onclick(monthDetails, e);
+    }
+}
+</script>
+
+{#snippet monthName(option: CalendarMonthOption)}
+  {#if customCalendarMonthSelectorContentTyped}
+    {@render customCalendarMonthSelectorContentTyped(option)}
+  {:else if nameType === 'abr3'}
+    {option.abr3}
+  {:else if nameType === 'fullName'}
+    {option.fullName}
+  {:else}
+    {option.abr3}
+  {/if}
+{/snippet}
+
+<div
+  class={['dodo-ui-CalendarMonthSelector', `size--${size}`, `color--${color}`, className].join(' ')}
+  bind:this={ref}
+>
+  <Button
+    name="month-selector"
+    variant="text"
+    {color}
+    {disabled}
+    {roundness}
+    onclick={onClickMod}
+    {size}
+    {...buttonProps}
+  >
+    {#if customCalendarMonthSelectorTyped}
+      {@render customCalendarMonthSelectorTyped(monthDetails)}
+    {:else}
+      {@render monthName(monthDetails)}
+    {/if}
+
+    {#snippet after()}
+      <Icon icon="material-symbols:arrow-drop-down-rounded" width="24" height="24" />
+    {/snippet}
+  </Button>
+</div>
+
+<style>.dodo-ui-CalendarMonthSelector :global(.dodo-ui-Button) {
+  text-transform: capitalize;
+}
+.dodo-ui-CalendarMonthSelector :global(.dodo-ui-Button .content--after) {
+  margin-left: auto;
+}
+.dodo-ui-CalendarMonthSelector.size--normal :global(.dodo-ui-Button) {
+  width: 80px;
+}
+.dodo-ui-CalendarMonthSelector.size--small :global(.dodo-ui-Button) {
+  width: 70px;
+}
+.dodo-ui-CalendarMonthSelector.size--large :global(.dodo-ui-Button) {
+  width: 100px;
+}</style>

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

@@ -0,0 +1,49 @@
+import type { ComponentColor } from '../../../../../../../types/colors.js';
+import type { ComponentSize } from '../../../../../../../types/size.js';
+import type { ButtonClickEvent, ButtonProps } from '../../../../../Form/Button/Button.svelte';
+import { MONTHS } from '../../../utils/types.js';
+import { type ComponentRoundness } from '../../../../../../../index.js';
+import type { Snippet } from 'svelte';
+export type CalendarMonthNames = 'jan' | 'feb' | 'mar' | 'apr' | 'may' | 'jun' | 'jul' | 'aug' | 'sep' | 'oct' | 'nov' | 'dec';
+export type CalendarMonthOption = {
+    value: MONTHS;
+    abr3: CalendarMonthNames;
+    fullName: string;
+};
+export declare const calendarMonthOptions: CalendarMonthOption[];
+export type calendarMonthNameType = 'abr3' | 'fullName';
+export interface CalendarMonthSelectorProps {
+    /** CalendarMonthSelector ref */
+    ref?: HTMLDivElement;
+    /** Custom css class */
+    class?: string;
+    /** Selcted date Value */
+    value?: Date;
+    /** Define active month to override month selected with value */
+    activeMonth?: Date;
+    /** What color to use? */
+    color?: ComponentColor;
+    /** Timezone string (e.g., "America/New_York"). */
+    timezone?: string;
+    /** Whether to return the time in UTC. If true, overrides timezone. */
+    utc?: boolean;
+    /** How large should the Component be? */
+    size?: ComponentSize;
+    /** buttonProps */
+    buttonProps?: Partial<ButtonProps>;
+    /**  month Name type */
+    nameType?: calendarMonthNameType;
+    /** The onclick event handler */
+    onclick?: (option: CalendarMonthOption, e: ButtonClickEvent) => void;
+    /** Custom MonthSelector */
+    customCalendarMonthSelector?: (option: CalendarMonthOption) => Snippet;
+    /** Custom MonthSelector Content */
+    customCalendarMonthSelectorContent?: (option: CalendarMonthOption) => Snippet;
+    /** Button disabled state */
+    disabled?: boolean;
+    /** How round should the border radius be? */
+    roundness?: ComponentRoundness;
+}
+declare const CalendarMonthSelector: import("svelte").Component<CalendarMonthSelectorProps, {}, "ref">;
+type CalendarMonthSelector = ReturnType<typeof CalendarMonthSelector>;
+export default CalendarMonthSelector;

package/dist/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/Color/Color.stories.svelte

@@ -0,0 +1,23 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import CalendarMonthSelector from '../../CalendarMonthSelector/CalendarMonthSelector.svelte';
+  import { storyCalendarMonthSelectorArgTypes } from '../../CalendarMonthSelector/CalendarMonthSelector.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: CalendarMonthSelector,
+    tags: ['autodocs'],
+    argTypes: storyCalendarMonthSelectorArgTypes,
+    args: {
+      value: getMoment().toDate(),
+    },
+  });
+</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/CalendarControls/CalendarMonthSelector/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/CalendarControls/CalendarMonthSelector/Customize/Customize.stories.svelte

@@ -0,0 +1,28 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import CalendarMonthSelector from '../CalendarMonthSelector.svelte';
+import { storyCalendarMonthSelectorArgTypes } from '../CalendarMonthSelector.stories.svelte';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: CalendarMonthSelector,
+    tags: ['autodocs'],
+    argTypes: storyCalendarMonthSelectorArgTypes,
+});
+</script>
+
+<Story name="customCalendarMonthSelectorContent" asChild>
+  <CalendarMonthSelector>
+    {#snippet customCalendarMonthSelectorContent(option)}
+      🗓️{option.abr3}
+    {/snippet}
+  </CalendarMonthSelector>
+</Story>
+
+<Story name="customCalendarMonthSelector" asChild>
+  <CalendarMonthSelector>
+    {#snippet customCalendarMonthSelector(option)}
+      <span style="color: blue; display: block;">
+        {option.abr3}
+      </span>
+    {/snippet}
+  </CalendarMonthSelector>
+</Story>

package/dist/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/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/CalendarControls/CalendarMonthSelector/Events/Events.stories.svelte

@@ -0,0 +1,22 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import CalendarMonthSelector, {} from '../CalendarMonthSelector.svelte';
+import { storyCalendarMonthSelectorArgTypes } from '../CalendarMonthSelector.stories.svelte';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: CalendarMonthSelector,
+    tags: ['autodocs'],
+    argTypes: storyCalendarMonthSelectorArgTypes,
+});
+</script>
+
+<Story
+  name="Click"
+  args={{
+    onclick: (option: CalendarMonthOption, e: ButtonClickEvent) => {
+      const target = e.target as HTMLButtonElement;
+
+      alert('Button Clicked');
+      console.log('Button Clicked', option, target);
+    },
+  }}
+/>

package/dist/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/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/CalendarControls/CalendarMonthSelector/NameTypes/NameTypes.stories.svelte

@@ -0,0 +1,23 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import CalendarMonthSelector from '../CalendarMonthSelector.svelte';
+import { storyCalendarMonthSelectorArgTypes } from '../CalendarMonthSelector.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: CalendarMonthSelector,
+    tags: ['autodocs'],
+    argTypes: storyCalendarMonthSelectorArgTypes,
+    args: {
+        value: getMoment('Mar 2025', 'MMM YYYY').toDate(),
+    },
+});
+</script>
+
+<Story name="Default" />
+
+<Story
+  name="FullName"
+  args={{
+    nameType: 'fullName',
+  }}
+/>

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

package/dist/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/Roundness/Roundness.stories.svelte

@@ -0,0 +1,26 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import CalendarMonthSelector from '../CalendarMonthSelector.svelte';
+  import { storyCalendarMonthSelectorArgTypes } from '../CalendarMonthSelector.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: CalendarMonthSelector,
+    tags: ['autodocs'],
+    argTypes: storyCalendarMonthSelectorArgTypes,
+    args: {
+      value: getMoment().toDate(),
+    },
+  });
+</script>
+
+<Story name="Roundness Default" />
+
+<Story name="Roundness 1" args={{ roundness: 1 }} />
+
+<Story name="Roundness 2" args={{ roundness: 2 }} />
+
+<Story name="Roundness 3" args={{ roundness: 3 }} />
+
+<Story name="Roundness 0" args={{ roundness: 0 }} />

package/dist/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/Roundness/Roundness.stories.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Roundness;
+type Roundness = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Roundness: $$__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/CalendarControls/CalendarMonthSelector/Size/Size.stories.svelte

@@ -0,0 +1,20 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import CalendarMonthSelector from '../CalendarMonthSelector.svelte';
+  import { storyCalendarMonthSelectorArgTypes } from '../CalendarMonthSelector.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: CalendarMonthSelector,
+    tags: ['autodocs'],
+    argTypes: storyCalendarMonthSelectorArgTypes,
+    args: {
+      value: getMoment().toDate(),
+    },
+  });
+</script>
+
+<Story name="Normal" />
+<Story name="Small" args={{ size: 'small' }} />
+<Story name="Large" args={{ size: 'large' }} />

package/dist/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/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/CalendarControls/CalendarNavigation/CalendarNavigation.stories.svelte

@@ -0,0 +1,32 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import CalendarNavigation from './CalendarNavigation.svelte';
+import { componentColorArray } from '../../../../../../../types/colors.js';
+import { componentSizeArray } from '../../../../../../../types/size.js';
+export const storyCalendarNavigationArgTypes = {
+    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: CalendarNavigation,
+    tags: ['autodocs'],
+    argTypes: storyCalendarNavigationArgTypes,
+});
+</script>
+
+<!-- Default CalendarNavigation -->
+<Story name="Default" />
+
+<Story
+  name="Disabled"
+  args={{
+    disabledCalendarNavigationNext: true,
+    disabledCalendarNavigationPrev: true,
+  }}
+/>

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

@@ -0,0 +1,21 @@
+import CalendarNavigation from './CalendarNavigation.svelte';
+import type { StoryBookArgTypes } from '../../../../../../../storybook-types.js';
+export declare const storyCalendarNavigationArgTypes: 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 CalendarNavigation: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type CalendarNavigation = InstanceType<typeof CalendarNavigation>;
+export default CalendarNavigation;

package/dist/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarNavigation/CalendarNavigation.svelte

@@ -0,0 +1,65 @@
+<script lang="ts" module>import NavigationButton from './NavigationButton.svelte';
+import Icon from '@iconify/svelte';
+</script>
+
+<script lang="ts">"use strict";
+let { class: className = '', ref = $bindable(), size = 'normal', color, buttonProps, onCalendarNavigationNextClick, onCalendarNavigationPrevClick, disabledCalendarNavigationNext, disabledCalendarNavigationPrev, customCalendarNavigation: customCalendarNavigationInternal, customCalendarNavigationNext, customCalendarNavigationPrev, customCalendarNavigationNextContent, customCalendarNavigationPrevContent, } = $props();
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let customCalendarNavigationTyped = customCalendarNavigationInternal;
+</script>
+
+<div
+  class={['dodo-ui-CalendarNavigation', `size--${size}`, `color--${color}`, className].join(' ')}
+  bind:this={ref}
+>
+  {#if customCalendarNavigationTyped}
+    {@render customCalendarNavigationTyped()}
+  {:else}
+    <NavigationButton
+      name="prev"
+      {size}
+      {color}
+      {buttonProps}
+      onclick={onCalendarNavigationPrevClick}
+      disabled={disabledCalendarNavigationPrev}
+      customNavigationButton={customCalendarNavigationPrev}
+      customNavigationButtonContent={customCalendarNavigationPrevContent}
+    >
+      <Icon icon="material-symbols:navigate-before" width="24" height="24" />
+    </NavigationButton>
+    <NavigationButton
+      name="next"
+      {size}
+      {color}
+      {buttonProps}
+      onclick={onCalendarNavigationNextClick}
+      disabled={disabledCalendarNavigationNext}
+      customNavigationButton={customCalendarNavigationNext}
+      customNavigationButtonContent={customCalendarNavigationNextContent}
+    >
+      <Icon icon="material-symbols:navigate-next" width="24" height="24" />
+    </NavigationButton>
+  {/if}
+</div>
+
+<style>.dodo-ui-CalendarNavigation {
+  display: flex;
+}
+.dodo-ui-CalendarNavigation.size--normal {
+  margin: 0 calc(var(--dodo-ui-space) / 2 * -1);
+}
+.dodo-ui-CalendarNavigation.size--normal :global(.NavigationButton) {
+  margin: 0 calc(var(--dodo-ui-space) / 2);
+}
+.dodo-ui-CalendarNavigation.size--small {
+  margin: 0 calc(var(--dodo-ui-space-small) / 2 * -1);
+}
+.dodo-ui-CalendarNavigation.size--small :global(.NavigationButton) {
+  margin: 0 calc(var(--dodo-ui-space-small) / 2);
+}
+.dodo-ui-CalendarNavigation.size--large {
+  margin: calc(var(--dodo-ui-space-large) / 2 * -1);
+}
+.dodo-ui-CalendarNavigation.size--large :global(.NavigationButton) {
+  margin: 0 calc(var(--dodo-ui-space-large) / 2);
+}</style>

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

@@ -0,0 +1,38 @@
+import type { ComponentColor } from '../../../../../../../types/colors.js';
+import type { ComponentSize } from '../../../../../../../types/size.js';
+import type { ButtonProps } from '../../../../../Form/Button/Button.svelte';
+import type { Snippet } from 'svelte';
+import type { MouseEventHandler } from 'svelte/elements';
+export interface CalendarNavigationProps {
+    /** CalendarNavigation ref */
+    ref?: HTMLDivElement;
+    /** Custom css class */
+    class?: string;
+    /** What color to use? */
+    color?: ComponentColor;
+    /** How large should the Component be? */
+    size?: ComponentSize;
+    /** buttonProps */
+    buttonProps?: Partial<ButtonProps>;
+    /** Navigation Next */
+    onCalendarNavigationNextClick?: MouseEventHandler<HTMLButtonElement>;
+    /** Navigation Previous */
+    onCalendarNavigationPrevClick?: MouseEventHandler<HTMLButtonElement>;
+    /** Custom YearSelector */
+    customCalendarNavigation?: () => Snippet;
+    /** Custom NavigationNext */
+    customCalendarNavigationNext?: () => Snippet;
+    /** Custom NavigationPrev */
+    customCalendarNavigationPrev?: () => Snippet;
+    /** Custom NavigationNext Content */
+    customCalendarNavigationNextContent?: () => Snippet;
+    /** Custom NavigationPrev Content */
+    customCalendarNavigationPrevContent?: () => Snippet;
+    /** Next disabled state */
+    disabledCalendarNavigationNext?: boolean;
+    /** Prev disabled state */
+    disabledCalendarNavigationPrev?: boolean;
+}
+declare const CalendarNavigation: import("svelte").Component<CalendarNavigationProps, {}, "ref">;
+type CalendarNavigation = ReturnType<typeof CalendarNavigation>;
+export default CalendarNavigation;

package/dist/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarNavigation/Color/Color.stories.svelte

@@ -0,0 +1,19 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import CalendarNavigation from '../../CalendarNavigation/CalendarNavigation.svelte';
+  import { storyCalendarNavigationArgTypes } from '../../CalendarNavigation/CalendarNavigation.stories.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: CalendarNavigation,
+    tags: ['autodocs'],
+    argTypes: storyCalendarNavigationArgTypes,
+  });
+</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/CalendarControls/CalendarNavigation/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;
+}