polymorph-ui-components 0.1.0

package/dist/Badge/Badge.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import type { BadgeProperties } from './properties';
+
+  let { image, value, testId, classes }: BadgeProperties = $props();
+</script>
+
+<div class="badge-icon {classes ?? ''}" data-pw={testId}>
+  <div class="badge-wrap">
+    <img class="icon-img" src={image} alt="" />
+    <div class="badge">{value}</div>
+  </div>
+</div>
+
+<style>
+  .badge-wrap {
+    position: relative;
+    display: inline-block;
+    margin: var(--badge-wrap-margin, 0px 12px 10px 0px);
+    padding: var(--badge-wrap-padding, 8px 8px 8px 8px);
+  }
+
+  .badge {
+    position: absolute;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    line-height: 1;
+    color: var(--badge-color, #fff);
+    background-color: var(--badge-background, #18181b);
+    font-size: var(--badge-font-size, 12px);
+    font-family: var(--badge-font-family, inherit);
+    padding: var(--badge-padding, 3px 8px);
+    border-radius: var(--badge-border-radius, 100px);
+    min-width: var(--badge-min-width, 18px);
+    min-height: var(--badge-min-height, 18px);
+    border: var(--badge-border, 1px solid #fff);
+    top: var(--badge-top, 0);
+    right: var(--badge-right, 0);
+    bottom: var(--badge-bottom);
+    left: var(--badge-left);
+    z-index: 1;
+  }
+
+  .icon-img {
+    border-radius: var(--badge-img-border-radius, 6px);
+    width: var(--badge-img-width, 64px);
+    height: var(--badge-img-height, 64px);
+    object-fit: var(--badge-object-fit, contain);
+    box-shadow: var(--badge-img-icon-shadow, 0 0 0 0.5px currentColor);
+    background-color: var(--badge-img-background-color);
+  }
+</style>

package/dist/Badge/Badge.svelte.d.ts

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

package/dist/Badge/properties.d.ts

@@ -0,0 +1,6 @@
+export type BadgeProperties = {
+    image: string;
+    value: string;
+    testId?: string;
+    classes?: string;
+};

package/dist/Badge/properties.js

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

package/dist/Banner/Banner.svelte

@@ -0,0 +1,158 @@
+<script lang="ts">
+  import type { BannerProperties } from './properties';
+  import { slide } from 'svelte/transition';
+  import Button from '../Button/Button.svelte';
+  import closeSvg from '../assets/close.svg?raw';
+
+  let {
+    text,
+    icon,
+    linkText,
+    dismissible = false,
+    visible = $bindable(true),
+    testId,
+    rightContent,
+    dismissIcon,
+    onclick,
+    ondismiss,
+    classes
+  }: BannerProperties = $props();
+
+  let interactive = $derived(typeof onclick === 'function');
+
+  function handleClick(event: MouseEvent): void {
+    onclick?.(event);
+  }
+
+  function handleKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      if (event.currentTarget instanceof HTMLElement) {
+        event.currentTarget.click();
+      }
+    }
+  }
+
+  function handleDismiss(event: MouseEvent): void {
+    event.stopPropagation();
+    visible = false;
+    ondismiss?.();
+  }
+</script>
+
+{#if visible}
+  <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+  <div
+    class="banner {classes ?? ''}"
+    onclick={interactive ? handleClick : null}
+    onkeydown={interactive ? handleKeydown : null}
+    role={interactive ? 'button' : null}
+    tabindex={interactive ? 0 : null}
+    data-pw={testId}
+    transition:slide={{ duration: 300 }}
+  >
+    {#if typeof icon === 'function'}
+      <div class="banner-icon">
+        {@render icon()}
+      </div>
+    {/if}
+    <div class="banner-text">
+      {text}
+      {#if typeof linkText === 'string' && linkText.length > 0}
+        <span class="banner-link-text">{linkText}</span>
+      {/if}
+    </div>
+    {#if typeof rightContent === 'function'}
+      <div class="banner-right">
+        {@render rightContent()}
+      </div>
+    {/if}
+    {#if dismissible}
+      <div class="banner-dismiss">
+        <Button
+          onclick={handleDismiss}
+          ariaLabel="Dismiss"
+          {...typeof testId === 'string' ? { testId: `${testId}-dismiss` } : {}}
+        >
+          {#if typeof dismissIcon === 'function'}
+            {@render dismissIcon()}
+          {:else}
+            <!-- eslint-disable svelte/no-at-html-tags -->
+            {@html closeSvg}
+          {/if}
+        </Button>
+      </div>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .banner {
+    display: flex;
+    align-items: center;
+    width: var(--banner-width, 100%);
+    height: var(--banner-height);
+    padding: var(--banner-padding, 10px 12px);
+    gap: var(--banner-gap, 8px);
+    justify-content: var(--banner-justify-content, center);
+    background-color: var(--banner-background, transparent);
+    color: var(--banner-color, currentColor);
+    font-family: var(--banner-font-family);
+    font-size: var(--banner-font-size, 14px);
+    font-weight: var(--banner-font-weight, 500);
+    line-height: var(--banner-line-height, 1.3);
+    border-bottom: var(--banner-border-bottom, none);
+    cursor: var(--banner-cursor, pointer);
+    position: var(--banner-position, sticky);
+    top: var(--banner-top, 0);
+    z-index: var(--banner-z-index, 100);
+    box-sizing: border-box;
+  }
+
+  .banner-icon {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    color: var(--banner-icon-color, currentColor);
+  }
+
+  .banner-icon :global(svg) {
+    width: var(--banner-icon-size, 18px);
+    height: var(--banner-icon-size, 18px);
+  }
+
+  .banner-text {
+    overflow: var(--banner-text-overflow, hidden);
+    text-overflow: var(--banner-text-ellipsis, ellipsis);
+    white-space: var(--banner-white-space, nowrap);
+  }
+
+  .banner-link-text {
+    color: var(--banner-link-color, currentColor);
+    margin-left: var(--banner-link-gap, 4px);
+  }
+
+  .banner-right {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  .banner-dismiss {
+    --button-color: transparent;
+    --button-border: none;
+    --button-padding: 2px;
+    --button-border-radius: var(--banner-dismiss-border-radius, 6px);
+    --button-text-color: var(--banner-dismiss-color, currentColor);
+    --button-hover-color: var(--banner-dismiss-hover-background, rgba(0, 0, 0, 0.1));
+    --button-cursor: inherit;
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  .banner-dismiss :global(svg) {
+    width: var(--banner-dismiss-size, 14px);
+    height: var(--banner-dismiss-size, 14px);
+  }
+</style>

package/dist/Banner/Banner.svelte.d.ts

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

package/dist/Banner/properties.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+export type BannerProperties = MandatoryBannerProperties & OptionalBannerProperties & BannerEventProperties;
+export type MandatoryBannerProperties = {
+    text: string;
+};
+export type OptionalBannerProperties = {
+    icon?: Snippet;
+    linkText?: string;
+    dismissible?: boolean;
+    visible?: boolean;
+    testId?: string;
+    rightContent?: Snippet;
+    dismissIcon?: Snippet;
+    classes?: string;
+};
+export type BannerEventProperties = {
+    onclick?: (event: MouseEvent) => void;
+    ondismiss?: () => void;
+};

package/dist/Banner/properties.js

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

package/dist/Book/Book.svelte

@@ -0,0 +1,281 @@
+<script lang="ts">
+  import type { BookProperties } from './properties';
+  import chevronLeftLgSvg from '../assets/chevron-left-lg.svg?raw';
+  import chevronRightLgSvg from '../assets/chevron-right-lg.svg?raw';
+  import Button from '../Button/Button.svelte';
+
+  let {
+    pages,
+    currentPage = $bindable(0),
+    transition = 'slide',
+    showNavigation = true,
+    showPageIndicator = true,
+    enableSwipe = false,
+    testId,
+    previousIcon,
+    nextIcon,
+    onpagechange,
+    classes
+  }: BookProperties = $props();
+
+  let startX = 0;
+  let isDragging = false;
+
+  function goToPage(page: number): void {
+    if (page < 0 || page >= pages.length || page === currentPage) {
+      return;
+    }
+    currentPage = page;
+    onpagechange?.(currentPage);
+  }
+
+  function previousPage(): void {
+    goToPage(currentPage - 1);
+  }
+
+  function nextPage(): void {
+    goToPage(currentPage + 1);
+  }
+
+  function handleKeyDown(event: KeyboardEvent): void {
+    if (event.key === 'ArrowLeft') {
+      event.preventDefault();
+      previousPage();
+    } else if (event.key === 'ArrowRight') {
+      event.preventDefault();
+      nextPage();
+    }
+  }
+
+  function handleTouchStart(event: TouchEvent): void {
+    if (!enableSwipe) {
+      return;
+    }
+    const touch = event.touches.item(0);
+    if (touch !== null) {
+      startX = touch.clientX;
+      isDragging = true;
+    }
+  }
+
+  function handleTouchEnd(event: TouchEvent): void {
+    if (!enableSwipe || !isDragging) {
+      return;
+    }
+    isDragging = false;
+    const changedTouch = event.changedTouches.item(0);
+    if (changedTouch !== null) {
+      const diff = startX - changedTouch.clientX;
+      if (diff > 20) {
+        nextPage();
+      } else if (diff < -20) {
+        previousPage();
+      }
+    }
+  }
+
+  function handleMouseDown(event: MouseEvent): void {
+    if (!enableSwipe) {
+      return;
+    }
+    startX = event.clientX;
+    isDragging = true;
+  }
+
+  function handleMouseUp(event: MouseEvent): void {
+    if (!enableSwipe || !isDragging) {
+      return;
+    }
+    isDragging = false;
+    const diff = startX - event.clientX;
+    if (diff > 20) {
+      nextPage();
+    } else if (diff < -20) {
+      previousPage();
+    }
+  }
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<div
+  class="book {classes ?? ''}"
+  data-pw={testId}
+  onkeydown={handleKeyDown}
+  ontouchstart={handleTouchStart}
+  ontouchend={handleTouchEnd}
+  onmousedown={handleMouseDown}
+  onmouseup={handleMouseUp}
+  role="region"
+  tabindex="0"
+>
+  <div class="book-viewport">
+    {#if showNavigation}
+      <div class="nav-button nav-prev" class:nav-disabled={currentPage === 0}>
+        <Button onclick={previousPage} disabled={currentPage === 0} ariaLabel="Previous page">
+          {#if typeof previousIcon === 'function'}
+            {@render previousIcon()}
+          {:else}
+            <!-- eslint-disable svelte/no-at-html-tags -->
+            {@html chevronLeftLgSvg}
+          {/if}
+        </Button>
+      </div>
+    {/if}
+
+    <div class="pages-container">
+      {#each pages as page, index (index)}
+        {#if transition === 'none'}
+          {#if index === currentPage}
+            <div class="page">
+              {@render page.content()}
+            </div>
+          {/if}
+        {:else if transition === 'fade'}
+          <div class="page page-fade" class:page-active={index === currentPage}>
+            {@render page.content()}
+          </div>
+        {:else}
+          <div class="page page-slide" style:transform="translateX({(index - currentPage) * 100}%)">
+            {@render page.content()}
+          </div>
+        {/if}
+      {/each}
+    </div>
+
+    {#if showNavigation}
+      <div class="nav-button nav-next" class:nav-disabled={currentPage === pages.length - 1}>
+        <Button
+          onclick={nextPage}
+          disabled={currentPage === pages.length - 1}
+          ariaLabel="Next page"
+        >
+          {#if typeof nextIcon === 'function'}
+            {@render nextIcon()}
+          {:else}
+            <!-- eslint-disable svelte/no-at-html-tags -->
+            {@html chevronRightLgSvg}
+          {/if}
+        </Button>
+      </div>
+    {/if}
+  </div>
+
+  {#if showPageIndicator}
+    <div class="page-indicator">
+      {#each pages as _, index (index)}
+        <button
+          class="dot"
+          class:dot-active={index === currentPage}
+          onclick={() => goToPage(index)}
+          aria-label="Go to page {index + 1}"
+        ></button>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .book {
+    width: var(--book-width, 100%);
+    background-color: var(--book-background, #ffffff);
+    border-radius: var(--book-border-radius, 8px);
+    border: var(--book-border, 1px solid #e4e4e7);
+    outline: none;
+  }
+
+  .book-viewport {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+
+  .pages-container {
+    position: relative;
+    width: 100%;
+    height: var(--book-height, 400px);
+    overflow: var(--book-overflow, hidden);
+  }
+
+  .page {
+    width: 100%;
+    height: 100%;
+  }
+
+  .page-slide {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transition: transform var(--book-transition-duration, 0.3s) ease;
+  }
+
+  .page-fade {
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    transition: opacity var(--book-transition-duration, 0.3s) ease;
+    pointer-events: none;
+  }
+
+  .page-fade.page-active {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .nav-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    --button-width: var(--book-nav-size, 36px);
+    --button-height: var(--book-nav-size, 36px);
+    --button-min-width: var(--book-nav-size, 36px);
+    --button-background: var(--book-nav-background, rgba(0, 0, 0, 0.05));
+    --button-border: none;
+    --button-border-radius: var(--book-nav-border-radius, 50%);
+    --button-padding: 0;
+    --button-color: var(--book-nav-color, currentColor);
+    --button-hover-background: var(--book-nav-hover-background, rgba(0, 0, 0, 0.1));
+  }
+
+  .nav-disabled {
+    opacity: var(--book-nav-disabled-opacity, 0.3);
+  }
+
+  .nav-button :global(svg) {
+    width: 18px;
+    height: 18px;
+  }
+
+  .nav-prev {
+    margin-right: 4px;
+  }
+
+  .nav-next {
+    margin-left: 4px;
+  }
+
+  .page-indicator {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: var(--book-dot-gap, 8px);
+    padding: var(--book-indicator-padding, 12px 0);
+  }
+
+  .dot {
+    width: var(--book-dot-size, 8px);
+    height: var(--book-dot-size, 8px);
+    border-radius: var(--book-dot-border-radius, 50%);
+    background-color: var(--book-dot-color, #a1a1aa);
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+  }
+
+  .dot-active {
+    background-color: var(--book-dot-active-color, currentColor);
+  }
+</style>

package/dist/Book/Book.svelte.d.ts

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

package/dist/Book/properties.d.ts

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+export type BookPage = {
+    content: Snippet;
+    title?: string;
+};
+export type BookTransition = 'slide' | 'fade' | 'none';
+export type BookProperties = MandatoryBookProperties & OptionalBookProperties & BookEventProperties;
+export type MandatoryBookProperties = {
+    pages: BookPage[];
+};
+export type OptionalBookProperties = {
+    currentPage?: number;
+    transition?: BookTransition;
+    showNavigation?: boolean;
+    showPageIndicator?: boolean;
+    enableSwipe?: boolean;
+    testId?: string;
+    previousIcon?: Snippet;
+    nextIcon?: Snippet;
+    classes?: string;
+};
+export type BookEventProperties = {
+    onpagechange?: (page: number) => void;
+};

package/dist/Book/properties.js

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