polymorph-ui-components 0.1.0

package/dist/Tabs/properties.d.ts

@@ -0,0 +1,30 @@
+import type { Snippet } from 'svelte';
+export type TabItem = {
+    key: string;
+    label: string;
+    testId?: string;
+    subtitle?: string;
+};
+export type TabsProperties = MandatoryTabsProperties & OptionalTabsProperties & TabsEventProperties;
+export type MandatoryTabsProperties = {
+    items: string[] | TabItem[];
+};
+export type OptionalTabsProperties = {
+    activeIndex?: number;
+    activeKey?: string;
+    disabled?: boolean;
+    testId?: string;
+    scrollLeftIcon?: Snippet;
+    scrollRightIcon?: Snippet;
+    tab?: Snippet<[{
+        label: string;
+        index: number;
+        active: boolean;
+        subtitle?: string;
+    }]>;
+    classes?: string;
+};
+export type TabsEventProperties = {
+    onchange?: (index: number, label: string) => void;
+    onkeychange?: (key: string) => void;
+};

package/dist/Tabs/properties.js

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

package/dist/ThemeSwitcher/ThemeSwitcher.svelte

@@ -0,0 +1,249 @@
+<script lang="ts">
+  import { onMount, tick, untrack } from 'svelte';
+  import type { ThemeSwitcherOption, ThemeSwitcherProperties } from './properties';
+  import { getStorageItem, setStorageItem } from '../utils';
+  import sunSvg from '../assets/sun.svg?raw';
+  import moonSvg from '../assets/moon.svg?raw';
+  import monitorSvg from '../assets/monitor.svg?raw';
+  import paletteSvg from '../assets/palette.svg?raw';
+
+  const DEFAULT_OPTIONS: ThemeSwitcherOption[] = [
+    { value: 'light', label: 'Light theme' },
+    { value: 'dark', label: 'Dark theme' },
+    { value: 'system', label: 'System theme' }
+  ];
+
+  const KNOWN_ICONS: Record<string, string> = {
+    light: sunSvg,
+    dark: moonSvg,
+    system: monitorSvg
+  };
+
+  function getDefaultIcon(value: string): string {
+    return KNOWN_ICONS[value] ?? paletteSvg;
+  }
+
+  let {
+    options = DEFAULT_OPTIONS,
+    value,
+    mode,
+    storageKey = 'theme-preference',
+    testId,
+    classes,
+    onchange
+  }: ThemeSwitcherProperties = $props();
+
+  let currentValue: string = $state(untrack(() => value) ?? 'system');
+  let systemPreference: string = $state('light');
+
+  let hasSystemOption = $derived(options.some((o) => o.value === 'system'));
+  let effectiveMode = $derived(mode ?? (options.length <= 2 ? 'toggle' : 'segment'));
+  let currentIndex = $derived(options.findIndex((o) => o.value === currentValue));
+
+  let segmentButtons: HTMLButtonElement[] = $state([]);
+  let indicatorLeft: number = $state(0);
+  let indicatorWidth: number = $state(0);
+
+  function updateIndicator(): void {
+    const btn = segmentButtons.at(currentIndex);
+    if (btn instanceof HTMLButtonElement) {
+      indicatorLeft = btn.offsetLeft;
+      indicatorWidth = btn.offsetWidth;
+    }
+  }
+
+  function applyValue(newValue: string): void {
+    currentValue = newValue;
+    if (typeof storageKey === 'string' && storageKey.length > 0) {
+      setStorageItem(storageKey, newValue);
+    }
+    const resolved = newValue === 'system' ? systemPreference : newValue;
+    onchange?.(newValue, resolved);
+    tick().then(updateIndicator);
+  }
+
+  function handleToggle(): void {
+    const nextIndex = (currentIndex + 1) % options.length;
+    const nextOption = options.at(nextIndex);
+    if (typeof nextOption === 'object' && nextOption !== null) {
+      applyValue(nextOption.value);
+    }
+  }
+
+  onMount(() => {
+    systemPreference = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+
+    if (typeof storageKey === 'string' && storageKey.length > 0) {
+      const stored = getStorageItem(storageKey);
+      if (
+        typeof stored === 'string' &&
+        stored.length > 0 &&
+        options.some((o) => o.value === stored)
+      ) {
+        currentValue = stored;
+      }
+    }
+
+    if (typeof value === 'string' && value !== '') {
+      currentValue = value;
+    }
+
+    onchange?.(currentValue, currentValue === 'system' ? systemPreference : currentValue);
+    tick().then(updateIndicator);
+
+    if (hasSystemOption) {
+      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+      const handler = (e: MediaQueryListEvent) => {
+        systemPreference = e.matches ? 'dark' : 'light';
+        if (currentValue === 'system') {
+          onchange?.(currentValue, systemPreference);
+        }
+      };
+      mediaQuery.addEventListener('change', handler);
+      return () => {
+        mediaQuery.removeEventListener('change', handler);
+      };
+    }
+  });
+</script>
+
+{#if effectiveMode === 'toggle'}
+  <button
+    class="toggle-button {classes ?? ''}"
+    onclick={handleToggle}
+    aria-label="Switch theme"
+    data-pw={testId}
+  >
+    {#each options as option, i (option.value)}
+      <span class="icon" class:active={i === currentIndex}>
+        {#if typeof option.icon === 'function'}
+          {@render option.icon()}
+        {:else}
+          <!-- eslint-disable svelte/no-at-html-tags -->
+          {@html getDefaultIcon(option.value)}
+        {/if}
+      </span>
+    {/each}
+  </button>
+{:else}
+  <div class="segment-control {classes ?? ''}" data-pw={testId}>
+    <div
+      class="segment-indicator"
+      style="left: {indicatorLeft}px; width: {indicatorWidth}px;"
+    ></div>
+    {#each options as option, i (option.value)}
+      <button
+        bind:this={segmentButtons[i]}
+        class="segment-button"
+        class:selected={currentValue === option.value}
+        onclick={() => applyValue(option.value)}
+        aria-label={option.label ?? option.value}
+      >
+        <span class="icon">
+          {#if typeof option.icon === 'function'}
+            {@render option.icon()}
+          {:else}
+            <!-- eslint-disable svelte/no-at-html-tags -->
+            {@html getDefaultIcon(option.value)}
+          {/if}
+        </span>
+      </button>
+    {/each}
+  </div>
+{/if}
+
+<style>
+  .toggle-button {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--theme-switcher-size, 36px);
+    height: var(--theme-switcher-size, 36px);
+    padding: 0;
+    border: none;
+    border-radius: var(--theme-switcher-border-radius, 6px);
+    background-color: var(--theme-switcher-bg, transparent);
+    cursor: pointer;
+    color: var(--theme-switcher-icon-color, currentColor);
+    transition: background-color var(--theme-switcher-transition-duration, 0.3s);
+    font-family: inherit;
+  }
+
+  .toggle-button:hover {
+    background-color: var(--theme-switcher-bg-hover, transparent);
+  }
+
+  .icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--theme-switcher-icon-size, 18px);
+    height: var(--theme-switcher-icon-size, 18px);
+    transition:
+      opacity var(--theme-switcher-transition-duration, 0.3s),
+      transform var(--theme-switcher-transition-duration, 0.3s);
+  }
+
+  .icon :global(svg) {
+    width: 100%;
+    height: 100%;
+  }
+
+  .toggle-button .icon {
+    position: absolute;
+  }
+
+  .toggle-button .icon:not(.active) {
+    opacity: 0;
+    transform: scale(0.5) rotate(90deg);
+  }
+
+  .toggle-button .icon.active {
+    opacity: 1;
+    transform: scale(1) rotate(0deg);
+  }
+
+  .segment-control {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--theme-switcher-segment-gap, 2px);
+    padding: var(--theme-switcher-segment-padding, 4px);
+    background-color: var(--theme-switcher-segment-bg, transparent);
+    border-radius: var(--theme-switcher-border-radius, 6px);
+  }
+
+  .segment-indicator {
+    position: absolute;
+    top: var(--theme-switcher-segment-padding, 4px);
+    bottom: var(--theme-switcher-segment-padding, 4px);
+    border-radius: var(--theme-switcher-segment-border-radius, 6px);
+    background-color: var(--theme-switcher-segment-active-bg, #ffffff);
+    box-shadow: var(--theme-switcher-segment-shadow, 0 1px 2px rgba(0, 0, 0, 0.1));
+    transition:
+      left var(--theme-switcher-transition-duration, 0.3s),
+      width var(--theme-switcher-transition-duration, 0.3s);
+    z-index: 0;
+  }
+
+  .segment-button {
+    position: relative;
+    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--theme-switcher-segment-button-padding, 6px 10px);
+    border: none;
+    border-radius: var(--theme-switcher-segment-border-radius, 6px);
+    background: transparent;
+    cursor: pointer;
+    color: var(--theme-switcher-icon-color, currentColor);
+    transition: color var(--theme-switcher-transition-duration, 0.3s);
+    font-family: inherit;
+  }
+
+  .segment-button.selected {
+    color: var(--theme-switcher-icon-color-active, currentColor);
+  }
+</style>

package/dist/ThemeSwitcher/ThemeSwitcher.svelte.d.ts

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

package/dist/ThemeSwitcher/properties.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+export type ThemeSwitcherOption = {
+    value: string;
+    label?: string;
+    icon?: Snippet;
+};
+export type ThemeSwitcherMode = 'toggle' | 'segment';
+export type ThemeSwitcherProperties = OptionalThemeSwitcherProperties & ThemeSwitcherEventProperties;
+export type OptionalThemeSwitcherProperties = {
+    options?: ThemeSwitcherOption[];
+    value?: string;
+    mode?: ThemeSwitcherMode;
+    storageKey?: string;
+    testId?: string;
+    classes?: string;
+};
+export type ThemeSwitcherEventProperties = {
+    onchange?: (value: string, resolvedValue: string) => void;
+};

package/dist/ThemeSwitcher/properties.js

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

package/dist/Toast/Toast.svelte

@@ -0,0 +1,220 @@
+<script lang="ts">
+  import { fly } from 'svelte/transition';
+  import type { ToastDirection, ToastProperties } from './properties';
+  import type { FlyAnimationConfig } from '../types';
+  import { onMount } from 'svelte';
+  import Img from '../Img/Img.svelte';
+
+  let {
+    duration = 2000,
+    leftIcon,
+    message = '',
+    subtext,
+    rightIcon,
+    direction,
+    overlapPage = true,
+    inAnimationOffset,
+    inAnimationDuration,
+    outAnimationOffset,
+    outAnimationDuration,
+    testId,
+    messageTestId,
+    subTextTestId,
+    closeIconTestId,
+    ontoasthide,
+    bottomContent,
+    classes
+  }: ToastProperties = $props();
+
+  const animationConfig: FlyAnimationConfig = $derived(getAnimationConfig(overlapPage, direction));
+
+  let showToast = $state(false);
+  let timeoutId = $state<ReturnType<typeof setTimeout> | null>(null);
+
+  function hideToast() {
+    showToast = false;
+  }
+
+  function handleAnimationEnd() {
+    ontoasthide?.();
+  }
+
+  function getAnimationConfig(
+    overlapPage: boolean,
+    toastDirection?: ToastDirection
+  ): FlyAnimationConfig {
+    let inX: number = 0;
+    let inY: number = 0;
+    let outX: number = 0;
+    let outY: number = 0;
+
+    switch (toastDirection) {
+      case 'left-to-right':
+        inX = -1 * (inAnimationOffset ?? 500);
+        outX = -1 * (outAnimationOffset ?? 500);
+        break;
+      case 'right-to-left':
+        inX = inAnimationOffset ?? 500;
+        outX = outAnimationOffset ?? 500;
+        break;
+      case 'bottom-to-top':
+        inY = inAnimationOffset ?? (overlapPage ? 500 : 20);
+        outY = outAnimationOffset ?? (overlapPage ? 500 : 20);
+        break;
+      case 'top-to-bottom':
+      default:
+        inY = -1 * (inAnimationOffset ?? (overlapPage ? 500 : 20));
+        outY = -1 * (outAnimationOffset ?? (overlapPage ? 100 : 20));
+        break;
+    }
+
+    return {
+      in: {
+        x: inX,
+        y: inY,
+        duration: inAnimationDuration ?? 400
+      },
+      out: {
+        x: outX,
+        y: outY,
+        duration: outAnimationDuration ?? 800
+      }
+    };
+  }
+
+  onMount(() => {
+    showToast = true;
+    timeoutId = setTimeout(hideToast, duration);
+
+    return () => {
+      if (timeoutId !== null) {
+        clearTimeout(timeoutId);
+      }
+    };
+  });
+</script>
+
+{#if showToast}
+  <div
+    class="toast {classes ?? ''}"
+    class:no-page-overlap={!overlapPage}
+    role="alert"
+    aria-live="assertive"
+    in:fly={animationConfig.in}
+    out:fly={animationConfig.out}
+    onoutroend={handleAnimationEnd}
+    data-pw={testId}
+  >
+    {#if typeof leftIcon === 'string' && leftIcon.length > 0}
+      <div class="toast-icon-wrapper">
+        <Img src={leftIcon} alt="" />
+      </div>
+    {/if}
+
+    <div class="toast-message" data-pw={messageTestId}>
+      {message}
+      {#if typeof subtext === 'string' && subtext.length > 0}
+        <div class="toast-subtext" data-pw={subTextTestId}>{subtext}</div>
+      {/if}
+
+      {#if typeof bottomContent === 'function'}
+        {@render bottomContent()}
+      {/if}
+    </div>
+
+    {#if typeof rightIcon === 'string' && rightIcon.length > 0}
+      <div
+        class="close-button"
+        tabindex="0"
+        role="button"
+        onclick={hideToast}
+        onkeypress={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            hideToast();
+          }
+        }}
+        data-pw={closeIconTestId}
+      >
+        <Img src={rightIcon} alt="Close" />
+      </div>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .toast {
+    padding: var(--toast-padding, 10px);
+    font-size: var(--toast-font-size, 14px);
+    font-family: var(--toast-font-family, inherit);
+    font-weight: var(--toast-font-weight);
+    height: var(--toast-height, fit-content);
+    border-radius: var(--toast-border-radius, 8px);
+    border: var(--toast-border, none);
+    border-style: var(--toast-border-style);
+    width: var(--toast-width, fit-content);
+    align-items: var(--toast-align-items, center);
+    margin: var(--toast-margin, 0px 10px 10px 10px);
+    justify-content: var(--toast-justify-content, space-between);
+    z-index: var(--toast-z-index, 1000);
+    display: var(--toast-display, flex);
+    position: var(--toast-position, absolute);
+    top: var(--toast-top, 10px);
+    left: var(--toast-left, 0);
+    right: var(--toast-right, 0);
+    background-color: var(--toast-background-color, #18181b);
+    color: var(--toast-color, #fff);
+    box-shadow: var(--toast-box-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));
+    opacity: var(--toast-opacity, 1);
+    box-sizing: var(--toast-box-sizing);
+  }
+
+  .no-page-overlap {
+    position: var(--toast-position, relative);
+  }
+
+  .toast-icon-wrapper {
+    display: flex;
+    width: var(--toast-icon-wrapper-width, 20px);
+    height: var(--toast-icon-wrapper-height, 20px);
+    margin: var(--toast-icon-margin, 0px 6px 0px 0px);
+    padding: var(--toast-icon-wrapper-padding, 1px);
+    align-items: center;
+
+    --image-height: var(--toast-icon-height, 100%);
+    --image-width: fit-content;
+    --image-filter: var(--toast-icon-filter, none);
+    --image-border-radius: var(--toast-icon-border-radius, 50%);
+  }
+
+  .toast-message {
+    display: var(--toast-message-display, flex);
+    flex: var(--toast-message-flex, 1);
+    padding: var(--toast-message-padding, 1px);
+    flex-direction: column;
+  }
+
+  .toast-subtext {
+    color: var(--toast-subtext-color, inherit);
+    font-size: var(--toast-subtext-font-size, inherit);
+    font-weight: var(--toast-subtext-font-weight, inherit);
+    margin: var(--toast-subtext-margin, 10px 0px 0px 0px);
+  }
+
+  .close-button {
+    width: var(--toast-close-button-width, 20px);
+    height: var(--toast-close-button-height, 20px);
+    cursor: var(--toast-close-button-cursor, pointer);
+    gap: var(--toast-close-button-gap, 6px);
+    margin: var(--toast-close-button-margin, 0px 0px 0px 10px);
+    display: var(--toast-close-button-display, flex);
+    align-items: var(--toast-close-button-align-items, center);
+    justify-content: var(--toast-close-button-justify-content, center);
+    padding: var(--toast-close-button-padding, 1px);
+
+    --image-height: var(--toast-icon-height, 100%);
+    --image-width: fit-content;
+    --image-filter: var(--toast-icon-filter, none);
+    --image-border-radius: var(--toast-icon-border-radius, 50%);
+  }
+</style>

package/dist/Toast/Toast.svelte.d.ts

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

package/dist/Toast/properties.d.ts

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+export type ToastDirection = 'left-to-right' | 'right-to-left' | 'top-to-bottom' | 'bottom-to-top';
+export type ToastProperties = ToastEventProperties & {
+    duration?: number;
+    leftIcon?: string | null;
+    message: string;
+    subtext?: string | null;
+    rightIcon?: string | null;
+    direction?: ToastDirection;
+    overlapPage?: boolean;
+    inAnimationOffset?: number | null;
+    inAnimationDuration?: number | null;
+    outAnimationOffset?: number | null;
+    outAnimationDuration?: number | null;
+    testId?: string | null;
+    messageTestId?: string;
+    subTextTestId?: string;
+    closeIconTestId?: string;
+    bottomContent?: Snippet;
+    classes?: string;
+};
+export type ToastEventProperties = {
+    ontoasthide?: () => void;
+};

package/dist/Toast/properties.js

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

package/dist/Toggle/Toggle.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+  import type { ToggleProperties } from './properties';
+
+  let { checked = false, text = '', testId, classes, onclick }: ToggleProperties = $props();
+
+  function handleCheckboxClick(e: MouseEvent): void {
+    if (e.target instanceof HTMLInputElement && typeof e.target.checked === 'boolean') {
+      checked = e.target.checked;
+    }
+    onclick?.(checked);
+  }
+</script>
+
+<div class="container {classes ?? ''}" data-pw={testId}>
+  <div class="text" hidden={text.length === 0}>{text}</div>
+  <label class="switch">
+    <input class="input-checkbox" type="checkbox" {checked} onclick={handleCheckboxClick} />
+    <span class="slider round"></span>
+  </label>
+</div>
+
+<style>
+  .container {
+    display: var(--toggle-container-display, flex);
+    align-items: var(--toggle-container-align-items, center);
+    gap: var(--toggle-container-gap, 8px);
+  }
+
+  .text {
+    font-size: var(--toggle-text-font-size, 14px);
+    font-weight: var(--toggle-text-font-weight, 400);
+    color: var(--toggle-text-color, inherit);
+    margin: var(--toggle-text-margin, 0px 8px 0px 0px);
+    order: var(--toggle-text-order, 0);
+  }
+
+  .switch {
+    position: relative;
+    display: inline-block;
+    width: var(--toggle-switch-width, 46px);
+    height: var(--toggle-switch-height, 25px);
+  }
+
+  .switch .input-checkbox {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  .slider {
+    position: absolute;
+    cursor: pointer;
+    top: var(--toggle-slider-top, 0);
+    left: var(--toggle-slider-left, 0);
+    right: var(--toggle-slider-right, 0);
+    bottom: var(--toggle-slider-bottom, 0);
+    background-color: var(--toggle-slider-unchecked-color, #e4e4e7);
+    border: var(--toggle-slider-border, none);
+    box-sizing: border-box;
+    -webkit-transition: var(--toggle-slider-transition, 0.4s);
+    transition: var(--toggle-slider-transition, 0.4s);
+  }
+
+  .slider:before {
+    position: absolute;
+    content: '';
+    height: var(--toggle-ball-height, 23px);
+    width: var(--toggle-ball-width, 23px);
+    left: var(--toggle-slider-before-left, 2px);
+    bottom: var(--toggle-slider-before-bottom, 1px);
+    top: var(--toggle-slider-before-top, 1px);
+    background-color: var(--toggle-slider-before-background-color, #ffffff);
+    box-shadow: var(--toggle-knob-shadow, 0 1px 2px rgba(0, 0, 0, 0.3));
+    -webkit-transition: var(--toggle-slider-transition, 0.4s);
+    transition: var(--toggle-slider-transition, 0.4s);
+  }
+
+  .input-checkbox:checked + .slider {
+    background-color: var(--toggle-slider-checked-color, #18181b);
+  }
+
+  .input-checkbox:focus + .slider {
+    box-shadow: var(--toggle-slider-focus-shadow, 0 0 1px currentColor);
+  }
+
+  .input-checkbox:checked + .slider:before {
+    -webkit-transform: translateX(19px);
+    -ms-transform: translateX(19px);
+    transform: translateX(19px);
+  }
+
+  .slider.round {
+    border-radius: var(--toggle-slider-border-radius, 23px);
+  }
+
+  .slider.round:before {
+    border-radius: var(--toggle-slider-border-radius-before, 50%);
+  }
+</style>

package/dist/Toggle/Toggle.svelte.d.ts

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

package/dist/Toggle/properties.d.ts

@@ -0,0 +1,9 @@
+export type ToggleProperties = ToggleEventProperties & {
+    checked?: boolean;
+    text: string;
+    testId?: string;
+    classes?: string;
+};
+export type ToggleEventProperties = {
+    onclick?: (checked: boolean) => void;
+};

package/dist/Toggle/properties.js

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