init

lib/components/dashboard/elements/Button.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import type { IconDefinition } from '@fortawesome/free-solid-svg-icons';
+  import Fa from 'svelte-fa';
+  import Spinner from './Spinner.svelte';
+
+  export let icon: IconDefinition | undefined = undefined;
+  export let style: 'default' | 'red' | 'white' | 'dark' | 'accent' = 'default';
+  export let onClick: void | (() => void) | ((e: MouseEvent) => void) | undefined = undefined;
+  export let tabindex: number | undefined = undefined;
+  export let disabled: boolean = false;
+  export let full: boolean = false;
+  export let xButton: boolean = false;
+  export let large: boolean = false;
+  export let small: boolean = false;
+  export let iconOnly: boolean = false;
+  export let loading: boolean = false;
+  export let title: string | undefined = undefined;
+
+  function click(e: MouseEvent) {
+    if (onClick) onClick(e);
+  }
+
+  $: isDisabled = loading || disabled;
+</script>
+
+<button
+  class="h-10 px-4 py-2 bg-button-secondary-active-solid hover:bg-button-secondary-selected active:bg-button-secondary-active-solid text-text-primary disabled:bg-button-disabled disabled:text-text-disabled transition-colors font-semibold rounded-lg justify-center items-center gap-2 inline-flex break-words line-clamp-1"
+  class:style-red={style === 'red'}
+  class:style-white={style === 'white'}
+  class:style-dark={style === 'dark'}
+  class:style-accent={style === 'accent'}
+  class:w-full={full}
+  class:x={xButton}
+  class:sm={small}
+  class:!h-12={large}
+  disabled={isDisabled}
+  class:cursor-not-allowed={isDisabled}
+  {title}
+  on:click={click}
+  {tabindex}>
+  {#if !loading}
+    {#if icon}
+      <Fa {icon} size="xs" />
+    {/if}
+    {#if xButton && !iconOnly}
+      <span class="contents"><slot /></span>
+    {:else}
+      <slot />
+    {/if}
+  {:else}
+    <Spinner small={small || xButton} />
+  {/if}
+</button>
+
+<style lang="postcss">
+  button.style-red {
+    @apply bg-red-500 hover:bg-red-400 active:bg-red-500;
+  }
+
+  button.style-white {
+    @apply bg-text-header hover:bg-text-primary active:bg-text-header text-item;
+  }
+
+  button.style-dark {
+    @apply backdrop-blur-3xl bg-button-dark-transparent-fill hover:bg-button-secondary-selected active:bg-button-dark-fill text-text-header;
+  }
+
+  button.style-accent {
+    @apply bg-accent hover:bg-accent-hover active:bg-accent-active text-text-header;
+  }
+
+  button.x {
+    @apply rounded-full font-normal h-fit min-h-[36.8px] p-3;
+  }
+
+  button.x.sm {
+    @apply py-2;
+  }
+
+  button.x > span {
+    @apply block whitespace-nowrap leading-[.8];
+  }
+</style>

lib/components/dashboard/elements/InputGroup.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  export let title: string;
+  export let subtitle: string | undefined = undefined;
+  export let link: { url: string; text: string; tabindex?: number } | undefined = undefined;
+  export let required: boolean = false;
+  export let style: 'default' | 'title' | 'white' = 'default';
+</script>
+
+<div class="flex flex-col gap-2" class:style-title={style === 'title'} class:style-white={style === 'white'}>
+  <div class="flex justify-between">
+    <p class="title text-xs text-text-teritary">
+      {title || ''}{#if required}<span class="text-accent">*</span>{/if}
+    </p>
+    {#if link}
+      <a href={link.url} tabindex={link.tabindex}>{link.text}</a>
+    {/if}
+  </div>
+  {#if subtitle}
+    <p class="subtitle text-xs text-text-teritary">{subtitle}</p>
+  {/if}
+  <slot />
+</div>
+
+<style lang="postcss">
+  .style-title {
+    @apply gap-4;
+  }
+
+  .style-title p.title {
+    @apply text-text-header font-semibold text-2xl leading-[.8] whitespace-nowrap;
+  }
+
+  .style-title p.subtitle {
+    @apply text-base text-text-primary;
+  }
+
+  .style-white p.title {
+    @apply font-semibold text-text-header;
+  }
+</style>

lib/components/dashboard/elements/MultilineTextInput.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  export let name: string | undefined = undefined;
+  export let placeholder: string | undefined = undefined;
+  export let required: boolean = false;
+  export let value: string | undefined = undefined;
+  export let rows: number | undefined = undefined;
+  export let minlength: number | undefined = undefined;
+  export let maxlength: number | undefined = undefined;
+</script>
+
+<textarea
+  {name}
+  {placeholder}
+  {rows}
+  {minlength}
+  {maxlength}
+  {required}
+  value={value ?? ''}
+  class="px-4 py-3 bg-field text-text-primary placeholder-text-typeable transition-all ring-0 outline outline-1 outline-transparent focus:outline-accent rounded-xl leading-tight" />

lib/components/dashboard/elements/Spinner.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  export let small: boolean = false;
+</script>
+
+<div
+  class="inline-block h-6 w-6 animate-[spin_0.5s_linear_infinite] rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]"
+  class:small
+  role="status">
+  <span class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
+    >Loading...</span>
+</div>
+
+<style lang="postcss">
+  div.small {
+    @apply w-3 h-3 border-2;
+  }
+</style>

lib/components/dashboard/elements/TextInput.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  export let name: string | undefined = undefined;
+  export let type: 'text' | 'email' | 'password' = 'text';
+  export let placeholder: string | undefined = undefined;
+  export let required: boolean = false;
+  export let tabindex: number | undefined = undefined;
+  export let minlength: number | undefined = undefined;
+  export let maxlength: number | undefined = undefined;
+  export let hidden: boolean = false;
+  export let value: string | undefined = undefined;
+</script>
+
+<input
+  {name}
+  {type}
+  {placeholder}
+  {required}
+  {tabindex}
+  {minlength}
+  {maxlength}
+  value={value ?? ''}
+  class:hidden
+  class="px-4 py-3 bg-field text-text-primary placeholder-text-typeable transition-all ring-0 outline outline-1 outline-transparent focus:outline-accent rounded-xl leading-tight" />

lib/components/dashboard/elements/Toggle.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  export let id: string | undefined = undefined;
+  export let name: string | undefined = undefined;
+  export let checked: boolean = false;
+</script>
+
+<label class="h-fit relative inline-flex items-center cursor-pointer">
+  <input
+    {id}
+    {name}
+    {checked}
+    type="checkbox"
+    value="true"
+    class="sr-only peer"
+    on:change={(e) => {
+      e.currentTarget.value = e.currentTarget.checked ? 'true' : 'false';
+    }} />
+  <div
+    class="w-11 h-6 bg-button-secondary-active-solid hover:bg-button-secondary-selected peer-checked:hover:bg-accent-hover peer-checked:bg-accent rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-icon-active after:rounded-full after:h-5 after:w-5 after:transition-all transition-colors" />
+</label>