@stubber/ui 1.0.9 → 1.0.11

package/dist/Typography.svelte.d.ts

@@ -19,5 +19,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

package/dist/atoms/Button.svelte

@@ -6,51 +6,47 @@ export let size = "md";
 export let style = "block";
 export let disabled = false;
 let isIcon = false;
-$:
-  isIcon = icon !== "";
+$: 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;
-  }
+$: 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

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

@@ -2,12 +2,12 @@ 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;
+        type?: "button" | "submit" | "reset";
+        icon?: string;
+        color?: "primary" | "surface" | "success" | "warning";
+        size?: "sm" | "md" | "lg";
+        style?: "block" | "rounded";
+        disabled?: boolean;
     };
     events: {
         click: MouseEvent;
@@ -15,6 +15,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type ButtonProps = typeof __propDef.props;
 export type ButtonEvents = typeof __propDef.events;

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

@@ -19,5 +19,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

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

@@ -7,6 +7,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type SpinnerMessageProps = typeof __propDef.props;
 export type SpinnerMessageEvents = typeof __propDef.events;

package/dist/atoms/TextOnlyButton.svelte

@@ -6,51 +6,47 @@ export let size = "md";
 export let style = "block";
 export let disabled = false;
 let isIcon = false;
-$:
-  isIcon = icon !== "";
+$: 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;
-  }
+$: 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

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

@@ -2,12 +2,12 @@ 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;
+        type?: "button" | "submit" | "reset";
+        icon?: string;
+        color?: "primary" | "surface" | "success" | "warning" | "none";
+        size?: "sm" | "md" | "lg";
+        style?: "block" | "rounded";
+        disabled?: boolean;
     };
     events: {
         click: MouseEvent;
@@ -15,6 +15,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type TextOnlyButtonProps = typeof __propDef.props;
 export type TextOnlyButtonEvents = typeof __propDef.events;

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

@@ -5,6 +5,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type AccordionProps = typeof __propDef.props;
 export type AccordionEvents = typeof __propDef.events;

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

@@ -5,6 +5,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type AdvancedSwitchProps = typeof __propDef.props;
 export type AdvancedSwitchEvents = typeof __propDef.events;

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

@@ -21,5 +21,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

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

@@ -29,5 +29,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

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

@@ -29,5 +29,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

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

@@ -21,5 +21,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

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

@@ -39,5 +39,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

package/dist/components/Inputs/PasswordInput.svelte

@@ -9,22 +9,20 @@ 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);
+$: 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;

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

@@ -3,8 +3,8 @@ declare const __propDef: {
     props: {
         name: string;
         label: string;
-        value?: string | undefined;
-        isError?: boolean | undefined;
+        value?: string;
+        isError?: boolean;
     };
     events: {
         focus: CustomEvent<any>;
@@ -12,6 +12,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type PasswordInputProps = typeof __propDef.props;
 export type PasswordInputEvents = typeof __propDef.events;

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

@@ -13,6 +13,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type SelectInputProps = typeof __propDef.props;
 export type SelectInputEvents = typeof __propDef.events;

package/dist/components/Inputs/TextInput.svelte

@@ -9,22 +9,20 @@ 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);
+$: 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;

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

@@ -3,8 +3,8 @@ declare const __propDef: {
     props: {
         name: string;
         label: string;
-        value?: string | undefined;
-        isError?: boolean | undefined;
+        value?: string;
+        isError?: boolean;
     };
     events: {
         focus: CustomEvent<any>;
@@ -12,6 +12,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type TextInputProps = typeof __propDef.props;
 export type TextInputEvents = typeof __propDef.events;

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

@@ -27,5 +27,7 @@ declare const __propDef: {
     slots: {
         default: {};
     };
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

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

@@ -8,6 +8,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type ModalIconProps = typeof __propDef.props;
 export type ModalIconEvents = typeof __propDef.events;

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

@@ -25,5 +25,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

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

@@ -29,5 +29,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

package/dist/components/PasswordStrengthItem.svelte

@@ -1,10 +1,13 @@
-<script>export let value = "";
+<script>import Label from "./label/label.svelte";
+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 class="flex flex-row items-center space-x-2">
+  <i
+    class=" {isPassed
+      ? 'fa-regular fa-circle-check text-[#008A30] '
+      : 'fa-regular fa-circle-xmark text-danger-500'}"
+  />
+  <Label>{value}</Label>
 </span>

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

@@ -1,13 +1,15 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        value?: string | undefined;
-        isPassed?: boolean | undefined;
+        value?: string;
+        isPassed?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type PasswordStrengthItemProps = typeof __propDef.props;
 export type PasswordStrengthItemEvents = typeof __propDef.events;

package/dist/components/PasswordStrengthValidator.svelte

@@ -1,57 +1,44 @@
 <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;
+$: validatePassword(value);
 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;
-  }
+  isEightCharacters = password.length >= 8;
+  hasLower = /[a-z]/.test(password);
+  hasUpper = /[A-Z]/.test(password);
+  hasNumber = /\d/.test(password);
+  hasSymbol = /[!@#$%^&*]/.test(password);
+  isStrong = isEightCharacters && hasLower && hasUpper && hasNumber && hasSymbol;
 }
+$: firstColumn = [
+  { isPassed: hasLower, value: "At least one lower case character" },
+  { isPassed: hasUpper, value: "At least one upper case character" },
+  { isPassed: hasNumber, value: "Contains a number" }
+];
+$: secondColumn = [
+  { isPassed: hasSymbol, value: "Contains a symbol" },
+  { isPassed: isEightCharacters, value: "At least 8 characters" }
+];
 </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" />
+    <div class="grid grid-cols-2 gap-x-4 gap-y-0.5">
+      <div class="space-y-0.5">
+        {#each firstColumn as requirement}
+          <PasswordStrengthItem isPassed={requirement.isPassed} value={requirement.value} />
+        {/each}
+      </div>
+      <div class="space-y-0.5">
+        {#each secondColumn as requirement}
+          <PasswordStrengthItem isPassed={requirement.isPassed} value={requirement.value} />
+        {/each}
+      </div>
+    </div>
   {/if}
 </div>

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

@@ -1,13 +1,15 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        value?: string | undefined;
-        isStrong?: boolean | undefined;
+        value?: string;
+        isStrong?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type PasswordStrengthValidatorProps = typeof __propDef.props;
 export type PasswordStrengthValidatorEvents = typeof __propDef.events;

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

@@ -43,5 +43,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

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

@@ -31,5 +31,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};