@hkdigital/lib-sveltekit 0.2.8 → 0.2.9

package/dist/features/button-group/ButtonGroup.svelte

@@ -1,82 +1,82 @@
-<script>
-  /**
-   * ButtonGroup component
-   * A group of toggle buttons where only one can be active at
-   * a time.
-   */
-
-  import { onMount } from 'svelte';
-  import { findFirst } from '../../util/array/index.js';
-
-  /**
-   * @type {{
-   *   base?: string,
-   *   bg?: string,
-   *   classes?: string,
-   *   buttons: Array<import('./typedef.js').ButtonDef>,
-   *   selected?: (import('./typedef.js').ButtonDef|null),
-   *   select?: ( label:string ) => void,
-   *   buttonSnippet: import('svelte').Snippet<[{text: string, value: string, label: string, props: Object}]>,
-   *   [attr: string]: any
-   * }}
-   */
-  let {
-    base = '',
-    bg = '',
-    classes = '',
-    buttons = [],
-    selected = $bindable(null),
-    select = $bindable(),
-    buttonSnippet,
-    ...attrs
-  } = $props();
-
-  let selectedIndex = $state(-1);
-
-  /**
-   * Handle button selection
-   */
-  function handleSelect(index) {
-    if (!buttons[index].props?.disabled) {
-      selectedIndex = index;
-      selected = buttons[selectedIndex] ?? null;
-    }
-  }
-
-  function handleSelectByLabel(label) {
-    for (let j = 0; j < buttons.length; j = j + 1) {
-      if (buttons[j].label === label) {
-        selectedIndex = j;
-        selected = buttons[j] ?? null;
-        break;
-      }
-    }
-  }
-
-  onMount(() => {
-    select = handleSelectByLabel;
-  });
-</script>
-
-<div
-  data-component="button-group"
-  class="{base} {bg} {classes} flex"
-  role="group"
-  aria-label="Button group"
-  {...attrs}
->
-  {#each buttons as button, index}
-    {#if !button.hide}
-      {@render buttonSnippet?.({
-        text: button.text,
-        value: button.value,
-        label: button.label,
-        props: {
-          ...(button.props || {}),
-          selected: index === selectedIndex,
-          onclick: () => handleSelect(index)
-        }
-      })}
-    {/if}
-  {/each}
-</div>
+<script>
+  /**
+   * ButtonGroup component
+   * A group of toggle buttons where only one can be active at
+   * a time.
+   */
+
+  import { onMount } from 'svelte';
+  import { findFirst } from '../../util/array/index.js';
+
+  /**
+   * @type {{
+   *   base?: string,
+   *   bg?: string,
+   *   classes?: string,
+   *   buttons: Array<import('./typedef.js').ButtonDef>,
+   *   selected?: (import('./typedef.js').ButtonDef|null),
+   *   select?: ( label:string ) => void,
+   *   buttonSnippet: import('svelte').Snippet<[{text: string, value: string, label: string, props: Object}]>,
+   *   [attr: string]: any
+   * }}
+   */
+  let {
+    base = '',
+    bg = '',
+    classes = '',
+    buttons = [],
+    selected = $bindable(null),
+    select = $bindable(),
+    buttonSnippet,
+    ...attrs
+  } = $props();
+
+  let selectedIndex = $state(-1);
+
+  /**
+   * Handle button selection
+   */
+  function handleSelect(index) {
+    if (!buttons[index].props?.disabled) {
+      selectedIndex = index;
+      selected = buttons[selectedIndex] ?? null;
+    }
+  }
+
+  function handleSelectByLabel(label) {
+    for (let j = 0; j < buttons.length; j = j + 1) {
+      if (buttons[j].label === label) {
+        selectedIndex = j;
+        selected = buttons[j] ?? null;
+        break;
+      }
+    }
+  }
+
+  onMount(() => {
+    select = handleSelectByLabel;
+  });
+</script>
+
+<div
+  data-component="button-group"
+  class="{base} {bg} {classes} flex"
+  role="group"
+  aria-label="Button group"
+  {...attrs}
+>
+  {#each buttons as button, index}
+    {#if !button.hide}
+      {@render buttonSnippet?.({
+        text: button.text,
+        value: button.value,
+        label: button.label,
+        props: {
+          ...(button.props || {}),
+          selected: index === selectedIndex,
+          onclick: () => handleSelect(index)
+        }
+      })}
+    {/if}
+  {/each}
+</div>

package/dist/features/button-group/typedef.js

@@ -1,10 +1,10 @@
-/**
- * @typedef {{
- *   text?: string,
- *   value?: any,
- *   label?: string,
- *   hide?: boolean,
- *   props?: Object}} ButtonDef
- */
-
-export {};
+/**
+ * @typedef {{
+ *   text?: string,
+ *   value?: any,
+ *   label?: string,
+ *   hide?: boolean,
+ *   props?: Object}} ButtonDef
+ */
+
+export {};

package/dist/features/compare-left-right/CompareLeftRight.svelte

@@ -1,179 +1,179 @@
-<script>
-  /** @type {HTMLElement | null} */
-  let container = $state(null);
-  let isMouseDown = $state(false);
-  let position = $state(50);
-
-  /** @type {{
-    leftContent?: import('svelte').Snippet,
-    rightContent?: import('svelte').Snippet,
-    classes?: string,
-    dividerColor?: string,
-    handleColor?: string
-  } & Record<string, any>} */
-  let {
-    width='w-[100vw]',
-    height='aspect-video',
-    border='border border-surface-500',
-    classes = '',
-    dividerColor = 'bg-surface-500',
-    handleColor = 'bg-surface-700',
-
-    // Snippets
-    leftContent,
-    rightContent,
-    ...attrs
-  } = $props();
-
-  const leftStyle = $derived(`clip-path: inset(0 ${100 - position}% 0 0)`);
-  const rightStyle = $derived(`clip-path: inset(0 0 0 ${position}%)`);
-  const dividerStyle = $derived(`left: ${position}%`);
-
-  /**
-   * Updates the position with keyboard navigation
-   * @param {number} newPosition - The new position to set
-   */
-  function updatePosition(newPosition) {
-    position = Math.max(0, Math.min(100, newPosition));
-  }
-
-  /**
-   * Handles the mouse down event on the divider
-   * @param {MouseEvent} event - The mouse event
-   */
-  function handleMouseDown(event) {
-    event.preventDefault();
-    isMouseDown = true;
-  }
-
-  /**
-   * Updates the divider position based on mouse movement
-   * @param {MouseEvent} event - The mouse event
-   */
-  function handleMouseMove(event) {
-    if (!isMouseDown || !container) return;
-
-    const rect = container.getBoundingClientRect();
-    const x = Math.min(Math.max(0, event.clientX - rect.left), rect.width);
-    updatePosition((x / rect.width) * 100);
-  }
-
-  /**
-   * Handles keyboard navigation for the slider
-   * @param {KeyboardEvent} event - The keyboard event
-   */
-  function handleKeyDown(event) {
-    const step = event.shiftKey ? 10 : 1;
-
-    switch (event.key) {
-      case 'ArrowLeft':
-      case 'ArrowDown':
-        event.preventDefault();
-        updatePosition(position - step);
-        break;
-      case 'ArrowRight':
-      case 'ArrowUp':
-        event.preventDefault();
-        updatePosition(position + step);
-        break;
-      case 'Home':
-        event.preventDefault();
-        updatePosition(0);
-        break;
-      case 'End':
-        event.preventDefault();
-        updatePosition(100);
-        break;
-      case 'PageDown':
-        event.preventDefault();
-        updatePosition(position - 10);
-        break;
-      case 'PageUp':
-        event.preventDefault();
-        updatePosition(position + 10);
-        break;
-    }
-  }
-
-  /**
-   * Resets the mouse down state
-   */
-  function handleMouseUp() {
-    isMouseDown = false;
-  }
-
-  // Effect to handle document-level mouse events
-  $effect(() => {
-    if (isMouseDown) {
-      document.addEventListener('mousemove', handleMouseMove);
-      document.addEventListener('mouseup', handleMouseUp);
-    }
-
-    return () => {
-      document.removeEventListener('mousemove', handleMouseMove);
-      document.removeEventListener('mouseup', handleMouseUp);
-    };
-  });
-</script>
-
-<div
-  bind:this={container}
-  class="relative {width} {height} {border} {classes}"
-  role="group"
-  aria-label="Content comparison"
-  {...attrs}
->
-  <!-- Content container - both pieces of content are positioned absolutely -->
-  <div class="relative h-full w-full">
-    <!-- Left content -->
-    <div
-      class="absolute h-full w-full"
-      style={leftStyle}
-    >
-      {@render leftContent()}
-    </div>
-
-    <!-- Right content -->
-    <div
-      class="absolute h-full w-full"
-      style={rightStyle}
-    >
-      {@render rightContent()}
-    </div>
-  </div>
-
-  <!-- Slider control -->
-  <div
-    class="absolute inset-y-0 z-10 flex w-1 items-center justify-center {dividerColor}"
-    style={dividerStyle}
-  >
-    <!-- Vertical separator line -->
-    <div class="absolute inset-y-0 w-0.5 bg-current opacity-50 pointer-events-none"></div>
-
-    <button
-      class="flex h-10 w-10 items-center justify-center rounded-full shadow-lg transition-transform {handleColor}"
-      onmousedown={handleMouseDown}
-      onkeydown={handleKeyDown}
-      role="slider"
-      aria-orientation="vertical"
-      aria-valuenow={position}
-      aria-valuemin={0}
-      aria-valuemax={100}
-      aria-label="Adjust divider position"
-    >
-      <svg
-        class="h-6 w-6 stroke-surface-50"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <path d="M7 16l-4-4 4-4" />
-        <path d="M17 8l4 4-4 4" />
-        <path d="M3 12h18" />
-      </svg>
-    </button>
-  </div>
-</div>
+<script>
+  /** @type {HTMLElement | null} */
+  let container = $state(null);
+  let isMouseDown = $state(false);
+  let position = $state(50);
+
+  /** @type {{
+    leftContent?: import('svelte').Snippet,
+    rightContent?: import('svelte').Snippet,
+    classes?: string,
+    dividerColor?: string,
+    handleColor?: string
+  } & Record<string, any>} */
+  let {
+    width='w-[100vw]',
+    height='aspect-video',
+    border='border border-surface-500',
+    classes = '',
+    dividerColor = 'bg-surface-500',
+    handleColor = 'bg-surface-700',
+
+    // Snippets
+    leftContent,
+    rightContent,
+    ...attrs
+  } = $props();
+
+  const leftStyle = $derived(`clip-path: inset(0 ${100 - position}% 0 0)`);
+  const rightStyle = $derived(`clip-path: inset(0 0 0 ${position}%)`);
+  const dividerStyle = $derived(`left: ${position}%`);
+
+  /**
+   * Updates the position with keyboard navigation
+   * @param {number} newPosition - The new position to set
+   */
+  function updatePosition(newPosition) {
+    position = Math.max(0, Math.min(100, newPosition));
+  }
+
+  /**
+   * Handles the mouse down event on the divider
+   * @param {MouseEvent} event - The mouse event
+   */
+  function handleMouseDown(event) {
+    event.preventDefault();
+    isMouseDown = true;
+  }
+
+  /**
+   * Updates the divider position based on mouse movement
+   * @param {MouseEvent} event - The mouse event
+   */
+  function handleMouseMove(event) {
+    if (!isMouseDown || !container) return;
+
+    const rect = container.getBoundingClientRect();
+    const x = Math.min(Math.max(0, event.clientX - rect.left), rect.width);
+    updatePosition((x / rect.width) * 100);
+  }
+
+  /**
+   * Handles keyboard navigation for the slider
+   * @param {KeyboardEvent} event - The keyboard event
+   */
+  function handleKeyDown(event) {
+    const step = event.shiftKey ? 10 : 1;
+
+    switch (event.key) {
+      case 'ArrowLeft':
+      case 'ArrowDown':
+        event.preventDefault();
+        updatePosition(position - step);
+        break;
+      case 'ArrowRight':
+      case 'ArrowUp':
+        event.preventDefault();
+        updatePosition(position + step);
+        break;
+      case 'Home':
+        event.preventDefault();
+        updatePosition(0);
+        break;
+      case 'End':
+        event.preventDefault();
+        updatePosition(100);
+        break;
+      case 'PageDown':
+        event.preventDefault();
+        updatePosition(position - 10);
+        break;
+      case 'PageUp':
+        event.preventDefault();
+        updatePosition(position + 10);
+        break;
+    }
+  }
+
+  /**
+   * Resets the mouse down state
+   */
+  function handleMouseUp() {
+    isMouseDown = false;
+  }
+
+  // Effect to handle document-level mouse events
+  $effect(() => {
+    if (isMouseDown) {
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+    }
+
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+  });
+</script>
+
+<div
+  bind:this={container}
+  class="relative {width} {height} {border} {classes}"
+  role="group"
+  aria-label="Content comparison"
+  {...attrs}
+>
+  <!-- Content container - both pieces of content are positioned absolutely -->
+  <div class="relative h-full w-full">
+    <!-- Left content -->
+    <div
+      class="absolute h-full w-full"
+      style={leftStyle}
+    >
+      {@render leftContent()}
+    </div>
+
+    <!-- Right content -->
+    <div
+      class="absolute h-full w-full"
+      style={rightStyle}
+    >
+      {@render rightContent()}
+    </div>
+  </div>
+
+  <!-- Slider control -->
+  <div
+    class="absolute inset-y-0 z-10 flex w-1 items-center justify-center {dividerColor}"
+    style={dividerStyle}
+  >
+    <!-- Vertical separator line -->
+    <div class="absolute inset-y-0 w-0.5 bg-current opacity-50 pointer-events-none"></div>
+
+    <button
+      class="flex h-10 w-10 items-center justify-center rounded-full shadow-lg transition-transform {handleColor}"
+      onmousedown={handleMouseDown}
+      onkeydown={handleKeyDown}
+      role="slider"
+      aria-orientation="vertical"
+      aria-valuenow={position}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-label="Adjust divider position"
+    >
+      <svg
+        class="h-6 w-6 stroke-surface-50"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M7 16l-4-4 4-4" />
+        <path d="M17 8l4 4-4 4" />
+        <path d="M3 12h18" />
+      </svg>
+    </button>
+  </div>
+</div>

package/dist/features/compare-left-right/index.js

@@ -1 +1 @@
-export { default as CompareLeftRight } from "./CompareLeftRight.svelte";
+export { default as CompareLeftRight } from "./CompareLeftRight.svelte";