@flightlesslabs/dodo-ui 0.9.0 → 0.10.0

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

@@ -0,0 +1,31 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import CalendarNavigation from '../CalendarNavigation.svelte';
+import { storyCalendarNavigationArgTypes } from '../CalendarNavigation.stories.svelte';
+import { Button } 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: CalendarNavigation,
+    tags: ['autodocs'],
+    argTypes: storyCalendarNavigationArgTypes,
+});
+</script>
+
+<Story name="customCalendarNavigationContent" asChild>
+  <CalendarNavigation>
+    {#snippet customCalendarNavigationPrevContent()}
+      <Icon icon="carbon:previous-filled" width="32" height="32" />
+    {/snippet}
+    {#snippet customCalendarNavigationNextContent()}
+      <Icon icon="carbon:next-outline" width="32" height="32" />
+    {/snippet}
+  </CalendarNavigation>
+</Story>
+
+<Story name="customCalendarNavigation" asChild>
+  <CalendarNavigation>
+    {#snippet customCalendarNavigation()}
+      <Button>Control</Button>
+    {/snippet}
+  </CalendarNavigation>
+</Story>

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Customize: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Customize = InstanceType<typeof Customize>;
+export default Customize;

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

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

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Events: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Events = InstanceType<typeof Events>;
+export default Events;

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

@@ -0,0 +1,38 @@
+<script lang="ts">import Button, {} from '../../../../../Form/Button/Button.svelte';
+let { class: className = '', children, name, ref = $bindable(), size, color, buttonProps, onclick, disabled, customNavigationButton: customNavigationButtonInternal, customNavigationButtonContent: customNavigationButtonContentInternal, } = $props();
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let customNavigationButtonTyped = customNavigationButtonInternal;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let customNavigationButtonContentTyped = customNavigationButtonContentInternal;
+</script>
+
+<div
+  class={['NavigationButton', `size--${size}`, `color--${color}`, className].join(' ')}
+  bind:this={ref}
+>
+  {#if customNavigationButtonTyped}
+    {@render customNavigationButtonTyped()}
+  {:else}
+    <Button
+      {name}
+      variant="text"
+      {color}
+      {disabled}
+      roundness="full"
+      {onclick}
+      {size}
+      compact
+      {...buttonProps}
+    >
+      {#if customNavigationButtonContentTyped}
+        {@render customNavigationButtonContentTyped()}
+      {:else if children}
+        {@render children()}
+      {/if}
+    </Button>
+  {/if}
+</div>
+
+<style>.NavigationButton {
+  display: inline-flex;
+}</style>

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

@@ -0,0 +1,32 @@
+import { type ButtonProps } from '../../../../../Form/Button/Button.svelte';
+import type { ComponentColor } from '../../../../../../../types/colors.js';
+import type { ComponentSize } from '../../../../../../../types/size.js';
+import type { Snippet } from 'svelte';
+import type { MouseEventHandler } from 'svelte/elements';
+interface NavigationButtonProps {
+    /** Name */
+    name?: string;
+    /** Button contents goes here */
+    children?: Snippet;
+    /** NavigationButton ref */
+    ref?: HTMLDivElement;
+    /** Custom css class */
+    class?: string;
+    /** What color to use? */
+    color?: ComponentColor;
+    /** How large should the Component be? */
+    size?: ComponentSize;
+    /** buttonProps */
+    buttonProps?: Partial<ButtonProps>;
+    /** onclick event */
+    onclick?: MouseEventHandler<HTMLButtonElement>;
+    /** Custom Navigation */
+    customNavigationButton?: () => Snippet;
+    /** Custom Navigation Content */
+    customNavigationButtonContent?: () => Snippet;
+    /** disabled state */
+    disabled?: boolean;
+}
+declare const NavigationButton: import("svelte").Component<NavigationButtonProps, {}, "ref">;
+type NavigationButton = ReturnType<typeof NavigationButton>;
+export default NavigationButton;

package/{src/lib/stories/developer tools/components/InputEnclosure/Size/Size.stories.svelte → dist/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarNavigation/Size/Size.stories.svelte}

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

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

@@ -0,0 +1,26 @@
+export default Size;
+type Size = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Size: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

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

@@ -0,0 +1,53 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import CalendarYearSelector from './CalendarYearSelector.svelte';
+import getMoment from '../../../../../../developer tools/helpers/Time/getMoment/getMoment.js';
+import { componentColorArray } from '../../../../../../../types/colors.js';
+import { componentSizeArray } from '../../../../../../../types/size.js';
+import { componentRoundnessArray } from '../../../../../../../types/roundness.js';
+export const storyCalendarYearSelectorArgTypes = {
+    color: {
+        control: { type: 'select' },
+        options: componentColorArray,
+    },
+    size: {
+        control: { type: 'select' },
+        options: componentSizeArray,
+    },
+    roundness: {
+        control: { type: 'select' },
+        options: componentRoundnessArray,
+    },
+};
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: CalendarYearSelector,
+    tags: ['autodocs'],
+    argTypes: storyCalendarYearSelectorArgTypes,
+});
+let value = $state(getMoment().toDate());
+</script>
+
+<!-- Default CalendarYearSelector -->
+<Story
+  name="Default"
+  args={{
+    value,
+  }}
+/>
+
+<!-- Override year -->
+<Story
+  name="ActiveMonth"
+  args={{
+    value,
+    activeMonth: getMoment().add(2, 'years').toDate(),
+  }}
+/>
+
+<Story
+  name="Disabled"
+  args={{
+    value,
+    disabled: true,
+  }}
+/>

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

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

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

@@ -0,0 +1,71 @@
+<script lang="ts" module>import getMoment from '../../../../../../developer tools/helpers/Time/getMoment/getMoment.js';
+import { Button } from '../../../../../../../index.js';
+import Icon from '@iconify/svelte';
+</script>
+
+<script lang="ts">"use strict";
+let { class: className = '', ref = $bindable(), value, timezone, utc, activeMonth, size, color, buttonProps, onclick, disabled, roundness = 2, customCalendarYearSelector: customCalendarYearSelectorInternal, customCalendarYearSelectorContent: customCalendarYearSelectorContentInternal, } = $props();
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let customCalendarYearSelectorTyped = customCalendarYearSelectorInternal;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let customCalendarYearSelectorContentTyped = customCalendarYearSelectorContentInternal;
+const selectedYear = $derived(getMoment(activeMonth || value, undefined, {
+    timezone,
+    utc,
+}).format('YYYY'));
+function onClickMod(e) {
+    if (onclick) {
+        onclick(selectedYear, e);
+    }
+}
+</script>
+
+{#snippet yearName(selectedYear: string)}
+  {#if customCalendarYearSelectorContentTyped}
+    {@render customCalendarYearSelectorContentTyped(selectedYear)}
+  {:else}
+    {selectedYear}
+  {/if}
+{/snippet}
+
+<div
+  class={['dodo-ui-CalendarYearSelector', `size--${size}`, `color--${color}`, className].join(' ')}
+  bind:this={ref}
+>
+  <Button
+    name="year-selector"
+    variant="text"
+    {color}
+    {disabled}
+    {roundness}
+    onclick={onClickMod}
+    {size}
+    {...buttonProps}
+  >
+    {#if customCalendarYearSelectorTyped}
+      {@render customCalendarYearSelectorTyped(selectedYear)}
+    {:else}
+      {@render yearName(selectedYear)}
+    {/if}
+
+    {#snippet after()}
+      <Icon icon="material-symbols:arrow-drop-down-rounded" width="24" height="24" />
+    {/snippet}
+  </Button>
+</div>
+
+<style>.dodo-ui-CalendarYearSelector :global(.dodo-ui-Button) {
+  text-transform: capitalize;
+}
+.dodo-ui-CalendarYearSelector :global(.dodo-ui-Button .content--after) {
+  margin-left: auto;
+}
+.dodo-ui-CalendarYearSelector.size--normal :global(.dodo-ui-Button) {
+  width: 85px;
+}
+.dodo-ui-CalendarYearSelector.size--small :global(.dodo-ui-Button) {
+  width: 75px;
+}
+.dodo-ui-CalendarYearSelector.size--large :global(.dodo-ui-Button) {
+  width: 105px;
+}</style>

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

@@ -0,0 +1,38 @@
+import type { ComponentColor } from '../../../../../../../types/colors.js';
+import type { ComponentSize } from '../../../../../../../types/size.js';
+import type { ButtonClickEvent, ButtonProps } from '../../../../../Form/Button/Button.svelte';
+import { type ComponentRoundness } from '../../../../../../../index.js';
+import type { Snippet } from 'svelte';
+export interface CalendarYearSelectorProps {
+    /** CalendarYearSelector ref */
+    ref?: HTMLDivElement;
+    /** Custom css class */
+    class?: string;
+    /** Selcted date Value */
+    value?: Date;
+    /** Define active year to override year selected with value */
+    activeMonth?: Date;
+    /** What color to use? */
+    color?: ComponentColor;
+    /** Timezone string (e.g., "America/New_York"). */
+    timezone?: string;
+    /** Whether to return the time in UTC. If true, overrides timezone. */
+    utc?: boolean;
+    /** How large should the Component be? */
+    size?: ComponentSize;
+    /** buttonProps */
+    buttonProps?: Partial<ButtonProps>;
+    /** The onclick event handler */
+    onclick?: (selectedYear: string, e: ButtonClickEvent) => void;
+    /** Custom YearSelector */
+    customCalendarYearSelector?: (selectedYear: string) => Snippet;
+    /** Custom YearSelector Content */
+    customCalendarYearSelectorContent?: (selectedYear: string) => Snippet;
+    /** Button disabled state */
+    disabled?: boolean;
+    /** How round should the border radius be? */
+    roundness?: ComponentRoundness;
+}
+declare const CalendarYearSelector: import("svelte").Component<CalendarYearSelectorProps, {}, "ref">;
+type CalendarYearSelector = ReturnType<typeof CalendarYearSelector>;
+export default CalendarYearSelector;

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

@@ -0,0 +1,23 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import CalendarYearSelector from '../../CalendarYearSelector/CalendarYearSelector.svelte';
+  import { storyCalendarYearSelectorArgTypes } from '../../CalendarYearSelector/CalendarYearSelector.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: CalendarYearSelector,
+    tags: ['autodocs'],
+    argTypes: storyCalendarYearSelectorArgTypes,
+    args: {
+      value: getMoment().toDate(),
+    },
+  });
+</script>
+
+<Story name="Primary" />
+<Story name="Secondary" args={{ color: 'secondary' }} />
+<Story name="Neutral" args={{ color: 'neutral' }} />
+<Story name="Safe" args={{ color: 'safe' }} />
+<Story name="Warning" args={{ color: 'warning' }} />
+<Story name="Danger" args={{ color: 'danger' }} />

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

@@ -0,0 +1,26 @@
+export default Color;
+type Color = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Color: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

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

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

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Customize: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Customize = InstanceType<typeof Customize>;
+export default Customize;

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

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

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Events: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Events = InstanceType<typeof Events>;
+export default Events;

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

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

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

@@ -0,0 +1,26 @@
+export default Roundness;
+type Roundness = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Roundness: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

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

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

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