@flightlesslabs/dodo-ui 0.19.1 → 0.20.0

package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarControls.svelte

@@ -1,271 +0,0 @@
-<script lang="ts" module>
-  export interface CalendarControlsProps {
-    /** CalendarControls ref */
-    ref?: HTMLDivElement;
-    /** Custom css class */
-    class?: string;
-    /** Selcted date Value */
-    value?: Date;
-    /** Define active month to override month 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;
-    /** Show Month Selector */
-    showCalendarMonthSelector?: boolean;
-    /** Show Year Selector */
-    showCalendarYearSelector?: boolean;
-    /** Show Navigator */
-    showCalendarNavigator?: boolean;
-    /** Custom Calendar Controls */
-    customCalendarControls?: () => Snippet;
-    /** 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;
-  }
-</script>
-
-<script lang="ts">
-  import type { ComponentColor } from '$lib/types/colors.js';
-  import type { ComponentSize } from '$lib/types/size.js';
-  import type { Snippet } from 'svelte';
-  import type {
-    CalendarMonthOption,
-    CalendarMonthSelectorProps,
-  } from './CalendarMonthSelector/CalendarMonthSelector.svelte';
-  import CalendarMonthSelector from './CalendarMonthSelector/CalendarMonthSelector.svelte';
-  import type { ButtonClickEvent } from '$lib/stories/components/Form/Button/Button.svelte';
-  import CalendarYearSelector, {
-    type CalendarYearSelectorProps,
-  } from './CalendarYearSelector/CalendarYearSelector.svelte';
-  import type { MouseEventHandler } from 'svelte/elements';
-  import { CalendarNavigation, getMoment } from '$lib/index.js';
-
-  let {
-    class: className = '',
-    ref = $bindable<HTMLDivElement>(),
-    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,
-  }: CalendarControlsProps = $props();
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  let customCalendarControlsTyped = customCalendarControlsInternal as any;
-
-  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 lang="scss">
-  .dodo-ui-CalendarControls {
-    display: flex;
-    align-items: center;
-    margin-bottom: calc(var(--dodo-ui-space) * 2);
-
-    &:empty {
-      display: none;
-    }
-
-    h3 {
-      font-weight: 400;
-      margin: 0;
-      letter-spacing: 0.3px;
-      font-family: inherit;
-      color: var(--dodo-color-neutral-800);
-      text-align: center;
-    }
-
-    &.size {
-      &--normal {
-        margin-bottom: calc(var(--dodo-ui-space-large) * 2);
-
-        .periodControls {
-          margin: 0 calc(calc(var(--dodo-ui-space) / 2) * -1);
-          :global(.dodo-ui-Button) {
-            margin: 0 calc(var(--dodo-ui-space) / 2);
-          }
-        }
-
-        h3 {
-          font-size: 1rem;
-          margin: 0 calc(var(--dodo-ui-space) / 2);
-        }
-      }
-
-      &--small {
-        margin-bottom: calc(var(--dodo-ui-space) * 2);
-
-        .periodControls {
-          margin: 0 calc(calc(var(--dodo-ui-space-small) / 2) * -1);
-          :global(.dodo-ui-Button) {
-            margin: 0 calc(var(--dodo-ui-space-small) / 2);
-          }
-        }
-
-        h3 {
-          font-size: 0.9rem;
-          margin: 0 calc(var(--dodo-ui-space-small) / 2);
-        }
-      }
-
-      &--large {
-        margin-bottom: calc(var(--dodo-ui-space) * 3);
-
-        .periodControls {
-          margin: 0 calc(calc(var(--dodo-ui-space-large) / 2) * -1);
-          :global(.dodo-ui-Button) {
-            margin: 0 calc(var(--dodo-ui-space-large) / 2);
-          }
-        }
-
-        h3 {
-          font-size: 1.1rem;
-          margin: 0 calc(var(--dodo-ui-space-large) / 2);
-        }
-      }
-    }
-
-    .periodControls {
-      display: flex;
-      align-items: center;
-
-      &:empty {
-        display: none;
-      }
-    }
-
-    .navigationControls {
-      display: flex;
-      align-items: center;
-      margin-left: auto;
-
-      &:empty {
-        display: none;
-      }
-    }
-  }
-</style>

package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/CalendarMonthSelector.svelte

@@ -1,199 +0,0 @@
-<script lang="ts" module>
-  import type { ComponentColor } from '$lib/types/colors.js';
-  import type { ComponentSize } from '$lib/types/size.js';
-
-  import type {
-    ButtonClickEvent,
-    ButtonProps,
-  } from '$lib/stories/components/Form/Button/Button.svelte';
-  import { MONTHS } from '../../../utils/types.js';
-  import getMoment from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
-  import { Button, type ComponentRoundness } from '$lib/index.js';
-  import type { Snippet } from 'svelte';
-  import Icon from '@iconify/svelte';
-
-  export type CalendarMonthNames =
-    | 'jan'
-    | 'feb'
-    | 'mar'
-    | 'apr'
-    | 'may'
-    | 'jun'
-    | 'jul'
-    | 'aug'
-    | 'sep'
-    | 'oct'
-    | 'nov'
-    | 'dec';
-
-  export type CalendarMonthOption = {
-    value: MONTHS;
-    abr3: CalendarMonthNames;
-    fullName: string;
-  };
-
-  export const calendarMonthOptions: CalendarMonthOption[] = [
-    { value: MONTHS.JAN, abr3: 'jan', fullName: 'January' },
-    { value: MONTHS.FEB, abr3: 'feb', fullName: 'February' },
-    { value: MONTHS.MAR, abr3: 'mar', fullName: 'March' },
-    { value: MONTHS.APR, abr3: 'apr', fullName: 'April' },
-    { value: MONTHS.MAY, abr3: 'may', fullName: 'May' },
-    { value: MONTHS.JUN, abr3: 'jun', fullName: 'June' },
-    { value: MONTHS.JUL, abr3: 'jul', fullName: 'July' },
-    { value: MONTHS.AUG, abr3: 'aug', fullName: 'August' },
-    { value: MONTHS.SEP, abr3: 'sep', fullName: 'September' },
-    { value: MONTHS.OCT, abr3: 'oct', fullName: 'October' },
-    { value: MONTHS.NOV, abr3: 'nov', fullName: 'November' },
-    { value: MONTHS.DEC, abr3: 'dec', fullName: 'December' },
-  ];
-
-  export type calendarMonthNameType = 'abr3' | 'fullName';
-
-  export interface CalendarMonthSelectorProps {
-    /** CalendarMonthSelector ref */
-    ref?: HTMLDivElement;
-    /** Custom css class */
-    class?: string;
-    /** Selcted date Value */
-    value?: Date;
-    /** Define active month to override month 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>;
-    /**  month Name type */
-    nameType?: calendarMonthNameType;
-    /** The onclick event handler */
-    onclick?: (option: CalendarMonthOption, e: ButtonClickEvent) => void;
-    /** Custom MonthSelector */
-    customCalendarMonthSelector?: (option: CalendarMonthOption) => Snippet;
-    /** Custom MonthSelector Content */
-    customCalendarMonthSelectorContent?: (option: CalendarMonthOption) => Snippet;
-    /** Button disabled state */
-    disabled?: boolean;
-    /** How round should the border radius be? */
-    roundness?: ComponentRoundness;
-  }
-</script>
-
-<script lang="ts">
-  let {
-    class: className = '',
-    ref = $bindable<HTMLDivElement>(),
-    value,
-    timezone,
-    utc,
-    activeMonth,
-    size,
-    color,
-    buttonProps,
-    nameType,
-    onclick,
-    disabled,
-    roundness = 2,
-    customCalendarMonthSelector: customCalendarMonthSelectorInternal,
-    customCalendarMonthSelectorContent: customCalendarMonthSelectorContentInternal,
-  }: CalendarMonthSelectorProps = $props();
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  let customCalendarMonthSelectorTyped = customCalendarMonthSelectorInternal as any;
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  let customCalendarMonthSelectorContentTyped = customCalendarMonthSelectorContentInternal as any;
-
-  let selectedMonth = $derived<string | undefined>(
-    getMoment(activeMonth || value, undefined, {
-      timezone,
-      utc,
-    })
-      .format('MMM')
-      .toLocaleLowerCase(),
-  );
-
-  const monthDetails = $derived(
-    calendarMonthOptions.find((item) => item.abr3 === selectedMonth) || calendarMonthOptions[0],
-  );
-
-  function onClickMod(e: ButtonClickEvent) {
-    if (onclick) {
-      onclick(monthDetails, e);
-    }
-  }
-</script>
-
-{#snippet monthName(option: CalendarMonthOption)}
-  {#if customCalendarMonthSelectorContentTyped}
-    {@render customCalendarMonthSelectorContentTyped(option)}
-  {:else if nameType === 'abr3'}
-    {option.abr3}
-  {:else if nameType === 'fullName'}
-    {option.fullName}
-  {:else}
-    {option.abr3}
-  {/if}
-{/snippet}
-
-<div
-  class={['dodo-ui-CalendarMonthSelector', `size--${size}`, `color--${color}`, className].join(' ')}
-  bind:this={ref}
->
-  <Button
-    name="month-selector"
-    variant="text"
-    {color}
-    {disabled}
-    {roundness}
-    onclick={onClickMod}
-    {size}
-    {...buttonProps}
-  >
-    {#if customCalendarMonthSelectorTyped}
-      {@render customCalendarMonthSelectorTyped(monthDetails)}
-    {:else}
-      {@render monthName(monthDetails)}
-    {/if}
-
-    {#snippet after()}
-      <Icon icon="material-symbols:arrow-drop-down-rounded" width="24" height="24" />
-    {/snippet}
-  </Button>
-</div>
-
-<style lang="scss">
-  .dodo-ui-CalendarMonthSelector {
-    :global(.dodo-ui-Button) {
-      text-transform: capitalize;
-    }
-
-    :global(.dodo-ui-Button .content--after) {
-      margin-left: auto;
-    }
-
-    &.size {
-      &--normal {
-        :global(.dodo-ui-Button) {
-          width: 80px;
-        }
-      }
-
-      &--small {
-        :global(.dodo-ui-Button) {
-          width: 70px;
-        }
-      }
-
-      &--large {
-        :global(.dodo-ui-Button) {
-          width: 100px;
-        }
-      }
-    }
-  }
-</style>

package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarNavigation/CalendarNavigation.svelte

@@ -1,128 +0,0 @@
-<script lang="ts" module>
-  import type { ComponentColor } from '$lib/types/colors.js';
-  import type { ComponentSize } from '$lib/types/size.js';
-  import type { ButtonProps } from '$lib/stories/components/Form/Button/Button.svelte';
-  import type { Snippet } from 'svelte';
-  import type { MouseEventHandler } from 'svelte/elements';
-  import NavigationButton from './NavigationButton.svelte';
-  import Icon from '@iconify/svelte';
-
-  export interface CalendarNavigationProps {
-    /** CalendarNavigation 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>;
-    /** 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;
-  }
-</script>
-
-<script lang="ts">
-  let {
-    class: className = '',
-    ref = $bindable<HTMLDivElement>(),
-    size = 'normal',
-    color,
-    buttonProps,
-    onCalendarNavigationNextClick,
-    onCalendarNavigationPrevClick,
-    disabledCalendarNavigationNext,
-    disabledCalendarNavigationPrev,
-    customCalendarNavigation: customCalendarNavigationInternal,
-    customCalendarNavigationNext,
-    customCalendarNavigationPrev,
-    customCalendarNavigationNextContent,
-    customCalendarNavigationPrevContent,
-  }: CalendarNavigationProps = $props();
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  let customCalendarNavigationTyped = customCalendarNavigationInternal as any;
-</script>
-
-<div
-  class={['dodo-ui-CalendarNavigation', `size--${size}`, `color--${color}`, className].join(' ')}
-  bind:this={ref}
->
-  {#if customCalendarNavigationTyped}
-    {@render customCalendarNavigationTyped()}
-  {:else}
-    <NavigationButton
-      name="prev"
-      {size}
-      {color}
-      {buttonProps}
-      onclick={onCalendarNavigationPrevClick}
-      disabled={disabledCalendarNavigationPrev}
-      customNavigationButton={customCalendarNavigationPrev}
-      customNavigationButtonContent={customCalendarNavigationPrevContent}
-    >
-      <Icon icon="material-symbols:navigate-before" width="24" height="24" />
-    </NavigationButton>
-    <NavigationButton
-      name="next"
-      {size}
-      {color}
-      {buttonProps}
-      onclick={onCalendarNavigationNextClick}
-      disabled={disabledCalendarNavigationNext}
-      customNavigationButton={customCalendarNavigationNext}
-      customNavigationButtonContent={customCalendarNavigationNextContent}
-    >
-      <Icon icon="material-symbols:navigate-next" width="24" height="24" />
-    </NavigationButton>
-  {/if}
-</div>
-
-<style lang="scss">
-  .dodo-ui-CalendarNavigation {
-    display: flex;
-
-    &.size {
-      &--normal {
-        margin: 0 calc(calc(var(--dodo-ui-space) / 2) * -1);
-
-        :global(.NavigationButton) {
-          margin: 0 calc(var(--dodo-ui-space) / 2);
-        }
-      }
-
-      &--small {
-        margin: 0 calc(calc(var(--dodo-ui-space-small) / 2) * -1);
-
-        :global(.NavigationButton) {
-          margin: 0 calc(var(--dodo-ui-space-small) / 2);
-        }
-      }
-
-      &--large {
-        margin: calc(calc(var(--dodo-ui-space-large) / 2) * -1);
-
-        :global(.NavigationButton) {
-          margin: 0 calc(var(--dodo-ui-space-large) / 2);
-        }
-      }
-    }
-  }
-</style>

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

@@ -1,85 +0,0 @@
-<script lang="ts">
-  import Button, { type ButtonProps } from '$lib/stories/components/Form/Button/Button.svelte';
-  import type { ComponentColor } from '$lib/types/colors.js';
-  import type { ComponentSize } from '$lib/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;
-  }
-
-  let {
-    class: className = '',
-    children,
-    name,
-    ref = $bindable<HTMLDivElement>(),
-    size,
-    color,
-    buttonProps,
-    onclick,
-    disabled,
-    customNavigationButton: customNavigationButtonInternal,
-    customNavigationButtonContent: customNavigationButtonContentInternal,
-  }: NavigationButtonProps = $props();
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  let customNavigationButtonTyped = customNavigationButtonInternal as any;
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  let customNavigationButtonContentTyped = customNavigationButtonContentInternal as any;
-</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 lang="scss">
-  .NavigationButton {
-    display: inline-flex;
-  }
-</style>