@hkdigital/lib-core 0.3.1

package/dist/design/tailwind-theme-extend.js

@@ -0,0 +1,158 @@
+/**
+ * Design System Configuration
+ * Using CSS Custom Properties (variables) for consistent scaling
+ *
+ * @note
+ * The tailwind theme extensions require CSS custom
+ * properties (variables) to be set at the root level
+ * of your application to function properly.
+ *
+ * @example Implementation in SvelteKit +layout.svelte
+ * <script>
+ *   import { onMount } from 'svelte';
+ *
+ *   import '../app.css';
+ *
+ *   let { children } = $props();
+ *
+ *   import { DESIGN, CLAMPING }
+ *     from './design-config.js';
+ *
+ *   import { rootDesignVarsHTML }
+ *     from '@hkdigital/lib-sveltekit/util/design-system/index.js';
+ * </script>
+ *
+ * <svelte:head>
+ *   {@html rootDesignVarsHTML(DESIGN, CLAMPING)}
+ * </svelte:head>
+ *
+ * Base units:
+ * --scale-w: 0.052vw  (Viewport Width Point)
+ * --scale-h: 0.09259vh (Viewport Height Point)
+ * --scale-viewport: min(var(--scale-w), var(--scale-h)) (Viewport Point)
+ * --scale-ui: clamp(0.3, var(--scale-viewport), 2) (UI Point)
+ * --scale-text-base: clamp(0.75, var(--scale-viewport), 1.5) (Base Text)
+ * --scale-text-heading: clamp(0.75, var(--scale-viewport), 2.25) (Heading Text)
+ * --scale-text-ui: clamp(0.5, var(--scale-viewport), 1.25) (UI Text)
+ *
+ * --
+ *
+ * UI Points (up) - Clamped scaling values
+ * Based on viewport scaling with minimum and maximum bounds
+ * to ensure usability across all screen sizes
+ *
+ * > PREFERRED METHOD FOR UI ELEMENT SCALING
+ *
+ * Examples:
+ * 5up  = 5px  at design size (clamps between 1.5px and 10px)
+ * 10up = 10px at design size (clamps between 3px and 20px)
+ * 20up = 20px at design size (clamps between 6px and 40px)
+ *
+ * Used for:
+ * - Component padding and margins
+ * - Interface element sizing
+ * - Any UI element that needs responsive scaling with guardrails
+ *
+ * --
+ *
+ * Text-Based Spacing Units (ut, bt, ht)
+ * Scaled by their respective text scaling variables
+ *
+ * > PREFERRED METHOD FOR TEXT-RELATED SPACING
+ *
+ * Examples:
+ * 4ut = calc(4px * var(--scale-text-ui))       // UI text spacing
+ * 4bt = calc(4px * var(--scale-text-base))  // Base text spacing
+ * 4ht = calc(4px * var(--scale-text-heading))  // Heading text spacing
+ *
+ * Used for:
+ * - ut: Button padding, form spacing, UI component margins
+ * - bt: Paragraph margins, list spacing, base gaps
+ * - ht: Heading margins, title spacing
+ *
+ * --
+ *
+ * Viewport Points (wp, hp) - Responsive scaling values
+ * wp: Uses width-based scaling (1920px reference)
+ * hp: Uses height-based scaling (1080px reference)
+ *
+ * > ALTERNATIVE SCALING METHODS
+ *
+ * Examples:
+ * 10wp = calc(10px * var(--scale-w))
+ * 10hp = calc(10px * var(--scale-h))
+ *
+ * Used for:
+ * - Interface scaling that needs to fit both width and height
+ * - Maintaining aspect ratio of design
+ * - Preventing overflow in either direction
+ */
+import {
+  generateTextBasedSpacing,
+  generateViewportBasedSpacing,
+  generateTextStyles,
+  generateBorderRadiusStyles,
+  generateWidthStyles
+} from '../util/design-system/tailwind.js';
+
+import {
+  TEXT_POINT_SIZES,
+  VIEWPORT_POINT_SIZES,
+  TEXT_BASE_SIZES,
+  TEXT_HEADING_SIZES,
+  TEXT_UI_SIZES,
+  RADIUS_SIZES,
+  BORDER_WIDTH_SIZES,
+  STROKE_WIDTH_SIZES
+} from './design-config.js';
+
+/* == Internals */
+
+const TEXT_BASED_SPACING = generateTextBasedSpacing(TEXT_POINT_SIZES);
+const VIEWPORT_BASED_SPACING =
+  generateViewportBasedSpacing(VIEWPORT_POINT_SIZES);
+
+/* == Exports */
+
+export const spacing = {
+  ...VIEWPORT_BASED_SPACING,
+  ...TEXT_BASED_SPACING
+};
+
+export const fontSize = {
+  ...TEXT_BASED_SPACING,
+
+  // Named styles
+  ...generateTextStyles(TEXT_BASE_SIZES, 'base'),
+  ...generateTextStyles(TEXT_HEADING_SIZES, 'heading'),
+  ...generateTextStyles(TEXT_UI_SIZES, 'ui')
+};
+
+export const borderRadius = {
+  // Named styles
+  ...generateBorderRadiusStyles(RADIUS_SIZES)
+};
+
+export const borderWidth = {
+  // Named styles
+  ...generateWidthStyles(BORDER_WIDTH_SIZES, 'width')
+};
+
+export const strokeWidth = {
+  // Named styles
+  ...generateWidthStyles(STROKE_WIDTH_SIZES, 'width')
+};
+
+export const outlineWidth = {
+  // Named styles
+  ...generateWidthStyles(STROKE_WIDTH_SIZES, '')
+};
+
+export const outlineOffset = {
+  // Named styles
+  ...generateWidthStyles(STROKE_WIDTH_SIZES, '')
+};
+
+// console.log('borderWidth', borderWidth);
+// console.log('outlineWidth', outlineWidth);
+// console.log('outlineOffset', outlineOffset);

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

@@ -0,0 +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>

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

@@ -0,0 +1,34 @@
+export default ButtonGroup;
+type ButtonGroup = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        [attr: string]: any;
+        base?: string;
+        bg?: string;
+        classes?: string;
+        buttons: ButtonDef[];
+        selected?: ButtonDef;
+        select?: (label: string) => void;
+        buttonSnippet: Snippet<[{
+            text: string;
+            value: string;
+            label: string;
+            props: any;
+        }]>;
+    }>): void;
+};
+declare const ButtonGroup: import("svelte").Component<{
+    [attr: string]: any;
+    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: any;
+    }]>;
+}, {}, "select" | "selected">;

package/dist/features/button-group/typedef.d.ts

@@ -0,0 +1,7 @@
+export type ButtonDef = {
+    text?: string;
+    value?: any;
+    label?: string;
+    hide?: boolean;
+    props?: any;
+};

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

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

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

@@ -0,0 +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>

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

@@ -0,0 +1,18 @@
+export default CompareLeftRight;
+type CompareLeftRight = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        leftContent?: Snippet<[]>;
+        rightContent?: Snippet<[]>;
+        classes?: string;
+        dividerColor?: string;
+        handleColor?: string;
+    } & Record<string, any>>): void;
+};
+declare const CompareLeftRight: import("svelte").Component<{
+    leftContent?: import("svelte").Snippet;
+    rightContent?: import("svelte").Snippet;
+    classes?: string;
+    dividerColor?: string;
+    handleColor?: string;
+} & Record<string, any>, {}, "">;

package/dist/features/compare-left-right/index.d.ts

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

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

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