@hkdigital/lib-sveltekit 0.1.0 → 0.1.2

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

@@ -0,0 +1,40 @@
+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?: "primary" | "secondary";
+        size?: "sm" | "md" | "lg";
+        variant?: string;
+        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";
+    size?: "sm" | "md" | "lg";
+    variant?: string;
+    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-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

@@ -1 +1,2 @@
-export { default as PlainButton } from "./plain-button/PlainButton.svelte";
+export { default as Button } from "./button/Button.svelte";
+export { default as TextButton } from "./button-text/TextButton.svelte";

package/dist/components/buttons/index.js

@@ -1 +1,2 @@
-export { default as PlainButton } from './plain-button/PlainButton.svelte';
+export { default as Button } from './button/Button.svelte';
+export { default as TextButton } from './button-text/TextButton.svelte';

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/icon/HkIcon.svelte

@@ -27,7 +27,7 @@
    *   theme?: string,
    *   base?: string,
    *   classes?: string
-   * } & { [attr: string]: * }}
+   * } & { [attr: string]: any }}
    */
   let {
     src,

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

@@ -1,4 +1,16 @@
 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;

package/dist/components/icon/HkTabIcon.svelte

@@ -36,7 +36,7 @@
 	 *   iconHeight?: string,
 	 *   labelClasses? : string,
 	 *   rect?: DOMRect,
-	 * } & { [attr: string]: * }}
+	 * } & { [attr: string]: any }}
 	 *
 	 *
 	 */
@@ -74,7 +74,11 @@
 </script>
 
 {#snippet contents()}
-	<div data-hk--icon-box class="flex aspect-square w-full justify-center" bind:this={iconBoxElem}>
+	<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>
 

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

@@ -1,4 +1,25 @@
 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;

package/dist/components/image/EnhancedImage.svelte__

@@ -29,7 +29,7 @@
    *   onload?: ( e: (Event|{ type: string, target: HTMLImageElement }) ) => void,
    *   onerror?: ( e: (Event|{ type: string, target: HTMLImageElement }) ) => void,
    *   loading?: string
-   * } & { [attr: string]: * }}
+   * } & { [attr: string]: any }}
    */
   let {
     // Style

package/dist/components/image/ImageBox.svelte.d.ts

@@ -1,4 +1,23 @@
 export default ImageBox;
+type ImageBox = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        [attr: string]: any;
+        base?: string;
+        bg?: string;
+        classes?: string;
+        width?: string;
+        height?: string;
+        aspect?: string;
+        overflow?: string;
+        fit?: "fill" | "contain" | "cover";
+        position?: string;
+        imageMeta: ImageMeta | ImageMeta[];
+        imageLoader?: ImageLoader;
+        alt?: string;
+        onProgress?: (progress: LoadingProgress) => void;
+    }>): void;
+};
 declare const ImageBox: import("svelte").Component<{
     [attr: string]: any;
     base?: string;

package/dist/components/image/ResponsiveImage.svelte

@@ -12,7 +12,7 @@
 	 *   boxAttrs?: { [attr: string]: * },
 	 *   images: ImageMeta[],
 	 *   alt?: string
-	 * } & { [attr: string]: * }}
+	 * } & { [attr: string]: any }}
 	 */
 	const {
 		base,

package/dist/components/image/ResponsiveImage.svelte.d.ts

@@ -1,5 +1,21 @@
 export default ResponsiveImage;
 export type ImageMeta = import("../../config/typedef.js").ImageMeta;
+type ResponsiveImage = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        base?: string;
+        classes?: string;
+        boxBase?: string;
+        boxClasses?: string;
+        boxAttrs?: {
+            [attr: string]: any;
+        };
+        images: ImageMeta[];
+        alt?: string;
+    } & {
+        [attr: string]: any;
+    }>): void;
+};
 declare const ResponsiveImage: import("svelte").Component<{
     base?: string;
     classes?: string;

package/dist/components/image/ResponsiveImage.svelte__

@@ -12,7 +12,7 @@
 	 *   boxAttrs?: { [attr: string]: * },
 	 *   images: ImageMeta[],
 	 *   alt?: string
-	 * } & { [attr: string]: * }}
+	 * } & { [attr: string]: any }}
 	 */
 	const {
 		base,

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

@@ -17,7 +17,7 @@
    *   valid?: boolean,
    *   pristine?: boolean,
    *   validate?: (value: string) => string | undefined,
-   * } & { [attr: string]: * }}
+   * } & { [attr: string]: any }}
    */
   let {
     base = '',
@@ -27,7 +27,7 @@
     fieldClasses,
     fieldError,
 
-    legendBase = 'ml-16p px-8p',
+    legendBase = 'ml-16tp px-8tp',
     legendClasses,
     legendError,
 

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

@@ -40,7 +40,7 @@
    *   iconRequired?: import('svelte').Snippet,
    *   iconValid?: import('svelte').Snippet,
    *   iconInvalid?: import('svelte').Snippet
-   * } & { [attr: string]: * }}
+   * } & { [attr: string]: any }}
    */
   let {
     value = $bindable(''),

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

@@ -1,4 +1,32 @@
 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;
+        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;

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

@@ -10,7 +10,7 @@
 	 *   placeholder: string,
 	 *   required: boolean,
 	 *   snippetWarning?: import('svelte').Snippet,
-	 * } & { [attr: string]: * }}
+	 * } & { [attr: string]: any }}
 	 */
 	let {
 		// Style

package/dist/components/layout/HkAppLayout.svelte.d.ts

@@ -1,4 +1,8 @@
 export default HkAppLayout;
+type HkAppLayout = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<AppLayoutProps>): void;
+};
 declare const HkAppLayout: import("svelte").Component<{
     bgPageSnippet?: import("svelte").Snippet | undefined;
     bgSnippet?: import("svelte").Snippet | undefined;
@@ -6,3 +10,10 @@ declare const HkAppLayout: import("svelte").Component<{
     bottomSnippet?: import("svelte").Snippet | undefined;
     children: import("svelte").Snippet;
 }, {}, "">;
+type AppLayoutProps = {
+    bgPageSnippet?: import("svelte").Snippet | undefined;
+    bgSnippet?: import("svelte").Snippet | undefined;
+    topSnippet?: import("svelte").Snippet | undefined;
+    bottomSnippet?: import("svelte").Snippet | undefined;
+    children: import("svelte").Snippet;
+};

package/dist/components/layout/HkGridLayers.svelte

@@ -28,7 +28,7 @@
 	 *   boxClasses?: string,
 	 *   boxAttrs?: { [attr: string]: * },
 	 *   children: import('svelte').Snippet
-	 * } & { [attr: string]: * }}
+	 * } & { [attr: string]: any }}
 	 */
 	const {
 		// Style

package/dist/components/layout/HkGridLayers.svelte.d.ts

@@ -1,4 +1,27 @@
 export default HkGridLayers;
+type HkGridLayers = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        base?: string;
+        bg?: string;
+        padding?: string;
+        margin?: string;
+        height?: 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 HkGridLayers: import("svelte").Component<{
     base?: string;
     bg?: string;

package/dist/components/panels/plain-panel/PlainPanel.svelte

@@ -12,7 +12,7 @@
    *   width?: string,
    *   classes?: string
    *   children?: import('svelte').Snippet,
-   * } & { [attr: string]: * }}
+   * } & { [attr: string]: any }}
    */
   const {
     // Style

package/dist/components/panels/plain-panel/PlainPanel.svelte.d.ts

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

package/dist/components/rows/panel-grid-row/PanelGridRow.svelte

@@ -13,7 +13,7 @@
    *   gap?: string,
    *   classes?: string,
    *   children?: import('svelte').Snippet,
-   * } & { [attr: string]: * }}
+   * } & { [attr: string]: any }}
    */
   const {
     // Style

package/dist/components/rows/panel-grid-row/PanelGridRow.svelte.d.ts

@@ -1,4 +1,18 @@
 export default PanelGridRow;
+type PanelGridRow = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        base?: string;
+        bg?: string;
+        justify?: "center" | "start" | "end" | "between" | "around" | "evenly" | "stretch" | "normal";
+        justifyItems?: "center" | "start" | "end" | "stretch";
+        gap?: string;
+        classes?: string;
+        children?: Snippet<[]>;
+    } & {
+        [attr: string]: any;
+    }>): void;
+};
 declare const PanelGridRow: import("svelte").Component<{
     base?: string;
     bg?: string;

package/dist/components/rows/panel-row-2/PanelRow2.svelte

@@ -14,7 +14,7 @@
    *   gap?: string,
    *   classes?: string,
    *   children?: import('svelte').Snippet,
-   * } & { [attr: string]: * }}
+   * } & { [attr: string]: any }}
    */
   const {
     // Style

package/dist/components/rows/panel-row-2/PanelRow2.svelte.d.ts

@@ -1,4 +1,18 @@
 export default PanelRow2;
+type PanelRow2 = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        base?: string;
+        bg?: string;
+        justify?: "center" | "start" | "end" | "between" | "around" | "evenly" | "stretch" | "normal";
+        justifyItems?: "center" | "start" | "end" | "stretch";
+        gap?: string;
+        classes?: string;
+        children?: Snippet<[]>;
+    } & {
+        [attr: string]: any;
+    }>): void;
+};
 declare const PanelRow2: import("svelte").Component<{
     base?: string;
     bg?: string;

package/dist/components/tab-bar/HkTabBar.svelte

@@ -23,7 +23,7 @@
 	 *   children: import('svelte').Snippet,
 	 *   onmount?: function,
 	 *   domElem?: HTMLElement
-	 * } & { [attr: string]: * }}
+	 * } & { [attr: string]: any }}
 	 */
 	let {
 		// Functional

package/dist/components/tab-bar/HkTabBar.svelte.d.ts

@@ -1,4 +1,22 @@
 export default HkTabBar;
+type HkTabBar = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        cols?: number;
+        base?: string;
+        bg?: string;
+        padding?: string;
+        margin?: string;
+        classes?: string;
+        style?: string;
+        instanceKey?: string | Symbol;
+        children: Snippet<[]>;
+        onmount?: Function;
+        domElem?: HTMLElement;
+    } & {
+        [attr: string]: any;
+    }>): void;
+};
 declare const HkTabBar: import("svelte").Component<{
     cols?: number;
     base?: string;

package/dist/components/tab-bar/HkTabBarSelector.svelte

@@ -18,7 +18,7 @@
    *   boxClasses?: string,
    *   boxAttrs?: { [attr: string]: * },
    *   instanceKey?: Symbol | string
-   * } & { [attr: string]: * }}
+   * } & { [attr: string]: any }}
    */
   let {
     // Style