polymorph-ui-components 0.1.0

package/dist/Table/Table.svelte

@@ -0,0 +1,357 @@
+<script lang="ts">
+  import type { TableProperties, TableCellValue } from './properties';
+  import Button from '../Button/Button.svelte';
+  import chevronUpSvg from '../assets/chevron-up.svg?raw';
+  import chevronDownSvg from '../assets/chevron-down.svg?raw';
+  import sortDefaultSvg from '../assets/sort-default.svg?raw';
+
+  let {
+    tableTitle = '',
+    tableHeaders = [],
+    tableData = [],
+    sortable = true,
+    sortableColumns,
+    stickyHeader = false,
+    isTableScrollable = false,
+    isContentScrollable = false,
+    testId,
+    caption,
+    sortAscIcon,
+    sortDescIcon,
+    sortDefaultIcon,
+    cell,
+    empty,
+    onrowclick,
+    onsort,
+    classes
+  }: TableProperties = $props();
+
+  let sortColumn = $state<number | null>(null);
+  let sortDirection = $state<'asc' | 'desc'>('asc');
+
+  function isColumnSortable(colIndex: number): boolean {
+    if (!sortable) {
+      return false;
+    }
+    if (sortableColumns) {
+      return sortableColumns.includes(colIndex);
+    }
+    return true;
+  }
+
+  let sortedTableData = $derived.by(() => {
+    if (sortColumn === null) {
+      return [...tableData];
+    }
+
+    const colIndex = sortColumn;
+    const direction = sortDirection;
+
+    return [...tableData].sort((a, b) => {
+      const valueA = a[colIndex];
+      const valueB = b[colIndex];
+
+      if (typeof valueA === 'number' && typeof valueB === 'number') {
+        return direction === 'asc' ? valueA - valueB : valueB - valueA;
+      } else if (typeof valueA === 'string' && typeof valueB === 'string') {
+        return direction === 'asc' ? valueA.localeCompare(valueB) : valueB.localeCompare(valueA);
+      } else if (typeof valueA === 'boolean' && typeof valueB === 'boolean') {
+        return direction === 'asc'
+          ? valueA === valueB
+            ? 0
+            : valueA
+              ? -1
+              : 1
+          : valueA === valueB
+            ? 0
+            : valueA
+              ? 1
+              : -1;
+      }
+      return 0;
+    });
+  });
+
+  function handleSort(colIndex: number) {
+    if (!isColumnSortable(colIndex)) {
+      return;
+    }
+
+    if (sortColumn === colIndex) {
+      sortDirection = sortDirection === 'asc' ? 'desc' : 'asc';
+    } else {
+      sortColumn = colIndex;
+      sortDirection = 'asc';
+    }
+    onsort?.(colIndex, sortDirection);
+  }
+
+  function handleRowClick(rowIndex: number, rowData: TableCellValue[]) {
+    onrowclick?.(rowIndex, rowData);
+  }
+
+  function handleRowKeydown(event: KeyboardEvent, rowIndex: number, rowData: TableCellValue[]) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      onrowclick?.(rowIndex, rowData);
+    }
+  }
+
+  let isRowClickable = $derived(typeof onrowclick === 'function');
+  let isStickyHeader = $derived(stickyHeader || isTableScrollable);
+</script>
+
+{#if typeof tableTitle === 'string' && tableTitle.length > 0}
+  <div class="table-title">
+    {tableTitle}
+  </div>
+{/if}
+{#if tableHeaders.length !== 0 || tableData.length !== 0}
+  <div
+    class="table-container {isTableScrollable ? 'scrollable-table' : ''} {classes ?? ''}"
+    data-pw={testId}
+  >
+    <table>
+      {#if caption}
+        <caption class="sr-only">{caption}</caption>
+      {/if}
+      <thead>
+        <tr>
+          {#each tableHeaders as header, colIndex (colIndex)}
+            <th class="table-header" class:table-header-sticky={isStickyHeader}>
+              <span class="table-header-content">
+                {header}
+                {#if isColumnSortable(colIndex)}
+                  <div class="sort-button">
+                    <Button onclick={() => handleSort(colIndex)} ariaLabel="Sort by {header}">
+                      {#if sortColumn === colIndex && sortDirection === 'asc'}
+                        {#if typeof sortAscIcon === 'function'}
+                          {@render sortAscIcon()}
+                        {:else}
+                          <span class="sort-icon">
+                            <!-- eslint-disable svelte/no-at-html-tags -->
+                            {@html chevronUpSvg}
+                          </span>
+                        {/if}
+                      {:else if sortColumn === colIndex && sortDirection === 'desc'}
+                        {#if typeof sortDescIcon === 'function'}
+                          {@render sortDescIcon()}
+                        {:else}
+                          <span class="sort-icon">
+                            <!-- eslint-disable svelte/no-at-html-tags -->
+                            {@html chevronDownSvg}
+                          </span>
+                        {/if}
+                      {:else if typeof sortDefaultIcon === 'function'}
+                        {@render sortDefaultIcon()}
+                      {:else}
+                        <span class="sort-icon sort-icon-idle">
+                          <!-- eslint-disable svelte/no-at-html-tags -->
+                          {@html sortDefaultSvg}
+                        </span>
+                      {/if}
+                    </Button>
+                  </div>
+                {/if}
+              </span>
+            </th>
+          {/each}
+        </tr>
+      </thead>
+      <tbody>
+        {#if sortedTableData.length === 0 && typeof empty === 'function'}
+          <tr>
+            <td class="table-empty" colspan={tableHeaders.length}>
+              {@render empty()}
+            </td>
+          </tr>
+        {:else}
+          {#each sortedTableData as row, rowIndex (rowIndex)}
+            <tr
+              class="table-row"
+              class:table-row-clickable={isRowClickable}
+              onclick={isRowClickable ? () => handleRowClick(rowIndex, row) : null}
+              onkeydown={isRowClickable ? (e) => handleRowKeydown(e, rowIndex, row) : null}
+              tabindex={isRowClickable ? 0 : null}
+            >
+              {#each row as cellValue, colIndex (colIndex)}
+                <td class="table-content">
+                  <div class={isContentScrollable ? 'scrollable-content' : ''}>
+                    {#if typeof cell === 'function'}
+                      {@render cell(cellValue, rowIndex, colIndex)}
+                    {:else}
+                      {cellValue}
+                    {/if}
+                  </div>
+                </td>
+              {/each}
+            </tr>
+          {/each}
+        {/if}
+      </tbody>
+    </table>
+  </div>
+{/if}
+
+<style>
+  .table-title {
+    margin: var(--table-title-margin, 0px 0px 12px 0px);
+    font-size: var(--table-title-font-size, 18px);
+    font-weight: var(--table-title-font-weight, 600);
+    color: var(--table-title-color, currentColor);
+    font-family: var(--table-title-font-family);
+    padding: var(--table-title-padding);
+  }
+
+  .table-container {
+    border: var(--table-border, 1px solid currentColor);
+    border-radius: var(--table-border-radius, 8px);
+    width: var(--table-container-width, 100%);
+    overflow: hidden;
+  }
+
+  .scrollable-table {
+    height: var(--table-container-height, 143px);
+    overflow-y: auto;
+  }
+
+  table {
+    width: var(--table-width, 100%);
+    border-collapse: var(--table-border-collapse, collapse);
+  }
+
+  .table-header,
+  .table-content {
+    border: var(--table-inner-border, none);
+    padding: var(--table-padding, 12px 16px);
+    text-align: var(--table-text-align, left);
+    width: var(--table-column-width);
+    word-break: break-all;
+  }
+
+  .scrollable-content {
+    overflow-y: auto;
+    height: var(--table-scrollable-column-height, 20px);
+  }
+
+  .table-header {
+    background-color: var(
+      --table-header-background,
+      var(--table-header-border-bgcolor, transparent)
+    );
+    font-size: var(--table-header-font-size, 14px);
+    font-family: var(--table-header-font-family);
+    font-weight: var(--table-header-font-weight, 600);
+    letter-spacing: var(--table-header-letter-spacing, 0.02em);
+    text-transform: var(--table-header-text-transform);
+    color: var(--table-header-color, var(--table-header-font-color, currentColor));
+  }
+
+  .table-header-content {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .table-header-sticky {
+    position: sticky;
+    top: var(--table-header-sticky-top, 0);
+    z-index: 1;
+  }
+
+  .table-content {
+    background-color: var(--table-content-background, var(--table-content-border-bgcolor));
+    font-size: var(--table-content-font-size, 14px);
+    font-family: var(--table-content-font-family);
+    color: var(--table-content-color, var(--table-content-font-color, currentColor));
+  }
+
+  .table-row {
+    border-bottom: var(--table-row-border, 1px solid #e4e4e7);
+    background-color: var(--table-row-background);
+  }
+
+  .table-row:last-child {
+    border-bottom: var(--table-row-last-border, none);
+  }
+
+  .table-row:nth-child(even) {
+    background-color: var(--table-row-alt-background, var(--table-row-background));
+  }
+
+  .table-row:hover {
+    background-color: var(--table-row-hover-background);
+  }
+
+  .table-row:hover > .table-content {
+    background-color: var(
+      --table-row-hover-background,
+      var(--table-content-background, var(--table-content-border-bgcolor))
+    );
+  }
+
+  .table-row-clickable {
+    cursor: pointer;
+  }
+
+  .table-row-clickable:focus-visible {
+    outline: 2px solid var(--table-focus-outline-color, currentColor);
+    outline-offset: -2px;
+  }
+
+  .sort-button {
+    --button-color: transparent;
+    --button-border: none;
+    --button-padding: 2px;
+    --button-margin: 0;
+    --button-text-color: var(--table-sort-button-color, inherit);
+    --button-border-radius: 4px;
+    --button-width: fit-content;
+    --button-height: fit-content;
+    --button-hover-color: var(--table-sort-button-hover-background, rgba(0, 0, 0, 0.05));
+    --button-hover-text-color: var(
+      --table-sort-button-hover-color,
+      var(--table-sort-button-color, inherit)
+    );
+    display: inline-flex;
+    align-items: center;
+    line-height: 1;
+  }
+
+  .sort-button :global(.sort-icon) {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .sort-button :global(.sort-icon svg) {
+    width: var(--table-sort-icon-size, 14px);
+    height: var(--table-sort-icon-size, 14px);
+    display: block;
+  }
+
+  .sort-button :global(.sort-icon-idle) {
+    opacity: var(--table-sort-idle-opacity, 0.3);
+  }
+
+  .sort-button:hover :global(.sort-icon-idle) {
+    opacity: 0.6;
+  }
+
+  .table-empty {
+    padding: var(--table-empty-padding, 32px 24px);
+    text-align: center;
+    color: var(--table-empty-color, currentColor);
+  }
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border-width: 0;
+  }
+</style>

package/dist/Table/Table.svelte.d.ts

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

package/dist/Table/properties.d.ts

@@ -0,0 +1,26 @@
+import type { Snippet } from 'svelte';
+export type TableCellValue = string | number | boolean | null | Record<string, unknown> | unknown[];
+export type SortDirection = 'asc' | 'desc';
+export type TableProperties = OptionalTableProperties & TableEventProperties;
+export type OptionalTableProperties = {
+    tableTitle?: string | null;
+    tableHeaders?: string[];
+    tableData?: Array<TableCellValue[]>;
+    sortable?: boolean;
+    sortableColumns?: number[];
+    stickyHeader?: boolean;
+    isTableScrollable?: boolean;
+    isContentScrollable?: boolean;
+    testId?: string;
+    caption?: string;
+    sortAscIcon?: Snippet;
+    sortDescIcon?: Snippet;
+    sortDefaultIcon?: Snippet;
+    cell?: Snippet<[TableCellValue, number, number]>;
+    empty?: Snippet;
+    classes?: string;
+};
+export type TableEventProperties = {
+    onrowclick?: (rowIndex: number, rowData: TableCellValue[]) => void;
+    onsort?: (columnIndex: number, direction: SortDirection) => void;
+};

package/dist/Table/properties.js

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

package/dist/Tabs/Tabs.svelte

@@ -0,0 +1,303 @@
+<script lang="ts">
+  import type { TabItem, TabsProperties } from './properties';
+  import chevronLeftSvg from '../assets/chevron-left.svg?raw';
+  import chevronRightSvg from '../assets/chevron-right.svg?raw';
+
+  let {
+    items,
+    activeIndex = $bindable(0),
+    activeKey,
+    disabled = false,
+    testId,
+    scrollLeftIcon,
+    scrollRightIcon,
+    tab,
+    classes,
+    onchange,
+    onkeychange
+  }: TabsProperties = $props();
+
+  const isObjectMode = $derived(items.length > 0 && typeof items.at(0) === 'object');
+
+  function toTabItem(item: string | TabItem): TabItem | null {
+    return typeof item === 'object' ? item : null;
+  }
+
+  function toStringLabel(item: string | TabItem): string {
+    return typeof item === 'string' ? item : item.label;
+  }
+
+  const resolvedActiveIndex = $derived(
+    isObjectMode
+      ? items.findIndex((item) => {
+          const tabItem = toTabItem(item);
+          return tabItem !== null && tabItem.key === activeKey;
+        })
+      : activeIndex
+  );
+
+  function isActiveItem(index: number): boolean {
+    return index === resolvedActiveIndex;
+  }
+
+  let scrollContainer: HTMLDivElement | null = null;
+  let canScrollLeft = $state(false);
+  let canScrollRight = $state(false);
+
+  function updateOverflow(): void {
+    if (scrollContainer === null) {
+      return;
+    }
+    const { scrollLeft, scrollWidth, clientWidth } = scrollContainer;
+    canScrollLeft = scrollLeft > 1;
+    canScrollRight = scrollLeft + clientWidth < scrollWidth - 1;
+  }
+
+  function scroll(direction: 'left' | 'right'): void {
+    if (scrollContainer === null) {
+      return;
+    }
+    const amount = scrollContainer.clientWidth * 0.6;
+    scrollContainer.scrollBy({
+      left: direction === 'left' ? -amount : amount,
+      behavior: 'smooth'
+    });
+  }
+
+  function handleTabClick(index: number): void {
+    if (disabled) {
+      return;
+    }
+    if (isObjectMode) {
+      const rawItem = items.at(index);
+      if (typeof rawItem !== 'object') {
+        return;
+      }
+      const tabItem = toTabItem(rawItem)!;
+      if (tabItem.key === activeKey) {
+        return;
+      }
+      onkeychange?.(tabItem.key);
+    } else {
+      if (index === activeIndex) {
+        return;
+      }
+      const rawLabel = items.at(index);
+      if (typeof rawLabel !== 'string') {
+        return;
+      }
+      activeIndex = index;
+      onchange?.(index, rawLabel);
+    }
+  }
+
+  function handleKeydown(event: KeyboardEvent, index: number): void {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      handleTabClick(index);
+    }
+  }
+
+  function initOverflow(node: HTMLDivElement): { destroy: () => void } {
+    scrollContainer = node;
+    updateOverflow();
+    const observer = new MutationObserver(updateOverflow);
+    observer.observe(node, { childList: true, subtree: true });
+    return {
+      destroy() {
+        observer.disconnect();
+      }
+    };
+  }
+</script>
+
+<div class="tabs-wrapper {classes ?? ''}" class:disabled data-pw={testId}>
+  {#if canScrollLeft}
+    <button
+      class="tabs-arrow tabs-arrow-left"
+      aria-label="Scroll tabs left"
+      onclick={() => scroll('left')}
+    >
+      {#if typeof scrollLeftIcon === 'function'}
+        {@render scrollLeftIcon()}
+      {:else}
+        <!-- eslint-disable svelte/no-at-html-tags -->
+        {@html chevronLeftSvg}
+      {/if}
+    </button>
+  {/if}
+  <div
+    class="tabs-bar"
+    class:fade-left={canScrollLeft}
+    class:fade-right={canScrollRight}
+    role="tablist"
+    use:initOverflow
+    onscroll={updateOverflow}
+  >
+    {#each items as item, index (isObjectMode ? (toTabItem(item)?.key ?? index) : index)}
+      {@const tabItem = toTabItem(item)}
+      {@const label = toStringLabel(item)}
+      <div
+        class="tabs-item"
+        class:active={isActiveItem(index)}
+        role="tab"
+        aria-selected={isActiveItem(index)}
+        aria-disabled={disabled ? true : null}
+        tabindex={isActiveItem(index) ? 0 : -1}
+        data-pw={tabItem?.testId}
+        onclick={() => handleTabClick(index)}
+        onkeydown={(event) => handleKeydown(event, index)}
+      >
+        {#if typeof tab === 'function'}
+          {@render tab({ label, index, active: isActiveItem(index), subtitle: tabItem?.subtitle })}
+        {:else}
+          {label}
+        {/if}
+        {#if isActiveItem(index)}
+          <span class="tabs-indicator"></span>
+        {/if}
+      </div>
+    {/each}
+  </div>
+  {#if canScrollRight}
+    <button
+      class="tabs-arrow tabs-arrow-right"
+      aria-label="Scroll tabs right"
+      onclick={() => scroll('right')}
+    >
+      {#if typeof scrollRightIcon === 'function'}
+        {@render scrollRightIcon()}
+      {:else}
+        <!-- eslint-disable svelte/no-at-html-tags -->
+        {@html chevronRightSvg}
+      {/if}
+    </button>
+  {/if}
+</div>
+
+<style>
+  .tabs-wrapper {
+    display: flex;
+    align-items: stretch;
+    position: relative;
+    max-width: 100%;
+    background: var(--tabs-bar-background, transparent);
+    border-bottom: var(--tabs-bar-border-bottom, 1px solid #e4e4e7);
+    border-radius: var(--tabs-bar-border-radius, 0);
+  }
+
+  .tabs-wrapper.disabled {
+    opacity: var(--tabs-disabled-opacity, 0.5);
+    pointer-events: none;
+  }
+
+  .tabs-bar {
+    display: flex;
+    flex: 1;
+    min-width: 0;
+    padding: var(--tabs-bar-padding, 0px);
+    gap: var(--tabs-bar-gap, 0px);
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+
+  .tabs-bar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .tabs-bar.fade-left {
+    mask-image: linear-gradient(to right, transparent, black var(--tabs-fade-size, 32px));
+    -webkit-mask-image: linear-gradient(to right, transparent, black var(--tabs-fade-size, 32px));
+  }
+
+  .tabs-bar.fade-right {
+    mask-image: linear-gradient(to left, transparent, black var(--tabs-fade-size, 32px));
+    -webkit-mask-image: linear-gradient(to left, transparent, black var(--tabs-fade-size, 32px));
+  }
+
+  .tabs-bar.fade-left.fade-right {
+    mask-image: linear-gradient(
+      to right,
+      transparent,
+      black var(--tabs-fade-size, 32px),
+      black calc(100% - var(--tabs-fade-size, 32px)),
+      transparent
+    );
+    -webkit-mask-image: linear-gradient(
+      to right,
+      transparent,
+      black var(--tabs-fade-size, 32px),
+      black calc(100% - var(--tabs-fade-size, 32px)),
+      transparent
+    );
+  }
+
+  .tabs-arrow {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: var(--tabs-arrow-size, 28px);
+    padding: var(--tabs-arrow-padding, 0);
+    border: var(--tabs-arrow-border, none);
+    background: var(--tabs-arrow-background, var(--tabs-bar-background, #ffffff));
+    color: var(--tabs-arrow-color, var(--tabs-item-color, currentColor));
+    cursor: pointer;
+    z-index: 1;
+    transition: var(--tabs-arrow-transition, color 0.2s ease);
+    font-family: inherit;
+  }
+
+  .tabs-arrow:hover {
+    color: var(--tabs-arrow-hover-color, var(--tabs-active-color, currentColor));
+    background: var(
+      --tabs-arrow-hover-background,
+      var(--tabs-arrow-background, var(--tabs-bar-background, #ffffff))
+    );
+  }
+
+  .tabs-item {
+    display: flex;
+    align-items: center;
+    position: relative;
+    padding: var(--tabs-item-padding, 12px 16px);
+    font-size: var(--tabs-item-font-size, 14px);
+    font-weight: var(--tabs-item-font-weight, 400);
+    font-family: var(--tabs-item-font-family, inherit);
+    color: var(--tabs-item-color, currentColor);
+    cursor: var(--tabs-item-cursor, pointer);
+    background: var(--tabs-item-background, transparent);
+    border: none;
+    border-radius: var(--tabs-item-border-radius, 0);
+    outline: none;
+    white-space: nowrap;
+    flex-shrink: 0;
+    user-select: none;
+    transition: var(--tabs-transition, color 0.2s ease, background 0.2s ease);
+  }
+
+  .tabs-item:hover:not(.active):not([aria-disabled]) {
+    color: var(--tabs-hover-color, currentColor);
+    background: var(--tabs-hover-background, transparent);
+  }
+
+  .tabs-item.active {
+    color: var(--tabs-active-color, currentColor);
+    font-weight: var(--tabs-active-font-weight, 600);
+    background: var(--tabs-active-background, transparent);
+  }
+
+  .tabs-item[aria-disabled] {
+    cursor: var(--tabs-disabled-cursor, not-allowed);
+  }
+
+  .tabs-indicator {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: var(--tabs-indicator-height, 2px);
+    background-color: var(--tabs-indicator-color, currentColor);
+    border-radius: var(--tabs-indicator-border-radius, 2px 2px 0 0);
+  }
+</style>

package/dist/Tabs/Tabs.svelte.d.ts

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