@poirazis/supercomponents-shared 1.1.8 → 1.2.0

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

@@ -5,6 +5,7 @@
   export let checked: boolean = false;
   export let partial: boolean = false;
   export let disabled: boolean = false;
+  export let hovered: boolean = false;
 
   function toggle() {
     if (disabled) return;
@@ -15,11 +16,11 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
-<button class:checked on:click={toggle}>
+<button class:checked class:disabled class:hovered on:click={toggle}>
   {#if checked}
-    <i class="ph ph-check" />
+    <i class="ph ph-check"></i>
   {:else if partial}
-    <i class="ph ph-minus" />
+    <i class="ph ph-minus"></i>
   {/if}
 </button>
 
@@ -30,20 +31,49 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 1rem;
-    height: 1rem;
+    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;
   }
 
   button.checked {
     border-color: var(--spectrum-global-color-gray-700);
   }
 
+  button.disabled {
+    cursor: not-allowed;
+    background-color: var(--spectrum-global-color-gray-200);
+    border-color: var(--spectrum-global-color-gray-300);
+  }
+
+  button:hover:not(.disabled),
+  button.hovered:not(.disabled) {
+    border: 1px solid var(--spectrum-global-color-gray-600);
+  }
+
+  button:active {
+    background-color: var(--spectrum-global-color-blue-100);
+  }
+  button:focus {
+    border: 1px solid var(--spectrum-global-color-gray-700);
+  }
+
   i {
-    font-size: 0.75rem;
+    font-size: 0.65rem;
     font-weight: 700;
     color: var(--spectrum-global-color-gray-700);
+    animation: scaleIn 0.13s ease-out;
+  }
+
+  @keyframes scaleIn {
+    from {
+      transform: scale(0);
+    }
+    to {
+      transform: scale(1);
+    }
   }
 </style>

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

@@ -0,0 +1,115 @@
+<script lang="ts">
+  import { createEventDispatcher, onDestroy } from "svelte";
+  import Tooltip from "./Tooltip.svelte";
+
+  const dispatch = createEventDispatcher();
+
+  export let icon: string;
+  export let disabled: boolean = false;
+  export let size: "small" | "medium" | "large" = "medium";
+  export let tooltip: string | undefined = undefined;
+  export let variant: "primary" | "secondary" | "warning" | "danger" =
+    "primary";
+
+  let buttonElement: HTMLButtonElement;
+  let tooltipShow = false;
+  let tooltipTimer: number | undefined;
+
+  const showTooltip = () => {
+    if (tooltipTimer) clearTimeout(tooltipTimer);
+    tooltipTimer = setTimeout(() => {
+      tooltipShow = true;
+    }, 750); // delay
+  };
+
+  const hideTooltip = () => {
+    if (tooltipTimer) {
+      clearTimeout(tooltipTimer);
+      tooltipTimer = undefined;
+    }
+    tooltipShow = false;
+  };
+
+  onDestroy(() => {
+    if (tooltipTimer) clearTimeout(tooltipTimer);
+  });
+
+  function handleClick() {
+    if (disabled) return;
+    dispatch("click");
+  }
+</script>
+
+<!-- svelte-ignore a11y_consider_explicit_label -->
+<button
+  bind:this={buttonElement}
+  class="icon-button {size} {variant}"
+  class:disabled
+  on:click={handleClick}
+  on:mouseenter={tooltip ? showTooltip : undefined}
+  on:mouseleave={tooltip ? hideTooltip : undefined}
+>
+  <i class="ph ph-{icon}"></i>
+</button>
+
+{#if tooltip}
+  <Tooltip anchor={buttonElement} content={tooltip} show={tooltipShow} />
+{/if}
+
+<style>
+  .icon-button {
+    all: unset;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0.25rem;
+    transition: all 0.1s ease-in-out;
+    background-color: transparent;
+    border: 1px solid transparent;
+  }
+
+  .icon-button:hover:not(.disabled) {
+    background-color: var(--spectrum-global-color-gray-200);
+  }
+
+  .icon-button:active:not(.disabled) {
+    background-color: var(--spectrum-global-color-gray-300);
+  }
+
+  .icon-button.disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .icon-button.small {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  .icon-button.medium {
+    width: 2rem;
+    height: 2rem;
+  }
+
+  .icon-button.large {
+    width: 2.5rem;
+    height: 2.5rem;
+  }
+
+  .icon-button.small i {
+    font-size: 0.9rem;
+  }
+
+  .icon-button.medium i {
+    font-size: 1rem;
+  }
+
+  .icon-button.large i {
+    font-size: 1.25rem;
+  }
+
+  .icon-button.warning {
+    color: var(--spectrum-global-color-red-400);
+  }
+</style>

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

@@ -0,0 +1,65 @@
+<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">
+      {content}
+    </div>
+  </SuperPopover>
+{/if}
+
+<style>
+  .tooltip-content {
+    padding: 8px 12px;
+    font-size: 12px;
+    line-height: 1.4;
+    color: var(--spectrum-global-color-gray-900);
+    background-color: var(--spectrum-global-color-gray-50);
+    border: 1px solid var(--spectrum-global-color-gray-300);
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    max-width: 200px;
+    word-wrap: break-word;
+  }
+</style>