@flightlesslabs/dodo-ui 0.6.6 → 0.7.1

package/src/lib/stories/components/Layout/Menu/MenuItem/MenuItem.svelte

@@ -0,0 +1,268 @@
+<script lang="ts" module>
+  import type {
+    ButtonLinkReferrerpolicy,
+    ButtonLinkTarget,
+  } from '$lib/stories/components/Form/Button/Button.svelte';
+  import { type Snippet } from 'svelte';
+  import type { MouseEventHandler } from 'svelte/elements';
+
+  export type MenuItemType = 'text' | 'button' | 'link';
+
+  export const menuItemTypeArray: MenuItemType[] = ['text', 'button', 'link'];
+
+  export interface MenuItemProps {
+    /** MenuItem contents goes here */
+    children?: Snippet;
+    /** MenuItem ref */
+    ref?: HTMLLIElement;
+    /** Custom css class */
+    class?: string;
+    /** Id */
+    id?: string;
+    /** Menu Item type */
+    type?: MenuItemType;
+    /** Menu Item type */
+    selected?: boolean;
+    /** Separator */
+    separator?: boolean;
+    /** How large should the Menu Items be? */
+    size?: ComponentSize;
+    /** The onclick event handler */
+    onclick?: MouseEventHandler<HTMLButtonElement>;
+    /**  disabled state */
+    disabled?: boolean;
+    /** link href */
+    href?: string;
+    /** Link button: download  */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    download?: any;
+    /** Link button: hreflang  */
+    hreflang?: string | undefined | null;
+    /** Link button: media  */
+    media?: string | undefined | null;
+    /** Link button: ping  */
+    ping?: string | undefined | null;
+    /** Link button: rel  */
+    rel?: string | undefined | null;
+    /** Link button: target  */
+    target?: ButtonLinkTarget;
+    /** Link button: Type  */
+    anchorMediaType?: string | undefined | null;
+    /** Link button: referrerpolicy  */
+    referrerpolicy?: ButtonLinkReferrerpolicy;
+  }
+</script>
+
+<script lang="ts">
+  import { getContext } from 'svelte';
+  import type { ComponentSize } from '$lib/types/size.js';
+
+  let {
+    children,
+    id,
+    class: className = '',
+    type = 'text',
+    href,
+    download,
+    hreflang,
+    media,
+    ping,
+    rel,
+    target,
+    anchorMediaType,
+    referrerpolicy,
+    disabled = false,
+    selected = false,
+    separator: separatorInternal,
+    onclick,
+    size: sizeInternal,
+    ref = $bindable<HTMLLIElement>(),
+  }: MenuItemProps = $props();
+
+  const hover = false;
+
+  const sizeMenu = // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (getContext<any>('MenuItemSize') ? getContext<any>('MenuItemSize')() : undefined) as
+      | ComponentSize
+      | undefined;
+  const size = sizeMenu || sizeInternal || 'normal';
+
+  const separatorMenu = // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (getContext<any>('MenuItemSeparator') ? getContext<any>('MenuItemSeparator')() : undefined) as
+      | boolean
+      | undefined;
+  const separator = separatorMenu !== undefined ? separatorMenu : separatorInternal || false;
+</script>
+
+{#snippet menuItemContent()}
+  {#if children}
+    {@render children()}
+  {/if}
+{/snippet}
+
+<li
+  class:disabled
+  class:separator
+  class:selected
+  class:hover
+  class={['dodo-ui-MenuItem', `size--${size}`, className].join(' ')}
+  {id}
+  bind:this={ref}
+>
+  {#if type === 'link'}
+    <a
+      class:disabled
+      class:selected
+      class={['MenuItem-type', `MenuItem-type--${type}`, `size--${size}`].join(' ')}
+      {href}
+      {download}
+      {hreflang}
+      {media}
+      {ping}
+      {rel}
+      {target}
+      type={anchorMediaType}
+      {referrerpolicy}
+    >
+      {@render menuItemContent()}
+    </a>
+  {:else if type === 'button'}
+    <button
+      class:disabled
+      class:selected
+      class={['MenuItem-type', `MenuItem-type--${type}`, `size--${size}`].join(' ')}
+      {onclick}
+      {disabled}
+    >
+      {@render menuItemContent()}
+    </button>
+  {:else}
+    <div
+      class:disabled
+      class:selected
+      class={['MenuItem-type', `MenuItem-type--${type}`, `size--${size}`].join(' ')}
+    >
+      {@render menuItemContent()}
+    </div>
+  {/if}
+</li>
+
+<style lang="scss">
+  :global(:root) {
+    --dodo-ui-MenuItem-selected-bg: color-mix(
+      in oklab,
+      var(--dodo-color-neutral-800) 4%,
+      transparent
+    );
+    --dodo-ui-MenuItem-hover-bg: color-mix(in oklab, var(--dodo-color-neutral-800) 8%, transparent);
+    --dodo-ui-MenuItem-active-bg: color-mix(
+      in oklab,
+      var(--dodo-color-neutral-800) 11%,
+      transparent
+    );
+
+    --dodo-ui-MenuItem-separator-color: var(--dodo-color-neutral-300);
+
+    --dodo-ui-MenuItem-disabled-color: var(--dodo-color-neutral-400);
+  }
+
+  :global(.dodo-theme--dark) {
+    --dodo-ui-MenuItem-selected-bg: color-mix(
+      in oklab,
+      var(--dodo-color-neutral-800) 4%,
+      transparent
+    );
+    --dodo-ui-MenuItem-hover-bg: color-mix(in oklab, var(--dodo-color-neutral-800) 8%, transparent);
+    --dodo-ui-MenuItem-active-bg: color-mix(
+      in oklab,
+      var(--dodo-color-neutral-800) 15%,
+      transparent
+    );
+
+    --dodo-ui-MenuItem-separator-color: var(--dodo-color-neutral-300);
+
+    --dodo-ui-MenuItem-disabled-color: var(--dodo-color-neutral-500);
+  }
+
+  .dodo-ui-MenuItem {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    user-select: none;
+
+    &.separator {
+      border-bottom: 1px solid var(--dodo-ui-MenuItem-separator-color);
+    }
+
+    .MenuItem-type {
+      cursor: pointer;
+      transition: all 70ms;
+      text-decoration: none;
+      margin: 0;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      border: 0;
+      outline: 0;
+      background-color: transparent;
+      color: inherit;
+      font-family: inherit;
+      width: 100%;
+
+      &.selected {
+        background-color: var(--dodo-ui-MenuItem-selected-bg);
+      }
+
+      &:hover {
+        background-color: var(--dodo-ui-MenuItem-hover-bg);
+      }
+
+      &:active {
+        background-color: var(--dodo-ui-MenuItem-active-bg);
+      }
+
+      &.size {
+        &--normal {
+          min-height: var(--dodo-ui-element-height-normal);
+          font-size: 1rem;
+          padding: 0 calc(var(--dodo-ui-space-small) * 2);
+        }
+
+        &--small {
+          min-height: var(--dodo-ui-element-height-small);
+          padding: 0 var(--dodo-ui-space);
+          font-size: 0.9rem;
+        }
+
+        &--large {
+          min-height: var(--dodo-ui-element-height-large);
+          font-size: 1.1rem;
+          padding: 0 calc(var(--dodo-ui-space) * 2);
+        }
+      }
+
+      &.disabled {
+        cursor: initial;
+
+        background-color: transparent;
+        color: var(--dodo-ui-MenuItem-disabled-color);
+
+        &:hover {
+          background-color: transparent;
+          color: var(--dodo-ui-MenuItem-disabled-color);
+        }
+
+        &:active {
+          background-color: transparent;
+          color: var(--dodo-ui-MenuItem-disabled-color);
+        }
+      }
+    }
+
+    &.hover {
+      .MenuItem-type {
+        background-color: var(--dodo-ui-MenuItem-hover-bg);
+      }
+    }
+  }
+</style>

package/src/lib/stories/components/Layout/Paper/Paper.svelte

@@ -1,4 +1,7 @@
 <script lang="ts" module>
+  import type { ComponentRoundness } from '$lib/types/roundness.js';
+  import type { ComponentShadow } from '$lib/types/shadow.js';
+  import type { ComponentWeight } from '$lib/types/weight.js';
   import {
     componentColorPriorityArray,
     componentColorSeverityArray,
@@ -12,16 +15,8 @@
     ...componentColorPriorityArray,
     ...componentColorSeverityArray,
   ];
-</script>
 
-<script lang="ts">
-  import type { ComponentRoundness } from '$lib/types/roundness.js';
-  import type { ComponentShadow } from '$lib/types/shadow.js';
-  import type { ComponentWeight } from '$lib/types/weight.js';
-
-  import type { Snippet } from 'svelte';
-
-  interface PaperProps {
+  export interface PaperProps {
     /** Paper contents goes here */
     children?: Snippet;
     /** Paper ref */
@@ -49,6 +44,10 @@
     /** Custom border color. Use CSS compatible value */
     customBorderColor?: string;
   }
+</script>
+
+<script lang="ts">
+  import type { Snippet } from 'svelte';
 
   let {
     children,

package/src/lib/stories/components/Layout/Separator/Separator.svelte

@@ -0,0 +1,96 @@
+<script lang="ts" module>
+  import type { ComponentColor } from '$lib/types/colors.js';
+
+  export type SeparatorOrientation = 'horizontal' | 'vertical';
+
+  export const separatorOrientationArray: SeparatorOrientation[] = ['horizontal', 'vertical'];
+
+  export interface SeparatorProps {
+    /** Separator ref */
+    ref?: HTMLDivElement;
+    /** Custom css class */
+    class?: string;
+    /** Id */
+    id?: string;
+    /** What color to use? */
+    color?: ComponentColor;
+    /** Separator Width */
+    width?: string;
+    /** Separator Height */
+    height?: string;
+    /** Separator orientation,  'horizontal', 'vertical'*/
+    orientation?: SeparatorOrientation;
+  }
+</script>
+
+<script lang="ts">
+  let {
+    id,
+    class: className = '',
+    orientation = 'horizontal',
+    color = 'neutral',
+    ref = $bindable<HTMLDivElement>(),
+    width,
+    height,
+  }: SeparatorProps = $props();
+</script>
+
+<div
+  class={['dodo-ui-Separator', `color--${color}`, `orientation--${orientation}`, className].join(
+    ' ',
+  )}
+  {id}
+  style={`${width ? `width:${width};` : ''}
+  ${height ? `height:${height};` : ''}
+  `}
+  bind:this={ref}
+></div>
+
+<style lang="scss">
+  @use 'utils/scss/mixins.scss' as *;
+
+  :global(:root) {
+    @include generate-dodo-ui-separator-colors(neutral);
+    @include generate-dodo-ui-separator-colors(primary);
+    @include generate-dodo-ui-separator-colors(secondary);
+    @include generate-dodo-ui-separator-colors(safe);
+    @include generate-dodo-ui-separator-colors(warning);
+    @include generate-dodo-ui-separator-colors(danger);
+  }
+
+  :global(.dodo-theme--dark) {
+    @include generate-dodo-ui-separator-colors-dark(neutral);
+    @include generate-dodo-ui-separator-colors-dark(primary);
+    @include generate-dodo-ui-separator-colors-dark(secondary);
+    @include generate-dodo-ui-separator-colors-dark(safe);
+    @include generate-dodo-ui-separator-colors-dark(warning);
+    @include generate-dodo-ui-separator-colors-dark(danger);
+  }
+
+  .dodo-ui-Separator {
+    &.color {
+      @include generate-dodo-ui-separator-color(neutral);
+      @include generate-dodo-ui-separator-color(primary);
+      @include generate-dodo-ui-separator-color(secondary);
+      @include generate-dodo-ui-separator-color(safe);
+      @include generate-dodo-ui-separator-color(warning);
+      @include generate-dodo-ui-separator-color(danger);
+    }
+
+    &.orientation {
+      &--horizontal {
+        display: flex;
+        height: var(--dodo-ui-element-border-width);
+        width: 100%;
+        margin: calc(var(--dodo-ui-space) * 1) 0;
+      }
+
+      &--vertical {
+        display: inline-flex;
+        height: 100%;
+        width: var(--dodo-ui-element-border-width);
+        margin: 0 calc(var(--dodo-ui-space) * 1);
+      }
+    }
+  }
+</style>

package/src/lib/stories/components/Layout/Separator/utils/scss/mixins.scss

@@ -0,0 +1,24 @@
+/// Mixin: generate-dodo-ui-button-colors
+/// Generates CSS custom properties for Dodo UI button 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-separator-colors($color-name) {
+  --dodo-ui-Separator-color-#{$color-name}: var(--dodo-color-#{$color-name}-300);
+}
+
+/// Mixin: generate-dodo-ui-button-colors
+/// Generates CSS custom properties for Dodo UI button 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-separator-colors-dark($color-name) {
+  --dodo-ui-Separator-color-#{$color-name}: var(--dodo-color-#{$color-name}-300);
+}
+
+/// Mixin: generate-dodo-ui-button-color
+/// Auto-generates .color--[theme] > .variant--text & .variant--solid styles
+/// @param {String} $theme - e.g., default, safe, danger, etc.
+@mixin generate-dodo-ui-separator-color($theme) {
+  &--#{$theme} {
+    background-color: var(--dodo-ui-Separator-color-#{$theme});
+  }
+}

package/src/lib/stories/developer tools/components/DynamicInput/DynamicInput.svelte

@@ -0,0 +1,195 @@
+<script lang="ts" module>
+  import { type ComponentSize, type TextInputType } from '$lib/index.js';
+  import type { Snippet } from 'svelte';
+  import type {
+    ChangeEventHandler,
+    ClipboardEventHandler,
+    FocusEventHandler,
+    FormEventHandler,
+    MouseEventHandler,
+  } from 'svelte/elements';
+
+  export type DynamicInputVariant = 'input' | 'button';
+
+  export const dynamicInputVariantArray: DynamicInputVariant[] = ['input', 'button'];
+
+  export type DynamicInputClickEvent = MouseEvent & {
+    currentTarget: EventTarget & HTMLButtonElement;
+  };
+
+  export type DynamicInputFocusEvent = FocusEvent & {
+    currentTarget: EventTarget & (HTMLInputElement | HTMLButtonElement);
+  };
+
+  export interface DynamicInputProps {
+    /** How large should the button be? */
+    size?: ComponentSize;
+    /** Input type? */
+    type?: TextInputType;
+    /** Input ref */
+    ref?: HTMLInputElement | HTMLButtonElement;
+    /** Input value */
+    value?: string | number;
+    /** variant */
+    variant?: DynamicInputVariant;
+    /** How round should the border radius be? */
+    placeholder?: string;
+    /** disabled state */
+    disabled?: boolean;
+    /** Read only ? */
+    readonly?: boolean;
+    /** Name */
+    name?: string;
+    /** Id */
+    id?: string;
+    /** Icon before button content */
+    before?: Snippet;
+    /** Icon after button content */
+    after?: Snippet;
+    /** Custom css class*/
+    class?: string;
+    /** The onclick event handler */
+    onclick?: MouseEventHandler<HTMLButtonElement>;
+    /** oninput event handler */
+    oninput?: FormEventHandler<HTMLInputElement>;
+    /** onchange event handler */
+    onchange?: ChangeEventHandler<HTMLInputElement>;
+    /** onblur event handler */
+    onblur?: FocusEventHandler<HTMLInputElement | HTMLButtonElement>;
+    /** onfocus event handler */
+    onfocus?: FocusEventHandler<HTMLInputElement | HTMLButtonElement>;
+    /** onpaste event handler */
+    onpaste?: ClipboardEventHandler<HTMLInputElement>;
+    /** oncopy event handler */
+    oncopy?: ClipboardEventHandler<HTMLInputElement>;
+    /** oncut event handler */
+    oncut?: ClipboardEventHandler<HTMLInputElement>;
+    /** custom Content Formatting for variant button */
+    customInputContent?: (value: string | number) => Snippet;
+  }
+</script>
+
+<script lang="ts">
+  let {
+    type = 'text',
+    name,
+    id,
+    class: className = '',
+    disabled = false,
+    onchange,
+    oninput,
+    onblur,
+    onfocus,
+    onpaste,
+    oncopy,
+    oncut,
+    value = $bindable<string | number>(),
+    placeholder,
+    ref = $bindable<HTMLInputElement | HTMLButtonElement>(),
+    readonly = false,
+    variant = 'input',
+    size = 'normal',
+    onclick,
+    customInputContent,
+  }: DynamicInputProps = $props();
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let customInputContentTyped = customInputContent as any;
+
+  function onclickMod(e: DynamicInputClickEvent) {
+    if (onfocus) {
+      onfocus(e);
+    }
+
+    if (onclick) {
+      onclick(e);
+    }
+  }
+</script>
+
+{#if variant === 'button'}
+  <button
+    {id}
+    class={[
+      'dodo-ui-DynamicInput',
+      `size--${size}`,
+      `variant--${variant}`,
+      `${!value ? 'placeholder' : ''}`,
+      className,
+    ].join(' ')}
+    bind:this={ref}
+    onclick={onclickMod}
+    {onblur}
+    {disabled}
+  >
+    {#if customInputContentTyped}
+      {@render customInputContentTyped(value)}
+    {:else}
+      {`${value}` || placeholder}
+    {/if}
+  </button>
+{:else}
+  <input
+    class={['dodo-ui-DynamicInput', `size--${size}`, `variant--${variant}`, className].join(' ')}
+    {type}
+    {name}
+    {id}
+    {disabled}
+    {oninput}
+    {onchange}
+    {onfocus}
+    {onblur}
+    {onpaste}
+    {oncopy}
+    {oncut}
+    {placeholder}
+    bind:value
+    bind:this={ref}
+    {readonly}
+  />
+{/if}
+
+<style lang="scss">
+  .dodo-ui-DynamicInput {
+    flex: 1;
+    border: 0;
+    outline: 0;
+    height: 100%;
+    background-color: transparent;
+    font-family: inherit;
+    color: inherit;
+    letter-spacing: 0.3px;
+
+    margin: 0;
+
+    &.variant {
+      &--button {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        cursor: pointer;
+
+        &.placeholder {
+          opacity: 0.6;
+        }
+      }
+    }
+
+    &.size {
+      &--normal {
+        font-size: 1rem;
+        padding: 0 calc(var(--dodo-ui-space-small) * 2);
+      }
+
+      &--small {
+        padding: 0 var(--dodo-ui-space);
+        font-size: 0.9rem;
+      }
+
+      &--large {
+        font-size: 1.1rem;
+        padding: 0 calc(var(--dodo-ui-space) * 2);
+      }
+    }
+  }
+</style>

package/src/lib/stories/developer tools/components/InputEnclosure/InputEnclosure.svelte

@@ -1,9 +1,9 @@
-<script lang="ts">
+<script lang="ts" module>
   import type { ComponentRoundness } from '$lib/types/roundness.js';
   import type { ComponentSize } from '$lib/types/size.js';
   import type { Snippet } from 'svelte';
 
-  interface InputEnclosureProps {
+  export interface InputEnclosureProps {
     /** InputEnclosure contents goes here */
     children?: Snippet;
     /** InputEnclosure ref */
@@ -27,7 +27,9 @@
     /** Custom css class*/
     class?: string;
   }
+</script>
 
+<script lang="ts">
   let {
     size = 'normal',
     roundness = 1,
@@ -62,6 +64,7 @@
   {#if children}
     {@render children()}
   {/if}
+
   {#if after}
     <span class="content--after">
       {@render after()}