@hkdigital/lib-core 0.3.9 → 0.3.11

package/dist/primitives/inputs/text-input/TextInput.svelte___

@@ -1,83 +0,0 @@
-<script>
-	/**
-	 * @type {{
-	 *   classes?: string,
-	 *   fieldClasses?: string,
-	 *   legendClasses?: string,
-	 *   legendTitle?: string,
-	 *   error?: boolean,
-	 *   type?: string,
-	 *   placeholder: string,
-	 *   required: boolean,
-	 *   snippetWarning?: import('svelte').Snippet,
-	 * } & { [attr: string]: any }}
-	 */
-	let {
-		// Style
-		classes,
-		fieldClasses,
-		legendClasses,
-
-		// Functionality
-		name,
-		disabled,
-		required,
-
-		// initialValue
-		// value
-		// readonly
-		// pattern
-		// minlength
-		// maxlength
-
-		// Text placeholders
-		legendTitle,
-		placeholder,
-
-		type,
-		snippetWarning,
-
-		// Attributes
-		...attrs
-	} = $props();
-</script>
-
-{#snippet defaultWarning()}
-	<svg
-		width="17"
-		height="16"
-		viewBox="0 0 17 16"
-		fill="none"
-		xmlns="http://www.w3.org/2000/svg"
-	>
-		<path
-			fill-rule="evenodd"
-			clip-rule="evenodd"
-			d="M6.36747 1.28014C7.3152 -0.426712 9.68492 -0.426712 10.6318 1.28014L16.6669 12.1596C17.6138 13.8664 16.429 16 14.5343 16H2.46497C0.570331 16 -0.613713 13.8664 0.333194 12.1596L6.36665 1.28014H6.36747ZM8.50006 5.75805C8.66328 5.75805 8.81981 5.82549 8.93522 5.94553C9.05063 6.06556 9.11547 6.22837 9.11547 6.39812V9.59846C9.11547 9.76822 9.05063 9.93102 8.93522 10.0511C8.81981 10.1711 8.66328 10.2385 8.50006 10.2385C8.33684 10.2385 8.18031 10.1711 8.0649 10.0511C7.94949 9.93102 7.88465 9.76822 7.88465 9.59846V6.39812C7.88465 6.22837 7.94949 6.06556 8.0649 5.94553C8.18031 5.82549 8.33684 5.75805 8.50006 5.75805ZM8.50006 12.7988C8.66328 12.7988 8.81981 12.7314 8.93522 12.6113C9.05063 12.4913 9.11547 12.3285 9.11547 12.1587C9.11547 11.989 9.05063 11.8262 8.93522 11.7061C8.81981 11.5861 8.66328 11.5187 8.50006 11.5187C8.33684 11.5187 8.18031 11.5861 8.0649 11.7061C7.94949 11.8262 7.88465 11.989 7.88465 12.1587C7.88465 12.3285 7.94949 12.4913 8.0649 12.6113C8.18031 12.7314 8.33684 12.7988 8.50006 12.7988Z"
-			fill="#F8705E"
-		/>
-	</svg>
-{/snippet}
-
-<fieldset
-	data-input="text-input"
-	class="flex w-full items-center rounded {fieldClasses}"
->
-	<legend class="px-2 {legendClasses}" class:error>{legendTitle}</legend>
-	<input
-		class="w-full border-none bg-transparent {classes}"
-		{type}
-		{placeholder}
-		{name}
-		{required}
-		{...attrs}
-	/>
-	{#if error}
-		{#if snippetWarning}
-			{@render snippetWarning()}
-		{:else}
-			{@render defaultWarning()}
-		{/if}
-		<!-- <img src={warningSymbol} class="mb-2 mr-8" alt="Warning" /> -->
-	{/if}
-</fieldset>

package/dist/primitives/layout/grid-layers/GridLayers.svelte__heightFrom__

@@ -1,372 +0,0 @@
-<script>
-  import { onMount, onDestroy } from 'svelte';
-  import { setupLayerObserver, measureTargetLayer } from './util.js';
-
-  /**
-   * # GridLayers Component
-   *
-   * A Svelte 5 component that creates a layered grid layout where all
-   * children occupy the same grid area, allowing for overlapping content with
-   * precise positioning control.
-   *
-   * ## Overview
-   *
-   * GridLayers uses CSS Grid to stack multiple elements in the same grid cell
-   * (1x1 grid), enabling layered layouts without absolute positioning on the
-   * children. This approach maintains the natural flow and sizing behavior of
-   * grid items while allowing them to overlap.
-   *
-   * ## Height Control
-   *
-   * The component offers two methods for controlling height:
-   *
-   * ### 1. Fixed Height (default)
-   *
-   * Use the `height` prop with Tailwind classes:
-   * ```svelte
-   * <GridLayers height="h-[500px]">
-   *    <!-- content -->
-   * </GridLayers>
-   * ```
-   *
-   * ### 2. Dynamic Height
-   * Use the `heightFrom` prop to make the container's height match a specific
-   * child layer:
-   *
-   * ```svelte
-   * <GridLayers heightFrom="content">
-   *   <div data-layer="content">
-   *     <!-- This layer's height determines the container height -->
-   *   </div>
-   *   <div data-layer="overlay">
-   *     <!-- Other layers adapt to the container -->
-   *   </div>
-   * </GridLayers>
-   * ```
-   *
-   * The `heightFrom` value should match a child's `data-layer` attribute.
-   * The component will:
-   *    - Initially render invisibly to measure the target layer
-   *    - Apply the measured height to the container
-   *    - Watch for changes and update automatically
-   *
-   * ## Positioning Layers
-   *
-   * Each child element can be positioned within the grid cell using Tailwind's
-   * alignment utilities:
-   *
-   * ### justify-self (Horizontal Alignment)
-   *   - `justify-self-start` - Align to the left
-   *   - `justify-self-center` - Center horizontally
-   *   - `justify-self-end` - Align to the right
-   *   - `justify-self-stretch` - Stretch to full width (default)
-   *
-   * ### self (Vertical Alignment)
-   *   - `self-start` - Align to the top
-   *   - `self-center` - Center vertically
-   *   - `self-end` - Align to the bottom
-   *   - `self-stretch` - Stretch to full height (default)
-   *
-   * ### Combining Positions
-   * ```svelte
-   * <GridLayers height="h-[400px]">
-   *   <div class="justify-self-start self-start">Top Left</div>
-   *     <div class="justify-self-center self-center">Centered</div>
-   *     <div class="justify-self-end self-end">Bottom Right</div>
-   * </GridLayers>
-   * ```
-   *
-   * ### Fine-tuning with Margins
-   * For precise positioning adjustments, use margins:
-   * ```svelte
-   * <div class="justify-self-end self-end mr-4 mb-4">
-   *   <!-- Positioned at bottom-right with 1rem spacing -->
-   * </div>
-   * ```
-   *
-   * ## Technical Implementation
-   *
-   * ### The Grid Container
-   * The inner grid container uses `absolute inset-0` which:
-   *   - Positions it absolutely within the relative parent
-   *   - `inset-0` is shorthand for `top: 0, right: 0, bottom: 0, left: 0`
-   *   - Makes the grid fill the entire parent container
-   *   - Ensures the grid respects the parent's dimensions (fixed or dynamic)
-   *
-   * This approach creates a stable positioning context while maintaining the
-   * parent's flow in the document.
-   *
-   *    ### Grid Structure
-   *    All children are assigned to the same grid cell:
-   *    ```css
-   *    grid-template-columns: 1fr;
-   *    grid-template-rows: 1fr;
-   *    grid-column: 1;
-   *    grid-row: 1;
-   *    ```
-   *
-   *    ## Overflow Behavior
-   *
-   *    When a layer's content exceeds the container bounds:
-   *
-   *    ### Default Behavior
-   *    - Content will overflow and be visible outside the container
-   *    - This can break layouts or create unwanted scrollbars
-   *
-   *    ### Controlling Overflow
-   *    Add overflow utilities to the container:
-   *    ```svelte
-   *    <!-- Hide overflow -->
-   *    <GridLayers classes="overflow-hidden">
-   *
-   *    <!-- Scroll if needed -->
-   *    <GridLayers classes="overflow-auto">
-   *
-   *    <!-- Scroll specific layer -->
-   *    <GridLayers>
-   *      <div class="overflow-auto">
-   *        <!-- Scrollable content -->
-   *      </div>
-   *    </GridLayers>
-   *    ```
-   *
-   *    ### Best Practices for Overflow
-   *    1. Use `overflow-hidden` on the container when layers should be clipped
-   *    2. Apply `overflow-auto` to specific layers that need scrolling
-   *    3. Consider using `max-h-*` classes on content layers
-   *    4. Test with different content sizes to ensure proper behavior
-   *
-   *    ## Z-Index Stacking
-   *
-   *    Layers have a base `z-index: 0` and stack in DOM order. Control stacking with:
-   *    ```svelte
-   *    <div class="z-10">Top layer</div>
-   *    <div class="z-0">Base layer</div>
-   *    <div class="z-20">Topmost layer</div>
-   *    ```
-   *
-   *    ## Common Patterns
-   *
-   *    ### Header/Content/Footer
-   *    ```svelte
-   *    <GridLayers heightFrom="content">
-   *      <div data-layer="header" class="self-start">
-   *        <header>Fixed header</header>
-   *      </div>
-   *      <div data-layer="content" class="self-center">
-   *        <main>Dynamic content</main>
-   *      </div>
-   *      <div data-layer="footer" class="self-end">
-   *        <footer>Fixed footer</footer>
-   *      </div>
-   *    </GridLayers>
-   *    ```
-   *
-   *    ### Centered Overlay
-   *    ```svelte
-   *    <GridLayers height="h-screen">
-   *      <div class="z-0">
-   *        <img src="background.jpg" class="w-full h-full object-cover" />
-   *      </div>
-   *      <div class="z-10 justify-self-center self-center">
-   *        <div class="bg-white p-8 rounded shadow-lg">
-   *          Centered content over background
-   *        </div>
-   *      </div>
-   *    </GridLayers>
-   *    ```
-   *
-   *    ### Corner Badges
-   *    ```svelte
-   *    <GridLayers height="h-64">
-   *      <div class="justify-self-end self-start m-4 z-10">
-   *        <span class="badge">New</span>
-   *      </div>
-   *      <div>
-   *        Main content
-   *      </div>
-   *    </GridLayers>
-   *    ```
-   */
-
-  /**
-   * @type {{
-   *   base?: string,
-   *   bg?: string,
-   *   padding?: string,
-   *   margin?: string,
-   *   height?: string,
-   *   classes?: string,
-   *   style?: string,
-   *   cellBase?: string,
-   *   cellBg?: string,
-   *   cellPadding?: string,
-   *   cellMargin?: string,
-   *   cellClasses?: string,
-   *   cellStyle?: string,
-   *   heightFrom?: string|null,
-   *   children: import('svelte').Snippet,
-   *   cellAttrs?: { [attr: string]: any },
-   *   [attr: string]: any
-   * }}
-   */
-  const {
-    // Style
-    base = '',
-    bg = '',
-    padding = '',
-    margin = '',
-    height = 'h-full',
-    classes = '',
-    style = '',
-    cellBase = '',
-    cellBg = '',
-    cellPadding = '',
-    cellMargin = '',
-    cellClasses = '',
-    cellStyle = '',
-
-    // Behavior
-    heightFrom = null,
-
-    // Props
-    cellAttrs = {},
-    children,
-
-    // Attributes
-    ...attrs
-  } = $props();
-
-  // Component state
-  let gridContent = $state(null);
-  let calculatedHeight = $state(0);
-  let observer = $state(null);
-
-  // Start with true if heightFrom is provided
-  let isFirstRender = $state(heightFrom !== null);
-
-  let preCalculatedHeight = $state(0);
-
-  // Derived container style that updates reactively when dependencies change
-  let containerStyle = $derived.by(() => {
-    const styles = [];
-
-    if (style) {
-      styles.push(style);
-    }
-
-    if (heightFrom && calculatedHeight > 0) {
-      styles.push(`height: ${calculatedHeight}px;`);
-    }
-
-    return styles.join(' ');
-  });
-
-  /**
-   * Handler for height changes detected by the observer
-   * @param {number} newHeight - The new calculated height
-   */
-  function handleHeightChange(newHeight) {
-    calculatedHeight = newHeight;
-  }
-
-  /**
-   * Initialize height measurement and observation
-   */
-  function initializeHeightTracking() {
-    if (!heightFrom || !gridContent) return;
-
-    // Measure the layer initially
-    const { element, height } = measureTargetLayer(gridContent, heightFrom);
-
-    if (element) {
-      calculatedHeight = height;
-
-      // Setup observer for future changes
-      observer = setupLayerObserver(element, handleHeightChange);
-    }
-  }
-
-  // Initialize on mount with the two-pass rendering approach
-  onMount(() => {
-    if (heightFrom) {
-      // First render: measure invisibly
-      requestAnimationFrame(() => {
-        if (gridContent) {
-          const { element, height } = measureTargetLayer(gridContent, heightFrom);
-
-          if (element) {
-            preCalculatedHeight = height;
-
-            // Second render: show with correct height
-            requestAnimationFrame(() => {
-              calculatedHeight = preCalculatedHeight;
-              isFirstRender = false;
-
-              // Setup observer for future changes
-              observer = setupLayerObserver(element, handleHeightChange);
-            });
-          } else {
-            // No target layer found, just show the component
-            isFirstRender = false;
-          }
-        } else {
-          // No grid content, just show the component
-          isFirstRender = false;
-        }
-      });
-    } else {
-      // No heightFrom, no need for measurement
-      isFirstRender = false;
-    }
-  });
-
-  // Effect to re-setup observer when either the target layer or heightFrom changes
-  $effect(() => {
-    // Only handle changes after initial setup
-    if (!isFirstRender && heightFrom && gridContent && !observer) {
-      initializeHeightTracking();
-    }
-  });
-
-  // Clean up on destroy
-  onDestroy(() => {
-    if (observer) {
-      observer.disconnect();
-      observer = null;
-    }
-  });
-
-</script>
-
-<div
-  data-component="grid-layers"
-  class="relative {isFirstRender ? 'invisible' : ''} {base} {bg} {heightFrom ? '' : height} {classes} {margin} {padding}"
-  style={containerStyle}
-  {...attrs}
->
-  <div
-    data-section="grid"
-    bind:this={gridContent}
-    class="absolute inset-0 grid {cellBase} {cellBg} {cellPadding} {cellMargin} {cellClasses}"
-    style={cellStyle}
-    {...cellAttrs}
-  >
-    {@render children()}
-  </div>
-</div>
-
-<style>
-  /* All children of the layer share the same grid area
-     but aren't absolutely positioned */
-  [data-section='grid'] {
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr;
-  }
-
-  [data-section='grid'] > :global(*) {
-    grid-column: 1;
-    grid-row: 1;
-    z-index: 0; /* Base z-index to allow explicit stacking order */
-  }
-</style>

package/dist/schemas/index.d.ts

@@ -1 +0,0 @@
-export * from "./validate-url.js";

package/dist/schemas/index.js

@@ -1 +0,0 @@
-export * from './validate-url.js';

package/dist/schemas/validate-url.d.ts

@@ -1,30 +0,0 @@
-/**
- * Schema to validate an URL
- */
-export const ValidateUrl: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.UrlAction<string, undefined>, v.CustomSchema<any, undefined>]>;
-/**
- * Schema to validate an URL or empty string.
- */
-export const ValidateUrlOrEmptyString: v.UnionSchema<[v.LiteralSchema<"", undefined>, v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.UrlAction<string, undefined>]>], undefined>;
-/**
- * Schema to validate an URL path
- */
-export const ValidateUrlPath: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.CustomSchema<any, undefined>, v.TransformAction<any, {
-    url: URL;
-    value: any;
-}>, v.CustomSchema<{
-    url: URL;
-    value: any;
-}, "Value should not contain search path">, v.CustomSchema<{
-    url: URL;
-    value: any;
-}, "Value should not contain hash path">, v.TransformAction<{
-    url: URL;
-    value: any;
-}, string>]>;
-/**
- * Schema to validate a relative URL
- */
-export const ValidateRelativeUrl: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.CustomSchema<any, undefined>, v.CustomSchema<any, undefined>]>;
-export const ValidateAbsOrRelUrl: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.CustomSchema<any, undefined>, v.CustomSchema<any, undefined>]>;
-import * as v from 'valibot';

package/dist/schemas/validate-url.js

@@ -1,180 +0,0 @@
-// > Imports
-
-import * as v from 'valibot';
-// import { UrlOrEmptyString } from '../valibot/url.js';
-
-const ValidateTrim = v.custom((value) => {
-	if (/^\s|\s$/.test(value)) {
-		throw new Error('Should not start or end with whitespace');
-	}
-	return true;
-});
-
-// > Exports
-
-/**
- * Schema to validate an URL
- */
-export const ValidateUrl = v.pipe(v.string(), v.url(), ValidateTrim);
-
-/**
- * Schema to validate an URL or empty string.
- */
-export const ValidateUrlOrEmptyString = v.union([v.literal(''), v.pipe(v.string(), v.url())]);
-
-// export const ValidateHumanUrl
-
-/**
- * Schema to validate an URL path
- */
-export const ValidateUrlPath = v.pipe(
-	v.string(),
-	ValidateTrim,
-	v.transform((value) => {
-		return {
-			url: new URL(value, 'http://localhost'),
-			value
-		};
-	}),
-	v.custom(({ url }) => {
-		if (url.search) {
-			return false;
-		}
-		return true;
-	}, 'Value should not contain search path'),
-	v.custom(({ url }) => {
-		if (url.hash) {
-			return false;
-		}
-		return true;
-	}, 'Value should not contain hash path'),
-	v.transform(({ url }) => {
-		return url.pathname;
-	})
-);
-
-/**
- * Schema to validate a relative URL
- */
-export const ValidateRelativeUrl = v.pipe(
-	v.string(),
-	ValidateTrim,
-	v.custom((value) => {
-		try {
-			return new URL(value, 'http://localhost');
-
-			// eslint-disable-next-line no-unused-vars
-		} catch (e) {
-			throw new Error('Invalid relative URL');
-		}
-	})
-);
-
-export const ValidateAbsOrRelUrl = v.pipe(
-	v.string(),
-	ValidateTrim,
-	v.custom((value) => {
-		try {
-			if (/^https?:\/\//.test(value)) {
-				// Absolute url using protocol http(s)
-				return new URL(value);
-			} else {
-				// Relative URL
-				return new URL(value, 'http://localhost');
-			}
-
-			// eslint-disable-next-line no-unused-vars
-		} catch (e) {
-			throw new Error('Invalid relative URL');
-		}
-	})
-);
-
-/**
- * Schema to validate an url that may miss the protocol part
- *
- * @note an empty string is not allowed!
- */
-// export const HumanUrl = v.pipe(
-//   v.custom( ( value ) => {
-//       if( value.includes('://') )
-//       {
-//         v.parse( Url, value );
-//         return true;
-//       }
-//     } )
-//   );
-
-// 	// v.transform((value) => {
-// 	// 	if (!value.length || value.includes('://')) {
-// 	// 		return value;
-// 	// 	} else {
-// 	// 		// Prefix 'url' with 'https://'
-// 	// 		return `https://${value}`;
-// 	// 	}
-// 	// }),
-// 	// v.url()
-// );
-
-/**
- * Schema to validate url path, without a search and hash part
- */
-// export const UrlPath = v.pipe(
-// 	v.string(),
-// 	v.transform((value) => {
-// 		// Convert relative url to URL object
-// 		// @note removes ../../ parts
-// 		try {
-// 			return new URL(value, 'http://localhost');
-
-// 			// eslint-disable-next-line no-unused-vars
-// 		} catch (e) {
-// 			return null;
-// 		}
-// 	}),
-// 	v.custom((urlOrNull) => {
-// 		return urlOrNull ? true : false;
-// 	}, 'Invalid URL pathname'),
-// 	v.transform((url) => {
-// 		return url.pathname;
-// 	})
-// );
-
-/**
- * Schema to validate a url path, which consists of
- * a path and optionally search and hash parts
- */
-// export const RelativeUrl = v.pipe(
-// 	v.string(),
-// 	v.transform((value) => {
-// 		// Convert relative url to URL object
-// 		// @note removes ../../ parts
-// 		try {
-// 			return new URL(value, 'http://localhost');
-
-// 			// eslint-disable-next-line no-unused-vars
-// 		} catch (e) {
-// 			return null;
-// 		}
-// 	}),
-// 	v.custom((urlOrNull) => {
-// 		return urlOrNull ? true : false;
-// 	}, 'Invalid URL pathname or search part'),
-// 	v.transform((url) => {
-// 		return (
-// 			`${url.pathname}` +
-// 			`${url.search.length <= 1 ? '' : url.search}` +
-// 			`${url.hash.length <= 1 ? '' : url.hash}`
-// 		);
-// 	})
-// );
-
-/**
- * Schema to validate an absolute or relative url
- *
- * @note an empty string is not allowed!
- */
-// export const AbsOrRelUrl = v.union([
-// 	v.pipe(v.string(), v.trim(), v.url()),
-// 	v.pipe(v.string(), v.nonEmpty(), RelativeUrl)
-// ]);

package/dist/themes/hkdev/debug.css

@@ -1,2 +0,0 @@
-
-/**/

package/dist/themes/index.d.ts

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

package/dist/themes/index.js

@@ -1 +0,0 @@
-export { default as hkdev } from './hkdev/theme.js';

package/dist/util/design-system/index.d.ts

@@ -1,5 +0,0 @@
-export * from "./css/clamp.js";
-export * from "./css/root-design-vars.js";
-export * from "./components/states.js";
-export * from "./layout/scaling.js";
-export * from "./tailwind.js";

package/dist/util/design-system/index.js

@@ -1,5 +0,0 @@
-export * from './css/clamp.js';
-export * from './css/root-design-vars.js';
-export * from './components/states.js';
-export * from './layout/scaling.js';
-export * from './tailwind.js';