@stubber/ui 1.0.0

package/dist/components/Breadcrumbs.svelte.d.ts

@@ -0,0 +1,33 @@
+/** @typedef {typeof __propDef.props}  BreadcrumbsProps */
+/** @typedef {typeof __propDef.events}  BreadcrumbsEvents */
+/** @typedef {typeof __propDef.slots}  BreadcrumbsSlots */
+export default class Breadcrumbs extends SvelteComponent<{
+    breadcrumbs?: any[] | undefined;
+    title?: string | undefined;
+    mode?: string | undefined;
+    reload_on_redirect?: boolean | undefined;
+}, {
+    click: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type BreadcrumbsProps = typeof __propDef.props;
+export type BreadcrumbsEvents = typeof __propDef.events;
+export type BreadcrumbsSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        breadcrumbs?: any[] | undefined;
+        title?: string | undefined;
+        mode?: string | undefined;
+        reload_on_redirect?: boolean | undefined;
+    };
+    events: {
+        click: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/components/Chip.svelte

@@ -0,0 +1,53 @@
+<script>
+  export let label = "";
+  export let icon = "";
+  export let hasX = false;
+  export let color = "primary";
+
+  let colorClass = "";
+  $: switch (color) {
+    case "primary":
+      colorClass = "bg-transparent text-primary-300 border-primary-300";
+      break;
+    case "surface":
+      colorClass = "bg-transparent text-surface-300 border-surface-300";
+      break;
+    case "success":
+      colorClass = "bg-transparent text-success-300 border-success-300";
+      break;
+    case "warning":
+      colorClass = "bg-transparent text-warning-300 border-warning-300";
+      break;
+    case "danger":
+      colorClass = "bg-transparent text-danger-300 border-danger-300";
+      break;
+    case "info":
+      colorClass = "bg-transparent text-info-300 border-info-300-600";
+      break;
+    case "highlight":
+      colorClass = "bg-transparent text-highlight-300 border-highlight-300";
+      break;
+    case "unicorn":
+      colorClass = "bg-transparent text-unicorn-300 border-unicorn-300";
+      break;
+  }
+</script>
+
+<button
+  on:click
+  class="{icon ? 'pl-2' : 'pl-2.5'} {hasX
+    ? 'pr-2'
+    : 'pr-2.5'} h-[30px] flex items-center space-x-1.5 border rounded-full {colorClass}"
+>
+  {#if icon}
+    <i class="far fa-sm fa-fw fa-{icon}" />
+  {/if}
+  <span class="flex items-center whitespace-pre text-label">
+    {label}
+  </span>
+  {#if hasX}
+    <button class="flex items-center">
+      <i class="far fa-sm fa-circle-xmark fa-fw" />
+    </button>
+  {/if}
+</button>

package/dist/components/Chip.svelte.d.ts

@@ -0,0 +1,33 @@
+/** @typedef {typeof __propDef.props}  ChipProps */
+/** @typedef {typeof __propDef.events}  ChipEvents */
+/** @typedef {typeof __propDef.slots}  ChipSlots */
+export default class Chip extends SvelteComponent<{
+    label?: string | undefined;
+    color?: string | undefined;
+    icon?: string | undefined;
+    hasX?: boolean | undefined;
+}, {
+    click: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type ChipProps = typeof __propDef.props;
+export type ChipEvents = typeof __propDef.events;
+export type ChipSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        label?: string | undefined;
+        color?: string | undefined;
+        icon?: string | undefined;
+        hasX?: boolean | undefined;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/components/HorizontalTabs.svelte

@@ -0,0 +1,32 @@
+<script>
+  export let value = "";
+  export let tabs = [{}];
+
+  function isSelected(tab) {
+    return tab.value === value;
+  }
+
+  function selectTab(tab) {
+    value = tab.value;
+  }
+</script>
+
+<div class="w-full flex flex-row overflow-x-auto">
+  {#key value}
+    {#each tabs as tab}
+      <button
+        on:click={() => selectTab(tab)}
+        class="min-w-[90px] group relative flex pt-2 pb-3 grow border-b border-surface-200 justify-center"
+      >
+        <span class="text-p-body text-surface-900">
+          {tab?.label}
+        </span>
+        <span
+          class="absolute -bottom-[1px] w-[80%] h-1 rounded-t-lg {isSelected(tab)
+            ? 'bg-primary-500'
+            : 'group-hover:bg-surface-100'} text-primary-300"
+        />
+      </button>
+    {/each}
+  {/key}
+</div>

package/dist/components/HorizontalTabs.svelte.d.ts

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  HorizontalTabsProps */
+/** @typedef {typeof __propDef.events}  HorizontalTabsEvents */
+/** @typedef {typeof __propDef.slots}  HorizontalTabsSlots */
+export default class HorizontalTabs extends SvelteComponent<{
+    value?: string | undefined;
+    tabs?: {}[] | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type HorizontalTabsProps = typeof __propDef.props;
+export type HorizontalTabsEvents = typeof __propDef.events;
+export type HorizontalTabsSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        value?: string | undefined;
+        tabs?: {}[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/components/IconButton.svelte

@@ -0,0 +1,165 @@
+<script>
+  export let color = "primary";
+  export let variant = "regular"; // "regular" | "secondary" | "ghost"
+  export let icon = "";
+  export let disabled = false;
+  export let type = "button"; // "button" | "submit" | "reset";
+
+  let colorClass = "";
+  $: switch (color) {
+    case "primary":
+      if (variant == "secondary") {
+        colorClass =
+          "text-primary-500 bg-white border border-primary-500 hover:bg-primary-50 active:bg-white";
+      } else if (variant == "ghost") {
+        colorClass = "text-primary-500 bg-white hover:bg-primary-50 active:bg-white";
+      } else if (variant == "secondary-transparent") {
+        colorClass =
+          "text-primary-500 bg-transparent border border-primary-500 hover:bg-primary-50 active:bg-transparent";
+      } else if (variant == "ghost-transparent") {
+        colorClass = "text-primary-500 hover:text-primary-400 active:text-primary-500";
+      } else {
+        colorClass = "text-white bg-primary-500 hover:bg-primary-400 active:bg-primary-500";
+      }
+      break;
+    //TODO: This is not correct
+    case "surface":
+      if (variant == "secondary") {
+        colorClass = "text-surface-900 bg-white border border-surface-50";
+      } else if (variant == "ghost") {
+        colorClass = "text-surface-900 bg-white hover:bg-surface-50 active:bg-white";
+      } else if (variant == "secondary-transparent") {
+        colorClass = "text-surface-900 bg-transparent border border-surface-50 ";
+      } else if (variant == "ghost-transparent") {
+        colorClass = "text-surface-900 hover:text-surface-700 active:text-surface-900";
+      } else {
+        colorClass = "text-surface-900 bg-surface-50";
+      }
+      break;
+    case "success":
+      if (variant == "secondary") {
+        colorClass =
+          "text-success-500 bg-white border border-success-500 hover:bg-success-50 active:bg-white";
+      } else if (variant == "ghost") {
+        colorClass = "text-success-500 bg-white hover:bg-success-50 active:bg-white";
+      } else if (variant == "secondary-transparent") {
+        colorClass =
+          "text-success-500 bg-transparent border border-success-500 hover:bg-success-50 active:bg-transparent";
+      } else if (variant == "ghost-transparent") {
+        colorClass = "text-success-500 hover:text-success-400 active:text-success-500";
+      } else {
+        colorClass = "text-white bg-success-500 hover:bg-success-400 active:bg-success-500";
+      }
+      break;
+    case "warning":
+      if (variant == "secondary") {
+        colorClass =
+          "text-warning-500 bg-white border border-warning-500 hover:bg-warning-50 active:bg-white";
+      } else if (variant == "ghost") {
+        colorClass = "text-warning-500 bg-white hover:bg-warning-50 active:bg-white";
+      } else if (variant == "secondary-transparent") {
+        colorClass =
+          "text-warning-500 bg-transparent border border-warning-500 hover:bg-warning-50 active:bg-white";
+      } else if (variant == "ghost-transparent") {
+        colorClass = "text-warning-500 hover:text-warning-400 active:text-warning-500";
+      } else {
+        colorClass = "text-white bg-warning-500 hover:bg-warning-400 active:bg-warning-500";
+      }
+      break;
+    case "danger":
+      if (variant == "secondary") {
+        colorClass =
+          "text-danger-500 bg-white border border-danger-500 hover:bg-danger-50 active:bg-white";
+      } else if (variant == "ghost") {
+        colorClass = "text-danger-500 bg-white hover:bg-danger-50 active:bg-white";
+      } else if (variant == "secondary-transparent") {
+        colorClass =
+          "text-danger-500 bg-white border border-danger-500 hover:bg-danger-50 active:bg-transparent";
+      } else if (variant == "ghost-transparent") {
+        colorClass = "text-danger-500 hover:text-danger-400 active:text-danger-500";
+      } else {
+        colorClass = "text-white bg-danger-500 hover:bg-danger-400 active:bg-danger-500";
+      }
+      break;
+    case "info":
+      if (variant == "secondary") {
+        colorClass =
+          "text-info-500 bg-white border border-info-500 hover:bg-info-50 active:bg-white";
+      } else if (variant == "ghost") {
+        colorClass = "text-info-500 bg-white hover:bg-info-50 active:bg-white";
+      } else if (variant == "secondary-transparent") {
+        colorClass =
+          "text-info-500 bg-transparent border border-info-500 hover:bg-info-50 active:bg-transparent";
+      } else if (variant == "ghost-transparent") {
+        colorClass = "text-info-500 hover:text-info-400 active:text-info-500";
+      } else {
+        colorClass = "text-surface-900 bg-info-500 hover:bg-info-400 active:bg-info-500";
+      }
+      break;
+    case "highlight":
+      if (variant == "secondary") {
+        colorClass =
+          "text-highlight-500 bg-white border border-highlight-500 hover:bg-highlight-50 active:bg-white";
+      } else if (variant == "ghost") {
+        colorClass = "text-highlight-500 bg-white hover:bg-highlight-50 active:bg-white";
+      } else if (variant == "secondary-transparent") {
+        colorClass =
+          "text-highlight-500 bg-transparent border border-highlight-500 hover:bg-highlight-50 active:bg-transparent";
+      } else if (variant == "ghost-transparent") {
+        colorClass = "text-highlight-500 hover:text-highlight-400 active:text-highlight-500";
+      } else {
+        colorClass =
+          "text-surface-900 bg-highlight-500 hover:bg-highlight-400 active:bg-highlight-500";
+      }
+      break;
+    case "unicorn":
+      if (variant == "secondary") {
+        colorClass =
+          "text-unicorn-500 bg-white border border-unicorn-500 hover:bg-unicorn-50 active:bg-white";
+      } else if (variant == "ghost") {
+        colorClass = "text-unicorn-500 bg-white hover:bg-unicorn-50 active:bg-white";
+      } else if (variant == "secondary-transparent") {
+        colorClass =
+          "text-unicorn-500 bg-transparent border border-unicorn-500 hover:bg-unicorn-50 active:bg-transparent";
+      } else if (variant == "ghost-transparent") {
+        colorClass = "text-unicorn-500 hover:text-unicorn-400 active:text-unicorn-500";
+      } else {
+        colorClass = "text-white bg-unicorn-500 hover:bg-unicorn-400 active:bg-unicorn-500";
+      }
+      break;
+  }
+
+  let disabledClass = "";
+  $: switch (variant) {
+    case "regular":
+      disabledClass = "disabled:text-white disabled:bg-surface-100";
+      break;
+    case "secondary":
+      disabledClass =
+        "disabled:text-surface-100 disabled:bg-white disabled:border disabled:border-surface-100";
+      break;
+    case "ghost":
+      disabledClass = "disabled:text-surface-100 disabled:bg-white";
+      break;
+    case "secondary-transparent":
+      disabledClass =
+        "disabled:text-surface-100 disabled:bg-transparent disabled:border disabled:border-surface-100";
+      break;
+    case "ghost-transparent":
+      disabledClass = "disabled:text-surface-100";
+      break;
+  }
+</script>
+
+<button
+  on:mouseout
+  on:mouseover
+  on:focus
+  on:blur
+  on:click
+  {type}
+  {disabled}
+  class="h-10 w-10 rounded-lg {colorClass} {disabledClass}"
+>
+  <i class={icon} />
+</button>

package/dist/components/IconButton.svelte.d.ts

@@ -0,0 +1,43 @@
+/** @typedef {typeof __propDef.props}  IconButtonProps */
+/** @typedef {typeof __propDef.events}  IconButtonEvents */
+/** @typedef {typeof __propDef.slots}  IconButtonSlots */
+export default class IconButton extends SvelteComponent<{
+    color?: string | undefined;
+    variant?: string | undefined;
+    icon?: string | undefined;
+    disabled?: boolean | undefined;
+    type?: string | undefined;
+}, {
+    mouseout: MouseEvent;
+    mouseover: MouseEvent;
+    focus: FocusEvent;
+    blur: FocusEvent;
+    click: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type IconButtonProps = typeof __propDef.props;
+export type IconButtonEvents = typeof __propDef.events;
+export type IconButtonSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        color?: string | undefined;
+        variant?: string | undefined;
+        icon?: string | undefined;
+        disabled?: boolean | undefined;
+        type?: string | undefined;
+    };
+    events: {
+        mouseout: MouseEvent;
+        mouseover: MouseEvent;
+        focus: FocusEvent;
+        blur: FocusEvent;
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/components/Inputs/PasswordInput.svelte

@@ -0,0 +1,76 @@
+<script>import { createEventDispatcher } from "svelte";
+const dispatch = createEventDispatcher();
+export let name;
+export let label;
+export let value = "";
+export let isError = false;
+let inputRef;
+let containerRef;
+let isActive = false;
+let isFocused = false;
+let hasValue = false;
+$:
+  isActive = ((isFocused2, hasValue2) => {
+    if (isFocused2 || hasValue2) {
+      return true;
+    } else {
+      return false;
+    }
+  })(isFocused, hasValue);
+$:
+  hasValue = ((value2) => {
+    if (value2) {
+      return true;
+    } else {
+      return false;
+    }
+  })(value);
+function handleClick() {
+  inputRef.focus();
+  isFocused = true;
+}
+function handleClickOutside({ target }) {
+  assertIsNode(target);
+  if (isFocused && !hasValue && !containerRef.contains(target)) {
+    isFocused = false;
+  }
+}
+function assertIsNode(e) {
+  if (!e || !("nodeType" in e)) {
+    throw new Error("Expected node EventTarget");
+  }
+}
+</script>
+
+<svelte:window on:click={handleClickOutside} />
+
+<div
+  on:click={handleClick}
+  on:keydown={() => {}}
+  bind:this={containerRef}
+  class="relative group w-full bg-white py-3 px-4 rounded-md cursor-text border {isError
+    ? 'border-danger-500'
+    : 'border-surface-400 hover:border-surface-600 [&:is(:focus-within)]:border-primary-400'}"
+>
+  <input
+    {name}
+    type="password"
+    bind:this={inputRef}
+    bind:value
+    on:focus={() => dispatch("focus")}
+    class="w-full text-surface-900 outline-none"
+    placeholder={label}
+  />
+  {#if isActive}
+    <!-- TODO: group hover text-surface-600 -->
+    <fieldset aria-hidden="true">
+      <legend
+        class="absolute -top-3 left-2 px-1.5 bg-white {isError
+          ? 'text-danger-500'
+          : 'text-surface-500 group-focus-within:text-primary-400'}"
+      >
+        <span class="text-label-sm">{label}</span>
+      </legend>
+    </fieldset>
+  {/if}
+</div>

package/dist/components/Inputs/PasswordInput.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        name: string;
+        label: string;
+        value?: string | undefined;
+        isError?: boolean | undefined;
+    };
+    events: {
+        focus: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PasswordInputProps = typeof __propDef.props;
+export type PasswordInputEvents = typeof __propDef.events;
+export type PasswordInputSlots = typeof __propDef.slots;
+export default class PasswordInput extends SvelteComponent<PasswordInputProps, PasswordInputEvents, PasswordInputSlots> {
+}
+export {};

package/dist/components/Inputs/SelectInput.css

@@ -0,0 +1,143 @@
+.svelte-select {
+  @apply border border-primary-400 rounded-md relative flex items-center pl-2 py-3.5 bg-white m-0 w-full;
+}
+
+.svelte-select .value-container {
+  @apply w-full flex flex-wrap items-center self-stretch;
+}
+
+.svelte-select input {
+  @apply cursor-default border-none text-surface-800 leading-10 pl-4 bg-transparent absolute left-0 m-0 
+        focus:outline-none hover:border-surface-400;
+}
+
+.svelte-select.focused {
+  @apply border-primary-400 bg-white text-surface-900;
+}
+
+.svelte-select.disabled {
+  @apply bg-white border-surface-200 text-surface-600;
+}
+
+.svelte-select.disabled input {
+  @apply placeholder:text-surface-600 placeholder:opacity-100;
+}
+
+.svelte-select .selected-item {
+  @apply leading-10 h-10 overflow-x-hidden pr-5 text-surface-800
+        focus:outline-none;
+}
+
+.svelte-select .hide-selected-item {
+  @apply opacity-0;
+}
+
+.svelte-select .icons {
+  @apply absolute flex items-center right-0 translate-y-0 text-surface-200 pointer-events-none top-0 bottom-0;
+}
+
+.svelte-select .icons > * {
+  @apply transition-colors ease-in-out duration-200;
+}
+
+.svelte-select .clear-select {
+  @apply pointer-events-auto;
+}
+
+.svelte-select.focused .icons,
+.svelte-select .chevron:hover,
+.svelte-select .clear-select:hover {
+  @apply text-surface-600;
+}
+
+.svelte-select .clear-select {
+  @apply px-2 h-10 text-surface-400 flex-none w-10;
+}
+
+.svelte-select .chevron {
+  @apply flex pt-0 pr-2 pl-2 border-l-2 w-9 h-5 text-surface-300;
+}
+
+.svelte-select.multi {
+  @apply pr-9 pl-4 h-auto flex-wrap items-stretch;
+}
+
+.svelte-select.multi input {
+  @apply p-0 relative m-0;
+}
+
+.svelte-select.error {
+  @apply border-warning-500 bg-white;
+}
+
+.a11y-text {
+  @apply sr-only;
+}
+
+.list {
+  @apply rounded-sm max-h-64 overflow-y-auto bg-white border-none absolute z-10 w-full left-0 right-0;
+}
+
+.list .list-group-title {
+  @apply text-surface-400 cursor-default font-medium h-10 leading-10 px-5 overflow-ellipsis whitespace-nowrap uppercase;
+}
+
+.svelte-select-list {
+  @apply z-10 shadow;
+}
+
+.svelte-select-list .empty {
+  @apply text-center rounded bg-white py-5 text-surface-500;
+}
+
+.item {
+  @apply cursor-default h-10 leading-10 px-5 bg-white text-surface-800 overflow-ellipsis overflow-hidden whitespace-nowrap;
+}
+
+.indicators {
+  @apply flex items-center;
+}
+
+.item.group-item {
+  @apply px-10;
+}
+
+.item:active {
+  @apply bg-surface-100;
+}
+
+.item.active {
+  @apply bg-surface-100 text-surface-800;
+}
+
+.item.not-selectable {
+  @apply text-surface-300;
+}
+
+.item.first {
+  @apply rounded-t-sm;
+}
+
+.item.hover:not(.active) {
+  @apply bg-surface-50;
+}
+
+.multi input {
+  flex: 1 1 40px;
+}
+
+.multi-item {
+  @apply bg-surface-100 mt-1 mr-1 border border-surface-200 rounded-sm h-8 leading-8 flex cursor-default pr-1 pl-1 max-w-full items-center mr-1 overflow-hidden overflow-ellipsis whitespace-nowrap;
+}
+
+.multi-item.disabled {
+  @apply hover:bg-surface-300 hover:text-surface-500;
+}
+
+.multi-item-clear {
+  @apply flex items-center justify-center w-5;
+}
+
+.list-item {
+  @apply list-none;
+}

package/dist/components/Inputs/SelectInput.svelte

@@ -0,0 +1,18 @@
+<script>import "./SelectInput.css";
+import Select from "svelte-select/no-styles/Select.svelte";
+export let items;
+export let value;
+export let label;
+export let name;
+</script>
+
+<Select
+  on:change
+  {value}
+  placeholder={label}
+  {items}
+  {name}
+  clearable={false}
+  searchable={false}
+  showChevron
+/>

package/dist/components/Inputs/SelectInput.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import "./SelectInput.css";
+declare const __propDef: {
+    props: {
+        items: any[];
+        value: string;
+        label: string;
+        name: string;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SelectInputProps = typeof __propDef.props;
+export type SelectInputEvents = typeof __propDef.events;
+export type SelectInputSlots = typeof __propDef.slots;
+export default class SelectInput extends SvelteComponent<SelectInputProps, SelectInputEvents, SelectInputSlots> {
+}
+export {};