@hkdigital/lib-core 0.3.1

package/dist/components/inputs/index.js

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

package/dist/components/inputs/text-input/TestTextInput.svelte__

@@ -0,0 +1,102 @@
+<script>
+  /**
+   * @type {{
+   *   base?: string,
+   *   error?: string,
+   *   classes?: string,
+   *   fieldClasses?: string,
+   *   fieldError?: string,
+   *   legendBase?: string,
+   *   legendClasses?: string,
+   *   legendError?: string,
+   *   value?: string,
+   *   type?: 'text' | 'url' | 'email' | 'number',
+   *   pattern?: string,
+   *   required?: boolean,
+   *   title?: string,
+   *   valid?: boolean,
+   *   pristine?: boolean,
+   *   validate?: (value: string) => string | undefined,
+   * } & { [attr: string]: any }}
+   */
+  let {
+    base = '',
+    error = '',
+    classes = '',
+
+    fieldClasses,
+    fieldError,
+
+    legendBase = 'ml-16tp px-8tp',
+    legendClasses,
+    legendError,
+
+    value = $bindable(''),
+    type = 'text',
+    pattern,
+    required = false,
+
+    title = '',
+
+    valid = $bindable(true),
+    pristine = $bindable(true),
+
+    validate,
+
+    ...attrs
+  } = $props();
+
+  let inputRef = $state();
+  let validationMessage = $state('');
+  let initialValue = $state('');
+
+  $effect(() => {
+    if (!inputRef) return;
+    initialValue = value;
+    validateInput(inputRef, value);
+  });
+
+  function validateInput(input, currentValue) {
+    input.setCustomValidity('');
+    const isBuiltInValid = input.checkValidity();
+
+    if (isBuiltInValid && validate) {
+      const customError = validate(currentValue);
+      input.setCustomValidity(customError || '');
+    }
+
+    pristine = currentValue === initialValue;
+    valid = input.validity.valid;
+    validationMessage = input.validationMessage;
+  }
+
+  function handleInput(event) {
+    validateInput(event.target, event.target.value);
+  }
+</script>
+
+<fieldset
+  data-inputs="text-input"
+  class="flex w-full items-center rounded {fieldClasses}"
+>
+  <legend class="{legendBase} {legendClasses}">{title}</legend>
+
+  <input
+    bind:this={inputRef}
+    {type}
+    {pattern}
+    {required}
+    {value}
+    class="w-full border-none bg-transparent {base} {classes}"
+    aria-invalid={!valid}
+    aria-errormessage={!valid ? 'validation-message' : undefined}
+    oninput={handleInput}
+    {...attrs}
+  />
+
+  {#if !valid}
+    <small id="validation-message" class="text-error" role="alert">
+      {validationMessage}
+    </small>
+  {/if}
+</fieldset>

package/dist/components/inputs/text-input/TextInput.svelte

@@ -0,0 +1,223 @@
+<script>
+  import IconValid from './assets/IconValid.svelte';
+  import IconInvalid from './assets/IconInvalid.svelte';
+
+  import { Star, ExclamationTriangle, CheckCircle } from '@steeze-ui/heroicons';
+
+  import { HkIcon } from '../../icons/index.js';
+
+  import {
+    PRISTINE,
+    DIRTY,
+    FOCUSED,
+    UNFOCUSED,
+    VALID,
+    INVALID,
+    REQUIRED,
+    DISABLED
+  } from '../../../constants/state-labels/input-states.js';
+
+  /**
+   * @type {{
+   *   base?: string,
+   *   borderShape?: string,
+   *   classes?: string,
+   *   inputBase?: string,
+   *   inputClasses?: string,
+   *   legendBase?: string,
+   *   legendClasses?: string,
+   *   iconClasses?: string,
+   *   initialValue?: string,
+   *   value?: string,
+   *   type?: 'text' | 'url' | 'email' | 'number',
+   *   pattern?: string,
+   *   required?: boolean,
+   *   title?: string,
+   *   placeholder?: string,
+   *   isValid?: boolean,
+   *   isPristine?: boolean,
+   *   hasFocus?: boolean,
+   *   validate?: (value: string) => string | undefined,
+   *   iconRequired?: import('svelte').Snippet,
+   *   iconValid?: import('svelte').Snippet,
+   *   iconInvalid?: import('svelte').Snippet
+   * } & { [attr: string]: any }}
+   */
+  let {
+    initialValue = '',
+    value = $bindable(''),
+
+    isValid = $bindable(true),
+    isPristine = $bindable(true),
+    hasFocus = $bindable(false),
+
+    // Fieldset
+    base = 'px-10p pb-10p',
+    borderShape = 'border-1p rounded-xs',
+
+    classes = '',
+
+    // Input
+    inputBase = 'w-full outline-none border-none bg-transparent',
+    inputClasses,
+
+    // Legend
+    legendBase,
+    legendClasses,
+
+    // Icon
+    iconBase = 'w-[24px] h-[24px]',
+    iconClasses = '',
+
+    // Input type and built-in validation
+
+    type = 'text',
+    required = false,
+    disabled = false,
+
+    title = '',
+    placeholder = '',
+
+    // legend = 'Invalid',
+    // legendInvalid?
+
+    iconRequired,
+    iconValid,
+    iconInvalid,
+
+    validate,
+
+    ...attrs
+  } = $props();
+
+  let inputRef = $state();
+  let validationMessage = $state('');
+
+  $effect(() => {
+    if (!inputRef) return;
+    validateInput(inputRef, initialValue);
+    value = initialValue;
+  });
+
+  function validateInput(input, currentValue) {
+    input.setCustomValidity('');
+    const isBuiltInValid = input.checkValidity();
+
+    if (isBuiltInValid && validate) {
+      const customError = validate(currentValue);
+      input.setCustomValidity(customError || '');
+    }
+
+    isPristine = currentValue === initialValue;
+    isValid = input.validity.valid;
+    validationMessage = input.validationMessage;
+  }
+
+  function handleInput(event) {
+    validateInput(event.target, event.target.value);
+  }
+
+  // let legendHeight = $state(0);
+
+  // let paddingBottomStyle = $derived.by(() => {
+  //   return `padding-bottom: ${legendHeight / 2}px;`;
+  // });
+
+  let hideLegendStyle = $derived.by(() => {
+    if (isValid && !title) {
+      return 'width: 0;';
+    }
+  });
+
+  let stateClasses = $derived.by(() => {
+    //
+    // Return CSS classes that indicate the component's state
+    //
+    // @see $lib/constants/state-labels
+    //
+    const outArr = [];
+
+    outArr.push(isPristine ? PRISTINE : DIRTY);
+    outArr.push(hasFocus ? FOCUSED : UNFOCUSED);
+    outArr.push(isValid ? VALID : INVALID);
+
+    if (required) {
+      outArr.push(REQUIRED);
+    }
+
+    if (disabled) {
+      outArr.push(DISABLED);
+    }
+
+    return outArr.join(' ');
+  });
+</script>
+
+<!-- {#snippet defaultWarning()}
+  <WarningIcon />
+{/snippet} -->
+
+<fieldset
+  data-input="text-input"
+  class="{base} {borderShape} {classes} {stateClasses}"
+>
+  <legend
+    data-child="legend"
+    class="{legendBase} {legendClasses}"
+    style={hideLegendStyle}
+  >
+    {#if title}
+      {title}
+      <!-- {:else if !isValid}
+      {invalidTitle} -->
+    {:else}
+      &nbsp;
+    {/if}
+  </legend>
+
+  <div class="grid grid-cols-[1fr_auto] items-center">
+    <input
+      data-child="input"
+      bind:this={inputRef}
+      {type}
+      {required}
+      {disabled}
+      bind:value
+      {placeholder}
+      class="{inputBase} {inputClasses}"
+      aria-invalid={!isValid}
+      aria-errormessage={!isValid ? 'validation-message' : undefined}
+      oninput={handleInput}
+      onfocus={() => {
+        hasFocus = true;
+      }}
+      onblur={() => {
+        hasFocus = false;
+      }}
+      {...attrs}
+    />
+
+    <div data-child="icon-box" class="{iconBase} {iconClasses}">
+      {#if isPristine && required}
+        {#if iconRequired}
+          {@render iconRequired()}
+        {:else}
+          <HkIcon src={Star} theme="solid" />
+        {/if}
+      {:else if isValid}
+        {#if iconValid}
+          {@render iconValid()}
+        {:else}
+          <HkIcon src={CheckCircle} theme="solid" />
+        {/if}
+      {:else if iconInvalid}
+        {@render iconInvalid()}
+      {:else}
+        <HkIcon src={ExclamationTriangle} theme="solid" />
+      {/if}
+    </div>
+  </div>
+</fieldset>
+
+<style>
+</style>

package/dist/components/inputs/text-input/TextInput.svelte.d.ts

@@ -0,0 +1,56 @@
+export default TextInput;
+type TextInput = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        base?: string;
+        borderShape?: string;
+        classes?: string;
+        inputBase?: string;
+        inputClasses?: string;
+        legendBase?: string;
+        legendClasses?: string;
+        iconClasses?: string;
+        initialValue?: string;
+        value?: string;
+        type?: "number" | "url" | "text" | "email";
+        pattern?: string;
+        required?: boolean;
+        title?: string;
+        placeholder?: string;
+        isValid?: boolean;
+        isPristine?: boolean;
+        hasFocus?: boolean;
+        validate?: (value: string) => string;
+        iconRequired?: Snippet<[]>;
+        iconValid?: Snippet<[]>;
+        iconInvalid?: Snippet<[]>;
+    } & {
+        [attr: string]: any;
+    }>): void;
+};
+declare const TextInput: import("svelte").Component<{
+    base?: string;
+    borderShape?: string;
+    classes?: string;
+    inputBase?: string;
+    inputClasses?: string;
+    legendBase?: string;
+    legendClasses?: string;
+    iconClasses?: string;
+    initialValue?: string;
+    value?: string;
+    type?: "text" | "url" | "email" | "number";
+    pattern?: string;
+    required?: boolean;
+    title?: string;
+    placeholder?: string;
+    isValid?: boolean;
+    isPristine?: boolean;
+    hasFocus?: boolean;
+    validate?: (value: string) => string | undefined;
+    iconRequired?: import("svelte").Snippet;
+    iconValid?: import("svelte").Snippet;
+    iconInvalid?: import("svelte").Snippet;
+} & {
+    [attr: string]: any;
+}, {}, "value" | "isValid" | "isPristine" | "hasFocus">;

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

@@ -0,0 +1,83 @@
+<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/components/inputs/text-input/assets/IconInvalid.svelte

@@ -0,0 +1,14 @@
+<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="currentColor"
+  />
+</svg>

package/dist/components/inputs/text-input/assets/IconInvalid.svelte.d.ts

@@ -0,0 +1,26 @@
+export default IconInvalid;
+type IconInvalid = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string;
+};
+declare const IconInvalid: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/inputs/text-input/assets/IconValid.svelte

@@ -0,0 +1,12 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  fill="currentColor"
+  class="size-6"
+>
+  <path
+    fill-rule="evenodd"
+    d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
+    clip-rule="evenodd"
+  />
+</svg>

package/dist/components/inputs/text-input/assets/IconValid.svelte.d.ts

@@ -0,0 +1,26 @@
+export default IconValid;
+type IconValid = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string;
+};
+declare const IconValid: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/layout/grid-layers/GridLayers.svelte

@@ -0,0 +1,63 @@
+<script>
+  /**
+   * GridLayers Component
+   *
+   * Creates a single-cell grid where all children occupy the same space,
+   * enabling layered layouts with natural height behavior.
+   *
+   * @type {{
+   *   base?: string,
+   *   bg?: string,
+   *   padding?: string,
+   *   margin?: string,
+   *   classes?: string,
+   *   style?: string,
+   *   overflow?: string,
+   *   children: import('svelte').Snippet,
+   *   [attr: string]: any
+   * }}
+   */
+  const {
+    // Container styles
+    base = '',
+    bg = '',
+    padding = '',
+    margin = '',
+    classes = '',
+    style = '',
+    overflow = '',
+
+    // Content
+    children,
+
+    // Attributes
+    ...attrs
+  } = $props();
+
+  // Build the inline style
+  let containerStyle = $derived.by(() => {
+    const styles = ['grid-template: 1fr / 1fr;'];
+
+    if (style) {
+      styles.push(style);
+    }
+
+    return styles.join(' ');
+  });
+</script>
+
+<div
+  data-component="grid-layers"
+  class="grid {base} {bg} {classes} {margin} {padding} {overflow}"
+  style={containerStyle}
+  {...attrs}
+>
+  {@render children()}
+</div>
+
+<style>
+  /* All direct children occupy the same grid area */
+  div > :global(*) {
+    grid-area: 1 / 1;
+  }
+</style>

package/dist/components/layout/grid-layers/GridLayers.svelte.d.ts

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