@hkdigital/lib-core 0.3.1

package/dist/components/area/HkArea.svelte.d.ts

@@ -0,0 +1,26 @@
+export default HkArea;
+type HkArea = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        base?: string;
+        bg?: string;
+        padding?: string;
+        margin?: string;
+        classes?: string;
+        style?: string;
+        children: Snippet<[]>;
+    } & {
+        [attr: string]: any;
+    }>): void;
+};
+declare const HkArea: import("svelte").Component<{
+    base?: string;
+    bg?: string;
+    padding?: string;
+    margin?: string;
+    classes?: string;
+    style?: string;
+    children: import("svelte").Snippet;
+} & {
+    [attr: string]: any;
+}, {}, "domElem">;

package/dist/components/area/HkGridArea.svelte

@@ -0,0 +1,77 @@
+<script>
+  /**
+   * Grid area component
+   * This component contains a DIV that has display: grid set. It is
+   * wrapped in a box which makes it possible to add box attributes
+   * such as margins.
+   *
+   * Following component guidelines from Skeleton
+   * @see https://next.skeleton.dev/docs/resources/contribute/components
+   */
+
+  import HkArea from './HkArea.svelte';
+
+  /**
+   * @type {{
+   *   base?: string,
+   *   bg?: string,
+   *   padding?: string,
+   *   margin?: string,
+   *   classes?: string,
+   *   style?: string,
+   *   boxBase?: string,
+   *   boxBg?: string,
+   *   boxPadding?: string,
+   *   boxMargin?: string,
+   *   boxClasses?: string,
+   *   boxAttrs?: { [attr: string]: * },
+   *   children: import('svelte').Snippet
+   * } & { [attr: string]: any }}
+   */
+  let {
+    // Style
+    base,
+    bg,
+    padding,
+    margin,
+    classes,
+    style,
+    boxBase,
+    boxBg,
+    boxPadding,
+    boxMargin,
+    boxClasses,
+    boxAttrs,
+
+    // Snippets
+    children,
+
+    // DOM Element's
+    domElem = $bindable(),
+    boxDomElem = $bindable(),
+
+    // Attributes
+    ...attrs
+  } = $props();
+</script>
+
+<div
+  data-hk-grid-area-box
+  class="{boxBase} {boxBg} {boxPadding} {boxMargin} {boxClasses}"
+  {...boxAttrs}
+  bind:this={boxDomElem}
+>
+  <HkArea
+    data-hk-grid-area
+    base="grid {base}"
+    bind:domElem
+    {bg}
+    {padding}
+    {margin}
+    {classes}
+    {style}
+    {...attrs}
+  >
+    {@render children()}
+  </HkArea>
+</div>

package/dist/components/area/HkGridArea.svelte.d.ts

@@ -0,0 +1,42 @@
+export default HkGridArea;
+type HkGridArea = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        base?: string;
+        bg?: string;
+        padding?: string;
+        margin?: string;
+        classes?: string;
+        style?: string;
+        boxBase?: string;
+        boxBg?: string;
+        boxPadding?: string;
+        boxMargin?: string;
+        boxClasses?: string;
+        boxAttrs?: {
+            [attr: string]: any;
+        };
+        children: Snippet<[]>;
+    } & {
+        [attr: string]: any;
+    }>): void;
+};
+declare const HkGridArea: import("svelte").Component<{
+    base?: string;
+    bg?: string;
+    padding?: string;
+    margin?: string;
+    classes?: string;
+    style?: string;
+    boxBase?: string;
+    boxBg?: string;
+    boxPadding?: string;
+    boxMargin?: string;
+    boxClasses?: string;
+    boxAttrs?: {
+        [attr: string]: any;
+    };
+    children: import("svelte").Snippet;
+} & {
+    [attr: string]: any;
+}, {}, "domElem" | "boxDomElem">;

package/dist/components/area/index.d.ts

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

package/dist/components/area/index.js

@@ -0,0 +1,2 @@
+export { default as HkArea } from './HkArea.svelte';
+export { default as HkGridArea } from './HkGridArea.svelte';

package/dist/components/buttons/button/Button.svelte

@@ -0,0 +1,82 @@
+<script>
+  import { toStateClasses } from '../../../util/design-system/index.js';
+
+  /**
+   * @type {{
+   *   base?: string,
+   *   bg?: string,
+   *   classes?: string,
+   *   type?: string,
+   *   role?: 'primary' | 'secondary' | 'tertiary' | 'custom',
+   *   size?: 'sm' | 'md' | 'lg',
+   *   variant?: string,
+   *   mode?: 'light'|'dark'
+   *   buttonType?: 'button' | 'submit' | 'reset',
+   *   active?: boolean,
+   *   selected?: boolean,
+   *   loading?: boolean,
+   *   error?: boolean,
+   *   disabled?: boolean,
+   *   snippetLoading?: import('svelte').Snippet,
+   *   snippetError?: import('svelte').Snippet,
+   *   children: import('svelte').Snippet,
+   *   [key: string]: any
+   * }}
+   */
+  const {
+    // Style
+    base,
+    bg,
+    classes,
+
+    type = '',
+    role = 'primary',
+    size = 'md',
+    variant = '',
+    mode = 'light',
+
+    buttonType = 'button',
+
+    // States
+    active = $bindable(false),
+    selected = $bindable(false),
+    loading = $bindable(false),
+    error = $bindable(false),
+    disabled = $bindable(false),
+
+    // Snippets
+    snippetLoading,
+    snippetError,
+    children,
+
+    // Attributes
+    ...attrs
+  } = $props();
+
+  let stateClasses = $derived.by(() => {
+    return toStateClasses({ active, selected, loading, error, disabled });
+  });
+</script>
+
+<button
+  data-component="button"
+  data-type={type}
+  data-role={role}
+  data-size={size}
+  data-variant={variant}
+  data-mode={mode}
+  type={buttonType}
+  class="{base} {bg} {classes} {stateClasses}"
+  disabled={disabled || loading}
+  aria-busy={loading}
+  aria-pressed={selected}
+  {...attrs}
+>
+  {#if loading && snippetLoading}
+    {@render snippetLoading()}
+  {:else if error && snippetError}
+    {@render snippetError()}
+  {:else}
+    {@render children()}
+  {/if}
+</button>

package/dist/components/buttons/button/Button.svelte.d.ts

@@ -0,0 +1,44 @@
+export default Button;
+type Button = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        [key: string]: any;
+        base?: string;
+        bg?: string;
+        classes?: string;
+        type?: string;
+        role?: "custom" | "primary" | "secondary" | "tertiary";
+        size?: "sm" | "md" | "lg";
+        variant?: string;
+        mode?: "light" | "dark";
+        buttonType?: "reset" | "submit" | "button";
+        active?: boolean;
+        selected?: boolean;
+        loading?: boolean;
+        error?: boolean;
+        disabled?: boolean;
+        snippetLoading?: Snippet<[]>;
+        snippetError?: Snippet<[]>;
+        children: Snippet<[]>;
+    }>): void;
+};
+declare const Button: import("svelte").Component<{
+    [key: string]: any;
+    base?: string;
+    bg?: string;
+    classes?: string;
+    type?: string;
+    role?: "primary" | "secondary" | "tertiary" | "custom";
+    size?: "sm" | "md" | "lg";
+    variant?: string;
+    mode?: "light" | "dark";
+    buttonType?: "button" | "submit" | "reset";
+    active?: boolean;
+    selected?: boolean;
+    loading?: boolean;
+    error?: boolean;
+    disabled?: boolean;
+    snippetLoading?: import("svelte").Snippet;
+    snippetError?: import("svelte").Snippet;
+    children: import("svelte").Snippet;
+}, {}, "error" | "loading" | "active" | "selected" | "disabled">;

package/dist/components/buttons/button-icon-steeze/SteezeIconButton.svelte

@@ -0,0 +1,30 @@
+<script>
+  import Button from '../button/Button.svelte';
+
+  import { SteezeIcon } from '../../icons/index.js';
+
+  /**
+   * @type {{
+   *   src: import('../../icons/typedef.js').IconSource,
+   *   iconSize?: string,
+   *   theme?: string,
+   *   [key: string]: any
+   * }}
+   */
+  const {
+    // Icon
+    src,
+    iconSize,
+    theme,
+
+    // Snippets
+    children,
+
+    // Attributes
+    ...attrs
+  } = $props();
+</script>
+
+<Button type="icon-steeze" {...attrs}>
+  <SteezeIcon {src} size={iconSize} {theme} />
+</Button>

package/dist/components/buttons/button-icon-steeze/SteezeIconButton.svelte.d.ts

@@ -0,0 +1,16 @@
+export default SteezeIconButton;
+type SteezeIconButton = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        [key: string]: any;
+        src: IconSource;
+        iconSize?: string;
+        theme?: string;
+    }>): void;
+};
+declare const SteezeIconButton: import("svelte").Component<{
+    [key: string]: any;
+    src: import("../../icons/typedef.js").IconSource;
+    iconSize?: string;
+    theme?: string;
+}, {}, "">;

package/dist/components/buttons/button-text/TextButton.svelte

@@ -0,0 +1,21 @@
+<script>
+  import Button from '../button/Button.svelte';
+
+  /**
+   * @type {{
+   *   children: import('svelte').Snippet,
+   *   [key: string]: any
+   * }}
+   */
+  const {
+    // Snippets
+    children,
+
+    // Attributes
+    ...attrs
+  } = $props();
+</script>
+
+<Button type="text" {...attrs}>
+  {@render children()}
+</Button>

package/dist/components/buttons/button-text/TextButton.svelte.d.ts

@@ -0,0 +1,12 @@
+export default TextButton;
+type TextButton = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        [key: string]: any;
+        children: Snippet<[]>;
+    }>): void;
+};
+declare const TextButton: import("svelte").Component<{
+    [key: string]: any;
+    children: import("svelte").Snippet;
+}, {}, "">;

package/dist/components/buttons/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Button } from "./button/Button.svelte";
+export { default as TextButton } from "./button-text/TextButton.svelte";
+export { default as SteezeIconButton } from "./button-icon-steeze/SteezeIconButton.svelte";

package/dist/components/buttons/index.js

@@ -0,0 +1,3 @@
+export { default as Button } from './button/Button.svelte';
+export { default as TextButton } from './button-text/TextButton.svelte';
+export { default as SteezeIconButton } from './button-icon-steeze/SteezeIconButton.svelte';

package/dist/components/debug/debug-panel-design-scaling/DebugPanelDesignScaling.svelte

@@ -0,0 +1,146 @@
+<script>
+  import { onMount } from 'svelte';
+  import { DESIGN, CLAMPING } from '../../../design/design-config.js';
+  import {
+    enableScalingUI,
+    getAllRootScalingVars
+  } from '../../../util/design-system/index.js';
+
+  /**
+   * Holds the current scaling values for the debug panel
+   * @type {Object}
+   */
+  let scalingValues = $state({
+    scaleW: 0,
+    scaleH: 0,
+    scaleViewport: 0,
+    scaleUI: 0,
+    scaleTextBase: 0,
+    scaleTextHeading: 0,
+    scaleTextUI: 0
+  });
+
+  /**
+   * Controls visibility of the debug panel
+   */
+  let showDebugPanel = $state(false);
+
+  /**
+   * Updates scaling values for the debug panel
+   */
+  function updateDebugValues() {
+    // Get scaling values
+    scalingValues = getAllRootScalingVars();
+
+    // Update window size display if in browser context
+    if (typeof window !== 'undefined') {
+      const windowSizeElement = document.getElementById('window-size');
+      if (windowSizeElement) {
+        windowSizeElement.textContent = `${window.innerWidth}×${window.innerHeight}px`;
+      }
+    }
+  }
+
+  onMount(() => {
+    // Initialize the design scaling system
+    //const cleanup = () => {};
+    const cleanup = enableScalingUI(DESIGN, CLAMPING);
+
+    // Update debug values initially
+    updateDebugValues();
+
+    // Set up event listener for updating debug values on resize
+    window.addEventListener('resize', updateDebugValues);
+
+    // Return combined cleanup function
+    return () => {
+      cleanup();
+      window.removeEventListener('resize', updateDebugValues);
+    };
+  });
+
+  /**
+   * Toggle debug panel visibility
+   */
+  function toggleDebugPanel() {
+    showDebugPanel = !showDebugPanel;
+  }
+
+  /**
+   * Format a number to 2 decimal places
+   * @param {number} value - The number to format
+   * @returns {string} Formatted number
+   */
+  function formatNumber(value) {
+    return value.toFixed(2);
+  }
+</script>
+
+<!-- Debug Panel -->
+{#if showDebugPanel}
+  <div
+    class="fixed bottom-0 right-0 bg-black bg-opacity-75 text-white p-2 text-ui-md z-50 font-mono"
+  >
+    <div class="flex justify-between items-center mb-1">
+      <h3 class="font-bold">Design System Scaling</h3>
+      <button
+        onclick={toggleDebugPanel}
+        class="ml-2 px-1.5 bg-gray-700 hover:bg-gray-600 rounded"
+      >
+        &times;
+      </button>
+    </div>
+    <div class="grid grid-cols-2 gap-x-2 gap-y-0.5">
+      <div class="text-gray-400">Design Width:</div>
+      <div>{DESIGN.width}px</div>
+
+      <div class="text-gray-400">Design Height:</div>
+      <div>{DESIGN.height}px</div>
+
+      <div class="text-gray-400">Window:</div>
+      <div id="window-size">...</div>
+
+      <div class="text-gray-400">Scale W:</div>
+      <div>{formatNumber(scalingValues.scaleW)}</div>
+
+      <div class="text-gray-400">Scale H:</div>
+      <div>{formatNumber(scalingValues.scaleH)}</div>
+
+      <div class="text-gray-400">Viewport:</div>
+      <div>{formatNumber(scalingValues.scaleViewport)}</div>
+
+      <div class="text-gray-400">UI:</div>
+      <div>{formatNumber(scalingValues.scaleUI)}</div>
+
+      <div class="text-gray-400">Text Content:</div>
+      <div>{formatNumber(scalingValues.scaleTextBase)}</div>
+
+      <div class="text-gray-400">Text Heading:</div>
+      <div>{formatNumber(scalingValues.scaleTextHeading)}</div>
+
+      <div class="text-gray-400">Text UI:</div>
+      <div>{formatNumber(scalingValues.scaleTextUI)}</div>
+    </div>
+
+    <div class="mt-1 pt-1 border-t border-gray-600 text-gray-400">
+      <div>Clamping:</div>
+      <div class="grid grid-cols-3 text-2xs">
+        <div>UI: {CLAMPING.ui.min} - {CLAMPING.ui.max}</div>
+        <div>
+          Content: {CLAMPING.textBase.min} - {CLAMPING.textBase.max}
+        </div>
+        <div>
+          Heading: {CLAMPING.textHeading.min} - {CLAMPING.textHeading.max}
+        </div>
+      </div>
+    </div>
+  </div>
+{:else}
+  <!-- Debug Panel Toggle Button -->
+  <button
+    onclick={toggleDebugPanel}
+    class="fixed bottom-0 right-0 bg-black bg-opacity-75 text-white p-16ut py-8ut text-ui-md z-50 font-mono hover:bg-opacity-90"
+  >
+    Show Debug
+  </button>
+{/if}

package/dist/components/debug/debug-panel-design-scaling/DebugPanelDesignScaling.svelte.d.ts

@@ -0,0 +1,6 @@
+export default DebugPanelDesignScaling;
+type DebugPanelDesignScaling = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Record<string, never>>): void;
+};
+declare const DebugPanelDesignScaling: import("svelte").Component<Record<string, never>, {}, "">;

package/dist/components/debug/index.d.ts

@@ -0,0 +1 @@
+export { default as DebugPanelDesignScaling } from "./debug-panel-design-scaling/DebugPanelDesignScaling.svelte";

package/dist/components/debug/index.js

@@ -0,0 +1 @@
+export { default as DebugPanelDesignScaling } from './debug-panel-design-scaling/DebugPanelDesignScaling.svelte';

package/dist/components/drag-drop/DragController.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Controller for customizing drag
+ * E.g. set a custom preview image
+ */
+export class DragController {
+    /**
+     * @param {DragEvent} event - The drag event
+     */
+    constructor(event: DragEvent);
+    event: DragEvent;
+    dataTransfer: DataTransfer;
+    targetElement: HTMLElement;
+    offsetX: number;
+    offsetY: number;
+    /**
+     * Apply the default preview (uses the draggable element itself)
+     * @returns {boolean}
+     */
+    applyDefaultPreview(): boolean;
+}

package/dist/components/drag-drop/DragController.js

@@ -0,0 +1,44 @@
+/**
+ * Controller for customizing drag
+ * E.g. set a custom preview image
+ */
+export class DragController {
+  /**
+   * @param {DragEvent} event - The drag event
+   */
+  constructor(event) {
+    this.event = event;
+    this.dataTransfer = event.dataTransfer;
+    this.targetElement = /** @type {HTMLElement} */ (event.currentTarget);
+
+    // Calculate natural offsets by default (to prevent "jumping")
+    const rect = this.targetElement.getBoundingClientRect();
+    this.offsetX = event.clientX - rect.left;
+    this.offsetY = event.clientY - rect.top;
+  }
+
+  /**
+   * Apply the default preview (uses the draggable element itself)
+   * @returns {boolean}
+   */
+  applyDefaultPreview() {
+    if (
+      !this.dataTransfer ||
+      !this.dataTransfer.setDragImage
+    ) {
+      return false;
+    }
+
+    try {
+      this.dataTransfer.setDragImage(
+        this.targetElement,
+        this.offsetX,
+        this.offsetY
+      );
+      return true;
+    } catch (err) {
+      console.error('Failed to set default drag preview:', err);
+      return false;
+    }
+  }
+}