@hkdigital/lib-core 0.3.1

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

@@ -0,0 +1,85 @@
+// import { createOrGetDragState } from './drag-state.svelte.js';
+
+// /**
+//  * Find the source draggable element from an event
+//  *
+//  * @param {DragEvent} event
+//  * @returns {HTMLElement|null}
+//  */
+// export function findDraggableSource(event) {
+//   const target = /** @type {Element|EventTarget|null} */ (event.target);
+
+//   if (!(target instanceof Element)) {
+//     return null;
+//   }
+
+//   let element = /** @type {Element|null} */ (target);
+
+//   // Walk up the DOM tree
+//   while (element !== null && element !== document.body) {
+//     if (element.hasAttribute('data-id')) {
+//       // Return as HTMLElement if needed
+//       return /** @type {HTMLElement} */ (element);
+//     }
+
+//     element = element.parentElement;
+//   }
+
+//   return null;
+// }
+
+// /**
+//  * Get draggable ID from an event, if available
+//  * @param {DragEvent} event
+//  * @returns {string|null}
+//  */
+// export function getDraggableIdFromEvent(event) {
+//   const element = findDraggableSource(event);
+//   return element ? element.getAttribute('data-id') : null;
+// }
+
+// /**
+//  * Process a drop event with the provided data and handlers
+//  * @param {DragEvent} event
+//  * @param {any} data The drag data
+//  * @param {Object} options
+//  * @param {Function} options.onDropStart Optional drop start handler
+//  * @param {Function} options.onDrop Main drop handler
+//  * @param {Function} options.onDropEnd Optional drop end handler
+//  * @param {string} options.zone The drop zone identifier
+//  * @param {Function} options.setState Function to update component state
+//  * @returns {Promise<boolean>} Success status
+//  */
+// export async function processDropWithData(
+//   event,
+//   data,
+//   { onDropStart, onDrop, onDropEnd, zone, setState }
+// ) {
+//   try {
+//     // Update state and notify listeners
+//     setState('ACTIVE_DROP');
+//     onDropStart?.({ event, zone, data });
+
+//     // Call the onDrop handler
+//     const dropResult = onDrop?.({
+//       event,
+//       zone,
+//       item: data.item,
+//       source: data.source,
+//       metadata: data.metadata
+//     });
+
+//     // Handle async or sync results
+//     await Promise.resolve(dropResult);
+
+//     // Success path
+//     setState('READY');
+//     onDropEnd?.({ event, zone, data, success: true });
+//     return true;
+//   } catch (error) {
+//     // Error path
+//     setState('READY');
+//     onDropEnd?.({ event, zone, data, success: false, error });
+//     return false;
+//   }
+// }

package/dist/components/hkdev/blocks/TextBlock.svelte

@@ -0,0 +1,47 @@
+<script>
+    /**
+     * @type {{
+     *   base?: string,
+     *   bg?: string,
+     *   classes?: string,
+     *   title?: import('svelte').Snippet,
+     *   content?: import('svelte').Snippet,
+     *   footer?: import('svelte').Snippet
+     * } & { [attr: string]: * }}
+     */
+    let {
+      // Style
+      base,
+      bg,
+      classes,
+  
+      // Content
+      title,
+      content,
+      footer,
+  
+      // Attributes
+      ...attrs
+    } = $props();
+  </script>
+  
+  <div data-title-text-button-block class="{base} {bg} {classes}" {...attrs}>
+    {#if title}
+      <h1 class="title-box h1">
+        {@render title()}
+      </h1>
+    {/if}
+  
+    {#if content}
+      <div class="content-box">
+        {@render content()}
+      </div>
+    {/if}
+  
+    {#if footer}
+      <div class="footer-box">
+        {@render footer()}
+      </div>
+    {/if}
+  </div>
+  

package/dist/components/hkdev/blocks/TextBlock.svelte.d.ts

@@ -0,0 +1,24 @@
+export default TextBlock;
+type TextBlock = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        base?: string;
+        bg?: string;
+        classes?: string;
+        title?: Snippet<[]>;
+        content?: Snippet<[]>;
+        footer?: Snippet<[]>;
+    } & {
+        [attr: string]: any;
+    }>): void;
+};
+declare const TextBlock: import("svelte").Component<{
+    base?: string;
+    bg?: string;
+    classes?: string;
+    title?: import("svelte").Snippet;
+    content?: import("svelte").Snippet;
+    footer?: import("svelte").Snippet;
+} & {
+    [attr: string]: any;
+}, {}, "">;

package/dist/components/hkdev/buttons/CheckButton.svelte

@@ -0,0 +1,63 @@
+<script>
+    /**
+     *
+     * @type {{
+     *   checked?: boolean,
+     *   activeChild?: boolean,
+     *   inactiveChild?: boolean,
+     *   iconActiveBase?: string,
+     *   classes?: string
+     *   disabled?: boolean,
+     *   title: string,
+     *   iconInactiveBase?: string,
+     *   inactiveClasses?: string,
+     *   activeClasses: string,
+     *   onclick?: () => void,
+     *   onchange?: () => void,
+     *   topic?: string,
+     * }}
+     */
+    let {
+      classes,
+      checked = $bindable(false),
+      iconInactiveBase = 'pointer-events-none',
+      iconActiveBase = 'pointer-events-none',
+      disabled = false,
+      topic,
+      title,
+      onchange = () => {},
+      inactiveChild,
+      activeChild,
+      activeClasses,
+      inactiveClasses,
+      onclick = () => {}
+    } = $props();
+  
+  
+  </script>
+  
+  <button
+    class="variant-filled btn {classes} {checked
+      ? activeClasses
+      : inactiveClasses}"
+  >
+    {title}
+    {#if checked && activeChild}
+      <svg
+        width="10"
+        height="10"
+        viewBox="0 0 10 10"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M1 9L9 1M1 1L9 9"
+          stroke="white"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    {/if}
+  </button>
+  

package/dist/components/hkdev/buttons/CheckButton.svelte.d.ts

@@ -0,0 +1,34 @@
+export default CheckButton;
+type CheckButton = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        checked?: boolean;
+        activeChild?: boolean;
+        inactiveChild?: boolean;
+        iconActiveBase?: string;
+        classes?: string;
+        disabled?: boolean;
+        title: string;
+        iconInactiveBase?: string;
+        inactiveClasses?: string;
+        activeClasses: string;
+        onclick?: () => void;
+        onchange?: () => void;
+        topic?: string;
+    }>): void;
+};
+declare const CheckButton: import("svelte").Component<{
+    checked?: boolean;
+    activeChild?: boolean;
+    inactiveChild?: boolean;
+    iconActiveBase?: string;
+    classes?: string;
+    disabled?: boolean;
+    title: string;
+    iconInactiveBase?: string;
+    inactiveClasses?: string;
+    activeClasses: string;
+    onclick?: () => void;
+    onchange?: () => void;
+    topic?: string;
+}, {}, "checked">;

package/dist/components/icons/HkIcon.svelte

@@ -0,0 +1,86 @@
+<script>
+  /**
+   * Icon component
+   *
+   * Source code adapted from
+   * @see https://github.com/steeze-ui/icons
+   *
+   *
+   * Install icons
+   * For icon packs @see https://github.com/steeze-ui/icons
+   *
+   * @eg install Hero Icons
+   *
+   * pnpm add -D @steeze-ui/heroicons
+   */
+
+  /**
+   * Properties
+   * ----------
+   * src - icon component
+   * size - width and height of the icon as percentage (..%) or in pixels
+   * theme - name of the icon set theme (e.g. 'solid' or 'outline')
+   *
+   * @type {{
+   *   src: import('./typedef.js').IconSource,
+   *   size?: string,
+   *   theme?: string,
+   *   base?: string,
+   *   classes?: string
+   * } & { [attr: string]: any }}
+   */
+  let {
+    src,
+    size = '100%',
+    theme = 'default',
+    base,
+    classes,
+    ...attrs
+  } = $props();
+
+  /** @type {any} */
+  let icon = $state();
+
+  $effect(() => {
+    icon = src?.[theme] ?? src?.['default'] ?? Object.values(src)?.[0];
+  });
+
+  if (size !== '100%') {
+    if (size.slice(-1) !== '%') {
+      try {
+        size = parseInt(size, 10) + 'px';
+      } catch (error) {
+        size = '100%';
+      }
+    }
+  }
+</script>
+
+<svg
+  data-hk-icon
+  {...icon?.a}
+  xmlns="http://www.w3.org/2000/svg"
+  width={size}
+  height={size}
+  class="{base} {classes}"
+  {...attrs}
+>
+  {#each icon?.path ?? [] as a}
+    <path {...a} />
+  {/each}
+  {#each icon?.rect ?? [] as a}
+    <rect {...a} />
+  {/each}
+  {#each icon?.circle ?? [] as a}
+    <circle {...a} />
+  {/each}
+  {#each icon?.polygon ?? [] as a}
+    <polygon {...a} />
+  {/each}
+  {#each icon?.polyline ?? [] as a}
+    <polyline {...a} />
+  {/each}
+  {#each icon?.line ?? [] as a}
+    <line {...a} />
+  {/each}
+</svg>

package/dist/components/icons/HkIcon.svelte.d.ts

@@ -0,0 +1,22 @@
+export default HkIcon;
+type HkIcon = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        src: IconSource;
+        size?: string;
+        theme?: string;
+        base?: string;
+        classes?: string;
+    } & {
+        [attr: string]: any;
+    }>): void;
+};
+declare const HkIcon: import("svelte").Component<{
+    src: import("./typedef.js").IconSource;
+    size?: string;
+    theme?: string;
+    base?: string;
+    classes?: string;
+} & {
+    [attr: string]: any;
+}, {}, "">;

package/dist/components/icons/HkTabIcon.svelte

@@ -0,0 +1,116 @@
+<script>
+	/**
+	 * TabBarIcon component
+	 *
+	 * Following component guidelines from Skeleton
+	 * @see https://next.skeleton.dev/docs/resources/contribute/components
+	 */
+
+	// import { ElementRect } from 'runed';
+
+	import { onMount } from 'svelte';
+
+	import { HkGridArea } from '../area';
+
+	import HkIcon from './HkIcon.svelte';
+
+	/**
+	 * Properties
+	 * ----------
+	 * src - icon component
+	 * theme - name of the icon set theme (e.g. 'solid' or 'outline')
+	 * label - text of the label to place below the icon
+	 *
+	 * @type {{
+	 *   src: import('./typedef.js').IconSource,
+	 *   iconTheme?: string,
+	 *   label?: string,
+	 *   route?: string,
+	 *   active?: boolean,
+	 *   base?: string,
+	 *   bg?: string,
+	 *   padding?: string,
+	 *   margin?: string,
+	 *   classes?: string,
+	 *   iconClasses? : string,
+	 *   iconHeight?: string,
+	 *   labelClasses? : string,
+	 *   rect?: DOMRect,
+	 * } & { [attr: string]: any }}
+	 *
+	 *
+	 */
+	let {
+		// Functional
+		src,
+		iconTheme,
+		label,
+		route,
+
+		active,
+
+		// Style
+		base,
+		bg,
+		padding,
+		margin,
+		classes,
+		iconClasses,
+		labelClasses,
+
+		// Event handlers
+		onmount,
+
+		// Rest attributes
+		...attrs
+	} = $props();
+
+	/** @type {HTMLElement} */
+	let iconBoxElem;
+
+	onMount(() => {
+		onmount(iconBoxElem);
+	});
+</script>
+
+{#snippet contents()}
+	<div
+		data-hk--icon-box
+		class="flex aspect-square w-full justify-center"
+		bind:this={iconBoxElem}
+	>
+		<HkIcon {src} size="100%" theme={iconTheme} classes={iconClasses} />
+	</div>
+
+	{#if label}
+		<div data-hk--label class="flex w-full justify-center {labelClasses}">
+			{label}
+		</div>
+	{/if}
+{/snippet}
+
+<HkGridArea
+	data-hk-tab-icon
+	boxMargin={margin}
+	boxPadding={padding}
+	base="grid-cols-1 justify-items-center cursor-pointer break-all overflow-clip h-full
+  {active ? 'active' : ''}
+  {label ? 'hasLabel' : ''} {base}"
+	{bg}
+	{...attrs}
+>
+	{#if !route}
+		{@render contents()}
+	{:else}
+		<a href={route}>
+			{@render contents()}
+		</a>
+	{/if}
+</HkGridArea>
+
+<style>
+	a {
+		display: block;
+		text-decoration: none;
+	}
+</style>

package/dist/components/icons/HkTabIcon.svelte.d.ts

@@ -0,0 +1,40 @@
+export default HkTabIcon;
+type HkTabIcon = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        src: IconSource;
+        iconTheme?: string;
+        label?: string;
+        route?: string;
+        active?: boolean;
+        base?: string;
+        bg?: string;
+        padding?: string;
+        margin?: string;
+        classes?: string;
+        iconClasses?: string;
+        iconHeight?: string;
+        labelClasses?: string;
+        rect?: DOMRect;
+    } & {
+        [attr: string]: any;
+    }>): void;
+};
+declare const HkTabIcon: import("svelte").Component<{
+    src: import("./typedef.js").IconSource;
+    iconTheme?: string;
+    label?: string;
+    route?: string;
+    active?: boolean;
+    base?: string;
+    bg?: string;
+    padding?: string;
+    margin?: string;
+    classes?: string;
+    iconClasses?: string;
+    iconHeight?: string;
+    labelClasses?: string;
+    rect?: DOMRect;
+} & {
+    [attr: string]: any;
+}, {}, "">;

package/dist/components/icons/SteezeIcon.svelte

@@ -0,0 +1,97 @@
+<script>
+  /**
+   * Steeze like icon component
+   * The main difference with the original Steeze svelte component is that
+   * the component follows the conventions used for components in
+   * this library
+   *
+   * @see https://github.com/steeze-ui/icons
+   *
+   * Install icons
+   * For icon packs @see https://github.com/steeze-ui/icons
+   *
+   * @eg install Hero Icons
+   *
+   * pnpm add -D @steeze-ui/heroicons
+   */
+
+  /**
+   * Properties
+   * ----------
+   * src - icon component
+   * size - width and height of the icon as percentage (..%) or in pixels
+   * theme - name of the icon theme (e.g. 'solid' or 'outline')
+   *
+   * @type {{
+   *   src: import('./typedef.js').IconSource,
+   *   size?: string,
+   *   theme?: string,
+   *   base?: string,
+   *   classes?: string
+   * } & { [attr: string]: any }}
+   */
+  let {
+    // Style
+    base,
+    classes,
+
+    size = 'md',
+    variant = '',
+
+    // Functional
+    src,
+    theme = 'default', // icon theme 'default'|'solid'|'outline'...
+
+    // States
+    // ...
+
+    // Attributes
+    ...attrs
+  } = $props();
+
+  /** @type {any} */
+  let icon = $state();
+
+  $effect(() => {
+    icon = src?.[theme] ?? src?.['default'] ?? Object.values(src)?.[0];
+  });
+
+  // if (size !== '100%') {
+  //   if (size.slice(-1) !== '%') {
+  //     try {
+  //       size = parseInt(size, 10) + 'px';
+  //     } catch (error) {
+  //       size = '100%';
+  //     }
+  //   }
+  // }
+</script>
+
+<svg
+  data-component="icon"
+  data-type="steeze"
+  data-size={size}
+  {...icon?.a}
+  xmlns="http://www.w3.org/2000/svg"
+  class="{base} {classes}"
+  {...attrs}
+>
+  {#each icon?.path ?? [] as a}
+    <path {...a} />
+  {/each}
+  {#each icon?.rect ?? [] as a}
+    <rect {...a} />
+  {/each}
+  {#each icon?.circle ?? [] as a}
+    <circle {...a} />
+  {/each}
+  {#each icon?.polygon ?? [] as a}
+    <polygon {...a} />
+  {/each}
+  {#each icon?.polyline ?? [] as a}
+    <polyline {...a} />
+  {/each}
+  {#each icon?.line ?? [] as a}
+    <line {...a} />
+  {/each}
+</svg>

package/dist/components/icons/SteezeIcon.svelte.d.ts

@@ -0,0 +1,22 @@
+export default SteezeIcon;
+type SteezeIcon = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        src: IconSource;
+        size?: string;
+        theme?: string;
+        base?: string;
+        classes?: string;
+    } & {
+        [attr: string]: any;
+    }>): void;
+};
+declare const SteezeIcon: import("svelte").Component<{
+    src: import("./typedef.js").IconSource;
+    size?: string;
+    theme?: string;
+    base?: string;
+    classes?: string;
+} & {
+    [attr: string]: any;
+}, {}, "">;

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

@@ -0,0 +1,4 @@
+export { default as HkIcon } from "./HkIcon.svelte";
+export { default as HkTabIcon } from "./HkTabIcon.svelte";
+export { default as SteezeIcon } from "./SteezeIcon.svelte";
+export * from "./typedef.js";

package/dist/components/icons/index.js

@@ -0,0 +1,6 @@
+export { default as HkIcon } from './HkIcon.svelte';
+export { default as HkTabIcon } from './HkTabIcon.svelte';
+
+export { default as SteezeIcon } from './SteezeIcon.svelte';
+
+export * from './typedef.js';

package/dist/components/icons/typedef.d.ts

@@ -0,0 +1,13 @@
+declare const _default: {};
+export default _default;
+export type AllowedTags = "path" | "circle" | "rect" | "polygon" | "polyline" | "line";
+export type IconThemeSource = {
+    a: {
+        [attribute: string]: string;
+    };
+} & { [tag in AllowedTags]?: {
+    [attribute: string]: string;
+}[]; };
+export type IconSource = {
+    [theme: string]: IconThemeSource;
+};

package/dist/components/icons/typedef.js

@@ -0,0 +1,16 @@
+/**
+ * @typedef {'path' | 'circle' | 'rect' | 'polygon' | 'polyline' | 'line'} AllowedTags
+ */
+
+/**
+ * @typedef { { a: { [attribute: string]: string }} &
+ *            { [tag in AllowedTags]?: { [attribute: string]: string }[] }
+ *   } IconThemeSource
+ */
+
+/**
+ * @typedef {{[theme: string]: IconThemeSource}} IconSource
+ */
+
+// Export default is required for exporting typedefs
+export default {};

package/dist/components/index.js

@@ -0,0 +1,2 @@
+// export * as area from "./area/index.js";
+// export * as icon from "./icon/index.js";

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

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