@flightlesslabs/dodo-ui 0.19.1 → 0.20.0

package/dist/components/Form/UtilityButton/UtilityButton.scss

@@ -0,0 +1,151 @@
+@use '../../../styles/scss/mixins/utility-button-color' as buttons;
+
+// ----------------------------------------
+// Config
+// ----------------------------------------
+$dodo-utility-button-themes: neutral, primary, secondary, safe, warning, danger;
+
+// ----------------------------------------
+// Theme tokens (global CSS variables)
+// ----------------------------------------
+:root {
+  --dodo-ui-UtilityButton-disabled-color: var(--dodo-color-neutral-400);
+  --dodo-ui-UtilityButton-disabled-bg: var(--dodo-color-neutral-200);
+
+  @each $theme in $dodo-utility-button-themes {
+    // Fixed: Added buttons. prefix
+    @include buttons.generate-dodo-ui-utility-button-colors($theme, light);
+  }
+}
+
+.dodo-theme--dark {
+  --dodo-ui-UtilityButton-disabled-bg: var(--dodo-color-neutral-100);
+  --dodo-ui-UtilityButton-disabled-color: var(--dodo-color-neutral-500);
+
+  @each $theme in $dodo-utility-button-themes {
+    // Fixed: Added buttons. prefix
+    @include buttons.generate-dodo-ui-utility-button-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-UtilityButton {
+  cursor: pointer;
+  transition:
+    background-color 70ms,
+    color 70ms,
+    border-color 70ms;
+  text-decoration: none;
+  margin: 0;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-family: inherit;
+  background-color: transparent;
+  border-style: solid;
+  border-width: var(--dodo-ui-element-border-width);
+  border-color: transparent;
+  color: inherit;
+  letter-spacing: 0.3px;
+
+  // ----------------------------------------
+  // Sizes
+  // ----------------------------------------
+  &.size {
+    &--normal {
+      height: calc(var(--dodo-ui-element-height-normal) / 1.2);
+      font-size: 0.9rem;
+      padding: 0 calc(var(--dodo-ui-space-small) * 2);
+      min-width: 35px;
+    }
+
+    &--small {
+      height: calc(var(--dodo-ui-element-height-small) / 1.2);
+      padding: 0 var(--dodo-ui-space);
+      font-size: 0.8rem;
+      min-width: 25px;
+    }
+
+    &--large {
+      height: calc(var(--dodo-ui-element-height-large) / 1.2);
+      font-size: 1rem;
+      padding: 0 calc(var(--dodo-ui-space) * 2);
+      min-width: 55px;
+    }
+  }
+
+  // ----------------------------------------
+  // Roundness
+  // ----------------------------------------
+  &.roundness {
+    @each $name, $radius in $roundness {
+      &--#{$name} {
+        border-radius: $radius;
+      }
+    }
+  }
+
+  // ----------------------------------------
+  // Theme colors
+  // ----------------------------------------
+  &.color {
+    @each $theme in $dodo-utility-button-themes {
+      // Fixed: Added buttons. prefix
+      @include buttons.generate-dodo-ui-utility-button-color($theme);
+    }
+  }
+
+  // ----------------------------------------
+  // Disabled
+  // ----------------------------------------
+  &[disabled] {
+    cursor: not-allowed;
+    pointer-events: none;
+    background-color: var(--dodo-ui-UtilityButton-disabled-bg);
+    color: var(--dodo-ui-UtilityButton-disabled-color);
+
+    &.outline {
+      border-color: transparent;
+    }
+  }
+
+  // ----------------------------------------
+  // Compact
+  // ----------------------------------------
+  &.compact {
+    &.size {
+      &--normal,
+      &--small,
+      &--large {
+        min-width: initial;
+        padding: 0;
+      }
+
+      &--normal {
+        width: calc(var(--dodo-ui-element-height-normal) / 1.2);
+      }
+
+      &--small {
+        width: calc(var(--dodo-ui-element-height-small) / 1.2);
+      }
+
+      &--large {
+        width: calc(var(--dodo-ui-element-height-large) / 1.2);
+      }
+    }
+  }
+}

package/dist/components/Form/UtilityButton/UtilityButton.stories.svelte

@@ -0,0 +1,154 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import UtilityButton from './UtilityButton.svelte';
+  import type { UtilityButtonProps } from './UtilityButton.svelte';
+  import type { ArgTypes } from 'storybook/internal/csf';
+  import { componentColorOptions } from '../../../attributes/color.js';
+  import { componentSizeOptions } from '../../../attributes/size.js';
+  import { componentRoundnessOptions } from '../../../attributes/roundness.js';
+  import Theme from '../../Layout/Theme/Theme.svelte';
+
+  // ------------------------------
+  // Storybook ArgTypes
+  // ------------------------------
+  export const storyUtilityButtonArgTypes: Partial<ArgTypes<UtilityButtonProps>> = {
+    // ------------------------------
+    // Core
+    // ------------------------------
+    children: { table: { category: 'API', subcategory: 'Base' } },
+    href: {
+      control: { type: 'text' },
+      description: 'Render as Anchor when provided',
+      table: { category: 'API', subcategory: 'Base' },
+    },
+    disabled: {
+      control: { type: 'boolean' },
+      description: 'Disable interactions',
+      table: { category: 'API', subcategory: 'Base' },
+    },
+    class: { table: { category: 'API', subcategory: 'Base' } },
+    type: { table: { category: 'API', subcategory: 'Base' } },
+
+    // ------------------------------
+    // Appearance
+    // ------------------------------
+    color: {
+      control: { type: 'select' },
+      options: componentColorOptions,
+      description: 'Color theme token',
+      table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: 'primary' } },
+    },
+    size: {
+      control: { type: 'select' },
+      options: componentSizeOptions,
+      description: 'Visual size token',
+      table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: 'normal' } },
+    },
+    roundness: {
+      control: { type: 'select' },
+      options: componentRoundnessOptions,
+      description: 'Border radius token',
+      table: { category: 'API', subcategory: 'Appearance' },
+    },
+    compact: {
+      control: { type: 'boolean' },
+      description: 'Compact spacing (icon buttons)',
+      table: { category: 'API', subcategory: 'Appearance' },
+    },
+    outline: {
+      control: { type: 'boolean' },
+      description: 'Render outlined style',
+      table: { category: 'API', subcategory: 'Appearance' },
+    },
+
+    // ------------------------------
+    // Accessibility
+    // ------------------------------
+    'aria-label': {
+      control: { type: 'text' },
+      description: 'Accessible label (required for icon-only buttons)',
+      table: { category: 'API', subcategory: 'Accessibility' },
+    },
+
+    // ------------------------------
+    // Events (Svelte-style)
+    // ------------------------------
+    onclick: { table: { category: 'API', subcategory: 'Events' }, action: 'click' },
+  };
+
+  // ------------------------------
+  // Storybook Meta
+  // ------------------------------
+  const { Story } = defineMeta({
+    component: UtilityButton,
+    tags: ['autodocs'],
+    argTypes: storyUtilityButtonArgTypes,
+  });
+</script>
+
+<!-- ------------------------------ -->
+<!-- Stories -->
+<!-- ------------------------------ -->
+
+<!-- A Button to be used with other components. -->
+<Story name="Primary">Click me!</Story>
+
+<Story name="Neutral" args={{ color: 'neutral', outline: true }}>Click me!</Story>
+
+<Story
+  name="OnClick (Actions)"
+  args={{
+    onclick: (e: Event) => {
+      const target = e.target as HTMLButtonElement;
+      alert('UtilityButton Clicked');
+      console.log('UtilityButton Clicked', target);
+    },
+  }}
+>
+  Click me
+</Story>
+
+<Story name="Outline" args={{ outline: true }}>Click me!</Story>
+
+<Story name="Large UtilityButton" args={{ size: 'large' }}>Large</Story>
+
+<Story name="Disabled" args={{ disabled: true }}>Click me!</Story>
+
+<Story name="Safe" args={{ color: 'safe' }}>Safe</Story>
+
+<Story name="Danger / Outline" args={{ color: 'danger', outline: true }}>Danger</Story>
+
+<Story name="Light Theme" asChild>
+  <Theme type="light">
+    <UtilityButton>Hello</UtilityButton>
+  </Theme>
+</Story>
+
+<Story name="Dark Theme" asChild globals={{ backgrounds: { value: 'dark' } }}>
+  <Theme type="dark">
+    <UtilityButton>Hello</UtilityButton>
+  </Theme>
+</Story>
+
+<Story name="Submit UtilityButton" args={{ type: 'submit' }}>Submit Form</Story>
+
+<Story
+  name="Link UtilityButton"
+  args={{
+    href: 'https://www.w3schools.com/tags/tag_a.asp',
+    target: '_blank',
+  }}
+>
+  External Link
+</Story>
+
+<Story
+  name="Icon Only (A11y Example)"
+  args={{
+    compact: true,
+    roundness: 'full',
+    'aria-label': 'Add item',
+  }}
+>
+  +
+</Story>

package/dist/{stories/developer tools/components/UtilityButton/UtilityButton.stories.svelte.d.ts → components/Form/UtilityButton/UtilityButton.stories.svelte.d.ts}

@@ -1,6 +1,7 @@
 import UtilityButton from './UtilityButton.svelte';
-import type { StoryBookArgTypes } from '../../../../storybook-types.js';
-export declare const storyUtilityButtonArgTypes: StoryBookArgTypes;
+import type { UtilityButtonProps } from './UtilityButton.svelte';
+import type { ArgTypes } from 'storybook/internal/csf';
+export declare const storyUtilityButtonArgTypes: Partial<ArgTypes<UtilityButtonProps>>;
 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;

package/dist/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 '../../../attributes/size.js';
+  import type { ComponentColor } from '../../../attributes/color.js';
+  import type { ComponentRoundness } from '../../../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/dist/components/Form/UtilityButton/UtilityButton.svelte.d.ts

@@ -0,0 +1,57 @@
+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;
+import type { ComponentSize } from '../../../attributes/size.js';
+import type { ComponentColor } from '../../../attributes/color.js';
+import type { ComponentRoundness } from '../../../attributes/roundness.js';
+import type { ButtonAsAnchorProps as ButtonAsAnchorPropsBase } from '../Button/ButtonAsAnchor.svelte';
+import type { ButtonAsButtonProps as ButtonAsButtonPropsBase } from '../Button/ButtonAsButton.svelte';
+declare const UtilityButton: import("svelte").Component<UtilityButtonProps, {}, "ref">;
+type UtilityButton = ReturnType<typeof UtilityButton>;
+export default UtilityButton;

package/dist/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;
+    }
+  }
+}