@poirazis/supercomponents-shared 1.2.16 → 1.2.19

package/src/lib/UI/elements/Checkbox.svelte

@@ -6,9 +6,11 @@
   export let partial: boolean = false;
   export let disabled: boolean = false;
   export let hovered: boolean = false;
+  export let locked: boolean = false;
+  export let size: "small" | "medium" | "large" = "small";
 
   function toggle() {
-    if (disabled) return;
+    if (disabled || locked) return;
     checked = !checked;
     dispatch("change", { checked });
   }
@@ -16,11 +18,20 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
-<button class:checked class:disabled class:hovered on:click={toggle}>
+<button
+  class:checked
+  class:disabled
+  class:hovered
+  class:locked
+  class={size}
+  on:click={toggle}
+>
   {#if checked}
-    <i class="ph ph-check"></i>
+    <i class="ph ph-bold ph-check"></i>
   {:else if partial}
     <i class="ph ph-minus"></i>
+  {:else if locked}
+    <i class="ph ph-lock"></i>
   {/if}
 </button>
 
@@ -31,16 +42,50 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 0.85rem;
-    height: 0.85rem;
     border-radius: 0.25rem;
     border: 1px solid var(--spectrum-global-color-gray-500);
     background-color: var(--spectrum-global-color-gray-50);
     transition: all 0.1s ease-in-out;
   }
 
+  /* Small size */
+  button.small {
+    width: 0.85rem;
+    height: 0.85rem;
+  }
+
+  button.small i {
+    font-size: 0.65rem;
+  }
+
+  /* Medium size */
+  button.medium {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  button.medium i {
+    font-size: 0.75rem;
+  }
+
+  /* Large size */
+  button.large {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  button.large i {
+    font-size: 0.9rem;
+  }
+
   button.checked {
-    border-color: var(--spectrum-global-color-gray-700);
+    border-color: var(--spectrum-global-color-blue-600) !important;
+    background-color: var(--spectrum-global-color-blue-600);
+
+    & i {
+      color: white;
+      font-weight: 900;
+    }
   }
 
   button.disabled {
@@ -49,20 +94,33 @@
     border-color: var(--spectrum-global-color-gray-300);
   }
 
-  button:hover:not(.disabled),
-  button.hovered:not(.disabled) {
+  button.locked {
+    border-color: transparent;
+  }
+
+  button.locked i {
+    font-size: 1rem !important;
+    font-weight: 400 !important;
+    color: var(--spectrum-global-color-gray-500) !important;
+  }
+
+  button:hover:not(.disabled):not(.locked):not(.checked) {
+    background-color: var(--spectrum-global-color-gray-100);
+    border-color: var(--spectrum-global-color-gray-600);
+  }
+
+  button.hovered:not(.disabled):not(.locked):not(.checked) {
     border: 1px solid var(--spectrum-global-color-gray-600);
   }
 
-  button:active {
+  button:active:not(.disabled):not(.locked):not(.checked) {
     background-color: var(--spectrum-global-color-blue-100);
   }
-  button:focus {
+  button:focus:not(.disabled):not(.locked) {
     border: 1px solid var(--spectrum-global-color-gray-700);
   }
 
   i {
-    font-size: 0.65rem;
     font-weight: 700;
     color: var(--spectrum-global-color-gray-700);
     animation: scaleIn 0.13s ease-out;

package/src/lib/UI/elements/Switch.svelte

@@ -0,0 +1,162 @@
+<script lang="ts">
+  import { createEventDispatcher } from "svelte";
+  const dispatch = createEventDispatcher();
+
+  export let checked: boolean | null = false;
+  export let disabled: boolean = false;
+  export let hovered: boolean = false;
+  export let size: "small" | "medium" | "large" = "medium";
+  export let tristate: boolean = false;
+
+  function toggle() {
+    if (disabled) return;
+
+    if (tristate) {
+      // Three-state cycle: off -> on -> null -> off
+      if (checked === false) {
+        checked = true;
+      } else if (checked === true) {
+        checked = null;
+      } else {
+        checked = false;
+      }
+    } else {
+      // Two-state toggle: off -> on -> off
+      checked = !checked;
+    }
+
+    dispatch("change", { checked });
+  }
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  class="switch-container {size}"
+  class:checked={checked === true}
+  class:indeterminate={checked === null}
+  class:disabled
+  class:hovered
+  on:click|stopPropagation={toggle}
+>
+  <div class="switch-track">
+    <div class="switch-thumb"></div>
+  </div>
+</div>
+
+<style>
+  .switch-container {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .switch-container.disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  .switch-track {
+    position: relative;
+    background-color: var(--spectrum-global-color-gray-400);
+    border-radius: 1rem;
+  }
+
+  .switch-thumb {
+    position: absolute;
+    background-color: var(--spectrum-global-color-gray-50);
+    border-radius: 50%;
+    transition: transform 0.2s ease-in-out;
+  }
+
+  /* Small size */
+  .switch-container.small .switch-track {
+    width: 2rem;
+    height: 1rem;
+  }
+
+  .switch-container.small .switch-thumb {
+    width: 0.7rem;
+    height: 0.7rem;
+    top: 0.15rem;
+    left: 0.15rem;
+  }
+
+  .switch-container.small.checked .switch-thumb {
+    transform: translateX(1rem);
+  }
+
+  .switch-container.small.checked .switch-track {
+    justify-content: flex-end;
+  }
+
+  .switch-container.small.indeterminate .switch-thumb {
+    transform: translateX(0.45rem);
+  }
+
+  /* Medium size */
+  .switch-container.medium .switch-track {
+    width: 2.5rem;
+    height: 1.25rem;
+  }
+
+  .switch-container.medium .switch-thumb {
+    width: 1rem;
+    height: 1rem;
+    top: 0.125rem;
+    left: 0.125rem;
+  }
+
+  .switch-container.medium.checked .switch-thumb {
+    transform: translateX(1.25rem);
+  }
+
+  .switch-container.medium.indeterminate .switch-thumb {
+    transform: translateX(0.625rem);
+  }
+
+  /* Large size */
+  .switch-container.large .switch-track {
+    width: 3rem;
+    height: 1.5rem;
+  }
+
+  .switch-container.large .switch-thumb {
+    width: 1.25rem;
+    height: 1.25rem;
+    top: 0.125rem;
+    left: 0.125rem;
+  }
+
+  .switch-container.large.checked .switch-thumb {
+    transform: translateX(1.5rem);
+  }
+
+  .switch-container.large.indeterminate .switch-thumb {
+    transform: translateX(0.75rem);
+  }
+
+  /* Checked state */
+  .switch-container.checked .switch-track {
+    background-color: var(--spectrum-global-color-blue-500);
+  }
+
+  /* Indeterminate state */
+  .switch-container.indeterminate .switch-track {
+    background-color: var(--spectrum-global-color-orange-500);
+  }
+
+  /* Hover state */
+  .switch-container:hover:not(.disabled),
+  .switch-container.hovered:not(.disabled) {
+    filter: brightness(1.1);
+  }
+
+  /* Focus state */
+  .switch-container:focus-visible {
+    outline: 2px solid var(--spectrum-global-color-blue-600);
+    outline-offset: 2px;
+    border-radius: 0.5rem;
+  }
+</style>

package/src/lib/UI/elements/Textbox.svelte

@@ -0,0 +1,210 @@
+<script lang="ts">
+  import { createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher();
+
+  interface TextboxProps {
+    value?: string | number;
+    disabled?: boolean;
+    copyLabel?: string;
+    copiedLabel?: string;
+    title?: string;
+    wrap?: boolean;
+    monospace?: boolean;
+    oncopy?: (detail: { value: string }) => void;
+  }
+
+  let {
+    value = "",
+    disabled = false,
+    copyLabel = "Copy to clipboard",
+    copiedLabel = "Copied !",
+    title,
+    wrap = false,
+    monospace = true,
+    oncopy,
+  }: TextboxProps = $props();
+
+  let justCopied = $state(false);
+  let copyTimeout: ReturnType<typeof setTimeout> | undefined;
+
+  let stringValue = $derived(String(value ?? "").trim());
+
+  let displayValue = $derived(
+    justCopied && copiedLabel?.trim() ? copiedLabel : stringValue || "",
+  );
+
+  function copyToClipboard() {
+    if (disabled || !stringValue || justCopied) return;
+
+    navigator.clipboard
+      .writeText(stringValue)
+      .then(() => {
+        justCopied = true;
+        const detail = { value: stringValue };
+
+        dispatch("copy", detail);
+        oncopy?.(detail);
+
+        if (copyTimeout) clearTimeout(copyTimeout);
+        copyTimeout = setTimeout(() => {
+          justCopied = false;
+          copyTimeout = undefined;
+        }, 800);
+      })
+      .catch((err) => {
+        console.error("Failed to copy to clipboard:", err);
+      });
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (disabled) return;
+    if ((e.key === "Enter" || e.key === " ") && !justCopied) {
+      e.preventDefault();
+      copyToClipboard();
+    }
+  }
+
+  $effect(() => {
+    // Cleanup any pending timeout when the component is destroyed
+    return () => {
+      if (copyTimeout) clearTimeout(copyTimeout);
+    };
+  });
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<span
+  class="textbox value copyable"
+  class:copied={justCopied}
+  class:disabled
+  class:monospace
+  role="button"
+  tabindex={disabled ? -1 : 0}
+  title={justCopied ? "" : (title ?? (stringValue ? copyLabel : ""))}
+  onclick={copyToClipboard}
+  onkeydown={handleKeydown}
+>
+  <span class="textbox-text" class:wrap>
+    {displayValue}
+  </span>
+
+  {#if !justCopied && stringValue}
+    <span class="copy-icon">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="13"
+        height="13"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2.25"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
+        ></path>
+      </svg>
+    </span>
+  {/if}
+</span>
+
+<style>
+  .textbox.value {
+    color: var(--spectrum-global-color-gray-700);
+    border: 1px solid var(--spectrum-global-color-gray-300);
+    border-radius: 0.25rem;
+    padding: 0.5rem 0.75rem;
+    background: rgb(from var(--spectrum-global-color-gray-50) r g b / 0.5);
+    font-family: monospace;
+    font-size: 12px;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .textbox.value:not(.monospace) {
+    font-family: var(
+      --spectrum-global-font-family,
+      system-ui,
+      -apple-system,
+      sans-serif
+    );
+    font-size: 13px;
+  }
+
+  .textbox.value.copyable {
+    cursor: pointer;
+    transition:
+      background-color 0.1s ease,
+      border-color 0.1s ease;
+    min-width: 0;
+    justify-content: space-between;
+  }
+
+  .textbox.value.copyable:hover:not(.disabled) {
+    background-color: var(--spectrum-global-color-gray-100);
+  }
+
+  .textbox.value.copyable:focus:not(.disabled) {
+    outline: 1px solid var(--spectrum-global-color-gray-500);
+    background-color: var(--spectrum-global-color-gray-100);
+    outline-offset: 1px;
+  }
+
+  .textbox.value.copyable.copied {
+    border-color: var(--spectrum-global-color-gray-500);
+    background-color: var(--spectrum-global-color-gray-100);
+    color: var(--spectrum-global-color-gray-600);
+    font-weight: 600;
+  }
+
+  .textbox.value.copyable.disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+    pointer-events: none;
+  }
+
+  .textbox.value .copy-icon {
+    opacity: 0;
+    transition: opacity 0.15s ease;
+    flex-shrink: 0;
+    color: var(--spectrum-global-color-gray-600);
+    display: flex;
+    align-items: center;
+  }
+
+  .textbox.value.copyable:hover:not(.disabled) .copy-icon {
+    opacity: 0.65;
+  }
+
+  .textbox.value.copyable:focus:not(.disabled) .copy-icon {
+    opacity: 0.65;
+  }
+
+  .textbox.value.copyable:hover:not(.disabled) .copy-icon:hover {
+    opacity: 1;
+  }
+
+  .textbox-text {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* Ensure the icon never shrinks and always has space when text is truncated */
+  .textbox.value .copy-icon {
+    flex-shrink: 0;
+  }
+
+  .textbox-text.wrap {
+    white-space: normal;
+    overflow: visible;
+    text-overflow: unset;
+    word-break: break-word;
+  }
+</style>

package/src/lib/UI/elements/Tooltip.svelte

@@ -1,59 +1,30 @@
 <script>
   import SuperPopover from "../../SuperPopover/SuperPopover.svelte";
-  import { onDestroy } from "svelte";
 
   export let anchor;
   export let content;
   export let show = false;
-  export let delay = 750;
   export let align = "top";
-
-  let timer;
-  let isHovered = false;
-
-  const startTimer = () => {
-    if (timer) clearTimeout(timer);
-    timer = setTimeout(() => {
-      show = true;
-    }, delay);
-  };
-
-  const clearTimer = () => {
-    if (timer) {
-      clearTimeout(timer);
-      timer = null;
-    }
-    show = false;
-  };
-
-  const handleMouseEnter = () => {
-    isHovered = true;
-    startTimer();
-  };
-
-  const handleMouseLeave = () => {
-    isHovered = false;
-    clearTimer();
-  };
-
-  onDestroy(() => {
-    clearTimer();
-  });
 </script>
 
-{#if show}
-  <SuperPopover {anchor} {align} open={show} dismissible={false} animate={true}>
-    <div class="tooltip-content info">
-      {content}
-    </div>
-  </SuperPopover>
-{/if}
+<SuperPopover
+  {anchor}
+  {align}
+  open={show}
+  dismissible={false}
+  animate={true}
+  customZindex={1000}
+  offsetBelow={12}
+>
+  <div class="tooltip-content info">
+    {content}
+  </div>
+</SuperPopover>
 
 <style>
   .tooltip-content {
-    padding: 8px 12px;
+    padding: 4px 12px;
     font-size: 12px;
-    line-height: 1.4;
     color: var(--spectrum-global-color-gray-700);
     background-color: var(--spectrum-global-color-gray-50);
     border: 1px solid var(--spectrum-global-color-gray-300);
@@ -64,6 +35,7 @@
   }
 
   .tooltip-content.info {
+    padding: 4px 12px;
     background-color: var(--spectrum-global-color-blue-100);
     border-color: rgb(from var(--spectrum-global-color-blue-500) r g b / 50%);
     color: var(--spectrum-global-color-gray-800);