@flightlesslabs/dodo-ui 0.9.1 → 0.10.0

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

@@ -0,0 +1,85 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import CalendarDatesChart from './CalendarDatesChart.svelte';
+import getMoment from '../../../../../developer tools/helpers/Time/getMoment/getMoment.js';
+import { componentColorArray } from '../../../../../../types/colors.js';
+import { calendarWeekNamesArray } from './CalendarWeek/CalendarWeek.svelte';
+import { componentSizeArray } from '../../../../../../types/size.js';
+export const storyCalendarDatesChartArgTypes = {
+    startOfWeek: {
+        control: { type: 'select' },
+        options: calendarWeekNamesArray,
+    },
+    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: CalendarDatesChart,
+    tags: ['autodocs'],
+    argTypes: storyCalendarDatesChartArgTypes,
+    args: {
+        value: getMoment().toDate(),
+    },
+});
+</script>
+
+<!-- Default CalendarDatesChart -->
+<Story name="Default" />
+
+<Story
+  name="StartOfWeek"
+  args={{
+    startOfWeek: 'mon',
+  }}
+/>
+
+<Story
+  name="ActiveMonth"
+  args={{
+    activeMonth: getMoment('01-02-2025', 'DD-MM-YYYY').toDate(),
+  }}
+/>
+
+<Story
+  name="WeekendDays"
+  args={{
+    weekendDays: ['sun'],
+  }}
+/>
+
+<Story
+  name="WeekHeadingColorOnly"
+  args={{
+    weekendDays: ['sun'],
+    weekendDaysColorDays: false,
+  }}
+/>
+
+<Story
+  name="HideSelected"
+  args={{
+    showSelected: false,
+  }}
+/>
+
+<Story
+  name="HideLastMonth"
+  args={{
+    value: getMoment('01-03-2025', 'DD-MM-YYYY').toDate(),
+    showLastMonth: false,
+  }}
+/>
+
+<Story
+  name="HideNextMonth"
+  args={{
+    value: getMoment('01-03-2025', 'DD-MM-YYYY').toDate(),
+    showNextMonth: false,
+  }}
+/>

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

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

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

@@ -0,0 +1,131 @@
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts">import getMoment from '../../../../../developer tools/helpers/Time/getMoment/getMoment.js';
+import getDatesOfMonth from '../../utils/getDatesOfMonth.js';
+import CalendarDateChip, {} from './CalendarDateChip/CalendarDateChip.svelte';
+import CalendarWeek from './CalendarWeek/CalendarWeek.svelte';
+let { class: className = '', ref = $bindable(), value, startOfWeek, timezone, utc, calendarDateChipProps, color, showToday, showLastMonth, showNextMonth, showSelected = true, activeMonth, onselect, customCalendarDateChipContent, customCalendarDateChip, today, minDate, maxDate, excludeDates, includeDates, weekDayNameType, customCalendarWeekContent, customCalendarWeek, size = 'normal', weekendDays, weekendDaysColorDays = true, rangeValue, onselectRange, } = $props();
+let monthToPick = $state(undefined);
+const daysGroup = $derived(getDatesOfMonth(monthToPick, {
+    startOfWeek,
+    timezone,
+    utc,
+    today,
+    minDate,
+    maxDate,
+    excludeDates,
+    includeDates,
+    rangeValue,
+}) || []);
+function getRangeType(day, rangeValue) {
+    if (!rangeValue) {
+        return undefined;
+    }
+    const [range1, range2] = rangeValue;
+    if (!range1 || !range2) {
+        return undefined;
+    }
+    if (getMoment(range1, undefined, { timezone, utc }).format('MMM YYYY') ===
+        getMoment(day.date, undefined, { timezone, utc }).format('DD-MM-YYY')) {
+        return 'start';
+    }
+    else if (getMoment(range2, undefined, { timezone, utc }).format('MMM YYYY') ===
+        getMoment(day.date, undefined, { timezone, utc }).format('DD-MM-YYY')) {
+        return 'end';
+    }
+    return undefined;
+}
+$effect(() => {
+    if (!value) {
+        monthToPick = activeMonth;
+        return;
+    }
+    // Override active month if it's not same as value
+    if (activeMonth &&
+        getMoment(activeMonth, undefined, { timezone, utc }).format('MMM YYYY') !==
+            getMoment(value, undefined, { timezone, utc }).format('MMM YYYY')) {
+        monthToPick = activeMonth;
+    }
+    else {
+        monthToPick = value;
+    }
+});
+</script>
+
+<ul class={['dodo-ui-CalendarDatesChart', `size--${size}`, className].join(' ')} bind:this={ref}>
+  <CalendarWeek
+    nameType={weekDayNameType}
+    {startOfWeek}
+    {customCalendarWeekContent}
+    {customCalendarWeek}
+    {size}
+    {weekendDays}
+  />
+
+  {#each daysGroup as group, index (index)}
+    <li class="daysRow">
+      <ul>
+        {#each group as day (day.id)}
+          <CalendarDateChip
+            dayOfMonth={day}
+            {color}
+            {showToday}
+            {showLastMonth}
+            {showNextMonth}
+            selected={showSelected &&
+            getMoment(value, undefined, { timezone, utc }).format('DD-MM-YYY') ===
+              getMoment(day.date, undefined, { timezone, utc }).format('DD-MM-YYY')
+              ? true
+              : false}
+            {onselect}
+            {customCalendarDateChip}
+            {customCalendarDateChipContent}
+            {size}
+            {timezone}
+            {utc}
+            weekend={weekendDaysColorDays &&
+            weekendDays?.includes(
+              getMoment(day.date, undefined, { timezone, utc })
+                .format('ddd')
+                .toLowerCase() as CalendarWeekNames,
+            )
+              ? true
+              : false}
+            showValueRange={rangeValue ? true : false}
+            rangeType={getRangeType(day, rangeValue)}
+            {onselectRange}
+            {...calendarDateChipProps}
+          />
+        {/each}
+      </ul>
+    </li>
+  {/each}
+</ul>
+
+<style>.dodo-ui-CalendarDatesChart {
+  display: inline-flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  user-select: none;
+}
+.dodo-ui-CalendarDatesChart ul {
+  padding: 0;
+  display: flex;
+  margin: 0;
+}
+.dodo-ui-CalendarDatesChart .daysRow {
+  display: block;
+  padding: 0;
+  margin: 0;
+}
+.dodo-ui-CalendarDatesChart.size--normal {
+  min-width: calc(var(--dodo-ui-element-height-normal) * 7);
+}
+.dodo-ui-CalendarDatesChart.size--small {
+  min-width: calc(var(--dodo-ui-element-height-small) * 7);
+}
+.dodo-ui-CalendarDatesChart.size--large {
+  min-width: calc(var(--dodo-ui-element-height-large) * 7);
+}</style>

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

@@ -0,0 +1,70 @@
+import type { ButtonClickEvent } from '../../../../Form/Button/Button.svelte';
+export interface CalendarDatesChartProps {
+    /** CalendarDatesChart ref */
+    ref?: HTMLUListElement;
+    /** Custom css class */
+    class?: string;
+    /** Selcted date Value */
+    value?: Date;
+    /** Define active month to override month selected with value */
+    activeMonth?: Date;
+    /** Start Of Week */
+    startOfWeek?: CalendarWeekNames;
+    /** 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>;
+    /** What color to use? */
+    color?: ComponentColor;
+    /** Show Today */
+    showToday?: boolean;
+    /** Show last month dates */
+    showLastMonth?: boolean;
+    /** Show next month dates */
+    showNextMonth?: boolean;
+    /** Show slected */
+    showSelected?: 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[];
+    /** onselect event handler */
+    onselect?: (value: Date, dayOfMonth: DateOfMonth, e: ButtonClickEvent) => void;
+    /** onselectRange event handler */
+    onselectRange?: (value: Date, type: DateRangeType, 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;
+    /** week day Name type */
+    weekDayNameType?: CalendarWeekDayNameType;
+    /** How large should the Component be? */
+    size?: ComponentSize;
+    /** Weekend days */
+    weekendDays?: CalendarWeekNames[];
+    /** Color Weekend days */
+    weekendDaysColorDays?: boolean;
+    /** Range value */
+    rangeValue?: [Date, Date];
+}
+import type { ComponentColor } from '../../../../../../types/colors.js';
+import type { Snippet } from 'svelte';
+import type { DateOfMonth, DateRangeType } from '../../utils/types.js';
+import { type CalendarDateChipProps } from './CalendarDateChip/CalendarDateChip.svelte';
+import type { CalendarWeekOption, CalendarWeekDayNameType, CalendarWeekNames } from './CalendarWeek/CalendarWeek.svelte';
+import type { ComponentSize } from '../../../../../../types/size.js';
+declare const CalendarDatesChart: import("svelte").Component<CalendarDatesChartProps, {}, "ref">;
+type CalendarDatesChart = ReturnType<typeof CalendarDatesChart>;
+export default CalendarDatesChart;

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

@@ -0,0 +1,34 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import CalendarWeek from './CalendarWeek.svelte';
+import { componentSizeArray } from '../../../../../../../types/size.js';
+export const storyCalendarWeekArgTypes = {
+    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: CalendarWeek,
+    tags: ['autodocs'],
+    argTypes: storyCalendarWeekArgTypes,
+});
+</script>
+
+<!-- Default CalendarWeek -->
+<Story name="Default" />
+
+<Story
+  name="StartOfWeek"
+  args={{
+    startOfWeek: 'fri',
+  }}
+/>
+
+<!-- Shows weekend days in red color -->
+<Story
+  name="WeekendDays"
+  args={{
+    weekendDays: ['sun'],
+  }}
+/>

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

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

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

@@ -0,0 +1,100 @@
+<script lang="ts" module>export const calendarWeekNamesArray = [
+    'sun',
+    'mon',
+    'tue',
+    'wed',
+    'thu',
+    'fri',
+    'sat',
+];
+export const calendarWeekOptions = [
+    {
+        value: DAYS_OF_WEEK.SUN,
+        abr3: 'sun',
+        abr1: 's',
+        abr2: 'su',
+        fullName: 'sunday',
+    },
+    {
+        value: DAYS_OF_WEEK.MON,
+        abr3: 'mon',
+        abr1: 'm',
+        abr2: 'mo',
+        fullName: 'monday',
+    },
+    {
+        value: DAYS_OF_WEEK.TUE,
+        abr3: 'tue',
+        abr1: 't',
+        abr2: 'tu',
+        fullName: 'tuesday',
+    },
+    {
+        value: DAYS_OF_WEEK.WED,
+        abr3: 'wed',
+        abr1: 'w',
+        abr2: 'we',
+        fullName: 'wednesday',
+    },
+    {
+        value: DAYS_OF_WEEK.THU,
+        abr3: 'thu',
+        abr1: 't',
+        abr2: 'th',
+        fullName: 'thursday',
+    },
+    {
+        value: DAYS_OF_WEEK.FRI,
+        abr3: 'fri',
+        abr1: 'f',
+        abr2: 'fr',
+        fullName: 'friday',
+    },
+    {
+        value: DAYS_OF_WEEK.SAT,
+        abr3: 'sat',
+        abr1: 's',
+        abr2: 'sa',
+        fullName: 'saturday',
+    },
+];
+</script>
+
+<script lang="ts">import { DAYS_OF_WEEK } from '../../../utils/types.js';
+import WeekDay from './WeekDay.svelte';
+let { class: className = '', ref = $bindable(), customCalendarWeekContent, customCalendarWeek: customCalendarWeekInternal, nameType = 'abr2', startOfWeek = 'sun', size = 'normal', weekendDays, } = $props();
+function getOrderedWeekOptions(startOfWeek) {
+    const selectedOption = calendarWeekOptions.find((item) => item.abr3 === startOfWeek) || calendarWeekOptions[0];
+    return [
+        ...calendarWeekOptions.slice(selectedOption.value),
+        ...calendarWeekOptions.slice(0, selectedOption.value),
+    ];
+}
+const orderedCalendarWeekOptions = $derived(getOrderedWeekOptions(startOfWeek));
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let customCalendarWeekTyped = customCalendarWeekInternal;
+</script>
+
+<li class={['dodo-ui-CalendarWeek', `size--${size}`, className].join(' ')} bind:this={ref}>
+  <ul>
+    {#each orderedCalendarWeekOptions as option (option.value)}
+      {#if customCalendarWeekTyped}
+        {@render customCalendarWeekTyped(option)}
+      {:else}
+        <WeekDay weekOption={option} {nameType} {weekendDays} {customCalendarWeekContent} {size} />
+      {/if}
+    {/each}
+  </ul>
+</li>
+
+<style>.dodo-ui-CalendarWeek {
+  display: block;
+  padding: 0;
+  margin: 0;
+  margin-bottom: 8px;
+}
+.dodo-ui-CalendarWeek ul {
+  padding: 0;
+  display: flex;
+  margin: 0;
+}</style>

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

@@ -0,0 +1,35 @@
+export type CalendarWeekNames = 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat';
+export declare const calendarWeekNamesArray: CalendarWeekNames[];
+export type CalendarWeekOption = {
+    value: DAYS_OF_WEEK;
+    abr3: CalendarWeekNames;
+    abr1: string;
+    abr2: string;
+    fullName: string;
+};
+export declare const calendarWeekOptions: CalendarWeekOption[];
+export type CalendarWeekDayNameType = 'abr3' | 'abr1' | 'abr2';
+export interface CalendarWeekProps {
+    /** CalendarDatesChart ref */
+    ref?: HTMLLIElement;
+    /** Custom css class */
+    class?: string;
+    /** Custom Calendar Week Content */
+    customCalendarWeekContent?: (option: CalendarWeekOption) => Snippet;
+    /** Custom Calendar Week */
+    customCalendarWeek?: (option: CalendarWeekOption) => Snippet;
+    /**  Day Name type */
+    nameType?: CalendarWeekDayNameType;
+    /** Start Of Week */
+    startOfWeek?: CalendarWeekNames;
+    /** How large should the component be? */
+    size?: ComponentSize;
+    /** Weekend days */
+    weekendDays?: CalendarWeekNames[];
+}
+import type { Snippet } from 'svelte';
+import { DAYS_OF_WEEK } from '../../../utils/types.js';
+import type { ComponentSize } from '../../../../../../../types/size.js';
+declare const CalendarWeek: import("svelte").Component<CalendarWeekProps, {}, "ref">;
+type CalendarWeek = ReturnType<typeof CalendarWeek>;
+export default CalendarWeek;

package/dist/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarWeek/Customize/Customize.stories.svelte

@@ -0,0 +1,30 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import CalendarWeek from '../CalendarWeek.svelte';
+import { storyCalendarWeekArgTypes } from '../CalendarWeek.stories.svelte';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: CalendarWeek,
+    tags: ['autodocs'],
+    argTypes: storyCalendarWeekArgTypes,
+});
+</script>
+
+<!-- Custom Content  -->
+<Story name="customCalendarWeekContent" asChild>
+  <CalendarWeek>
+    {#snippet customCalendarWeekContent(option)}
+      ☀️{option.abr1}
+    {/snippet}
+  </CalendarWeek>
+</Story>
+
+<!-- Custom Week  -->
+<Story name="customCalendarWeek" asChild>
+  <CalendarWeek>
+    {#snippet customCalendarWeek(option)}
+      <li style="color: blue; display: block;">
+        {option.abr3}
+      </li>
+    {/snippet}
+  </CalendarWeek>
+</Story>

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

@@ -0,0 +1,26 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import CalendarWeek from '../CalendarWeek.svelte';
+import { storyCalendarWeekArgTypes } from '../CalendarWeek.stories.svelte';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: CalendarWeek,
+    tags: ['autodocs'],
+    argTypes: storyCalendarWeekArgTypes,
+});
+</script>
+
+<Story name="Default" />
+
+<Story
+  name="SingleLetter"
+  args={{
+    nameType: 'abr1',
+  }}
+/>
+
+<Story
+  name="ThreeLetters"
+  args={{
+    nameType: 'abr3',
+  }}
+/>

package/dist/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarWeek/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/{src/lib/stories/components/Form/PasswordInput → dist/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarWeek}/Size/Size.stories.svelte

@@ -1,13 +1,13 @@
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
-  import PasswordInput from '../PasswordInput.svelte';
-  import { storyPasswordInputArgTypes } from '../PasswordInput.stories.svelte';
+  import CalendarWeek from '../CalendarWeek.svelte';
+  import { storyCalendarWeekArgTypes } from '../CalendarWeek.stories.svelte';
 
   // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
   const { Story } = defineMeta({
-    component: PasswordInput,
+    component: CalendarWeek,
     tags: ['autodocs'],
-    argTypes: storyPasswordInputArgTypes,
+    argTypes: storyCalendarWeekArgTypes,
   });
 </script>
 

package/dist/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarWeek/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;
+}