@hkdigital/lib-sveltekit 0.1.6 → 0.1.7

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

@@ -1,75 +1,76 @@
-<script>
-  import { toStateClasses } from '../../../util/design-system/index.js';
-
-  /**
-   * @type {{
-   *   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,
-   *   [key: string]: any
-   * }}
-   */
-  const {
-    // Style
-    base,
-    bg,
-    classes,
-    type = '',
-    role = 'primary',
-    size = 'md',
-    variant = '',
-
-    // 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}
-  type="button"
-  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>
+<script>
+  import { toStateClasses } from '../../../util/design-system/index.js';
+
+  /**
+   * @type {{
+   *   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,
+   *   [key: string]: any
+   * }}
+   */
+  const {
+    // Style
+    base,
+    bg,
+    classes,
+
+    type = '',
+    role = 'primary',
+    size = 'md',
+    variant = '',
+
+    // 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}
+  type="button"
+  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

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

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,
+   *   size?: string,
+   *   subset?: string,
+   *   [key: string]: any
+   * }}
+   */
+  const {
+    // Icon
+    src,
+    iconSize,
+    subset,
+
+    // Snippets
+    children,
+
+    // Attributes
+    ...attrs
+  } = $props();
+</script>
+
+<Button type="icon-steeze" {...attrs}>
+  <SteezeIcon {src} size={iconSize} {subset} />
+</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;
+        size?: string;
+        subset?: string;
+    }>): void;
+};
+declare const SteezeIconButton: import("svelte").Component<{
+    [key: string]: any;
+    src: import("../../icons/typedef.js").IconSource;
+    size?: string;
+    subset?: string;
+}, {}, "">;

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

@@ -1,21 +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>
+<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

@@ -1,4 +1,11 @@
 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,2 +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

@@ -1,2 +1,3 @@
-export { default as Button } from './button/Button.svelte';
-export { default as TextButton } from './button-text/TextButton.svelte';
+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/hkdev/blocks/TextBlock.svelte

@@ -1,47 +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>
+<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

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

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

@@ -1,63 +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>
+<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

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