@flightlesslabs/dodo-ui 0.19.1 → 0.20.0

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

@@ -1,298 +0,0 @@
-<script lang="ts" module>export {};
-</script>
-
-<script lang="ts">import InputEnclosure from '../../../developer tools/components/InputEnclosure/InputEnclosure.svelte';
-import UtilityButton from '../../../developer tools/components/UtilityButton/UtilityButton.svelte';
-import Icon from '@iconify/svelte';
-import { createDateOfMonth, DynamicInput, getMoment, Popper, } from '../../../../index.js';
-import Calendar, {} from '../../Info/Calendar/Calendar.svelte';
-let { size = 'normal', roundness = 1, outline = true, name, id, class: className = '', disabled = false, onchange, oninput, onselect, onblur, onfocus, onpaste, oncopy, oncut, onkeydown, onkeypress, onkeyup, before, after, error = false, value, placeholder, ref = $bindable(), readonly = false, editable = false, clearable = false, onclear, customInputContent: customInputContentInternal, customPopupContent: customPopupContentInternal, customCalendarIcon: customCalendarIconInternal, paperProps, popperProps, calendarIconPosition = 'after', popupPositionX, popupPositionY, lockPoistions, popperHeightForVerticalPosition, color, format = 'DD/MM/YYYY', formatEditable: formatEditableRaw, open = $bindable(false), startOfWeek = 'sun', timezone, utc, calendarDateChipProps, activeMonth, showSelected, showLastMonth, showNextMonth, showToday, today, minDate, maxDate, excludeDates, includeDates, customCalendarDateChipContent, customCalendarDateChip, customCalendarWeekContent, customCalendarWeek, weekendDays, weekendDaysColorDays, customCalendarControls, showCalendarControls, calendarMonthSelectorProps, customCalendarMonthSelector, customCalendarMonthSelectorContent, onMonthSelectorClick, calendarYearSelectorProps, customCalendarYearSelector, customCalendarYearSelectorContent, onYearSelectorClick, calendarNavigationProps, customCalendarNavigation, customCalendarNavigationNext, customCalendarNavigationPrev, customCalendarNavigationNextContent, customCalendarNavigationPrevContent, onCalendarNavigationNextClick, onCalendarNavigationPrevClick, disabledCalendarNavigationNext, disabledCalendarNavigationPrev, showCalendarMonthSelector, showCalendarYearSelector, showCalendarNavigator, onselectMonth, customCalendarMonthChipContent, customCalendarMonthChip, disabledMonths, calendarMonthChipProps, calendarYearChipProps, onselectYear, customCalendarYearChipContent, customCalendarYearChip, oncancelMonth, oncancelYear, showControlsMonthList, showControlsYearList, calendarProps, calendarTopContent, calendarBottomContent, manipulateDate, } = $props();
-const formatEditable = $derived(formatEditableRaw || format);
-let searchText = $derived(value ? getMoment(value, undefined, { timezone, utc }).format(format) : '');
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-let customInputContentTyped = customInputContentInternal;
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-let customPopupContentTyped = customPopupContentInternal;
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-let customCalendarIconTyped = customCalendarIconInternal;
-const calenderSize = calendarProps?.size || size;
-function closePopup() {
-    open = false;
-    ref?.blur();
-}
-function openPopup() {
-    open = true;
-}
-function onfocusMod(e) {
-    openPopup();
-    if (editable) {
-        searchText = getMoment(searchText, format, { timezone, utc }).format(formatEditable);
-    }
-    if (onfocus) {
-        onfocus(e);
-    }
-}
-function onblurMod(e) {
-    if (editable) {
-        const searchTextrToMoment = getMoment(searchText, formatEditable, { timezone, utc });
-        if (searchTextrToMoment.isValid()) {
-            const searchTextrToDate = searchTextrToMoment.toDate();
-            const dayOfMonth = createDateOfMonth(searchTextrToDate, {
-                startOfWeek,
-                showLastMonth,
-                showNextMonth,
-                today,
-                minDate,
-                maxDate,
-                excludeDates,
-                includeDates,
-                timezone,
-                utc,
-            }, 'currentMonth');
-            searchText = searchTextrToMoment.format(format);
-            onselectMod(searchTextrToDate, dayOfMonth, e);
-        }
-        else {
-            searchText = value ? getMoment(value, undefined, { timezone, utc }).format(format) : '';
-        }
-    }
-    if (onblur) {
-        onblur(e);
-    }
-}
-function onClickOutside() {
-    closePopup();
-}
-function onselectMod(val, dayOfMonth, e) {
-    closePopup();
-    if (onselect) {
-        onselect(val, dayOfMonth, e);
-    }
-}
-function oninputMod(e) {
-    const target = e.target;
-    searchText = target.value;
-    if (oninput) {
-        oninput(e);
-    }
-}
-function onclearMod(e) {
-    closePopup();
-    if (onclear) {
-        onclear(e);
-    }
-}
-</script>
-
-{#snippet datePickerCalendarIcon()}
-  <UtilityButton {size} title="Dropdown" onclick={onfocusMod}>
-    {#if customCalendarIconTyped}
-      {@render customCalendarIconTyped(open)}
-    {:else if size === 'small'}
-      <Icon icon="ic:baseline-calendar-month" width="19" height="19" />
-    {:else}
-      <Icon icon="ic:baseline-calendar-month" width="24" height="24" />
-    {/if}
-  </UtilityButton>
-{/snippet}
-
-<div class={['dodo-ui-DatePicker', className].join(' ')}>
-  <Popper
-    {open}
-    fullWidth
-    popupFullWidth={false}
-    {onClickOutside}
-    {...popperProps}
-    {popupPositionX}
-    {popupPositionY}
-    {paperProps}
-    {lockPoistions}
-    {popperHeightForVerticalPosition}
-    popupMaxHeight="800px"
-  >
-    <div
-      class:outline
-      class:disabled
-      class:error
-      class={[
-        'DatePicker',
-        `size--${size}`,
-        `${open ? 'focused' : ''}`,
-        `roundness--${roundness}`,
-        className,
-      ].join(' ')}
-    >
-      <InputEnclosure
-        {outline}
-        {disabled}
-        {error}
-        focused={open}
-        {size}
-        {roundness}
-        {before}
-        {after}
-      >
-        {#if calendarIconPosition === 'before'}
-          <div class:before class:open class="Calendar">
-            {@render datePickerCalendarIcon()}
-          </div>
-        {/if}
-
-        <DynamicInput
-          type="text"
-          {name}
-          {id}
-          {disabled}
-          bind:ref
-          oninput={oninputMod}
-          {onchange}
-          onfocus={onfocusMod}
-          onblur={onblurMod}
-          {onpaste}
-          {oncopy}
-          {oncut}
-          {onkeydown}
-          {onkeypress}
-          {onkeyup}
-          {placeholder}
-          value={editable
-            ? searchText
-            : getMoment(value, undefined, { timezone, utc }).format(format)}
-          {readonly}
-          variant={editable ? 'input' : 'button'}
-          {size}
-        >
-          {#snippet customInputContent()}
-            {#if customInputContentTyped}
-              {@render customInputContentTyped(value)}
-            {:else if value}
-              {getMoment(value, undefined, { timezone, utc }).format(format)}
-            {:else}
-              {placeholder}
-            {/if}
-          {/snippet}
-        </DynamicInput>
-
-        {#if value && clearable && !disabled}
-          <div class:after class="DatePickerClear">
-            <UtilityButton {size} title="Clear" onclick={onclearMod}>
-              <Icon icon="material-symbols:close-small" width="24" height="24" />
-            </UtilityButton>
-          </div>
-        {/if}
-
-        {#if calendarIconPosition === 'after'}
-          <div class:after class:open class="Calendar">
-            {@render datePickerCalendarIcon()}
-          </div>
-        {/if}
-      </InputEnclosure>
-    </div>
-
-    {#snippet popupChildren()}
-      {#if customPopupContentTyped}
-        {@render customPopupContentTyped()}
-      {:else}
-        <div class="CalendarContainer">
-          <Calendar
-            {value}
-            size={calenderSize}
-            {color}
-            {startOfWeek}
-            {timezone}
-            {utc}
-            {calendarDateChipProps}
-            {activeMonth}
-            {showSelected}
-            {showLastMonth}
-            {showNextMonth}
-            {showToday}
-            {today}
-            {minDate}
-            {maxDate}
-            {excludeDates}
-            {includeDates}
-            {customCalendarDateChipContent}
-            {customCalendarDateChip}
-            {customCalendarWeekContent}
-            {customCalendarWeek}
-            {weekendDays}
-            {weekendDaysColorDays}
-            {customCalendarControls}
-            {showCalendarControls}
-            {calendarMonthSelectorProps}
-            {customCalendarMonthSelector}
-            {customCalendarMonthSelectorContent}
-            {onMonthSelectorClick}
-            {calendarYearSelectorProps}
-            {customCalendarYearSelector}
-            {customCalendarYearSelectorContent}
-            {onYearSelectorClick}
-            {calendarNavigationProps}
-            {customCalendarNavigation}
-            {customCalendarNavigationNext}
-            {customCalendarNavigationPrev}
-            {customCalendarNavigationNextContent}
-            {customCalendarNavigationPrevContent}
-            {onCalendarNavigationNextClick}
-            {onCalendarNavigationPrevClick}
-            {disabledCalendarNavigationNext}
-            {disabledCalendarNavigationPrev}
-            {showCalendarMonthSelector}
-            {showCalendarYearSelector}
-            {showCalendarNavigator}
-            {onselectMonth}
-            {customCalendarMonthChipContent}
-            {customCalendarMonthChip}
-            {disabledMonths}
-            {calendarMonthChipProps}
-            {calendarYearChipProps}
-            {onselectYear}
-            {customCalendarYearChipContent}
-            {customCalendarYearChip}
-            {oncancelMonth}
-            {oncancelYear}
-            {showControlsMonthList}
-            {showControlsYearList}
-            onselect={onselectMod}
-            {calendarTopContent}
-            {calendarBottomContent}
-            {manipulateDate}
-            {...calendarProps}
-          />
-        </div>
-      {/if}
-    {/snippet}
-  </Popper>
-</div>
-
-<style>.dodo-ui-DatePicker .DatePicker.size--normal .DatePickerClear.after {
-  margin-right: calc(var(--dodo-ui-space-small) * 2);
-}
-.dodo-ui-DatePicker .DatePicker.size--normal .Calendar.after {
-  margin-right: calc(var(--dodo-ui-space-small) * 2);
-}
-.dodo-ui-DatePicker .DatePicker.size--normal .Calendar.before {
-  margin-right: calc(var(--dodo-ui-space-small) * 2);
-}
-.dodo-ui-DatePicker .DatePicker.size--small .DatePickerClear.after {
-  margin-right: var(--dodo-ui-space);
-}
-.dodo-ui-DatePicker .DatePicker.size--small .Calendar.after {
-  margin-right: var(--dodo-ui-space);
-}
-.dodo-ui-DatePicker .DatePicker.size--small .Calendar.before {
-  margin-right: var(--dodo-ui-space);
-}
-.dodo-ui-DatePicker .DatePicker.size--large .DatePickerClear.after {
-  margin-right: calc(var(--dodo-ui-space) * 2);
-}
-.dodo-ui-DatePicker .DatePicker.size--large .Calendar.after {
-  margin-right: calc(var(--dodo-ui-space) * 2);
-}
-.dodo-ui-DatePicker .DatePicker.size--large .Calendar.before {
-  margin-right: calc(var(--dodo-ui-space) * 2);
-}
-.dodo-ui-DatePicker .CalendarContainer {
-  padding: var(--dodo-ui-space);
-}</style>

package/dist/stories/components/Form/DatePicker/DatePicker.svelte.d.ts

@@ -1,217 +0,0 @@
-import type { ComponentSize } from '../../../../types/size.js';
-import type { ComponentRoundness } from '../../../../types/roundness.js';
-import type { Snippet } from 'svelte';
-import type { ChangeEventHandler, ClipboardEventHandler, FocusEventHandler, FormEventHandler, KeyboardEventHandler, MouseEventHandler } from 'svelte/elements';
-export type DatePickerCalendarIconPosition = false | 'before' | 'after';
-export interface DatePickerProps {
-    /** How large should the button be? */
-    size?: ComponentSize;
-    /** editable DatePicker? */
-    editable?: boolean;
-    /** want a clearable DatePicker? */
-    clearable?: boolean;
-    /** onselect event handler */
-    onselect?: (value: Date, dayOfMonth: DateOfMonth, e: ButtonClickEvent) => void;
-    /** onclear event handler */
-    onclear?: MouseEventHandler<HTMLButtonElement>;
-    /** DatePicker ref */
-    ref?: HTMLInputElement | HTMLButtonElement;
-    /** How round should the border radius be? */
-    roundness?: ComponentRoundness;
-    /** Add a border around the button. Default True */
-    outline?: boolean;
-    /** DatePicker value */
-    value: Date | undefined;
-    /** How round should the border radius be? */
-    placeholder?: string;
-    /** disabled state */
-    disabled?: boolean;
-    /** Read only ? */
-    readonly?: boolean;
-    /** is there any associated Error ? */
-    error?: boolean;
-    /** Name */
-    name?: string;
-    /** Id */
-    id?: string;
-    /** Icon before button content */
-    before?: Snippet;
-    /** Icon after button content */
-    after?: Snippet;
-    /** Custom css class*/
-    class?: string;
-    /** onchange event handler */
-    onchange?: ChangeEventHandler<HTMLInputElement>;
-    /** oninput event handler */
-    oninput?: FormEventHandler<HTMLInputElement>;
-    /** onblur event handler */
-    onblur?: FocusEventHandler<HTMLInputElement | HTMLButtonElement>;
-    /** onfocus event handler */
-    onfocus?: FocusEventHandler<HTMLInputElement | HTMLButtonElement>;
-    /** onpaste event handler */
-    onpaste?: ClipboardEventHandler<HTMLInputElement>;
-    /** oncopy event handler */
-    oncopy?: ClipboardEventHandler<HTMLInputElement>;
-    /** oncut event handler */
-    oncut?: ClipboardEventHandler<HTMLInputElement>;
-    /** onkeydown event handler */
-    onkeydown?: KeyboardEventHandler<HTMLInputElement | HTMLButtonElement>;
-    /** onkeypress event handler */
-    onkeypress?: KeyboardEventHandler<HTMLInputElement | HTMLButtonElement>;
-    /** onkeyup event handler */
-    onkeyup?: KeyboardEventHandler<HTMLInputElement | HTMLButtonElement>;
-    /** custom Content Formatting for variant button */
-    customInputContent?: (val: Date) => Snippet;
-    /** Custom Popup Content */
-    customPopupContent?: () => Snippet;
-    /** PaperProps: Paper component props for Popup */
-    paperProps?: Partial<PaperProps>;
-    /** PopperProps: Popper component props */
-    popperProps?: Partial<PopperProps>;
-    /** custom CalendarI Icon */
-    customCalendarIcon?: (open: boolean) => Snippet;
-    /** DatePicker CalendarI con Position */
-    calendarIconPosition?: DatePickerCalendarIconPosition;
-    /** Popup stick horizontally  */
-    popupPositionX?: PositionX;
-    /** Popup stick vertically  */
-    popupPositionY?: PositionY;
-    /** Lock positions, disable auto top, bottom position based  */
-    lockPoistions?: boolean;
-    /** Popper Height For Vertical Position, default 300 */
-    popperHeightForVerticalPosition?: number;
-    /** Date display format, Default: DD/MM/YYYY , [Supported formats](https://day.js.org/docs/en/display/format) */
-    format?: string;
-    /** Override format for editable input */
-    formatEditable?: string;
-    /** Control Popup Open state */
-    open?: boolean;
-    /** 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>;
-    /** 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;
-    /** 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;
-    /** calendarProps: calendar component props */
-    calendarProps?: Partial<CalendarProps>;
-    /** calendar Top Content*/
-    calendarTopContent?: (activeSection: CalendarActiveSection) => Snippet;
-    /** calendar Bottom Content*/
-    calendarBottomContent?: (activeSection: CalendarActiveSection) => Snippet;
-    /** manipulate date callback */
-    manipulateDate?: (dateToModify: DateOfMonth, settings?: CreateDatesOfMonthSettings) => DateOfMonth;
-}
-import { type CalendarDateChipProps, type CalendarMonthChipProps, type CalendarMonthNames, type CalendarMonthOption, type CalendarMonthSelectorProps, type CalendarWeekNames, type CalendarWeekOption, type CalendarYearChipProps, type CalendarYearSelectorProps, type ComponentColor, type CreateDatesOfMonthSettings, type DateOfMonth, type PaperProps, type PopperProps, type PositionX, type PositionY } from '../../../../index.js';
-import type { ButtonClickEvent } from '../Button/Button.svelte';
-import { type CalendarActiveSection, type CalendarProps } from '../../Info/Calendar/Calendar.svelte';
-declare const DatePicker: import("svelte").Component<DatePickerProps, {}, "ref" | "open">;
-type DatePicker = ReturnType<typeof DatePicker>;
-export default DatePicker;

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

@@ -1,139 +0,0 @@
-<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
-import DatePicker from '../DatePicker.svelte';
-import { storyDatePickerArgTypes } from '../DatePicker.stories.svelte';
-import getMoment from '../../../../developer tools/helpers/Time/getMoment/getMoment.js';
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-const { Story } = defineMeta({
-    component: DatePicker,
-    tags: ['autodocs'],
-    argTypes: storyDatePickerArgTypes,
-    parameters: {
-        docs: {
-            story: {
-                height: '400px',
-                inline: false,
-            },
-        },
-    },
-});
-let value = $state(getMoment().toDate());
-</script>
-
-<Story name="Select" asChild>
-  <DatePicker
-    {value}
-    onselect={(val) => {
-      value = val;
-    }}
-  />
-</Story>
-
-<Story name="MonthSelectorClick" asChild>
-  <DatePicker
-    {value}
-    onMonthSelectorClick={(option: CalendarMonthOption, e: ButtonClickEvent) => {
-      const target = e.target as HTMLButtonElement;
-
-      alert('Button Clicked');
-      console.log('Button Clicked', option, target);
-    }}
-  />
-</Story>
-
-<Story name="YearSelectorClick" asChild>
-  <DatePicker
-    {value}
-    onYearSelectorClick={(selectedYear: string, e: ButtonClickEvent) => {
-      const target = e.target as HTMLButtonElement;
-
-      alert('Button Clicked');
-      console.log('Button Clicked', selectedYear, target);
-    }}
-  />
-</Story>
-
-<Story name="CalendarNavigationNextClick" asChild>
-  <DatePicker
-    {value}
-    onCalendarNavigationNextClick={(e: ButtonClickEvent) => {
-      const target = e.target as HTMLButtonElement;
-
-      alert('Button Clicked');
-      console.log('Button Clicked', target);
-    }}
-  />
-</Story>
-
-<Story name="CalendarNavigationPrevClick" asChild>
-  <DatePicker
-    {value}
-    onCalendarNavigationPrevClick={(e: ButtonClickEvent) => {
-      const target = e.target as HTMLButtonElement;
-
-      alert('Button Clicked');
-      console.log('Button Clicked', target);
-    }}
-  />
-</Story>
-
-<Story name="SelectMonth" asChild>
-  <DatePicker
-    {value}
-    onselectMonth={(val: CalendarMonthNames, e: ButtonClickEvent) => {
-      const target = e.target as HTMLButtonElement;
-      console.log(val, target);
-    }}
-  />
-</Story>
-
-<Story name="CancelMonthSelection" asChild>
-  <DatePicker
-    {value}
-    oncancelMonth={(e: ButtonClickEvent) => {
-      const target = e.target as HTMLButtonElement;
-      console.log(target);
-    }}
-  />
-</Story>
-
-<Story name="SelectYear" asChild>
-  <DatePicker
-    {value}
-    onselectYear={(val: string, e: ButtonClickEvent) => {
-      const target = e.target as HTMLButtonElement;
-      console.log(val, target);
-    }}
-  />
-</Story>
-
-<Story name="CancelYearSelection" asChild>
-  <DatePicker
-    {value}
-    oncancelYear={(e: ButtonClickEvent) => {
-      const target = e.target as HTMLButtonElement;
-      console.log(target);
-    }}
-  />
-</Story>
-
-<Story name="Input" asChild>
-  <DatePicker
-    {value}
-    oninput={(e: Event) => {
-      const target = e.target as HTMLInputElement;
-
-      console.log('Input Event', target.value);
-    }}
-  />
-</Story>
-
-<Story name="Change" asChild>
-  <DatePicker
-    {value}
-    onchange={(e: Event) => {
-      const target = e.target as HTMLInputElement;
-
-      console.log('onChange Event', target.value);
-    }}
-  />
-</Story>

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