@intechstudio/grid-uikit 1.20260912.1104 → 1.20260916.1250

package/dist/IconButton.svelte

@@ -0,0 +1,160 @@
+<script lang="ts">
+  import SvgIcon from "./SvgIcon.svelte";
+  import { tooltip } from "./tooltip";
+  import { createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher();
+
+  export let iconPath: string = "";
+  export let iconData: string | undefined = undefined;
+  export let disabled: boolean = false;
+  export let compact: boolean = false;
+  export let tooltipText: string | undefined = undefined;
+  export let onClick: (() => void) | undefined = undefined;
+  export let onMouseDown: ((e: MouseEvent) => void) | undefined = undefined;
+  export let id: string | undefined = undefined;
+  export let ariaLabel: string | undefined = undefined;
+  export let stopPropagation: boolean = false;
+  export let href: string | undefined = undefined;
+  export let target: string | undefined = undefined;
+  export let rel: string | undefined = undefined;
+  export let tooltipDelay: number | undefined = undefined;
+  export let tooltipDuration: number | undefined = undefined;
+
+  // `pressed` shows the squish instantly (no transition) for as long as the
+  // button is physically held down. `clicking` takes over on release to ease
+  // it back out over the full duration, even if the press was very brief -
+  // its 0% keyframe matches `.pressed` exactly so the swap is invisible.
+  let pressed = false;
+  let clicking = false;
+
+  function restartClickAnimation() {
+    if (clicking) {
+      // Already mid-animation (rapid repeated clicks): force a restart by
+      // clearing the class and re-adding it next frame.
+      clicking = false;
+      requestAnimationFrame(() => (clicking = true));
+    } else {
+      clicking = true;
+    }
+  }
+
+  function handleMouseDown(e: MouseEvent) {
+    pressed = true;
+    clicking = false;
+    onMouseDown?.(e);
+  }
+
+  function handleMouseUp() {
+    if (pressed) {
+      pressed = false;
+      restartClickAnimation();
+    }
+  }
+
+  function handleMouseLeaveInternal(e: MouseEvent) {
+    // Dragging off the button while held cancels the press without playing
+    // the release animation.
+    pressed = false;
+    dispatch("mouseleave", e);
+  }
+
+  function handleClick(e: MouseEvent) {
+    if (stopPropagation) e.stopPropagation();
+    if (e.detail === 0) {
+      // Keyboard/programmatic activation: no mousedown/mouseup pair fired.
+      restartClickAnimation();
+    }
+    dispatch("click");
+    onClick?.();
+  }
+</script>
+
+<svelte:element
+  this={href ? "a" : "button"}
+  {id}
+  {href}
+  target={href ? target : undefined}
+  rel={href ? rel : undefined}
+  aria-label={ariaLabel}
+  on:click={handleClick}
+  on:mousedown={handleMouseDown}
+  on:mouseup={handleMouseUp}
+  on:mouseenter
+  on:mouseleave={handleMouseLeaveInternal}
+  on:animationend={() => (clicking = false)}
+  disabled={href ? undefined : disabled}
+  use:tooltip={tooltipText
+    ? { text: tooltipText, delay: tooltipDelay, duration: tooltipDuration }
+    : undefined}
+  class="icon-button"
+  class:compact
+>
+  <div class="icon-button-inner" class:pressed class:clicking>
+    <SvgIcon {iconPath} {iconData} fill="var(--foreground)" />
+  </div>
+</svelte:element>
+
+<style>
+  .icon-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius);
+    cursor: pointer;
+    pointer-events: auto;
+    padding: 0.5rem;
+    border: none;
+    background-color: transparent;
+    color: inherit;
+    text-decoration: none;
+  }
+
+  .icon-button.compact {
+    padding: 0.375rem;
+  }
+
+  .icon-button:hover {
+    background-color: var(--background-muted);
+  }
+
+  .icon-button:focus {
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-offset);
+  }
+
+  .icon-button:disabled {
+    opacity: 0.3;
+    cursor: default;
+  }
+
+  .icon-button:disabled:hover {
+    background-color: transparent;
+  }
+
+  .icon-button-inner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .icon-button-inner.pressed {
+    transform: scale(0.8);
+    opacity: 0.5;
+  }
+
+  .icon-button-inner.clicking {
+    animation: click-squish 250ms ease-out;
+  }
+
+  @keyframes click-squish {
+    0% {
+      transform: scale(0.8);
+      opacity: 0.5;
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+</style>

package/dist/IconButton.svelte.d.ts

@@ -0,0 +1,38 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const IconButton: $$__sveltets_2_IsomorphicComponent<{
+    iconPath?: string;
+    iconData?: string | undefined;
+    disabled?: boolean;
+    compact?: boolean;
+    tooltipText?: string | undefined;
+    onClick?: (() => void) | undefined;
+    onMouseDown?: ((e: MouseEvent) => void) | undefined;
+    id?: string | undefined;
+    ariaLabel?: string | undefined;
+    stopPropagation?: boolean;
+    href?: string | undefined;
+    target?: string | undefined;
+    rel?: string | undefined;
+    tooltipDelay?: number | undefined;
+    tooltipDuration?: number | undefined;
+}, {
+    mouseenter: MouseEvent;
+    mouseleave: CustomEvent<any>;
+    click: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type IconButton = InstanceType<typeof IconButton>;
+export default IconButton;

package/dist/assets/icons/refresh.svg

@@ -0,0 +1,18 @@
+ <svg
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="2 2.5 21.5 19"
+                ><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
+                  id="SVGRepo_tracerCarrier"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                ></g><g id="SVGRepo_iconCarrier">
+                  <path
+                    d="M11.5 20.5C6.80558 20.5 3 16.6944 3 12C3 7.30558 6.80558 3.5 11.5 3.5C16.1944 3.5 20 7.30558 20 12C20 13.5433 19.5887 14.9905 18.8698 16.238M22.5 15L18.8698 16.238M17.1747 12.3832L18.5289 16.3542L18.8698 16.238"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  ></path>
+                </g></svg
+              >

package/dist/assets/icons/rotate.svg

@@ -9,7 +9,7 @@
                 ></g><g id="SVGRepo_iconCarrier">
                   <path
                     d="M11.5 20.5C6.80558 20.5 3 16.6944 3 12C3 7.30558 6.80558 3.5 11.5 3.5C16.1944 3.5 20 7.30558 20 12C20 13.5433 19.5887 14.9905 18.8698 16.238M22.5 15L18.8698 16.238M17.1747 12.3832L18.5289 16.3542L18.8698 16.238"
-                    stroke="#000000"
+                    stroke="currentColor"
                     stroke-width="2"
                     stroke-linecap="round"
                     stroke-linejoin="round"

package/dist/icons.js

@@ -53,6 +53,7 @@ import tick from "./assets/icons/tick.svg?raw";
 import user_account_02 from "./assets/icons/user_account_02.svg?raw";
 import rotate from "./assets/icons/rotate.svg?raw";
 import file from "./assets/icons/file.svg?raw";
+import refresh from "./assets/icons/refresh.svg?raw";
 const iconMap = {
     arrow_down,
     arrow_left,
@@ -109,5 +110,6 @@ const iconMap = {
     user_account_02,
     rotate,
     file,
+    refresh,
 };
 export default iconMap;

package/dist/index.d.ts

@@ -13,6 +13,8 @@ export { default as MoltenPushButton } from "./MoltenPushButton.svelte";
 export { default as MoltenPushButtonGroup } from "./MoltenPushButtonGroup.svelte";
 export { contextMenu, contextTarget, type ContextMenuOptions, } from "./context-target";
 export { default as SvgIcon } from "./SvgIcon.svelte";
+export { default as IconButton } from "./IconButton.svelte";
+export { tooltip } from "./tooltip";
 export { default as MeltCombo, type MeltComboSuggestion, type MeltComboData, } from "./MeltCombo.svelte";
 export { default as MarkdownContainer, type MarkdownContainerTypes, } from "./MarkdownContainer.svelte";
 export { default as Toggle } from "./Toggle.svelte";

package/dist/index.js

@@ -13,6 +13,8 @@ export { default as MoltenPushButton } from "./MoltenPushButton.svelte";
 export { default as MoltenPushButtonGroup } from "./MoltenPushButtonGroup.svelte";
 export { contextMenu, contextTarget, } from "./context-target";
 export { default as SvgIcon } from "./SvgIcon.svelte";
+export { default as IconButton } from "./IconButton.svelte";
+export { tooltip } from "./tooltip";
 export { default as MeltCombo, } from "./MeltCombo.svelte";
 export { default as MarkdownContainer, } from "./MarkdownContainer.svelte";
 export { default as Toggle } from "./Toggle.svelte";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intechstudio/grid-uikit",
-  "version": "1.20260912.1104",
+  "version": "1.20260916.1250",
   "repository": {
     "type": "git",
     "url": "https://github.com/intechstudio/grid-uikit.git"