@flightlesslabs/dodo-ui 0.9.0 → 0.10.0

package/dist/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/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/{src/lib/stories/developer tools/components/DynamicInput/Size/Size.stories.svelte → dist/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/Size/Size.stories.svelte}

@@ -1,14 +1,16 @@
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
-  import DynamicInput from '../DynamicInput.svelte';
-  import { storyDynamicInputArgTypes } from '../DynamicInput.stories.svelte';
+  import CalendarMonthChip from '../CalendarMonthChip.svelte';
+  import { storyCalendarMonthChipArgTypes } from '../CalendarMonthChip.stories.svelte';
 
   // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
   const { Story } = defineMeta({
-    component: DynamicInput,
+    component: CalendarMonthChip,
     tags: ['autodocs'],
-    argTypes: storyDynamicInputArgTypes,
-    args: { value: 'Hello world!' },
+    argTypes: storyCalendarMonthChipArgTypes,
+    args: {
+      value: 'jan',
+    },
   });
 </script>
 

package/dist/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/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/CalendarMonthList/CalendarMonthChip/utils/scss/mixins.scss

@@ -0,0 +1,91 @@
+/// Mixin: generate-dodo-ui-calendarMonthChip-colors
+/// Generates CSS custom properties for Dodo UI calendarMonthChip styles (text & solid)
+/// across different interaction states (default, hover, active).
+/// @param {String} $color-name - The theme color name (e.g., "primary", "safe", etc.)
+@mixin generate-dodo-ui-calendarMonthChip-colors($color-name) {
+  --dodo-ui-CalendarMonthChip-#{$color-name}-bg: transparent;
+  --dodo-ui-CalendarMonthChip-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-100);
+  --dodo-ui-CalendarMonthChip-#{$color-name}-active-bg: var(--dodo-color-#{$color-name}-200);
+
+  --dodo-ui-CalendarMonthChip-selected-#{$color-name}-bg: var(--dodo-color-#{$color-name}-500);
+  --dodo-ui-CalendarMonthChip-selected-#{$color-name}-hover-bg: var(
+    --dodo-color-#{$color-name}-600
+  );
+  --dodo-ui-CalendarMonthChip-selected-#{$color-name}-active-bg: var(
+    --dodo-color-#{$color-name}-700
+  );
+}
+
+/// Mixin: generate-dodo-ui-calendarMonthChip-colors
+/// Generates CSS custom properties for Dodo UI calendarMonthChip styles (text & solid)
+/// across different interaction states (default, hover, active).
+/// @param {String} $color-name - The theme color name (e.g., "primary", "safe", etc.)
+@mixin generate-dodo-ui-calendarMonthChip-colors-dark($color-name) {
+  --dodo-ui-CalendarMonthChip-#{$color-name}-bg: transparent;
+  --dodo-ui-CalendarMonthChip-#{$color-name}-hover-bg: color-mix(
+    in oklab,
+    var(--dodo-color-#{$color-name}-50) 85%,
+    #fff
+  );
+  --dodo-ui-CalendarMonthChip-#{$color-name}-active-bg: color-mix(
+    in oklab,
+    var(--dodo-color-#{$color-name}-100) 85%,
+    #fff
+  );
+
+  --dodo-ui-CalendarMonthChip-selected-#{$color-name}-bg: var(--dodo-color-#{$color-name}-300);
+  --dodo-ui-CalendarMonthChip-selected-#{$color-name}-hover-bg: var(
+    --dodo-color-#{$color-name}-200
+  );
+  --dodo-ui-CalendarMonthChip-selected-#{$color-name}-active-bg: var(
+    --dodo-color-#{$color-name}-100
+  );
+}
+
+/// Mixin: generate-dodo-ui-calendarMonthChip-color
+/// Auto-generates .color--[theme] > variant--solid styles
+/// @param {String} $theme - e.g., default, safe, danger, etc.
+@mixin generate-dodo-ui-calendarMonthChip-color($theme) {
+  &--#{$theme} {
+    .chip:not([disabled]) {
+      background-color: var(--dodo-ui-CalendarMonthChip-#{$theme}-bg);
+
+      &:hover {
+        background-color: var(--dodo-ui-CalendarMonthChip-#{$theme}-hover-bg);
+      }
+
+      &:active {
+        background-color: var(--dodo-ui-CalendarMonthChip-#{$theme}-active-bg);
+      }
+    }
+
+    &.today {
+      .chip:not([disabled]) {
+        background-color: var(--dodo-ui-CalendarMonthChip-today-#{$theme}-bg);
+
+        &:hover {
+          background-color: var(--dodo-ui-CalendarMonthChip-today-#{$theme}-hover-bg);
+        }
+
+        &:active {
+          background-color: var(--dodo-ui-CalendarMonthChip-today-#{$theme}-active-bg);
+        }
+      }
+    }
+
+    &.selected {
+      .chip:not([disabled]) {
+        color: var(--dodo-color-constant-white);
+        background-color: var(--dodo-ui-CalendarMonthChip-selected-#{$theme}-bg);
+
+        &:hover {
+          background-color: var(--dodo-ui-CalendarMonthChip-selected-#{$theme}-hover-bg);
+        }
+
+        &:active {
+          background-color: var(--dodo-ui-CalendarMonthChip-selected-#{$theme}-active-bg);
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,41 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import CalendarMonthList from './CalendarMonthList.svelte';
+import { componentColorArray } from '../../../../../../types/colors.js';
+import { componentSizeArray } from '../../../../../../types/size.js';
+export const storyCalendarMonthListArgTypes = {
+    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: CalendarMonthList,
+    tags: ['autodocs'],
+    argTypes: storyCalendarMonthListArgTypes,
+    args: {
+        value: 'jan',
+    },
+});
+</script>
+
+<!-- Default CalendarMonthList -->
+<Story name="Default" />
+
+<Story
+  name="DisabledMonths"
+  args={{
+    disabledMonths: ['feb', 'jul'],
+  }}
+/>
+
+<Story
+  name="HideControls"
+  args={{
+    showControls: false,
+  }}
+/>

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

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

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

@@ -0,0 +1,64 @@
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts">import { calendarMonthOptions, } from '../CalendarControls/CalendarMonthSelector/CalendarMonthSelector.svelte';
+import CalendarMonthChip from './CalendarMonthChip/CalendarMonthChip.svelte';
+import { Button } from '../../../../../../index.js';
+import Icon from '@iconify/svelte';
+let { class: className = '', ref = $bindable(), value, disabledMonths = [], onselect, calendarMonthChipProps, size = 'normal', color, customCalendarMonthChipContent, customCalendarMonthChip, oncancel, showControls = true, } = $props();
+</script>
+
+<div class={['dodo-ui-CalendarMonthList', `size--${size}`, className].join(' ')} bind:this={ref}>
+  {#if showControls}
+    <div class="Controls">
+      <Button {size} {color} variant="text" name="BackButton" onclick={oncancel} roundness={2}>
+        {#snippet before()}
+          <Icon icon="material-symbols:arrow-back-rounded" width="24" height="24" />
+        {/snippet}
+
+        Back
+      </Button>
+    </div>
+  {/if}
+
+  <ul>
+    {#each calendarMonthOptions as month (month.value)}
+      <CalendarMonthChip
+        value={month.abr3}
+        selected={value === month.abr3 ? true : false}
+        disabled={disabledMonths.includes(month.abr3)}
+        {onselect}
+        {size}
+        {color}
+        {customCalendarMonthChipContent}
+        {customCalendarMonthChip}
+        {...calendarMonthChipProps}
+      />
+    {/each}
+  </ul>
+</div>
+
+<style>.dodo-ui-CalendarMonthList {
+  user-select: none;
+}
+.dodo-ui-CalendarMonthList ul {
+  margin: 0;
+  padding: 0;
+  flex-wrap: wrap;
+  display: inline-flex;
+}
+.dodo-ui-CalendarMonthList :global(.dodo-ui-CalendarMonthChip) {
+  width: 33.333%;
+}
+.dodo-ui-CalendarMonthList .Controls {
+  margin-bottom: calc(var(--dodo-ui-space) * 2);
+}
+.dodo-ui-CalendarMonthList.size--normal {
+  width: calc(var(--dodo-ui-element-height-normal) * 7);
+}
+.dodo-ui-CalendarMonthList.size--small {
+  width: calc(var(--dodo-ui-element-height-small) * 7);
+}
+.dodo-ui-CalendarMonthList.size--large {
+  width: calc(var(--dodo-ui-element-height-large) * 7);
+}</style>

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

@@ -0,0 +1,35 @@
+import type { ButtonClickEvent } from '../../../../Form/Button/Button.svelte';
+export interface CalendarMonthListProps {
+    /** CalendarMonthList ref */
+    ref?: HTMLDivElement;
+    /** Custom css class */
+    class?: string;
+    /** Selcted month Value */
+    value?: CalendarMonthNames;
+    /** onselect event handler */
+    onselect?: (value: CalendarMonthNames, e: ButtonClickEvent) => void;
+    /** oncancel event handler */
+    oncancel?: (e: ButtonClickEvent) => void;
+    /** Custom Calendar Chip Content */
+    customCalendarMonthChipContent?: (value: CalendarMonthNames) => Snippet;
+    /** Custom Calendar Chip */
+    customCalendarMonthChip?: (value: CalendarMonthNames) => Snippet;
+    /** How large should the Component be? */
+    size?: ComponentSize;
+    /** What color to use? */
+    color?: ComponentColor;
+    /** disabled Months */
+    disabledMonths?: CalendarMonthNames[];
+    /** calendarMonthChipProps: calendarMonthChip component props */
+    calendarMonthChipProps?: Partial<CalendarMonthChipProps>;
+    /** show controls */
+    showControls?: boolean;
+}
+import type { ComponentColor } from '../../../../../../types/colors.js';
+import type { Snippet } from 'svelte';
+import type { ComponentSize } from '../../../../../../types/size.js';
+import { type CalendarMonthNames } from '../CalendarControls/CalendarMonthSelector/CalendarMonthSelector.svelte';
+import type { CalendarMonthChipProps } from './CalendarMonthChip/CalendarMonthChip.svelte';
+declare const CalendarMonthList: import("svelte").Component<CalendarMonthListProps, {}, "ref">;
+type CalendarMonthList = ReturnType<typeof CalendarMonthList>;
+export default CalendarMonthList;

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

@@ -0,0 +1,22 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import CalendarMonthList from '../CalendarMonthList.svelte';
+  import { storyCalendarMonthListArgTypes } from '../CalendarMonthList.stories.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: CalendarMonthList,
+    tags: ['autodocs'],
+    argTypes: storyCalendarMonthListArgTypes,
+    args: {
+      value: 'jan',
+    },
+  });
+</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/CalendarMonthList/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/CalendarMonthList/Customize/Customize.stories.svelte

@@ -0,0 +1,34 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import CalendarMonthList from '../CalendarMonthList.svelte';
+import { storyCalendarMonthListArgTypes } from '../CalendarMonthList.stories.svelte';
+import { Button } from '../../../../../../../index.js';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: CalendarMonthList,
+    tags: ['autodocs'],
+    argTypes: storyCalendarMonthListArgTypes,
+    args: {
+        value: 'jan',
+    },
+});
+</script>
+
+<Story name="Default" />
+
+<Story name="customCalendarMonthChipContent" asChild>
+  <CalendarMonthList value="jan">
+    {#snippet customCalendarMonthChipContent(val)}
+      🗓️{val}
+    {/snippet}
+  </CalendarMonthList>
+</Story>
+
+<Story name="customCalendarMonthChip" asChild>
+  <CalendarMonthList value="jan">
+    {#snippet customCalendarMonthChip(val)}
+      <Button size="small" variant="text" outline>
+        {val}
+      </Button>
+    {/snippet}
+  </CalendarMonthList>
+</Story>

package/dist/stories/components/Info/Calendar/SubComponents/CalendarMonthList/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/CalendarMonthList/Events/Events.stories.svelte

@@ -0,0 +1,29 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import CalendarMonthList from '../CalendarMonthList.svelte';
+import { storyCalendarMonthListArgTypes } from '../CalendarMonthList.stories.svelte';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: CalendarMonthList,
+    tags: ['autodocs'],
+    argTypes: storyCalendarMonthListArgTypes,
+});
+let value = $state('jan');
+</script>
+
+<Story name="Select" asChild>
+  <CalendarMonthList
+    {value}
+    onselect={(val) => {
+      value = val;
+    }}
+  />
+</Story>
+
+<Story name="Cancel" asChild>
+  <CalendarMonthList
+    {value}
+    oncancel={() => {
+      console.log('oncancel');
+    }}
+  />
+</Story>

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

@@ -1,14 +1,16 @@
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
-  import TextInput from '../TextInput.svelte';
-  import { storyTextInputArgTypes } from '../TextInput.stories.svelte';
+  import CalendarMonthList from '../CalendarMonthList.svelte';
+  import { storyCalendarMonthListArgTypes } from '../CalendarMonthList.stories.svelte';
 
   // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
   const { Story } = defineMeta({
-    component: TextInput,
+    component: CalendarMonthList,
     tags: ['autodocs'],
-    argTypes: storyTextInputArgTypes,
-    args: { value: 'Hello world!' },
+    argTypes: storyCalendarMonthListArgTypes,
+    args: {
+      value: 'jan',
+    },
   });
 </script>
 

package/dist/stories/components/Info/Calendar/SubComponents/CalendarMonthList/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/CalendarYearList/CalendarYearChip/CalendarYearChip.stories.svelte

@@ -0,0 +1,37 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import CalendarYearChip from './CalendarYearChip.svelte';
+import { componentColorArray } from '../../../../../../../types/colors.js';
+import { componentSizeArray } from '../../../../../../../types/size.js';
+import { componentRoundnessArray } from '../../../../../../../types/roundness.js';
+import getMoment from '../../../../../../developer tools/helpers/Time/getMoment/getMoment.js';
+export const storyCalendarYearChipArgTypes = {
+    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: CalendarYearChip,
+    tags: ['autodocs'],
+    argTypes: storyCalendarYearChipArgTypes,
+    args: {
+        value: getMoment(undefined, undefined, { utc: true }).format('YYYY'),
+    },
+});
+</script>
+
+<!-- Default CalendarYearChip -->
+<Story name="Default" />
+
+<Story name="Selected" args={{ selected: true }} />
+
+<Story name="Disabled" args={{ disabled: true }} />

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

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