@flightlesslabs/dodo-ui 0.9.0 → 0.10.0

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

@@ -0,0 +1,50 @@
+<script lang="ts">let { class: className = '', customCalendarWeekContent: customCalendarWeekContentInternal, nameType = 'abr2', size = 'normal', weekendDays, weekOption, } = $props();
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let customCalendarWeekContentTyped = customCalendarWeekContentInternal;
+const weekend = weekendDays?.includes(weekOption.abr3) ? true : false;
+export {};
+</script>
+
+{#snippet weekName(option: CalendarWeekOption)}
+  {#if nameType === 'abr3'}
+    {option.abr3}
+  {:else if nameType === 'abr1'}
+    {option.abr1}
+  {:else if nameType === 'abr2'}
+    {option.abr2}
+  {:else}
+    {option.abr2}
+  {/if}
+{/snippet}
+
+<li class:weekend class={['WeekDay', `size--${size}`, className].join(' ')}>
+  {#if customCalendarWeekContentTyped}
+    {@render customCalendarWeekContentTyped(weekOption)}
+  {:else}
+    {@render weekName(weekOption)}
+  {/if}
+</li>
+
+<style>.WeekDay {
+  display: inline-flex;
+  justify-content: center;
+  font-family: inherit;
+  color: inherit;
+  text-transform: capitalize;
+  color: var(--dodo-color-neutral-700);
+}
+.WeekDay.size--normal {
+  font-size: 0.8rem;
+  width: var(--dodo-ui-element-height-normal);
+}
+.WeekDay.size--small {
+  font-size: 0.74rem;
+  width: var(--dodo-ui-element-height-small);
+}
+.WeekDay.size--large {
+  font-size: 1rem;
+  width: var(--dodo-ui-element-height-large);
+}
+.WeekDay.weekend {
+  color: var(--dodo-color-danger-600);
+}</style>

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

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+import type { ComponentSize } from '../../../../../../../types/size.js';
+import type { CalendarWeekOption, CalendarWeekNames, CalendarWeekDayNameType } from './CalendarWeek.svelte';
+interface WeekDayProps {
+    /** Custom css class */
+    class?: string;
+    /** Custom Calendar Week Content */
+    customCalendarWeekContent?: (option: CalendarWeekOption) => Snippet;
+    /**  Day Name type */
+    nameType?: CalendarWeekDayNameType;
+    /** weekOption */
+    weekOption: CalendarWeekOption;
+    /** How large should the component be? */
+    size?: ComponentSize;
+    /** Weekend days */
+    weekendDays?: CalendarWeekNames[];
+}
+declare const WeekDay: import("svelte").Component<WeekDayProps, {}, "">;
+type WeekDay = ReturnType<typeof WeekDay>;
+export default WeekDay;

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

@@ -0,0 +1,23 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import CalendarDatesChart from '../CalendarDatesChart.svelte';
+  import { storyCalendarDatesChartArgTypes } from '../CalendarDatesChart.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: CalendarDatesChart,
+    tags: ['autodocs'],
+    argTypes: storyCalendarDatesChartArgTypes,
+    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/CalendarDatesChart/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/CalendarDatesChart/Customize/Customize.stories.svelte

@@ -0,0 +1,66 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import CalendarDatesChart from '../CalendarDatesChart.svelte';
+import { storyCalendarDatesChartArgTypes } from '../CalendarDatesChart.stories.svelte';
+import { Button, getMoment } from '../../../../../../../index.js';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: CalendarDatesChart,
+    tags: ['autodocs'],
+    argTypes: storyCalendarDatesChartArgTypes,
+    args: {
+        value: getMoment().toDate(),
+    },
+});
+</script>
+
+<Story name="Default" />
+
+<Story
+  name="WeekNameSingleLetter"
+  args={{
+    weekDayNameType: 'abr1',
+  }}
+/>
+
+<Story
+  name="WeekNameThreeLetters"
+  args={{
+    weekDayNameType: 'abr3',
+  }}
+/>
+
+<Story name="customCalendarDateChipContent" asChild>
+  <CalendarDatesChart value={getMoment().toDate()}>
+    {#snippet customCalendarDateChipContent(dayOfMonth)}
+      🗓️{Number(getMoment(dayOfMonth.date).format('D'))}
+    {/snippet}
+  </CalendarDatesChart>
+</Story>
+
+<Story name="customCalendarDateChip" asChild>
+  <CalendarDatesChart value={getMoment().toDate()}>
+    {#snippet customCalendarDateChip(dayOfMonth)}
+      <Button size="small" variant="text" outline>
+        {Number(getMoment(dayOfMonth.date).format('D'))}
+      </Button>
+    {/snippet}
+  </CalendarDatesChart>
+</Story>
+
+<Story name="customCalendarWeekContent" asChild>
+  <CalendarDatesChart value={getMoment().toDate()}>
+    {#snippet customCalendarWeekContent(option)}
+      ☀️{option.abr1}
+    {/snippet}
+  </CalendarDatesChart>
+</Story>
+
+<Story name="customCalendarWeek" asChild>
+  <CalendarDatesChart value={getMoment().toDate()}>
+    {#snippet customCalendarWeek(option)}
+      <li style="color: blue; display: block;">
+        {option.abr3}
+      </li>
+    {/snippet}
+  </CalendarDatesChart>
+</Story>

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

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

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

@@ -0,0 +1,21 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import CalendarDatesChart from '../CalendarDatesChart.svelte';
+import { storyCalendarDatesChartArgTypes } from '../CalendarDatesChart.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: CalendarDatesChart,
+    tags: ['autodocs'],
+    argTypes: storyCalendarDatesChartArgTypes,
+});
+let value = $state(getMoment().toDate());
+</script>
+
+<Story name="Select" asChild>
+  <CalendarDatesChart
+    {value}
+    onselect={(val) => {
+      value = val;
+    }}
+  />
+</Story>

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

@@ -0,0 +1,20 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import CalendarDatesChart from '../CalendarDatesChart.svelte';
+  import { storyCalendarDatesChartArgTypes } from '../CalendarDatesChart.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: CalendarDatesChart,
+    tags: ['autodocs'],
+    argTypes: storyCalendarDatesChartArgTypes,
+    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/CalendarDatesChart/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/CalendarMonthChip.stories.svelte

@@ -0,0 +1,36 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import CalendarMonthChip from './CalendarMonthChip.svelte';
+import { componentColorArray } from '../../../../../../../types/colors.js';
+import { componentSizeArray } from '../../../../../../../types/size.js';
+import { componentRoundnessArray } from '../../../../../../../types/roundness.js';
+export const storyCalendarMonthChipArgTypes = {
+    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: CalendarMonthChip,
+    tags: ['autodocs'],
+    argTypes: storyCalendarMonthChipArgTypes,
+    args: {
+        value: 'jan',
+    },
+});
+</script>
+
+<!-- Default CalendarMonthChip -->
+<Story name="Default" />
+
+<Story name="Selected" args={{ selected: true }} />
+
+<Story name="Disabled" args={{ disabled: true }} />

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

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