@hkdigital/lib-sveltekit 0.1.0 → 0.1.1

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,16 @@
+export default CheckButton;
+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/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/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/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__

@@ -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___

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

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/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/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-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/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/HkTabBarSelector.svelte

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

package/dist/design-system/design-config.d.ts

@@ -0,0 +1,156 @@
+export namespace DESIGN {
+    let width: number;
+    let height: number;
+}
+export namespace CLAMPING {
+    namespace ui {
+        let min: number;
+        let max: number;
+    }
+    namespace textContent {
+        let min_1: number;
+        export { min_1 as min };
+        let max_1: number;
+        export { max_1 as max };
+    }
+    namespace textHeading {
+        let min_2: number;
+        export { min_2 as min };
+        let max_2: number;
+        export { max_2 as max };
+    }
+    namespace textUi {
+        let min_3: number;
+        export { min_3 as min };
+        let max_3: number;
+        export { max_3 as max };
+    }
+}
+export const TEXT_POINT_SIZES: number[];
+export const VIEWPORT_POINT_SIZES: number[];
+export namespace TEXT_CONTENT_SIZES {
+    namespace sm {
+        let size: number;
+        let lineHeight: number;
+    }
+    namespace base {
+        let size_1: number;
+        export { size_1 as size };
+        let lineHeight_1: number;
+        export { lineHeight_1 as lineHeight };
+    }
+    namespace lg {
+        let size_2: number;
+        export { size_2 as size };
+        let lineHeight_2: number;
+        export { lineHeight_2 as lineHeight };
+    }
+}
+export namespace TEXT_HEADING_SIZES {
+    namespace h1 {
+        let size_3: number;
+        export { size_3 as size };
+        let lineHeight_3: number;
+        export { lineHeight_3 as lineHeight };
+    }
+    namespace h2 {
+        let size_4: number;
+        export { size_4 as size };
+        let lineHeight_4: number;
+        export { lineHeight_4 as lineHeight };
+    }
+    namespace h3 {
+        let size_5: number;
+        export { size_5 as size };
+        let lineHeight_5: number;
+        export { lineHeight_5 as lineHeight };
+    }
+    namespace h4 {
+        let size_6: number;
+        export { size_6 as size };
+        let lineHeight_6: number;
+        export { lineHeight_6 as lineHeight };
+    }
+    namespace h5 {
+        let size_7: number;
+        export { size_7 as size };
+        let lineHeight_7: number;
+        export { lineHeight_7 as lineHeight };
+    }
+}
+export namespace TEXT_UI_SIZES {
+    export namespace sm_1 {
+        let size_8: number;
+        export { size_8 as size };
+        let lineHeight_8: number;
+        export { lineHeight_8 as lineHeight };
+    }
+    export { sm_1 as sm };
+    export namespace base_1 {
+        let size_9: number;
+        export { size_9 as size };
+        let lineHeight_9: number;
+        export { lineHeight_9 as lineHeight };
+    }
+    export { base_1 as base };
+    export namespace lg_1 {
+        let size_10: number;
+        export { size_10 as size };
+        let lineHeight_10: number;
+        export { lineHeight_10 as lineHeight };
+    }
+    export { lg_1 as lg };
+}
+export namespace RADIUS_SIZES {
+    export let none: string;
+    export namespace xs {
+        let size_11: number;
+        export { size_11 as size };
+    }
+    export namespace sm_2 {
+        let size_12: number;
+        export { size_12 as size };
+    }
+    export { sm_2 as sm };
+    export namespace md {
+        let size_13: number;
+        export { size_13 as size };
+    }
+    export namespace lg_2 {
+        let size_14: number;
+        export { size_14 as size };
+    }
+    export { lg_2 as lg };
+    export let full: string;
+}
+export namespace BORDER_WIDTH_SIZES {
+    namespace thin {
+        let size_15: number;
+        export { size_15 as size };
+    }
+    namespace normal {
+        let size_16: number;
+        export { size_16 as size };
+    }
+    namespace thick {
+        let size_17: number;
+        export { size_17 as size };
+    }
+}
+export namespace STROKE_WIDTH_SIZES {
+    export namespace thin_1 {
+        let size_18: number;
+        export { size_18 as size };
+    }
+    export { thin_1 as thin };
+    export namespace normal_1 {
+        let size_19: number;
+        export { size_19 as size };
+    }
+    export { normal_1 as normal };
+    export namespace thick_1 {
+        let size_20: number;
+        export { size_20 as size };
+    }
+    export { thick_1 as thick };
+}

package/dist/design-system/design-config.js

@@ -0,0 +1,73 @@
+/* == Design dimensions == */
+
+export const DESIGN = {
+  width: 1024,
+  height: 768
+};
+
+/* == Scaling-clamping behaviour == */
+
+export const CLAMPING = {
+  ui: { min: 0.3, max: 2 },
+  textContent: { min: 0.75, max: 1.5 },
+  textHeading: { min: 0.75, max: 2.25 },
+  textUi: { min: 0.5, max: 1.25 }
+};
+
+/* == Text == */
+
+export const TEXT_POINT_SIZES = [
+  1, 2, 4, 6, 8, 10, 11, 12, 16, 20, 24, 28, 32, 36, 50
+];
+
+export const VIEWPORT_POINT_SIZES = [
+  1, 2, 4, 5, 6, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 120, 140, 160, 180,
+  200
+];
+
+export const TEXT_CONTENT_SIZES = {
+  sm: { size: 14, lineHeight: 1.5 },
+  base: { size: 16, lineHeight: 1.5 },
+  lg: { size: 18, lineHeight: 1.4 }
+};
+
+export const TEXT_HEADING_SIZES = {
+  h1: { size: 32, lineHeight: 1.1 },
+  h2: { size: 28, lineHeight: 1.1 },
+  h3: { size: 24, lineHeight: 1.2 },
+  h4: { size: 20, lineHeight: 1.2 },
+  h5: { size: 16, lineHeight: 1.3 }
+};
+
+export const TEXT_UI_SIZES = {
+  sm: { size: 14, lineHeight: 1.1 },
+  base: { size: 16, lineHeight: 1.1 },
+  lg: { size: 18, lineHeight: 1.1 }
+};
+
+/* == Border radius == */
+
+export const RADIUS_SIZES = {
+  none: '0px',
+  xs: { size: 1 },
+  sm: { size: 2 },
+  md: { size: 4 },
+  lg: { size: 8 },
+  full: '9999px'
+};
+
+/* == Border width == */
+
+export const BORDER_WIDTH_SIZES = {
+  thin: { size: 1 },
+  normal: { size: 2 },
+  thick: { size: 4 }
+};
+
+/* == Stroke width == */
+
+export const STROKE_WIDTH_SIZES = {
+  thin: { size: 1 },
+  normal: { size: 2 },
+  thick: { size: 4 }
+};

package/dist/design-system/tailwind-theme-extend.d.ts

@@ -0,0 +1,23 @@
+export const spacing: {
+    [x: string]: string;
+};
+export const fontSize: {
+    [x: string]: string | [string, {
+        lineHeight: number;
+    }];
+};
+export const borderRadius: {
+    [x: string]: string;
+};
+export const borderWidth: {
+    [x: string]: string;
+};
+export const strokeWidth: {
+    [x: string]: string;
+};
+export const outlineWidth: {
+    [x: string]: string;
+};
+export const outlineOffset: {
+    [x: string]: string;
+};

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

@@ -0,0 +1,151 @@
+/**
+ * Design System Configuration
+ * 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
+ *
+ *
+ *
+ * FIXME>>>
+ *
+ * e.g. in your app.postcss:
+ *
+ * // @import "../src/lib/tailwind/extend/scaling/vars.postcss";
+ *
+ * <<<FIXME
+ *
+ * Base units:
+ * --scale-w: 0.052vw  (Viewport Width Point)
+ * --scale-h: 0.09259vh (Viewport Height Point)
+ * --scale-viewport: min(var(--scale-w), var(--scale-h)) (Viewport Point)
+ * --scale-ui: clamp(0.3, var(--scale-viewport), 2) (UI Point)
+ * --scale-text-content: clamp(0.75, var(--scale-viewport), 1.5) (Content Text)
+ * --scale-text-heading: clamp(0.75, var(--scale-viewport), 2.25) (Heading Text)
+ * --scale-text-ui: clamp(0.5, var(--scale-viewport), 1.25) (UI Text)
+ *
+ * --
+ *
+ * UI Points (p) - Clamped scaling values
+ * Based on viewport scaling with minimum and maximum bounds
+ * to ensure usability across all screen sizes
+ *
+ * > PREFERRED METHOD FOR UI ELEMENT SCALING
+ *
+ * Examples:
+ * 5p  = 5px  at design size (clamps between 1.5px and 10px)
+ * 10p = 10px at design size (clamps between 3px and 20px)
+ * 20p = 20px at design size (clamps between 6px and 40px)
+ *
+ * Used for:
+ * - Component padding and margins
+ * - Interface element sizing
+ * - Any UI element that needs responsive scaling with guardrails
+ *
+ * --
+ *
+ * Text-Based Spacing Units (ut, ct, ht)
+ * Scaled by their respective text scaling variables
+ *
+ * > PREFERRED METHOD FOR TEXT-RELATED SPACING
+ *
+ * Examples:
+ * 4ut = calc(4px * var(--scale-text-ui))       // UI text spacing
+ * 4ct = calc(4px * var(--scale-text-content))  // Content text spacing
+ * 4ht = calc(4px * var(--scale-text-heading))  // Heading text spacing
+ *
+ * Used for:
+ * - ut: Button padding, form spacing, UI component margins
+ * - ct: Paragraph margins, list spacing, content gaps
+ * - ht: Heading margins, title spacing
+ *
+ * --
+ *
+ * Viewport Points (vp, wp, hp) - Responsive scaling values
+ * vp: Uses min of width/height scaling
+ * wp: Uses width-based scaling (1920px reference)
+ * hp: Uses height-based scaling (1080px reference)
+ *
+ * > ALTERNATIVE SCALING METHODS
+ *
+ * Examples:
+ * 10vp = calc(10px * var(--scale-viewport))
+ * 10wp = calc(10px * var(--scale-w))
+ * 10hp = calc(10px * var(--scale-h))
+ *
+ * Used for:
+ * - Interface scaling that needs to fit both width and height
+ * - Maintaining aspect ratio of design
+ * - Preventing overflow in either direction
+ */
+import {
+  generateTextBasedSpacing,
+  generateViewportBasedSpacing,
+  generateTextStyles,
+  generateBorderRadiusStyles,
+  generateWidthStyles
+} from '../util/design-system/tailwind.js';
+
+import {
+  TEXT_POINT_SIZES,
+  VIEWPORT_POINT_SIZES,
+  TEXT_CONTENT_SIZES,
+  TEXT_HEADING_SIZES,
+  TEXT_UI_SIZES,
+  RADIUS_SIZES,
+  BORDER_WIDTH_SIZES,
+  STROKE_WIDTH_SIZES
+} from './design-config.js';
+
+/* == Internals */
+
+const TEXT_BASED_SPACING = generateTextBasedSpacing(TEXT_POINT_SIZES);
+const VIEWPORT_BASED_SPACING =
+  generateViewportBasedSpacing(VIEWPORT_POINT_SIZES);
+
+/* == Exports */
+
+export const spacing = {
+  ...VIEWPORT_BASED_SPACING,
+  ...TEXT_BASED_SPACING
+};
+
+export const fontSize = {
+  ...TEXT_BASED_SPACING,
+
+  // Named styles
+  ...generateTextStyles(TEXT_CONTENT_SIZES, 'content'),
+  ...generateTextStyles(TEXT_HEADING_SIZES, 'heading'),
+  ...generateTextStyles(TEXT_UI_SIZES, 'ui')
+};
+
+export const borderRadius = {
+  // Named styles
+  ...generateBorderRadiusStyles(RADIUS_SIZES)
+};
+
+export const borderWidth = {
+  // Named styles
+  ...generateWidthStyles(BORDER_WIDTH_SIZES, 'width')
+};
+
+export const strokeWidth = {
+  // Named styles
+  ...generateWidthStyles(STROKE_WIDTH_SIZES, 'width')
+};
+
+export const outlineWidth = {
+  // Named styles
+  ...generateWidthStyles(STROKE_WIDTH_SIZES, '')
+};
+
+export const outlineOffset = {
+  // Named styles
+  ...generateWidthStyles(STROKE_WIDTH_SIZES, '')
+};
+
+// console.log('borderWidth', borderWidth);
+// console.log('outlineWidth', outlineWidth);
+// console.log('outlineOffset', outlineOffset);

package/dist/themes/hkdev/components/blocks/text-block.postcss

@@ -0,0 +1,41 @@
+@define-mixin text_block {
+
+/* .on-primary-dark
+{
+  & [data-title-text-button-block] {
+    & > .title-box {
+      @apply text-white;
+    }
+
+    & > .text-box {
+      ...text color
+    }  
+  }
+} */
+
+[data-title-text-button-block] {
+
+  &.block-width {
+    @apply w-1/2;
+  }
+
+  & > .title-box {
+    @apply text-heading-h3;
+    @apply uppercase;
+  }
+
+  & > .content-box .p {
+    @apply text-content-base;
+  }
+
+  & > .content-box:has( + .footer-box )
+  {
+    @apply mb-30p; /* 10p + 20p */
+  }
+
+  & > .footer-box {
+  }
+}
+
+
+}