@flightlesslabs/dodo-ui 0.9.1 → 0.10.2

package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/CalendarMonthChip.svelte

@@ -0,0 +1,217 @@
+<script lang="ts" module>
+  export interface CalendarMonthChipProps {
+    /** CalendarDatesChart ref */
+    ref?: HTMLLIElement;
+    /** Custom css class */
+    class?: string;
+    /** How round should the border radius be? */
+    roundness?: ComponentRoundness;
+    /** What color to use? */
+    color?: ComponentColor;
+    /** Month value */
+    value: CalendarMonthNames;
+    /** Is Date Selected */
+    selected?: boolean;
+    /** onselect event handler */
+    onselect?: (value: CalendarMonthNames, e: ButtonClickEvent) => void;
+    /** Custom Calendar Chip Content */
+    customCalendarMonthChipContent?: (value: CalendarMonthNames) => Snippet;
+    /** Custom Calendar Chip Content */
+    customCalendarMonthChip?: (value: CalendarMonthNames) => Snippet;
+    /** How large should the Calendar Chip be? */
+    size?: ComponentSize;
+    /** Disabled */
+    disabled?: boolean;
+  }
+</script>
+
+<script lang="ts">
+  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 { CalendarMonthNames } from '../../CalendarControls/CalendarMonthSelector/CalendarMonthSelector.svelte';
+
+  let {
+    class: className = '',
+    roundness = 2,
+    selected = false,
+    color = 'primary',
+    ref = $bindable<HTMLLIElement>(),
+    customCalendarMonthChipContent: customCalendarMonthChipContentInternal,
+    customCalendarMonthChip: customCalendarMonthChipInternal,
+    onselect,
+    size = 'normal',
+    value,
+    disabled = false,
+  }: CalendarMonthChipProps = $props();
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let customCalendarMonthChipContentTyped = customCalendarMonthChipContentInternal as any;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let customCalendarMonthChipTyped = customCalendarMonthChipInternal as any;
+</script>
+
+{#snippet chipContent()}
+  {#if customCalendarMonthChipTyped}
+    {@render customCalendarMonthChipTyped(value)}
+  {:else}
+    <button class="chip" {disabled} onclick={onselect ? (e) => onselect(value, e) : undefined}>
+      {#if customCalendarMonthChipContentTyped}
+        {@render customCalendarMonthChipContentTyped(value)}
+      {:else}
+        {value}
+      {/if}
+    </button>
+  {/if}
+{/snippet}
+
+<li
+  class:disabled
+  class:selected
+  class={[
+    'dodo-ui-CalendarMonthChip',
+    `roundness--${roundness}`,
+    `color--${color}`,
+    `size--${size}`,
+    className,
+  ].join(' ')}
+  bind:this={ref}
+>
+  {@render chipContent()}
+</li>
+
+<style lang="scss">
+  @use 'utils/scss/mixins.scss' as *;
+
+  :global(:root) {
+    --dodo-ui-CalendarMonthChip-disabled-bg: var(--dodo-color-neutral-50);
+    --dodo-ui-CalendarMonthChip-disabled-color: var(--dodo-color-neutral-400);
+
+    @include generate-dodo-ui-calendarMonthChip-colors(neutral);
+    @include generate-dodo-ui-calendarMonthChip-colors(primary);
+    @include generate-dodo-ui-calendarMonthChip-colors(secondary);
+    @include generate-dodo-ui-calendarMonthChip-colors(safe);
+    @include generate-dodo-ui-calendarMonthChip-colors(warning);
+    @include generate-dodo-ui-calendarMonthChip-colors(danger);
+  }
+
+  :global(.dodo-theme--dark) {
+    --dodo-ui-CalendarMonthChip-disabled-bg: var(--dodo-color-neutral-200);
+    --dodo-ui-CalendarMonthChip-disabled-color: var(--dodo-color-neutral-400);
+
+    @include generate-dodo-ui-calendarMonthChip-colors-dark(neutral);
+    @include generate-dodo-ui-calendarMonthChip-colors-dark(primary);
+    @include generate-dodo-ui-calendarMonthChip-colors-dark(secondary);
+    @include generate-dodo-ui-calendarMonthChip-colors-dark(safe);
+    @include generate-dodo-ui-calendarMonthChip-colors-dark(warning);
+    @include generate-dodo-ui-calendarMonthChip-colors-dark(danger);
+  }
+
+  .dodo-ui-CalendarMonthChip {
+    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: 1rem;
+      }
+
+      &--small {
+        width: var(--dodo-ui-element-height-small);
+        height: var(--dodo-ui-element-height-small);
+        font-size: 0.9rem;
+      }
+
+      &--large {
+        width: var(--dodo-ui-element-height-large);
+        height: var(--dodo-ui-element-height-large);
+        font-size: 1.1rem;
+      }
+    }
+
+    &.color {
+      @include generate-dodo-ui-calendarMonthChip-color(neutral);
+      @include generate-dodo-ui-calendarMonthChip-color(primary);
+      @include generate-dodo-ui-calendarMonthChip-color(secondary);
+      @include generate-dodo-ui-calendarMonthChip-color(safe);
+      @include generate-dodo-ui-calendarMonthChip-color(warning);
+      @include generate-dodo-ui-calendarMonthChip-color(danger);
+    }
+
+    .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;
+      text-transform: capitalize;
+
+      &[disabled] {
+        cursor: initial;
+        background-color: var(--dodo-ui-CalendarMonthChip-disabled-bg);
+        color: var(--dodo-ui-CalendarMonthChip-disabled-color);
+
+        &:hover {
+          background-color: var(--dodo-ui-CalendarMonthChip-disabled-bg);
+          color: var(--dodo-ui-CalendarMonthChip-disabled-color);
+        }
+
+        &:active {
+          background-color: var(--dodo-ui-CalendarMonthChip-disabled-bg);
+          color: var(--dodo-ui-CalendarMonthChip-disabled-color);
+        }
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,124 @@
+<script lang="ts" module>
+  import type { ButtonClickEvent } from '$lib/stories/components/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;
+  }
+</script>
+
+<script lang="ts">
+  import type { ComponentColor } from '$lib/types/colors.js';
+  import type { Snippet } from 'svelte';
+  import type { ComponentSize } from '$lib/types/size.js';
+  import {
+    calendarMonthOptions,
+    type CalendarMonthNames,
+  } from '../CalendarControls/CalendarMonthSelector/CalendarMonthSelector.svelte';
+  import type { CalendarMonthChipProps } from './CalendarMonthChip/CalendarMonthChip.svelte';
+  import CalendarMonthChip from './CalendarMonthChip/CalendarMonthChip.svelte';
+  import { Button } from '$lib/index.js';
+  import Icon from '@iconify/svelte';
+
+  let {
+    class: className = '',
+    ref = $bindable<HTMLDivElement>(),
+    value,
+    disabledMonths = [],
+    onselect,
+    calendarMonthChipProps,
+    size = 'normal',
+    color,
+    customCalendarMonthChipContent,
+    customCalendarMonthChip,
+    oncancel,
+    showControls = true,
+  }: CalendarMonthListProps = $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 lang="scss">
+  .dodo-ui-CalendarMonthList {
+    user-select: none;
+
+    ul {
+      margin: 0;
+      padding: 0;
+      flex-wrap: wrap;
+      display: inline-flex;
+    }
+
+    :global(.dodo-ui-CalendarMonthChip) {
+      width: 33.333%;
+    }
+
+    .Controls {
+      margin-bottom: calc(var(--dodo-ui-space) * 2);
+    }
+
+    &.size {
+      &--normal {
+        width: calc(var(--dodo-ui-element-height-normal) * 7);
+      }
+
+      &--small {
+        width: calc(var(--dodo-ui-element-height-small) * 7);
+      }
+
+      &--large {
+        width: calc(var(--dodo-ui-element-height-large) * 7);
+      }
+    }
+  }
+</style>

package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/CalendarYearChip.svelte

@@ -0,0 +1,227 @@
+<script lang="ts" module>
+  export interface CalendarYearChipProps {
+    /** CalendarDatesChart ref */
+    ref?: HTMLLIElement;
+    /** Custom css class */
+    class?: string;
+    /** How round should the border radius be? */
+    roundness?: ComponentRoundness;
+    /** What color to use? */
+    color?: ComponentColor;
+    /** Month value */
+    value: string;
+    /** Is Date Selected */
+    selected?: boolean;
+    /** onselect event handler */
+    onselect?: (value: string, e: ButtonClickEvent) => void;
+    /** Custom Calendar Chip Content */
+    customCalendarYearChipContent?: (value: string) => Snippet;
+    /** Custom Calendar Chip Content */
+    customCalendarYearChip?: (value: string) => Snippet;
+    /** How large should the Calendar Chip be? */
+    size?: ComponentSize;
+    /** Disabled */
+    disabled?: boolean;
+  }
+</script>
+
+<script lang="ts">
+  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';
+
+  let {
+    class: className = '',
+    roundness = 2,
+    selected = false,
+    color = 'primary',
+    ref = $bindable<HTMLLIElement>(),
+    customCalendarYearChipContent: customCalendarYearChipContentInternal,
+    customCalendarYearChip: customCalendarYearChipInternal,
+    onselect,
+    size = 'normal',
+    value,
+    disabled = false,
+  }: CalendarYearChipProps = $props();
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let customCalendarYearChipContentTyped = customCalendarYearChipContentInternal as any;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let customCalendarYearChipTyped = customCalendarYearChipInternal as any;
+
+  $effect(() => {
+    if (!selected) {
+      return;
+    }
+
+    if (!ref) {
+      return;
+    }
+
+    ref.scrollIntoView({ block: 'center' });
+  });
+</script>
+
+{#snippet chipContent()}
+  {#if customCalendarYearChipTyped}
+    {@render customCalendarYearChipTyped(value)}
+  {:else}
+    <button class="chip" {disabled} onclick={onselect ? (e) => onselect(value, e) : undefined}>
+      {#if customCalendarYearChipContentTyped}
+        {@render customCalendarYearChipContentTyped(value)}
+      {:else}
+        {value}
+      {/if}
+    </button>
+  {/if}
+{/snippet}
+
+<li
+  class:disabled
+  class:selected
+  class={[
+    'dodo-ui-CalendarYearChip',
+    `roundness--${roundness}`,
+    `color--${color}`,
+    `size--${size}`,
+    className,
+  ].join(' ')}
+  bind:this={ref}
+>
+  {@render chipContent()}
+</li>
+
+<style lang="scss">
+  @use 'utils/scss/mixins.scss' as *;
+
+  :global(:root) {
+    --dodo-ui-CalendarYearChip-disabled-bg: var(--dodo-color-neutral-50);
+    --dodo-ui-CalendarYearChip-disabled-color: var(--dodo-color-neutral-400);
+
+    @include generate-dodo-ui-calendarYearChip-colors(neutral);
+    @include generate-dodo-ui-calendarYearChip-colors(primary);
+    @include generate-dodo-ui-calendarYearChip-colors(secondary);
+    @include generate-dodo-ui-calendarYearChip-colors(safe);
+    @include generate-dodo-ui-calendarYearChip-colors(warning);
+    @include generate-dodo-ui-calendarYearChip-colors(danger);
+  }
+
+  :global(.dodo-theme--dark) {
+    --dodo-ui-CalendarYearChip-disabled-bg: var(--dodo-color-neutral-200);
+    --dodo-ui-CalendarYearChip-disabled-color: var(--dodo-color-neutral-400);
+
+    @include generate-dodo-ui-calendarYearChip-colors-dark(neutral);
+    @include generate-dodo-ui-calendarYearChip-colors-dark(primary);
+    @include generate-dodo-ui-calendarYearChip-colors-dark(secondary);
+    @include generate-dodo-ui-calendarYearChip-colors-dark(safe);
+    @include generate-dodo-ui-calendarYearChip-colors-dark(warning);
+    @include generate-dodo-ui-calendarYearChip-colors-dark(danger);
+  }
+
+  .dodo-ui-CalendarYearChip {
+    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: 1rem;
+      }
+
+      &--small {
+        width: var(--dodo-ui-element-height-small);
+        height: var(--dodo-ui-element-height-small);
+        font-size: 0.9rem;
+      }
+
+      &--large {
+        width: var(--dodo-ui-element-height-large);
+        height: var(--dodo-ui-element-height-large);
+        font-size: 1.1rem;
+      }
+    }
+
+    &.color {
+      @include generate-dodo-ui-calendarYearChip-color(neutral);
+      @include generate-dodo-ui-calendarYearChip-color(primary);
+      @include generate-dodo-ui-calendarYearChip-color(secondary);
+      @include generate-dodo-ui-calendarYearChip-color(safe);
+      @include generate-dodo-ui-calendarYearChip-color(warning);
+      @include generate-dodo-ui-calendarYearChip-color(danger);
+    }
+
+    .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-CalendarYearChip-disabled-bg);
+        color: var(--dodo-ui-CalendarYearChip-disabled-color);
+
+        &:hover {
+          background-color: var(--dodo-ui-CalendarYearChip-disabled-bg);
+          color: var(--dodo-ui-CalendarYearChip-disabled-color);
+        }
+
+        &:active {
+          background-color: var(--dodo-ui-CalendarYearChip-disabled-bg);
+          color: var(--dodo-ui-CalendarYearChip-disabled-color);
+        }
+      }
+    }
+  }
+</style>