@stubber/ui 1.0.0

package/README.md

@@ -0,0 +1,17 @@
+# Stubber UI Package
+
+This is a sveltekit library project that contains standardized UI components to be used in Stubber Svelte apps
+
+[Read More on the Wiki](https://wiki.stubber.zone:3443/en/npm-packages/stubber-ui-pkg)
+
+# Getting Started
+
+- `npm i`
+- `npm run storybook`
+
+# Publishing
+
+- `npm version patch` to bump the version
+- `git push origin master` to push the bumped version
+- `npm run build` to build and package the project
+- `npm publish` to publish the package

package/dist/Typography.svelte

@@ -0,0 +1,129 @@
+<script>
+  export let text = "";
+</script>
+
+<h1 class="text-surface-900 text-heading-1">h1: {text}</h1>
+<h2 class="text-surface-900 text-heading-2">h2: {text}</h2>
+<h3 class="text-surface-900 text-heading-3">h3: {text}</h3>
+<h4 class="text-surface-900 text-heading-4">h4: {text}</h4>
+<h5 class="text-surface-900 text-heading-5">h5: {text}</h5>
+<h6 class="text-surface-900 text-heading-6">h6: {text}</h6>
+<div class="text-surface-900 text-p-body">pb: {text}</div>
+<div class="text-surface-900 text-button">bt: {text}</div>
+<div class="text-surface-900 text-field">fi: {text}</div>
+<div class="text-surface-900 text-placeholder">pl: {text}</div>
+<div class="text-surface-900 text-code">co: {text}</div>
+<div class="text-surface-900 text-label">lb: {text}</div>
+<div class="text-surface-900 text-small">sm: {text}</div>
+
+<style>
+  .demo-text-heading-1,
+  .demo-text-heading-2,
+  .demo-text-heading-3,
+  .demo-text-heading-4,
+  .demo-text-heading-5,
+  .demo-text-heading-6,
+  .demo-text-p-body,
+  .demo-text-button,
+  .demo-text-field,
+  .demo-text-placeholder,
+  .demo-text-code,
+  .demo-text-label,
+  .demo-text-small {
+    font-family: "Roboto", Arial, Helvetica, sans-serif;
+    letter-spacing: normal;
+    font-display: swap;
+  }
+
+  @media screen and (min-width: 320px) and (max-width: 768px) {
+    .demo-text-heading-1 {
+      font-size: calc(34px + 8 * (100vw - 320px) / 768);
+      font-weight: 500;
+    }
+    .demo-text-heading-2 {
+      font-size: calc(30px + 8 * (100vw - 320px) / 768);
+      font-weight: 400;
+    }
+    .demo-text-heading-3 {
+      font-size: calc(26px + 8 * (100vw - 320px) / 768);
+      font-weight: 500;
+    }
+    .demo-text-heading-4 {
+      font-size: calc(22px + 8 * (100vw - 320px) / 768);
+      font-weight: 400;
+    }
+    .demo-text-heading-5 {
+      font-size: calc(18px + 8 * (100vw - 320px) / 768);
+      font-weight: 500;
+    }
+    .demo-text-heading-6 {
+      font-size: calc(16px + 8 * (100vw - 320px) / 768);
+      font-weight: 400;
+    }
+    .demo-text-button,
+    .demo-text-field,
+    .demo-text-placeholder,
+    .demo-text-code {
+      font-size: calc(14px + 10 * (100vw - 320px) / 768);
+      font-weight: 400;
+    }
+    .demo-text-p-body {
+      font-size: calc(14px + 10 * (100vw - 320px) / 768);
+      font-weight: 300;
+    }
+    .demo-text-label {
+      font-size: calc(12px + 10 * (100vw - 320px) / 768);
+      font-weight: 400;
+    }
+    .demo-text-small {
+      font-size: calc(9px + 10 * (100vw - 320px) / 768);
+      font-weight: 300;
+    }
+  }
+
+  @media screen and (min-width: 768px) {
+    .demo-text-heading-1 {
+      font-size: calc(38px + 4 * (100vw - 768px) / 2400);
+      font-weight: 500;
+    }
+    .demo-text-heading-2 {
+      font-size: calc(34px + 4 * (100vw - 768px) / 2400);
+      font-weight: 400;
+    }
+    .demo-text-heading-3 {
+      font-size: calc(30px + 4 * (100vw - 768px) / 2400);
+      font-weight: 500;
+    }
+    .demo-text-heading-4 {
+      font-size: calc(26px + 4 * (100vw - 768px) / 2400);
+      font-weight: 400;
+    }
+    .demo-text-heading-5 {
+      font-size: calc(22px + 4 * (100vw - 768px) / 2400);
+      font-weight: 500;
+    }
+    .demo-text-heading-6 {
+      font-size: calc(18px + 4 * (100vw - 768px) / 2400);
+      font-weight: 400;
+    }
+    .demo-text-button,
+    .demo-text-field,
+    .demo-text-placeholder,
+    .demo-text-code {
+      font-size: calc(16px + 4 * (100vw - 768px) / 2400);
+      font-weight: 400;
+    }
+    .demo-text-p-body {
+      font-size: calc(16px + 4 * (100vw - 768px) / 2400);
+      font-weight: 300;
+    }
+    .demo-text-label {
+      font-size: calc(14px + 4 * (100vw - 768px) / 2400);
+      font-weight: 400;
+    }
+    .demo-text-small {
+      font-size: calc(12px + 4 * (100vw - 768px) / 2400);
+      font-weight: 300;
+    }
+  }
+</style>

package/dist/Typography.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  TypographyProps */
+/** @typedef {typeof __propDef.events}  TypographyEvents */
+/** @typedef {typeof __propDef.slots}  TypographySlots */
+export default class Typography extends SvelteComponent<{
+    text?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type TypographyProps = typeof __propDef.props;
+export type TypographyEvents = typeof __propDef.events;
+export type TypographySlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        text?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/assets/docs-icon.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="16" viewBox="0 0 20 16" fill="none">
+    <g clip-path="url(#clip0_6861_12999)">
+        <path d="M2 14.5H3V16H2C0.896875 16 0 15.1031 0 14V2C0 0.896875 0.896875 0 2 0H7.17188C7.70312 0 8.2125 0.209375 8.5875 0.584375L11.4156 3.4125C11.7906 3.7875 12 4.29688 12 4.82812V9H10.5V5H8C7.44687 5 7 4.55313 7 4V1.5H2C1.725 1.5 1.5 1.725 1.5 2V14C1.5 14.275 1.725 14.5 2 14.5ZM5.5 11H6.5C7.32812 11 8 11.6719 8 12.5V14.5C8 15.3281 7.32812 16 6.5 16H5.5C5.225 16 5 15.775 5 15.5V11.5C5 11.225 5.225 11 5.5 11ZM6 15H6.5C6.775 15 7 14.775 7 14.5V12.5C7 12.225 6.775 12 6.5 12H6V15ZM14.25 11H14.75C15.4406 11 16 11.5594 16 12.25V12.5C16 12.775 15.775 13 15.5 13C15.225 13 15 12.775 15 12.5V12.25C15 12.1125 14.8875 12 14.75 12H14.25C14.1125 12 14 12.1125 14 12.25V14.75C14 14.8875 14.1125 15 14.25 15H14.75C14.8875 15 15 14.8875 15 14.75V14.5C15 14.225 15.225 14 15.5 14C15.775 14 16 14.225 16 14.5V14.75C16 15.4406 15.4406 16 14.75 16H14.25C13.5594 16 13 15.4406 13 14.75V12.25C13 11.5594 13.5594 11 14.25 11ZM9 12.25C9 11.5594 9.55937 11 10.25 11H10.75C11.4406 11 12 11.5594 12 12.25V14.75C12 15.4406 11.4406 16 10.75 16H10.25C9.55937 16 9 15.4406 9 14.75V12.25ZM10.25 12C10.1125 12 10 12.1125 10 12.25V14.75C10 14.8875 10.1125 15 10.25 15H10.75C10.8875 15 11 14.8875 11 14.75V12.25C11 12.1125 10.8875 12 10.75 12H10.25Z" fill="#1F2933"/>
+        <path d="M20 15.0237C20 15.2012 19.9606 15.3639 19.8818 15.5118C19.8031 15.6598 19.698 15.7781 19.5667 15.8669C19.4354 15.9556 19.291 16 19.1335 16H17.8731C17.7155 16 17.5689 15.9556 17.4333 15.8669C17.302 15.7781 17.1969 15.6598 17.1182 15.5118C17.0394 15.3639 17 15.2012 17 15.0237V14.8018C17 14.7081 17.0284 14.6292 17.0853 14.5651C17.1466 14.4961 17.2188 14.4615 17.302 14.4615H17.4858C17.5646 14.4615 17.6324 14.4961 17.6893 14.5651C17.7505 14.6292 17.7812 14.7081 17.7812 14.8018V15.0237C17.7812 15.0483 17.7899 15.073 17.8074 15.0976C17.8293 15.1174 17.8512 15.1272 17.8731 15.1272H19.1335C19.1554 15.1272 19.1751 15.1174 19.1926 15.0976C19.2101 15.073 19.2188 15.0483 19.2188 15.0237V14.3506C19.2188 14.2964 19.1969 14.2618 19.1532 14.247L17.5777 13.5814C17.4026 13.5123 17.2626 13.3915 17.1575 13.2189C17.0525 13.0464 17 12.8565 17 12.6494V11.9837C17 11.8013 17.0394 11.6361 17.1182 11.4882C17.1969 11.3402 17.302 11.2219 17.4333 11.1331C17.5689 11.0444 17.7155 11 17.8731 11H19.1335C19.291 11 19.4354 11.0444 19.5667 11.1331C19.698 11.2219 19.8031 11.3402 19.8818 11.4882C19.9606 11.6361 20 11.8013 20 11.9837V12.1834C20 12.2771 19.9694 12.356 19.9081 12.4201C19.8512 12.4842 19.7812 12.5163 19.698 12.5163H19.5208C19.4376 12.5163 19.3654 12.4842 19.3042 12.4201C19.2473 12.356 19.2188 12.2771 19.2188 12.1834V11.9837C19.2188 11.9147 19.1904 11.8802 19.1335 11.8802H17.8731C17.8512 11.8802 17.8293 11.89 17.8074 11.9098C17.7899 11.9295 17.7812 11.9541 17.7812 11.9837V12.6494C17.7812 12.7086 17.8031 12.7456 17.8468 12.7604L19.4289 13.426C19.5996 13.4951 19.7374 13.6159 19.8425 13.7885C19.9475 13.961 20 14.1484 20 14.3506V15.0237Z" fill="#1F2933"/>
+    </g>
+    <defs>
+        <clipPath id="clip0_6861_12999">
+            <rect width="20" height="16" fill="white"/>
+        </clipPath>
+    </defs>
+</svg>

package/dist/assets/stubber-icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25" fill="none">
+    <path d="M7.61689 14.6343L10.8968 15.9102C11.4032 13.8552 12.313 12.4971 13.9648 12.4971C16.7206 12.4971 17.9514 16.0483 21.9114 16.0483C22.7829 16.0483 23.9136 15.8925 25 15.3046V18.7529C25 22.2043 22.2 25 18.7434 25H0L2.33483 21.8721L0 18.7529L2.32599 15.625L0 12.5059L2.33483 9.37794L0 6.25588L2.33483 3.12794L0 0H18.7345C22.1941 0 25 2.80162 25 6.25588V8.15793C25 9.0134 24.8381 9.86888 24.47 10.6391C23.9165 11.7974 23.1068 12.5059 21.932 12.5059C19.1674 12.5059 17.9337 8.96343 13.9854 8.96343C11.9833 8.96343 8.67389 9.78069 7.61689 14.6343Z" fill="#0967D2"/>
+</svg>

package/dist/atoms/Button.svelte

@@ -0,0 +1,70 @@
+<script>export let label;
+export let type = "button";
+export let icon = "";
+export let color = "primary";
+export let size = "md";
+export let style = "block";
+export let disabled = false;
+let isIcon = false;
+$:
+  isIcon = icon !== "";
+let colorClass;
+let sizeClass;
+let iconSizeClass;
+let styleClass;
+$:
+  switch (color) {
+    case "primary":
+      colorClass = "bg-primary-400 hover:bg-primary-500 focus:bg-primary-300";
+      break;
+    case "surface":
+      colorClass = "bg-surface-400 hover:bg-surface-500 focus:bg-surface-300";
+      break;
+    case "success":
+      colorClass = "bg-success-400 hover:bg-success-500 focus:bg-success-300";
+      break;
+    case "warning":
+      colorClass = "bg-warning-500 hover:bg-warning-600 focus:bg-warning-400";
+      break;
+  }
+$:
+  switch (size) {
+    case "sm":
+      sizeClass = "text-label-sm";
+      iconSizeClass = "fa-xs";
+      break;
+    case "md":
+      sizeClass = "text-label-md";
+      iconSizeClass = "fa-sm";
+      break;
+    case "lg":
+      sizeClass = "text-label-lg";
+      iconSizeClass = "fa-md";
+      break;
+  }
+$:
+  switch (style) {
+    case "block":
+      styleClass = "rounded-sm";
+      break;
+    case "rounded":
+      styleClass = "rounded-full";
+      break;
+  }
+</script>
+
+<button
+  on:click
+  {disabled}
+  class="{disabled
+    ? 'bg-surface-300'
+    : colorClass} py-2 px-5 align-center inline-flex flex-row items-center text-center {styleClass} "
+  {type}
+>
+  <div class="flex flex-row items-center space-x-2">
+    {#if isIcon}
+      <i class="text-white fa-fw fa-solid {iconSizeClass} fa-{icon}" />
+    {/if}
+    <p class="{sizeClass} text-white">{label}</p>
+  </div>
+</button>

package/dist/atoms/Button.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        label: string;
+        type?: "button" | "reset" | "submit" | undefined;
+        icon?: string | undefined;
+        color?: "primary" | "surface" | "success" | "warning" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        style?: "block" | "rounded" | undefined;
+        disabled?: boolean | undefined;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ButtonProps = typeof __propDef.props;
+export type ButtonEvents = typeof __propDef.events;
+export type ButtonSlots = typeof __propDef.slots;
+export default class Button extends SvelteComponent<ButtonProps, ButtonEvents, ButtonSlots> {
+}
+export {};

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

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  IconButtonProps */
+/** @typedef {typeof __propDef.events}  IconButtonEvents */
+/** @typedef {typeof __propDef.slots}  IconButtonSlots */
+export default class IconButton extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [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: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/atoms/SpinnerMessage.svelte

@@ -0,0 +1,7 @@
+<script>export let message;
+</script>
+
+<div class="flex items-center space-x-2">
+  <i class="text-body-sm fas fa-rotate fa-spin text-primary-400" />
+  <p class="text-body-md text-primary-400">{message}</p>
+</div>

package/dist/atoms/SpinnerMessage.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        message: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SpinnerMessageProps = typeof __propDef.props;
+export type SpinnerMessageEvents = typeof __propDef.events;
+export type SpinnerMessageSlots = typeof __propDef.slots;
+export default class SpinnerMessage extends SvelteComponent<SpinnerMessageProps, SpinnerMessageEvents, SpinnerMessageSlots> {
+}
+export {};

package/dist/atoms/TextOnlyButton.svelte

@@ -0,0 +1,70 @@
+<script>export let label;
+export let type = "button";
+export let icon = "";
+export let color = "primary";
+export let size = "md";
+export let style = "block";
+export let disabled = false;
+let isIcon = false;
+$:
+  isIcon = icon !== "";
+let colorClass;
+let sizeClass;
+let iconSizeClass;
+let styleClass;
+$:
+  switch (color) {
+    case "primary":
+      colorClass = "bg-white text-primary-400 hover:bg-primary-50 hover:text-primary-500 focus:bg-primary-100 focus:text-primary-500";
+      break;
+    case "surface":
+      colorClass = "bg-white text-surface-700 hover:bg-surface-50 hover:text-surface-800 focus:bg-surface-100 focus:text-surface-800";
+      break;
+    case "success":
+      colorClass = "bg-white text-success-500 hover:bg-success-50 hover:text-success-600 focus:bg-success-100 focus:text-success-600";
+      break;
+    case "warning":
+      colorClass = "bg-white text-warning-500 hover:bg-warning-50 hover:text-warning-600 focus:bg-warning-100 focus:text-warning-600";
+      break;
+  }
+$:
+  switch (size) {
+    case "sm":
+      sizeClass = "text-label-sm";
+      iconSizeClass = "fa-xs";
+      break;
+    case "md":
+      sizeClass = "text-label-md";
+      iconSizeClass = "fa-sm";
+      break;
+    case "lg":
+      sizeClass = "text-label-lg";
+      iconSizeClass = "fa-md";
+      break;
+  }
+$:
+  switch (style) {
+    case "block":
+      styleClass = "rounded-sm";
+      break;
+    case "rounded":
+      styleClass = "rounded-full";
+      break;
+  }
+</script>
+
+<button
+  {disabled}
+  on:click
+  class="{disabled
+    ? 'bg-white text-surface-500'
+    : colorClass} py-2 px-5 align-center inline-flex flex-row items-center text-center {styleClass} "
+  {type}
+>
+  <div class="flex flex-row items-center space-x-2">
+    {#if isIcon}
+      <i class="fa-fw fa-solid {iconSizeClass} fa-{icon}" />
+    {/if}
+    <p class={sizeClass}>{label}</p>
+  </div>
+</button>

package/dist/atoms/TextOnlyButton.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        label: string;
+        type?: "button" | "reset" | "submit" | undefined;
+        icon?: string | undefined;
+        color?: "primary" | "surface" | "success" | "warning" | "none" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        style?: "block" | "rounded" | undefined;
+        disabled?: boolean | undefined;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TextOnlyButtonProps = typeof __propDef.props;
+export type TextOnlyButtonEvents = typeof __propDef.events;
+export type TextOnlyButtonSlots = typeof __propDef.slots;
+export default class TextOnlyButton extends SvelteComponent<TextOnlyButtonProps, TextOnlyButtonEvents, TextOnlyButtonSlots> {
+}
+export {};

package/dist/components/Accordion.svelte

@@ -0,0 +1,47 @@
+<script>import { Accordion } from "bits-ui";
+import { slide } from "svelte/transition";
+import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/svelte-fontawesome";
+const items = [
+  {
+    title: "What is the meaning of life?",
+    content: "To become a better person, to help others, and to leave the world a better place than you found it."
+  },
+  {
+    title: "How do I become a better person?",
+    content: "Read books, listen to podcasts, and surround yourself with people who inspire you."
+  },
+  {
+    title: "What is the best way to help others?",
+    content: "Give them your time, attention, and love."
+  }
+];
+</script>
+  
+
+  <Accordion.Root class="w-full sm:max-w-[70%]" multiple>
+  {#each items as item, i}
+    <Accordion.Item value={`${i}`} class="group border-b border-dark-10 px-1.5">
+      <Accordion.Header>
+        <Accordion.Trigger
+          class="flex w-full flex-1 items-center justify-between py-5 text-[15px] font-medium transition-all [&[data-state=open]>span>svg]:rotate-180"
+        >
+          {item.title}
+          <span
+            class="inline-flex size-8 items-center justify-center rounded-[7px] bg-transparent transition-all hover:bg-dark-10"
+          >
+            <!-- Use FontAwesomeIcon with the Pro CaretDown icon -->
+            <FontAwesomeIcon icon={faCaretDown} class="size-[18px] transition-all duration-200" />
+          </span>
+        </Accordion.Trigger>
+      </Accordion.Header>
+      <Accordion.Content
+        transition={slide}
+        transitionConfig={{ duration: 200 }}
+        class="pb-[25px] text-sm tracking-[-0.01em]"
+      >
+        {item.content}
+      </Accordion.Content>
+    </Accordion.Item>
+  {/each}
+</Accordion.Root>

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

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AccordionProps = typeof __propDef.props;
+export type AccordionEvents = typeof __propDef.events;
+export type AccordionSlots = typeof __propDef.slots;
+export default class Accordion extends SvelteComponent<AccordionProps, AccordionEvents, AccordionSlots> {
+}
+export {};

package/dist/components/AdvancedSwitch.svelte

@@ -0,0 +1,20 @@
+<script>import { Label, Switch } from "bits-ui";
+</script>
+   
+  <div class="flex items-center space-x-3">
+    <Switch.Root
+    id="marketing"
+    class="peer inline-flex h-[36px] min-h-[36px] w-[62px] shrink-0 cursor-pointer items-center rounded-xl px-[4px] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-300 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-info-600 data-[state=unchecked]:bg-gray-200 shadow-lg border-2 border-white/20"
+  >
+    <Switch.Thumb
+      class="pointer-events-none h-[26px] w-[26px] shrink-0 rounded-lg bg-white transition-transform data-[state=checked]:translate-x-[26px] data-[state=unchecked]:translate-x-0 shadow-md flex items-center justify-center"
+    >
+    </Switch.Thumb>
+  </Switch.Root>
+  
+
+  
+    <Label.Root for="marketing" class="text-sm font-medium"
+      >Advanced Mode</Label.Root
+    >
+  </div>

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

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AdvancedSwitchProps = typeof __propDef.props;
+export type AdvancedSwitchEvents = typeof __propDef.events;
+export type AdvancedSwitchSlots = typeof __propDef.slots;
+export default class AdvancedSwitch extends SvelteComponent<AdvancedSwitchProps, AdvancedSwitchEvents, AdvancedSwitchSlots> {
+}
+export {};

package/dist/components/Alert.svelte

@@ -0,0 +1,34 @@
+<script>
+  export let type = "info";
+  export let message = "";
+
+  let colorClass = "";
+  $: switch (type) {
+    case "info":
+      colorClass = "bg-primary-300";
+      break;
+    case "success":
+      colorClass = "bg-success-300";
+      break;
+    case "warning":
+      colorClass = "bg-warning-300";
+      break;
+    case "error":
+      colorClass = "bg-danger-300";
+      break;
+  }
+</script>
+
+<div class="w-[280px] p-5 {colorClass} rounded-lg shadow-5">
+  <div class="flex">
+    <div class="flex items-center mr-[15px]">
+      <i class="text-white far fa-lg fa-circle-info" />
+    </div>
+    <div class="text-label font-normal text-white mr-2.5">
+      {@html message}
+    </div>
+    <div class="ml-auto flex items-center">
+      <i class="text-white far fa-lg fa-xmark" />
+    </div>
+  </div>
+</div>

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

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

package/dist/components/Breadcrumbs.svelte

@@ -0,0 +1,64 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+  import IconButton from "./IconButton.svelte";
+  export let breadcrumbs = []; // { label: string, href: string }
+  export let title = "";
+  export let mode = "redirect"; // redirect || button
+  export let reload_on_redirect = false; // false || true
+
+  const dispatch = createEventDispatcher();
+
+  function handleClick(e) {
+    dispatch("click", e);
+  }
+</script>
+
+<!-- Breadcrumbs -->
+<div>
+  <div class="flex flex-row items-center">
+    {#if breadcrumbs.length >= 2}
+      {#if mode == "redirect"}
+        <a
+          href={breadcrumbs[breadcrumbs.length - 2].href}
+          data-sveltekit-reload={Boolean(reload_on_redirect)}
+        >
+          <div class="text-surface-700">
+            <IconButton icon="far fa-arrow-left" color="surface" variant="ghost" />
+          </div>
+        </a>
+      {:else if mode == "button"}
+        <div class="text-surface-700">
+          <IconButton
+            on:click={(e) => handleClick(breadcrumbs[breadcrumbs.length - 2].href)}
+            icon="far fa-arrow-left"
+            color="surface"
+            variant="ghost"
+          />
+        </div>
+      {/if}
+    {/if}
+    {#if breadcrumbs.length}
+      {#each breadcrumbs as breadcrumb, i}
+        {#if i == breadcrumbs.length - 1}
+          <h5 class="text-button font-normal text-surface-700">{breadcrumb.label}</h5>
+        {:else if mode == "redirect"}
+          <a href={breadcrumb.href} data-sveltekit-reload={Boolean(reload_on_redirect)}>
+            <h5 class="text-button font-normal text-surface-700 hover:text-primary-400">
+              {breadcrumb.label} /&nbsp;
+            </h5>
+          </a>
+        {:else if mode == "button"}
+          <button
+            on:click={(e) => handleClick(breadcrumb.href)}
+            class="text-button font-normal text-surface-700 hover:text-primary-400"
+          >
+            {breadcrumb.label} /&nbsp;
+          </button>
+        {/if}
+      {/each}
+    {/if}
+  </div>
+  {#if title}
+    <h6 class="text-surface-900 text-heading-5">{title}</h6>
+  {/if}
+</div>