@flightlesslabs/dodo-ui 0.9.1 → 0.10.0

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

@@ -0,0 +1,204 @@
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts">import getMoment from '../../../developer tools/helpers/Time/getMoment/getMoment.js';
+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();
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let calendarTopContentTyped = calendarTopContentInternal;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let calendarBottomContentTyped = calendarBottomContentInternal;
+let activeMonth = $derived(activeMonthRaw ||
+    value ||
+    getMoment(undefined, undefined, { timezone, utc }).startOf('month').startOf('day').toDate());
+const disabledCalendarNavigationNext = $derived(disabledCalendarNavigationNextRaw);
+const disabledCalendarNavigationPrev = $derived(disabledCalendarNavigationPrevRaw);
+let activeSection = $state('date');
+function onCalendarNavigationNextClickMod(e) {
+    activeMonth = getMoment(activeMonth, undefined, { timezone, utc })
+        .add(1, 'month')
+        .startOf('month')
+        .startOf('day')
+        .toDate();
+    if (onCalendarNavigationNextClick) {
+        onCalendarNavigationNextClick(e);
+    }
+}
+function onCalendarNavigationPrevClickMod(e) {
+    activeMonth = getMoment(activeMonth, undefined, { timezone, utc })
+        .subtract(1, 'month')
+        .startOf('month')
+        .startOf('day')
+        .toDate();
+    if (onCalendarNavigationPrevClick) {
+        onCalendarNavigationPrevClick(e);
+    }
+}
+function onMonthSelectorClickMod(option, e) {
+    activeSection = 'month';
+    if (onMonthSelectorClick) {
+        onMonthSelectorClick(option, e);
+    }
+}
+function onYearhSelectorClickMod(selectedYear, e) {
+    activeSection = 'year';
+    if (onYearSelectorClick) {
+        onYearSelectorClick(selectedYear, e);
+    }
+}
+function onselectMonthMod(value, e) {
+    const monthValue = calendarMonthOptions.find((item) => item.abr3 === value)?.value || MONTHS.JAN;
+    activeMonth = getMoment(activeMonth, undefined, { timezone, utc })
+        .set('month', monthValue)
+        .startOf('month')
+        .startOf('day')
+        .toDate();
+    activeSection = 'date';
+    if (onselectMonth) {
+        onselectMonth(value, e);
+    }
+}
+function onselectYearMod(value, e) {
+    activeMonth = getMoment(activeMonth, undefined, { timezone, utc })
+        .set('year', Number(value))
+        .startOf('month')
+        .startOf('day')
+        .toDate();
+    activeSection = 'date';
+    if (onselectYear) {
+        onselectYear(value, e);
+    }
+}
+function oncancelMonthMod(e) {
+    activeSection = 'date';
+    if (oncancelMonth) {
+        oncancelMonth(e);
+    }
+}
+function oncancelYearMod(e) {
+    activeSection = 'date';
+    if (oncancelYear) {
+        oncancelYear(e);
+    }
+}
+</script>
+
+{#snippet daysSection()}
+  {#if showCalendarControls}
+    <CalendarControls
+      {activeMonth}
+      {value}
+      {timezone}
+      {utc}
+      {color}
+      {size}
+      {customCalendarMonthSelector}
+      {customCalendarMonthSelectorContent}
+      onMonthSelectorClick={onMonthSelectorClickMod}
+      {calendarMonthSelectorProps}
+      {customCalendarControls}
+      {calendarYearSelectorProps}
+      {customCalendarYearSelector}
+      {customCalendarYearSelectorContent}
+      onYearSelectorClick={onYearhSelectorClickMod}
+      {calendarNavigationProps}
+      {customCalendarNavigationNext}
+      {customCalendarNavigationPrev}
+      {customCalendarNavigationNextContent}
+      {customCalendarNavigationPrevContent}
+      onCalendarNavigationNextClick={onCalendarNavigationNextClickMod}
+      onCalendarNavigationPrevClick={onCalendarNavigationPrevClickMod}
+      {disabledCalendarNavigationNext}
+      {disabledCalendarNavigationPrev}
+      {customCalendarNavigation}
+      {showCalendarMonthSelector}
+      {showCalendarYearSelector}
+      {showCalendarNavigator}
+    />
+  {/if}
+
+  <CalendarDatesChart
+    {today}
+    {minDate}
+    {maxDate}
+    {excludeDates}
+    {includeDates}
+    {showToday}
+    {showSelected}
+    {showLastMonth}
+    {showNextMonth}
+    {activeMonth}
+    {value}
+    {startOfWeek}
+    {timezone}
+    {utc}
+    {calendarDateChipProps}
+    {onselect}
+    {customCalendarDateChipContent}
+    {customCalendarDateChip}
+    {color}
+    {customCalendarWeekContent}
+    {customCalendarWeek}
+    {size}
+    {weekendDays}
+    {weekendDaysColorDays}
+  />
+{/snippet}
+
+{#snippet monthSection()}
+  <CalendarMonthList
+    value={getMoment(activeMonth, undefined, { timezone, utc })
+      .format('MMM')
+      .toLowerCase() as CalendarMonthNames}
+    onselect={onselectMonthMod}
+    {size}
+    {color}
+    {customCalendarMonthChipContent}
+    {customCalendarMonthChip}
+    {disabledMonths}
+    {calendarMonthChipProps}
+    oncancel={oncancelMonthMod}
+    showControls={showControlsMonthList}
+  />
+{/snippet}
+
+{#snippet yearSection()}
+  <CalendarYearList
+    value={getMoment(activeMonth, undefined, { timezone, utc }).format('YYYY')}
+    {size}
+    {color}
+    {minDate}
+    {maxDate}
+    {customCalendarYearChip}
+    {customCalendarYearChipContent}
+    {calendarYearChipProps}
+    onselect={onselectYearMod}
+    oncancel={oncancelYearMod}
+    showControls={showControlsYearList}
+  />
+{/snippet}
+
+<div class={['dodo-ui-Calendar', className].join(' ')} bind:this={ref}>
+  {#if calendarTopContentTyped}
+    {@render calendarTopContentTyped(activeSection)}
+  {/if}
+
+  {#if activeSection === 'month'}
+    {@render monthSection()}
+  {:else if activeSection === 'year'}
+    {@render yearSection()}
+  {:else}
+    {@render daysSection()}
+  {/if}
+
+  {#if calendarBottomContentTyped}
+    {@render calendarBottomContentTyped(activeSection)}
+  {/if}
+</div>
+
+<style>.dodo-ui-Calendar {
+  display: inline-flex;
+  flex-direction: column;
+}</style>

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

@@ -0,0 +1,143 @@
+export type CalendarActiveSection = 'date' | 'month' | 'year';
+export interface CalendarProps {
+    /** Calendar ref */
+    ref?: HTMLDivElement;
+    /** Custom css class */
+    class?: string;
+    /** Selcted date Value */
+    value?: Date;
+    /** Start Of Week */
+    startOfWeek?: CalendarWeekNames;
+    /** Define active month to override month selected with value */
+    activeMonth?: Date;
+    /** Include leading days from the previous month */
+    showLastMonth?: boolean;
+    /** Include trailing days from the next month */
+    showNextMonth?: boolean;
+    /** What color to use? */
+    color?: ComponentColor;
+    /** Show slected */
+    showSelected?: boolean;
+    /** Show Today  */
+    showToday?: boolean;
+    /** Set today manually  */
+    today?: Date;
+    /** Minimum allowed date, rest of the dates will be disabled  */
+    minDate?: Date;
+    /** Maxium allowed date, rest of the dates will be disabled  */
+    maxDate?: Date;
+    /** Exclude Dates, these dates will be disabled */
+    excludeDates?: Date[];
+    /** Include Dates, rest of the dates will be disabled  */
+    includeDates?: Date[];
+    /** Timezone string (e.g., "America/New_York"). */
+    timezone?: string;
+    /** Whether to return the time in UTC. If true, overrides timezone. */
+    utc?: boolean;
+    /** calendarDateChipProps: CalendarDateChip component props */
+    calendarDateChipProps?: Partial<CalendarDateChipProps>;
+    /** onselect event handler */
+    onselect?: (value: Date, dayOfMonth: DateOfMonth, e: ButtonClickEvent) => void;
+    /** Custom Calendar Chip Content */
+    customCalendarDateChipContent?: (dayOfMonth: DateOfMonth) => Snippet;
+    /** Custom Calendar Chip */
+    customCalendarDateChip?: (dayOfMonth: DateOfMonth) => Snippet;
+    /** Custom Calendar Week Content */
+    customCalendarWeekContent?: (week: CalendarWeekOption) => Snippet;
+    /** Custom Calendar Week */
+    customCalendarWeek?: (week: CalendarWeekOption) => Snippet;
+    /** How large should the Component be? */
+    size?: ComponentSize;
+    /** Weekend days */
+    weekendDays?: CalendarWeekNames[];
+    /** Color Weekend days */
+    weekendDaysColorDays?: boolean;
+    /** Show Calendar Controls */
+    showCalendarControls?: boolean;
+    /** Custom Calendar Controls */
+    customCalendarControls?: () => Snippet;
+    /** Show Month Selector */
+    showCalendarMonthSelector?: boolean;
+    /** Show Year Selector */
+    showCalendarYearSelector?: boolean;
+    /** Show Navigator */
+    showCalendarNavigator?: boolean;
+    /** Month Selector Props */
+    calendarMonthSelectorProps?: Partial<CalendarMonthSelectorProps>;
+    /** Custom MonthSelector */
+    customCalendarMonthSelector?: (option: CalendarMonthOption) => Snippet;
+    /** Custom MonthSelector Content */
+    customCalendarMonthSelectorContent?: (option: CalendarMonthOption) => Snippet;
+    /** Month Selector Click */
+    onMonthSelectorClick?: (option: CalendarMonthOption, e: ButtonClickEvent) => void;
+    /** Year Selector Props */
+    calendarYearSelectorProps?: Partial<CalendarYearSelectorProps>;
+    /** Custom YearSelector */
+    customCalendarYearSelector?: (selectedYear: string) => Snippet;
+    /** Custom YearSelector Content */
+    customCalendarYearSelectorContent?: (selectedYear: string) => Snippet;
+    /** Year Selector Click */
+    onYearSelectorClick?: (selectedYear: string, e: ButtonClickEvent) => void;
+    /** Calendar Navigation Props */
+    calendarNavigationProps?: Partial<CalendarYearSelectorProps>;
+    /** 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;
+    /** Calendar Month select */
+    onselectMonth?: (value: CalendarMonthNames, e: ButtonClickEvent) => void;
+    /** Calendar Month cancel */
+    oncancelMonth?: (e: ButtonClickEvent) => void;
+    /** Custom Calendar Chip Content */
+    customCalendarMonthChipContent?: (value: CalendarMonthNames) => Snippet;
+    /** Custom Calendar Chip */
+    customCalendarMonthChip?: (value: CalendarMonthNames) => Snippet;
+    /** disabled Months */
+    disabledMonths?: CalendarMonthNames[];
+    /** calendarMonthChipProps: calendarMonthChip component props */
+    calendarMonthChipProps?: Partial<CalendarMonthChipProps>;
+    /** show month list controls */
+    showControlsMonthList?: boolean;
+    /** calendarYearChipProps: calendarYearChip component props */
+    calendarYearChipProps?: Partial<CalendarYearChipProps>;
+    /** Calendar Year select */
+    onselectYear?: (value: string, e: ButtonClickEvent) => void;
+    /** Calendar Year cancel */
+    oncancelYear?: (e: ButtonClickEvent) => void;
+    /** Custom Calendar Chip Content */
+    customCalendarYearChipContent?: (value: string) => Snippet;
+    /** Custom Calendar Chip */
+    customCalendarYearChip?: (value: string) => Snippet;
+    /** show Year list controls */
+    showControlsYearList?: boolean;
+    /** calendar Top Content*/
+    calendarTopContent?: (activeSection: CalendarActiveSection) => Snippet;
+    /** calendar Bottom Content*/
+    calendarBottomContent?: (activeSection: CalendarActiveSection) => Snippet;
+    /** Range value */
+    rangeValue?: [Date, Date];
+}
+import type { ComponentColor } from '../../../../types/colors.js';
+import type { Snippet } from 'svelte';
+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';
+declare const Calendar: import("svelte").Component<CalendarProps, {}, "ref">;
+type Calendar = ReturnType<typeof Calendar>;
+export default Calendar;

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

@@ -0,0 +1,23 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Calendar from '../Calendar.svelte';
+  import { storyCalendarArgTypes } from '../Calendar.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: Calendar,
+    tags: ['autodocs'],
+    argTypes: storyCalendarArgTypes,
+    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/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/Controls/Controls.stories.svelte

@@ -0,0 +1,26 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Calendar from '../Calendar.svelte';
+  import { storyCalendarArgTypes } from '../Calendar.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: Calendar,
+    tags: ['autodocs'],
+    argTypes: storyCalendarArgTypes,
+    args: {
+      value: getMoment().toDate(),
+    },
+  });
+</script>
+
+<Story name="Normal" />
+<Story name="HideCalendarMonthSelector" args={{ showCalendarMonthSelector: false }} />
+<Story name="HideCalendarYearSelector" args={{ showCalendarYearSelector: false }} />
+<Story name="HideCalendarNavigator" args={{ showCalendarNavigator: false }} />
+<Story name="HideControlsMonthList" args={{ showControlsMonthList: false }} />
+<Story name="HideControlsYearList" args={{ showControlsYearList: false }} />
+
+<Story name="DisabledNavigationPrev" args={{ disabledCalendarNavigationPrev: true }} />
+<Story name="DisabledNavigationNext" args={{ disabledCalendarNavigationNext: true }} />

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

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

@@ -0,0 +1,158 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import Calendar from '../Calendar.svelte';
+import { storyCalendarArgTypes } from '../Calendar.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: Calendar,
+    tags: ['autodocs'],
+    argTypes: storyCalendarArgTypes,
+    args: {
+        value: getMoment().toDate(),
+    },
+});
+</script>
+
+<Story
+  name="calendarDateChipProps"
+  args={{
+    calendarDateChipProps: {
+      roundness: 'full',
+    },
+  }}
+/>
+
+<Story
+  name="calendarMonthChipProps"
+  args={{
+    calendarMonthChipProps: {
+      roundness: 2,
+    },
+  }}
+/>
+
+<Story name="customCalendarDateChipContent" asChild>
+  <Calendar value={getMoment().toDate()}>
+    {#snippet customCalendarDateChipContent(dayOfMonth)}
+      🗓️{Number(getMoment(dayOfMonth.date).format('D'))}
+    {/snippet}
+  </Calendar>
+</Story>
+
+<Story name="customCalendarDateChip" asChild>
+  <Calendar value={getMoment().toDate()}>
+    {#snippet customCalendarDateChip(dayOfMonth)}
+      <Button size="small" variant="text" outline>
+        {Number(getMoment(dayOfMonth.date).format('D'))}
+      </Button>
+    {/snippet}
+  </Calendar>
+</Story>
+
+<Story name="customCalendarWeekContent" asChild>
+  <Calendar value={getMoment().toDate()}>
+    {#snippet customCalendarWeekContent(option)}
+      ☀️{option.abr1}
+    {/snippet}
+  </Calendar>
+</Story>
+
+<Story name="customCalendarWeek" asChild>
+  <Calendar value={getMoment().toDate()}>
+    {#snippet customCalendarWeek(option)}
+      <li style="color: blue; display: block;">
+        {option.abr3}
+      </li>
+    {/snippet}
+  </Calendar>
+</Story>
+
+<Story name="customCalendarMonthSelectorContent" asChild>
+  <Calendar value={getMoment().toDate()}>
+    {#snippet customCalendarMonthSelectorContent(option)}
+      🗓️{option.abr3}
+    {/snippet}
+  </Calendar>
+</Story>
+
+<Story name="customCalendarMonthSelector" asChild>
+  <Calendar value={getMoment().toDate()}>
+    {#snippet customCalendarMonthSelector(option)}
+      <span style="color: blue; display: block;">
+        {option.abr3}
+      </span>
+    {/snippet}
+  </Calendar>
+</Story>
+
+<Story name="customCalendarYearSelectorContent" asChild>
+  <Calendar value={getMoment().toDate()}>
+    {#snippet customCalendarYearSelectorContent(selectedYear)}
+      🗓️{selectedYear}
+    {/snippet}
+  </Calendar>
+</Story>
+
+<Story name="customCalendarYearSelector" asChild>
+  <Calendar value={getMoment().toDate()}>
+    {#snippet customCalendarYearSelector(selectedYear)}
+      <span style="color: blue; display: block;">
+        {selectedYear}
+      </span>
+    {/snippet}
+  </Calendar>
+</Story>
+
+<Story name="customCalendarNavigationContent" asChild>
+  <Calendar 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}
+  </Calendar>
+</Story>
+
+<Story name="customCalendarNavigation" asChild>
+  <Calendar value={getMoment().toDate()}>
+    {#snippet customCalendarNavigation()}
+      <Button>Control</Button>
+    {/snippet}
+  </Calendar>
+</Story>
+
+<Story name="customCalendarMonthChipContent" asChild>
+  <Calendar value={getMoment().toDate()}>
+    {#snippet customCalendarMonthChipContent(val)}
+      🗓️{val}
+    {/snippet}
+  </Calendar>
+</Story>
+
+<Story name="customCalendarMonthChip" asChild>
+  <Calendar value={getMoment().toDate()}>
+    {#snippet customCalendarMonthChip(val)}
+      <Button size="small" variant="text" outline>
+        {val}
+      </Button>
+    {/snippet}
+  </Calendar>
+</Story>
+
+<Story name="calendarTopContent" asChild>
+  <Calendar value={getMoment().toDate()}>
+    {#snippet calendarTopContent(activeSection)}
+      Top Content: {activeSection}
+    {/snippet}
+  </Calendar>
+</Story>
+
+<Story name="calendarBottomContent" asChild>
+  <Calendar value={getMoment().toDate()}>
+    {#snippet calendarBottomContent(activeSection)}
+      Bottom Content: {activeSection}
+    {/snippet}
+  </Calendar>
+</Story>

package/dist/stories/components/Info/Calendar/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;