@flightlesslabs/dodo-ui 0.19.1 → 0.21.0

package/src/lib/components/Form/UtilityButton/UtilityButton.svelte

@@ -0,0 +1,128 @@
+<script lang="ts" module>
+  import type { Snippet } from 'svelte';
+
+  /**
+   * Shared base props for the UtilityButton component.
+   *
+   * These props apply to both the <UtilityButton> and <a> render modes.
+   */
+  interface UtilityButtonBaseProps {
+    /** UtilityButton contents */
+    children?: Snippet;
+
+    /** Visual size token */
+    size?: ComponentSize;
+
+    /** Color theme token */
+    color?: ComponentColor;
+
+    /** Border radius token (0–3, "pill", "full") */
+    roundness?: ComponentRoundness;
+
+    /** Add a border around the UtilityButton */
+    outline?: boolean;
+
+    /** Compact spacing, typically for icon-only UtilityButtons */
+    compact?: boolean;
+
+    /** Custom CSS class names */
+    class?: string;
+
+    /** Accessible label (required for icon-only UtilityButtons) */
+    'aria-label'?: string;
+  }
+
+  /**
+   * UtilityButton component props (UtilityButton variant).
+   *
+   * Renders a semantic <UtilityButton> element when `href` is not provided.
+   * Inherits all native HTML UtilityButton attributes.
+   */
+  export type UtilityButtonAsButtonProps = UtilityButtonBaseProps & ButtonAsButtonPropsBase;
+
+  /**
+   * UtilityButton component props (anchor variant).
+   *
+   * Renders an <a> element when `href` is provided.
+   * Inherits all native HTML anchor attributes, except `type`.
+   */
+  export type UtilityButtonAsAnchorProps = UtilityButtonBaseProps & ButtonAsAnchorPropsBase;
+
+  /**
+   * UtilityButton component props.
+   *
+   * Renders a semantic <UtilityButton> by default, or an <a> element when `href` is provided.
+   * Supports design-system tokens for size, color, variant, and roundness.
+   *
+   * This type is a discriminated union:
+   * - When `href` is present, anchor props are enabled and UtilityButton-only props are disabled.
+   * - When `href` is absent, UtilityButton props are enabled and anchor-only props are disabled.
+   */
+  export type UtilityButtonProps = UtilityButtonAsButtonProps | UtilityButtonAsAnchorProps;
+</script>
+
+<script lang="ts">
+  import type { ComponentSize } from '$lib/attributes/size.js';
+  import type { ComponentColor } from '$lib/attributes/color.js';
+  import type { ComponentRoundness } from '$lib/attributes/roundness.js';
+  import ButtonAsAnchor from '../Button/ButtonAsAnchor.svelte';
+  import type { ButtonAsAnchorProps as ButtonAsAnchorPropsBase } from '../Button/ButtonAsAnchor.svelte';
+  import ButtonAsButton from '../Button/ButtonAsButton.svelte';
+  import type { ButtonAsButtonProps as ButtonAsButtonPropsBase } from '../Button/ButtonAsButton.svelte';
+
+  /**
+   * UtilityButton component runtime props.
+   *
+   * These props are destructured from `$props()` and mapped to the underlying
+   * Bits UI UtilityButton root component, with semantic rendering based on `href`.
+   */
+  let {
+    size = 'normal',
+    color = 'primary',
+    roundness = 1,
+    outline = false,
+    compact = false,
+    class: className = '',
+    disabled = false,
+    'aria-label': ariaLabel,
+    href,
+    type,
+    ref = $bindable(null),
+    ...restProps
+  }: UtilityButtonProps = $props();
+
+  /**
+   * Computed class list for the UtilityButton component.
+   */
+  const classes = $derived(
+    [
+      'dodo-ui-UtilityButton',
+      `size--${size}`,
+      `color--${color}`,
+      `roundness--${roundness}`,
+      outline && 'outline',
+      compact && 'compact',
+      className,
+    ].filter(Boolean),
+  );
+</script>
+
+{#if href}
+  <ButtonAsAnchor
+    {...restProps as ButtonAsAnchorPropsBase}
+    {disabled}
+    aria-label={ariaLabel}
+    class={classes.join(' ')}
+    bind:ref
+    {href}
+  />
+{:else}
+  <ButtonAsButton
+    {...restProps as ButtonAsButtonPropsBase}
+    {disabled}
+    aria-label={ariaLabel}
+    class={classes.join(' ')}
+    bind:ref
+    {type}
+  />
+{/if}

package/src/lib/components/Info/Calendar/Calendar.scss

@@ -0,0 +1,137 @@
+// ----------------------------------------
+// Theme tokens (global CSS variables)
+// ----------------------------------------
+:root {
+  --dodo-ui-Calendar-date-selected-bg: var(--dodo-color-primary-500);
+  --dodo-ui-Calendar-date-selected-hover-bg: var(--dodo-color-primary-600);
+}
+
+.dodo-theme--dark {
+  --dodo-ui-Calendar-date-selected-bg: var(--dodo-color-primary-300);
+  --dodo-ui-Calendar-date-selected-hover-bg: var(--dodo-color-primary-400);
+}
+
+.dodo-ui-Calendar {
+  font-size: 1rem;
+  padding: var(--dodo-ui-space);
+  color: var(--dodo-color-neutral-900);
+  display: inline-flex;
+  flex-direction: column;
+
+  [data-calendar-header] {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 calc(var(--dodo-ui-space) / 2);
+    margin-bottom: calc(var(--dodo-ui-space) * 2);
+    margin-top: var(--dodo-ui-space);
+  }
+
+  [data-calendar-heading] {
+    margin: 0 calc(var(--dodo-ui-space) / 2);
+    font-weight: 500;
+  }
+
+  [data-calendar-next-button],
+  [data-calendar-prev-button] {
+    font-size: 1.45rem;
+  }
+
+  [data-calendar-grid] {
+    width: 100%;
+    user-select: none;
+  }
+
+  [data-calendar-grid-row] {
+    display: flex;
+    width: 100%;
+    justify-content: space-around;
+  }
+
+  [data-calendar-grid-head] {
+    margin-bottom: var(--dodo-ui-space);
+    display: block;
+  }
+
+  [data-calendar-head-cell] {
+    display: inline-flex;
+    width: var(--dodo-ui-element-height-normal);
+    justify-content: center;
+    font-weight: 600;
+    color: var(--dodo-color-neutral-600);
+    font-size: 0.9rem;
+  }
+
+  [data-calendar-cell] {
+    display: inline-flex;
+  }
+
+  [data-calendar-day] {
+    transition:
+      background-color 70ms,
+      color 70ms,
+      border-color 70ms;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    width: var(--dodo-ui-element-height-normal);
+    height: var(--dodo-ui-element-height-normal);
+    border-radius: var(--dodo-ui-element-roundness-1);
+    border: var(--dodo-ui-element-border-width) solid transparent;
+    position: relative;
+
+    &:hover {
+      background-color: var(--dodo-color-neutral-100);
+      border-color: var(--dodo-color-neutral-400);
+    }
+
+    &[data-selected] {
+      background-color: var(--dodo-ui-Calendar-date-selected-bg);
+      color: var(--dodo-color-constant-white);
+
+      &:hover {
+        background-color: var(--dodo-ui-Calendar-date-selected-hover-bg);
+      }
+
+      &[data-today] {
+        background-color: var(--dodo-ui-Calendar-date-selected-bg);
+        color: var(--dodo-color-constant-white);
+
+        &:hover {
+          background-color: var(--dodo-ui-Calendar-date-selected-hover-bg);
+        }
+
+        &::after {
+          background-color: var(--dodo-color-constant-white);
+
+          &:hover {
+            background-color: var(--dodo-color-constant-white);
+          }
+        }
+      }
+    }
+
+    &[data-today] {
+      background-color: var(--dodo-color-primary-50);
+      &::after {
+        content: '';
+        width: var(--dodo-ui-track-element-height-small);
+        height: var(--dodo-ui-track-element-height-small);
+        border-radius: 50%;
+        display: inline-flex;
+        background-color: var(--dodo-color-primary-600);
+        position: absolute;
+        bottom: 0.2em;
+      }
+    }
+  }
+
+  [data-outside-month] {
+    color: var(--dodo-color-neutral-400);
+
+    &:hover {
+      background-color: initial;
+      border-color: transparent;
+    }
+  }
+}

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

@@ -0,0 +1,113 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Calendar from './Calendar.svelte';
+  import type { CalendarProps } from './Calendar.svelte';
+  import type { ArgTypes } from 'storybook/internal/csf';
+  import { componentRoundnessOptions } from '$lib/attributes/roundness.js';
+  import { CalendarDate, type DateValue } from '@internationalized/date';
+  import Theme from '$lib/components/Layout/Theme/Theme.svelte';
+  import { componentVariantOptions } from '$lib/attributes/variant.js';
+  import { cardColorOptions } from '$lib/components/Layout/Card/Card.svelte';
+  import { componentThemeColorsOptions } from '$lib/attributes/theme.js';
+  import { ComponentShadowOptions } from '$lib/attributes/shadow.js';
+
+  // ------------------------------
+  // Storybook ArgTypes
+  // ------------------------------
+  export const storyCalendarArgTypes: Partial<ArgTypes<CalendarProps>> = {
+    // ------------------------------
+    // Core
+    // ------------------------------
+    class: { table: { category: 'API', subcategory: 'Base' } },
+    value: {
+      control: { type: 'text' },
+      table: { category: 'API', subcategory: 'Base' },
+    },
+
+    // ------------------------------
+    // State
+    // ------------------------------
+    disabled: {
+      control: { type: 'boolean' },
+      description: 'Disabled state of the input',
+      table: { category: 'API', subcategory: 'State', defaultValue: { summary: 'false' } },
+    },
+
+    // ------------------------------
+    // Appearance
+    // ------------------------------
+    shadow: {
+      control: { type: 'select' },
+      options: ComponentShadowOptions,
+      description: 'Component Shadow',
+      table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: '1' } },
+    },
+    color: {
+      control: { type: 'select' },
+      options: cardColorOptions,
+      description: 'Color theme token',
+      table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: 'default' } },
+    },
+    variant: {
+      control: { type: 'select' },
+      options: componentVariantOptions,
+      description: 'Visual variant of the card',
+      table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: 'text' } },
+    },
+    roundness: {
+      control: { type: 'select' },
+      options: componentRoundnessOptions,
+      description: 'Border radius token',
+      table: { category: 'API', subcategory: 'Appearance' },
+    },
+    outline: {
+      control: { type: 'boolean' },
+      description: 'Render outlined style',
+      table: { category: 'API', subcategory: 'Appearance' },
+    },
+    active: {
+      control: { type: 'boolean' },
+      description: 'Add mouse hover and active effects',
+      table: { category: 'API', subcategory: 'Appearance' },
+    },
+    theme: {
+      control: { type: 'select' },
+      options: componentThemeColorsOptions,
+      description: 'Theme color',
+      table: { category: 'API', subcategory: 'Base', defaultValue: { summary: 'undefined' } },
+    },
+  };
+
+  // ------------------------------
+  // Storybook Meta
+  // ------------------------------
+  const { Story } = defineMeta({
+    component: Calendar,
+    tags: ['autodocs'],
+    argTypes: storyCalendarArgTypes,
+  });
+
+  let myValue = $state<DateValue>(new CalendarDate(2026, 4, 7));
+</script>
+
+<!-- ------------------------------ -->
+<!-- Stories -->
+<!-- ------------------------------ -->
+
+<Story name="Default" />
+
+<Story name="Selected" asChild>
+  <Calendar bind:value={myValue} />
+</Story>
+
+<Story name="Light Theme" asChild>
+  <Theme type="light">
+    <Calendar />
+  </Theme>
+</Story>
+
+<Story name="Dark Theme" asChild globals={{ backgrounds: { value: 'dark' } }}>
+  <Theme type="dark">
+    <Calendar />
+  </Theme>
+</Story>

package/src/lib/components/Info/Calendar/Calendar.svelte

@@ -0,0 +1,61 @@
+<script lang="ts" module>
+  import type { CardProps } from '$lib/components/Layout/Card/Card.svelte';
+  import { useThemeContext } from '$lib/components/Layout/Theme/ThemeSystem/context.js';
+
+  export type CalendarProps = Omit<CalendarSingleRootProps, 'type'> &
+    Omit<CardProps, 'children' | 'ref'>;
+</script>
+
+<script lang="ts">
+  import { Calendar as CalendarBitsUi, type CalendarSingleRootProps } from 'bits-ui';
+  import Header from './Header.svelte';
+  import CalendarGrid from './CalendarGrid/CalendarGrid.svelte';
+  let {
+    roundness = 1,
+    outline = true,
+    class: className = '',
+    theme: cardTheme,
+    color = 'default',
+    variant = 'text',
+    shadow = 0,
+    active = false,
+    weekStartsOn = 1,
+    weekdayFormat = 'short',
+    fixedWeeks = true,
+    value = $bindable(undefined),
+    ...restProps
+  }: CalendarProps = $props();
+
+  const themeContext = useThemeContext();
+  const theme = $derived(cardTheme ? cardTheme : themeContext.theme);
+
+  const popupClasses = $derived(
+    [
+      'dodo-ui-Card',
+      'dodo-ui-Calendar',
+      `color--${color}`,
+      `variant--${variant}`,
+      `roundness--${roundness}`,
+      `dodo-shadow-${shadow}`,
+      outline && 'outline',
+      active && 'active',
+      theme ? `dodo-theme--${theme}` : '',
+      className,
+    ].filter(Boolean),
+  );
+</script>
+
+<CalendarBitsUi.Root
+  {...restProps}
+  {weekStartsOn}
+  {weekdayFormat}
+  {fixedWeeks}
+  bind:value
+  type="single"
+  class={popupClasses.join(' ')}
+>
+  {#snippet children(calendarRootSnippetProps)}
+    <Header />
+    <CalendarGrid {...calendarRootSnippetProps} />
+  {/snippet}
+</CalendarBitsUi.Root>

package/src/lib/components/Info/Calendar/CalendarGrid/CalendarGrid.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { Calendar, type CalendarRootSnippetProps } from 'bits-ui';
+  import TableHead from './TableHead.svelte';
+  import TableBody from './TableBody.svelte';
+
+  let { months, weekdays }: CalendarRootSnippetProps = $props();
+</script>
+
+<div class="CalendarGrid">
+  {#each months as month (month.value)}
+    <Calendar.Grid>
+      <TableHead {weekdays} />
+      <TableBody {month} />
+    </Calendar.Grid>
+  {/each}
+</div>

package/src/lib/components/Info/Calendar/CalendarGrid/TableBody.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import type { DateValue } from '@internationalized/date';
+  import { Calendar, type Month } from 'bits-ui';
+
+  type Props = {
+    month: Month<DateValue>;
+  };
+
+  let { month }: Props = $props();
+</script>
+
+<Calendar.GridBody>
+  {#each month.weeks as weekDates (weekDates)}
+    <Calendar.GridRow>
+      {#each weekDates as date (date)}
+        <Calendar.Cell {date} month={month.value}>
+          <Calendar.Day>
+            <div></div>
+            {date.day}
+          </Calendar.Day>
+        </Calendar.Cell>
+      {/each}
+    </Calendar.GridRow>
+  {/each}
+</Calendar.GridBody>

package/src/lib/components/Info/Calendar/CalendarGrid/TableHead.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { Calendar } from 'bits-ui';
+
+  type Props = {
+    weekdays: string[];
+  };
+
+  let { weekdays }: Props = $props();
+</script>
+
+<Calendar.GridHead>
+  <Calendar.GridRow>
+    {#each weekdays as day (day)}
+      <Calendar.HeadCell>
+        <div>{day.slice(0, 2)}</div>
+      </Calendar.HeadCell>
+    {/each}
+  </Calendar.GridRow>
+</Calendar.GridHead>

package/src/lib/components/Info/Calendar/Header.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import Icon from '@iconify/svelte';
+  import { Calendar } from 'bits-ui';
+
+  const triggerClasses = $derived(
+    [
+      'dodo-ui-Button',
+      'compact',
+      'size--normal',
+      'variant--text',
+      'color--primary',
+      'roundness--1',
+    ].filter(Boolean),
+  );
+</script>
+
+<Calendar.Header>
+  <Calendar.PrevButton class={triggerClasses.join(' ')}>
+    <Icon icon="material-symbols:chevron-left-rounded" />
+  </Calendar.PrevButton>
+  <Calendar.Heading />
+  <Calendar.NextButton class={triggerClasses.join(' ')}>
+    <Icon icon="material-symbols:chevron-right-rounded" />
+  </Calendar.NextButton>
+</Calendar.Header>

package/src/lib/components/Layout/Card/Card.scss

@@ -0,0 +1,99 @@
+@use '../../../styles/scss/mixins/card-color' as cards;
+
+// ----------------------------------------
+// Config
+// ----------------------------------------
+$dodo-card-themes: neutral, primary, secondary, safe, warning, danger;
+
+// ----------------------------------------
+// Theme tokens (global CSS variables)
+// ----------------------------------------
+:root {
+  --dodo-ui-Card-default-bg: var(--dodo-color-white);
+
+  @each $theme in $dodo-card-themes {
+    // Fixed: Added cards. prefix
+    @include cards.generate-dodo-ui-card-colors($theme, light);
+  }
+}
+
+.dodo-theme--dark {
+  --dodo-ui-Card-default-bg: var(--dodo-color-neutral-100);
+
+  @each $theme in $dodo-card-themes {
+    // Fixed: Added cards. prefix
+    @include cards.generate-dodo-ui-card-colors($theme, dark);
+  }
+}
+
+// ----------------------------------------
+// SCSS maps
+// ----------------------------------------
+
+$roundness: (
+  1: var(--dodo-ui-element-roundness-1),
+  2: var(--dodo-ui-element-roundness-2),
+  3: var(--dodo-ui-element-roundness-3),
+  pill: 999px,
+  full: 50%,
+);
+
+// ----------------------------------------
+// Component CSS
+// ----------------------------------------
+.dodo-ui-Card {
+  transition:
+    background-color 70ms,
+    color 70ms,
+    border-color 70ms;
+  background-color: transparent;
+  border-style: solid;
+  border-width: var(--dodo-ui-element-border-width);
+  border-color: transparent;
+  color: inherit;
+  width: var(--Card-width, initial);
+  height: var(--Card-height, initial);
+  min-width: var(--Card-min-width, initial);
+  min-height: var(--Card-min-height, initial);
+  max-width: var(--Card-max-width, initial);
+  max-height: var(--Card-max-height, initial);
+  overflow: hidden;
+
+  &.outline {
+    border-color: var(--dodo-color-neutral-400);
+  }
+
+  &.active {
+    cursor: pointer;
+  }
+
+  // ----------------------------------------
+  // Roundness
+  // ----------------------------------------
+  &.roundness {
+    @each $name, $radius in $roundness {
+      &--#{$name} {
+        border-radius: $radius;
+      }
+    }
+  }
+
+  // ----------------------------------------
+  // Theme colors
+  // ----------------------------------------
+  &.color {
+    &--default {
+      &.variant {
+        &--text,
+        &--solid {
+          background-color: var(--dodo-ui-Card-default-bg);
+        }
+      }
+    }
+
+    @each $theme in $dodo-card-themes {
+      // Fixed: Added cards. prefix
+      @include cards.generate-dodo-ui-card-color($theme);
+    }
+  }
+}