@stubber/ui 1.0.0

package/dist/components/Inputs/TextInput.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="text"
+    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/TextInput.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 TextInputProps = typeof __propDef.props;
+export type TextInputEvents = typeof __propDef.events;
+export type TextInputSlots = typeof __propDef.slots;
+export default class TextInput extends SvelteComponent<TextInputProps, TextInputEvents, TextInputSlots> {
+}
+export {};

package/dist/components/Modal.svelte

@@ -0,0 +1,25 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+  export let heading;
+
+  const dispatch = createEventDispatcher();
+
+  function handle_close_modal() {
+    dispatch("close_modal");
+  }
+</script>
+
+<div class="max-h-screen flex flex-col min-w-[320px] bg-white border border-surface-100 rounded-lg">
+  <div class="h-fit pl-5 pr-2.5 py-2.5 flex grow items-center border-b border-surface-100">
+    <h1 class="text-heading-6 text-surface-900">{heading}</h1>
+    <button
+      on:click={handle_close_modal}
+      class="group ml-auto h-10 aspect-square flex items-center justify-center rounded-lg"
+    >
+      <i class="far fa-lg fa-xmark text-surface-900 group-hover:text-danger-500" />
+    </button>
+  </div>
+  <div class="p-[15px] overflow-y-auto">
+    <slot />
+  </div>
+</div>

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

@@ -0,0 +1,31 @@
+/** @typedef {typeof __propDef.props}  ModalProps */
+/** @typedef {typeof __propDef.events}  ModalEvents */
+/** @typedef {typeof __propDef.slots}  ModalSlots */
+export default class Modal extends SvelteComponent<{
+    heading: any;
+}, {
+    close_modal: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type ModalProps = typeof __propDef.props;
+export type ModalEvents = typeof __propDef.events;
+export type ModalSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        heading: any;
+    };
+    events: {
+        close_modal: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/dist/components/ModalIcon.svelte

@@ -0,0 +1,19 @@
+<script>import { Avatar } from "bits-ui";
+import { faCog } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/svelte-fontawesome";
+export let loadingStatus = void 0;
+</script>
+  
+  <Avatar.Root
+    bind:loadingStatus
+    class="h-12 w-12 rounded-md border-[0.4px] border-slate-300 {loadingStatus === 'loaded'
+      ? 'border-foreground'
+      : 'border-transparent'} bg-gradient-to-b from-[#FCFCFF] to-[#DFEAF6] text-[17px] font-medium uppercase text-muted-foreground"
+  >
+    <div
+      class="flex h-full w-full items-center justify-center p-1.5"
+    >
+      <FontAwesomeIcon icon={faCog} class="text-blue-500 text-2xl" />
+    </div>
+  </Avatar.Root>
+  

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

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import { Avatar } from "bits-ui";
+declare const __propDef: {
+    props: {
+        loadingStatus?: Avatar.Props["loadingStatus"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ModalIconProps = typeof __propDef.props;
+export type ModalIconEvents = typeof __propDef.events;
+export type ModalIconSlots = typeof __propDef.slots;
+export default class ModalIcon extends SvelteComponent<ModalIconProps, ModalIconEvents, ModalIconSlots> {
+}
+export {};

package/dist/components/NavProfile.svelte

@@ -0,0 +1,70 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+  import { clickOutside } from "../utils/actions.js";
+
+  export let avatarLink = "";
+  export let manageLink = "";
+
+  const dispatch = createEventDispatcher();
+
+  //states
+  let isMenu = false;
+
+  const toggleMenu = () => {
+    isMenu = !isMenu;
+  };
+
+  function closeMenu() {
+    if (isMenu) {
+      isMenu = false;
+    }
+  }
+</script>
+
+<button
+  use:clickOutside={closeMenu}
+  on:click={toggleMenu}
+  id="user-profile-btn"
+  class="h-full aspect-square flex items-center justify-center hover:bg-surface-100 focus:bg-surface-50"
+>
+  <div
+    class="rounded-full {isMenu ? 'outline outline-2 outline-offset-1 outline-primary-100' : ''}"
+  >
+    {#if avatarLink}
+      <img class="rounded-full" src={avatarLink} width="28px" alt="" />
+    {:else}
+      <div class="h-9 aspect-square bg-surface-100 rounded-full text-center" />
+    {/if}
+  </div>
+</button>
+
+<!-- Menu -->
+{#if isMenu}
+  <div
+    class="absolute z-20 divide-y top-[49px] right-0 w-60 border border-surface-200 bg-surface-0 shadow-md rounded-b-md"
+    on:click={(e) => {
+      e.stopImmediatePropagation();
+    }}
+    on:keypress={(e) => {
+      e.stopImmediatePropagation();
+    }}
+  >
+    <div>
+      <a
+        href={manageLink}
+        class="w-full px-4 py-3 space-x-2 flex flex-row items-center text-left text-surface-700 hover:text-surface-900 focus:text-surface-700 hover:bg-surface-100 focus:outline-none focus:bg-surface-100"
+      >
+        <i class="fa-regular fa-lg fa-fw fa-cog" />
+        <p class="text-button">Settings</p>
+      </a>
+    </div>
+    <button
+      on:click={dispatch("logout")}
+      id="logout-btn"
+      class="w-full px-4 py-3 space-x-2 flex flex-row items-center text-left text-surface-700 hover:text-surface-900 focus:text-surface-700 hover:bg-surface-100 focus:outline-none focus:bg-surface-100"
+    >
+      <i class="fa-regular fa-lg fa-fw fa-right-from-bracket" />
+      <p class="text-button">Logout</p>
+    </button>
+  </div>
+{/if}

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

@@ -0,0 +1,29 @@
+/** @typedef {typeof __propDef.props}  NavProfileProps */
+/** @typedef {typeof __propDef.events}  NavProfileEvents */
+/** @typedef {typeof __propDef.slots}  NavProfileSlots */
+export default class NavProfile extends SvelteComponent<{
+    manageLink?: string | undefined;
+    avatarLink?: string | undefined;
+}, {
+    logout: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type NavProfileProps = typeof __propDef.props;
+export type NavProfileEvents = typeof __propDef.events;
+export type NavProfileSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        manageLink?: string | undefined;
+        avatarLink?: string | undefined;
+    };
+    events: {
+        logout: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/components/OrgSwitcher.svelte

@@ -0,0 +1,193 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+  import { slide } from "svelte/transition";
+  import { quintOut } from "svelte/easing";
+  import { clickOutside } from "../utils/actions.js";
+
+  export let orgs = [];
+  export let selectedorguuid = undefined;
+  export let createOrgLink = "";
+  export let loading = false;
+
+  $: selectedOrg = orgs.find((org) => org.orguuid === selectedorguuid);
+
+  const dispatch = createEventDispatcher();
+  const alertColorMap = {
+    error: "danger-500",
+    warning: "warning-500",
+    success: "success-500",
+  };
+
+  let filterText = "";
+
+  //state
+  let state = {
+    isMenu: false,
+  };
+
+  function toggleMenu() {
+    if (orgs.length > 0) {
+      state.isMenu = !state.isMenu;
+    }
+  }
+
+  function selectOrg(orguuid) {
+    dispatch("selectOrg", orguuid);
+    selectedorguuid = orguuid;
+    state.isMenu = false;
+  }
+
+  function closeMenu() {
+    if (state.isMenu) {
+      filterText = "";
+      state.isMenu = false;
+    }
+  }
+</script>
+
+<div class="relative">
+  <div use:clickOutside={closeMenu} class="{state.isMenu ? 'absolute top-0' : ''} bg-white w-fit">
+    {#if (orgs.length >= 10 && !state.isMenu) || orgs.length <= 10}
+      <button
+        on:click|stopPropagation={toggleMenu}
+        class="flex items-center {state.isMenu
+          ? 'w-[230px] sm:w-[280px] border-x border-t rounded-x-lg rounded-t-lg hover:bg-primary-50'
+          : 'sm:w-[280px] border rounded-lg'} border-surface-100"
+      >
+        <div class="h-10 flex items-center justify-center aspect-square">
+          {#if selectedOrg?.filesrc && !loading}
+            <img
+              class="h-[25px] aspect-square object-cover rounded-full"
+              src={selectedOrg.filesrc}
+              alt={selectedOrg.label}
+            />
+          {:else}
+            <div class="h-[25px] aspect-square rounded-full bg-surface-100" />
+          {/if}
+        </div>
+        {#if loading}
+          <span class="hidden sm:block h-[25px] w-40 bg-surface-100 rounded-md" />
+        {:else}
+          <div class="{state.isMenu ? '' : 'hidden'} sm:block w-full text-left truncate">
+            <p class="text-label text-surface-900 truncate">
+              {selectedOrg?.label ?? "No orgs"}
+            </p>
+            {#if selectedOrg?.alert}
+              <div class="flex items-center space-x-1">
+                <span
+                  class="h-[6px] aspect-square bg-{alertColorMap[
+                    selectedOrg.alert?.type
+                  ]} rounded-full"
+                />
+                <p class="text-small italic text-{alertColorMap[selectedOrg.alert?.type]}">
+                  {selectedOrg.alert?.message}
+                </p>
+              </div>
+            {/if}
+          </div>
+        {/if}
+        {#if !state.isMenu && selectedOrg?.alert}
+          <span
+            class="block sm:hidden h-[6px] aspect-square bg-{alertColorMap[
+              selectedOrg.alert?.type
+            ]} rounded-full"
+          />
+        {/if}
+        <div
+          class="{loading
+            ? 'block sm:hidden'
+            : ''} ml-auto h-10 aspect-square flex items-center justify-center"
+        >
+          <i class="text-surface-900 fa far fa-chevron-down {state.isMenu ? 'rotate down' : ''}" />
+        </div>
+      </button>
+    {:else}
+      <div
+        class="h-10 w-[230px] sm:w-[280px] flex items-center border-x border-t rounded-x-lg rounded-t-lg"
+      >
+        <div class="h-full aspect-square flex items-center justify-center">
+          <i class="text-surface-900 fa far fa-magnifying-glass" />
+        </div>
+        <input
+          type="text"
+          autofocus
+          class="w-full pr-3 text-surface-900 text-label focus:outline-none"
+          placeholder="Search orgs"
+          bind:value={filterText}
+        />
+      </div>
+    {/if}
+
+    {#if state.isMenu}
+      <div
+        in:slide={{ duration: 300, easing: quintOut, axis: "y" }}
+        class="w-[230px] sm:w-[280px] border-x border-b rounded-x-lg rounded-b-lg"
+      >
+        <div class="max-h-80 overflow-y-auto">
+          {#each orgs.filter((o) => o.orguuid !== selectedOrg.orguuid || orgs.length >= 10) as org}
+            {#if org.label.toLowerCase().includes(filterText.toLowerCase())}
+              <button
+                on:click={() => selectOrg(org.orguuid)}
+                class="w-full flex items-center hover:bg-primary-50 focus:bg-primary-50 focus:outline-none"
+              >
+                <div class="h-10 flex items-center justify-center aspect-square">
+                  {#if org.filesrc}
+                    <img
+                      class="h-[25px] aspect-square object-cover rounded-full"
+                      src={org.filesrc}
+                      alt={org.label}
+                    />
+                  {:else}
+                    <div class="h-[25px] aspect-square rounded-full bg-surface-100" />
+                  {/if}
+                </div>
+                <div class="{state.isMenu ? '' : 'hidden'} sm:block w-full text-left truncate">
+                  <p class="text-label text-surface-900 truncate">
+                    {org.label}
+                  </p>
+                  {#if org.alert}
+                    <div class="flex items-center space-x-1">
+                      <span
+                        class="h-[6px] aspect-square bg-{alertColorMap[
+                          org.alert.type
+                        ]} rounded-full"
+                      />
+                      <p class="text-small italic text-{alertColorMap[org.alert.type]}">
+                        {org.alert?.message}
+                      </p>
+                    </div>
+                  {/if}
+                </div>
+                {#if org.orguuid === selectedOrg.orguuid}
+                  <div class="ml-auto h-10 aspect-square flex items-center justify-center">
+                    <i class="text-success-500 fa far fa-check" />
+                  </div>
+                {/if}
+              </button>
+            {/if}
+          {/each}
+        </div>
+
+        {#if createOrgLink}
+          <a
+            href={createOrgLink}
+            class="h-10 w-full pl-3.5 pr-3 flex items-center bg-white text-primary-500 rounded-b-lg hover:bg-primary-50 focus:bg-primary-50 focus:outline-none hover:text-primary-400"
+          >
+            <i class="far fa fa-plus mr-2" />
+            <span class="text-placeholder">Create org</span>
+          </a>
+        {/if}
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .rotate {
+    transition: all 150ms linear;
+  }
+
+  .rotate.down {
+    transform: rotate(180deg);
+  }
+</style>

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

@@ -0,0 +1,33 @@
+/** @typedef {typeof __propDef.props}  OrgSwitcherProps */
+/** @typedef {typeof __propDef.events}  OrgSwitcherEvents */
+/** @typedef {typeof __propDef.slots}  OrgSwitcherSlots */
+export default class OrgSwitcher extends SvelteComponent<{
+    orgs?: any[] | undefined;
+    selectedorguuid?: any;
+    createOrgLink?: string | undefined;
+    loading?: boolean | undefined;
+}, {
+    selectOrg: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type OrgSwitcherProps = typeof __propDef.props;
+export type OrgSwitcherEvents = typeof __propDef.events;
+export type OrgSwitcherSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        orgs?: any[] | undefined;
+        selectedorguuid?: any;
+        createOrgLink?: string | undefined;
+        loading?: boolean | undefined;
+    };
+    events: {
+        selectOrg: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/components/PasswordStrengthItem.svelte

@@ -0,0 +1,10 @@
+<script>export let value = "";
+export let isPassed = false;
+</script>
+
+<span
+  class="flex flex-row items-center space-x-2 {isPassed ? 'text-success-500' : 'text-danger-500'}"
+>
+  <i class="fa fa-md {isPassed ? 'fa-circle-check' : 'fa-circle-x'}" />
+  <p class="text-label-sm">{value}</p>
+</span>

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

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        value?: string | undefined;
+        isPassed?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PasswordStrengthItemProps = typeof __propDef.props;
+export type PasswordStrengthItemEvents = typeof __propDef.events;
+export type PasswordStrengthItemSlots = typeof __propDef.slots;
+export default class PasswordStrengthItem extends SvelteComponent<PasswordStrengthItemProps, PasswordStrengthItemEvents, PasswordStrengthItemSlots> {
+}
+export {};

package/dist/components/PasswordStrengthValidator.svelte

@@ -0,0 +1,57 @@
+<script>import PasswordStrengthItem from "./PasswordStrengthItem.svelte";
+export let value = "";
+$:
+  validatePassword(value);
+export let isStrong = true;
+let isEightCharacters = false;
+let hasNumber = false;
+let hasSymbol = false;
+let hasUpper = false;
+let hasLower = false;
+function validatePassword(password) {
+  if (password.length >= 8) {
+    isEightCharacters = true;
+  } else {
+    isEightCharacters = false;
+  }
+  if (/[a-z]/.test(password)) {
+    hasLower = true;
+  } else {
+    hasLower = false;
+  }
+  if (/[A-Z]/.test(password)) {
+    hasUpper = true;
+  } else {
+    hasUpper = false;
+  }
+  if (/\d/.test(password)) {
+    hasNumber = true;
+  } else {
+    hasNumber = false;
+  }
+  if (/[!@#$%^&*]/.test(password)) {
+    hasSymbol = true;
+  } else {
+    hasSymbol = false;
+  }
+  if (isEightCharacters && hasLower && hasUpper && hasNumber && hasSymbol) {
+    isStrong = true;
+  } else {
+    isStrong = false;
+  }
+}
+</script>
+
+<div class="space-y-0.5 text-fluid-sm">
+  <PasswordStrengthItem
+    isPassed={isStrong}
+    value="Password strength: {isStrong ? 'strong' : 'weak'}"
+  />
+  {#if !isStrong}
+    <PasswordStrengthItem isPassed={hasLower} value="At least one lower case character" />
+    <PasswordStrengthItem isPassed={hasUpper} value="At least one upper case character" />
+    <PasswordStrengthItem isPassed={hasNumber} value="Contains a number" />
+    <PasswordStrengthItem isPassed={hasSymbol} value="Contains a symbol" />
+    <PasswordStrengthItem isPassed={isEightCharacters} value="At least 8 characters" />
+  {/if}
+</div>

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

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        value?: string | undefined;
+        isStrong?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PasswordStrengthValidatorProps = typeof __propDef.props;
+export type PasswordStrengthValidatorEvents = typeof __propDef.events;
+export type PasswordStrengthValidatorSlots = typeof __propDef.slots;
+export default class PasswordStrengthValidator extends SvelteComponent<PasswordStrengthValidatorProps, PasswordStrengthValidatorEvents, PasswordStrengthValidatorSlots> {
+}
+export {};