@flightlesslabs/dodo-ui 0.19.1 → 1.0.0--beta-2

package/src/lib/components/Form/Button/Button.scss

@@ -0,0 +1,164 @@
+@use '../../../styles/scss/mixins/button-color' as buttons;
+
+// ----------------------------------------
+// Config
+// ----------------------------------------
+$dodo-button-themes: neutral, primary, secondary, safe, warning, danger;
+
+// ----------------------------------------
+// Theme tokens (global CSS variables)
+// ----------------------------------------
+:root {
+  --dodo-ui-Button-disabled-color: var(--dodo-color-neutral-400);
+  --dodo-ui-Button-disabled-bg: var(--dodo-color-neutral-200);
+
+  @each $theme in $dodo-button-themes {
+    // Fixed: Added buttons. prefix
+    @include buttons.generate-dodo-ui-button-colors($theme, light);
+  }
+}
+
+.dodo-theme--dark {
+  --dodo-ui-Button-disabled-bg: var(--dodo-color-neutral-100);
+  --dodo-ui-Button-disabled-color: var(--dodo-color-neutral-500);
+
+  @each $theme in $dodo-button-themes {
+    // Fixed: Added buttons. prefix
+    @include buttons.generate-dodo-ui-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-Button {
+  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: var(--dodo-ui-element-height-normal);
+      font-size: 1rem;
+      padding: 0 calc(var(--dodo-ui-space-small) * 2);
+      min-width: 45px;
+    }
+
+    &--small {
+      height: var(--dodo-ui-element-height-small);
+      padding: 0 var(--dodo-ui-space);
+      font-size: 0.9rem;
+      min-width: 35px;
+    }
+
+    &--large {
+      height: var(--dodo-ui-element-height-large);
+      font-size: 1.1rem;
+      padding: 0 calc(var(--dodo-ui-space) * 2);
+      min-width: 85px;
+    }
+  }
+
+  // ----------------------------------------
+  // Roundness
+  // ----------------------------------------
+  &.roundness {
+    @each $name, $radius in $roundness {
+      &--#{$name} {
+        border-radius: $radius;
+      }
+    }
+  }
+
+  // ----------------------------------------
+  // Theme colors
+  // ----------------------------------------
+  &.color {
+    @each $theme in $dodo-button-themes {
+      // Fixed: Added buttons. prefix
+      @include buttons.generate-dodo-ui-button-color($theme);
+    }
+  }
+
+  // ----------------------------------------
+  // Disabled
+  // ----------------------------------------
+  &[disabled] {
+    cursor: not-allowed;
+    pointer-events: none;
+
+    &.variant {
+      &--text,
+      &--solid {
+        background-color: var(--dodo-ui-Button-disabled-bg);
+        color: var(--dodo-ui-Button-disabled-color);
+
+        &.outline {
+          border-color: transparent;
+        }
+      }
+    }
+  }
+
+  // ----------------------------------------
+  // Compact
+  // ----------------------------------------
+  &.compact {
+    &.size {
+      &--normal,
+      &--small,
+      &--large {
+        min-width: initial;
+        padding: 0;
+      }
+
+      &--normal {
+        width: var(--dodo-ui-element-height-normal);
+      }
+
+      &--small {
+        width: var(--dodo-ui-element-height-small);
+      }
+
+      &--large {
+        width: var(--dodo-ui-element-height-large);
+      }
+    }
+  }
+
+  // ----------------------------------------
+  // Full width
+  // ----------------------------------------
+  &.fullWidth {
+    width: 100%;
+  }
+}

package/src/lib/components/Form/Button/Button.stories.svelte

@@ -0,0 +1,156 @@
+<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 '$lib/attributes/color.js';
+  import { componentVariantOptions } from '$lib/attributes/variant.js';
+  import { componentSizeOptions } from '$lib/attributes/size.js';
+  import { componentRoundnessOptions } from '$lib/attributes/roundness.js';
+
+  // ------------------------------
+  // Storybook ArgTypes
+  // ------------------------------
+  export const storyButtonArgTypes: Partial<ArgTypes<ButtonProps>> = {
+    // ------------------------------
+    // Core
+    // ------------------------------
+    children: { table: { category: 'API', subcategory: 'Base' } },
+    ref: { 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>

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

@@ -0,0 +1,165 @@
+<script lang="ts" module>
+  import type { Snippet } from 'svelte';
+  import type { HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
+
+  /**
+   * Shared base props for the Button component.
+   *
+   * These props apply to both the <button> and <a> render modes.
+   */
+  interface ButtonBaseProps {
+    /** Button contents */
+    children?: Snippet;
+
+    /** Reference to the underlying button or anchor element */
+    ref?: HTMLButtonElement | HTMLAnchorElement;
+
+    /** 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 &
+    Omit<HTMLButtonAttributes, 'href'> & {
+      /** Render as link when provided (not allowed for button variant) */
+      href?: never;
+
+      /** Disabled state of the button */
+      disabled?: HTMLButtonAttributes['disabled'];
+    };
+
+  /**
+   * 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 &
+    Omit<HTMLAnchorAttributes, 'type'> & {
+      /** Render as link when provided */
+      href: HTMLAnchorAttributes['href'];
+
+      /** Button `type` is not supported when rendering as an anchor */
+      type?: never;
+
+      /** Disabled visual state (forwarded to button root for styling/ARIA) */
+      disabled?: HTMLButtonAttributes['disabled'];
+    };
+
+  /**
+   * 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 './Button.scss';
+  import { Button as BitsUiButton } from 'bits-ui';
+  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 type { ComponentVariant } from '$lib/attributes/variant.js';
+
+  /**
+   * 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 {
+    children,
+    size = 'normal',
+    color = 'primary',
+    roundness = 1,
+    variant = 'solid',
+    outline = false,
+    compact = false,
+    fullWidth = false,
+    class: className = '',
+    disabled = false,
+    'aria-label': ariaLabel,
+    href,
+    ref,
+    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}
+  <!-- Anchor variant -->
+  <BitsUiButton.Root
+    {...restProps as Omit<HTMLAnchorAttributes, 'type'>}
+    {disabled}
+    aria-label={ariaLabel}
+    class={classes.join(' ')}
+    {ref}
+    {href}
+  >
+    {@render children?.()}
+  </BitsUiButton.Root>
+{:else}
+  <!-- Button variant -->
+  <BitsUiButton.Root
+    {...restProps as HTMLButtonAttributes}
+    {disabled}
+    aria-label={ariaLabel}
+    class={classes.join(' ')}
+    {ref}
+    {type}
+  >
+    {@render children?.()}
+  </BitsUiButton.Root>
+{/if}

package/src/lib/components/Form/InputEnclosure/InputAffix.svelte

@@ -0,0 +1,52 @@
+<script lang="ts" module>
+  import type { ComponentSize } from '$lib/attributes/size.js';
+  import type { Snippet } from 'svelte';
+
+  /**
+   * InputAffix props.
+   *
+   * Internal-only component used by InputEnclosure to render
+   * leading or trailing content (e.g. icons, buttons, prefixes/suffixes).
+   *
+   * This component is not part of the public API.
+   */
+  export interface InputAffixProps {
+    /** Content rendered inside the affix (icon, button, text, etc.) */
+    children?: Snippet;
+
+    /** Visual size token (e.g. small, normal, large) */
+    size?: ComponentSize;
+
+    /**
+     * Placement of the affix relative to the input.
+     *
+     * - "before": renders before the input control
+     * - "after": renders after the input control
+     */
+    placement: 'before' | 'after';
+  }
+</script>
+
+<script lang="ts">
+  let { children, size = 'normal', placement }: InputAffixProps = $props();
+
+  /**
+   * Computed class list for the InputAffix.
+   */
+  const classes = $derived(
+    ['dodo-ui-InputAffix', `size--${size}`, `placement--${placement}`].filter(Boolean),
+  );
+</script>
+
+<span class={classes.join(' ')}>
+  {@render children?.()}
+</span>
+
+<style lang="scss">
+  .dodo-ui-InputAffix {
+    display: inline-flex;
+    height: 100%;
+    align-items: center;
+    position: relative;
+  }
+</style>

package/src/lib/components/Form/InputEnclosure/InputEnclosure.scss

@@ -0,0 +1,105 @@
+// ----------------------------------------
+// Theme tokens (global CSS variables)
+// ----------------------------------------
+:root {
+  --dodo-ui-InputEnclosure-border-color: var(--dodo-color-neutral-500);
+  --dodo-ui-InputEnclosure-focus-border-color: var(--dodo-color-primary-500);
+  --dodo-ui-InputEnclosure-error-border-color: var(--dodo-color-danger-500);
+  --dodo-ui-InputEnclosure-safe-border-color: var(--dodo-color-safe-500);
+
+  --dodo-ui-InputEnclosure-disabled-color: var(--dodo-color-neutral-400);
+  --dodo-ui-InputEnclosure-disabled-bg: var(--dodo-color-neutral-200);
+}
+
+.dodo-theme--dark {
+  --dodo-ui-InputEnclosure-border-color: var(--dodo-color-neutral-600);
+  --dodo-ui-InputEnclosure-focus-border-color: var(--dodo-color-primary-600);
+  --dodo-ui-InputEnclosure-error-border-color: var(--dodo-color-danger-600);
+  --dodo-ui-InputEnclosure-safe-border-color: var(--dodo-color-safe-600);
+
+  --dodo-ui-InputEnclosure-disabled-bg: var(--dodo-color-neutral-100);
+  --dodo-ui-InputEnclosure-disabled-color: var(--dodo-color-neutral-500);
+}
+
+// ----------------------------------------
+// SCSS maps
+// ----------------------------------------
+$sizes: (
+  small: var(--dodo-ui-element-height-small),
+  normal: var(--dodo-ui-element-height-normal),
+  large: var(--dodo-ui-element-height-large),
+);
+
+$roundness: (
+  1: var(--dodo-ui-element-roundness-1),
+  2: var(--dodo-ui-element-roundness-2),
+  3: var(--dodo-ui-element-roundness-3),
+  pill: 999px,
+);
+
+// Visual states → border colors
+$states: (
+  focused: var(--dodo-ui-InputEnclosure-focus-border-color),
+  error: var(--dodo-ui-InputEnclosure-error-border-color),
+);
+
+// ----------------------------------------
+// Component CSS
+// ----------------------------------------
+.dodo-ui-InputEnclosure {
+  display: flex;
+  overflow: hidden;
+  color: var(--dodo-color-neutral-800);
+  transition:
+    border-color 150ms,
+    background-color 150ms,
+    color 150ms;
+  border: 0;
+
+  &.outline {
+    border-style: solid;
+    border-width: var(--dodo-ui-element-border-width);
+    border-color: var(--dodo-ui-InputEnclosure-border-color);
+  }
+
+  // ----------------------------------------
+  // Visual states (focused, error)
+  // ----------------------------------------
+  @each $state, $color in $states {
+    &.#{$state} {
+      border-color: $color;
+    }
+  }
+
+  // ----------------------------------------
+  // Disabled
+  // ----------------------------------------
+  &.disabled {
+    cursor: not-allowed;
+    background-color: var(--dodo-ui-InputEnclosure-disabled-bg);
+    color: var(--dodo-ui-InputEnclosure-disabled-color);
+    border-color: var(--dodo-ui-InputEnclosure-disabled-bg);
+  }
+
+  // ----------------------------------------
+  // Sizes
+  // ----------------------------------------
+  &.size {
+    @each $name, $height in $sizes {
+      &--#{$name} {
+        height: $height;
+      }
+    }
+  }
+
+  // ----------------------------------------
+  // Roundness
+  // ----------------------------------------
+  &.roundness {
+    @each $name, $radius in $roundness {
+      &--#{$name} {
+        border-radius: $radius;
+      }
+    }
+  }
+}