@flightlesslabs/dodo-ui 0.19.0 → 0.20.0

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

@@ -0,0 +1,168 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Button from './Button.svelte';
+  import type { ButtonProps } from './Button.svelte';
+  import type { ArgTypes } from 'storybook/internal/csf';
+  import { componentColorOptions } from '../../../attributes/color.js';
+  import { componentVariantOptions } from '../../../attributes/variant.js';
+  import { componentSizeOptions } from '../../../attributes/size.js';
+  import { componentRoundnessOptions } from '../../../attributes/roundness.js';
+  import Theme from '../../Layout/Theme/Theme.svelte';
+
+  // ------------------------------
+  // Storybook ArgTypes
+  // ------------------------------
+  export const storyButtonArgTypes: Partial<ArgTypes<ButtonProps>> = {
+    // ------------------------------
+    // 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' } },
+    },
+    variant: {
+      control: { type: 'select' },
+      options: componentVariantOptions,
+      description: 'Visual variant of the button',
+      table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: 'solid' } },
+    },
+    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' },
+    },
+    fullWidth: {
+      control: { type: 'boolean' },
+      description: 'Stretch button to full container width',
+      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: Button,
+    tags: ['autodocs'],
+    argTypes: storyButtonArgTypes,
+  });
+</script>
+
+<!-- ------------------------------ -->
+<!-- Stories -->
+<!-- ------------------------------ -->
+
+<Story name="Primary">Click me!</Story>
+
+<Story name="Neutral" args={{ color: 'neutral', variant: 'text', outline: true }}>Click me!</Story>
+
+<Story
+  name="OnClick (Actions)"
+  args={{
+    onclick: (e: Event) => {
+      const target = e.target as HTMLButtonElement;
+      alert('Button Clicked');
+      console.log('Button Clicked', target);
+    },
+  }}
+>
+  Click me
+</Story>
+
+<Story name="Outline" args={{ outline: true, variant: 'text' }}>Click me!</Story>
+
+<Story name="Large Button" 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', variant: 'text', outline: true }}>
+  Danger
+</Story>
+
+<Story name="Submit Button" args={{ type: 'submit' }}>Submit Form</Story>
+
+<Story name="Full Width" args={{ fullWidth: true }}>Click me!</Story>
+
+<Story
+  name="Link Button"
+  args={{
+    href: 'https://www.w3schools.com/tags/tag_a.asp',
+    target: '_blank',
+  }}
+>
+  External Link
+</Story>
+
+<Story
+  name="Icon Only (A11y Example)"
+  args={{
+    compact: true,
+    'aria-label': 'Add item',
+  }}
+>
+  +
+</Story>
+
+<Story name="Light Theme" asChild>
+  <Theme type="light">
+    <Button>Hello</Button>
+  </Theme>
+</Story>
+
+<Story name="Dark Theme" asChild globals={{ backgrounds: { value: 'dark' } }}>
+  <Theme type="dark">
+    <Button>Hello</Button>
+  </Theme>
+</Story>

package/dist/{stories/components → components}/Form/Button/Button.stories.svelte.d.ts

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

@@ -0,0 +1,139 @@
+<script lang="ts" module>
+  import type { Snippet } from 'svelte';
+
+  /**
+   * Shared base props for the Button component.
+   *
+   * These props apply to both the <button> and <a> render modes.
+   */
+  interface ButtonBaseProps {
+    /** Button contents */
+    children?: Snippet;
+
+    /** Visual size token */
+    size?: ComponentSize;
+
+    /** Stretch button to full container width */
+    fullWidth?: boolean;
+
+    /** Color theme token */
+    color?: ComponentColor;
+
+    /** Border radius token (0–3, "pill", "full") */
+    roundness?: ComponentRoundness;
+
+    /** Visual variant (e.g. solid, text) */
+    variant?: ComponentVariant;
+
+    /** Add a border around the button */
+    outline?: boolean;
+
+    /** Compact spacing, typically for icon-only buttons */
+    compact?: boolean;
+
+    /** Custom CSS class names */
+    class?: string;
+
+    /** Accessible label (required for icon-only buttons) */
+    'aria-label'?: string;
+  }
+
+  /**
+   * Button component props (button variant).
+   *
+   * Renders a semantic <button> element when `href` is not provided.
+   * Inherits all native HTML button attributes.
+   */
+  export type ButtonAsButtonProps = ButtonBaseProps & ButtonAsButtonPropsBase;
+
+  /**
+   * Button component props (anchor variant).
+   *
+   * Renders an <a> element when `href` is provided.
+   * Inherits all native HTML anchor attributes, except `type`.
+   */
+  export type ButtonAsAnchorProps = ButtonBaseProps & ButtonAsAnchorPropsBase;
+
+  /**
+   * Button component props.
+   *
+   * Renders a semantic <button> 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 button-only props are disabled.
+   * - When `href` is absent, button props are enabled and anchor-only props are disabled.
+   */
+  export type ButtonProps = ButtonAsButtonProps | ButtonAsAnchorProps;
+</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 type { ComponentVariant } from '../../../attributes/variant.js';
+  import type { ButtonAsAnchorProps as ButtonAsAnchorPropsBase } from './ButtonAsAnchor.svelte';
+  import ButtonAsAnchor from './ButtonAsAnchor.svelte';
+  import type { ButtonAsButtonProps as ButtonAsButtonPropsBase } from './ButtonAsButton.svelte';
+  import ButtonAsButton from './ButtonAsButton.svelte';
+
+  /**
+   * Button component runtime props.
+   *
+   * These props are destructured from `$props()` and mapped to the underlying
+   * Bits UI Button root component, with semantic rendering based on `href`.
+   */
+  let {
+    size = 'normal',
+    color = 'primary',
+    roundness = 1,
+    variant = 'solid',
+    outline = false,
+    compact = false,
+    fullWidth = false,
+    class: className = '',
+    disabled = false,
+    'aria-label': ariaLabel,
+    href,
+    ref = $bindable(null),
+    type,
+    ...restProps
+  }: ButtonProps = $props();
+
+  /**
+   * Computed class list for the Button component.
+   */
+  const classes = $derived(
+    [
+      'dodo-ui-Button',
+      `size--${size}`,
+      `color--${color}`,
+      `variant--${variant}`,
+      `roundness--${roundness}`,
+      outline && 'outline',
+      compact && 'compact',
+      fullWidth && 'fullWidth',
+      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/Button/Button.svelte.d.ts

@@ -0,0 +1,62 @@
+import type { Snippet } from 'svelte';
+/**
+ * Shared base props for the Button component.
+ *
+ * These props apply to both the <button> and <a> render modes.
+ */
+interface ButtonBaseProps {
+    /** Button contents */
+    children?: Snippet;
+    /** Visual size token */
+    size?: ComponentSize;
+    /** Stretch button to full container width */
+    fullWidth?: boolean;
+    /** Color theme token */
+    color?: ComponentColor;
+    /** Border radius token (0–3, "pill", "full") */
+    roundness?: ComponentRoundness;
+    /** Visual variant (e.g. solid, text) */
+    variant?: ComponentVariant;
+    /** Add a border around the button */
+    outline?: boolean;
+    /** Compact spacing, typically for icon-only buttons */
+    compact?: boolean;
+    /** Custom CSS class names */
+    class?: string;
+    /** Accessible label (required for icon-only buttons) */
+    'aria-label'?: string;
+}
+/**
+ * Button component props (button variant).
+ *
+ * Renders a semantic <button> element when `href` is not provided.
+ * Inherits all native HTML button attributes.
+ */
+export type ButtonAsButtonProps = ButtonBaseProps & ButtonAsButtonPropsBase;
+/**
+ * Button component props (anchor variant).
+ *
+ * Renders an <a> element when `href` is provided.
+ * Inherits all native HTML anchor attributes, except `type`.
+ */
+export type ButtonAsAnchorProps = ButtonBaseProps & ButtonAsAnchorPropsBase;
+/**
+ * Button component props.
+ *
+ * Renders a semantic <button> 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 button-only props are disabled.
+ * - When `href` is absent, button props are enabled and anchor-only props are disabled.
+ */
+export type ButtonProps = ButtonAsButtonProps | ButtonAsAnchorProps;
+import type { ComponentSize } from '../../../attributes/size.js';
+import type { ComponentColor } from '../../../attributes/color.js';
+import type { ComponentRoundness } from '../../../attributes/roundness.js';
+import type { ComponentVariant } from '../../../attributes/variant.js';
+import type { ButtonAsAnchorProps as ButtonAsAnchorPropsBase } from './ButtonAsAnchor.svelte';
+import type { ButtonAsButtonProps as ButtonAsButtonPropsBase } from './ButtonAsButton.svelte';
+declare const Button: import("svelte").Component<ButtonProps, {}, "ref">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/components/Form/Button/ButtonAsAnchor.svelte

@@ -0,0 +1,24 @@
+<script lang="ts" module>
+  import type { HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
+
+  export type ButtonAsAnchorProps = ButtonRootPropsWithoutHTML &
+    WithoutChildren<Omit<HTMLAnchorAttributes, 'href' | 'type'>> & {
+      href: HTMLAnchorAttributes['href'];
+      type?: never;
+      disabled?: HTMLButtonAttributes['disabled'];
+    };
+</script>
+
+<script lang="ts">
+  import {
+    Button as BitsUiButton,
+    type ButtonRootPropsWithoutHTML,
+    type WithoutChildren,
+  } from 'bits-ui';
+
+  let { children, ref = $bindable(null), type, ...restProps }: ButtonAsAnchorProps = $props();
+</script>
+
+<BitsUiButton.Root {...restProps} bind:ref>
+  {@render children?.()}
+</BitsUiButton.Root>

package/dist/components/Form/Button/ButtonAsAnchor.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
+export type ButtonAsAnchorProps = ButtonRootPropsWithoutHTML & WithoutChildren<Omit<HTMLAnchorAttributes, 'href' | 'type'>> & {
+    href: HTMLAnchorAttributes['href'];
+    type?: never;
+    disabled?: HTMLButtonAttributes['disabled'];
+};
+import { type ButtonRootPropsWithoutHTML, type WithoutChildren } from 'bits-ui';
+declare const ButtonAsAnchor: import("svelte").Component<ButtonAsAnchorProps, {}, "ref">;
+type ButtonAsAnchor = ReturnType<typeof ButtonAsAnchor>;
+export default ButtonAsAnchor;

package/dist/components/Form/Button/ButtonAsButton.svelte

@@ -0,0 +1,24 @@
+<script lang="ts" module>
+  import type { HTMLButtonAttributes } from 'svelte/elements';
+
+  export type ButtonAsButtonProps = ButtonRootPropsWithoutHTML &
+    WithoutChildren<Omit<HTMLButtonAttributes, 'type' | 'href'>> & {
+      type?: HTMLButtonAttributes['type'];
+      href?: never;
+      disabled?: HTMLButtonAttributes['disabled'];
+    };
+</script>
+
+<script lang="ts">
+  import {
+    Button as BitsUiButton,
+    type ButtonRootPropsWithoutHTML,
+    type WithoutChildren,
+  } from 'bits-ui';
+
+  let { children, ref = $bindable(null), ...restProps }: ButtonAsButtonProps = $props();
+</script>
+
+<BitsUiButton.Root {...restProps} bind:ref>
+  {@render children?.()}
+</BitsUiButton.Root>

package/dist/components/Form/Button/ButtonAsButton.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLButtonAttributes } from 'svelte/elements';
+export type ButtonAsButtonProps = ButtonRootPropsWithoutHTML & WithoutChildren<Omit<HTMLButtonAttributes, 'type' | 'href'>> & {
+    type?: HTMLButtonAttributes['type'];
+    href?: never;
+    disabled?: HTMLButtonAttributes['disabled'];
+};
+import { type ButtonRootPropsWithoutHTML, type WithoutChildren } from 'bits-ui';
+declare const ButtonAsButton: import("svelte").Component<ButtonAsButtonProps, {}, "ref">;
+type ButtonAsButton = ReturnType<typeof ButtonAsButton>;
+export default ButtonAsButton;

package/dist/components/Form/CheckEnclosure/CheckEnclosure.scss

@@ -0,0 +1,93 @@
+@use '../../../styles/scss/mixins/check-enclosure-colors' as checkEnclosure;
+
+// ----------------------------------------
+// Config
+// ----------------------------------------
+$dodo-checkEnclosure-themes: neutral, primary, secondary, safe, warning, danger;
+
+// ----------------------------------------
+// Theme tokens (global CSS variables)
+// ----------------------------------------
+:root {
+  --dodo-ui-CheckEnclosure-disabled-color: var(--dodo-color-neutral-400);
+  --dodo-ui-CheckEnclosure-disabled-bg: var(--dodo-color-neutral-200);
+
+  @each $theme in $dodo-checkEnclosure-themes {
+    // Fixed: Added buttons. prefix
+    @include checkEnclosure.generate-dodo-ui-checkEnclosure-colors($theme, light);
+  }
+}
+
+.dodo-theme--dark {
+  --dodo-ui-CheckEnclosure-disabled-bg: var(--dodo-color-neutral-100);
+  --dodo-ui-CheckEnclosure-disabled-color: var(--dodo-color-neutral-500);
+
+  @each $theme in $dodo-checkEnclosure-themes {
+    // Fixed: Added buttons. prefix
+    @include checkEnclosure.generate-dodo-ui-checkEnclosure-colors($theme, dark);
+  }
+}
+
+// ----------------------------------------
+// CheckEnclosure styles
+// ----------------------------------------
+
+.CheckEnclosure {
+  // ----------------------------------------
+  // Theme colors
+  // ----------------------------------------
+  &.color {
+    @each $theme in $dodo-checkEnclosure-themes {
+      // Fixed: Added buttons. prefix
+      @include checkEnclosure.generate-dodo-ui-checkEnclosure-color($theme);
+    }
+  }
+
+  // ----------------------------------------
+  // Disabled
+  // ----------------------------------------
+  &[disabled] {
+    cursor: not-allowed;
+    pointer-events: none;
+    border-color: transparent;
+
+    &.variant {
+      &--text {
+        background-color: var(--dodo-ui-CheckEnclosure-disabled-bg);
+        color: var(--dodo-ui-CheckEnclosure-disabled-color);
+
+        .CheckThumbInternal {
+          background-color: var(--dodo-ui-CheckEnclosure-disabled-color);
+        }
+
+        &[data-state='checked'] {
+          border-color: var(--dodo-color-neutral-400);
+        }
+      }
+
+      &--solid {
+        color: var(--dodo-color-constant-white);
+        background-color: var(--dodo-ui-CheckEnclosure-disabled-bg);
+
+        .CheckThumbInternal {
+          background-color: var(--dodo-color-constant-white);
+        }
+
+        &[data-state='checked'] {
+          background-color: var(--dodo-color-neutral-400);
+          border-color: transparent;
+        }
+      }
+    }
+
+    &.CheckEnclosureBackdrop {
+      &.variant {
+        &--text {
+          &[data-state='checked'] {
+            background-color: var(--dodo-ui-CheckEnclosure-disabled-bg);
+          }
+        }
+      }
+    }
+  }
+}

package/dist/components/Form/Checkbox/Checkbox.scss

@@ -0,0 +1,105 @@
+// ----------------------------------------
+// SCSS maps
+// ----------------------------------------
+
+$roundness: (
+  1: calc(var(--dodo-ui-element-roundness-1) / 2),
+  2: calc(var(--dodo-ui-element-roundness-2) / 2),
+  3: calc(var(--dodo-ui-element-roundness-3) / 2),
+  pill: 999px,
+);
+
+// ----------------------------------------
+// Checkbox styles
+// ----------------------------------------
+
+.dodo-ui-Checkbox {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  color: var(--dodo-color-neutral-800);
+
+  .CheckEnclosure {
+    cursor: pointer;
+    transition: background-color 70ms;
+    text-decoration: none;
+    margin: 0;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    font-family: inherit;
+    background-color: var(--dodo-color-neutral-100);
+    border-style: solid;
+    border-width: var(--dodo-ui-element-border-width);
+    border-color: transparent;
+    color: inherit;
+    letter-spacing: 0.3px;
+    padding: 0;
+  }
+
+  .CheckComponentLabel {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    margin-left: var(--dodo-ui-space);
+  }
+
+  .CheckComponentCheckContainer {
+    display: flex;
+    align-items: center;
+  }
+
+  // ----------------------------------------
+  // Sizes
+  // ----------------------------------------
+  &.size {
+    &--normal {
+      font-size: 1rem;
+      .CheckEnclosure {
+        height: calc(var(--dodo-ui-element-height-normal) / 1.6);
+        width: calc(var(--dodo-ui-element-height-normal) / 1.6);
+      }
+
+      .CheckComponentCheckContainer {
+        font-size: 1.7rem;
+      }
+    }
+
+    &--small {
+      font-size: 0.9rem;
+      .CheckEnclosure {
+        height: calc(var(--dodo-ui-element-height-small) / 1.6);
+        width: calc(var(--dodo-ui-element-height-small) / 1.6);
+      }
+
+      .CheckComponentCheckContainer {
+        font-size: 1.5rem;
+      }
+    }
+
+    &--large {
+      font-size: 1.1rem;
+      .CheckEnclosure {
+        height: calc(var(--dodo-ui-element-height-large) / 1.6);
+        width: calc(var(--dodo-ui-element-height-large) / 1.6);
+      }
+
+      .CheckComponentCheckContainer {
+        font-size: 2.2rem;
+      }
+    }
+  }
+
+  // ----------------------------------------
+  // Roundness
+  // ----------------------------------------
+  &.roundness {
+    @each $name, $radius in $roundness {
+      &--#{$name} {
+        .CheckEnclosure {
+          border-radius: $radius;
+        }
+      }
+    }
+  }
+}