@poirazis/supercomponents-shared 1.2.15 → 1.2.18

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>
   {: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/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);