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

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

@@ -1,65 +0,0 @@
-<script lang="ts" module>
-  import type { Snippet } from 'svelte';
-
-  export interface FormControlProps {
-    /** FormControl contents goes here */
-    children?: Snippet;
-    /** Label for FormControl */
-    label?: string;
-    /** is there any associated Error Message ? */
-    errorMessage?: string;
-    /** Label ref */
-    ref?: HTMLDivElement;
-    /** id of the form element the label should be bound to */
-    for?: string;
-    /** Specifies which form the label belongs to */
-    form?: string;
-    /** Custom css class*/
-    class?: string;
-  }
-</script>
-
-<script lang="ts">
-  import Label from '../Label/Label.svelte';
-  import Message from '../Message/Message.svelte';
-
-  let {
-    children,
-    label,
-    class: className = '',
-    for: htmlFor,
-    form,
-    ref = $bindable<HTMLDivElement>(),
-    errorMessage,
-  }: FormControlProps = $props();
-</script>
-
-<div class={['dodo-ui-FormControl', className].join(' ')} bind:this={ref}>
-  {#if label}
-    <div class="LabelSection">
-      <Label for={htmlFor} {form}>{label}</Label>
-    </div>
-  {/if}
-  <div class="content">
-    {#if children}
-      {@render children()}
-    {/if}
-  </div>
-  {#if errorMessage}
-    <div class="errorMessage">
-      <Message color="danger">{errorMessage}</Message>
-    </div>
-  {/if}
-</div>
-
-<style lang="scss">
-  .dodo-ui-FormControl {
-    .LabelSection {
-      margin-bottom: var(--dodo-ui-space);
-    }
-
-    .errorMessage {
-      margin-top: var(--dodo-ui-space-large);
-    }
-  }
-</style>

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

@@ -1,42 +0,0 @@
-<script lang="ts" module>
-  import type { Snippet } from 'svelte';
-
-  export interface LabelProps {
-    /** Label contents goes here */
-    children?: Snippet;
-    /** Label ref */
-    ref?: HTMLLabelElement;
-    /** id of the form element the label should be bound to */
-    for?: string;
-    /** Specifies which form the label belongs to */
-    form?: string;
-    /** Custom css class*/
-    class?: string;
-  }
-</script>
-
-<script lang="ts">
-  let {
-    children,
-    class: className = '',
-    for: htmlFor,
-    form,
-    ref = $bindable<HTMLLabelElement>(),
-  }: LabelProps = $props();
-</script>
-
-<label class={['dodo-ui-Label', className].join(' ')} for={htmlFor} {form} bind:this={ref}>
-  {#if children}
-    {@render children()}
-  {/if}
-</label>
-
-<style lang="scss">
-  .dodo-ui-Label {
-    font-size: 0.95rem;
-    color: var(--dodo-color-neutral-700);
-    display: flex;
-    align-items: center;
-    font-family: inherit;
-  }
-</style>

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

@@ -1,87 +0,0 @@
-<script lang="ts" module>
-  import type { ComponentColor } from '$lib/types/colors.js';
-
-  import type { ComponentSize } from '$lib/types/size.js';
-
-  import type { Snippet } from 'svelte';
-
-  export interface MessageProps {
-    /** Message contents goes here */
-    children?: Snippet;
-    /** Message ref */
-    ref?: HTMLDivElement;
-    /** What color to use? */
-    color?: ComponentColor;
-    /** Message size */
-    size?: ComponentSize;
-    /** Custom css class*/
-    class?: string;
-  }
-</script>
-
-<script lang="ts">
-  let {
-    children,
-    class: className = '',
-    color = 'primary',
-    ref = $bindable<HTMLDivElement>(),
-    size = 'normal',
-  }: MessageProps = $props();
-</script>
-
-<div
-  class={['dodo-ui-Message', `color--${color}`, `size--${size}`, className].join(' ')}
-  bind:this={ref}
->
-  {#if children}
-    {@render children()}
-  {/if}
-</div>
-
-<style lang="scss">
-  .dodo-ui-Message {
-    letter-spacing: 0.3px;
-    display: flex;
-    font-family: inherit;
-
-    &.size {
-      &--normal {
-        font-size: 1rem;
-      }
-
-      &--small {
-        font-size: 0.9rem;
-      }
-
-      &--large {
-        font-size: 1.1rem;
-      }
-    }
-
-    &.color {
-      &--primary {
-        color: var(--dodo-color-primary-600);
-      }
-
-      &--secondary {
-        color: var(--dodo-color-secondary-600);
-      }
-
-      &--neutral {
-        color: var(--dodo-color-neutral-600);
-      }
-
-      &--safe {
-        color: var(--dodo-color-safe-600);
-      }
-
-      &--warning {
-        color: var(--dodo-color-warning-600);
-      }
-
-      &--danger {
-        color: var(--dodo-color-danger-600);
-      }
-    }
-  }
-</style>

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

@@ -1,287 +0,0 @@
-<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';
-  import type {
-    ChangeEventHandler,
-    ClipboardEventHandler,
-    FocusEventHandler,
-    FormEventHandler,
-    KeyboardEventHandler,
-  } from 'svelte/elements';
-
-  export interface NumericInputProps {
-    /** min */
-    min?: number;
-    /** max */
-    max?: number;
-    /** Allow Negative Values */
-    allowNegativeValues?: boolean;
-    /** Decimal Places */
-    decimalPlaces?: number;
-    /** Log number validations */
-    log?: boolean;
-    /** Input ref */
-    ref?: HTMLInputElement;
-    /** How large should the button be? */
-    size?: ComponentSize;
-    /** How round should the border radius be? */
-    roundness?: ComponentRoundness;
-    /** Add a border around the button. Default True */
-    outline?: boolean;
-    /** Input value */
-    value?: number;
-    /** How round should the border radius be? */
-    placeholder?: string;
-    /** disabled state */
-    disabled?: boolean;
-    /** Read only ? */
-    readonly?: boolean;
-    /** is there any associated Error ? */
-    error?: boolean;
-    /** Name */
-    name?: string;
-    /** Id */
-    id?: string;
-    /** Icon before button content */
-    before?: Snippet;
-    /** Icon after button content */
-    after?: Snippet;
-    /** Custom css class*/
-    class?: string;
-    /** on Numeric Value Change */
-    onValueChange?: (value: number | undefined) => void;
-    /** oninput event handler */
-    oninput?: FormEventHandler<HTMLInputElement>;
-    /** onchange event handler */
-    onchange?: ChangeEventHandler<HTMLInputElement>;
-    /** onblur event handler */
-    onblur?: FocusEventHandler<HTMLInputElement>;
-    /** onfocus event handler */
-    onfocus?: FocusEventHandler<HTMLInputElement>;
-    /** onpaste event handler */
-    onpaste?: ClipboardEventHandler<HTMLInputElement>;
-    /** oncopy event handler */
-    oncopy?: ClipboardEventHandler<HTMLInputElement>;
-    /** oncut event handler */
-    oncut?: ClipboardEventHandler<HTMLInputElement>;
-    /** onkeydown event handler */
-    onkeydown?: KeyboardEventHandler<HTMLInputElement>;
-    /** onkeypress event handler */
-    onkeypress?: KeyboardEventHandler<HTMLInputElement>;
-    /** onkeyup event handler */
-    onkeyup?: KeyboardEventHandler<HTMLInputElement>;
-  }
-</script>
-
-<script lang="ts">
-  import InputEnclosure from '$lib/stories/developer tools/components/InputEnclosure/InputEnclosure.svelte';
-  import DynamicInput, {
-    type DynamicInputFocusEvent,
-    type DynamicInputKeyboardEvent,
-  } from '$lib/stories/developer tools/components/DynamicInput/DynamicInput.svelte';
-  import type { TextInputFocusEvent, TextInputKeyboardEvent } from '../TextInput/TextInput.svelte';
-  import isValidNumberValue from '$lib/stories/developer tools/helpers/Numbers/isValidNumberValue/isValidNumberValue.js';
-
-  let {
-    size = 'normal',
-    roundness = 1,
-    outline = true,
-    name,
-    id,
-    class: className = '',
-    disabled = false,
-    oninput,
-    onchange,
-    onblur,
-    onfocus,
-    onpaste,
-    oncopy,
-    oncut,
-    onkeydown,
-    onkeypress,
-    onkeyup,
-    before,
-    after,
-    error = false,
-    value: valueRaw,
-    placeholder,
-    ref = $bindable<HTMLInputElement>(),
-    readonly = false,
-    decimalPlaces = 0,
-    allowNegativeValues = false,
-    min,
-    max,
-    log = false,
-    onValueChange,
-  }: NumericInputProps = $props();
-
-  let value = $state<string>('');
-  let cachedValue = $state<string>('');
-
-  let focused: boolean = $state(false);
-
-  function onfocusMod(e: DynamicInputFocusEvent) {
-    const eTyped = e as TextInputFocusEvent;
-
-    if (onfocus) {
-      onfocus(eTyped);
-    }
-  }
-
-  function onblurMod(e: DynamicInputFocusEvent) {
-    const eTyped = e as TextInputFocusEvent;
-
-    const isValidWithoutMinMax = isValidNumberValue(`${value}`, {
-      decimalPlaces,
-      allowNegativeValues,
-      log,
-    });
-
-    const isValid = isValidNumberValue(`${value}`, {
-      decimalPlaces,
-      allowNegativeValues,
-      log,
-      min,
-      max,
-    });
-
-    if (isValid) {
-      if (onValueChange) {
-        onValueChange(Number(value));
-      }
-
-      value = `${Number(value)}`;
-      cachedValue = `${Number(value)}`;
-    } else if (isValidWithoutMinMax) {
-      if (min && Number(value) < min) {
-        if (onValueChange) {
-          onValueChange(min);
-        }
-
-        value = `${min}`;
-        cachedValue = `${min}`;
-      } else if (max && Number(value) > max) {
-        if (onValueChange) {
-          onValueChange(max);
-        }
-
-        value = `${max}`;
-        cachedValue = `${max}`;
-      }
-    } else if (value.trim() === '') {
-      if (onValueChange) {
-        onValueChange(undefined);
-      }
-
-      value = '';
-      cachedValue = '';
-    } else if (valueRaw || valueRaw === 0) {
-      if (onValueChange) {
-        onValueChange(valueRaw);
-      }
-
-      value = `${valueRaw}`;
-      cachedValue = `${valueRaw}`;
-    } else {
-      if (onValueChange) {
-        onValueChange(undefined);
-      }
-
-      value = '';
-      cachedValue = '';
-    }
-
-    if (onblur) {
-      onblur(eTyped);
-    }
-  }
-
-  function onkeydownMod(e: DynamicInputKeyboardEvent) {
-    if (onkeydown) {
-      onkeydown(e as TextInputKeyboardEvent);
-    }
-
-    if (e.ctrlKey && e.key.toLocaleLowerCase() === 'c') {
-      return;
-    } else if (e.ctrlKey && e.key.toLocaleLowerCase() === 'v') {
-      return;
-    } else if (e.ctrlKey && e.key.toLocaleLowerCase() === 'x') {
-      return;
-    }
-
-    const valueToCheck = `${value}${e.key.length === 1 ? e.key : ''}`;
-
-    const isValid = isValidNumberValue(valueToCheck, {
-      decimalPlaces,
-      allowNegativeValues,
-      log,
-      strict: false,
-    });
-
-    if (!isValid) {
-      e.preventDefault();
-      value = cachedValue;
-    } else {
-      cachedValue = valueToCheck;
-    }
-  }
-
-  $effect(() => {
-    let updatedValue = '';
-
-    const isValid = isValidNumberValue(`${valueRaw}`, {
-      decimalPlaces,
-      allowNegativeValues,
-      min,
-      max,
-      log,
-    });
-
-    if (valueRaw === undefined) {
-      updatedValue = '';
-    } else if (!isValid) {
-      updatedValue = '';
-    } else {
-      updatedValue = `${valueRaw}`;
-    }
-
-    value = updatedValue;
-    cachedValue = updatedValue;
-  });
-</script>
-
-<div
-  class:outline
-  class:disabled
-  class:error
-  class:focused
-  class={['dodo-ui-NumericInput', `size--${size}`, `roundness--${roundness}`, className].join(' ')}
->
-  <InputEnclosure {outline} {disabled} {error} {focused} {size} {roundness} {before} {after}>
-    <DynamicInput
-      type="text"
-      {name}
-      {id}
-      {disabled}
-      bind:ref
-      bind:focused
-      {oninput}
-      {onchange}
-      onfocus={onfocusMod}
-      onblur={onblurMod}
-      {onpaste}
-      {oncopy}
-      {oncut}
-      onkeydown={onkeydownMod}
-      onkeypress={onkeypress ? (e) => onkeypress(e as TextInputKeyboardEvent) : undefined}
-      onkeyup={onkeyup ? (e) => onkeyup(e as TextInputKeyboardEvent) : undefined}
-      {placeholder}
-      {readonly}
-      variant="input"
-      bind:value
-      {size}
-    />
-  </InputEnclosure>
-</div>

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

@@ -1,235 +0,0 @@
-<script lang="ts" module>
-  import type { ComponentSize } from '$lib/types/size.js';
-  import type { ComponentRoundness } from '$lib/types/roundness.js';
-  import type { Snippet } from 'svelte';
-  import type {
-    ChangeEventHandler,
-    ClipboardEventHandler,
-    FocusEventHandler,
-    FormEventHandler,
-    KeyboardEventHandler,
-  } from 'svelte/elements';
-
-  export type PasswordInputToggleEvent = {
-    event: Event;
-    toggle: boolean;
-  };
-
-  export interface PasswordInputProps {
-    /** How large should the button be? */
-    size?: ComponentSize;
-    /** Input ref */
-    ref?: HTMLInputElement;
-    /** Toggle Password */
-    passwordToggle?: boolean;
-    /** Default Password Toggle State */
-    passwordToggleState?: boolean;
-    /** Toggle Password Icon */
-    customPasswordToggleIcon?: (toggle: boolean) => Snippet;
-    /** How round should the border radius be? */
-    roundness?: ComponentRoundness;
-    /** Add a border around the button. Default True */
-    outline?: boolean;
-    /** Input value */
-    value?: string;
-    /** How round should the border radius be? */
-    placeholder?: string;
-    /** disabled state */
-    disabled?: boolean;
-    /** Read only ? */
-    readonly?: boolean;
-    /** is there any associated Error ? */
-    error?: boolean;
-    /** Name */
-    name?: string;
-    /** Id */
-    id?: string;
-    /** Icon before button content */
-    before?: Snippet;
-    /** Icon after button content */
-    after?: Snippet;
-    /** Custom css class*/
-    class?: string;
-    /** oninput event handler */
-    oninput?: FormEventHandler<HTMLInputElement>;
-    /** onchange event handler */
-    onchange?: ChangeEventHandler<HTMLInputElement>;
-    /** onblur event handler */
-    onblur?: FocusEventHandler<HTMLInputElement>;
-    /** onfocus event handler */
-    onfocus?: FocusEventHandler<HTMLInputElement>;
-    /** onpaste event handler */
-    onpaste?: ClipboardEventHandler<HTMLInputElement>;
-    /** oncopy event handler */
-    oncopy?: ClipboardEventHandler<HTMLInputElement>;
-    /** oncut event handler */
-    oncut?: ClipboardEventHandler<HTMLInputElement>;
-    /** ontoggle event handler */
-    ontoggle?: (e: PasswordInputToggleEvent) => void;
-    /** onkeydown event handler */
-    onkeydown?: KeyboardEventHandler<HTMLInputElement>;
-    /** onkeypress event handler */
-    onkeypress?: KeyboardEventHandler<HTMLInputElement>;
-    /** onkeyup event handler */
-    onkeyup?: KeyboardEventHandler<HTMLInputElement>;
-  }
-</script>
-
-<script lang="ts">
-  import Icon from '@iconify/svelte';
-  import UtilityButton from '$lib/stories/developer tools/components/UtilityButton/UtilityButton.svelte';
-  import InputEnclosure from '$lib/stories/developer tools/components/InputEnclosure/InputEnclosure.svelte';
-  import type { TextInputFocusEvent, TextInputKeyboardEvent } from '../TextInput/TextInput.svelte';
-  import { DynamicInput, type DynamicInputFocusEvent } from '$lib/index.js';
-
-  let {
-    size = 'normal',
-    roundness = 1,
-    outline = true,
-    name,
-    id,
-    class: className = '',
-    disabled = false,
-    oninput,
-    onchange,
-    onblur,
-    onfocus,
-    onpaste,
-    oncopy,
-    oncut,
-    onkeydown,
-    onkeypress,
-    onkeyup,
-    before,
-    after,
-    customPasswordToggleIcon,
-    error = false,
-    passwordToggle = true,
-    passwordToggleState = $bindable<boolean>(),
-    value = $bindable<string>(),
-    placeholder,
-    ontoggle,
-    ref = $bindable<HTMLInputElement>(),
-    readonly = false,
-  }: PasswordInputProps = $props();
-
-  let focused: boolean = $state(false);
-  let toggle: boolean = $state(passwordToggleState);
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  let customPasswordToggleIconTyped = customPasswordToggleIcon as any;
-
-  function onfocusMod(e: DynamicInputFocusEvent) {
-    const eTyped = e as TextInputFocusEvent;
-
-    if (onfocus) {
-      onfocus(eTyped);
-    }
-  }
-
-  function onblurMod(e: DynamicInputFocusEvent) {
-    const eTyped = e as TextInputFocusEvent;
-
-    if (onblur) {
-      onblur(eTyped);
-    }
-  }
-
-  function ontoggleMod(e: Event) {
-    toggle = !toggle;
-
-    const customEvent: PasswordInputToggleEvent = {
-      event: e,
-      toggle,
-    };
-
-    if (ontoggle) {
-      ontoggle(customEvent);
-    }
-  }
-</script>
-
-<div
-  class:outline
-  class:disabled
-  class:error
-  class:focused
-  class:toggle
-  class={['dodo-ui-PasswordInput', `size--${size}`, `roundness--${roundness}`, className].join(' ')}
->
-  <InputEnclosure {outline} {disabled} {error} {focused} {size} {roundness} {before} {after}>
-    <DynamicInput
-      type={passwordToggle && toggle ? 'text' : 'password'}
-      {name}
-      {id}
-      {disabled}
-      bind:ref
-      bind:focused
-      {oninput}
-      {onchange}
-      onfocus={onfocusMod}
-      onblur={onblurMod}
-      {onpaste}
-      {oncopy}
-      {oncut}
-      onkeydown={onkeydown ? (e) => onkeydown(e as TextInputKeyboardEvent) : undefined}
-      onkeypress={onkeypress ? (e) => onkeypress(e as TextInputKeyboardEvent) : undefined}
-      onkeyup={onkeyup ? (e) => onkeyup(e as TextInputKeyboardEvent) : undefined}
-      {placeholder}
-      bind:value
-      {readonly}
-      variant="input"
-      {size}
-    />
-
-    {#if passwordToggle && !disabled}
-      <div class:after class="passwordToggle">
-        <UtilityButton {size} title="Toggle password" onclick={ontoggleMod}>
-          {#if customPasswordToggleIcon}
-            {@render customPasswordToggleIconTyped(toggle)}
-          {:else if toggle}
-            {#if size === 'small'}
-              <Icon icon="mdi:eye-off" width="19" height="19" />
-            {:else}
-              <Icon icon="mdi:eye-off" width="24" height="24" />
-            {/if}
-          {:else if size === 'small'}
-            <Icon icon="mdi:eye" width="19" height="19" />
-          {:else}
-            <Icon icon="mdi:eye" width="24" height="24" />
-          {/if}
-        </UtilityButton>
-      </div>
-    {/if}
-  </InputEnclosure>
-</div>
-
-<style lang="scss">
-  .dodo-ui-PasswordInput {
-    &.size {
-      &--normal {
-        .passwordToggle {
-          &.after {
-            margin-right: calc(var(--dodo-ui-space-small) * 2);
-          }
-        }
-      }
-
-      &--small {
-        .passwordToggle {
-          &.after {
-            margin-right: var(--dodo-ui-space);
-          }
-        }
-      }
-
-      &--large {
-        .passwordToggle {
-          &.after {
-            margin-right: calc(var(--dodo-ui-space) * 2);
-          }
-        }
-      }
-    }
-  }
-</style>