@flightlesslabs/dodo-ui 0.9.1 → 0.10.0

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

@@ -0,0 +1,148 @@
+<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 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 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;
+  }
+</script>
+
+<script lang="ts">
+  let {
+    class: className = '',
+    ref = $bindable<HTMLDivElement>(),
+    value,
+    timezone,
+    utc,
+    activeMonth,
+    size,
+    color,
+    buttonProps,
+    onclick,
+    disabled,
+    roundness = 2,
+    customCalendarYearSelector: customCalendarYearSelectorInternal,
+    customCalendarYearSelectorContent: customCalendarYearSelectorContentInternal,
+  }: CalendarYearSelectorProps = $props();
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let customCalendarYearSelectorTyped = customCalendarYearSelectorInternal as any;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let customCalendarYearSelectorContentTyped = customCalendarYearSelectorContentInternal as any;
+
+  const selectedYear = $derived(
+    getMoment(activeMonth || value, undefined, {
+      timezone,
+      utc,
+    }).format('YYYY'),
+  );
+
+  function onClickMod(e: ButtonClickEvent) {
+    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 lang="scss">
+  .dodo-ui-CalendarYearSelector {
+    :global(.dodo-ui-Button) {
+      text-transform: capitalize;
+    }
+
+    :global(.dodo-ui-Button .content--after) {
+      margin-left: auto;
+    }
+
+    &.size {
+      &--normal {
+        :global(.dodo-ui-Button) {
+          width: 85px;
+        }
+      }
+
+      &--small {
+        :global(.dodo-ui-Button) {
+          width: 75px;
+        }
+      }
+
+      &--large {
+        :global(.dodo-ui-Button) {
+          width: 105px;
+        }
+      }
+    }
+  }
+</style>

package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/CalendarDateChip.svelte

@@ -0,0 +1,296 @@
+<script lang="ts" module>
+  export interface CalendarDateChipProps {
+    /** CalendarDatesChart ref */
+    ref?: HTMLLIElement;
+    /** Custom css class */
+    class?: string;
+    /** Day Of Month */
+    dayOfMonth: DateOfMonth;
+    /** How round should the border radius be? */
+    roundness?: ComponentRoundness;
+    /** What color to use? */
+    color?: ComponentColor;
+    /** Show last month dates */
+    showLastMonth?: boolean;
+    /** Show next month dates */
+    showNextMonth?: boolean;
+    /** Show Today */
+    showToday?: boolean;
+    /** Is Date Selected */
+    selected?: boolean;
+    /** onselect event handler */
+    onselect?: (value: Date, dayOfMonth: DateOfMonth, e: ButtonClickEvent) => void;
+    /** onselectRange event handler */
+    onselectRange?: (
+      value: Date,
+      type: DateRangeType,
+      dayOfMonth: DateOfMonth,
+      e: ButtonClickEvent,
+    ) => void;
+    /** Custom Calendar Chip Content */
+    customCalendarDateChipContent?: (dayOfMonth: DateOfMonth) => Snippet;
+    /** Custom Calendar Chip Content */
+    customCalendarDateChip?: (dayOfMonth: DateOfMonth) => Snippet;
+    /** How large should the Calendar Chip be? */
+    size?: ComponentSize;
+    /** Weekend days */
+    weekend?: boolean;
+    /** Timezone string (e.g., "America/New_York"). */
+    timezone?: string;
+    /** Whether to return the time in UTC. If true, overrides timezone. */
+    utc?: boolean;
+
+    /** Show Value Range */
+    showValueRange?: boolean;
+    /** Date Range Type */
+    rangeType?: DateRangeType;
+  }
+</script>
+
+<script lang="ts">
+  import getMoment from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
+  import type { ComponentColor } from '$lib/types/colors.js';
+
+  import type { ComponentRoundness } from '$lib/types/roundness.js';
+  import type { Snippet } from 'svelte';
+  import type { ButtonClickEvent } from '$lib/stories/components/Form/Button/Button.svelte';
+  import type { ComponentSize } from '$lib/types/size.js';
+  import type { DateOfMonth, DateRangeType } from '../../../utils/types.js';
+
+  let {
+    class: className = '',
+    dayOfMonth,
+    roundness = 1,
+    showLastMonth = true,
+    showNextMonth = true,
+    selected = false,
+    showToday = true,
+    color = 'primary',
+    ref = $bindable<HTMLLIElement>(),
+    customCalendarDateChipContent: customCalendarDateChipContentInternal,
+    customCalendarDateChip: customCalendarDateChipInternal,
+    onselect,
+    onselectRange,
+    size = 'normal',
+    weekend,
+    timezone,
+    utc,
+    showValueRange = false,
+    rangeType,
+  }: CalendarDateChipProps = $props();
+
+  const dayNumber = Number(getMoment(dayOfMonth.date, undefined, { timezone, utc }).format('D'));
+  const disabled = dayOfMonth.disabled || false;
+  const today = showToday && dayOfMonth.today ? true : false;
+  const isRangeStart = rangeType === 'start' || false;
+  const isRangeEnd = rangeType === 'end' || false;
+  const inRange = dayOfMonth.inRange || false;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let customCalendarDateChipContentTyped = customCalendarDateChipContentInternal as any;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let customCalendarDateChipTyped = customCalendarDateChipInternal as any;
+
+  function onselectMod(e: ButtonClickEvent) {
+    if (showValueRange && onselectRange) {
+      onselectRange(dayOfMonth.date, rangeType || 'start', dayOfMonth, e);
+    } else if (onselect) {
+      onselect(dayOfMonth.date, dayOfMonth, e);
+    }
+  }
+</script>
+
+{#snippet chipContent()}
+  {#if customCalendarDateChipTyped}
+    {@render customCalendarDateChipTyped(dayOfMonth)}
+  {:else}
+    <button class="chip" {disabled} onclick={onselectMod}>
+      {#if customCalendarDateChipContentTyped}
+        {@render customCalendarDateChipContentTyped(dayOfMonth)}
+      {:else}
+        {dayNumber}
+      {/if}
+    </button>
+  {/if}
+{/snippet}
+
+<li
+  class:disabled
+  class:showLastMonth
+  class:showNextMonth
+  class:today
+  class:selected
+  class:isRangeStart
+  class:isRangeEnd
+  class:inRange
+  class:weekend
+  class={[
+    'dodo-ui-CalendarDateChip',
+    `roundness--${roundness}`,
+    `color--${color}`,
+    `size--${size}`,
+    `${dayOfMonth.isCurrentMonth ? 'isCurrentMonth' : 'isNotCurrentMonth'}`,
+    `${dayOfMonth.isLastMonth ? 'isLastMonth' : ''}`,
+    `${dayOfMonth.isNextMonth ? 'isNextMonth' : ''}`,
+    className,
+  ].join(' ')}
+  bind:this={ref}
+>
+  {#if dayOfMonth.isCurrentMonth}
+    {@render chipContent()}
+  {:else if dayOfMonth.isLastMonth && showLastMonth}
+    {@render chipContent()}
+  {:else if dayOfMonth.isNextMonth && showNextMonth}
+    {@render chipContent()}
+  {/if}
+</li>
+
+<style lang="scss">
+  @use 'utils/scss/mixins.scss' as *;
+
+  :global(:root) {
+    --dodo-ui-CalendarDateChip-disabled-bg: var(--dodo-color-neutral-50);
+    --dodo-ui-CalendarDateChip-disabled-color: var(--dodo-color-neutral-400);
+
+    @include generate-dodo-ui-calendarDateChip-colors(neutral);
+    @include generate-dodo-ui-calendarDateChip-colors(primary);
+    @include generate-dodo-ui-calendarDateChip-colors(secondary);
+    @include generate-dodo-ui-calendarDateChip-colors(safe);
+    @include generate-dodo-ui-calendarDateChip-colors(warning);
+    @include generate-dodo-ui-calendarDateChip-colors(danger);
+  }
+
+  :global(.dodo-theme--dark) {
+    --dodo-ui-CalendarDateChip-disabled-bg: var(--dodo-color-neutral-200);
+    --dodo-ui-CalendarDateChip-disabled-color: var(--dodo-color-neutral-400);
+
+    @include generate-dodo-ui-calendarDateChip-colors-dark(neutral);
+    @include generate-dodo-ui-calendarDateChip-colors-dark(primary);
+    @include generate-dodo-ui-calendarDateChip-colors-dark(secondary);
+    @include generate-dodo-ui-calendarDateChip-colors-dark(safe);
+    @include generate-dodo-ui-calendarDateChip-colors-dark(warning);
+    @include generate-dodo-ui-calendarDateChip-colors-dark(danger);
+  }
+
+  .dodo-ui-CalendarDateChip {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    color: var(--dodo-color-neutral-800);
+    user-select: none;
+
+    &.roundness {
+      &--1 {
+        .chip {
+          border-radius: var(--dodo-ui-element-roundness-1);
+        }
+      }
+
+      &--2 {
+        .chip {
+          border-radius: var(--dodo-ui-element-roundness-2);
+        }
+      }
+
+      &--3 {
+        .chip {
+          border-radius: var(--dodo-ui-element-roundness-3);
+        }
+      }
+
+      &--full {
+        .chip {
+          border-radius: 50%;
+        }
+      }
+    }
+
+    &.size {
+      &--normal {
+        width: var(--dodo-ui-element-height-normal);
+        height: var(--dodo-ui-element-height-normal);
+        font-size: 0.8rem;
+      }
+
+      &--small {
+        width: var(--dodo-ui-element-height-small);
+        height: var(--dodo-ui-element-height-small);
+        font-size: 0.74rem;
+      }
+
+      &--large {
+        width: var(--dodo-ui-element-height-large);
+        height: var(--dodo-ui-element-height-large);
+        font-size: 1rem;
+      }
+    }
+
+    &.isNotCurrentMonth {
+      .chip {
+        opacity: 0.45;
+      }
+    }
+
+    &.today {
+      .chip {
+        font-weight: 600;
+      }
+    }
+
+    &.color {
+      @include generate-dodo-ui-calendarDateChip-color(neutral);
+      @include generate-dodo-ui-calendarDateChip-color(primary);
+      @include generate-dodo-ui-calendarDateChip-color(secondary);
+      @include generate-dodo-ui-calendarDateChip-color(safe);
+      @include generate-dodo-ui-calendarDateChip-color(warning);
+      @include generate-dodo-ui-calendarDateChip-color(danger);
+    }
+
+    &.weekend {
+      .chip {
+        color: var(--dodo-color-danger-600);
+      }
+    }
+
+    .chip {
+      cursor: pointer;
+      outline: none;
+      letter-spacing: 0.3px;
+      transition: all 150ms;
+      text-decoration: none;
+      margin: 0;
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      font-family: inherit;
+      background-color: transparent;
+      transition: all 50ms;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      outline: 0;
+      border: 0;
+      color: inherit;
+      font-size: inherit;
+
+      &[disabled] {
+        cursor: initial;
+        background-color: var(--dodo-ui-CalendarDateChip-disabled-bg);
+        color: var(--dodo-ui-CalendarDateChip-disabled-color);
+
+        &:hover {
+          background-color: var(--dodo-ui-CalendarDateChip-disabled-bg);
+          color: var(--dodo-ui-CalendarDateChip-disabled-color);
+        }
+
+        &:active {
+          background-color: var(--dodo-ui-CalendarDateChip-disabled-bg);
+          color: var(--dodo-ui-CalendarDateChip-disabled-color);
+        }
+      }
+    }
+  }
+</style>

package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/utils/scss/mixins.scss

@@ -0,0 +1,153 @@
+/// Mixin: generate-dodo-ui-calendarDateChip-colors
+/// Generates CSS custom properties for Dodo UI calendarDateChip 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-calendarDateChip-colors($color-name) {
+  --dodo-ui-CalendarDateChip-#{$color-name}-bg: transparent;
+  --dodo-ui-CalendarDateChip-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-100);
+  --dodo-ui-CalendarDateChip-#{$color-name}-active-bg: var(--dodo-color-#{$color-name}-200);
+
+  --dodo-ui-CalendarDateChip-today-#{$color-name}-bg: var(--dodo-color-#{$color-name}-50);
+  --dodo-ui-CalendarDateChip-today-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-100);
+  --dodo-ui-CalendarDateChip-today-#{$color-name}-active-bg: var(--dodo-color-#{$color-name}-200);
+
+  --dodo-ui-CalendarDateChip-selected-#{$color-name}-bg: var(--dodo-color-#{$color-name}-500);
+  --dodo-ui-CalendarDateChip-selected-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-600);
+  --dodo-ui-CalendarDateChip-selected-#{$color-name}-active-bg: var(
+    --dodo-color-#{$color-name}-700
+  );
+}
+
+/// Mixin: generate-dodo-ui-calendarDateChip-colors
+/// Generates CSS custom properties for Dodo UI calendarDateChip 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-calendarDateChip-colors-dark($color-name) {
+  --dodo-ui-CalendarDateChip-#{$color-name}-bg: transparent;
+  --dodo-ui-CalendarDateChip-#{$color-name}-hover-bg: color-mix(
+    in oklab,
+    var(--dodo-color-#{$color-name}-50) 85%,
+    #fff
+  );
+  --dodo-ui-CalendarDateChip-#{$color-name}-active-bg: color-mix(
+    in oklab,
+    var(--dodo-color-#{$color-name}-100) 85%,
+    #fff
+  );
+
+  --dodo-ui-CalendarDateChip-today-#{$color-name}-bg: color-mix(
+    in oklab,
+    var(--dodo-color-#{$color-name}-50) 85%,
+    #fff
+  );
+  --dodo-ui-CalendarDateChip-today-#{$color-name}-hover-bg: color-mix(
+    in oklab,
+    var(--dodo-color-#{$color-name}-100) 85%,
+    #fff
+  );
+  --dodo-ui-CalendarDateChip-today-#{$color-name}-active-bg: color-mix(
+    in oklab,
+    var(--dodo-color-#{$color-name}-200) 85%,
+    #fff
+  );
+
+  --dodo-ui-CalendarDateChip-selected-#{$color-name}-bg: var(--dodo-color-#{$color-name}-300);
+  --dodo-ui-CalendarDateChip-selected-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-200);
+  --dodo-ui-CalendarDateChip-selected-#{$color-name}-active-bg: var(
+    --dodo-color-#{$color-name}-100
+  );
+
+  --dodo-ui-CalendarDateChip-isRangeStart-#{$color-name}-bg: var(--dodo-color-#{$color-name}-300);
+  --dodo-ui-CalendarDateChip-isRangeStart-#{$color-name}-hover-bg: var(
+    --dodo-color-#{$color-name}-200
+  );
+  --dodo-ui-CalendarDateChip-isRangeStart-#{$color-name}-active-bg: var(
+    --dodo-color-#{$color-name}-100
+  );
+
+  --dodo-ui-CalendarDateChip-isRangeEnd-#{$color-name}-bg: var(--dodo-color-#{$color-name}-300);
+  --dodo-ui-CalendarDateChip-isRangeEnd-#{$color-name}-hover-bg: var(
+    --dodo-color-#{$color-name}-200
+  );
+  --dodo-ui-CalendarDateChip-isRangeEnd-#{$color-name}-active-bg: var(
+    --dodo-color-#{$color-name}-100
+  );
+}
+
+/// Mixin: generate-dodo-ui-calendarDateChip-color
+/// Auto-generates .color--[theme] > variant--solid styles
+/// @param {String} $theme - e.g., default, safe, danger, etc.
+@mixin generate-dodo-ui-calendarDateChip-color($theme) {
+  &--#{$theme} {
+    .chip:not([disabled]) {
+      background-color: var(--dodo-ui-CalendarDateChip-#{$theme}-bg);
+
+      &:hover {
+        background-color: var(--dodo-ui-CalendarDateChip-#{$theme}-hover-bg);
+      }
+
+      &:active {
+        background-color: var(--dodo-ui-CalendarDateChip-#{$theme}-active-bg);
+      }
+    }
+
+    &.today {
+      .chip:not([disabled]) {
+        background-color: var(--dodo-ui-CalendarDateChip-today-#{$theme}-bg);
+
+        &:hover {
+          background-color: var(--dodo-ui-CalendarDateChip-today-#{$theme}-hover-bg);
+        }
+
+        &:active {
+          background-color: var(--dodo-ui-CalendarDateChip-today-#{$theme}-active-bg);
+        }
+      }
+    }
+
+    &.selected {
+      .chip:not([disabled]) {
+        color: var(--dodo-color-constant-white);
+        background-color: var(--dodo-ui-CalendarDateChip-selected-#{$theme}-bg);
+
+        &:hover {
+          background-color: var(--dodo-ui-CalendarDateChip-selected-#{$theme}-hover-bg);
+        }
+
+        &:active {
+          background-color: var(--dodo-ui-CalendarDateChip-selected-#{$theme}-active-bg);
+        }
+      }
+    }
+
+    &.isRangeStart {
+      .chip:not([disabled]) {
+        color: var(--dodo-color-constant-white);
+        background-color: var(--dodo-ui-CalendarDateChip-isRangeStart-#{$theme}-bg);
+
+        &:hover {
+          background-color: var(--dodo-ui-CalendarDateChip-isRangeStart-#{$theme}-hover-bg);
+        }
+
+        &:active {
+          background-color: var(--dodo-ui-CalendarDateChip-isRangeStart-#{$theme}-active-bg);
+        }
+      }
+    }
+
+    &.isRangeEnd {
+      .chip:not([disabled]) {
+        color: var(--dodo-color-constant-white);
+        background-color: var(--dodo-ui-CalendarDateChip-isRangeEnd-#{$theme}-bg);
+
+        &:hover {
+          background-color: var(--dodo-ui-CalendarDateChip-isRangeEnd-#{$theme}-hover-bg);
+        }
+
+        &:active {
+          background-color: var(--dodo-ui-CalendarDateChip-isRangeEnd-#{$theme}-active-bg);
+        }
+      }
+    }
+  }
+}