@flightlesslabs/dodo-ui 0.19.1 → 0.21.0

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

@@ -1,225 +0,0 @@
-<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,
-    type ComponentColor,
-  } from '$lib/types/colors.js';
-
-  export type PaperColor = 'default' | ComponentColor;
-
-  export const paperColorArray: PaperColor[] = [
-    'default',
-    ...componentColorPriorityArray,
-    ...componentColorSeverityArray,
-  ];
-
-  export interface PaperProps {
-    /** Paper contents goes here */
-    children?: Snippet;
-    /** Paper ref */
-    ref?: HTMLDivElement;
-    /** How round should the border radius be? */
-    roundness?: ComponentRoundness;
-    /** Shadow elevation */
-    shadow?: ComponentShadow;
-    /** Custom css class */
-    class?: string;
-    /** Paper Width */
-    width?: string;
-    /** Paper Height */
-    height?: string;
-    /** Id */
-    id?: string;
-    /** Add a border around  paper */
-    outline?: boolean;
-    /** What color to use? */
-    color?: PaperColor;
-    /** How should paper appear? */
-    variant?: ComponentWeight;
-    /** Custom background color. Use CSS compatible value */
-    customBackgroundColor?: string;
-    /** Custom border color. Use CSS compatible value */
-    customBorderColor?: string;
-  }
-</script>
-
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  let {
-    children,
-    roundness = 1,
-    shadow = 0,
-    id,
-    class: className = '',
-    width,
-    height,
-    ref = $bindable<HTMLDivElement>(),
-    color = 'default',
-    variant = 'text',
-    customBackgroundColor,
-    customBorderColor,
-    outline = false,
-  }: PaperProps = $props();
-</script>
-
-<div
-  class:outline
-  class={[
-    'dodo-ui-Paper',
-    `roundness--${roundness}`,
-    `color--${color}`,
-    `variant--${variant}`,
-    `shadow--${shadow}`,
-    `${shadow ? `shadow--${shadow} dodo-shadow-${shadow}` : `shadow--${shadow}`}`,
-    className,
-  ].join(' ')}
-  {id}
-  bind:this={ref}
-  style={`${width ? `width:${width};` : ''}
-  ${height ? `height:${height};` : ''}
-  ${customBackgroundColor ? `background-color:${customBackgroundColor};` : ''}
-  ${customBorderColor ? `border-color:${customBorderColor};` : ''}
-  `}
->
-  {#if children}
-    {@render children()}
-  {/if}
-</div>
-
-<style lang="scss">
-  @use 'utils/scss/mixins.scss' as *;
-
-  :global(:root) {
-    --dodo-ui-Paper-default-bg: var(--dodo-color-white);
-    --dodo-ui-Paper-default-bg-shadow-1: var(--dodo-color-white);
-    --dodo-ui-Paper-default-bg-shadow-2: var(--dodo-color-white);
-    --dodo-ui-Paper-default-bg-shadow-3: var(--dodo-color-white);
-    --dodo-ui-Paper-default-bg-shadow-4: var(--dodo-color-white);
-    --dodo-ui-Paper-default-bg-shadow-5: var(--dodo-color-white);
-
-    --dodo-ui-Paper-outline-default: var(--dodo-color-neutral-300);
-
-    @include generate-dodo-ui-paper-colors(neutral);
-    @include generate-dodo-ui-paper-colors(primary);
-    @include generate-dodo-ui-paper-colors(secondary);
-    @include generate-dodo-ui-paper-colors(safe);
-    @include generate-dodo-ui-paper-colors(warning);
-    @include generate-dodo-ui-paper-colors(danger);
-  }
-
-  :global(.dodo-theme--dark) {
-    --dodo-ui-Paper-default-bg-mixer: #999999fd;
-
-    --dodo-ui-Paper-default-bg: color-mix(
-      in oklab,
-      var(--dodo-color-neutral-50) 98%,
-      var(--dodo-ui-Paper-default-bg-mixer)
-    );
-    --dodo-ui-Paper-default-bg-shadow-1: color-mix(
-      in oklab,
-      var(--dodo-color-neutral-50) 95%,
-      var(--dodo-ui-Paper-default-bg-mixer)
-    );
-    --dodo-ui-Paper-default-bg-shadow-2: color-mix(
-      in oklab,
-      var(--dodo-color-neutral-50) 90%,
-      var(--dodo-ui-Paper-default-bg-mixer)
-    );
-    --dodo-ui-Paper-default-bg-shadow-3: color-mix(
-      in oklab,
-      var(--dodo-color-neutral-50) 85%,
-      var(--dodo-ui-Paper-default-bg-mixer)
-    );
-    --dodo-ui-Paper-default-bg-shadow-4: color-mix(
-      in oklab,
-      var(--dodo-color-neutral-50) 80%,
-      var(--dodo-ui-Paper-default-bg-mixer)
-    );
-    --dodo-ui-Paper-default-bg-shadow-5: color-mix(
-      in oklab,
-      var(--dodo-color-neutral-50) 75%,
-      var(--dodo-ui-Paper-default-bg-mixer)
-    );
-
-    --dodo-ui-Paper-outline-default: var(--dodo-color-neutral-200);
-
-    @include generate-dodo-ui-paper-colors-dark(neutral);
-    @include generate-dodo-ui-paper-colors-dark(primary);
-    @include generate-dodo-ui-paper-colors-dark(secondary);
-    @include generate-dodo-ui-paper-colors-dark(safe);
-    @include generate-dodo-ui-paper-colors-dark(warning);
-    @include generate-dodo-ui-paper-colors-dark(danger);
-  }
-
-  .dodo-ui-Paper {
-    outline: none;
-    transition: all 150ms;
-    font-family: inherit;
-    color: inherit;
-    border-style: solid;
-    border-width: var(--dodo-ui-element-border-width);
-    border-color: transparent;
-    overflow: hidden;
-
-    &.roundness {
-      &--1 {
-        border-radius: var(--dodo-ui-element-roundness-1);
-      }
-
-      &--2 {
-        border-radius: var(--dodo-ui-element-roundness-2);
-      }
-
-      &--3 {
-        border-radius: var(--dodo-ui-element-roundness-3);
-      }
-
-      &--full {
-        border-radius: 50%;
-      }
-    }
-
-    &.color {
-      &--default {
-        background-color: var(--dodo-ui-Paper-default-bg);
-
-        &.outline {
-          border-color: var(--dodo-ui-Paper-outline-default);
-        }
-      }
-
-      @include generate-dodo-ui-paper-color(neutral);
-      @include generate-dodo-ui-paper-color(primary);
-      @include generate-dodo-ui-paper-color(secondary);
-      @include generate-dodo-ui-paper-color(safe);
-      @include generate-dodo-ui-paper-color(warning);
-      @include generate-dodo-ui-paper-color(danger);
-    }
-
-    &.color--default.shadow {
-      &--1 {
-        background-color: var(--dodo-ui-Paper-default-bg-shadow-1);
-      }
-
-      &--2 {
-        background-color: var(--dodo-ui-Paper-default-bg-shadow-2);
-      }
-
-      &--3 {
-        background-color: var(--dodo-ui-Paper-default-bg-shadow-3);
-      }
-
-      &--4 {
-        background-color: var(--dodo-ui-Paper-default-bg-shadow-4);
-      }
-
-      &--5 {
-        background-color: var(--dodo-ui-Paper-default-bg-shadow-5);
-      }
-    }
-  }
-</style>

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

@@ -1,46 +0,0 @@
-/// Mixin: generate-dodo-ui-paper-colors
-/// Generates CSS custom properties for Dodo UI paper 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-paper-colors($color-name) {
-  --dodo-ui-Paper-outline-#{$color-name}: var(--dodo-color-#{$color-name}-400);
-  --dodo-ui-Paper-text-#{$color-name}-bg: var(--dodo-color-#{$color-name}-100);
-  --dodo-ui-Paper-solid-#{$color-name}-bg: var(--dodo-color-#{$color-name}-500);
-}
-
-/// Mixin: generate-dodo-ui-paper-colors
-/// Generates CSS custom properties for Dodo UI paper 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-paper-colors-dark($color-name) {
-  --dodo-ui-Paper-outline-#{$color-name}: var(--dodo-color-#{$color-name}-300);
-  --dodo-ui-Paper-text-#{$color-name}-bg: color-mix(
-    in oklab,
-    var(--dodo-color-#{$color-name}-50) 80%,
-    #00000080
-  );
-  --dodo-ui-Paper-solid-#{$color-name}-bg: var(--dodo-color-#{$color-name}-300);
-}
-
-/// Mixin: generate-dodo-ui-paper-color
-/// Auto-generates .color--[theme] > .variant--text & .variant--solid styles
-/// @param {String} $theme - e.g., default, safe, danger, etc.
-@mixin generate-dodo-ui-paper-color($theme) {
-  &--#{$theme} {
-    &.variant {
-      &--text {
-        color: var(--dodo-color-#{$theme}-800);
-        background-color: var(--dodo-ui-Paper-text-#{$theme}-bg);
-
-        &.outline {
-          border-color: var(--dodo-ui-Paper-outline-#{$theme});
-        }
-      }
-
-      &--solid {
-        color: var(--dodo-color-constant-white);
-        background-color: var(--dodo-ui-Paper-solid-#{$theme}-bg);
-      }
-    }
-  }
-}

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

@@ -1,96 +0,0 @@
-<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

@@ -1,24 +0,0 @@
-/// 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

@@ -1,235 +0,0 @@
-<script lang="ts" module>
-  import { type ComponentSize, type TextInputType } from '$lib/index.js';
-  import type { Snippet } from 'svelte';
-  import type {
-    ChangeEventHandler,
-    ClipboardEventHandler,
-    FocusEventHandler,
-    FormEventHandler,
-    KeyboardEventHandler,
-    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 type DynamicInputKeyboardEvent = KeyboardEvent & {
-    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;
-    /** is focused, set focused */
-    focused?: boolean;
-    /** 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>;
-    /** onkeydown event handler */
-    onkeydown?: KeyboardEventHandler<HTMLInputElement | HTMLButtonElement>;
-    /** onkeypress event handler */
-    onkeypress?: KeyboardEventHandler<HTMLInputElement | HTMLButtonElement>;
-    /** onkeyup event handler */
-    onkeyup?: KeyboardEventHandler<HTMLInputElement | HTMLButtonElement>;
-    /** 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,
-    onkeydown,
-    onkeypress,
-    onkeyup,
-    value = $bindable<string | number>(),
-    focused = $bindable<boolean>(),
-    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);
-    }
-  }
-
-  function onfocusMod(e: DynamicInputFocusEvent) {
-    focused = true;
-
-    if (onfocus) {
-      onfocus(e);
-    }
-  }
-
-  function onblurMod(e: DynamicInputFocusEvent) {
-    focused = false;
-
-    if (onblur) {
-      onblur(e);
-    }
-  }
-</script>
-
-{#if variant === 'button'}
-  <button
-    {id}
-    class={[
-      'dodo-ui-DynamicInput',
-      `size--${size}`,
-      `variant--${variant}`,
-      `${!value ? 'placeholder' : ''}`,
-      className,
-    ].join(' ')}
-    bind:this={ref}
-    onclick={onclickMod}
-    {onkeydown}
-    {onkeypress}
-    {onkeyup}
-    onfocus={onfocusMod}
-    onblur={onblurMod}
-    {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={onfocusMod}
-    onblur={onblurMod}
-    {onpaste}
-    {oncopy}
-    {oncut}
-    {onkeydown}
-    {onkeypress}
-    {onkeyup}
-    {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>