polymorph-ui-components 0.1.0

package/dist/ContextMenu/ContextMenu.svelte

@@ -0,0 +1,308 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import type { ContextMenuProperties, ContextMenuItem } from './properties';
+
+  let {
+    items,
+    open = $bindable(false),
+    maxHeight = '240px',
+    testId,
+    children,
+    onselect,
+    onopen,
+    onclose,
+    classes
+  }: ContextMenuProperties = $props();
+
+  let menuEl: HTMLDivElement | null = $state(null);
+  let containerEl: HTMLDivElement | null = $state(null);
+  let focusedIndex: number = $state(-1);
+  let posX: number = $state(0);
+  let posY: number = $state(0);
+
+  let selectableItems: ContextMenuItem[] = $derived(
+    items.filter((item) => !item.separator && !item.disabled)
+  );
+
+  function openMenu(x: number, y: number) {
+    posX = x;
+    posY = y;
+    open = true;
+    focusedIndex = 0;
+    onopen?.();
+    requestAnimationFrame(() => {
+      adjustPosition();
+      focusItem(0);
+    });
+  }
+
+  function close() {
+    open = false;
+    focusedIndex = -1;
+    onclose?.();
+  }
+
+  function selectMenuItem(item: ContextMenuItem) {
+    if (item.disabled) {
+      return;
+    }
+    onselect?.(item);
+    close();
+  }
+
+  function adjustPosition() {
+    if (menuEl === null) {
+      return;
+    }
+    const rect = menuEl.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+
+    if (posX + rect.width > viewportWidth) {
+      posX = viewportWidth - rect.width - 4;
+    }
+    if (posY + rect.height > viewportHeight) {
+      posY = viewportHeight - rect.height - 4;
+    }
+    if (posX < 0) {
+      posX = 4;
+    }
+    if (posY < 0) {
+      posY = 4;
+    }
+  }
+
+  function focusItem(index: number) {
+    if (menuEl === null) {
+      return;
+    }
+    const focusableItems = menuEl.querySelectorAll<HTMLElement>(
+      '[role="menuitem"]:not([aria-disabled="true"])'
+    );
+    if (index >= 0 && index < focusableItems.length) {
+      focusableItems[index].focus();
+    }
+  }
+
+  function getSelectableIndex(item: ContextMenuItem): number {
+    return selectableItems.indexOf(item);
+  }
+
+  function handleContextMenu(event: MouseEvent) {
+    event.preventDefault();
+    openMenu(event.clientX, event.clientY);
+  }
+
+  function handleMenuKeydown(event: KeyboardEvent) {
+    switch (event.key) {
+      case 'ArrowDown': {
+        event.preventDefault();
+        const next = focusedIndex + 1;
+        focusedIndex = next >= selectableItems.length ? 0 : next;
+        focusItem(focusedIndex);
+        break;
+      }
+      case 'ArrowUp': {
+        event.preventDefault();
+        const prev = focusedIndex - 1;
+        focusedIndex = prev < 0 ? selectableItems.length - 1 : prev;
+        focusItem(focusedIndex);
+        break;
+      }
+      case 'Home': {
+        event.preventDefault();
+        focusedIndex = 0;
+        focusItem(focusedIndex);
+        break;
+      }
+      case 'End': {
+        event.preventDefault();
+        focusedIndex = selectableItems.length - 1;
+        focusItem(focusedIndex);
+        break;
+      }
+      case 'Enter':
+      case ' ': {
+        event.preventDefault();
+        if (focusedIndex >= 0 && focusedIndex < selectableItems.length) {
+          selectMenuItem(selectableItems[focusedIndex]);
+        }
+        break;
+      }
+      case 'Escape': {
+        event.preventDefault();
+        close();
+        break;
+      }
+      case 'Tab': {
+        close();
+        break;
+      }
+    }
+  }
+
+  function handleClickOutside(event: Event) {
+    if (event.target instanceof Node && menuEl && !menuEl.contains(event.target)) {
+      close();
+    }
+  }
+
+  onMount(() => {
+    document.addEventListener('click', handleClickOutside);
+  });
+
+  onDestroy(() => {
+    if (typeof window !== 'undefined') {
+      document.removeEventListener('click', handleClickOutside);
+    }
+  });
+</script>
+
+<div
+  class="context-menu-container {classes ?? ''}"
+  bind:this={containerEl}
+  oncontextmenu={handleContextMenu}
+  role="application"
+  data-pw={testId}
+>
+  {#if typeof children === 'function'}
+    {@render children()}
+  {/if}
+</div>
+
+{#if open}
+  <div
+    class="context-menu-dropdown"
+    style="left: {posX}px; top: {posY}px; --context-menu-max-height: {maxHeight};"
+    bind:this={menuEl}
+    role="menu"
+    tabindex="-1"
+    onkeydown={handleMenuKeydown}
+  >
+    {#each items as item (item.value)}
+      {#if item.separator}
+        <div class="context-menu-separator" role="separator"></div>
+      {:else}
+        <div
+          class="context-menu-item"
+          class:context-menu-item-danger={item.danger}
+          class:context-menu-item-disabled={item.disabled}
+          role="menuitem"
+          tabindex={item.disabled ? -1 : 0}
+          aria-disabled={item.disabled ? 'true' : null}
+          onclick={() => selectMenuItem(item)}
+          onkeydown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              selectMenuItem(item);
+            }
+          }}
+          onfocus={() => {
+            if (!item.disabled) {
+              focusedIndex = getSelectableIndex(item);
+            }
+          }}
+          data-pw={testId ? `${testId}-item-${item.value}` : null}
+        >
+          {#if item.icon}
+            <img class="context-menu-item-icon" src={item.icon} alt="" />
+          {/if}
+          <span class="context-menu-item-label">{item.label}</span>
+          {#if item.shortcut}
+            <span class="context-menu-item-shortcut">{item.shortcut}</span>
+          {/if}
+        </div>
+      {/if}
+    {/each}
+  </div>
+{/if}
+
+<style>
+  .context-menu-container {
+    display: var(--context-menu-container-display, contents);
+  }
+
+  .context-menu-dropdown {
+    position: fixed;
+    z-index: var(--context-menu-z-index, 1000);
+    background-color: var(--context-menu-background-color, #ffffff);
+    border: var(--context-menu-border, 1px solid currentColor);
+    border-radius: var(--context-menu-border-radius, 8px);
+    box-shadow: var(--context-menu-box-shadow, 0px 4px 16px rgba(0, 0, 0, 0.12));
+    min-width: var(--context-menu-min-width, 160px);
+    max-height: var(--context-menu-max-height, 240px);
+    overflow-y: auto;
+    padding: var(--context-menu-padding, 4px 0);
+    font-family: var(--context-menu-font-family, inherit);
+    font-size: var(--context-menu-font-size, 14px);
+  }
+
+  .context-menu-item {
+    display: flex;
+    align-items: center;
+    padding: var(--context-menu-item-padding, 8px 12px);
+    cursor: pointer;
+    color: var(--context-menu-item-color, currentColor);
+    background-color: var(--context-menu-item-background-color, transparent);
+    gap: var(--context-menu-item-gap, 8px);
+    white-space: var(--context-menu-item-white-space, nowrap);
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .context-menu-item:hover {
+    background-color: var(--context-menu-item-hover-background-color, #f4f4f5);
+    color: var(--context-menu-item-hover-color, var(--context-menu-item-color, currentColor));
+  }
+
+  .context-menu-item:focus {
+    background-color: var(--context-menu-item-focus-background-color, #f4f4f5);
+    outline: var(--context-menu-item-focus-outline, none);
+  }
+
+  .context-menu-item-danger {
+    color: var(--context-menu-item-danger-color, currentColor);
+  }
+
+  .context-menu-item-danger:hover {
+    background-color: var(--context-menu-item-danger-hover-background-color, #f4f4f5);
+    color: var(
+      --context-menu-item-danger-hover-color,
+      var(--context-menu-item-danger-color, currentColor)
+    );
+  }
+
+  .context-menu-item-danger:focus {
+    background-color: var(--context-menu-item-danger-focus-background-color, #f4f4f5);
+  }
+
+  .context-menu-item-disabled {
+    opacity: var(--context-menu-item-disabled-opacity, 0.4);
+    cursor: var(--context-menu-item-disabled-cursor, not-allowed);
+    pointer-events: none;
+  }
+
+  .context-menu-separator {
+    height: var(--context-menu-separator-height, 1px);
+    background-color: var(--context-menu-separator-color, #e4e4e7);
+    margin: var(--context-menu-separator-margin, 4px 0);
+  }
+
+  .context-menu-item-icon {
+    height: var(--context-menu-item-icon-height, 16px);
+    width: var(--context-menu-item-icon-width, 16px);
+    flex-shrink: 0;
+  }
+
+  .context-menu-item-label {
+    flex: 1;
+    font-weight: var(--context-menu-item-font-weight, 400);
+    line-height: var(--context-menu-item-line-height, 1.4);
+  }
+
+  .context-menu-item-shortcut {
+    color: var(--context-menu-item-shortcut-color, currentColor);
+    font-size: var(--context-menu-item-shortcut-font-size, 12px);
+    font-weight: var(--context-menu-item-shortcut-font-weight, 400);
+    margin-left: var(--context-menu-item-shortcut-margin-left, 16px);
+  }
+</style>

package/dist/ContextMenu/ContextMenu.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ContextMenuProperties } from './properties';
+declare const ContextMenu: import("svelte").Component<ContextMenuProperties, {}, "open">;
+type ContextMenu = ReturnType<typeof ContextMenu>;
+export default ContextMenu;

package/dist/ContextMenu/properties.d.ts

@@ -0,0 +1,26 @@
+import type { Snippet } from 'svelte';
+export type ContextMenuItem = {
+    label: string;
+    value: string;
+    icon?: string;
+    shortcut?: string;
+    disabled?: boolean;
+    danger?: boolean;
+    separator?: boolean;
+};
+export type ContextMenuProperties = MandatoryContextMenuProperties & OptionalContextMenuProperties & ContextMenuEventProperties;
+export type MandatoryContextMenuProperties = {
+    items: ContextMenuItem[];
+};
+export type OptionalContextMenuProperties = {
+    open?: boolean;
+    maxHeight?: string;
+    testId?: string;
+    children?: Snippet;
+    classes?: string;
+};
+export type ContextMenuEventProperties = {
+    onselect?: (item: ContextMenuItem) => void;
+    onopen?: () => void;
+    onclose?: () => void;
+};

package/dist/ContextMenu/properties.js

@@ -0,0 +1 @@
+export {};

package/dist/Gauge/Gauge.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+  import type { GaugeProperties } from './properties';
+
+  let { value, showLabel = true, testId, classes }: GaugeProperties = $props();
+
+  const VIEW_BOX = 100;
+  const CENTER = VIEW_BOX / 2;
+  const STROKE = 8;
+  const RADIUS = (VIEW_BOX - STROKE) / 2;
+  const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+
+  let clamped = $derived(Math.min(100, Math.max(0, value)));
+  let offset = $derived(CIRCUMFERENCE - (clamped / 100) * CIRCUMFERENCE);
+</script>
+
+<div class="gauge {classes ?? ''}" data-pw={testId}>
+  <svg viewBox="0 0 {VIEW_BOX} {VIEW_BOX}">
+    <circle class="track" cx={CENTER} cy={CENTER} r={RADIUS} fill="none" />
+    <circle
+      class="bar"
+      cx={CENTER}
+      cy={CENTER}
+      r={RADIUS}
+      fill="none"
+      stroke-dasharray={CIRCUMFERENCE}
+      stroke-dashoffset={offset}
+      stroke-linecap="round"
+      transform="rotate(-90 {CENTER} {CENTER})"
+    />
+  </svg>
+  {#if showLabel}
+    <div class="label">{Math.round(clamped)}%</div>
+  {/if}
+</div>
+
+<style>
+  .gauge {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--gauge-size, 120px);
+    height: var(--gauge-size, 120px);
+  }
+
+  svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  .track {
+    stroke: var(--gauge-track-color, #a1a1aa);
+    stroke-width: var(--gauge-stroke-width, 8);
+  }
+
+  .bar {
+    stroke: var(--gauge-bar-color, currentColor);
+    stroke-width: var(--gauge-stroke-width, 8);
+    transition: stroke-dashoffset var(--gauge-transition-duration, 0.3s) ease;
+  }
+
+  .label {
+    position: absolute;
+    font-size: var(--gauge-label-font-size, 24px);
+    font-weight: var(--gauge-label-font-weight, 600);
+    font-family: var(--gauge-label-font-family, inherit);
+    color: var(--gauge-label-color, currentColor);
+  }
+</style>

package/dist/Gauge/Gauge.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { GaugeProperties } from './properties';
+declare const Gauge: import("svelte").Component<GaugeProperties, {}, "">;
+type Gauge = ReturnType<typeof Gauge>;
+export default Gauge;

package/dist/Gauge/properties.d.ts

@@ -0,0 +1,9 @@
+export type GaugeProperties = MandatoryGaugeProperties & OptionalGaugeProperties;
+export type MandatoryGaugeProperties = {
+    value: number;
+};
+export type OptionalGaugeProperties = {
+    showLabel?: boolean;
+    testId?: string;
+    classes?: string;
+};

package/dist/Gauge/properties.js

@@ -0,0 +1 @@
+export {};

package/dist/GridItem/GridItem.svelte

@@ -0,0 +1,145 @@
+<script lang="ts">
+  import type { GridItemProperties } from './properties';
+
+  let {
+    icon = '',
+    text = '',
+    headerIcon = '',
+    showLoader = $bindable(false),
+    onclick,
+    onkeydown,
+    testId,
+    classes
+  }: GridItemProperties = $props();
+
+  function handleClick(event: MouseEvent) {
+    showLoader = !showLoader;
+    onclick?.(event);
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      if (event.currentTarget instanceof HTMLElement) {
+        event.currentTarget.click();
+      }
+    }
+    onkeydown?.(event);
+  }
+</script>
+
+<div
+  class="container {classes ?? ''}"
+  onclick={handleClick}
+  onkeydown={handleKeydown}
+  role="button"
+  tabindex="0"
+  aria-label={text}
+  data-pw={testId}
+>
+  <div class="grid-header">
+    <img src={headerIcon} alt="" class="grid-item-header-icon" />
+  </div>
+  <div class:grid-body-loader={showLoader}>
+    <div class="grid-item-body">
+      <img src={icon} alt="" class="grid-item-icon" />
+    </div>
+  </div>
+  <div class="grid-item-footer">{text}</div>
+</div>
+
+<style>
+  .container {
+    box-sizing: border-box;
+    height: var(--grid-item-height, 98px);
+    width: var(--grid-item-width, 66px);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    cursor: pointer;
+    /** Remove button tap effect */
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .grid-header {
+    display: flex;
+    width: var(--grid-item-header-width, 100%);
+    justify-content: var(--grid-item-header-justify-content, end);
+    position: var(--grid-item-header-position, absolute);
+    top: var(--grid-item-header-top, 5px);
+    z-index: var(--grid-item-header-z-index, 100);
+  }
+
+  .grid-item-header-icon {
+    height: var(--grid-item-header-icon-height, 16px);
+    width: var(--grid-item-header-icon-width, fit-content);
+    object-fit: var(--grid-item-header-icon-object-fit, contain);
+    z-index: var(--grid-item-header-icon-z-index, 2);
+  }
+
+  .grid-item-body {
+    height: var(--grid-item-body-height, 64px);
+    width: var(--grid-item-body-width, 64px);
+    background-color: var(--grid-item-background-color, transparent);
+    border: var(--grid-item-border, 1px solid currentColor);
+    border-radius: var(--grid-item-border-radius, 8px);
+    margin: var(--grid-item-margin, 8px 0 0 0);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .grid-item-icon {
+    height: var(--grid-item-icon-height, 32px);
+    width: var(--grid-item-icon-width, fit-content);
+    object-fit: var(--grid-item-icon-object-fit, contain);
+    z-index: var(--grid-item-icon-z-index, 100);
+  }
+
+  .grid-item-footer {
+    margin: var(--grid-item-footer-margin, 8px 0 0 0);
+    font-size: var(--grid-item-font-size, inherit);
+    color: var(--grid-item-color, inherit);
+    text-overflow: var(--grid-item-footer-text-overflow, ellipsis);
+    white-space: var(--grid-item-footer-white-space, nowrap);
+    overflow: var(--grid-item-footer-overflow, hidden);
+    width: var(--grid-item-footer-width, 100%);
+    text-align: var(--grid-item-footer-text-align, center);
+    height: var(--grid-item-footer-height, fit-content);
+  }
+
+  .grid-body-loader {
+    position: relative;
+  }
+
+  .grid-body-loader::before {
+    content: '';
+    box-sizing: border-box;
+    position: absolute;
+    inset: 0px;
+    margin: var(--grid-item-margin, 8px 0 0 0);
+    border-radius: var(--grid-item-border-radius, 8px);
+    border: var(--grid-item-loader-border, 32px solid currentColor);
+    animation: clipperAnimation var(--grid-item-loader-duration, 3s) infinite linear;
+  }
+
+  @keyframes clipperAnimation {
+    0% {
+      clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
+    }
+    25% {
+      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
+    }
+    50% {
+      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
+    }
+    75% {
+      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
+    }
+    100% {
+      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
+    }
+  }
+</style>

package/dist/GridItem/GridItem.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { GridItemProperties } from './properties';
+declare const GridItem: import("svelte").Component<GridItemProperties, {}, "showLoader">;
+type GridItem = ReturnType<typeof GridItem>;
+export default GridItem;

package/dist/GridItem/properties.d.ts

@@ -0,0 +1,15 @@
+export type GridItemProperties = OptionalGridItemProperties & GridItemEventProperties & MandatoryGridItemProperties;
+export type MandatoryGridItemProperties = {
+    icon: string;
+    text: string;
+};
+export type OptionalGridItemProperties = {
+    headerIcon?: string | null;
+    showLoader?: boolean;
+    testId?: string;
+    classes?: string;
+};
+export type GridItemEventProperties = {
+    onclick?: (event: MouseEvent) => void;
+    onkeydown?: (event: KeyboardEvent) => void;
+};

package/dist/GridItem/properties.js

@@ -0,0 +1 @@
+export {};

package/dist/Icon/Icon.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import type { IconProperties } from './properties';
+
+  let { icon, svg, text, onclick, onkeydown, testId, classes }: IconProperties = $props();
+</script>
+
+<div
+  class="icon-container {classes ?? ''}"
+  {onclick}
+  {onkeydown}
+  role="button"
+  tabindex="0"
+  data-pw={testId}
+>
+  {#if typeof svg === 'string' && svg.length > 0}
+    <!-- eslint-disable svelte/no-at-html-tags -->
+    <span class="icon-svg">{@html svg}</span>
+  {:else if icon}
+    <img src={icon} alt="" />
+  {/if}
+  {#if typeof text === 'string' && text.length > 0}
+    <div class="icon-text">{text}</div>
+  {/if}
+</div>
+
+<style>
+  .icon-container {
+    display: flex;
+    padding: var(--icon-container-padding, 4px);
+    flex-direction: var(--icon-container-direction, column);
+    align-items: center;
+    cursor: pointer;
+  }
+  .icon-container img {
+    height: var(--icon-height, 20px);
+    width: var(--icon-width, 20px);
+    padding: var(--icon-padding, 4px);
+  }
+
+  .icon-svg {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--icon-width, 20px);
+    height: var(--icon-height, 20px);
+    padding: var(--icon-padding, 4px);
+    color: var(--icon-svg-color, currentColor);
+  }
+
+  .icon-svg :global(svg) {
+    width: 100%;
+    height: 100%;
+  }
+
+  .icon-text {
+    display: flex;
+    padding: var(--icon-text-padding, 4px);
+    flex-direction: var(--icon-text-direction, column);
+    font-size: var(--icon-text-font-size, inherit);
+  }
+</style>

package/dist/Icon/Icon.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { IconProperties } from './properties';
+declare const Icon: import("svelte").Component<IconProperties, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;

package/dist/Icon/properties.d.ts

@@ -0,0 +1,12 @@
+export type IconProperties = OptionalIconProperties & IconEventProperties;
+export type OptionalIconProperties = {
+    icon?: string;
+    svg?: string;
+    text?: string | null;
+    testId?: string;
+    classes?: string;
+};
+export type IconEventProperties = {
+    onclick?: (event: MouseEvent) => void;
+    onkeydown?: (event: KeyboardEvent) => void;
+};

package/dist/Icon/properties.js

@@ -0,0 +1 @@
+export {};