polymorph-ui-components 0.1.0 → 0.4.0

package/dist/ChatToolStatus/ChatToolStatus.svelte.d.ts

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

package/dist/ChatToolStatus/properties.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+export type ChatToolStatusProperties = OptionalChatToolStatusProperties & MandatoryChatToolStatusProperties;
+export type MandatoryChatToolStatusProperties = {
+    label: string;
+};
+export type OptionalChatToolStatusProperties = {
+    icon?: Snippet;
+    testId?: string;
+    classes?: string;
+};

package/dist/ChatToolStatus/properties.js

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

package/dist/Draggable/Draggable.svelte

@@ -0,0 +1,169 @@
+<script lang="ts">
+  import type { DraggableProperties, DragPosition } from './properties';
+
+  let {
+    x = $bindable(0),
+    y = $bindable(0),
+    axis = 'both',
+    handle,
+    bounds = null,
+    disabled = false,
+    step = 16,
+    dragLabel = 'Drag to move',
+    children,
+    ondragstart,
+    ondrag,
+    ondragend,
+    testId,
+    classes
+  }: DraggableProperties = $props();
+
+  let active: {
+    pointerId: number;
+    startX: number;
+    startY: number;
+    baseX: number;
+    baseY: number;
+  } | null = $state(null);
+
+  function isInteractive(target: EventTarget | null): boolean {
+    return (
+      target instanceof Element &&
+      target.closest('input, textarea, select, button, a, [contenteditable="true"]') !== null
+    );
+  }
+
+  function withinHandle(target: EventTarget | null): boolean {
+    if (typeof handle !== 'string' || handle.length === 0) {
+      return !isInteractive(target);
+    }
+    return target instanceof Element && target.closest(handle) !== null;
+  }
+
+  function clamp(node: HTMLElement, nextX: number, nextY: number): DragPosition {
+    if (bounds !== 'viewport' || typeof window === 'undefined') {
+      return { x: nextX, y: nextY };
+    }
+    const rect = node.getBoundingClientRect();
+    let resultX = nextX;
+    let resultY = nextY;
+    if (rect.left + (nextX - x) < 0) {
+      resultX = x - rect.left;
+    } else if (rect.right + (nextX - x) > window.innerWidth) {
+      resultX = x + (window.innerWidth - rect.right);
+    }
+    if (rect.top + (nextY - y) < 0) {
+      resultY = y - rect.top;
+    } else if (rect.bottom + (nextY - y) > window.innerHeight) {
+      resultY = y + (window.innerHeight - rect.bottom);
+    }
+    return { x: resultX, y: resultY };
+  }
+
+  function startDrag(event: PointerEvent & { currentTarget: HTMLElement }): void {
+    if (disabled || !withinHandle(event.target)) {
+      return;
+    }
+    event.preventDefault();
+    active = {
+      pointerId: event.pointerId,
+      startX: event.clientX,
+      startY: event.clientY,
+      baseX: x,
+      baseY: y
+    };
+    event.currentTarget.setPointerCapture(event.pointerId);
+    ondragstart?.({ x, y });
+  }
+
+  function moveDrag(event: PointerEvent & { currentTarget: HTMLElement }): void {
+    if (active === null) {
+      return;
+    }
+    const nextX = axis === 'y' ? x : active.baseX + (event.clientX - active.startX);
+    const nextY = axis === 'x' ? y : active.baseY + (event.clientY - active.startY);
+    const clamped = clamp(event.currentTarget, nextX, nextY);
+    x = clamped.x;
+    y = clamped.y;
+    ondrag?.({ x, y });
+  }
+
+  function endDrag(event: PointerEvent & { currentTarget: HTMLElement }): void {
+    if (active === null) {
+      return;
+    }
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+    active = null;
+    ondragend?.({ x, y });
+  }
+
+  function keyDrag(event: KeyboardEvent & { currentTarget: HTMLElement }): void {
+    if (disabled || event.target !== event.currentTarget) {
+      return;
+    }
+    let nextX = x;
+    let nextY = y;
+    let moved = false;
+    if (axis !== 'y' && event.key === 'ArrowLeft') {
+      nextX = x - step;
+      moved = true;
+    } else if (axis !== 'y' && event.key === 'ArrowRight') {
+      nextX = x + step;
+      moved = true;
+    } else if (axis !== 'x' && event.key === 'ArrowUp') {
+      nextY = y - step;
+      moved = true;
+    } else if (axis !== 'x' && event.key === 'ArrowDown') {
+      nextY = y + step;
+      moved = true;
+    }
+    if (moved) {
+      event.preventDefault();
+      const clamped = clamp(event.currentTarget, nextX, nextY);
+      x = clamped.x;
+      y = clamped.y;
+      ondrag?.({ x, y });
+    }
+  }
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+  class="draggable {classes ?? ''}"
+  class:dragging={active !== null}
+  data-pw={testId}
+  tabindex={disabled ? -1 : 0}
+  aria-label={dragLabel}
+  style:transform={`translate(${x}px, ${y}px)`}
+  onpointerdown={startDrag}
+  onpointermove={moveDrag}
+  onpointerup={endDrag}
+  onkeydown={keyDrag}
+>
+  {#if typeof children === 'function'}
+    {@render children()}
+  {/if}
+</div>
+
+<style>
+  .draggable {
+    box-sizing: border-box;
+    width: var(--draggable-width, fit-content);
+    height: var(--draggable-height, fit-content);
+    cursor: var(--draggable-cursor, grab);
+    touch-action: none;
+  }
+
+  .draggable.dragging {
+    cursor: var(--draggable-cursor-active, grabbing);
+    user-select: none;
+  }
+
+  .draggable:focus-visible {
+    outline: var(--draggable-focus-outline, 2px solid #3b5bdb);
+    outline-offset: var(--draggable-focus-outline-offset, 2px);
+  }
+</style>

package/dist/Draggable/Draggable.svelte.d.ts

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

package/dist/Draggable/properties.d.ts

@@ -0,0 +1,25 @@
+import type { Snippet } from 'svelte';
+export type DragAxis = 'both' | 'x' | 'y';
+export type DragPosition = {
+    x: number;
+    y: number;
+};
+export type DraggableProperties = OptionalDraggableProperties & DraggableEventProperties;
+export type OptionalDraggableProperties = {
+    x?: number;
+    y?: number;
+    axis?: DragAxis;
+    handle?: string;
+    bounds?: 'viewport' | null;
+    disabled?: boolean;
+    step?: number;
+    dragLabel?: string;
+    children?: Snippet;
+    testId?: string;
+    classes?: string;
+};
+export type DraggableEventProperties = {
+    ondragstart?: (position: DragPosition) => void;
+    ondrag?: (position: DragPosition) => void;
+    ondragend?: (position: DragPosition) => void;
+};

package/dist/Draggable/properties.js

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

package/dist/MediaPlayer/MediaPlayer.svelte

@@ -0,0 +1,245 @@
+<script lang="ts">
+  import Button from '../Button/Button.svelte';
+  import Img from '../Img/Img.svelte';
+  import playSvg from '../assets/play.svg?raw';
+  import pauseSvg from '../assets/pause.svg?raw';
+  import volumeSvg from '../assets/volume.svg?raw';
+  import muteSvg from '../assets/mute.svg?raw';
+  import type { MediaPlayerProperties } from './properties';
+
+  let {
+    src,
+    type,
+    alt = '',
+    autoplay = true,
+    loop = false,
+    controls = false,
+    fallback,
+    playing = $bindable(true),
+    muted = $bindable(true),
+    playIcon,
+    pauseIcon,
+    muteIcon,
+    unmuteIcon,
+    onplay,
+    onpause,
+    onvolumechange,
+    testId,
+    classes
+  }: MediaPlayerProperties = $props();
+
+  let videoPlayer: HTMLVideoElement | null = $state(null);
+
+  function togglePlayback(): void {
+    if (videoPlayer === null) {
+      return;
+    }
+    if (videoPlayer.paused) {
+      videoPlayer.play();
+    } else {
+      videoPlayer.pause();
+    }
+  }
+
+  function toggleMute(): void {
+    muted = !muted;
+    onvolumechange?.(muted);
+  }
+
+  function handlePlay(event: Event): void {
+    playing = true;
+    onplay?.(event);
+  }
+
+  function handlePause(event: Event): void {
+    playing = false;
+    onpause?.(event);
+  }
+
+  function handleVideoKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      togglePlayback();
+    }
+  }
+</script>
+
+<div class="media-player {classes ?? ''}" data-pw={testId}>
+  {#if type === 'image'}
+    <span class="media-image">
+      <Img {src} {alt} {fallback} />
+    </span>
+  {:else}
+    <video
+      bind:this={videoPlayer}
+      bind:muted
+      {src}
+      class="media"
+      {controls}
+      {autoplay}
+      {loop}
+      playsinline
+      onplay={handlePlay}
+      onpause={handlePause}
+      onclick={togglePlayback}
+      onkeydown={handleVideoKeydown}
+      role="button"
+      tabindex="0"
+      aria-label={playing ? 'Pause video' : 'Play video'}
+    >
+      <track kind="captions" />
+    </video>
+
+    {#if !controls}
+      <div class="overlay">
+        <div class="center-controls">
+          <div class="control center-control">
+            <Button onclick={togglePlayback} ariaLabel={playing ? 'Pause video' : 'Play video'}>
+              {#if playing}
+                {#if typeof pauseIcon === 'function'}
+                  {@render pauseIcon()}
+                {:else}
+                  <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                  {@html pauseSvg}
+                {/if}
+              {:else if typeof playIcon === 'function'}
+                {@render playIcon()}
+              {:else}
+                <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                {@html playSvg}
+              {/if}
+            </Button>
+          </div>
+        </div>
+        <div class="bottom-controls">
+          <div class="control bottom-control">
+            <Button onclick={toggleMute} ariaLabel={muted ? 'Unmute' : 'Mute'}>
+              {#if muted}
+                {#if typeof muteIcon === 'function'}
+                  {@render muteIcon()}
+                {:else}
+                  <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                  {@html muteSvg}
+                {/if}
+              {:else if typeof unmuteIcon === 'function'}
+                {@render unmuteIcon()}
+              {:else}
+                <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                {@html volumeSvg}
+              {/if}
+            </Button>
+          </div>
+        </div>
+      </div>
+    {/if}
+  {/if}
+</div>
+
+<style>
+  .media-player {
+    box-sizing: border-box;
+    display: flex;
+    position: relative;
+    height: var(--media-player-height, 400px);
+    width: var(--media-player-width, fit-content);
+    border-radius: var(--media-player-border-radius, 14px);
+    overflow: var(--media-player-overflow, hidden);
+    background: var(--media-player-background, transparent);
+  }
+
+  .media {
+    height: var(--media-player-media-height, 100%);
+    width: var(--media-player-media-width, fit-content);
+    object-fit: var(--media-player-media-object-fit, contain);
+    border-radius: var(--media-player-media-border-radius, inherit);
+    display: block;
+  }
+
+  video.media {
+    cursor: var(--media-player-media-cursor, pointer);
+  }
+
+  .media-image {
+    display: contents;
+    --image-height: var(--media-player-media-height, 100%);
+    --image-width: var(--media-player-media-width, fit-content);
+    --image-object-fit: var(--media-player-media-object-fit, contain);
+    --image-border-radius: var(--media-player-media-border-radius, 0px);
+    --image-padding: 0px;
+    --image-margin: 0px;
+  }
+
+  .overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    box-sizing: border-box;
+    z-index: var(--media-player-overlay-z-index, 20);
+    border-radius: inherit;
+    background-color: var(--media-player-overlay-color, transparent);
+    transition: var(--media-player-overlay-transition, background-color 0.2s ease);
+    --center-controls-visibility: var(--media-player-center-controls-visibility, hidden);
+    --bottom-controls-visibility: var(--media-player-bottom-controls-visibility, hidden);
+  }
+
+  .overlay:hover {
+    background-color: var(--media-player-overlay-hover-color, #0000004d);
+    --center-controls-visibility: visible;
+    --bottom-controls-visibility: visible;
+  }
+
+  .center-controls {
+    display: flex;
+    flex: 1;
+    justify-content: center;
+    align-items: center;
+    visibility: var(--center-controls-visibility);
+  }
+
+  .bottom-controls {
+    display: flex;
+    width: 100%;
+    height: fit-content;
+    justify-content: var(--media-player-bottom-controls-justify, flex-end);
+    box-sizing: border-box;
+    padding: var(--media-player-bottom-controls-padding, 12px);
+    visibility: var(--bottom-controls-visibility);
+  }
+
+  .control {
+    --button-padding: var(--media-player-control-padding, 0px);
+    --button-border: var(--media-player-control-border, none);
+    --button-border-radius: var(--media-player-control-border-radius, 50%);
+    --button-color: var(--media-player-control-background-color, transparent);
+    --button-text-color: var(--media-player-control-color, #ffffff);
+    --button-content-gap: 0px;
+    --button-hover-color: var(
+      --media-player-control-hover-background-color,
+      var(--media-player-control-background-color, transparent)
+    );
+    --button-hover-text-color: var(
+      --media-player-control-hover-color,
+      var(--media-player-control-color, #ffffff)
+    );
+  }
+
+  .center-control {
+    --button-width: var(--media-player-center-control-size, 64px);
+    --button-height: var(--media-player-center-control-size, 64px);
+  }
+
+  .bottom-control {
+    --button-width: var(--media-player-bottom-control-size, 24px);
+    --button-height: var(--media-player-bottom-control-size, 24px);
+  }
+
+  .control :global(svg),
+  .control :global(img) {
+    height: var(--media-player-control-icon-size, 100%);
+    width: var(--media-player-control-icon-size, 100%);
+    object-fit: contain;
+  }
+</style>

package/dist/MediaPlayer/MediaPlayer.svelte.d.ts

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

package/dist/MediaPlayer/properties.d.ts

@@ -0,0 +1,27 @@
+import type { Snippet } from 'svelte';
+export type MediaPlayerProperties = OptionalMediaPlayerProperties & MediaPlayerEventProperties & MandatoryMediaPlayerProperties;
+export type MediaType = 'image' | 'video';
+export type MandatoryMediaPlayerProperties = {
+    src: string;
+    type: MediaType;
+};
+export type OptionalMediaPlayerProperties = {
+    alt?: string;
+    fallback?: string;
+    autoplay?: boolean;
+    loop?: boolean;
+    controls?: boolean;
+    playing?: boolean;
+    muted?: boolean;
+    playIcon?: Snippet;
+    pauseIcon?: Snippet;
+    muteIcon?: Snippet;
+    unmuteIcon?: Snippet;
+    testId?: string;
+    classes?: string;
+};
+export type MediaPlayerEventProperties = {
+    onplay?: (event: Event) => void;
+    onpause?: (event: Event) => void;
+    onvolumechange?: (muted: boolean) => void;
+};

package/dist/MediaPlayer/properties.js

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