@hkdigital/lib-sveltekit 0.1.5 → 0.1.7

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

@@ -26,6 +26,7 @@
     base,
     bg,
     classes,
+
     type = '',
     role = 'primary',
     size = 'md',

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/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 SteezeIconButton } from './button-icon-steeze/SteezeIconButton.svelte';

package/dist/components/icons/SteezeIcon.svelte

@@ -0,0 +1,96 @@
+<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
+   * subset - name of the icon subset (e.g. 'solid' or 'outline')
+   *
+   * @type {{
+   *   src: import('./typedef.js').IconSource,
+   *   size?: string,
+   *   subset?: string,
+   *   base?: string,
+   *   classes?: string
+   * } & { [attr: string]: any }}
+   */
+  let {
+    // Style
+    base,
+    classes,
+
+    size = 'md',
+    variant = '',
+
+    // Functional
+    src,
+    subset = 'default', // icon subset 'default'|'solid'|'outline'...
+
+    // States
+    // ...
+
+    // Attributes
+    ...attrs
+  } = $props();
+
+  /** @type {any} */
+  let icon = $state();
+
+  $effect(() => {
+    icon = src?.[subset] ?? 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;
+        subset?: string;
+        base?: string;
+        classes?: string;
+    } & {
+        [attr: string]: any;
+    }>): void;
+};
+declare const SteezeIcon: import("svelte").Component<{
+    src: import("./typedef.js").IconSource;
+    size?: string;
+    subset?: string;
+    base?: string;
+    classes?: string;
+} & {
+    [attr: string]: any;
+}, {}, "">;

package/dist/components/{icon → icons}/index.d.ts

@@ -1,3 +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/{icon → icons}/index.js

@@ -1,4 +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/inputs/text-input/TextInput.svelte

@@ -4,7 +4,7 @@
 
   import { Star, ExclamationTriangle, CheckCircle } from '@steeze-ui/heroicons';
 
-  import { HkIcon } from '../../icon/index.js';
+  import { HkIcon } from '../../icons/index.js';
 
   import {
     PRISTINE,

package/dist/components/tab-bar/typedef.d.ts

@@ -1,5 +1,5 @@
 type Tab = {
-    icon: import("../icon/typedef.js").IconSource;
+    icon: any;
     label?: string;
     route?: string;
     routePrefix?: string;

package/dist/design/tailwind-theme-extend.js

@@ -3,19 +3,28 @@
  * Using CSS Custom Properties (variables) for consistent scaling
  *
  * @note
- * Make sure to import scaling.vars.postcss in your application.
- * It contains CSS variables used by the Tailwind theme extensions defined
- * below
+ * The tailwind theme extensions require CSS custom
+ * properties (variables) to be set at the root level
+ * of your application to function properly.
  *
+ * @example Implementation in SvelteKit +layout.svelte
+ * <script>
+ *   import { onMount } from 'svelte';
  *
+ *   import '../app.postcss';
  *
- * FIXME>>>
+ *   let { children } = $props();
  *
- * e.g. in your app.postcss:
+ *   import { DESIGN, CLAMPING }
+ *     from './design-config.js';
  *
- * // @import "../src/lib/tailwind/extend/scaling/vars.postcss";
+ *   import { rootDesignVarsHTML }
+ *     from '@hkdigital/lib-sveltekit/util/design-system/index.js';
+ * </script>
  *
- * <<<FIXME
+ * <svelte:head>
+ *   {@html rootDesignVarsHTML(DESIGN, CLAMPING)}
+ * </svelte:head>
  *
  * Base units:
  * --scale-w: 0.052vw  (Viewport Width Point)

package/dist/themes/hkdev/components/buttons/button-icon-steeze.postcss

@@ -0,0 +1,22 @@
+@define-mixin component-button-icon-steeze {
+
+  /* @note using CSS vars defined in the parent button postcss */
+
+  /* Type-based styling for text buttons */
+  [data-component="button"][data-type="icon-steeze"] {
+
+    /*&[data-size="sm"] {
+      @apply px-8ut py-8ut;
+    }
+
+    &[data-size="md"] {
+      @apply px-16ut py-12ut;
+    }
+
+    &[data-size="lg"] {
+      @apply px-32ut py-16ut;
+    }*/
+
+  }
+
+}

package/dist/themes/hkdev/components/icons/icon-steeze.postcss

@@ -0,0 +1,22 @@
+@define-mixin component-icon-steeze {
+
+  /* @note using CSS vars defined in the parent button postcss */
+
+  /* Type-based styling for text buttons */
+  [data-component="icon"][data-type="steeze"] {
+
+    &[data-size="sm"] {
+      @apply w-16ct h-16ct;
+    }
+
+    &[data-size="md"] {
+      @apply w-28ct h-28ct;
+    }
+
+    &[data-size="lg"] {
+      @apply w-50ct h-50ct;
+    }
+
+  }
+
+}

package/dist/themes/hkdev/components.postcss

@@ -2,7 +2,6 @@
 
 /* Panels */
 /*@import "./components/panels/plain-panel.postcss";*/
-/*@import "./components/panels/speech-bubble.postcss";*/
 
 /* Rows */
 /*@import "./components/rows/panel-grid-row.postcss";*/
@@ -11,9 +10,13 @@
 /* Buttons */
 @import "./components/buttons/button.postcss";
 @import "./components/buttons/button-text.postcss";
+@import "./components/buttons/button-icon-steeze.postcss";
 
 /*@import "./components/buttons/skip-button.postcss";*/
 
+/* Icons */
+@import "./components/icons/icon-steeze.postcss";
+
 /* Inputs */
 @import "./components/inputs/text-input.postcss";
 
@@ -41,8 +44,11 @@
   /* Buttons */
   @mixin component-button;
   @mixin component-button-text;
-
+  @mixin component-button-icon-steeze;
   /*  @mixin buttons-skip-button;*/
+
+  @mixin component-icon-steeze;
+
   @mixin text_block;
 
   /* Inputs */

package/dist/util/design-system/css/clamp.d.ts

@@ -9,9 +9,9 @@ export function getClampParams(varName: string): any;
 /**
  * CSS clamp function implementation
  *
+ * @param {number} value - Value to clamp
  * @param {number} min - Minimum value
- * @param {number} val - Value to clamp
  * @param {number} max - Maximum value
  * @returns {number} Clamped value
  */
-export function clamp(min: number, val: number, max: number): number;
+export function clamp(value: number, min: number, max: number): number;

package/dist/util/design-system/css/clamp.js

@@ -56,11 +56,11 @@ export function getClampParams(varName) {
 /**
  * CSS clamp function implementation
  *
+ * @param {number} value - Value to clamp
  * @param {number} min - Minimum value
- * @param {number} val - Value to clamp
  * @param {number} max - Maximum value
  * @returns {number} Clamped value
  */
-export function clamp(min, val, max) {
-  return Math.max(min, Math.min(val, max));
+export function clamp(value, min, max) {
+  return Math.max(min, Math.min(value, max));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hkdigital/lib-sveltekit",
-	"version": "0.1.5",
+	"version": "0.1.7",
 	"author": {
 		"name": "HKdigital",
 		"url": "https://hkdigital.nl"