@flightlesslabs/dodo-ui 0.19.0 → 0.20.0

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

@@ -1,158 +0,0 @@
-<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

@@ -1,18 +0,0 @@
-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/Events/Events.stories.svelte

@@ -1,117 +0,0 @@
-<script module lang="ts">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,
-});
-let value = $state(getMoment().toDate());
-</script>
-
-<Story name="Select" asChild>
-  <Calendar
-    {value}
-    onselect={(val) => {
-      value = val;
-    }}
-  />
-</Story>
-
-<Story
-  name="MonthSelectorClick"
-  args={{
-    value,
-    onMonthSelectorClick: (option: CalendarMonthOption, e: ButtonClickEvent) => {
-      const target = e.target as HTMLButtonElement;
-
-      alert('Button Clicked');
-      console.log('Button Clicked', option, target);
-    },
-  }}
-/>
-
-<Story
-  name="YearSelectorClick"
-  args={{
-    value,
-    onYearSelectorClick: (selectedYear: string, e: ButtonClickEvent) => {
-      const target = e.target as HTMLButtonElement;
-
-      alert('Button Clicked');
-      console.log('Button Clicked', selectedYear, target);
-    },
-  }}
-/>
-
-<Story
-  name="CalendarNavigationNextClick"
-  args={{
-    value,
-    onCalendarNavigationNextClick: (e: ButtonClickEvent) => {
-      const target = e.target as HTMLButtonElement;
-
-      alert('Button Clicked');
-      console.log('Button Clicked', target);
-    },
-  }}
-/>
-
-<Story
-  name="CalendarNavigationPrevClick"
-  args={{
-    value,
-    onCalendarNavigationPrevClick: (e: ButtonClickEvent) => {
-      const target = e.target as HTMLButtonElement;
-
-      alert('Button Clicked');
-      console.log('Button Clicked', target);
-    },
-  }}
-/>
-
-<Story
-  name="SelectMonth"
-  args={{
-    value,
-    onselectMonth: (val: CalendarMonthNames, e: ButtonClickEvent) => {
-      const target = e.target as HTMLButtonElement;
-      console.log(val, target);
-    },
-  }}
-/>
-
-<Story
-  name="CancelMonthSelection"
-  args={{
-    value,
-    oncancelMonth: (e: ButtonClickEvent) => {
-      const target = e.target as HTMLButtonElement;
-      console.log(target);
-    },
-  }}
-/>
-
-<Story
-  name="SelectYear"
-  args={{
-    value,
-    onselectYear: (val: string, e: ButtonClickEvent) => {
-      const target = e.target as HTMLButtonElement;
-      console.log(val, target);
-    },
-  }}
-/>
-
-<Story
-  name="CancelYearSelection"
-  args={{
-    value,
-    oncancelYear: (e: ButtonClickEvent) => {
-      const target = e.target as HTMLButtonElement;
-      console.log(target);
-    },
-  }}
-/>

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

@@ -1,18 +0,0 @@
-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/FilterDates/FilterDates.stories.svelte

@@ -1,67 +0,0 @@
-<script module lang="ts">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,
-});
-let value = $state(getMoment('01-02-2025', 'DD-MM-YYYY').toDate());
-</script>
-
-<Story
-  name="Default"
-  args={{
-    value,
-  }}
-/>
-
-<Story
-  name="MinDate"
-  args={{
-    value,
-    minDate: getMoment('06-02-2025', 'DD-MM-YYYY').toDate(),
-  }}
-/>
-
-<Story
-  name="MaxDate"
-  args={{
-    value,
-    maxDate: getMoment('10-02-2025', 'DD-MM-YYYY').toDate(),
-  }}
-/>
-
-<Story
-  name="ExcludeDates"
-  args={{
-    value,
-    excludeDates: [
-      getMoment('10-02-2025', 'DD-MM-YYYY').toDate(),
-      getMoment('15-02-2025', 'DD-MM-YYYY').toDate(),
-      getMoment('20-02-2025', 'DD-MM-YYYY').toDate(),
-    ],
-  }}
-/>
-
-<Story
-  name="IncludeDates"
-  args={{
-    value,
-    includeDates: [
-      getMoment('10-02-2025', 'DD-MM-YYYY').toDate(),
-      getMoment('15-02-2025', 'DD-MM-YYYY').toDate(),
-      getMoment('20-02-2025', 'DD-MM-YYYY').toDate(),
-    ],
-  }}
-/>
-
-<Story
-  name="DisabledMonths"
-  args={{
-    value,
-    disabledMonths: ['jan', 'feb', 'mar'],
-  }}
-/>

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

@@ -1,18 +0,0 @@
-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 FilterDates: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FilterDates = InstanceType<typeof FilterDates>;
-export default FilterDates;

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

@@ -1,20 +0,0 @@
-<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="Small" args={{ size: 'small' }} />
-<Story name="Large" args={{ size: 'large' }} />

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

@@ -1,26 +0,0 @@
-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/CalendarControls.stories.svelte

@@ -1,31 +0,0 @@
-<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
-import CalendarControls from './CalendarControls.svelte';
-import getMoment from '../../../../../developer tools/helpers/Time/getMoment/getMoment.js';
-import { componentColorArray } from '../../../../../../types/colors.js';
-import { componentSizeArray } from '../../../../../../types/size.js';
-export const storyCalendarControlsArgTypes = {
-    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: CalendarControls,
-    tags: ['autodocs'],
-    argTypes: storyCalendarControlsArgTypes,
-});
-let value = $state(getMoment().toDate());
-</script>
-
-<!-- Default CalendarControls -->
-<Story
-  name="Default"
-  args={{
-    value,
-  }}
-/>

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

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

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

@@ -1,143 +0,0 @@
-<script lang="ts" module>export {};
-</script>
-
-<script lang="ts">import CalendarMonthSelector from './CalendarMonthSelector/CalendarMonthSelector.svelte';
-import CalendarYearSelector, {} from './CalendarYearSelector/CalendarYearSelector.svelte';
-import { CalendarNavigation, getMoment } from '../../../../../../index.js';
-let { class: className = '', ref = $bindable(), value, timezone, utc, activeMonth, size, color, customCalendarControls: customCalendarControlsInternal, showCalendarMonthSelector = true, showCalendarYearSelector = true, showCalendarNavigator = true, calendarMonthSelectorProps, customCalendarMonthSelector, customCalendarMonthSelectorContent, onMonthSelectorClick, calendarYearSelectorProps, customCalendarYearSelector, customCalendarYearSelectorContent, onYearSelectorClick, calendarNavigationProps, customCalendarNavigation, customCalendarNavigationNext, customCalendarNavigationPrev, customCalendarNavigationNextContent, customCalendarNavigationPrevContent, onCalendarNavigationNextClick, onCalendarNavigationPrevClick, disabledCalendarNavigationNext, disabledCalendarNavigationPrev, } = $props();
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-let customCalendarControlsTyped = customCalendarControlsInternal;
-const timeMoment = $derived(getMoment(activeMonth || value, undefined, { timezone, utc }));
-</script>
-
-<div class={['dodo-ui-CalendarControls', `size--${size}`, className].join(' ')} bind:this={ref}>
-  {#if customCalendarControlsTyped}
-    {@render customCalendarControlsTyped()}
-  {:else}
-    <div class="periodControls">
-      {#if showCalendarMonthSelector}
-        <CalendarMonthSelector
-          {value}
-          {timezone}
-          {utc}
-          {activeMonth}
-          {size}
-          {color}
-          {customCalendarMonthSelector}
-          {customCalendarMonthSelectorContent}
-          onclick={onMonthSelectorClick}
-          {...calendarMonthSelectorProps}
-        />
-      {:else}
-        <h3>{timeMoment.format('MMM')}</h3>
-      {/if}
-
-      {#if showCalendarYearSelector}
-        <CalendarYearSelector
-          {value}
-          {timezone}
-          {utc}
-          {activeMonth}
-          {size}
-          {color}
-          {customCalendarYearSelector}
-          {customCalendarYearSelectorContent}
-          onclick={onYearSelectorClick}
-          {...calendarYearSelectorProps}
-        />
-      {:else}
-        <h3>{timeMoment.format('YYYY')}</h3>
-      {/if}
-    </div>
-
-    {#if showCalendarNavigator}
-      <div class="navigationControls">
-        <CalendarNavigation
-          {size}
-          {color}
-          {customCalendarNavigationNext}
-          {customCalendarNavigationPrev}
-          {customCalendarNavigationNextContent}
-          {customCalendarNavigationPrevContent}
-          {onCalendarNavigationNextClick}
-          {onCalendarNavigationPrevClick}
-          {disabledCalendarNavigationNext}
-          {disabledCalendarNavigationPrev}
-          {customCalendarNavigation}
-          {...calendarNavigationProps}
-        />
-      </div>
-    {/if}
-  {/if}
-</div>
-
-<style>.dodo-ui-CalendarControls {
-  display: flex;
-  align-items: center;
-  margin-bottom: calc(var(--dodo-ui-space) * 2);
-}
-.dodo-ui-CalendarControls:empty {
-  display: none;
-}
-.dodo-ui-CalendarControls h3 {
-  font-weight: 400;
-  margin: 0;
-  letter-spacing: 0.3px;
-  font-family: inherit;
-  color: var(--dodo-color-neutral-800);
-  text-align: center;
-}
-.dodo-ui-CalendarControls.size--normal {
-  margin-bottom: calc(var(--dodo-ui-space-large) * 2);
-}
-.dodo-ui-CalendarControls.size--normal .periodControls {
-  margin: 0 calc(var(--dodo-ui-space) / 2 * -1);
-}
-.dodo-ui-CalendarControls.size--normal .periodControls :global(.dodo-ui-Button) {
-  margin: 0 calc(var(--dodo-ui-space) / 2);
-}
-.dodo-ui-CalendarControls.size--normal h3 {
-  font-size: 1rem;
-  margin: 0 calc(var(--dodo-ui-space) / 2);
-}
-.dodo-ui-CalendarControls.size--small {
-  margin-bottom: calc(var(--dodo-ui-space) * 2);
-}
-.dodo-ui-CalendarControls.size--small .periodControls {
-  margin: 0 calc(var(--dodo-ui-space-small) / 2 * -1);
-}
-.dodo-ui-CalendarControls.size--small .periodControls :global(.dodo-ui-Button) {
-  margin: 0 calc(var(--dodo-ui-space-small) / 2);
-}
-.dodo-ui-CalendarControls.size--small h3 {
-  font-size: 0.9rem;
-  margin: 0 calc(var(--dodo-ui-space-small) / 2);
-}
-.dodo-ui-CalendarControls.size--large {
-  margin-bottom: calc(var(--dodo-ui-space) * 3);
-}
-.dodo-ui-CalendarControls.size--large .periodControls {
-  margin: 0 calc(var(--dodo-ui-space-large) / 2 * -1);
-}
-.dodo-ui-CalendarControls.size--large .periodControls :global(.dodo-ui-Button) {
-  margin: 0 calc(var(--dodo-ui-space-large) / 2);
-}
-.dodo-ui-CalendarControls.size--large h3 {
-  font-size: 1.1rem;
-  margin: 0 calc(var(--dodo-ui-space-large) / 2);
-}
-.dodo-ui-CalendarControls .periodControls {
-  display: flex;
-  align-items: center;
-}
-.dodo-ui-CalendarControls .periodControls:empty {
-  display: none;
-}
-.dodo-ui-CalendarControls .navigationControls {
-  display: flex;
-  align-items: center;
-  margin-left: auto;
-}
-.dodo-ui-CalendarControls .navigationControls:empty {
-  display: none;
-}</style>