@hkdigital/lib-sveltekit 0.1.0 → 0.1.2

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

@@ -1,4 +1,23 @@
 export default HkTabBarSelector;
+type HkTabBarSelector = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        base?: string;
+        bg?: string;
+        classes?: string;
+        boxBase?: string;
+        boxBg?: string;
+        boxPadding?: string;
+        boxMargin?: string;
+        boxClasses?: string;
+        boxAttrs?: {
+            [attr: string]: any;
+        };
+        instanceKey?: string | Symbol;
+    } & {
+        [attr: string]: any;
+    }>): void;
+};
 declare const HkTabBarSelector: import("svelte").Component<{
     base?: string;
     bg?: string;

package/dist/components/widgets/compare-left-right/CompareLeftRight.svelte.d.ts

@@ -1,4 +1,14 @@
 export default CompareLeftRight;
+type CompareLeftRight = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        leftContent?: Snippet<[]>;
+        rightContent?: Snippet<[]>;
+        classes?: string;
+        dividerColor?: string;
+        handleColor?: string;
+    } & Record<string, any>>): void;
+};
 declare const CompareLeftRight: import("svelte").Component<{
     leftContent?: import("svelte").Snippet;
     rightContent?: import("svelte").Snippet;

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: {
+    [key: string]: string;
+};
+export const strokeWidth: {
+    [key: string]: string;
+};
+export const outlineWidth: {
+    [key: string]: string;
+};
+export const outlineOffset: {
+    [key: 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 {
+  }
+}
+
+
+}

package/dist/themes/hkdev/components/buttons/button-text.postcss

@@ -0,0 +1,34 @@
+@define-mixin component-button-text {
+
+  /* @note using CSS vars defined in the parent button postcss */
+
+  /* Type-based styling for text buttons */
+  [data-component="button"][data-type="text"] {
+    /* Typography settings */
+    @apply text-ui-base uppercase;
+    @apply whitespace-nowrap;
+
+    /* Adjust padding to better fit text */
+    /*&[data-size="sm"] {
+      @apply px-8ut py-8ut;
+    }
+
+    &[data-size="md"] {
+      @apply px-16ut py-12ut;
+    }
+
+    &[data-size="lg"] {
+      @apply px-32ut py-16ut;
+    }*/
+
+    /* Role-specific text adjustments */
+    &[data-role="primary"] {
+      @apply font-extrabold;
+    }
+
+    &[data-role="secondary"] {
+      @apply font-bold;
+    }
+  }
+
+}

package/dist/themes/hkdev/components/buttons/button.postcss

@@ -0,0 +1,138 @@
+@define-mixin component-button {
+  [data-component="button"] {
+    /* ---- Core Button Variables ---- */
+    /* These are the most reusable across button types */
+    --btn-border-width: 2px;
+    --btn-transition-duration: 150ms;
+    --btn-disabled-opacity: 0.6;
+    --btn-focus-ring-width: 3px;
+    --btn-focus-ring-opacity: 0.4;
+
+    /* ---- Primary Button Variables ---- */
+    --btn-primary-bg: var(--color-primary-500);
+    --btn-primary-text: var(--color-primary-50);
+    --btn-primary-border: var(--color-primary-500);
+    --btn-primary-selected-bg: var(--color-primary-700);
+    --btn-primary-selected-border: var(--color-primary-800);
+    --btn-primary-selected-text: var(--color-primary-50);
+    --btn-primary-hover-bg: var(--color-primary-600);
+    --btn-primary-hover-border: var(--color-primary-600);
+    --btn-primary-focus-outline: var(--color-primary-800);
+
+    /* ---- Secondary Button Variables ---- */
+    --btn-secondary-bg: transparent;
+    --btn-secondary-text: var(--color-secondary-500);
+    --btn-secondary-border: var(--color-secondary-500);
+    --btn-secondary-selected-bg: var(--color-secondary-100);
+    --btn-secondary-selected-border: var(--color-secondary-600);
+    --btn-secondary-selected-text: var(--color-secondary-800);
+    --btn-secondary-hover-bg: var(--color-secondary-50);
+    --btn-secondary-hover-border: var(--color-secondary-500);
+    --btn-secondary-focus-outline: var(--color-secondary-800);
+
+    /* ---- State Variables ---- */
+    --btn-active-transform: scale(0.98);
+    --btn-active-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+
+    --btn-error-border: var(--color-error-500);
+    --btn-loading-opacity: 0.8;
+
+    /* Base styles */
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    position: relative;
+    transition-property: background-color, color, border-color, transform, box-shadow;
+    transition-duration: var(--btn-transition-duration);
+  }
+
+  /* Size variants */
+  [data-component="button"][data-size="sm"] {
+    @apply rounded-xs;
+    @apply py-8ut px-8ut;
+    @apply min-w-24ut min-h-24ut;
+  }
+
+  [data-component="button"][data-size="md"] {
+    @apply rounded-sm;
+    @apply py-8ut px-16ut;
+    @apply min-w-32ut min-h-32ut;
+  }
+
+  [data-component="button"][data-size="lg"] {
+    @apply rounded-sm;
+    @apply py-16ut px-36ut;
+    @apply min-w-36ut min-h-36ut;
+  }
+
+  /* Role-based styling for primary buttons */
+  [data-component="button"][data-role="primary"] {
+    @apply border-width-normal;
+    border-color: rgb(var(--btn-primary-border));
+    background-color: rgb(var(--btn-primary-bg));
+    color: rgb(var(--btn-primary-text));
+
+    &:hover:not(:disabled):not(.state-selected) {
+      border-color: rgb(var(--btn-primary-hover-border));
+      background-color: rgb(var(--btn-primary-hover-bg));
+    }
+
+    &:focus-visible {
+      @apply outline outline-normal outline-offset-normal;
+      outline-color: rgb(var(--btn-primary-focus-outline));
+    }
+
+    &.state-selected {
+      background-color: rgb(var(--btn-primary-selected-bg));
+      border-color: rgb(var(--btn-primary-selected-border));
+      color: rgb(var(--btn-primary-selected-text));
+    }
+  }
+
+  /* Role-based styling for secondary buttons */
+  [data-component="button"][data-role="secondary"] {
+    @apply border-width-normal;
+    border-color: rgb(var(--btn-secondary-border));
+    color: rgb(var(--btn-secondary-text));
+    background-color: var(--btn-secondary-bg);
+
+    &:hover:not(:disabled):not(.state-selected) {
+      background-color: rgb(var(--btn-secondary-hover-bg));
+      border-color: rgb(var(--btn-secondary-hover-border));
+    }
+
+    &:focus-visible {
+      @apply outline outline-normal outline-offset-normal;
+      outline-color: rgb(var(--btn-secondary-focus-outline));
+    }
+
+    &.state-selected {
+      background-color: rgb(var(--btn-secondary-selected-bg));
+      border-color: rgb(var(--btn-secondary-selected-border));
+      color: rgb(var(--btn-secondary-selected-text));
+    }
+  }
+
+  /* State-based styling */
+  [data-component="button"].state-active {
+    transform: var(--btn-active-transform);
+    box-shadow: var(--btn-active-shadow);
+  }
+
+  [data-component="button"].state-error {
+    border-color: rgb(var(--btn-error-border));
+  }
+
+  [data-component="button"].state-loading {
+    opacity: var(--btn-loading-opacity);
+    cursor: wait;
+  }
+
+  /* Disabled state */
+  [data-component="button"]:disabled {
+    cursor: not-allowed;
+    opacity: var(--btn-disabled-opacity);
+    pointer-events: none;
+  }
+}

package/dist/themes/hkdev/components/buttons/button.postcss__

@@ -0,0 +1,40 @@
+@define-mixin component-button {
+
+  [data-component="button"][data-type="plain"] {
+
+    &:not([disabled]) {
+      &[data-role="primary"] {
+        @apply ...
+      }
+
+      &[data-role="secondary"] {
+        @apply ...
+      }
+    }
+
+    &[disabled] {
+      &[data-role="primary"] {
+        @apply ...
+      }
+
+      &[data-role="secondary"] {
+        @apply ...
+      }
+    }
+  }
+
+  [data-component="button"][data-type="plain"] {
+
+    &[data-size="sm"] {
+      @apply ...
+    }
+
+    &[data-size="md"] {
+      @apply ...
+    }
+
+    &[data-size="lg"] {
+      @apply ...
+    }
+  }
+}